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) {
  15         this.grid = grid;
  16         this.lastCBChecked = undefined;
  17         this.form = undefined;
  18         var parent = this.grid.parentNode;
  19         while(parent) {
  20                 parent = parent.parentNode;
  21                 if (parent.tagName === 'FORM') {
  22                         this.form = parent;
  23                         break;
  24                 }
  25                 else if (parent.tagName === 'BODY') {
  26                         break;
  27                 }
  28         }
  29         thisLightbox = this;
  30         addListener(this.grid, 'click', function(evt){thisLightbox.mouseClickHandler(evt);});
  31         if (this.form) {
  32                 var fm = new FormManager(this.form);
  33                 fm.onBeforeSubmit = function(fm_, evt) {return thisLightbox.onBeforeSubmit(fm_, evt);};
  34                 fm.onResponseLoad = function(req) {return thisLightbox.onResponseLoad(req);};
  35         }
  36 };
  37
  38 Lightbox.prototype.mouseClickHandler = function(evt) {
  39         var target = getTargetedObject(evt);
  40         if (target.tagName === 'IMG') {
  41                 var img = target;
  42                 var link =  target.parentNode;
  43                 var button =  link.parentNode;
  44                 var slide = button.parentNode;
  45                 var req, url;
  46                 if (link.tagName === 'A') {
  47                         switch(link.getAttribute('name')) {
  48                                 case 'add_to_selection':
  49                                         disableDefault(evt);
  50                                         link.blur();
  51                                         req = new XMLHttpRequest();
  52                                         url = link.href;
  53                                         req.open("POST", url, true);
  54                                         req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
  55                                         req.send("ajax=1");
  56
  57                                         slide.className = 'selected';
  58
  59                                         link.setAttribute('name', 'remove_to_selection');
  60                                         link.href = url.replace(/(.*\/)add_to_selection$/, '$1remove_to_selection');
  61                                         link.title = img.alt = 'Retirer de la sélection';
  62                                         button.className = "button slide-deselect";
  63                                         break;
  64
  65                                 case 'remove_to_selection':
  66                                         disableDefault(evt);
  67                                         link.blur();
  68                                         req = new XMLHttpRequest();
  69                                         url = link.href;
  70                                         req.open("POST", url, true);
  71                                         req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
  72                                         req.send("ajax=1");
  73                                         slide.className = null;
  74                                         link.setAttribute('name', 'add_to_selection');
  75                                         link.href = url.replace(/(.*\/)remove_to_selection$/, '$1add_to_selection');
  76                                         link.title = img.alt = 'Ajouter à la sélection';
  77                                         button.className = "button slide-select";
  78                                         break;
  79
  80                                 case 'add_to_cart' :
  81                                         disableDefault(evt);
  82                                         slide.widget = new CartWidget(slide, link.href);
  83                                         break;
  84
  85                                 case 'hide_for_anonymous':
  86                                         disableDefault(evt);
  87                                         link.blur();
  88                                         req = new XMLHttpRequest();
  89                                         url = link.href;
  90                                         req.open("POST", url, true);
  91                                         req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
  92                                         req.send(null);
  93                                         slide.className = 'hidden-slide';
  94                                         link.setAttribute('name', 'show_for_anonymous');
  95                                         link.href = url.replace(/(.*\/)hideForAnonymous$/, '$1resetHide');
  96                                         link.title = img.alt = 'Montrer au anonymes';
  97                                         button.className = "button slide-show";
  98                                         break;
  99
 100                                 case 'show_for_anonymous':
 101                                         disableDefault(evt);
 102                                         link.blur();
 103                                         req = new XMLHttpRequest();
 104                                         url = link.href;
 105                                         req.open("POST", url, true);
 106                                         req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
 107                                         req.send(null);
 108                                         slide.className = null;
 109                                         link.setAttribute('name', 'hide_for_anonymous');
 110                                         link.href = url.replace(/(.*\/)resetHide$/, '$1hideForAnonymous');
 111                                         link.title = img.alt = 'Masquer pour les anonymes';
 112                                         button.className = "button slide-hide";
 113                                         break;
 114                         }
 115                 }
 116         } else if(target.tagName === 'INPUT' && target.type === 'checkbox') {
 117                 var cb = target;
 118                 if (cb.checked) {
 119                         cb.setAttribute('checked', 'checked');
 120                 }
 121                 else {
 122                         cb.removeAttribute('checked');
 123                 }
 124                 this.selectCBRange(evt);
 125         }
 126 };
 127
 128 Lightbox.prototype.onBeforeSubmit = function(fm, evt) {
 129         switch(fm.submitButton.name) {
 130                 case 'delete' :
 131                         this.hideSelection();
 132                         break;
 133         }
 134 };
 135
 136 Lightbox.prototype.onResponseLoad = function(req) {
 137         switch(req.responseXML.documentElement.nodeName) {
 138                 case 'deleted' :
 139                         this.deleteSelection();
 140                         break;
 141                 case 'error' :
 142                         this.showSelection();
 143                         break;
 144         }
 145 };
 146
 147 Lightbox.prototype.hideSelection = function() {
 148         var i, e, slide;
 149         for (i=0 ; i<this.form.elements.length ; i++) {
 150                 e = this.form.elements[i];
 151                 if (e.type === 'checkbox' && e.checked) {
 152                         slide = e.parentNode.parentNode;
 153                         slide.classList.add('zero_opacity');
 154                 }
 155         }
 156 };
 157
 158 Lightbox.prototype.showSelection = function() {
 159         var i, e, slide;
 160         for (i=0 ; i<this.form.elements.length ; i++) {
 161                 e = this.form.elements[i];
 162                 if (e.type === 'checkbox' && e.checked) {
 163                         slide = e.parentNode.parentNode;
 164                         slide.classList.remove('zero_opacity');
 165                 }
 166         }
 167 };
 168
 169 Lightbox.prototype.deleteSelection = function() {
 170         var i, e, slide;
 171         for (i=0 ; i<this.form.elements.length ; i++) {
 172                 e = this.form.elements[i];
 173                 if (e.type === 'checkbox' && e.checked) {
 174                         slide = e.parentNode.parentNode;
 175                         slide.classList.add('zero_width');
 176                 }
 177         }
 178         var self = this;
 179         // if you change this, delay you should also change this css rule :
 180         // .lightbox span { transition: width 1s
 181         setTimeout(function(){self._removeSelection();}, 1000);
 182 };
 183
 184 Lightbox.prototype._removeSelection = function() {
 185         var i, e, slide;
 186         var toRemove = [];
 187         for (i=0 ; i<this.form.elements.length ; i++) {
 188                 e = this.form.elements[i];
 189                 if (e.type === 'checkbox' && e.checked) {
 190                         toRemove.push(e.parentNode.parentNode);
 191                 }
 192         }
 193         for (i=0 ; i<toRemove.length ; i++) {
 194                 slide = toRemove[i];
 195                 slide.parentNode.removeChild(slide);
 196         }
 197         this.cbIndex = undefined;
 198 };
 199
 200 Lightbox.prototype.getCBIndex = function(cb) {
 201         if (!this.cbIndex) {
 202                 // build checkbox index
 203                 this.cbIndex = [];
 204                 var i, node, c;
 205                 var nodes = this.grid.childNodes;
 206                 for (i=0 ; i<nodes.length ; i++) {
 207                         node = nodes[i];
 208                         if (node.nodeName === 'SPAN') {
 209                                 c = node.getElementsByTagName('input')[0];
 210                                 c.index = this.cbIndex.length;
 211                                 this.cbIndex[this.cbIndex.length] = c;
 212                         }
 213                 }
 214         }
 215         return cb.index;
 216 };
 217
 218 Lightbox.prototype.selectCBRange = function(evt) {
 219         var target = getTargetedObject(evt);
 220         evt = getEventObject(evt);
 221         var shift = evt.shiftKey;
 222         if (shift && this.lastCBChecked) {
 223                 var from = this.getCBIndex(this.lastCBChecked);
 224                 var to = this.getCBIndex(target);
 225                 var start = Math.min(from, to);
 226                 var stop = Math.max(from, to);
 227                 var i;
 228                 for (i=start ; i<stop ; i++ ) {
 229                         this.cbIndex[i].setAttribute('checked', 'checked');
 230                 }
 231         }
 232         else if (target.checked) {
 233                 this.lastCBChecked = target;
 234         }
 235         else {
 236                 this.lastCBChecked = undefined;
 237         }
 238 };
 239
 240
 241 var _outlineSelectedSlide;
 242 if (browser.isGecko) {
 243         _outlineSelectedSlide = function(slide) {
 244                 slide.className = 'selected';
 245         };
 246 }
 247 else {
 248         _outlineSelectedSlide = function(slide) {
 249                 if (slide.className &&
 250                         !reSelected.test(slide.className)) {
 251                                 slide.className = slide.className + ' selected';
 252                 }
 253         };
 254 }
 255
 256 }());