dbea64c89df266f65a041429ddc4a6ac3c1a6192
[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) {
15 this.grid = grid;
16 this.lastCBChecked = undefined;
17 this.form = undefined;
18 var parent = this.grid.parentNode;
19 while(parent) {
20 parent = parent.parentNode;
21 if (parent.tagName === 'FORM') {
22 this.form = parent;
23 break;
24 }
25 else if (parent.tagName === 'BODY') {
26 break;
27 }
28 }
29 thisLightbox = this;
30 addListener(this.grid, 'click', function(evt){thisLightbox.mouseClickHandler(evt);});
31 if (this.form) {
32 var fm = new FormManager(this.form);
33 fm.onBeforeSubmit = function(fm_, evt) {return thisLightbox.onBeforeSubmit(fm_, evt);};
34 fm.onResponseLoad = function(req) {return thisLightbox.onResponseLoad(req);};
35 }
36 };
37
38 Lightbox.prototype.mouseClickHandler = function(evt) {
39 var target = getTargetedObject(evt);
40 if (target.tagName === 'IMG') {
41 var img = target;
42 var link = target.parentNode;
43 var button = link.parentNode;
44 var slide = button.parentNode;
45 var req, url;
46 if (link.tagName === 'A') {
47 switch(link.getAttribute('name')) {
48 case 'add_to_selection':
49 disableDefault(evt);
50 link.blur();
51 req = new XMLHttpRequest();
52 url = link.href;
53 req.open("POST", url, true);
54 req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
55 req.send("ajax=1");
56
57 slide.className = 'selected';
58
59 link.setAttribute('name', 'remove_to_selection');
60 link.href = url.replace(/(.*\/)add_to_selection$/, '$1remove_to_selection');
61 link.title = img.alt = 'Retirer de la sélection';
62 button.className = "button slide-deselect";
63 break;
64
65 case 'remove_to_selection':
66 disableDefault(evt);
67 link.blur();
68 req = new XMLHttpRequest();
69 url = link.href;
70 req.open("POST", url, true);
71 req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
72 req.send("ajax=1");
73 slide.className = null;
74 link.setAttribute('name', 'add_to_selection');
75 link.href = url.replace(/(.*\/)remove_to_selection$/, '$1add_to_selection');
76 link.title = img.alt = 'Ajouter à la sélection';
77 button.className = "button slide-select";
78 break;
79
80 case 'add_to_cart' :
81 disableDefault(evt);
82 slide.widget = new CartWidget(slide, link.href);
83 break;
84
85 case 'hide_for_anonymous':
86 disableDefault(evt);
87 link.blur();
88 req = new XMLHttpRequest();
89 url = link.href;
90 req.open("POST", url, true);
91 req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
92 req.send(null);
93 slide.className = 'hidden-slide';
94 link.setAttribute('name', 'show_for_anonymous');
95 link.href = url.replace(/(.*\/)hideForAnonymous$/, '$1resetHide');
96 link.title = img.alt = 'Montrer au anonymes';
97 button.className = "button slide-show";
98 break;
99
100 case 'show_for_anonymous':
101 disableDefault(evt);
102 link.blur();
103 req = new XMLHttpRequest();
104 url = link.href;
105 req.open("POST", url, true);
106 req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
107 req.send(null);
108 slide.className = null;
109 link.setAttribute('name', 'hide_for_anonymous');
110 link.href = url.replace(/(.*\/)resetHide$/, '$1hideForAnonymous');
111 link.title = img.alt = 'Masquer pour les anonymes';
112 button.className = "button slide-hide";
113 break;
114 }
115 }
116 } else if(target.tagName === 'INPUT' && target.type === 'checkbox') {
117 var cb = target;
118 if (cb.checked) {
119 cb.setAttribute('checked', 'checked');
120 }
121 else {
122 cb.removeAttribute('checked');
123 }
124 this.selectCBRange(evt);
125 }
126 };
127
128 Lightbox.prototype.onBeforeSubmit = function(fm, evt) {
129 switch(fm.submitButton.name) {
130 case 'delete' :
131 this.hideSelection();
132 break;
133 }
134 };
135
136 Lightbox.prototype.onResponseLoad = function(req) {
137 switch(req.responseXML.documentElement.nodeName) {
138 case 'deleted' :
139 this.deleteSelection();
140 break;
141 case 'error' :
142 this.showSelection();
143 break;
144 }
145 };
146
147 Lightbox.prototype.hideSelection = function() {
148 var i, e, slide;
149 for (i=0 ; i<this.form.elements.length ; i++) {
150 e = this.form.elements[i];
151 if (e.type === 'checkbox' && e.checked) {
152 slide = e.parentNode.parentNode;
153 slide.classList.add('zero_opacity');
154 }
155 }
156 };
157
158 Lightbox.prototype.showSelection = function() {
159 var i, e, slide;
160 for (i=0 ; i<this.form.elements.length ; i++) {
161 e = this.form.elements[i];
162 if (e.type === 'checkbox' && e.checked) {
163 slide = e.parentNode.parentNode;
164 slide.classList.remove('zero_opacity');
165 }
166 }
167 };
168
169 Lightbox.prototype.deleteSelection = function() {
170 var i, e, slide;
171 for (i=0 ; i<this.form.elements.length ; i++) {
172 e = this.form.elements[i];
173 if (e.type === 'checkbox' && e.checked) {
174 slide = e.parentNode.parentNode;
175 slide.classList.add('zero_width');
176 }
177 }
178 var self = this;
179 // if you change this, delay you should also change this css rule :
180 // .lightbox span { transition: width 1s
181 setTimeout(function(){self._removeSelection();}, 1000);
182 };
183
184 Lightbox.prototype._removeSelection = function() {
185 var i, e, slide;
186 var toRemove = [];
187 for (i=0 ; i<this.form.elements.length ; i++) {
188 e = this.form.elements[i];
189 if (e.type === 'checkbox' && e.checked) {
190 toRemove.push(e.parentNode.parentNode);
191 }
192 }
193 for (i=0 ; i<toRemove.length ; i++) {
194 slide = toRemove[i];
195 slide.parentNode.removeChild(slide);
196 }
197 this.cbIndex = undefined;
198 };
199
200 Lightbox.prototype.getCBIndex = function(cb) {
201 if (!this.cbIndex) {
202 // build checkbox index
203 this.cbIndex = [];
204 var i, node, c;
205 var nodes = this.grid.childNodes;
206 for (i=0 ; i<nodes.length ; i++) {
207 node = nodes[i];
208 if (node.nodeName === 'SPAN') {
209 c = node.getElementsByTagName('input')[0];
210 c.index = this.cbIndex.length;
211 this.cbIndex[this.cbIndex.length] = c;
212 }
213 }
214 }
215 return cb.index;
216 };
217
218 Lightbox.prototype.selectCBRange = function(evt) {
219 var target = getTargetedObject(evt);
220 evt = getEventObject(evt);
221 var shift = evt.shiftKey;
222 if (shift && this.lastCBChecked) {
223 var from = this.getCBIndex(this.lastCBChecked);
224 var to = this.getCBIndex(target);
225 var start = Math.min(from, to);
226 var stop = Math.max(from, to);
227 var i;
228 for (i=start ; i<stop ; i++ ) {
229 this.cbIndex[i].setAttribute('checked', 'checked');
230 }
231 }
232 else if (target.checked) {
233 this.lastCBChecked = target;
234 }
235 else {
236 this.lastCBChecked = undefined;
237 }
238 };
239
240
241 var _outlineSelectedSlide;
242 if (browser.isGecko) {
243 _outlineSelectedSlide = function(slide) {
244 slide.className = 'selected';
245 };
246 }
247 else {
248 _outlineSelectedSlide = function(slide) {
249 if (slide.className &&
250 !reSelected.test(slide.className)) {
251 slide.className = slide.className + ' selected';
252 }
253 };
254 }
255
256 }());