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