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