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