Products/Portfolio/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, orderable) {
  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         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         // drag and drop
  50         this.disableDefaultDragging();
  51         this._DDOrderingListeners = {'dragstart' : function(evt){self.onDragStart(evt);},
  52                                                                  'dragover' : function(evt){self.onDragOver(evt);},
  53                                                                  'dragend' : function(evt){self.onDragEnd(evt);}
  54                                                                  };
  55         if(orderable) {this.enableDDOrdering();}
  56 };
  57
  58 Lightbox.prototype._buildSlidesIndex = function() {
  59         this.slides = [];
  60         var node, i;
  61         for (i=0 ; i<this.grid.childNodes.length ; i++) {
  62                 node = this.grid.childNodes[i];
  63                 if (node.nodeType === 1) { // is element
  64                         this.slides.push(node);
  65                 }
  66         }
  67         this.lastSlide = this.slides[this.slides.length-1];
  68 };
  69
  70 Lightbox.prototype.windowScrollToolbarlHandler = function(evt) {
  71         if (this.toolbar.offsetTop < getWindowScrollY() && !this.toolbarFixed) {
  72                 this.toolbarFixed = true;
  73                 this.backThreshold = this.toolbar.offsetTop;
  74                 this.switchToolBarPositioning(true);
  75         }
  76         else if (this.toolbarFixed && getWindowScrollY() < this.backThreshold) {
  77                 this.toolbarFixed = false;
  78                 this.switchToolBarPositioning(false);
  79         }
  80 };
  81
  82 Lightbox.prototype.windowScrollGridHandler = function(evt) {
  83         if (!this.complete &&
  84                 !this.fetchingDisabled &&
  85                 getWindowScrollY() >
  86                         (this.lastSlide.firstElementChild || this.lastSlide.children[0]).offsetTop
  87                          - getWindowHeight()) {
  88                 this.fetchingDisabled = true;
  89                 this.fetchTail();
  90         }
  91 };
  92
  93 Lightbox.prototype.mouseClickHandler = function(evt) {
  94         var target = getTargetedObject(evt);
  95         if (target.tagName === 'IMG') {
  96                 var img = target;
  97                 var link =      target.parentNode;
  98                 var button =  link.parentNode;
  99                 var slide = button.parentNode;
 100                 var req, url;
 101                 if (link.tagName === 'A') {
 102                         switch(link.getAttribute('name')) {
 103                                 case 'add_to_selection':
 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("ajax=1");
 111
 112                                         slide.className = 'selected';
 113
 114                                         link.setAttribute('name', 'remove_to_selection');
 115                                         link.href = url.replace(/(.*\/)add_to_selection$/, '$1remove_to_selection');
 116                                         link.title = img.alt = 'Retirer de la sélection';
 117                                         button.className = "button slide-deselect";
 118                                         break;
 119
 120                                 case 'remove_to_selection':
 121                                         disableDefault(evt);
 122                                         link.blur();
 123                                         req = new XMLHttpRequest();
 124                                         url = link.href;
 125                                         req.open("POST", url, true);
 126                                         req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
 127                                         req.send("ajax=1");
 128                                         slide.className = null;
 129                                         link.setAttribute('name', 'add_to_selection');
 130                                         link.href = url.replace(/(.*\/)remove_to_selection$/, '$1add_to_selection');
 131                                         link.title = img.alt = 'Ajouter à la sélection';
 132                                         button.className = "button slide-select";
 133                                         break;
 134
 135                                 case 'add_to_cart' :
 136                                         disableDefault(evt);
 137                                         slide.widget = new CartWidget(slide, link.href);
 138                                         break;
 139
 140                                 case 'hide_for_anonymous':
 141                                         disableDefault(evt);
 142                                         link.blur();
 143                                         req = new XMLHttpRequest();
 144                                         url = link.href;
 145                                         req.open("POST", url, true);
 146                                         req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
 147                                         req.send(null);
 148                                         slide.className = 'hidden-slide';
 149                                         link.setAttribute('name', 'show_for_anonymous');
 150                                         link.href = url.replace(/(.*\/)hideForAnonymous$/, '$1resetHide');
 151                                         link.title = img.alt = 'Montrer au anonymes';
 152                                         button.className = "button slide-show";
 153                                         break;
 154
 155                                 case 'show_for_anonymous':
 156                                         disableDefault(evt);
 157                                         link.blur();
 158                                         req = new XMLHttpRequest();
 159                                         url = link.href;
 160                                         req.open("POST", url, true);
 161                                         req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
 162                                         req.send(null);
 163                                         slide.className = null;
 164                                         link.setAttribute('name', 'hide_for_anonymous');
 165                                         link.href = url.replace(/(.*\/)resetHide$/, '$1hideForAnonymous');
 166                                         link.title = img.alt = 'Masquer pour les anonymes';
 167                                         button.className = "button slide-hide";
 168                                         break;
 169                         }
 170                 }
 171         } else if(target.tagName === 'INPUT' && target.type === 'checkbox') {
 172                 var cb = target;
 173                 if (cb.checked) {
 174                         cb.setAttribute('checked', 'checked');
 175                 }
 176                 else {
 177                         cb.removeAttribute('checked');
 178                 }
 179                 this.selectCBRange(evt);
 180         }
 181 };
 182
 183 Lightbox.prototype.onChangeHandler = function(evt) {
 184         var target = getTargetedObject(evt);
 185         if (target.name === 'sort_on') {
 186                 if (target.value === 'position') {this.enableDDOrdering();}
 187                 else {this.disableDDOrdering();}
 188                 this.fm.submitButton = {'name' : 'set_sorting', 'value' : 'ok'};
 189                 this.fm.submit(evt);
 190         }
 191 };
 192
 193 Lightbox.prototype.onBeforeSubmit = function(fm, evt) {
 194         switch(fm.submitButton.name) {
 195                 case 'delete' :
 196                         this.hideSelection();
 197                         break;
 198         }
 199 };
 200
 201 Lightbox.prototype.onResponseLoad = function(req) {
 202         switch(req.responseXML.documentElement.nodeName) {
 203                 case 'deleted' :
 204                         this.deleteSelection();
 205                         break;
 206                 case 'error' :
 207                         this.showSelection();
 208                         break;
 209                 case 'sorted' :
 210                         this.fm.submitButton = undefined;
 211                         this.refreshGrid();
 212                         break;
 213                 default :
 214                         this.fm.loadResponse(req);
 215                         break;
 216         }
 217 };
 218
 219 Lightbox.prototype.switchToolBarPositioning = function(fixed) {
 220         var tbs = this.toolbar.style;
 221         if (fixed) {
 222                 this.toolbar.defaultCssText = this.toolbar.style.cssText;
 223                 tbs.width = String(this.toolbar.offsetWidth) + 'px';
 224                 tbs.height = String(this.toolbar.offsetHeight) + 'px';
 225                 tbs.position = 'fixed';
 226                 tbs.top = '0';
 227                 this.toolbarPlaceholder = document.createElement('div');
 228                 var phs = this.toolbarPlaceholder.style;
 229                 phs.cssText = tbs.cssText;
 230                 phs.position = 'relative';
 231                 this.toolbar.parentNode.insertBefore(this.toolbarPlaceholder, this.toolbar);
 232         }
 233         else {
 234                 this.toolbarPlaceholder.parentNode.removeChild(this.toolbarPlaceholder);
 235                 tbs.cssText = this.toolbar.defaultCssText;
 236         }
 237 };
 238
 239
 240 Lightbox.prototype.hideSelection = function() {
 241         var i, e, slide;
 242         for (i=0 ; i<this.form.elements.length ; i++) {
 243                 e = this.form.elements[i];
 244                 if (e.type === 'checkbox' && e.checked) {
 245                         slide = e.parentNode.parentNode;
 246                         slide.classList.add('zero_opacity');
 247                 }
 248         }
 249 };
 250
 251 Lightbox.prototype.showSelection = function() {
 252         var i, e, slide;
 253         for (i=0 ; i<this.form.elements.length ; i++) {
 254                 e = this.form.elements[i];
 255                 if (e.type === 'checkbox' && e.checked) {
 256                         slide = e.parentNode.parentNode;
 257                         slide.classList.remove('zero_opacity');
 258                 }
 259         }
 260 };
 261
 262 Lightbox.prototype.deleteSelection = 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_width');
 269                 }
 270         }
 271         var self = this;
 272         // if you change this, delay you should also change this css rule :
 273         // .lightbox span { transition: width 1s
 274         setTimeout(function(){self._removeSelection();}, 1000);
 275 };
 276
 277 Lightbox.prototype._removeSelection = function() {
 278         var i, e;
 279         var toRemove = [];
 280         for (i=0 ; i<this.form.elements.length ; i++) {
 281                 e = this.form.elements[i];
 282                 if (e.type === 'checkbox' && e.checked) {
 283                         toRemove.push(e.parentNode.parentNode);
 284                 }
 285         }
 286         for (i=0 ; i<toRemove.length ; i++) {
 287                 this.grid.removeChild(toRemove[i]);
 288         }
 289         this._buildSlidesIndex();
 290         this.cbIndex = undefined;
 291         this.windowScrollGridHandler();
 292 };
 293
 294 Lightbox.prototype.getCBIndex = function(cb) {
 295         if (!this.cbIndex) {
 296                 // build checkbox index
 297                 this.cbIndex = [];
 298                 var i, node, c;
 299                 for (i=0 ; i<this.slides.length ; i++) {
 300                         node = this.slides[i];
 301                         c = node.getElementsByTagName('input')[0];
 302                         c.index = this.cbIndex.length;
 303                         this.cbIndex.push(c);
 304                 }
 305         }
 306         return cb.index;
 307 };
 308
 309 Lightbox.prototype.selectCBRange = function(evt) {
 310         var target = getTargetedObject(evt);
 311         evt = getEventObject(evt);
 312         var shift = evt.shiftKey;
 313         if (shift && this.lastCBChecked) {
 314                 var from = this.getCBIndex(this.lastCBChecked);
 315                 var to = this.getCBIndex(target);
 316                 var start = Math.min(from, to);
 317                 var stop = Math.max(from, to);
 318                 var i;
 319                 for (i=start ; i<stop ; i++ ) {
 320                         this.cbIndex[i].setAttribute('checked', 'checked');
 321                 }
 322         }
 323         else if (target.checked) {
 324                 this.lastCBChecked = target;
 325         }
 326         else {
 327                 this.lastCBChecked = undefined;
 328         }
 329 };
 330
 331 Lightbox.prototype.refreshGrid = function() {
 332         var req = new XMLHttpRequest();
 333         self = this;
 334         req.onreadystatechange = function() {
 335                 switch (req.readyState) {
 336                         case 1 :
 337                                 showProgressImage();
 338                                 break;
 339                         case 4 :
 340                                 hideProgressImage();
 341                                 if (req.status === 200) {
 342                                         self._refreshGrid(req);
 343                                 }
 344                                 break;
 345                 }
 346         };
 347
 348         var url = absolute_url() +
 349                           '/portfolio_thumbnails_tail?start:int=0&size:int=' +
 350                           this.slides.length;
 351         req.open('GET', url, true);
 352         req.send();
 353 };
 354
 355 Lightbox.prototype._refreshGrid = function(req) {
 356         var doc = req.responseXML.documentElement;
 357         var i, node;
 358         var j = 0;
 359         for (i=0 ; i<doc.childNodes.length ; i++) {
 360                 node = doc.childNodes[i];
 361                 if (node.nodeType === 1) {
 362                         node = getCopyOfNode(node);
 363                         this.disableDefaultDragging(node);
 364                         this.grid.replaceChild(node, this.slides[j]);
 365                         this.slides[j] = node;
 366                         j++;
 367                 }
 368         }
 369         this.cbIndex = undefined;
 370 };
 371
 372 Lightbox.prototype.fetchTail = function() {
 373         var req = new XMLHttpRequest();
 374         var self = this;
 375         req.onreadystatechange = function() {
 376                 switch (req.readyState) {
 377                         case 1 :
 378                                 showProgressImage();
 379                                 break;
 380                         case 4 :
 381                                 hideProgressImage();
 382                                 if (req.status === 200) {
 383                                         self._appendTail(req);
 384                                 }
 385                                 break;
 386                 }
 387         };
 388
 389         var url = absolute_url() +
 390                           '/portfolio_thumbnails_tail?start:int=' +
 391                           String(this.slides.length) +
 392                           '&size:int=10' +
 393                           '&container_type=' +
 394                           this.container_type;
 395         req.open('GET', url, true);
 396         req.send();
 397 };
 398
 399 Lightbox.prototype._appendTail = function(req) {
 400         var doc = req.responseXML.documentElement;
 401         var i, node, c;
 402         for (i=0 ; i<doc.childNodes.length ; i++) {
 403                 node = doc.childNodes[i];
 404                 if (node.nodeType === 1) {
 405                         this.lastSlide = this.grid.appendChild(getCopyOfNode(node));
 406                         this.disableDefaultDragging(this.lastSlide);
 407                         this.slides.push(this.lastSlide);
 408                         if (this.cbIndex) {
 409                                 c = this.lastSlide.getElementsByTagName('input')[0];
 410                                 c.index = this.cbIndex.length;
 411                                 this.cbIndex.push(c);
 412
 413                         }
 414                 }
 415         }
 416         this.fetchingDisabled = false;
 417         if (doc.getAttribute('nomore')) {
 418                 this.complete = true;
 419         }
 420         this.windowScrollGridHandler();
 421 };
 422
 423
 424 var _outlineSelectedSlide;
 425 if (browser.isGecko) {
 426         _outlineSelectedSlide = function(slide) {
 427                 slide.className = 'selected';
 428         };
 429 }
 430 else {
 431         _outlineSelectedSlide = function(slide) {
 432                 if (slide.className &&
 433                         !reSelected.test(slide.className)) {
 434                                 slide.className = slide.className + ' selected';
 435                 }
 436         };
 437 }
 438
 439 if (browser.isGecko) {
 440         Lightbox.prototype.disableDefaultDragging = function(element) {
 441                 if (!element) {
 442                         element = this.grid;
 443                 }
 444                 var i, j, name, elements;
 445                 var elementsNames = ['a', 'img'];
 446                 for (i=0 ; i < elementsNames.length ; i++) {
 447                         name = elementsNames[i];
 448                         elements = element.getElementsByTagName(name);
 449                         for (j=0 ; j < elements.length ; j++) {
 450                                 elements[j].draggable=false;
 451                         }
 452                 }
 453         };
 454 }
 455 else {
 456         Lightbox.prototype.disableDefaultDragging = function() {};
 457 }
 458
 459 Lightbox.prototype.getSelectedSlides = function() {
 460         var i, e, slide;
 461         var slides = [];
 462         for (i=0 ; i<this.form.elements.length ; i++) {
 463                 e = this.form.elements[i];
 464                 if (e.type === 'checkbox' && e.checked) {
 465                         slide = e.parentNode.parentNode;
 466                         slides.push(slide);
 467                 }
 468         }
 469         return slides;
 470 };
 471
 472
 473 Lightbox.prototype.enableDDOrdering = function() {
 474         addListener(this.grid, 'dragstart', this._DDOrderingListeners.dragstart);
 475         addListener(this.grid, 'dragover', this._DDOrderingListeners.dragover);
 476         addListener(this.grid, 'dragend', this._DDOrderingListeners.dragend);
 477 };
 478
 479 Lightbox.prototype.disableDDOrdering = function() {
 480         removeListener(this.grid, 'dragstart', this._DDOrderingListeners.dragstart);
 481         removeListener(this.grid, 'dragover', this._DDOrderingListeners.dragover);
 482         removeListener(this.grid, 'dragend', this._DDOrderingListeners.dragend);
 483 };
 484
 485 Lightbox.prototype.onDragStart = function(evt) {
 486         var target = getTargetedObject(evt);
 487         this.dragged = target;
 488         this.draggedSelection = this.getSelectedSlides();
 489         if (this.draggedSelection.indexOf(target) === -1) {
 490                 this.draggedSelection.push(target);
 491         }
 492         evt.dataTransfer.setData('text', '');
 493         var i, slide;
 494         for(i=0 ; i<this.draggedSelection.length ; i++) {
 495                 slide = this.draggedSelection[i];
 496                 slide.style.opacity = 0;
 497                 slide.style.width = 0;
 498         }
 499 };
 500
 501 Lightbox.prototype.onDragOver = function(evt) {
 502         if (!this.dragged) {
 503                 return;
 504         }
 505         var target = getTargetedObject(evt);
 506         while(target && target.className !== 'slide') {
 507                 target = target.parentNode;
 508         }
 509         if (!target) {return;}
 510         target = target.parentNode;
 511         if (target !== this.dragged) {
 512                 target.classList.add('dragover');
 513         }
 514         if (this.lastDropTarget && this.lastDropTarget !== target) {
 515                 this.lastDropTarget.classList.remove('dragover');
 516         }
 517         this.lastDropTarget = target;
 518 };
 519
 520 Lightbox.prototype.onDragEnd = function(evt) {
 521         if (this.lastDropTarget) {
 522                 this.lastDropTarget.classList.remove('dragover');
 523                 var i, slide;
 524                 this.pendingMovedSlides = [];
 525                 for(i=this.draggedSelection.length -1 ; i>=0 ; i--) {
 526                         slide = this.draggedSelection[i].cloneNode(true);
 527                         this.pendingMovedSlides.push(slide);
 528                         this.grid.insertBefore(slide, this.lastDropTarget.nextSibling);
 529                         slide.style.opacity = 1;
 530                         slide.style.width = '';
 531                 }
 532                 this.moveSelectedPhotos();
 533         }
 534         // this.draggedSelection = this.lastDropTarget
 535         this.dragged = undefined;
 536 };
 537
 538 Lightbox.prototype.moveSelectedPhotos = function() {
 539         var req = new XMLHttpRequest();
 540         self = this;
 541         req.onreadystatechange = function() {
 542                 switch (req.readyState) {
 543                         case 1 :
 544                                 showProgressImage();
 545                                 break;
 546                         case 4 :
 547                                 hideProgressImage();
 548                                 self._moveSelectedPhotos(req);
 549                                 break;
 550                 }
 551         };
 552
 553         var url = absolute_url() + '/portfolio_move_photos';
 554         req.open("POST", url, true);
 555         req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
 556         var query = 'container_type=' + this.container_type;
 557         var i;
 558         for (i=0 ; i<this.draggedSelection.length ; i++) {
 559                 query += '&uids:list=' + this.draggedSelection[i].getAttribute('name');
 560         }
 561         query += '&afterUid=' + this.lastDropTarget.getAttribute('name');
 562         req.send(query);
 563 };
 564
 565 Lightbox.prototype._moveSelectedPhotos = function(req) {
 566         var i, slide, cb;
 567         if (req.status === 200) {
 568                 var doc = req.responseXML.documentElement;
 569                 if (doc.nodeName === 'ok') {
 570                         for(i=0 ; i<this.draggedSelection.length ; i++) {
 571                                 slide = this.draggedSelection[i];
 572                                 this.grid.removeChild(slide);
 573                                 cb = this.pendingMovedSlides[i].getElementsByTagName('input')[0];
 574                                 cb.checked = false;
 575                                 cb.removeAttribute('checked');
 576                         }
 577                         this.pendingMovedSlides = undefined;
 578                         this.cbIndex = undefined;
 579                         return;
 580                 }
 581         }
 582
 583         for(i=0 ; i<this.pendingMovedSlides.length ; i++) {
 584                 slide = this.pendingMovedSlides[i];
 585                 this.grid.removeChild(slide);
 586         }
 587
 588         for(i=0 ; i<this.draggedSelection.length ; i++) {
 589                 slide = this.draggedSelection[i];
 590                 slide.style.opacity = 1;
 591                 slide.style.width = '';
 592         }
 593 };
 594
 595 }());