1 // $Id: imce_extras.js,v 1.2.2.3 2009/01/29 20:02:57 ufku Exp $

     2 //This pack implemets: keyboard shortcuts, file sorting, resize bars, and inline thumbnail preview.

     3 

     4 //add onload hook. unshift to make sure it runs first after imce loads.

     5 imce.hooks.load.unshift(function () {

     6   imce.NW = imce.el('navigation-wrapper'), imce.BW = imce.el('browse-wrapper');

     7   imce.LPW = imce.el('log-prv-wrapper'), imce.LW = imce.el('log-wrapper');

     8   //add scale calculator for resizing.

     9   $('#edit-width, #edit-height').focus(function () {

    10     var fid, r, w, isW, val;

    11     if (fid = imce.vars.prvfid) {

    12       isW = this.id == 'edit-width', val =  imce.el(isW ? 'edit-height' : 'edit-width').value*1;

    13       if (val && (w = imce.isImage(fid)) && (r = imce.fids[fid].cells[3].innerHTML*1 / w))

    14         this.value = Math.round(isW ? val/r : val*r);

    15     }

    16   });

    17   //$(imce.tree[imce.conf.dir].a).focus();//focus on the active directory branch

    18 });

    19 

    20 /**************** SHORTCUTS ********************/

    21 

    22 imce.initiateShortcuts = function () {

    23   $(imce.NW).attr('tabindex', '0').keydown(function (e) {

    24     if (F = imce.dirKeys['k'+ e.keyCode]) return F(e);

    25   });

    26   $(imce.FLW).attr('tabindex', '0').keydown(function (e) {

    27     if (F = imce.fileKeys['k'+ e.keyCode]) return F(e);

    28   }).focus();

    29 };

    30 

    31 //shortcut key-function pairs for directories

    32 imce.dirKeys = {

    33   k35: function (e) {//end-home. select first or last dir

    34     var L = imce.tree['.'].li;

    35     if (e.keyCode == 35) while (imce.hasC(L, 'expanded')) L = L.lastChild.lastChild;

    36     $(L.childNodes[1]).click().focus();

    37   },

    38   k37: function (e) {//left-right. collapse-expand directories.(right may also move focus on files)

    39     var L, B = imce.tree[imce.conf.dir], right = e.keyCode == 39;

    40     if (B.ul && (right ^ imce.hasC(L = B.li, 'expanded')) ) $(L.firstChild).click();

    41     else if (right) $(imce.FLW).focus();

    42   },

    43   k38: function (e) {//up. select the previous directory

    44     var B = imce.tree[imce.conf.dir];

    45     if (L = B.li.previousSibling) {

    46       while (imce.hasC(L, 'expanded')) L = L.lastChild.lastChild;

    47       $(L.childNodes[1]).click().focus();

    48     }

    49     else if ((L = B.li.parentNode.parentNode) && L.tagName == 'LI') $(L.childNodes[1]).click().focus();

    50   },

    51   k40: function (e) {//down. select the next directory

    52     var B = imce.tree[imce.conf.dir], L = B.li, U = B.ul;

    53     if (U && imce.hasC(L, 'expanded')) $(U.firstChild.childNodes[1]).click().focus();

    54     else do {if (L.nextSibling) return $(L.nextSibling.childNodes[1]).click().focus();

    55     }while ((L = L.parentNode.parentNode).tagName == 'LI');

    56   }

    57 };

    58 //add equal keys

    59 imce.dirKeys.k36 = imce.dirKeys.k35;

    60 imce.dirKeys.k39 = imce.dirKeys.k37;

    61 

    62 //shortcut key-function pairs for files

    63 imce.fileKeys = {

    64   k38: function (e) {//up-down. select previous-next row

    65     var fid = imce.lastFid(), i = fid ? imce.fids[fid].rowIndex+e.keyCode-39 : 0;

    66     imce.fileClick(imce.findex[i], e.ctrlKey, e.shiftKey);

    67   },

    68   k35: function (e) {//end-home. select first or last row

    69     imce.fileClick(imce.findex[e.keyCode == 35 ? imce.findex.length-1 : 0], e.ctrlKey, e.shiftKey);

    70   },

    71   k13: function (e) {//enter-insert. send file to external app.

    72     imce.send(imce.vars.prvfid);

    73     return false;

    74   },

    75   k37: function (e) {//left. focus on directories

    76     $(imce.tree[imce.conf.dir].a).focus();

    77   },

    78   k65: function (e) {//ctrl+A to select all

    79     if (e.ctrlKey && imce.findex.length) {

    80       var fid = imce.findex[0].id;

    81       imce.selected[fid] ? (imce.vars.lastfid = fid) : imce.fileSelect(fid);//select first row

    82       imce.fileClick(imce.findex[imce.findex.length-1], false, true);//shift+click last row

    83       return false;

    84     }

    85   }

    86 };

    87 //add equal keys

    88 imce.fileKeys.k40 = imce.fileKeys.k38;

    89 imce.fileKeys.k36 = imce.fileKeys.k35;

    90 imce.fileKeys.k45 = imce.fileKeys.k13;

    91 //add default operation keys. delete, R(esize), T(humbnails), U(pload)

    92 $.each({k46: 'delete', k82: 'resize', k84: 'thumb', k85: 'upload'}, function (k, op) {

    93   imce.fileKeys[k] = function (e) {

    94     if (imce.ops[op] && !imce.ops[op].disabled) imce.opClick(op);

    95   };

    96 });

    97 

    98 /**************** SORTING ********************/

    99 

   100 //prepare column sorting

   101 imce.initiateSorting = function() {

   102   //add cache hook. cache the old directory's sort settings before the new one replaces it.

   103   imce.hooks.cache.push(function (cache, newdir) {

   104     cache.cid = imce.vars.cid, cache.dsc = imce.vars.dsc;

   105   });

   106   //add navigation hook. refresh sorting after the new directory content is loaded.

   107   imce.hooks.navigate.push(function (data, olddir, cached) {

   108     cached ? imce.updateSortState(data.cid, data.dsc) : imce.firstSort();

   109   });

   110   imce.vars.cid = imce.cookie('icid')*1;

   111   imce.vars.dsc = imce.cookie('idsc')*1;

   112   imce.cols = imce.el('file-header').rows[0].cells;

   113   $(imce.cols).click(function () {imce.columnSort(this.cellIndex, imce.hasC(this, 'asc'));});

   114   $(window).unload(function() {imce.cookie('icid', imce.vars.cid); imce.cookie('idsc', imce.vars.dsc ? 1 : 0);});

   115   imce.firstSort();

   116 };

   117 

   118 //sort the list for the first time

   119 imce.firstSort = function() {

   120   imce.columnSort(imce.vars.cid, imce.vars.dsc);

   121 };

   122 

   123 //sort file list according to column index.

   124 imce.columnSort = function(cid, dsc) {

   125   if (imce.findex.length < 2) return;

   126   if (cid == imce.vars.cid && dsc != imce.vars.dsc) {

   127     imce.findex.reverse();

   128   }

   129   else {

   130     var func = 'sort'+ (cid == 0 ? 'Str' : 'Num') + (dsc ? 'Dsc' : 'Asc');

   131     var prop = cid == 2 || cid == 3 ? 'innerHTML' : 'id';

   132     //sort rows

   133     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)});

   134   }

   135   //insert sorted rows

   136   for (var row, i=0; row = imce.findex[i]; i++) {

   137     imce.tbody.appendChild(row);

   138   }

   139   imce.updateSortState(cid, dsc);

   140 };

   141 

   142 //update column states

   143 imce.updateSortState = function(cid, dsc) {

   144   $(imce.cols[imce.vars.cid]).removeClass(imce.vars.dsc ? 'desc' : 'asc');

   145   $(imce.cols[cid]).addClass(dsc ? 'desc' : 'asc');

   146   imce.vars.cid = cid;

   147   imce.vars.dsc = dsc;

   148 };

   149 

   150 //sorters

   151 imce.sortStrAsc = function(a, b) {return a.charAt(0).toLowerCase() < b.charAt(0).toLowerCase() ? -1 : b < a;};

   152 imce.sortStrDsc = function(a, b) {return imce.sortStrAsc(b, a);};

   153 imce.sortNumAsc = function(a, b) {return a-b;};

   154 imce.sortNumDsc = function(a, b) {return b-a};

   155 

   156 /**************** RESIZE-BARS  ********************/

   157 

   158 //set resizers for resizable areas and recall previous dimensions

   159 imce.initiateResizeBars = function () {

   160   imce.setResizer('navigation-resizer', 'X', 'navigation-wrapper', null, 1);

   161   imce.setResizer('log-resizer', 'X', 'log-wrapper', null, 1);

   162   imce.setResizer('browse-resizer', 'Y', 'browse-wrapper', 'log-prv-wrapper', 50, imce.resizeList);

   163   imce.setResizer('content-resizer', 'Y', 'resizable-content', null, 150, imce.resizeRows);

   164   imce.recallDimensions();

   165   $(window).unload(function() {

   166     imce.cookie('ih1', $(imce.BW).height());

   167     imce.cookie('ih2', $(imce.LPW).height());

   168     imce.cookie('iw1', Math.max($(imce.NW).width(), 1));

   169     imce.cookie('iw2', Math.max($(imce.LW).width(), 1));

   170   });

   171 };

   172 

   173 //set a resize bar

   174 imce.setResizer = function (resizer, axis, area1, area2, Min, endF) {

   175   var O = axis == 'X' ? {pos: 'pageX', func: 'width'} : {pos: 'pageY', func: 'height'};

   176   var Min = Min || 0;

   177   $(imce.el(resizer)).mousedown(function(e) {

   178     var pos = e[O.pos];

   179     var end = start = $(imce.el(area1))[O.func]();

   180     var Max = area2 ? (start + $(imce.el(area2))[O.func]()) : 1200;

   181     $(document).mousemove(doDrag).mouseup(endDrag);

   182     function doDrag(e) {

   183       end = Math.min(Max - Min, Math.max(start + e[O.pos] - pos, Min));

   184       $(imce.el(area1))[O.func](end);

   185       if (area2) $(imce.el(area2))[O.func](Max - end);

   186       return false;

   187     }

   188     function endDrag(e) {

   189       $(document).unbind("mousemove", doDrag).unbind("mouseup", endDrag);

   190       if (endF) endF(start, end, Max);

   191     }

   192   });

   193 };

   194 

   195 //set height file-list area

   196 imce.resizeList = function(start, end, Max) {

   197   var el = $(imce.FLW), h = el.height() + end - start;

   198   el.height(h < 1 ? 1 : h);

   199 };

   200 

   201 //set heights of browse and log-prv areas.

   202 imce.resizeRows = function(start, end, Max) {

   203   var el = $(imce.BW), h = el.height();

   204   var diff = end - start, r = h / start, d = Math.round(diff * r), h1 = Math.max(h + d, 50);

   205   el.height(h1);

   206   $(imce.LPW).height(end - h1 - $(imce.el('browse-resizer')).height() - 1);

   207   imce.resizeList(h, h1);

   208 };

   209 

   210 //get area dimensions of the last session from the cookie

   211 imce.recallDimensions = function() {

   212   if (h1 = imce.cookie('ih1')*1) {

   213     var h2 = imce.cookie('ih2')*1, w1 = imce.cookie('iw1')*1, w2 = imce.cookie('iw2')*1;

   214     var el = $(imce.BW), h = el.height(), w = el.width();

   215     $(imce.NW).width(Math.min(w1, w-5));

   216     $(imce.LW).width(Math.min(w2, w-5));

   217     el.height(h1);

   218     imce.resizeList(h, h1);

   219     $(imce.LPW).height(h2);

   220   }

   221 };

   222 

   223 //cookie get & set

   224 imce.cookie = function (name, value) {

   225   if (typeof(value) == 'undefined') {//get

   226     return unescape((document.cookie.match(new RegExp('(^|;) *'+ name +'=([^;]*)(;|$)')) || ['', '', ''])[2]);

   227   }

   228   document.cookie = name +'='+ escape(value) +'; expires='+ (new Date(new Date()*1 + 30*86400000)).toGMTString() +'; path=/';//set

   229 };

   230 

   231 //view thumbnails(smaller than tMaxW x tMaxH) inside the rows.

   232 imce.thumbRow = function (row) {

   233   var h, w = row.cells[2].innerHTML*1;

   234   if (!w || imce.vars.tMaxW < w || imce.vars.tMaxH < (h = row.cells[3].innerHTML*1)) return;

   235   var prvH = h, prvW = w;

   236   if (imce.vars.prvW < w || imce.vars.prvH < h) {

   237     if (h < w) {

   238       prvW = imce.vars.prvW;

   239       prvH = prvW*h/w;

   240     }

   241     else {

   242       prvH = imce.vars.prvH;

   243       prvW = prvH*w/h;

   244     }

   245   }

   246   var img = new Image(prvW, prvH);

   247   img.src = imce.getURL(row.id);

   248   var cell = row.cells[0];

   249   cell.insertBefore(img, cell.firstChild);

   250 };