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