skins/photo_lightbox_viewer.js

   1 /*
   2 * 2008-2014 Benoit Pin - MINES ParisTech
   3 * http://plinn.org
   4 * Licence Creative Commons http://creativecommons.org/licenses/by-nc/2.0/
   5 */
   6
   7
   8 var Lightbox;
   9
  10 (function(){
  11
  12 var reSelected = /.*selected.*/;
  13
  14 Lightbox = function(grid, toolbar) {
  15         var self = this;
  16         this.grid = grid;
  17         this.toolbar = toolbar;
  18         if (toolbar) {
  19                 this.toolbarFixed = false;
  20                 addListener(window, 'scroll', function(evt){self.windowScrollHandler(evt);});
  21         }
  22         this.lastCBChecked = undefined;
  23         this.form = undefined;
  24         var parent = this.grid.parentNode;
  25         while(parent) {
  26                 parent = parent.parentNode;
  27                 if (parent.tagName === 'FORM') {
  28                         this.form = parent;
  29                         break;
  30                 }
  31                 else if (parent.tagName === 'BODY') {
  32                         break;
  33                 }
  34         }
  35         addListener(this.grid, 'click', function(evt){self.mouseClickHandler(evt);});
  36         if (this.form) {
  37                 var fm = this.fm = new FormManager(this.form);
  38         addListener(this.form, 'change', function(evt){self.onChangeHandler(evt);});
  39                 fm.onBeforeSubmit = function(fm_, evt) {return self.onBeforeSubmit(fm_, evt);};
  40                 fm.onResponseLoad = function(req) {return self.onResponseLoad(req);};
  41         }
  42 };
  43
  44 Lightbox.prototype.windowScrollHandler = function(evt) {
  45         if (this.toolbar.offsetTop < window.scrollY && !this.toolbarFixed) {
  46                 this.toolbarFixed = true;
  47                 this.backThreshold = this.toolbar.offsetTop;
  48                 this.switchToolBarPositioning(true);
  49         }
  50         else if (this.toolbarFixed && window.scrollY < this.backThreshold) {
  51                 this.toolbarFixed = false;
  52                 this.switchToolBarPositioning(false);
  53         }
  54 };
  55
  56 Lightbox.prototype.mouseClickHandler = function(evt) {
  57         var target = getTargetedObject(evt);
  58         if (target.tagName === 'IMG') {
  59                 var img = target;
  60                 var link =  target.parentNode;
  61                 var button =  link.parentNode;
  62                 var slide = button.parentNode;
  63                 var req, url;
  64                 if (link.tagName === 'A') {
  65                         switch(link.getAttribute('name')) {
  66                                 case 'add_to_selection':
  67                                         disableDefault(evt);
  68                                         link.blur();
  69                                         req = new XMLHttpRequest();
  70                                         url = link.href;
  71                                         req.open("POST", url, true);
  72                                         req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
  73                                         req.send("ajax=1");
  74
  75                                         slide.className = 'selected';
  76
  77                                         link.setAttribute('name', 'remove_to_selection');
  78                                         link.href = url.replace(/(.*\/)add_to_selection$/, '$1remove_to_selection');
  79                                         link.title = img.alt = 'Retirer de la sélection';
  80                                         button.className = "button slide-deselect";
  81                                         break;
  82
  83                                 case 'remove_to_selection':
  84                                         disableDefault(evt);
  85                                         link.blur();
  86                                         req = new XMLHttpRequest();
  87                                         url = link.href;
  88                                         req.open("POST", url, true);
  89                                         req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
  90                                         req.send("ajax=1");
  91                                         slide.className = null;
  92                                         link.setAttribute('name', 'add_to_selection');
  93                                         link.href = url.replace(/(.*\/)remove_to_selection$/, '$1add_to_selection');
  94                                         link.title = img.alt = 'Ajouter à la sélection';
  95                                         button.className = "button slide-select";
  96                                         break;
  97
  98                                 case 'add_to_cart' :
  99                                         disableDefault(evt);
 100                                         slide.widget = new CartWidget(slide, link.href);
 101                                         break;
 102
 103                                 case 'hide_for_anonymous':
 104                                         disableDefault(evt);
 105                                         link.blur();
 106                                         req = new XMLHttpRequest();
 107                                         url = link.href;
 108                                         req.open("POST", url, true);
 109                                         req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
 110                                         req.send(null);
 111                                         slide.className = 'hidden-slide';
 112                                         link.setAttribute('name', 'show_for_anonymous');
 113                                         link.href = url.replace(/(.*\/)hideForAnonymous$/, '$1resetHide');
 114                                         link.title = img.alt = 'Montrer au anonymes';
 115                                         button.className = "button slide-show";
 116                                         break;
 117
 118                                 case 'show_for_anonymous':
 119                                         disableDefault(evt);
 120                                         link.blur();
 121                                         req = new XMLHttpRequest();
 122                                         url = link.href;
 123                                         req.open("POST", url, true);
 124                                         req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
 125                                         req.send(null);
 126                                         slide.className = null;
 127                                         link.setAttribute('name', 'hide_for_anonymous');
 128                                         link.href = url.replace(/(.*\/)resetHide$/, '$1hideForAnonymous');
 129                                         link.title = img.alt = 'Masquer pour les anonymes';
 130                                         button.className = "button slide-hide";
 131                                         break;
 132                         }
 133                 }
 134         } else if(target.tagName === 'INPUT' && target.type === 'checkbox') {
 135                 var cb = target;
 136                 if (cb.checked) {
 137                         cb.setAttribute('checked', 'checked');
 138                 }
 139                 else {
 140                         cb.removeAttribute('checked');
 141                 }
 142                 this.selectCBRange(evt);
 143         }
 144 };
 145
 146 Lightbox.prototype.onChangeHandler = function(evt) {
 147     var target = getTargetedObject(evt);
 148     if (target.name === 'sort_on') {
 149         this.fm.submitButton = {'name' : 'set_sorting', 'value' : 'ok'};
 150         this.fm.submit(evt);
 151     }
 152 };
 153
 154 Lightbox.prototype.onBeforeSubmit = function(fm, evt) {
 155         switch(fm.submitButton.name) {
 156                 case 'delete' :
 157                         this.hideSelection();
 158                         break;
 159         }
 160 };
 161
 162 Lightbox.prototype.onResponseLoad = function(req) {
 163         switch(req.responseXML.documentElement.nodeName) {
 164                 case 'deleted' :
 165                         this.deleteSelection();
 166                         break;
 167                 case 'error' :
 168                         this.showSelection();
 169                         break;
 170         case 'sorted' :
 171             this.fm.submitButton = undefined;
 172             this.refreshGrid();
 173             break;
 174         }
 175 };
 176
 177 Lightbox.prototype.switchToolBarPositioning = function(fixed) {
 178         var tbs = this.toolbar.style;
 179         if (fixed) {
 180                 this.toolbar.defaultCssText = this.toolbar.style.cssText;
 181                 tbs.width = String(this.toolbar.offsetWidth) + 'px';
 182                 tbs.height = String(this.toolbar.offsetHeight) + 'px';
 183                 tbs.position = 'fixed';
 184                 tbs.top = '0';
 185                 this.toolbarPlaceholder = document.createElement('div');
 186                 var phs = this.toolbarPlaceholder.style;
 187                 phs.cssText = tbs.cssText;
 188                 phs.position = 'relative';
 189                 this.toolbar.parentNode.insertBefore(this.toolbarPlaceholder, this.toolbar);
 190         }
 191         else {
 192                 this.toolbarPlaceholder.parentNode.removeChild(this.toolbarPlaceholder);
 193                 tbs.cssText = this.toolbar.defaultCssText;
 194         }
 195 };
 196
 197
 198 Lightbox.prototype.hideSelection = function() {
 199         var i, e, slide;
 200         for (i=0 ; i<this.form.elements.length ; i++) {
 201                 e = this.form.elements[i];
 202                 if (e.type === 'checkbox' && e.checked) {
 203                         slide = e.parentNode.parentNode;
 204                         slide.classList.add('zero_opacity');
 205                 }
 206         }
 207 };
 208
 209 Lightbox.prototype.showSelection = function() {
 210         var i, e, slide;
 211         for (i=0 ; i<this.form.elements.length ; i++) {
 212                 e = this.form.elements[i];
 213                 if (e.type === 'checkbox' && e.checked) {
 214                         slide = e.parentNode.parentNode;
 215                         slide.classList.remove('zero_opacity');
 216                 }
 217         }
 218 };
 219
 220 Lightbox.prototype.deleteSelection = function() {
 221         var i, e, slide;
 222         for (i=0 ; i<this.form.elements.length ; i++) {
 223                 e = this.form.elements[i];
 224                 if (e.type === 'checkbox' && e.checked) {
 225                         slide = e.parentNode.parentNode;
 226                         slide.classList.add('zero_width');
 227                 }
 228         }
 229         var self = this;
 230         // if you change this, delay you should also change this css rule :
 231         // .lightbox span { transition: width 1s
 232         setTimeout(function(){self._removeSelection();}, 1000);
 233 };
 234
 235 Lightbox.prototype._removeSelection = function() {
 236         var i, e, slide;
 237         var toRemove = [];
 238         for (i=0 ; i<this.form.elements.length ; i++) {
 239                 e = this.form.elements[i];
 240                 if (e.type === 'checkbox' && e.checked) {
 241                         toRemove.push(e.parentNode.parentNode);
 242                 }
 243         }
 244         for (i=0 ; i<toRemove.length ; i++) {
 245                 slide = toRemove[i];
 246                 slide.parentNode.removeChild(slide);
 247         }
 248         this.cbIndex = undefined;
 249 };
 250
 251 Lightbox.prototype.getCBIndex = function(cb) {
 252         if (!this.cbIndex) {
 253                 // build checkbox index
 254                 this.cbIndex = [];
 255                 var i, node, c;
 256                 var nodes = this.grid.childNodes;
 257                 for (i=0 ; i<nodes.length ; i++) {
 258                         node = nodes[i];
 259                         if (node.nodeName === 'SPAN') {
 260                                 c = node.getElementsByTagName('input')[0];
 261                                 c.index = this.cbIndex.length;
 262                                 this.cbIndex[this.cbIndex.length] = c;
 263                         }
 264                 }
 265         }
 266         return cb.index;
 267 };
 268
 269 Lightbox.prototype.selectCBRange = function(evt) {
 270         var target = getTargetedObject(evt);
 271         evt = getEventObject(evt);
 272         var shift = evt.shiftKey;
 273         if (shift && this.lastCBChecked) {
 274                 var from = this.getCBIndex(this.lastCBChecked);
 275                 var to = this.getCBIndex(target);
 276                 var start = Math.min(from, to);
 277                 var stop = Math.max(from, to);
 278                 var i;
 279                 for (i=start ; i<stop ; i++ ) {
 280                         this.cbIndex[i].setAttribute('checked', 'checked');
 281                 }
 282         }
 283         else if (target.checked) {
 284                 this.lastCBChecked = target;
 285         }
 286         else {
 287                 this.lastCBChecked = undefined;
 288         }
 289 };
 290
 291 Lightbox.prototype.refreshGrid = function() {
 292         var req = new XMLHttpRequest();
 293         self = this;
 294         req.onreadystatechange = function() {
 295                 switch (req.readyState) {
 296                         case 1 :
 297                                 showProgressImage();
 298                                 break;
 299                         case 4 :
 300                                 hideProgressImage();
 301                                 if (req.status === 200) {
 302                                         self._refreshGrid(req)
 303                                 }
 304                                 break;
 305                 }
 306         };
 307
 308         var url = absolute_url() +
 309                           '/portfolio_thumbnails_tail?start:int=0&size:int=' +
 310                           this.grid.children.length;
 311         req.open('GET', url, true);
 312         req.send();
 313 };
 314
 315 Lightbox.prototype._refreshGrid = function(req) {
 316     var doc = req.responseXML.documentElement;
 317     var i;
 318     var slides = this.grid.children;
 319     for (i=0 ; i<doc.children.length ; i++) {
 320         this.grid.replaceChild(getCopyOfNode(doc.children[i]), slides[i]);
 321     }
 322 };
 323
 324
 325 var _outlineSelectedSlide;
 326 if (browser.isGecko) {
 327         _outlineSelectedSlide = function(slide) {
 328                 slide.className = 'selected';
 329         };
 330 }
 331 else {
 332         _outlineSelectedSlide = function(slide) {
 333                 if (slide.className &&
 334                         !reSelected.test(slide.className)) {
 335                                 slide.className = slide.className + ' selected';
 336                 }
 337         };
 338 }
 339
 340 }());