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