skins/ajax_scripts/folder_contents_script.js

   1 // (c) Benoît PIN 2006-2007
   2 // http://plinn.org
   3 // Licence GPL
   4 //
   5 //
   6
   7 var FolderDDropControler;
   8 var DropTarget;
   9 var loadListing;
  10 var DDFolderUploader;
  11
  12 (function(){
  13
  14 function getTargetRow(evt){
  15         var target = getTargetedObject(evt);
  16         while (target.nodeName != "TR")
  17                 target = target.parentNode;
  18         return target;
  19 }
  20
  21 FolderDDropControler = function(listing) {
  22         this.folderUrl = document.getElementById("FolderUrl").innerHTML;
  23         this.targetRow = null;
  24         this.lastOverPosition = null;
  25         this.prevDirUp = null;
  26         this.noOver = true;
  27         this.listing = listing;
  28         var thisControler = this;
  29         this.listing.onmousedown        = function(evt) {thisControler.drag(evt);};
  30         this.listing.onmouseover        = function(evt) {thisControler.moveRow(evt);};
  31         this.listing.onmouseup          = function(evt) {thisControler.drop(evt);};
  32         addListener(this.listing, 'click', function(evt) {thisControler.disableClickAfterDrop(evt);});
  33         addListener(this.listing, 'click', function(evt) {thisControler.selectCBRange(evt);});
  34
  35         if (browser.isIE) {
  36                 this.listing.ondragstart = function() { window.event.returnValue = false;};
  37         }
  38 }
  39
  40 FolderDDropControler.prototype.drag =  function(evt){
  41         var target = getTargetedObject(evt);
  42         if (target.nodeName == "INPUT") return true;
  43         disableDefault(evt);
  44         var targetRow = getTargetRow(evt);
  45         targetRow.style.backgroundColor = base_properties["highLightColor"];
  46         this.listing.style.cursor = "move";
  47         this.targetRow = targetRow;
  48         this.lastOverPosition = targetRow.pos;
  49 };
  50
  51 FolderDDropControler.prototype.moveRow =  function(evt){
  52         var targetRow = this.targetRow;
  53         if (targetRow != null) {
  54                 this.noOver = false;
  55                 if (browser.isIE) document.selection.clear();
  56                 var overRow = getTargetRow(evt);
  57
  58                 if (overRow.pos == targetRow.pos) return;
  59
  60                 if (this.lastOverPosition < overRow.pos) { // move up
  61                         this.listing.insertBefore(targetRow, overRow.nextSibling);
  62                         this.prevDirUp = true;
  63                         this.lastOverPosition = overRow.pos;
  64                 }
  65                 else if (this.lastOverPosition > overRow.pos) { // move down
  66                         this.listing.insertBefore(targetRow, overRow);
  67                         this.prevDirUp = false;
  68                         this.lastOverPosition = overRow.pos;
  69                 }
  70                 else {
  71                         if (this.prevDirUp) {
  72                                 this.prevDirUp = false;
  73                                 this.listing.insertBefore(targetRow, overRow);
  74                         }
  75                         else {
  76                                 this.prevDirUp = true;
  77                                 this.listing.insertBefore(targetRow, overRow.nextSibling);
  78                         }
  79                 }
  80         }
  81 };
  82
  83 FolderDDropControler.prototype.drop =  function(evt){
  84         var targetRow = this.targetRow;
  85         if (targetRow != null) {
  86                 targetRow.style.backgroundColor="";
  87                 this.listing.style.cursor = "";
  88                 if (this.noOver) {
  89                         var thisControler = this;
  90                         setTimeout(function(){thisControler.reset();}, 50);
  91                         return;
  92                 }
  93                 if (this.lastOverPosition != null) {
  94                         // get new object position.
  95                         var trim = 0;
  96                         if (targetRow.pos < this.lastOverPosition && !this.prevDirUp)
  97                                 trim = -1;
  98                         else if (targetRow.pos > this.lastOverPosition && this.prevDirUp)
  99                                 trim = 1;
 100
 101                         // construct url
 102                         var object_id = targetRow.getElementsByTagName("INPUT")[0].getAttribute("value");
 103                         var url = this.folderUrl + "/moveObjectIdToPosition";
 104                         var form ="object_id=" + object_id + "&position:int=" +
 105                                            String(this.lastOverPosition - 1 + trim);
 106
 107                         // reinitialize positions
 108                         var rows = this.listing.getElementsByTagName("TR"), row;
 109                         for (var i = 0 ; i < rows.length ; i++) {
 110                                 row = rows[i];
 111                                 row.pos = i+1;
 112                                 if (i % 2 == 0)
 113                                         row.className = "even";
 114                                 else
 115                                         row.className = "odd";
 116                         }
 117
 118                         // send request
 119                         var req = new XMLHttpRequest();
 120                         req.open("POST", url, true);
 121                         req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
 122                         req.send(form);
 123                         var thisControler = this;
 124                         setTimeout(function(){thisControler.reset();}, 50);
 125                 }
 126         }
 127 };
 128
 129 FolderDDropControler.prototype.disableClickAfterDrop = function(evt) {
 130         var target = getTargetedObject(evt);
 131         if (!this.noOver) {
 132                 disablePropagation(evt);
 133                 disableDefault(evt);
 134         }
 135         this.reset();
 136 };
 137
 138 FolderDDropControler.prototype.selectCBRange = function(evt) {
 139 };
 140
 141
 142 FolderDDropControler.prototype.reset = function() {
 143         this.targetRow = null;
 144         this.lastOverPosition = null;
 145         this.prevDirUp = null;
 146         this.noOver = true;
 147 }
 148
 149
 150
 151 DropTarget = function(node, folderDDControler) {
 152         this.folderDDControler = folderDDControler;
 153         this.batchSize = parseInt(document.getElementById("BatchNavigationSize").innerHTML);
 154         var thisControler = this;
 155         node.onmouseup = function(evt){thisControler.drop(evt);};
 156         node.onmouseover = function(evt) {thisControler.highlightTarget(evt);};
 157         node.onmouseout = function(evt) {
 158                 var target = getTargetedObject(evt);
 159                 if (target.nodeName == "A" && target.className == "dropPageTarget")
 160                         target.className = "";
 161         };
 162 }
 163
 164 DropTarget.prototype.drop = function(evt) {
 165         var target = getTargetedObject(evt);
 166         if (target.nodeName == "A" &&
 167                 target.className != "previous" &&
 168                 target.className != "next") {
 169                 var pageNumber = parseInt(target.innerHTML);
 170                 var targetRow = this.folderDDControler.targetRow;
 171                 if ( !isNaN(pageNumber) && targetRow) {
 172                         this.folderDDControler.reset();
 173                 var object_id = targetRow.getElementsByTagName("INPUT")[0].getAttribute("value");
 174                 var url = this.folderDDControler.folderUrl + "/moveObjectIdToPosition";
 175                 var form ="object_id=" + object_id + "&position:int=" + String(this.batchSize * (pageNumber-1));
 176                         // send request
 177                         var req = new XMLHttpRequest();
 178                         req.open("POST", url, true);
 179                         req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
 180                         req.send(form);
 181                         req.onreadystatechange = function() {
 182                                 if (req.readyState == 4) {
 183                                         switch (req.status) {
 184                                                 case 200:
 185                                                 case 204:
 186                                                 case 1223:
 187                                                         raiseMouseEvent(target, "click");
 188                                                         break;
 189                                                 default:
 190                                                         alert('Error: ' + req.status);
 191                                         };
 192                                 }
 193                         };
 194                 }
 195         }
 196 };
 197
 198 DropTarget.prototype.highlightTarget = function(evt){
 199         if (browser.isIE) document.selection.clear();
 200         var target = getTargetedObject(evt);
 201         if (this.folderDDControler.targetRow &&
 202                 target.nodeName == "A" &&
 203                 target.className != "previous" &&
 204                 target.className != "next")
 205                 target.className = "dropPageTarget";
 206 };
 207
 208
 209
 210
 211 loadListing = function(evt) {
 212         var target = getTargetedObject(evt);
 213         disableDefault(evt);
 214         disablePropagation(evt);
 215         switch (target.nodeName) {
 216                 case "A" :
 217                         var parts = target.href.split('?')
 218                         var url = parts[0];
 219                         var query = '';
 220                         if (parts.length == 2)
 221                                 query = parts[1];
 222
 223                         var urlParts = url.split("/");
 224                         var url = urlParts.slice(0,urlParts.length-1).join("/");
 225                         if (query.search("template") == -1)
 226                                 query += "&template=folder_contents_macros&macro=FolderListing&fragmentId=FolderListing";
 227                         url = url + "/folder_contents?" + query;
 228
 229                         var fi = new FragmentImporter(url);
 230                         fi.load();
 231                         break;
 232
 233                 case "IMG" :
 234                         if (target.id == 'SetSortingAsDefault') {
 235                                 var parent = target.parentNode;
 236                                 var url = parent.href;
 237                                 url = url.replace("folder_contents", "folder_sort_control");
 238                                 parent.parentNode.removeChild(parent);
 239
 240                                 var req = new XMLHttpRequest();
 241                                 req.open("GET", url, true);
 242                                 req.send(null);
 243                         }
 244                         break;
 245         }
 246         return false;
 247 }
 248
 249 DDFolderUploader = function(dropbox, uploadUrl, listing) {
 250         DDFileUploaderBase.apply(this, [dropbox, uploadUrl]);
 251         this.listing = listing;
 252         this.progressBarMaxSize = listing.clientWidth;
 253         var thead = listing;
 254         do {
 255                 thead = thead.previousSibling;
 256         } while (thead.tagName !== 'THEAD')
 257
 258         var cells = thead.getElementsByTagName('th');
 259         var cell;
 260         this.tableSpan = 0;
 261         for (var i = 0 ; i < cells.length ; i++) {
 262                 cell = cells[i];
 263                 this.tableSpan += cell.getAttribute('colspan') ? Number(cell.getAttribute('colspan')) : 1;
 264         }
 265         var lastRow = listing.lastChild;
 266         while(lastRow && lastRow.tagName !== 'TR') {
 267                 lastRow = lastRow.previousSibling;
 268         }
 269         this.lastRowClassName = lastRow ? lastRow.className : 'even';
 270 };
 271
 272 copyPrototype(DDFolderUploader, DDFileUploaderBase);
 273
 274
 275 DDFolderUploader.prototype.createRow = function(file) {
 276         var row = document.createElement('tr');
 277         row.file = file;
 278         row.className = this.lastRowClassName === 'even' ? 'odd' : 'even';
 279         this.lastRowClassName = row.className;
 280         var td = document.createElement('td');
 281         td.setAttribute('colspan', this.tableSpan);
 282         var relSpan = document.createElement('span');
 283         relSpan.style.position = 'relative';
 284         td.appendChild(relSpan);
 285         var progressBar = document.createElement('span');
 286         progressBar.className = 'upload-progress';
 287         row.progressBar = progressBar;
 288         relSpan.appendChild(progressBar);
 289         var fileNameSpan = document.createElement('span');
 290         fileNameSpan.innerHTML = file.name;
 291         td.appendChild(fileNameSpan);
 292         row.appendChild(td);
 293         this.listing.appendChild(row);
 294         this.progressBarMaxSize = row.clientWidth;
 295         return row;
 296 };
 297
 298 // Methods about upload
 299 DDFolderUploader.prototype.handleFiles = function(files) {
 300         var file, i, row;
 301         for (i = 0; i < files.length; i++) {
 302                 file = files[i];
 303                 row = this.createRow(file);
 304                 this.uploadQueuePush(row);
 305         }
 306 };
 307
 308 DDFolderUploader.prototype.beforeUpload = function(item) {
 309         this.uploadedItem = item;
 310         this.progressBar = item.progressBar;
 311 };
 312
 313 DDFolderUploader.prototype.uploadCompleteHandlerCB = function(req) {
 314         var item = this.uploadedItem;
 315         var row = getCopyOfNode(req.responseXML.documentElement.firstChild);
 316         row.className = item.className;
 317
 318         if (req.status === 200) {
 319                 // update
 320         console.log('todo');
 321         }
 322         else if(req.status === 201) {
 323                 // creation
 324                 this.listing.replaceChild(row, item);
 325                 this.progressBarMaxSize = row.clientWidth;
 326         }
 327 };
 328
 329 DDFolderUploader.prototype.progressHandlerCB = function(progress) {
 330         // 0 <= progress <= 1
 331         var size = this.progressBarMaxSize * progress;
 332         size = Math.round(size);
 333         this.progressBar.style.width = size + 'px';
 334 };
 335
 336 }());