cb8be2618261e80869652a6ea5b26abe9fc2906b
[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, 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 }());