[Summary view] [Print] [Text view]

   1  // $Id: imce_extras.js,v 1.3.2.4 2010/10/06 04:38:09 ufku Exp $
   2  //This pack implemets: keyboard shortcuts, file sorting, resize bars, and inline thumbnail preview.
   3  
   4  (function($) {
   5  
   6  // add scale calculator for resizing.
   7  imce.hooks.load.push(function () {
   8    $('#edit-width, #edit-height').focus(function () {
   9      var fid, r, w, isW, val;
  10      if (fid = imce.vars.prvfid) {
  11        isW = this.id == 'edit-width', val =  imce.el(isW ? 'edit-height' : 'edit-width').value*1;
  12        if (val && (w = imce.isImage(fid)) && (r = imce.fids[fid].cells[3].innerHTML*1 / w))
  13          this.value = Math.round(isW ? val/r : val*r);
  14      }
  15    });
  16  });
  17  
  18  // Shortcuts
  19  var F = null;
  20  imce.initiateShortcuts = function () {
  21    $(imce.NW).attr('tabindex', '0').keydown(function (e) {
  22      if (F = imce.dirKeys['k'+ e.keyCode]) return F(e);
  23    });
  24    $(imce.FLW).attr('tabindex', '0').keydown(function (e) {
  25      if (F = imce.fileKeys['k'+ e.keyCode]) return F(e);
  26    }).focus();
  27  };
  28  
  29  //shortcut key-function pairs for directories
  30  imce.dirKeys = {
  31    k35: function (e) {//end-home. select first or last dir
  32      var L = imce.tree['.'].li;
  33      if (e.keyCode == 35) while (imce.hasC(L, 'expanded')) L = L.lastChild.lastChild;
  34      $(L.childNodes[1]).click().focus();
  35    },
  36    k37: function (e) {//left-right. collapse-expand directories.(right may also move focus on files)
  37      var L, B = imce.tree[imce.conf.dir], right = e.keyCode == 39;
  38      if (B.ul && (right ^ imce.hasC(L = B.li, 'expanded')) ) $(L.firstChild).click();
  39      else if (right) $(imce.FLW).focus();
  40    },
  41    k38: function (e) {//up. select the previous directory
  42      var B = imce.tree[imce.conf.dir];
  43      if (L = B.li.previousSibling) {
  44        while (imce.hasC(L, 'expanded')) L = L.lastChild.lastChild;
  45        $(L.childNodes[1]).click().focus();
  46      }
  47      else if ((L = B.li.parentNode.parentNode) && L.tagName == 'LI') $(L.childNodes[1]).click().focus();
  48    },
  49    k40: function (e) {//down. select the next directory
  50      var B = imce.tree[imce.conf.dir], L = B.li, U = B.ul;
  51      if (U && imce.hasC(L, 'expanded')) $(U.firstChild.childNodes[1]).click().focus();
  52      else do {if (L.nextSibling) return $(L.nextSibling.childNodes[1]).click().focus();
  53      }while ((L = L.parentNode.parentNode).tagName == 'LI');
  54    }
  55  };
  56  //add equal keys
  57  imce.dirKeys.k36 = imce.dirKeys.k35;
  58  imce.dirKeys.k39 = imce.dirKeys.k37;
  59  
  60  //shortcut key-function pairs for files
  61  imce.fileKeys = {
  62    k38: function (e) {//up-down. select previous-next row
  63      var fid = imce.lastFid(), i = fid ? imce.fids[fid].rowIndex+e.keyCode-39 : 0;
  64      imce.fileClick(imce.findex[i], e.ctrlKey, e.shiftKey);
  65    },
  66    k35: function (e) {//end-home. select first or last row
  67      imce.fileClick(imce.findex[e.keyCode == 35 ? imce.findex.length-1 : 0], e.ctrlKey, e.shiftKey);
  68    },
  69    k13: function (e) {//enter-insert. send file to external app.
  70      imce.send(imce.vars.prvfid);
  71      return false;
  72    },
  73    k37: function (e) {//left. focus on directories
  74      $(imce.tree[imce.conf.dir].a).focus();
  75    },
  76    k65: function (e) {//ctrl+A to select all
  77      if (e.ctrlKey && imce.findex.length) {
  78        var fid = imce.findex[0].id;
  79        imce.selected[fid] ? (imce.vars.lastfid = fid) : imce.fileClick(fid);//select first row
  80        imce.fileClick(imce.findex[imce.findex.length-1], false, true);//shift+click last row
  81        return false;
  82      }
  83    }
  84  };
  85  //add equal keys
  86  imce.fileKeys.k40 = imce.fileKeys.k38;
  87  imce.fileKeys.k36 = imce.fileKeys.k35;
  88  imce.fileKeys.k45 = imce.fileKeys.k13;
  89  //add default operation keys. delete, R(esize), T(humbnails), U(pload)
  90  $.each({k46: 'delete', k82: 'resize', k84: 'thumb', k85: 'upload'}, function (k, op) {
  91    imce.fileKeys[k] = function (e) {
  92      if (imce.ops[op] && !imce.ops[op].disabled) imce.opClick(op);
  93    };
  94  });
  95  
  96  //prepare column sorting
  97  imce.initiateSorting = function() {
  98    //add cache hook. cache the old directory's sort settings before the new one replaces it.
  99    imce.hooks.cache.push(function (cache, newdir) {
 100      cache.cid = imce.vars.cid, cache.dsc = imce.vars.dsc;
 101    });
 102    //add navigation hook. refresh sorting after the new directory content is loaded.
 103    imce.hooks.navigate.push(function (data, olddir, cached) {
 104      cached ? imce.updateSortState(data.cid, data.dsc) : imce.firstSort();
 105    });
 106    imce.vars.cid = imce.cookie('imcecid') * 1;
 107    imce.vars.dsc = imce.cookie('imcedsc') * 1;
 108    imce.cols = imce.el('file-header').rows[0].cells;
 109    $(imce.cols).click(function () {imce.columnSort(this.cellIndex, imce.hasC(this, 'asc'));});
 110    imce.firstSort();
 111  };
 112  
 113  //sort the list for the first time
 114  imce.firstSort = function() {
 115    imce.columnSort(imce.vars.cid, imce.vars.dsc);
 116  };
 117  
 118  //sort file list according to column index.
 119  imce.columnSort = function(cid, dsc) {
 120    if (imce.findex.length < 2) return;
 121    if (cid == imce.vars.cid && dsc != imce.vars.dsc) {
 122      imce.findex.reverse();
 123    }
 124    else {
 125      var func = 'sort'+ (cid == 0 ? 'Str' : 'Num') + (dsc ? 'Dsc' : 'Asc');
 126      var prop = cid == 2 || cid == 3 ? 'innerHTML' : 'id';
 127      //sort rows
 128      imce.findex.sort(cid ? function(r1, r2) {return imce[func](r1.cells[cid][prop], r2.cells[cid][prop])} : function(r1, r2) {return imce[func](r1.id, r2.id)});
 129    }
 130    //insert sorted rows
 131    for (var row, i=0; row = imce.findex[i]; i++) {
 132      imce.tbody.appendChild(row);
 133    }
 134    imce.updateSortState(cid, dsc);
 135  };
 136  
 137  //update column states
 138  imce.updateSortState = function(cid, dsc) {
 139    $(imce.cols[imce.vars.cid]).removeClass(imce.vars.dsc ? 'desc' : 'asc');
 140    $(imce.cols[cid]).addClass(dsc ? 'desc' : 'asc');
 141    imce.vars.cid != cid && imce.cookie('imcecid', imce.vars.cid = cid);
 142    imce.vars.dsc != dsc && imce.cookie('imcedsc', (imce.vars.dsc = dsc) ? 1 : 0);
 143  };
 144  
 145  //sorters
 146  imce.sortStrAsc = function(a, b) {return a.toLowerCase() < b.toLowerCase() ? -1 : 1;};
 147  imce.sortStrDsc = function(a, b) {return imce.sortStrAsc(b, a);};
 148  imce.sortNumAsc = function(a, b) {return a-b;};
 149  imce.sortNumDsc = function(a, b) {return b-a};
 150  
 151  //set resizers for resizable areas and recall previous dimensions
 152  imce.initiateResizeBars = function () {
 153    imce.setResizer('#navigation-resizer', 'X', imce.NW, null, 1, function(p1, p2, m) {
 154      p1 != p2 && imce.cookie('imcenww', p2);
 155    });
 156    imce.setResizer('#browse-resizer', 'Y', imce.BW, imce.PW, 50, function(p1, p2, m) {
 157      p1 != p2 && imce.cookie('imcebwh', p2);
 158    });
 159    imce.recallDimensions();
 160  };
 161  
 162  //set a resize bar
 163  imce.setResizer = function (resizer, axis, area1, area2, Min, callback) {
 164    var opt = axis == 'X' ? {pos: 'pageX', func: 'width'} : {pos: 'pageY', func: 'height'};
 165    var Min = Min || 0;
 166    var $area1 = $(area1), $area2 = area2 ? $(area2) : null, $doc = $(document);
 167    $(resizer).mousedown(function(e) {
 168      var pos = e[opt.pos];
 169      var end = start = $area1[opt.func]();
 170      var Max = $area2 ? start + $area2[opt.func]() : 1200;
 171      var drag = function(e) {
 172        end = Math.min(Max - Min, Math.max(start + e[opt.pos] - pos, Min));
 173        $area1[opt.func](end);
 174        $area2 && $area2[opt.func](Max - end);
 175        return false;
 176      };
 177      var undrag = function(e) {
 178        $doc.unbind('mousemove', drag).unbind('mouseup', undrag);
 179        callback && callback(start, end, Max);
 180      };
 181      $doc.mousemove(drag).mouseup(undrag);
 182      return false;
 183    });
 184  };
 185  
 186  //get&set area dimensions of the last session from the cookie
 187  imce.recallDimensions = function() {
 188    var $body = $(document.body);
 189    if (!$body.is('.imce')) return;
 190    //row heights
 191    imce.recallHeights(imce.cookie('imcebwh') * 1);
 192    $(window).resize(function(){imce.recallHeights()});
 193    //navigation wrapper
 194    var nwOldWidth = imce.cookie('imcenww') * 1;
 195    nwOldWidth && $(imce.NW).width(Math.min(nwOldWidth, $body.width() - 10));
 196  };
 197  
 198  //set row heights with respect to window height
 199  imce.recallHeights = function(bwFixedHeight) {
 200    //window & body dimensions
 201    var winHeight = $.browser.opera ? window.innerHeight : $(window).height();
 202    var bodyHeight = $(document.body).outerHeight(true);
 203    var diff = winHeight - bodyHeight;
 204    var bwHeight = $(imce.BW).height(), pwHeight = $(imce.PW).height();
 205    if (bwFixedHeight) {
 206      //row heights
 207      diff -= bwFixedHeight - bwHeight;
 208      bwHeight = bwFixedHeight;
 209      pwHeight += diff;
 210    }
 211    else {
 212      diff = parseInt(diff/2);
 213      bwHeight += diff;
 214      pwHeight += diff;
 215    }
 216    $(imce.BW).height(bwHeight);
 217    $(imce.PW).height(pwHeight);
 218  };
 219  
 220  //cookie get & set
 221  imce.cookie = function (name, value) {
 222    if (typeof(value) == 'undefined') {//get
 223      return unescape((document.cookie.match(new RegExp('(^|;) *'+ name +'=([^;]*)(;|$)')) || ['', '', ''])[2]);
 224    }
 225    document.cookie = name +'='+ escape(value) +'; expires='+ (new Date(new Date() * 1 + 15 * 86400000)).toGMTString() +'; path=' + Drupal.settings.basePath + 'imce';//set
 226  };
 227  
 228  //view thumbnails(smaller than tMaxW x tMaxH) inside the rows.
 229  //Large images can also be previewed by setting imce.vars.prvstyle to a valid image style(imagecache preset)
 230  imce.thumbRow = function (row) {
 231    var w = row.cells[2].innerHTML * 1;
 232    if (!w) return;
 233    var h = row.cells[3].innerHTML * 1;
 234    if (imce.vars.tMaxW < w || imce.vars.tMaxH < h) {
 235      if (!imce.vars.prvstyle || imce.conf.dir.indexOf('imagecache') == 0) return;
 236      var img = new Image();
 237      img.src = imce.imagestyleURL(imce.getURL(row.id), imce.vars.prvstyle);
 238      img.className = 'imagestyle-' + imce.vars.prvstyle;
 239    }
 240    else {
 241      var prvH = h, prvW = w;
 242      if (imce.vars.prvW < w || imce.vars.prvH < h) {
 243        if (h < w) {
 244          prvW = imce.vars.prvW;
 245          prvH = prvW*h/w;
 246        }
 247        else {
 248          prvH = imce.vars.prvH;
 249          prvW = prvH*w/h;
 250        }
 251      }
 252      var img = new Image(prvW, prvH);
 253      img.src = imce.getURL(row.id);
 254    }
 255    var cell = row.cells[0];
 256    cell.insertBefore(img, cell.firstChild);
 257  };
 258  
 259  //convert a file URL returned by imce.getURL() to an image style(imagecache preset) URL
 260  imce.imagestyleURL = function (url, stylename) {
 261    var len = imce.conf.furl.length - 1;
 262    return url.substr(0, len) + '/imagecache/' + stylename + url.substr(len);
 263  };
 264  
 265  // replace table view with box view for file list
 266  imce.boxView = function () {
 267    var w = imce.vars.boxW, h = imce.vars.boxH;
 268    if (!w || !h || $.browser.msie && parseFloat($.browser.version) < 8) return;
 269    var $body = $(document.body);
 270    var toggle = function() {
 271      $body.toggleClass('box-view');
 272      // refresh dom. required by all except FF.
 273      !$.browser.mozilla && $('#file-list').appendTo(imce.FW).appendTo(imce.FLW);
 274    };
 275    $body.append('<style type="text/css">.box-view #file-list td.name {width: ' + w + 'px;height: ' + h + 'px;} .box-view #file-list td.name span {width: ' + w + 'px;word-wrap: normal;text-overflow: ellipsis;}</style>');
 276    imce.hooks.load.push(function() {
 277      toggle();
 278      imce.SBW.scrollTop = 0;
 279      imce.opAdd({name: 'changeview', title: Drupal.t('Change view'), func: toggle});
 280    });
 281    imce.hooks.list.push(imce.boxViewRow);
 282  };
 283  
 284  // process a row for box view. include all data in box title.
 285  imce.boxViewRow = function (row) {
 286    var s = ' | ', w = row.cells[2].innerHTML * 1, dim = w ? s + w + 'x' + row.cells[3].innerHTML * 1 : '';
 287    row.cells[0].title = imce.decode(row.id) + s + row.cells[1].innerHTML + (dim) + s + row.cells[4].innerHTML;
 288  };
 289  
 290  })(jQuery);