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