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