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