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