|
1 /* |
|
2 * This file is part of the TraKERS\Front IDILL package. |
|
3 * |
|
4 * (c) IRI <http://www.iri.centrepompidou.fr/> |
|
5 * |
|
6 * For the full copyright and license information, please view the LICENSE |
|
7 * file that was distributed with this source code. |
|
8 */ |
|
9 |
|
10 /* |
|
11 * Projet : TraKERS |
|
12 * Module : Front IDILL |
|
13 * Fichier : zoomInteractions.js |
|
14 * |
|
15 * Auteur : alexandre.bastien@iri.centrepompidou.fr |
|
16 * |
|
17 * Fonctionnalités : Définit les fonctions de zoom/dezoom prezoom/preunzoom. |
|
18 */ |
|
19 |
1 /* |
20 /* |
2 * Zoom sur la position d'une image, 1ère partie. Durant le laps de temps de time ms, l'utilisateur a le choix de zoomer sur une autre image. |
21 * Zoom sur la position d'une image, 1ère partie. Durant le laps de temps de time ms, l'utilisateur a le choix de zoomer sur une autre image. |
3 * Après ce laps de temps, l'image zoom complétement et il n'est plus possible de sélectionner une autre image par pointage. |
22 * Après ce laps de temps, l'image zoom complétement et il n'est plus possible de sélectionner une autre image par pointage. |
|
23 * Est appelé dans le fichier : |
|
24 * pointers > fonction pointersMosaicInteractions. |
4 */ |
25 */ |
5 mosaic.prototype.preZoom = function(snapshot) |
26 Mosaic.prototype.preZoom = function(snapshot) |
6 { |
27 { |
7 if(this.currentMode == "NO-USER" || this.currentMode.indexOf("INCOMING") > -1 || snapshot == null || this.helpDisplayed || this.isMosaicFiltering || this.isSearchByCurvesOn || this.gestureDelRequested) |
28 if(this.currentMode == "NO-USER" || this.currentMode.indexOf("INCOMING") > -1 || snapshot == null || this.helpDisplayed || this.isMosaicFiltering || this.isSearchByCurvesOn || this.gestureDelRequested) |
8 { |
29 { |
9 return; |
30 return; |
10 } |
31 } |
11 |
32 |
12 if(this.fullscreen) |
33 if(this.fullscreen) |
13 { |
34 { |
14 return; |
35 return; |
15 } |
36 } |
16 this.preUnzoom(); |
37 this.isPrezooming = true; |
17 //On enlève les notifications initiales si elles existent. |
38 this.preUnzoom(); |
18 // this.removeSelectionSearchMosaicFull(); |
39 //On enlève les notifications initiales si elles existent. |
19 this.removeNotifications(); |
40 this.removeNotifications(); |
20 |
41 |
21 //Mosaïque. |
42 //Mosaïque. |
22 var _this = this; |
43 var _this = this; |
23 //Dimensions de la mosaïque. |
44 //Dimensions de la mosaïque. |
24 var h = this.height, w = this.width; |
45 var h = this.height, w = this.width; |
25 //Longueur en images, nombre d'images et taille de bordure de la mosaïque. |
46 //Longueur en images, nombre d'images et taille de bordure de la mosaïque. |
26 var len = this.config['length'], imgs = this.config['imagesToShow'], margin = this.marginWidth; |
47 var len = this.config.length, imgs = this.config.imagesToShow, margin = this.marginWidth; |
27 //Dimensions et position d'un snapshot dans la mosaïque. |
48 //Dimensions et position d'un snapshot dans la mosaïque. |
28 var snHeight = this.snapshotHeight, snWidth = this.snapshotWidth; |
49 var snHeight = this.snapshotHeight, snWidth = this.snapshotWidth; |
29 var sTop = snapshot.position().top, sLeft = snapshot.position().left; |
50 var sTop = snapshot.position().top, sLeft = snapshot.position().left; |
30 var prezoomPercentage = this.config['prezoomPercentage']; |
51 var prezoomPercentage = this.config.prezoomPercentage; |
31 |
52 |
32 //ID de l'image actuelle. |
53 //ID de l'image actuelle. |
33 var currentId = $('img', snapshot).attr('id'); |
54 var currentId = $('img', snapshot).attr('id'); |
34 |
55 |
35 //Si un zoom est déjà en cours, on ne zoom sur rien d'autre en attendant que ce snapshot ai dézoomé en cas de mouseleave. |
56 //Si un zoom est déjà en cours, on ne zoom sur rien d'autre en attendant que ce snapshot ai dézoomé en cas de mouseleave. |
36 if(this.zoomed) |
57 if(this.zoomed) |
37 { |
58 { |
38 /*var currentSN = this.pointerPositionToSN(pointerX, pointerY); |
59 this.preUnzoom(); |
39 if(currentSN != null && currentSN.attr('id') != snapshot.attr('id')) |
60 } |
40 { |
|
41 this.preUnzoom(); |
|
42 }*/ |
|
43 // if($('#preZoomContainer-' + currentId) != $(this) && this.previousZoomedSN != '' && this.previousId != '') |
|
44 /*if(this.previousZoomedSN.attr('id') !== snapshot.attr('id')) |
|
45 { |
|
46 this.preUnzoom(); |
|
47 } |
|
48 else |
|
49 { |
|
50 return; |
|
51 }*/ |
|
52 this.preUnzoom(); |
|
53 // return; |
|
54 } |
|
55 |
61 |
56 //On indique qu'on a zoomé et on spécifie le snapshot sur lequel on a zoomé. |
62 //On indique qu'on a zoomé et on spécifie le snapshot sur lequel on a zoomé. |
57 this.zoomed = true; |
63 this.zoomed = true; |
58 this.previousZoomedSN = snapshot; |
64 this.previousZoomedSN = snapshot; |
59 this.previousId = currentId; |
65 this.previousId = currentId; |
66 var fakeSnapshot = '<div id="prezoomContainer-' + currentId + '" class="prezoomContainers"><div id="prezoomSnapshot-' + currentId + '" class="snapshotDivs">' + fakeImg + '</div></div>'; |
72 var fakeSnapshot = '<div id="prezoomContainer-' + currentId + '" class="prezoomContainers"><div id="prezoomSnapshot-' + currentId + '" class="snapshotDivs">' + fakeImg + '</div></div>'; |
67 |
73 |
68 //On l'ajoute à la mosaïque. |
74 //On l'ajoute à la mosaïque. |
69 $('#mainPanel').append(fakeSnapshot); |
75 $('#mainPanel').append(fakeSnapshot); |
70 //On modifie ses attributs. |
76 //On modifie ses attributs. |
71 // console.log('cid : ' + currentId, $('#fake-' + currentId).length); |
77 // console.log('cid : ' + currentId, $('#fake-' + currentId).length); |
72 $('#fake-' + currentId).load(function() |
78 $('#fake-' + currentId).load(function() |
73 { |
79 { |
74 // snapshot.fadeTo(400, '0.5').delay(200).fadeTo(400, '1'); |
80 // snapshot.fadeTo(400, '0.5').delay(200).fadeTo(400, '1'); |
75 $('#prezoomContainer-' + currentId).css('top', sTop).css('left', sLeft).css('width', (snWidth + margin)).css('height', (snHeight + margin)); |
81 $('#prezoomContainer-' + currentId).css('top', sTop).css('left', sLeft).css('width', (snWidth + margin)).css('height', (snHeight + margin)); |
76 $('#prezoomSnapshot-' + currentId).css('width', (snWidth)).css('height', (snHeight)); |
82 $('#prezoomSnapshot-' + currentId).css('width', (snWidth)).css('height', (snHeight)); |
77 $('#prezoomContainer-' + currentId).css('display', 'block'); |
83 $('#prezoomContainer-' + currentId).css('display', 'block'); |
78 |
84 |
79 //Dimensions et coordonnées initiales du div sur lequel on zoom. |
85 //Dimensions et coordonnées initiales du div sur lequel on zoom. |
80 var initialDivWidth = $('#prezoomContainer-' + currentId).width(), initialDivHeight = $('#prezoomContainer-' + currentId).height(); |
86 var initialDivWidth = $('#prezoomContainer-' + currentId).width(), initialDivHeight = $('#prezoomContainer-' + currentId).height(); |
81 var initialDivTop = $('#prezoomContainer-' + currentId).position().top, initialDivLeft = $('#prezoomContainer-' + currentId).position().left; |
87 var initialDivTop = $('#prezoomContainer-' + currentId).position().top, initialDivLeft = $('#prezoomContainer-' + currentId).position().left; |
82 //Dimensions et coordonnées finales du div. |
88 //Dimensions et coordonnées finales du div. |
83 var finalDivWidth = initialDivWidth * (prezoomPercentage+1), diffWidth = finalDivWidth - initialDivWidth, finalDivHeight = initialDivHeight + diffWidth; |
89 var finalDivWidth = initialDivWidth * (prezoomPercentage+1), diffWidth = finalDivWidth - initialDivWidth, finalDivHeight = initialDivHeight + diffWidth; |
84 var finalDivTop = (initialDivTop - (finalDivHeight - snHeight)/2), finalDivLeft = (initialDivLeft - (finalDivWidth - snWidth)/2); |
90 var finalDivTop = (initialDivTop - (finalDivHeight - snHeight)/2), finalDivLeft = (initialDivLeft - (finalDivWidth - snWidth)/2); |
85 |
91 |
86 //CAS PARTICULIER pour la position du snapshot zoomé : les bordures. |
92 //CAS PARTICULIER pour la position du snapshot zoomé : les bordures. |
87 if(finalDivTop < 0) |
93 if(finalDivTop < 0) |
88 { |
94 { |
89 finalDivTop = -margin; |
95 finalDivTop = -margin; |
90 } |
96 } |
91 if(finalDivTop + finalDivHeight > h) |
97 if(finalDivTop + finalDivHeight > h) |
92 { |
98 { |
93 finalDivTop = h - finalDivHeight; |
99 finalDivTop = h - finalDivHeight; |
94 } |
100 } |
95 if(finalDivLeft < 0) |
101 if(finalDivLeft < 0) |
96 { |
102 { |
97 finalDivLeft = 0; |
103 finalDivLeft = 0; |
98 } |
104 } |
99 if(finalDivLeft + finalDivWidth + margin*2 > w) |
105 if(finalDivLeft + finalDivWidth + margin*2 > w) |
100 { |
106 { |
101 finalDivLeft = w - finalDivWidth - margin*2; |
107 finalDivLeft = w - finalDivWidth - margin*2; |
102 } |
108 } |
103 |
|
104 ////Code de debug. |
|
105 ////CAUTION//// |
|
106 /*var red = '<div id="red"></div>'; |
|
107 if($('#red') != null || $('#red') != undefined) |
|
108 $('body').append(red); |
|
109 $('#red').css('background-color', '#FF0000').css('position', 'absolute').css('top', '0px').css('left', '0px').css('width', '100px').css('height', '100px'); |
|
110 $('#red').css('top', finalDivTop).css('left', finalDivLeft).css('width', finalDivWidth).css('height', finalDivHeight);*/ |
|
111 //alert("initial : " + initialDivWidth + " " + initialDivHeight + " ; final : " + finalDivWidth + " " + finalDivHeight); |
|
112 ////CAUTION//// |
|
113 |
109 |
114 //On prézoom le div en le centrant sur le milieu du snapshot pointé. |
110 //On prézoom le div en le centrant sur le milieu du snapshot pointé. |
115 $('#prezoomSnapshot-' + currentId).animate( |
111 $('#prezoomSnapshot-' + currentId).animate( |
116 { |
112 { |
117 width: finalDivWidth + margin, |
113 width: finalDivWidth + margin, |
118 height: finalDivHeight - margin*2, |
114 height: finalDivHeight - margin*2, |
119 top: finalDivTop + margin, |
115 top: finalDivTop + margin, |
120 left: finalDivLeft + margin |
116 left: finalDivLeft + margin |
121 }, _this.config['timePrezoom']); |
117 }, _this.config.timePrezoom); |
122 $('#prezoomContainer-' + currentId).animate( |
118 $('#prezoomContainer-' + currentId).animate( |
123 { |
119 { |
124 width: finalDivWidth + margin*2, |
120 width: finalDivWidth + margin*2, |
125 height: finalDivHeight - margin, |
121 height: finalDivHeight - margin, |
126 top: finalDivTop + margin, |
122 top: finalDivTop + margin, |
127 left: finalDivLeft |
123 left: finalDivLeft |
128 }, _this.config['timePrezoom'], function() |
124 }, _this.config.timePrezoom, function() |
129 { |
125 { |
130 if(!_this.mouseInteractions) |
126 //On a fini de prézoomer. |
131 { |
127 _this.isPrezooming = false; |
132 //On met le spinner gif sur le pointeur, s'il n'existe pas déjà. |
128 //Si on est en mode Kinect. |
133 if($('#spinner').length == 0) |
129 if(!_this.config.mouseInteractions) |
134 { |
130 { |
135 //On repère le pointeur ayant provoqué le prezoom. |
131 //On met le spinner gif sur le pointeur, s'il n'existe pas déjà. |
136 var prezoomPointer; |
132 if($('#spinner').length == 0) |
137 if(!_this.isMainPointerDisplayed) |
133 { |
138 { |
134 //On repère le pointeur ayant provoqué le prezoom. |
139 prezoomPointer = $('#secondPointer'); |
135 var prezoomPointer; |
140 } |
136 if(!_this.isMainPointerDisplayed) |
141 if(!_this.isSecondPointerDisplayed) |
137 { |
142 { |
138 prezoomPointer = $('#secondPointer'); |
143 prezoomPointer = $('#mainPointer'); |
139 } |
144 } |
140 if(!_this.isSecondPointerDisplayed) |
145 |
141 { |
146 var spinner = "<img id='spinner'></div>"; |
142 prezoomPointer = $('#mainPointer'); |
147 $('body').append(spinner); |
143 } |
148 $('#spinner').css( |
144 |
149 { |
145 //On crée le spinner qui indique le temps restant avant le zoom. |
150 position: 'absolute', |
146 var spinner = "<img id='spinner'></div>"; |
151 top: prezoomPointer.position().top, |
147 $('body').append(spinner); |
152 left: prezoomPointer.position().left, |
148 $('#spinner').css( |
153 width: 85, |
149 { |
154 height: 85, |
150 position: 'absolute', |
155 'z-index': 600 |
151 top: prezoomPointer.position().top, |
156 }); |
152 left: prezoomPointer.position().left, |
157 $('#spinner').attr('src', './img/cursors/selector_anim_2.gif'); |
153 width: 85, |
158 } |
154 height: 85, |
159 } |
155 'z-index': 600 |
160 else |
156 }); |
161 { |
157 $('#spinner').attr('src', './img/cursors/selector_anim_2.gif'); |
162 _this.isOnAPrezoomSN = true; |
158 } |
163 } |
159 } |
164 |
160 //Si on est en mode d'interaction souris, on indique juste qu'on est en prezoom. |
165 if(_this.currentMode == 'MOSAIC') |
161 else |
166 { |
162 { |
167 _this.removeNotifications(); |
163 _this.isOnAPrezoomSN = true; |
168 _this.mosaicSelection(); |
164 } |
169 } |
165 |
170 else if(_this.currentMode == 'FILTER' && !_this.filterSearchedType && _this.curvesGesturesFound) |
166 //Si on est en mode mosaic, on indique juste qu'on effectue une selection. |
171 { |
167 if(_this.currentMode == 'MOSAIC') |
172 _this.removeNotifications(); |
168 { |
173 _this.filterSearchAndSelection(); |
169 _this.removeNotifications(); |
174 } |
170 _this.mosaicSelection(); |
175 else if(_this.currentMode == 'FILTER' && _this.filterSearchedType) |
171 } |
176 { |
172 //Si on est en filtrage, mais qu'on n'a pas encore de gesture de filtrage, on indique qu'on est en filtrage et en selection. |
177 _this.removeNotifications(); |
173 else if(_this.currentMode == 'FILTER' && !_this.filterSearchedType && _this.curvesGesturesFound) |
178 _this.filterGestureAndSelection(_this.filterSearchedType, 'valid'); |
174 { |
179 } |
175 _this.removeNotifications(); |
180 }); |
176 _this.filterSearchAndSelection(); |
|
177 } |
|
178 //Si on est en filtrage avec une gesture de recherche, on indique la gesture et la selection. |
|
179 else if(_this.currentMode == 'FILTER' && _this.filterSearchedType) |
|
180 { |
|
181 _this.removeNotifications(); |
|
182 _this.filterGestureAndSelection(_this.filterSearchedType, 'valid'); |
|
183 } |
|
184 }); |
181 }); |
185 }); |
182 |
186 |
183 if(!this.mouseInteractions) |
187 //Si on est en mode Kinect, on zoom après un certain temps. |
184 { |
188 if(!this.config.mouseInteractions) |
185 this.zoomTimeout = setTimeout(function() |
189 { |
186 { |
190 this.zoomTimeout = setTimeout(function() |
187 _this.zoom(); |
191 { |
188 }, this.config['timeoutZoom']); |
192 _this.zoom(); |
189 } |
193 }, this.config.timeoutZoom); |
|
194 } |
190 } |
195 } |
191 |
196 |
192 /* |
197 /* |
193 * Dézoome sur la position de l'image. Il est à noter que ce dézoome diffère du dézoom global dans la mesure où celui-ci ne concerne que l'image sur laquelle on a zoomé. |
198 * Dézoome sur la position de l'image. Il est à noter que ce dézoome diffère du dézoom global dans la mesure où celui-ci ne concerne que l'image sur laquelle on a zoomé. |
|
199 * Est appelé dans les fichiers : |
|
200 * pointers > fonction pointersMosaicInteractions. |
|
201 * zoomInteractions > fonctions preZoom et zoom. |
|
202 * mosaic > fonction onMouseMove. |
|
203 * client > fonction processMsg. |
194 */ |
204 */ |
195 mosaic.prototype.preUnzoom = function() |
205 Mosaic.prototype.preUnzoom = function() |
196 { |
206 { |
197 //Si on n'a pas zoomé, on quitte la fonction. |
207 $('#spinner').remove(); |
198 /*if(!this.zoomed) |
208 |
199 { |
209 var _this = this; |
200 return; |
210 |
201 }*/ |
211 //On indique qu'on n'est plus en prezoom. |
202 |
212 this.isOnAPrezoomSN = false; |
203 /*if(this.currentMode == "NO-USER" || this.currentMode.indexOf("INCOMING") > -1) |
213 clearTimeout(this.zoomTimeout); |
204 { |
214 |
205 return; |
215 //Si on est en mode mosaic, on indique qu'on peut pointer ou bien rechercher. |
206 }*/ |
216 if(this.currentMode == 'MOSAIC') |
207 |
217 { |
208 $('#spinner').remove(); |
218 this.removeNotifications(); |
209 |
219 this.mosaicSelectionAndSearch(); |
210 var _this = this; |
220 } |
211 |
221 //Si on est en filtrage sans gesture, on indique qu'on est juste en filtrage. |
212 this.isOnAPrezoomSN = false; |
222 else if(_this.currentMode == 'FILTER' && !this.filterSearchedType && !this.curvesGesturesFound) |
213 clearTimeout(this.zoomTimeout); |
223 { |
214 |
224 this.removeNotifications(); |
215 if(this.currentMode == 'MOSAIC') |
225 this.filterSearch(); |
216 { |
226 } |
217 this.removeNotifications(); |
227 //Si on est en filtrage avec gesture, on indique la gesture de filtrage. |
218 this.mosaicSelectionAndSearch(); |
228 else if(_this.currentMode == 'FILTER' && this.filterSearchedType && !this.curvesGesturesFound) |
219 } |
229 { |
220 else if(_this.currentMode == 'FILTER' && !this.filterSearchedType && !this.curvesGesturesFound) |
230 this.removeNotifications(); |
221 { |
231 this.filterGesture(this.filterSearchedType, 'valid'); |
222 this.removeNotifications(); |
232 } |
223 this.filterSearch(); |
|
224 } |
|
225 else if(_this.currentMode == 'FILTER' && this.filterSearchedType && !this.curvesGesturesFound) |
|
226 { |
|
227 this.removeNotifications(); |
|
228 this.filterGesture(this.filterSearchedType, 'valid'); |
|
229 } |
|
230 /*this.removePointMosaicPrezoom(); |
|
231 this.notifySelectionSearchMosaicFull();*/ |
|
232 |
233 |
233 //On spécifie la marge afin de centrer le prédézoom. |
234 //On spécifie la marge afin de centrer le prédézoom. |
234 var margin = this.marginWidth; |
235 var margin = this.marginWidth; |
235 //ID du snapshot précédemment pointé. |
236 //ID du snapshot précédemment pointé. |
236 var id = this.previousId; |
237 var id = this.previousId; |
237 //On ne zoom plus. |
|
238 //this.zoomed = false; |
|
239 //On rétrécit le snapshot de prézoom, puis on le supprime en donnant l'illusion qu'il s'agissait du véritable snapshot, alors qu'en fait c'était un clone. |
238 //On rétrécit le snapshot de prézoom, puis on le supprime en donnant l'illusion qu'il s'agissait du véritable snapshot, alors qu'en fait c'était un clone. |
240 for(var i = 0 ; i < this.config['imagesToShow'] ; i++) |
239 for(var i = 0 ; i < this.config.imagesToShow ; i++) |
241 { |
240 { |
242 if($('#prezoomContainer-snapshot-' + i).length > 0) |
241 if($('#prezoomContainer-snapshot-' + i).length > 0) |
243 { |
242 { |
244 $('#prezoomContainer-snapshot-' + i).animate( |
243 $('#prezoomContainer-snapshot-' + i).animate( |
245 { |
244 { |
246 width: this.snapshotWidth + margin, |
245 width: this.snapshotWidth + margin, |
247 height: this.snapshotHeight + margin, |
246 height: this.snapshotHeight + margin, |
248 top: $('#snapshotDiv-' + i).position().top,//this.previousZoomedSN.position().top, |
247 top: $('#snapshotDiv-' + i).position().top, |
249 left: $('#snapshotDiv-' + i).position().left//this.previousZoomedSN.position().left |
248 left: $('#snapshotDiv-' + i).position().left |
250 }, this.config['preUnzoomTime'], function(){ $(this).remove(); _this.zoomed = false; }); |
249 }, this.config.preUnzoomTime, function(){ $(this).remove(); _this.zoomed = false; }); |
251 $('#prezoomSnapshot-snapshot-' + i).animate( |
250 $('#prezoomSnapshot-snapshot-' + i).animate( |
252 { |
251 { |
253 width: this.snapshotWidth, |
252 width: this.snapshotWidth, |
254 height: this.snapshotHeight, |
253 height: this.snapshotHeight, |
255 top: $('#snapshotDiv-' + i).position().top,//this.previousZoomedSN.position().top, |
254 top: $('#snapshotDiv-' + i).position().top, |
256 left: $('#snapshotDiv-' + i).position().left//this.previousZoomedSN.position().left |
255 left: $('#snapshotDiv-' + i).position().left |
257 }, this.config['preUnzoomTime']); |
256 }, this.config.preUnzoomTime); |
258 } |
257 } |
259 } |
258 } |
260 |
|
261 /*$('#prezoomSnapshot-' + id).animate( |
|
262 { |
|
263 width: this.snapshotWidth, |
|
264 height: this.snapshotHeight, |
|
265 top: this.previousZoomedSN.position().top, |
|
266 left: this.previousZoomedSN.position().left |
|
267 }, this.config['preUnzoomTime']); |
|
268 $('#prezoomContainer-' + id).animate( |
|
269 { |
|
270 width: this.snapshotWidth + margin, |
|
271 height: this.snapshotHeight + margin, |
|
272 top: this.previousZoomedSN.position().top, |
|
273 left: this.previousZoomedSN.position().left |
|
274 }, this.config['preUnzoomTime'], function(){ $(this).remove(); _this.zoomed = false; });*/ |
|
275 } |
259 } |
276 |
260 |
277 |
261 |
278 /* |
262 /* |
279 * Zoom d'un snapshot en plein écran. |
263 * Zoom d'un snapshot en plein écran. |
|
264 * Est appelé dans les fichiers : |
|
265 * zoomInteractions > fonction preZoom. |
|
266 * mosaic > fonctions onMouseUp et init. |
280 */ |
267 */ |
281 mosaic.prototype.zoom = function() |
268 Mosaic.prototype.zoom = function() |
282 { |
269 { |
283 var _this = this; |
270 var _this = this; |
284 |
271 |
285 //Si la mosaïque est en pleine écran, pas la peine de zoomer. |
272 //Si la mosaïque est en pleine écran, pas la peine de zoomer. |
286 if(this.currentMode == "VIDEO" || this.currentMode == "SEARCH" || this.currentMode.indexOf("INCOMING") > -1 || this.helpDisplayed) |
273 if(this.currentMode == "VIDEO" || this.currentMode == "SEARCH" || this.currentMode.indexOf("INCOMING") > -1 || this.helpDisplayed) |
287 { |
274 { |
288 return; |
275 return; |
289 } |
276 } |
290 |
277 |
291 //On prend les attributs nécessaires au calculs. |
278 //On prend les attributs nécessaires au calculs. |
292 var margin = this.marginWidth, len = this.config['length'], imgs = this.config['imagesToShow'], zoomedMargin = this.config['zoomedMargin']; |
279 var margin = this.marginWidth, len = this.config.length, imgs = this.config.imagesToShow, zoomedMargin = this.config.zoomedMargin; |
293 var zoomPercentage = this.config['zoomPercentage']; |
280 var zoomPercentage = this.config.zoomPercentage; |
294 var initMPWidth = this.previousZoomedSN.width() * len + margin*len, initMPHeight = this.previousZoomedSN.height() * (imgs / len) + margin*(imgs / len); |
281 var initMPWidth = this.previousZoomedSN.width() * len + margin*len, initMPHeight = this.previousZoomedSN.height() * (imgs / len) + margin*(imgs / len); |
295 var newMPWidth = initMPWidth * len + zoomedMargin * (len), newMPHeight = initMPHeight * (imgs / len) + zoomedMargin * ((imgs / len)); |
282 var newMPWidth = initMPWidth * len + zoomedMargin * (len), newMPHeight = initMPHeight * (imgs / len) + zoomedMargin * ((imgs / len)); |
296 var newPreMPWidth = initMPWidth * len * zoomPercentage + zoomedMargin * (len), newPreMPHeight = initMPHeight * (imgs / len) * zoomPercentage + zoomedMargin * ((imgs / len)); |
283 var newPreMPWidth = initMPWidth * len * zoomPercentage + zoomedMargin * (len), newPreMPHeight = initMPHeight * (imgs / len) * zoomPercentage + zoomedMargin * ((imgs / len)); |
297 |
284 |
298 //Dimensions et coordonnées initiales du div sur lequel on zoom. |
285 //Dimensions et coordonnées initiales du div sur lequel on zoom. |
314 |
301 |
315 //On récupère son ID. |
302 //On récupère son ID. |
316 var tab, zoomedImgId; |
303 var tab, zoomedImgId; |
317 tab = _this.previousId.split('-'); |
304 tab = _this.previousId.split('-'); |
318 zoomedImgId = tab[1]; |
305 zoomedImgId = tab[1]; |
319 |
306 |
320 //On donne les dimensions des snapshots. |
307 //On donne les dimensions des snapshots. |
321 $('.snapshotDivs').animate( |
308 $('.snapshotDivs').animate( |
322 { |
309 { |
323 width: newSnWidth, |
310 width: newSnWidth, |
324 height: newSnHeight, |
311 height: newSnHeight, |
325 margin: zoomedMargin/2 + 'px', |
312 margin: zoomedMargin/2 + 'px', |
326 }, this.config['zoomTime']); |
313 }, this.config.zoomTime); |
327 |
314 |
328 if(this.currentMode != 'NO-USER') |
315 if(this.currentMode != 'NO-USER') |
329 { |
316 { |
330 //Les snapshots baissent alors en opacité, donnant l'impression qu'ils sont grisés. |
317 //Les snapshots baissent alors en opacité, donnant l'impression qu'ils sont grisés. |
331 $('.snapshotDivs').animate( |
318 $('.snapshotDivs').animate( |
332 { |
319 { |
333 opacity: '0.4' |
320 opacity: '0.4' |
334 }, this.config['zoomTime']); |
321 }, this.config.zoomTime); |
335 //Le snapshot du milieu revient à une opacité optimale, ce qui attire l'attention de l'utilisateur. |
322 //Le snapshot du milieu revient à une opacité optimale, ce qui attire l'attention de l'utilisateur. |
336 $(this.previousZoomedSN).animate( |
323 $(this.previousZoomedSN).animate( |
337 { |
324 { |
338 opacity: '1' |
325 opacity: '1' |
339 }, this.config['zoomTime']); |
326 }, this.config.zoomTime); |
340 } |
327 } |
341 // console.log('BBB1 : ' + this.currentMode); |
|
342 //On zoome sur la mosaïque. |
328 //On zoome sur la mosaïque. |
343 $('#mainPanel').animate( |
329 $('#mainPanel').animate( |
344 { |
330 { |
345 width: newPreMPWidth, |
331 width: newPreMPWidth, |
346 height: newPreMPHeight, |
332 height: newPreMPHeight, |
347 top: newZoomTop, |
333 top: newZoomTop, |
348 left: newZoomLeft |
334 left: newZoomLeft |
349 }, this.config['zoomTime'], function() |
335 }, this.config.zoomTime, function() |
350 { |
336 { |
351 _this.snTop = (zoomedImg.position().top + newZoomTop + _this.MPTop_margin), _this.snLeft = (zoomedImg.position().left + newZoomLeft); |
337 _this.snTop = (zoomedImg.position().top + newZoomTop + _this.MPTop_margin), _this.snLeft = (zoomedImg.position().left + newZoomLeft); |
352 _this.snWidth = newSnWidth + 1, _this.snHeight = newSnHeight + 1; |
338 _this.snWidth = newSnWidth + 1, _this.snHeight = newSnHeight + 1; |
353 |
339 |
354 _this.notifyTopVideo = newZoomTop; |
340 _this.notifyTopVideo = newZoomTop; |
355 _this.notifyLeftVideo = newZoomLeft; |
341 _this.notifyLeftVideo = newZoomLeft; |
356 |
342 |
357 //On charge les interactions avec les voisins. |
343 //On charge les interactions avec les voisins. |
358 _this.centerId = zoomedImgId; |
344 _this.centerId = zoomedImgId; |
359 // console.log('BBB2 : ' + _this.currentMode); |
345 |
360 if(_this.currentMode != "NO-USER") |
346 //Si on n'est pas en mode sans utilisateur, on passe en mode video et on regarde les voisins. |
361 { |
347 if(_this.currentMode != "NO-USER") |
362 // console.log('PROBLEM'); |
348 { |
363 _this.currentMode = 'VIDEO'; |
349 _this.currentMode = 'VIDEO'; |
364 _this.listenToNeighbours(); |
350 _this.listenToNeighbours(); |
365 } |
351 } |
366 |
352 |
367 console.log('gesture shown : ' + _this.currentSearchGesture[_this.centerId]); |
353 //Si on a une recherche dans cette video. |
368 |
354 if(_this.currentSearchGesture[_this.centerId] != '') |
369 if(_this.currentSearchGesture[_this.centerId] != '') |
355 { |
370 { |
356 //On passe en recherche en indiquant la gesture de recherche. |
371 _this.currentMode = 'SEARCH'; |
357 _this.currentMode = 'SEARCH'; |
372 _this.isCurrentlyInASearchByGesture = true; |
358 _this.isCurrentlyInASearchByGesture = true; |
373 _this.removeNotifications(); |
359 _this.removeNotifications(); |
374 _this.searchGesture(_this.currentSearchGesture[_this.centerId], 'valid'); |
360 _this.searchGesture(_this.currentSearchGesture[_this.centerId], 'valid'); |
375 } |
361 } |
376 |
362 |
377 $('#spinner').remove(); |
363 //On enlève le spinner et on redonne les apparences par défaut aux pointeurs. |
378 $('#mainPointer').css('background-image', 'url(./img/cursors/pointer.png)'); |
364 $('#spinner').remove(); |
379 $('#secondPointer').css('background-image', 'url(./img/cursors/pointer2.png)'); |
365 $('#mainPointer').css('background-image', 'url(./img/cursors/pointer.png)'); |
380 |
366 $('#secondPointer').css('background-image', 'url(./img/cursors/pointer2.png)'); |
381 // console.log('BBB3 : ' + _this.currentMode); |
367 |
382 _this.loadPlayer(_this.snTop, _this.snLeft, _this.snWidth, _this.snHeight, newZoomTop, newZoomLeft, _this.timeToGoAt[_this.centerId]); |
368 //On charge le player. |
383 |
369 _this.loadPlayer(_this.snTop, _this.snLeft, _this.snWidth, _this.snHeight, newZoomTop, newZoomLeft, _this.timeToGoAt[_this.centerId]); |
384 $('body').click(function() |
|
385 { |
|
386 //Si on clique en dehors de la video centrale, alors on dézoome. |
|
387 var TL = $('.Ldt-Timeline'); |
|
388 var TLwidth = TL.width(), TLheight = TL.height(); |
|
389 var Ptop = $('.LdtPlayer').position().top, Pleft = $('.LdtPlayer').position().left; |
|
390 var Pheight = $('.LdtPlayer').height(); |
|
391 var MPx = _this.mousePosX, MPy = _this.mousePosY; |
|
392 |
|
393 //On regarde si on a cliqué sur un snapshot. |
|
394 var SN = _this.pointerPositionToSN(MPx - _this.notifyLeftVideo, MPy - _this.notifyTopVideo, true); |
|
395 var SNId; |
|
396 if(SN) |
|
397 { |
|
398 SNId = parseInt(SN.attr('id').replace('snapshotDiv-', '')); |
|
399 } |
|
400 |
|
401 if(!_this.gestureDelRequested) |
|
402 { |
|
403 //Si non, ou s'il ne fait pas partie des voisins. |
|
404 if(!SNId || !_.include(_this.neighboursIds, SNId)) |
|
405 { |
|
406 if(MPx < Pleft || MPx > (+Pleft + TLwidth) || MPy < Ptop || MPy > (+Ptop + Pheight - TLheight)) |
|
407 { |
|
408 _this.unzoom(); |
|
409 } |
|
410 } |
|
411 //Si on se trouve sur un voisin, on bouge. |
|
412 else if(SNId && _.include(_this.neighboursIds, SNId) && _this.canMoveToNeighbour) |
|
413 { |
|
414 _this.moveToNeighbour($('#snapshotDiv-' + SNId)); |
|
415 } |
|
416 } |
|
417 else |
|
418 { |
|
419 _this.gestureDelRequested = false; |
|
420 } |
|
421 }); |
|
422 |
|
423 $('body').on('mousewheel', function(event, delta, deltaX, deltaY) |
|
424 { |
|
425 //Action quand on "tire" la molette vers soi. |
|
426 if (delta < 0) |
|
427 { |
|
428 _this.unzoom(); |
|
429 } |
|
430 }); |
|
431 }); |
370 }); |
432 } |
371 } |
433 |
372 |
434 /* |
373 /* |
435 * Retour à la taille normale de la mosaïque. |
374 * Retour à la taille normale de la mosaïque. |
|
375 * Est appelé dans les fichiers : |
|
376 * neighbours > fonction checkForDezoom. |
|
377 * zoomInteractions > fonction zoom. |
|
378 * mosaic > fonctions showNImages et onPlayerLoad. |
436 */ |
379 */ |
437 mosaic.prototype.unzoom = function() |
380 Mosaic.prototype.unzoom = function() |
438 { |
381 { |
439 //Si on n'est pas en plein écran, on quitte. |
382 //Si on n'est pas en plein écran, on quitte. |
440 // console.log("'" + this.currentMode + "'"); |
|
441 if(this.currentMode != "SEARCH" && this.currentMode != "VIDEO" && this.currentMode != "NO-USER" && this.currentMode.indexOf("INCOMING") == -1) |
383 if(this.currentMode != "SEARCH" && this.currentMode != "VIDEO" && this.currentMode != "NO-USER" && this.currentMode.indexOf("INCOMING") == -1) |
442 { |
384 { |
443 return; |
385 return; |
444 } |
386 } |
445 |
387 |
446 var _this = this; |
388 var _this = this; |
447 |
389 |
448 if(this.mouseInteractions) |
390 //Il n'est plus possible de swiper. |
449 { |
391 this.canSwipe = false; |
450 $(window).unbind('click'); |
392 |
451 $(window).unbind('mousewheel'); |
393 //Si la TL avait été sélectionnée, on la déselectionne. |
452 |
394 if(this.currentMode == 'TIMELINE') |
453 //On rebind le clic pour supprimer une recherche. |
395 { |
454 $(window).click(function(e) |
396 this.exitTimeline('unzoom'); |
455 { |
397 } |
456 _this.removeSearchNotificationIfOnIt(e.pageX, e.pageY); |
398 |
457 }); |
399 //On indique qu'on est en train de dezoomer. |
458 } |
400 this.currentlyUnzooming = true; |
459 |
401 |
460 this.canSwipe = false; |
402 //On supprime les voisins additionnels et on déselectionne les voisins. |
461 |
403 this.removeAdditionalNeighbours(); |
462 //Si la TL avait été sélectionnée, on la déselectionne. |
404 this.deselectAllNeighbours(); |
463 if(this.currentMode == 'TIMELINE') |
405 |
464 { |
406 this.snTop = 0; |
465 this.exitTimeline('unzoom'); |
407 this.snLeft = 0; |
466 } |
408 this.Width = 0; |
467 |
409 this.snHeight = 0; |
468 this.currentlyUnzooming = true; |
|
469 |
|
470 this.removeAdditionalNeighbours(); |
|
471 this.deselectAllNeighbours(); |
|
472 |
|
473 this.snTop = 0; |
|
474 this.snLeft = 0; |
|
475 this.Width = 0; |
|
476 this.snHeight = 0; |
|
477 |
410 |
478 //On charge les attributs nécessaires aux calculs. |
411 //On charge les attributs nécessaires aux calculs. |
479 var sWidth = this.snapshotWidth, sHeight = this.snapshotHeight; |
412 var sWidth = this.snapshotWidth, sHeight = this.snapshotHeight; |
480 var mpWidth = this.width, mpHeight = this.height; |
413 var mpWidth = this.width, mpHeight = this.height; |
481 var _this = this; |
414 var _this = this; |
482 |
415 |
483 //On passe le snapshot sur lequel on a zoomé en SD. |
416 //On passe le snapshot sur lequel on a zoomé en SD. |
484 var zoomedImg = $('img', this.previousZoomedSN); |
417 var zoomedImg = $('img', this.previousZoomedSN); |
485 var src = zoomedImg.attr('src'); |
418 var src = zoomedImg.attr('src'); |
486 zoomedImg.attr('src', src.replace('snapshots/', 'snapshots-little/')); |
419 zoomedImg.attr('src', src.replace('snapshots/', 'snapshots-little/')); |
487 |
420 |
488 if(_this.player.widgets && _this.player.widgets[0]) |
421 //On libère le player. |
489 { |
422 if(_this.player.widgets && _this.player.widgets[0]) |
490 // console.log(Math.floor(_this.player.popcorn.currentTime())); |
423 { |
491 _this.timeToGoAt[_this.centerId] = Math.floor(_this.player.popcorn.currentTime()); |
424 _this.timeToGoAt[_this.centerId] = Math.floor(_this.player.popcorn.currentTime()); |
492 _this.player.widgets[0].freePlayer(); |
425 _this.player.widgets[0].freePlayer(); |
493 } |
426 } |
494 |
427 |
495 _this.playerIsReady = false; |
428 //On indique que le player n'est pas prêt et on le supprime. |
496 $('.LdtPlayer').remove(); |
429 _this.playerIsReady = false; |
497 $('body').append('<div class="LdtPlayer" id="LdtPlayer"></div>'); |
430 $('.LdtPlayer').remove(); |
498 _this.reaffectKeyPress(); |
431 $('body').append('<div class="LdtPlayer" id="LdtPlayer"></div>'); |
499 |
432 |
500 //On rend leur opacité aux snapshots. Qui ne sont alors plus grisés. |
433 //On rend leur opacité aux snapshots. Qui ne sont alors plus grisés. |
501 $('.snapshotDivs').animate( |
434 $('.snapshotDivs').animate( |
502 { |
435 { |
503 width: sWidth, |
436 width: sWidth, |
504 height: sHeight, |
437 height: sHeight, |
505 margin: this.marginWidth/2 + 'px' |
438 margin: this.marginWidth/2 + 'px' |
506 }, this.config['unzoomTime'], function() |
439 }, this.config.unzoomTime, function() |
507 { |
440 { |
508 _this.neighboursIds.length = 0; |
441 //Après le dezoom, on indique qu'on a finit de dezoomer. |
509 _this.currentlyUnzooming = false; |
442 _this.neighboursIds.length = 0; |
510 }); |
443 _this.currentlyUnzooming = false; |
511 |
444 }); |
512 if(this.currentMode != 'NO-USER') |
445 |
513 { |
446 //Si l'utilisateur est là. |
514 if(this.currentMode.indexOf("INCOMING") == -1 && !this.isMosaicFiltered) |
447 if(this.currentMode != 'NO-USER') |
515 { |
448 { |
516 $('.snapshotDivs').animate( |
449 //Si l'utilisateur est déjà au moins d'interaction maximal et que la mosaique n'est pas filtrée, on rend visibles tous les snapshots. |
517 { |
450 if(this.currentMode.indexOf("INCOMING") == -1 && !this.isMosaicFiltered) |
518 opacity: '1' |
451 { |
519 }, this.config['unzoomTime']); |
452 $('.snapshotDivs').animate( |
520 } |
453 { |
521 else if(this.currentMode.indexOf("INCOMING") == -1 && this.isMosaicFiltered) |
454 opacity: '1' |
522 { |
455 }, this.config.unzoomTime); |
523 for(var i = 0 ; i < this.config['imagesToShow'] ; i++) |
456 } |
524 { |
457 //Si l'utilisateur est déjà au moins d'interaction maximal et que la mosaique est filtrée, on réapplique le filtre sur la mosaique. |
525 $('#snapshotDiv-' + i).animate( |
458 else if(this.currentMode.indexOf("INCOMING") == -1 && this.isMosaicFiltered) |
526 { |
459 { |
527 opacity: this.opacities[i] |
460 for(var i = 0 ; i < this.config.imagesToShow ; i++) |
528 }, this.config['unzoomTime']); |
461 { |
529 } |
462 $('#snapshotDiv-' + i).animate( |
530 } |
463 { |
531 } |
464 opacity: this.opacities[i] |
532 else |
465 }, this.config.unzoomTime); |
533 { |
466 } |
534 // console.log('init'); |
467 } |
535 this.previousZoomedSN.fadeTo(this.config['unzoomTime'], 0, function() |
468 } |
536 { |
469 //Si on est en mode sans utilisateur. |
537 _this.init(); |
470 else |
538 }); |
471 { |
539 } |
472 //On sélectionne un autre snapshot pour le jouer dans le player. |
540 |
473 this.previousZoomedSN.fadeTo(this.config.unzoomTime, 0, function() |
|
474 { |
|
475 _this.init(); |
|
476 }); |
|
477 } |
|
478 |
541 //On dézoom sur la mosaïque. |
479 //On dézoom sur la mosaïque. |
542 $('#mainPanel').animate( |
480 $('#mainPanel').animate( |
543 { |
481 { |
544 width: mpWidth, |
482 width: mpWidth, |
545 height: mpHeight, |
483 height: mpHeight, |
546 top: '0px', |
484 top: '0px', |
547 left: '0px' |
485 left: '0px' |
548 }, this.config['unzoomTime'], function() |
486 }, this.config.unzoomTime, function() |
549 { |
487 { |
550 //On n'est plus en plein écran, et on ne peut plus se déplacer vers le prochain voisin. |
488 //On n'est plus en plein écran, et on ne peut plus se déplacer vers le prochain voisin. |
551 _this.fullscreen = false; |
489 _this.fullscreen = false; |
552 _this.canMoveToNeighbour = false; |
490 _this.canMoveToNeighbour = false; |
553 |
491 |
554 if(_this.currentMode != 'NO-USER' && _this.currentMode.indexOf('INCOMING-') == -1) |
492 //Si on est au point d'interaction maximal. |
555 { |
493 if(_this.currentMode != 'NO-USER' && _this.currentMode.indexOf('INCOMING-') == -1) |
556 if(_this.isMosaicFiltered) |
494 { |
557 { |
495 //Si la mosaique est filtrée, on revient en mode de filtrage, sinon en mode mosaic. |
558 //On revient en mode FILTER. |
496 if(_this.isMosaicFiltered) |
559 _this.currentMode = 'FILTER'; |
497 { |
560 } |
498 _this.currentMode = 'FILTER'; |
561 else |
499 } |
562 { |
500 else |
563 //On revient en mode MOSAIC. |
501 { |
564 _this.currentMode = 'MOSAIC'; |
502 _this.currentMode = 'MOSAIC'; |
565 } |
503 } |
566 |
504 |
567 //On ne permet plus le déplacement vers les voisins. |
505 //On remet les notifications initiales si on n'est pas dans une recherche par filtrage. |
568 /*$('.snapshotDivs').unbind('mouseover', function() |
506 if(_this.currentMode == 'MOSAIC' && !_this.filterSearchedType) |
569 { |
507 { |
570 _this.selectNeighbour(); |
508 _this.removeNotifications(); |
571 });*/ |
509 _this.mosaicSelectionAndSearch(); |
572 |
510 } |
573 //On remet les notifications initiales si on n'est pas dans une recherche par filtrage. |
511 } |
574 if(_this.currentMode == 'MOSAIC' && !_this.filterSearchedType) |
512 |
575 { |
513 //On indique qu'on est plus en dezoom. |
576 _this.removeNotifications(); |
514 this.currentlyUnzooming = false; |
577 // _this.notifySelectionSearchMosaicFull(); |
|
578 _this.mosaicSelectionAndSearch(); |
|
579 } |
|
580 } |
|
581 |
|
582 this.currentlyUnzooming = false; |
|
583 }); |
515 }); |
584 } |
516 } |