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