354a3341863ed673180724c061ef0f5711f40078
[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 }
173 };
174
175 Lightbox.prototype.switchToolBarPositioning = function(fixed) {
176 var tbs = this.toolbar.style;
177 if (fixed) {
178 this.toolbar.defaultCssText = this.toolbar.style.cssText;
179 tbs.width = String(this.toolbar.offsetWidth) + 'px';
180 tbs.height = String(this.toolbar.offsetHeight) + 'px';
181 tbs.position = 'fixed';
182 tbs.top = '0';
183 this.toolbarPlaceholder = document.createElement('div');
184 var phs = this.toolbarPlaceholder.style;
185 phs.cssText = tbs.cssText;
186 phs.position = 'relative';
187 this.toolbar.parentNode.insertBefore(this.toolbarPlaceholder, this.toolbar);
188 }
189 else {
190 this.toolbarPlaceholder.parentNode.removeChild(this.toolbarPlaceholder);
191 tbs.cssText = this.toolbar.defaultCssText;
192 }
193 };
194
195
196 Lightbox.prototype.hideSelection = function() {
197 var i, e, slide;
198 for (i=0 ; i<this.form.elements.length ; i++) {
199 e = this.form.elements[i];
200 if (e.type === 'checkbox' && e.checked) {
201 slide = e.parentNode.parentNode;
202 slide.classList.add('zero_opacity');
203 }
204 }
205 };
206
207 Lightbox.prototype.showSelection = function() {
208 var i, e, slide;
209 for (i=0 ; i<this.form.elements.length ; i++) {
210 e = this.form.elements[i];
211 if (e.type === 'checkbox' && e.checked) {
212 slide = e.parentNode.parentNode;
213 slide.classList.remove('zero_opacity');
214 }
215 }
216 };
217
218 Lightbox.prototype.deleteSelection = function() {
219 var i, e, slide;
220 for (i=0 ; i<this.form.elements.length ; i++) {
221 e = this.form.elements[i];
222 if (e.type === 'checkbox' && e.checked) {
223 slide = e.parentNode.parentNode;
224 slide.classList.add('zero_width');
225 }
226 }
227 var self = this;
228 // if you change this, delay you should also change this css rule :
229 // .lightbox span { transition: width 1s
230 setTimeout(function(){self._removeSelection();}, 1000);
231 };
232
233 Lightbox.prototype._removeSelection = function() {
234 var i, e, slide;
235 var toRemove = [];
236 for (i=0 ; i<this.form.elements.length ; i++) {
237 e = this.form.elements[i];
238 if (e.type === 'checkbox' && e.checked) {
239 toRemove.push(e.parentNode.parentNode);
240 }
241 }
242 for (i=0 ; i<toRemove.length ; i++) {
243 slide = toRemove[i];
244 slide.parentNode.removeChild(slide);
245 }
246 this.cbIndex = undefined;
247 };
248
249 Lightbox.prototype.getCBIndex = function(cb) {
250 if (!this.cbIndex) {
251 // build checkbox index
252 this.cbIndex = [];
253 var i, node, c;
254 var nodes = this.grid.childNodes;
255 for (i=0 ; i<nodes.length ; i++) {
256 node = nodes[i];
257 if (node.nodeName === 'SPAN') {
258 c = node.getElementsByTagName('input')[0];
259 c.index = this.cbIndex.length;
260 this.cbIndex[this.cbIndex.length] = c;
261 }
262 }
263 }
264 return cb.index;
265 };
266
267 Lightbox.prototype.selectCBRange = function(evt) {
268 var target = getTargetedObject(evt);
269 evt = getEventObject(evt);
270 var shift = evt.shiftKey;
271 if (shift && this.lastCBChecked) {
272 var from = this.getCBIndex(this.lastCBChecked);
273 var to = this.getCBIndex(target);
274 var start = Math.min(from, to);
275 var stop = Math.max(from, to);
276 var i;
277 for (i=start ; i<stop ; i++ ) {
278 this.cbIndex[i].setAttribute('checked', 'checked');
279 }
280 }
281 else if (target.checked) {
282 this.lastCBChecked = target;
283 }
284 else {
285 this.lastCBChecked = undefined;
286 }
287 };
288
289
290 var _outlineSelectedSlide;
291 if (browser.isGecko) {
292 _outlineSelectedSlide = function(slide) {
293 slide.className = 'selected';
294 };
295 }
296 else {
297 _outlineSelectedSlide = function(slide) {
298 if (slide.className &&
299 !reSelected.test(slide.className)) {
300 slide.className = slide.className + ' selected';
301 }
302 };
303 }
304
305 }());