Maintient toujours visible de la barre d'outils.
[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 = new FormManager(this.form);
38 fm.onBeforeSubmit = function(fm_, evt) {return self.onBeforeSubmit(fm_, evt);};
39 fm.onResponseLoad = function(req) {return self.onResponseLoad(req);};
40 }
41 };
42
43 Lightbox.prototype.windowScrollHandler = function(evt) {
44 if (this.toolbar.offsetTop < window.scrollY && !this.toolbarFixed) {
45 console.log('this.toolbar.offsetTop', this.toolbar.offsetTop);
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.onBeforeSubmit = function(fm, evt) {
147 switch(fm.submitButton.name) {
148 case 'delete' :
149 this.hideSelection();
150 break;
151 }
152 };
153
154 Lightbox.prototype.onResponseLoad = function(req) {
155 switch(req.responseXML.documentElement.nodeName) {
156 case 'deleted' :
157 this.deleteSelection();
158 break;
159 case 'error' :
160 this.showSelection();
161 break;
162 }
163 };
164
165 Lightbox.prototype.switchToolBarPositioning = function(fixed) {
166 var tbs = this.toolbar.style;
167 if (fixed) {
168 this.toolbar.defaultCssText = this.toolbar.style.cssText;
169 tbs.width = String(this.toolbar.offsetWidth) + 'px';
170 tbs.height = String(this.toolbar.offsetHeight) + 'px';
171 tbs.position = 'fixed';
172 tbs.top = '0';
173 this.toolbarPlaceholder = document.createElement('div');
174 var phs = this.toolbarPlaceholder.style;
175 phs.cssText = tbs.cssText;
176 phs.position = 'relative';
177 this.toolbar.parentNode.insertBefore(this.toolbarPlaceholder, this.toolbar);
178 }
179 else {
180 this.toolbarPlaceholder.parentNode.removeChild(this.toolbarPlaceholder);
181 tbs.cssText = this.toolbar.defaultCssText;
182 }
183 };
184
185
186 Lightbox.prototype.hideSelection = function() {
187 var i, e, slide;
188 for (i=0 ; i<this.form.elements.length ; i++) {
189 e = this.form.elements[i];
190 if (e.type === 'checkbox' && e.checked) {
191 slide = e.parentNode.parentNode;
192 slide.classList.add('zero_opacity');
193 }
194 }
195 };
196
197 Lightbox.prototype.showSelection = 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.remove('zero_opacity');
204 }
205 }
206 };
207
208 Lightbox.prototype.deleteSelection = 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.add('zero_width');
215 }
216 }
217 var self = this;
218 // if you change this, delay you should also change this css rule :
219 // .lightbox span { transition: width 1s
220 setTimeout(function(){self._removeSelection();}, 1000);
221 };
222
223 Lightbox.prototype._removeSelection = function() {
224 var i, e, slide;
225 var toRemove = [];
226 for (i=0 ; i<this.form.elements.length ; i++) {
227 e = this.form.elements[i];
228 if (e.type === 'checkbox' && e.checked) {
229 toRemove.push(e.parentNode.parentNode);
230 }
231 }
232 for (i=0 ; i<toRemove.length ; i++) {
233 slide = toRemove[i];
234 slide.parentNode.removeChild(slide);
235 }
236 this.cbIndex = undefined;
237 };
238
239 Lightbox.prototype.getCBIndex = function(cb) {
240 if (!this.cbIndex) {
241 // build checkbox index
242 this.cbIndex = [];
243 var i, node, c;
244 var nodes = this.grid.childNodes;
245 for (i=0 ; i<nodes.length ; i++) {
246 node = nodes[i];
247 if (node.nodeName === 'SPAN') {
248 c = node.getElementsByTagName('input')[0];
249 c.index = this.cbIndex.length;
250 this.cbIndex[this.cbIndex.length] = c;
251 }
252 }
253 }
254 return cb.index;
255 };
256
257 Lightbox.prototype.selectCBRange = function(evt) {
258 var target = getTargetedObject(evt);
259 evt = getEventObject(evt);
260 var shift = evt.shiftKey;
261 if (shift && this.lastCBChecked) {
262 var from = this.getCBIndex(this.lastCBChecked);
263 var to = this.getCBIndex(target);
264 var start = Math.min(from, to);
265 var stop = Math.max(from, to);
266 var i;
267 for (i=start ; i<stop ; i++ ) {
268 this.cbIndex[i].setAttribute('checked', 'checked');
269 }
270 }
271 else if (target.checked) {
272 this.lastCBChecked = target;
273 }
274 else {
275 this.lastCBChecked = undefined;
276 }
277 };
278
279
280 var _outlineSelectedSlide;
281 if (browser.isGecko) {
282 _outlineSelectedSlide = function(slide) {
283 slide.className = 'selected';
284 };
285 }
286 else {
287 _outlineSelectedSlide = function(slide) {
288 if (slide.className &&
289 !reSelected.test(slide.className)) {
290 slide.className = slide.className + ' selected';
291 }
292 };
293 }
294
295 }());