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