|
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 : neighbours.js |
|
14 * |
|
15 * Auteur : alexandre.bastien@iri.centrepompidou.fr |
|
16 * |
|
17 * Fonctionnalités : Définit les fonctions d'intéraction avec les voisins lors d'un zoom. |
|
18 */ |
|
19 |
1 /* |
20 /* |
2 * Affecte les listeners mouseenter aux voisins lors d'une vue en plein écran. |
21 * Affecte les listeners mouseenter aux voisins lors d'une vue en plein écran. |
|
22 * Est appelé : dans les fichiers neighbours > fonction moveToNeighbour et zoomInteractions > fonction zoom. |
3 */ |
23 */ |
4 mosaic.prototype.listenToNeighbours = function() |
24 Mosaic.prototype.listenToNeighbours = function() |
5 { |
25 { |
6 ////TEST |
26 //Si on n'est pas en mode recherche, on enlève les notifications. |
7 //$('.test').empty(); |
27 if(this.currentMode != 'SEARCH') |
8 console.log('LISTEN TO NEIGHBOURS'); |
28 { |
9 |
29 this.removeNotifications(); |
10 if(this.currentMode != 'SEARCH') |
30 } |
11 { |
31 |
12 this.removeNotifications(); |
32 //Si on est en mode sans utilisateur ou en mode utilisateur approche, on part. |
13 } |
33 if(this.currentMode == "NO-USER" || this.currentMode.indexOf("INCOMING") != -1) |
14 |
34 { |
15 if(this.currentMode == "NO-USER" || this.currentMode.indexOf("INCOMING") != -1) |
35 return; |
16 { |
36 } |
17 return; |
37 |
18 } |
38 //Si ils n'y a pas de voisins répertoriés, on part. |
19 |
39 if(this.neighboursIds == null || this.neighboursIds != null && this.neighboursIds.length > 0) |
20 // console.log('MODE : ' + this.currentMode); |
40 { |
21 |
41 return; |
22 if(this.neighboursIds == null || this.neighboursIds != null && this.neighboursIds.length > 0) |
42 } |
23 { |
43 |
24 return; |
|
25 } |
|
26 |
|
27 var _this = this; |
44 var _this = this; |
28 |
45 |
29 this.canMoveToNeighbour = false; |
46 //On ne peut actuellement pas se déplacer vers un voisin. |
30 var currentLine = Math.floor(this.centerId / this.config['length']), currentColumn = this.centerId % this.config['length']; |
47 this.canMoveToNeighbour = false; |
|
48 //On calcule la ligne et colonne du snapshot du milieu. |
|
49 var currentLine = Math.floor(this.centerId / this.config.length), currentColumn = this.centerId % this.config.length; |
31 var zoomedImg = $('img', this.previousZoomedSN); |
50 var zoomedImg = $('img', this.previousZoomedSN); |
32 |
51 |
33 //On cherche l'ID des voisins. |
52 //On cherche l'ID des voisins. |
34 //Si le voisin de gauche est sur la même ligne, on n'est pas sur la bordure de gauche. |
53 //Si le voisin de gauche est sur la même ligne, on n'est pas sur la bordure de gauche. |
35 this.neighboursIds[0] = (currentColumn > 0) ? (this.centerId - 1) : -1; |
54 this.neighboursIds[0] = (currentColumn > 0) ? (this.centerId - 1) : -1; |
36 //Si le voisin de droite est sur la même ligne, on n'est pas sur la bordure de droite. |
55 //Si le voisin de droite est sur la même ligne, on n'est pas sur la bordure de droite. |
37 this.neighboursIds[1] = (currentColumn < this.config['length'] - 1) ? (+this.centerId + 1) : -1; |
56 this.neighboursIds[1] = (currentColumn < this.config.length - 1) ? (+this.centerId + 1) : -1; |
38 //Si le voisin du haut est sur la même colonne, on n'est pas sur la bordure du haut. |
57 //Si le voisin du haut est sur la même colonne, on n'est pas sur la bordure du haut. |
39 this.neighboursIds[2] = (currentLine > 0) ? (this.centerId - this.config['length']) : -1; |
58 this.neighboursIds[2] = (currentLine > 0) ? (this.centerId - this.config.length) : -1; |
40 //Si le voisin du bas est sur la même colonne, on n'est pas sur la bordure du bas. |
59 //Si le voisin du bas est sur la même colonne, on n'est pas sur la bordure du bas. |
41 this.neighboursIds[3] = (currentLine < (this.config['imagesToShow'] / this.config['length'])) ? (+this.centerId + this.config['length']) : -1; |
60 this.neighboursIds[3] = (currentLine < (this.config.imagesToShow / this.config.length)) ? (+this.centerId + this.config.length) : -1; |
42 |
61 |
43 //ID du cadre voisin. |
62 //ID du cadre voisin. |
44 var preId; |
63 var preId; |
45 |
64 |
|
65 //Si les voisins ont un id supérieur au maximum, on les met à -1. |
46 for(var i = 0 ; i < this.neighboursIds.length ; i++) |
66 for(var i = 0 ; i < this.neighboursIds.length ; i++) |
47 { |
67 { |
48 // console.log('pre : ' + this.neighboursIds[i]); |
68 if(this.neighboursIds[i] >= this.config.imagesToShow) |
49 if(this.neighboursIds[i] >= this.config['imagesToShow']) |
69 { |
50 { |
70 this.neighboursIds[i] = -1; |
51 this.neighboursIds[i] = -1; |
71 } |
52 } |
72 } |
53 } |
73 |
54 |
74 //Si on est sur une bordure. |
55 // console.log('neighbours : ', this.neighboursIds); |
75 //On crée des voisins supplémentaires. |
56 |
76 if(_.include(this.neighboursIds, -1)) |
57 //Si on est sur une bordure. |
77 { |
58 //On crée des voisins supplémentaires. |
78 this.createAdditionalNeighbours(); |
59 if(_.include(this.neighboursIds, -1)) |
79 } |
60 { |
|
61 this.createAdditionalNeighbours(); |
|
62 } |
|
63 } |
80 } |
64 |
81 |
65 /* |
82 /* |
66 * Crée des voisins supplémentaires pour garantir le déplacement / dézoom quand on arrive sur le bord de la mosaïque. |
83 * Crée des voisins supplémentaires pour garantir le déplacement / dézoom quand on arrive sur le bord de la mosaïque. |
|
84 * Est appelé : dans le fichier neighbours > fonction listenToNeighbours. |
67 */ |
85 */ |
68 mosaic.prototype.createAdditionalNeighbours = function() |
86 Mosaic.prototype.createAdditionalNeighbours = function() |
69 { |
87 { |
70 if(this.currentMode == "NO-USER") |
88 //Si on est en mode sans utilisateur, on part. |
71 { |
89 if(this.currentMode == "NO-USER") |
72 return; |
90 { |
73 } |
91 return; |
74 |
92 } |
75 // console.log('Create additional neighbours'); |
93 |
76 |
94 //Pour tous les voisins. |
77 var additionalNeighbours = ''; |
95 var additionalNeighbours = ''; |
78 for(var i = 0 ; i < this.neighboursIds.length ; i++) |
96 for(var i = 0 ; i < this.neighboursIds.length ; i++) |
79 { |
97 { |
80 var sn = $('#snapshotDiv-' + this.centerId); |
98 //Snapshot du milieu. |
81 var m = parseInt(sn.css('margin')); |
99 var sn = $('#snapshotDiv-' + this.centerId); |
82 var centerTop = sn.position().top + this.notifyTopVideo + this.MPTop_margin, centerLeft = sn.position().left + this.notifyLeftVideo; |
100 //Marge de celui-ci. |
83 var centerWidth = sn.width(), centerHeight = sn.height(); |
101 var m = parseInt(sn.css('margin')); |
84 |
102 //Ses coordonnées. |
85 // console.log('top : ' + sn.position().top + ', left : ' + this.notifyTopVideo + ' ' + this.notifyLeftVideo + ' ' + this.centerId); |
103 var centerTop = sn.position().top + this.notifyTopVideo + this.MPTop_margin, centerLeft = sn.position().left + this.notifyLeftVideo; |
86 // console.log(this.neighboursIds[i]); |
104 //Ses dimensions. |
87 |
105 var centerWidth = sn.width(), centerHeight = sn.height(); |
88 var top, left; |
106 |
89 |
107 var top, left; |
90 if(this.neighboursIds[i] == -1) |
108 |
91 { |
109 //Si on est sur une bordure, on calcule les coordonnées du voisin à l'extérieur de la bordure en fonction de sa position dans le tableau des voisins. |
92 if(i == 0) |
110 if(this.neighboursIds[i] == -1) |
93 { |
111 { |
94 top = centerTop + m / 2; |
112 if(i == 0) |
95 left = centerLeft - centerWidth - 2 * m; |
113 { |
96 } |
114 top = centerTop + m / 2; |
97 else if(i == 1) |
115 left = centerLeft - centerWidth - 2 * m; |
98 { |
116 } |
99 top = centerTop + m / 2; |
117 else if(i == 1) |
100 left = centerLeft + centerWidth + 3 * m; |
118 { |
101 } |
119 top = centerTop + m / 2; |
102 else if(i == 2) |
120 left = centerLeft + centerWidth + 3 * m; |
103 { |
121 } |
104 top = centerTop - centerHeight - 2 * m; |
122 else if(i == 2) |
105 left = centerLeft + m / 2; |
123 { |
106 } |
124 top = centerTop - centerHeight - 2 * m; |
107 else if(i == 3) |
125 left = centerLeft + m / 2; |
108 { |
126 } |
109 top = centerTop + centerHeight + 3 * m; |
127 else if(i == 3) |
110 left = centerLeft + m / 2; |
128 { |
111 } |
129 top = centerTop + centerHeight + 3 * m; |
112 |
130 left = centerLeft + m / 2; |
113 additionalNeighbours += '<div id="borderNeighbour-' + i + '" class="borderNeighbours" style="opacity: 0; width: ' + centerWidth + 'px; height: ' + centerHeight + 'px; top: ' + top + 'px; left: ' + left + 'px;"></div>'; |
131 } |
114 } |
132 |
115 } |
133 //On place le voisin additionnel. |
116 // console.log(additionalNeighbours); |
134 additionalNeighbours += '<div id="borderNeighbour-' + i + '" class="borderNeighbours" style="opacity: 0; width: ' + centerWidth + 'px; height: ' + centerHeight + 'px; top: ' + top + 'px; left: ' + left + 'px;"></div>'; |
117 $('body').append(additionalNeighbours); |
135 } |
118 |
136 } |
119 $('.borderNeighbours').fadeTo(this.config['timeANFade'], '1'); |
137 |
|
138 $('body').append(additionalNeighbours); |
|
139 //On le fait apparaître. |
|
140 $('.borderNeighbours').fadeTo(this.config.timeANFade, '1'); |
120 } |
141 } |
121 |
142 |
122 /* |
143 /* |
123 * Supprime les voisins supplémentaires. |
144 * Supprime les voisins supplémentaires. |
|
145 * Est appelé : dans les fichiers neighbours > fonction moveToNeighbour et zoomInteractions > fonction unzoom. |
124 */ |
146 */ |
125 mosaic.prototype.removeAdditionalNeighbours = function() |
147 Mosaic.prototype.removeAdditionalNeighbours = function() |
126 { |
148 { |
127 $('.borderNeighbours').fadeTo(this.config['timeANFade'], '0', function() |
149 $('.borderNeighbours').fadeTo(this.config.timeANFade, '0', function() |
128 { |
150 { |
129 $('.borderNeighbours').remove(); |
151 $('.borderNeighbours').remove(); |
130 }); |
152 }); |
131 this.deselectAllNeighbours(); |
153 this.deselectAllNeighbours(); |
132 } |
154 } |
133 |
155 |
134 /* |
156 /* |
135 * Déselectionne tous les voisins, même les additionnels. |
157 * Déselectionne tous les voisins, même les additionnels. |
|
158 * Est appelé : dans les fichier neighbours > fonction removeAdditionalNeighbours. |
136 */ |
159 */ |
137 mosaic.prototype.deselectAllNeighbours = function() |
160 Mosaic.prototype.deselectAllNeighbours = function() |
138 { |
161 { |
139 $('.neighbourFrame').fadeTo(this.config['timeANFade'], '0', function() |
162 $('.neighbourFrame').fadeTo(this.config.timeANFade, '0', function() |
140 { |
163 { |
141 $('.neighbourFrame').remove(); |
164 $('.neighbourFrame').remove(); |
142 }); |
165 }); |
143 } |
166 } |
144 |
167 |
145 /* |
168 /* |
146 * Change la coloration d'une bordure où on se positionne lors d'une vue en plein écran. |
169 * Change la coloration d'une bordure où on se positionne lors d'une vue en plein écran. |
|
170 * Est appelé : dans le fichier pointers > fonction pointersVideoInteractions. |
147 */ |
171 */ |
148 mosaic.prototype.selectNeighbour = function(neighbour, pointer) |
172 Mosaic.prototype.selectNeighbour = function(neighbour, pointer) |
149 { |
173 { |
150 ////TEST |
174 //Si on est en train de se déplacer vers un voisin ou dézoomer ou si l'aide est affichée, on part. |
151 //$('.test').append(mos.currentMode + " " + $(this).attr('id') + " " + 'snapshotDiv-' + mos.centerId + ','); |
175 if(this.currentlyMoving || this.currentlyUnzooming || this.helpDisplayed) |
152 |
176 { |
153 // console.log(this.currentlyMoving, this.currentlyUnzooming, this.helpDisplayed); |
177 return; |
154 |
178 } |
155 if(this.currentlyMoving || this.currentlyUnzooming || this.helpDisplayed) |
179 |
156 { |
180 //Si on est sur une notification de gesture de recherche. |
157 return; |
181 if(this.gestureDelRequested) |
158 } |
182 { |
159 |
183 //On récupère l'id du voisin. |
160 if(this.gestureDelRequested) |
184 var tab = neighbour.attr('id').split('-'); |
161 { |
185 var snapshotId = tab[1]; |
162 var tab = neighbour.attr('id').split('-'); |
186 //On le déselectionne. |
163 var snapshotId = tab[1]; |
187 this.deselectNeighbour(snapshotId); |
164 this.deselectNeighbour(snapshotId); |
188 //On part. |
165 return; |
189 return; |
166 } |
190 } |
167 |
191 |
168 // console.log('test (2)'); |
192 //On ne peut pas faire de swipes. |
169 |
193 this.canSwipe = false; |
170 this.canSwipe = false; |
194 |
171 |
195 var _this = this; |
172 var _this = this; |
196 |
173 |
|
174 // console.log('SEL NEI', this.neighbourIds); |
|
175 |
|
176 //Si on est en mode VIDEO (plein écran) ET si le snapshot pointé est un voisin. |
197 //Si on est en mode VIDEO (plein écran) ET si le snapshot pointé est un voisin. |
177 |
198 if((this.currentMode == 'VIDEO' || this.currentMode == 'SEARCH') && (neighbour.attr('id') != 'snapshotDiv-' + this.centerId)) |
178 // console.log('test (3)'); |
|
179 |
|
180 if((this.currentMode == 'VIDEO' || this.currentMode == 'SEARCH') && (neighbour.attr('id') != 'snapshotDiv-' + this.centerId)) |
|
181 { |
199 { |
182 //On crée le cadre qui va être superposé au voisin. |
200 //On crée le cadre qui va être superposé au voisin. |
183 //On le colle au voisin. |
201 //On le colle au voisin. |
184 var tab = neighbour.attr('id').split('-'); |
202 var tab = neighbour.attr('id').split('-'); |
185 var snapshotId = tab[1]; |
203 var snapshotId = tab[1]; |
186 var neighbourFrame = ''; |
204 var neighbourFrame = ''; |
187 var marginValue = parseFloat(neighbour.css('margin')); |
205 var marginValue = parseFloat(neighbour.css('margin')); |
188 |
206 |
189 //Si la frame existe déjà, on quitte. |
207 //Si la frame existe déjà, on quitte. |
190 if($('#neighbourFrame-' + snapshotId).length > 0) |
208 if($('#neighbourFrame-' + snapshotId).length > 0) |
191 { |
209 { |
192 return; |
210 return; |
193 } |
211 } |
194 |
212 |
195 //Si c'est un voisin additionnel. |
213 //Si c'est un voisin additionnel. |
196 if(neighbour.attr('id').indexOf('borderNeighbour') != -1) |
214 if(neighbour.attr('id').indexOf('borderNeighbour') != -1) |
197 { |
215 { |
198 snapshotId = +snapshotId + this.config['imagesToShow']; |
216 //On le sélectionne quand même. |
199 neighbourFrame += '<div class="neighbourFrame" id="neighbourFrame-' + snapshotId + '"></div>'; |
217 snapshotId = +snapshotId + this.config.imagesToShow; |
200 if($('#neighbourFrame-' + snapshotId).length > 0) |
218 neighbourFrame += '<div class="neighbourFrame" id="neighbourFrame-' + snapshotId + '"></div>'; |
201 { |
219 if($('#neighbourFrame-' + snapshotId).length > 0) |
202 return; |
220 { |
203 } |
221 return; |
204 $('body').append(neighbourFrame); |
222 } |
205 } |
223 $('body').append(neighbourFrame); |
206 else |
224 } |
207 { |
225 //Si c'est un voisin normal. |
208 neighbourFrame += '<div class="neighbourFrame" id="neighbourFrame-' + snapshotId + '"><div class="neighbourImgBg" id="neighbourImgBg-' + snapshotId + '"><div class="neighbourImg" id="neighbourImg-' + snapshotId + '"></div></div></div>'; |
226 else |
209 if($('#neighbourFrame-' + snapshotId).length > 0) |
227 { |
210 { |
228 //On le sélectionne. |
211 return; |
229 neighbourFrame += '<div class="neighbourFrame" id="neighbourFrame-' + snapshotId + '"><div class="neighbourImgBg" id="neighbourImgBg-' + snapshotId + '"><div class="neighbourImg" id="neighbourImg-' + snapshotId + '"></div></div></div>'; |
212 } |
230 if($('#neighbourFrame-' + snapshotId).length > 0) |
213 $('#mainPanel').append(neighbourFrame); |
231 { |
214 } |
232 return; |
215 |
233 } |
216 //On positionne le div de background juste au niveau du voisin. |
234 $('#mainPanel').append(neighbourFrame); |
|
235 } |
|
236 |
|
237 //On positionne le div de background juste au niveau du voisin. |
217 $('#neighbourFrame-' + snapshotId).css( |
238 $('#neighbourFrame-' + snapshotId).css( |
218 { |
239 { |
219 'top': (+neighbour.position().top + marginValue), |
240 'top': (+neighbour.position().top + marginValue), |
220 'left': (+neighbour.position().left + marginValue), |
241 'left': (+neighbour.position().left + marginValue), |
221 'width': neighbour.width(), |
242 'width': neighbour.width(), |
222 'height': neighbour.height() |
243 'height': neighbour.height() |
223 }); |
244 }); |
224 //On positionne le div de background noir juste au niveau de l'image du voisin. |
245 //On positionne le div de background noir juste au niveau de l'image du voisin. |
225 $('#neighbourImgBg-' + snapshotId).css( |
246 $('#neighbourImgBg-' + snapshotId).css( |
226 { |
247 { |
227 'top': marginValue, |
248 'top': marginValue, |
228 'left': marginValue, |
249 'left': marginValue, |
229 'width': neighbour.width() - marginValue*2, |
250 'width': neighbour.width() - marginValue*2, |
230 'height': neighbour.height() - marginValue*2, |
251 'height': neighbour.height() - marginValue*2, |
231 }); |
252 }); |
232 //On met par dessus le div de l'image clonée du voisin. |
253 //On met par dessus le div de l'image clonée du voisin. |
233 $('#neighbourImg-' + snapshotId).css( |
254 $('#neighbourImg-' + snapshotId).css( |
234 { |
255 { |
235 'top': 0, |
256 'top': 0, |
236 'left': 0, |
257 'left': 0, |
237 'width': neighbour.width() - marginValue*2, |
258 'width': neighbour.width() - marginValue*2, |
238 'height': neighbour.height() - marginValue*2, |
259 'height': neighbour.height() - marginValue*2, |
239 'background-image': 'url("' + $('img', neighbour).attr('src') + '")', |
260 'background-image': 'url("' + $('img', neighbour).attr('src') + '")', |
240 'background-size': neighbour.width() + 'px ' + neighbour.height() + 'px', |
261 'background-size': neighbour.width() + 'px ' + neighbour.height() + 'px', |
241 'background-position': -marginValue + 'px ' + -marginValue + 'px', |
262 'background-position': -marginValue + 'px ' + -marginValue + 'px', |
242 'opacity': '0.4' |
263 'opacity': '0.4' |
243 }); |
264 }); |
244 |
265 |
245 var fId = '#neighbourFrame-' + snapshotId; |
266 var fId = '#neighbourFrame-' + snapshotId; |
246 |
267 |
247 $(fId).animate( |
268 $(fId).animate( |
248 { |
269 { |
249 //On le fait apparaître. |
270 //On le fait apparaître. |
250 opacity: '1' |
271 opacity: '1' |
251 }, _this.config['timeNeighbourGlowing'], function() |
272 }, _this.config.timeNeighbourGlowing, function() |
252 { |
273 { |
253 if(_this.mouseInteractions) |
274 //Si on est en mode d'intéraction souris. |
254 { |
275 if(_this.config.mouseInteractions) |
255 if(_this.currentMode == 'VIDEO') |
276 { |
256 { |
277 //Si on est en mode video. |
257 _this.removeNotifications(); |
278 if(_this.currentMode == 'VIDEO') |
258 _this.videoMove(snapshotId); |
279 { |
259 } |
280 //On notifie. |
260 else if(_this.currentMode == 'SEARCH' && !_this.currentSearchGesture[_this.centerId]) |
281 _this.removeNotifications(); |
261 { |
282 _this.videoMove(snapshotId); |
262 _this.removeNotifications(); |
283 } |
263 _this.searchSearchAndMove(snapshotId); |
284 //Si on est en mode de recherche mais sans gesture encore. |
264 } |
285 else if(_this.currentMode == 'SEARCH' && _this.currentSearchGesture[_this.centerId] == '') |
265 else if(_this.currentMode == 'SEARCH' && _this.currentSearchGesture[_this.centerId]) |
286 { |
266 { |
287 //On notifie. |
267 _this.removeNotifications(); |
288 _this.removeNotifications(); |
268 _this.searchGestureAndMove(_this.currentSearchGesture[_this.centerId], 'valid', snapshotId); |
289 _this.searchSearchAndMove(snapshotId); |
269 } |
290 } |
270 |
291 //Si on est en mode de recherche avec une gesture. |
271 _this.canMoveToNeighbour = true; |
292 else if(_this.currentMode == 'SEARCH' && _this.currentSearchGesture[_this.centerId] != '') |
272 } |
293 { |
273 else |
294 //On notifie. |
274 { |
295 _this.removeNotifications(); |
275 if(_this.currentMode == 'VIDEO') |
296 _this.searchGestureAndMove(_this.currentSearchGesture[_this.centerId], 'valid', snapshotId); |
276 { |
297 } |
277 _this.removeNotifications(); |
298 |
278 _this.videoMoveAndUnzoom(snapshotId); |
299 //On peut bouger vers un voisin. |
279 } |
300 _this.canMoveToNeighbour = true; |
280 else if(_this.currentMode == 'SEARCH' && !_this.currentSearchGesture[_this.centerId]) |
301 } |
281 { |
302 //Si on est en mode d'intéractions Kinect. |
282 _this.removeNotifications(); |
303 else |
283 _this.searchSearchAndMoveAndUnzoom(snapshotId); |
304 { |
284 } |
305 //Si on est en mode video, on notifie mais avec un dézoom possible. |
285 else if(_this.currentMode == 'SEARCH' && _this.currentSearchGesture[_this.centerId]) |
306 if(_this.currentMode == 'VIDEO') |
286 { |
307 { |
287 _this.removeNotifications(); |
308 _this.removeNotifications(); |
288 _this.searchGestureAndMoveAndUnzoom(_this.currentSearchGesture[_this.centerId], 'valid', snapshotId); |
309 _this.videoMoveAndUnzoom(snapshotId); |
289 } |
310 } |
290 } |
311 //Si on est en mode de recherche mais sans gesture encore, on notifie mais avec un dézoom possible. |
291 }); |
312 else if(_this.currentMode == 'SEARCH' && !_this.currentSearchGesture[_this.centerId]) |
292 |
313 { |
293 var side = $.inArray(parseInt(snapshotId), this.neighboursIds); |
314 _this.removeNotifications(); |
294 |
315 _this.searchSearchAndMoveAndUnzoom(snapshotId); |
295 if(side == -1) |
316 } |
296 { |
317 //Si on est en mode de recherche avec une gesture, on notifie mais avec un dézoom possible. |
297 return; |
318 else if(_this.currentMode == 'SEARCH' && _this.currentSearchGesture[_this.centerId]) |
298 } |
319 { |
299 |
320 _this.removeNotifications(); |
300 var sides = ['left', 'right', 'down', 'up']; |
321 _this.searchGestureAndMoveAndUnzoom(_this.currentSearchGesture[_this.centerId], 'valid', snapshotId); |
301 pointer.css('background-image', 'url(./img/cursors/' + sides[side] + '_gray.png)'); |
322 } |
302 } |
323 } |
303 } |
324 }); |
304 |
325 |
305 |
326 //On repère de quel côté le voisin se trouve en fonction du centre. |
|
327 var side = $.inArray(parseInt(snapshotId), this.neighboursIds); |
|
328 |
|
329 //S'il n'est nulle part on part. |
|
330 if(side == -1) |
|
331 { |
|
332 return; |
|
333 } |
|
334 |
|
335 //On affecte l'image de la notification en fonction du côté. |
|
336 var sides = ['left', 'right', 'down', 'up']; |
|
337 pointer.css('background-image', 'url(./img/cursors/' + sides[side] + '_gray.png)'); |
|
338 } |
|
339 } |
306 |
340 |
307 /* |
341 /* |
308 * Change la coloration d'une bordure quittée lors d'une vue en plein écran. |
342 * Change la coloration d'une bordure quittée lors d'une vue en plein écran. |
|
343 * Est appelé : dans les fichiers neighbours > fonction selectNeighbour et pointers > fonction pointersVideoInteractions. |
309 */ |
344 */ |
310 mosaic.prototype.deselectNeighbour = function(neighbourId) |
345 Mosaic.prototype.deselectNeighbour = function(neighbourId) |
311 { |
346 { |
312 ////TEST |
347 if($('#neighbourFrame-' + neighbourId).length <= 0) |
313 //$('.test').append('un,'); |
348 { |
314 |
349 return; |
315 //this.removeNotifyMoveUnzoom(); |
350 } |
316 |
351 |
317 if($('#neighbourFrame-' + neighbourId).length <= 0) |
352 var _this = this; |
318 { |
353 |
319 return; |
|
320 } |
|
321 |
|
322 var _this = this; |
|
323 |
|
324 // console.log('DES'); |
|
325 |
|
326 //On ne peut plus se déplacer vers les voisins. |
354 //On ne peut plus se déplacer vers les voisins. |
327 this.canMoveToNeighbour = true; |
355 this.canMoveToNeighbour = true; |
328 |
356 |
329 //On récupère le voisin. |
357 //On récupère le voisin. |
330 var neighbourFrame = $('#neighbourFrame-' + neighbourId); |
358 var neighbourFrame = $('#neighbourFrame-' + neighbourId); |
331 |
359 |
332 //Si on est en mode VIDEO. |
360 //Si on est en mode VIDEO. |
333 if(this.currentMode == 'VIDEO' || this.currentMode == 'SEARCH') |
361 if(this.currentMode == 'VIDEO' || this.currentMode == 'SEARCH') |
334 { |
362 { |
335 //On le fait disparaître progressivement. |
363 //On le fait disparaître progressivement. |
336 neighbourFrame.animate( |
364 neighbourFrame.animate( |
337 { |
365 { |
338 opacity: '0' |
366 opacity: '0' |
339 }, this.config['timeNeighbourUnglowing'], function() |
367 }, this.config.timeNeighbourUnglowing, function() |
340 { |
368 { |
341 //Une fois invisible, on le supprime. |
369 //Une fois invisible, on le supprime. |
342 neighbourFrame.remove(); |
370 neighbourFrame.remove(); |
343 _this.removeNotifications(); |
371 _this.removeNotifications(); |
344 |
372 |
345 if(_this.currentMode == 'SEARCH' && _this.currentSearchGesture[_this.centerId] == '') |
373 if(_this.currentMode == 'SEARCH' && _this.currentSearchGesture[_this.centerId] == '') |
346 { |
374 { |
347 _this.searchSearch(); |
375 _this.searchSearch(); |
348 } |
376 } |
349 else if(_this.currentMode == 'SEARCH' && _this.currentSearchGesture[_this.centerId] != '') |
377 else if(_this.currentMode == 'SEARCH' && _this.currentSearchGesture[_this.centerId] != '') |
350 { |
378 { |
351 _this.searchGesture(_this.currentSearchGesture[_this.centerId], 'valid'); |
379 _this.searchGesture(_this.currentSearchGesture[_this.centerId], 'valid'); |
352 } |
380 } |
353 |
381 |
354 _this.canSwipe = true; |
382 _this.canSwipe = true; |
355 }); |
383 }); |
356 } |
384 } |
357 } |
385 } |
358 |
386 |
359 /* |
387 /* |
360 * Permet de savoir si un déplacement est possible en fonction de l'id de snapshot entré. |
388 * Permet de savoir si un déplacement est possible en fonction de l'id de snapshot entré. |
361 * x et y sont les positions du pointeur. |
389 * x et y sont les positions du pointeur. |
362 * Déplace vers le voisin si possible. |
390 * Déplace vers le voisin si possible. |
|
391 * Est appelé : dans le fichier pointers > fonction pointersVideoInteractions. |
363 */ |
392 */ |
364 mosaic.prototype.correctMoveToNeighbour = function(id, x, y) |
393 Mosaic.prototype.correctMoveToNeighbour = function(id, x, y) |
365 { |
394 { |
366 var _this = this; |
395 var _this = this; |
367 |
396 |
368 if(this.neighboursIds != null && this.neighboursIds.length > 0 && this.canMoveToNeighbour) |
397 if(this.neighboursIds != null && this.neighboursIds.length > 0 && this.canMoveToNeighbour) |
369 { |
398 { |
370 var idx = $.inArray(id, this.neighboursIds); |
399 var idx = $.inArray(id, this.neighboursIds); |
371 //Si l'id du snapshot qu'on vient de quitter fait partie des voisins. |
400 //Si l'id du snapshot qu'on vient de quitter fait partie des voisins. |
372 if(idx > -1) |
401 if(idx > -1) |
373 { |
402 { |
374 //Correspondance indices : position par rapport au snapshot du milieu. |
403 //Correspondance indices : position par rapport au snapshot du milieu. |
375 //0 : gauche. |
404 //0 : gauche. |
376 //1 : droite. |
405 //1 : droite. |
377 //2 : haut. |
406 //2 : haut. |
378 //3 : bas. |
407 //3 : bas. |
379 |
408 |
380 //On cherche le symétrique de l'id du voisin quitté. |
409 //On cherche le symétrique de l'id du voisin quitté. |
381 //Astuce : S'il est pair, cela signifie qu'on doit faire +1, sinon c'est -1. |
410 //Astuce : S'il est pair, cela signifie qu'on doit faire +1, sinon c'est -1. |
382 //var sym = (idx % 2 == 0) ? (+idx + 1) : (idx - 1); |
411 //var sym = (idx % 2 == 0) ? (+idx + 1) : (idx - 1); |
383 |
412 |
384 //S'il est > -1 alors forcément il existe. |
413 //S'il est > -1 alors forcément il existe. |
385 //Si on peut se déplacer vers un voisin, on le fait. |
414 //Si on peut se déplacer vers un voisin, on le fait. |
386 if(this.neighboursIds[idx] > -1) |
415 if(this.neighboursIds[idx] > -1) |
387 { |
416 { |
388 var centerWidth = -this.notifyLeftVideo + $(window).width() / 2, centerHeight = -this.notifyTopVideo + $(window).height() / 2; |
417 var centerWidth = -this.notifyLeftVideo + $(window).width() / 2, centerHeight = -this.notifyTopVideo + $(window).height() / 2; |
389 |
418 |
390 // console.log('x : ' + x + ' cw : ' + centerWidth + ', y : ' + y + ' ch : ' + centerHeight); |
419 //Si l'id du tableau est pair, alors forcément le pointeur doit être plus à droite/plus en bas que le milieu de l'écran pour se déplacer vers le voisin. |
391 |
420 //Sinon c'est l'inverse. |
392 //Si l'id du tableau est pair, alors forcément le pointeur doit être plus à droite/plus en bas que le milieu de l'écran pour se déplacer vers le voisin. |
421 //(sym et idx on été échangés). |
393 //Sinon c'est l'inverse. |
422 if(idx == 0 && x > centerWidth || idx == 2 && y > centerHeight || idx == 1 && x < centerWidth || idx == 3 && y < centerHeight) |
394 //(sym et idx on été échangés). |
423 { |
395 if(idx == 0 && x > centerWidth || idx == 2 && y > centerHeight || idx == 1 && x < centerWidth || idx == 3 && y < centerHeight) |
424 this.moveToNeighbour($('#snapshotDiv-' + this.neighboursIds[idx])); |
396 { |
425 } |
397 // console.log('d to (' + idx + ' - ' + this.neighboursIds[idx] + '): ' + this.imgs[this.neighboursIds[idx]]); |
426 } |
398 |
427 } |
399 this.moveToNeighbour($('#snapshotDiv-' + this.neighboursIds[idx])); |
428 else if(id >= this.config.imagesToShow) |
400 } |
429 { |
401 } |
430 //On otbient le vrai ID du voisin additionnel. |
402 } |
431 var additionalNeighbourId = id - this.config.imagesToShow; |
403 else if(id >= this.config['imagesToShow']) |
432 var sym = (additionalNeighbourId % 2 == 0) ? (+additionalNeighbourId + 1) : (additionalNeighbourId - 1); |
404 { |
433 } |
405 //On otbient le vrai ID du voisin additionnel. |
434 } |
406 var additionalNeighbourId = id - this.config['imagesToShow']; |
|
407 var sym = (additionalNeighbourId % 2 == 0) ? (+additionalNeighbourId + 1) : (additionalNeighbourId - 1); |
|
408 } |
|
409 } |
|
410 } |
435 } |
411 |
436 |
412 /* |
437 /* |
413 * Lors d'une vue en plein écran, on se déplace vers le voisin dont l'id a été spécifié dans la fonction appelante. |
438 * Lors d'une vue en plein écran, on se déplace vers le voisin dont l'id a été spécifié dans la fonction appelante. |
|
439 * Est appelé : dans les fichiers neighbours > fonction correctMoveToNeighbour, playerControl > fonction playNextVideo et zoomInteractions > zoom. |
414 */ |
440 */ |
415 mosaic.prototype.moveToNeighbour = function(neighbour) |
441 Mosaic.prototype.moveToNeighbour = function(neighbour) |
416 { |
442 { |
417 var _this = this; |
443 var _this = this; |
418 |
444 |
419 console.log('automove : ' + this.autoMove); |
|
420 |
|
421 //Si on ne peut pas se déplacer vers les voisins, on quitte. |
445 //Si on ne peut pas se déplacer vers les voisins, on quitte. |
422 if((!this.canMoveToNeighbour || neighbour.length <= 0 || this.currentlyMoving) && !this.autoMove) |
446 if((!this.canMoveToNeighbour || neighbour.length <= 0 || this.currentlyMoving) && !this.autoMove) |
423 { |
447 { |
424 return; |
448 return; |
425 } |
449 } |
426 |
450 |
427 console.log('MOVE'); |
451 this.canMoveToNeighbour = false; |
428 this.canMoveToNeighbour = false; |
452 this.currentlyMoving = true; |
429 this.currentlyMoving = true; |
453 this.removeAdditionalNeighbours(); |
430 this.removeAdditionalNeighbours(); |
|
431 |
454 |
432 //On obtient l'ID de destination. |
455 //On obtient l'ID de destination. |
433 var tab = neighbour.attr('id').split('-'); |
456 var tab = neighbour.attr('id').split('-'); |
434 var destinationId = tab[1]; |
457 var destinationId = tab[1]; |
435 |
458 |
436 var startId = this.previousZoomedSN.attr('id').replace('snapshotDiv-', ''); |
459 var startId = this.previousZoomedSN.attr('id').replace('snapshotDiv-', ''); |
437 |
460 |
438 //On charge les attributs nécessaires aux calculs. |
461 //On charge les attributs nécessaires aux calculs. |
439 var length = _this.config['length']; |
462 var length = _this.config.length; |
440 var MPCurrentTop = $('#mainPanel').position().top, MPCurrentLeft = $('#mainPanel').position().left; |
463 var MPCurrentTop = $('#mainPanel').position().top, MPCurrentLeft = $('#mainPanel').position().left; |
441 var divideCoeffTop = Math.floor(destinationId / length) == 0 ? 1 : Math.floor(destinationId / length); |
464 var divideCoeffTop = Math.floor(destinationId / length) == 0 ? 1 : Math.floor(destinationId / length); |
442 var divideCoeffLeft = destinationId % length == 0 ? 1 : destinationId % length; |
465 var divideCoeffLeft = destinationId % length == 0 ? 1 : destinationId % length; |
443 var neighbourFrameTop = $('#snapshotDiv-' + destinationId).position().top, neighbourFrameLeft = $('#snapshotDiv-' + destinationId).position().left; |
466 var neighbourFrameTop = $('#snapshotDiv-' + destinationId).position().top, neighbourFrameLeft = $('#snapshotDiv-' + destinationId).position().left; |
444 |
467 |
445 _this.previousZoomedSN = $('#snapshotDiv-' + this.centerId); |
468 _this.previousZoomedSN = $('#snapshotDiv-' + this.centerId); |
446 // var centerSN = $('#snapshotDiv-' + this.centerId); |
469 |
447 |
470 //On définit pour le déplacement vertical s'il est nécessaire de se déplacer en haut ou en bas. |
448 //On définit pour le déplacement vertical s'il est nécessaire de se déplacer en haut ou en bas. |
471 if(_this.previousZoomedSN.position().top > neighbourFrameTop) |
449 if(_this.previousZoomedSN.position().top > neighbourFrameTop) |
472 MPCurrentTop += Math.abs(neighbourFrameTop - _this.previousZoomedSN.position().top); |
450 MPCurrentTop += Math.abs(neighbourFrameTop - _this.previousZoomedSN.position().top); |
473 else if(_this.previousZoomedSN.position().top < neighbourFrameTop) |
451 else if(_this.previousZoomedSN.position().top < neighbourFrameTop) |
474 MPCurrentTop -= Math.abs(neighbourFrameTop - _this.previousZoomedSN.position().top); |
452 MPCurrentTop -= Math.abs(neighbourFrameTop - _this.previousZoomedSN.position().top); |
475 //On définit pour le déplacement horizontal s'il est nécessaire de se déplacer à gauche ou à droite. |
453 //On définit pour le déplacement horizontal s'il est nécessaire de se déplacer à gauche ou à droite. |
476 if(_this.previousZoomedSN.position().left > neighbourFrameLeft) |
454 if(_this.previousZoomedSN.position().left > neighbourFrameLeft) |
477 MPCurrentLeft += Math.abs(neighbourFrameLeft - _this.previousZoomedSN.position().left); |
455 MPCurrentLeft += Math.abs(neighbourFrameLeft - _this.previousZoomedSN.position().left); |
478 else if(_this.previousZoomedSN.position().left < neighbourFrameLeft) |
456 else if(_this.previousZoomedSN.position().left < neighbourFrameLeft) |
479 MPCurrentLeft -= Math.abs(neighbourFrameLeft - _this.previousZoomedSN.position().left); |
457 MPCurrentLeft -= Math.abs(neighbourFrameLeft - _this.previousZoomedSN.position().left); |
|
458 |
480 |
459 //On passe le snapshot de destination en HD. |
481 //On passe le snapshot de destination en HD. |
460 var destinationImg = $('#snapshot-' + destinationId); |
482 var destinationImg = $('#snapshot-' + destinationId); |
461 var destinationImgSrc = destinationImg.attr('src'); |
483 var destinationImgSrc = destinationImg.attr('src'); |
462 destinationImg.attr('src', destinationImgSrc.replace('snapshots-little/', 'snapshots/')); |
484 destinationImg.attr('src', destinationImgSrc.replace('snapshots-little/', 'snapshots/')); |
465 var currentImgSrc = $('img', _this.previousZoomedSN).attr('src'); |
487 var currentImgSrc = $('img', _this.previousZoomedSN).attr('src'); |
466 $('img', _this.previousZoomedSN).attr('src', currentImgSrc.replace('snapshots/', 'snapshots-little/')); |
488 $('img', _this.previousZoomedSN).attr('src', currentImgSrc.replace('snapshots/', 'snapshots-little/')); |
467 |
489 |
468 $('#snapshotDiv-' + destinationId).css('opacity', '1'); |
490 $('#snapshotDiv-' + destinationId).css('opacity', '1'); |
469 |
491 |
470 if(_this.playerIsReady) |
492 //Si le player est prêt. |
471 { |
493 if(_this.playerIsReady) |
472 if(_this.currentMode == 'TIMELINE') |
494 { |
473 { |
495 //Si on est en mode timeline on la quitte. |
474 _this.exitTimeline('move'); |
496 if(_this.currentMode == 'TIMELINE') |
475 } |
497 { |
476 |
498 _this.exitTimeline('move'); |
477 // console.log(Math.floor(_this.player.popcorn.currentTime())); |
499 } |
478 if(_this.autoMove) |
500 |
479 { |
501 //Si le move est automatique (fin de vidéo). |
480 _this.timeToGoAt[_this.centerId] = 0; |
502 if(_this.autoMove) |
481 this.autoMove = false; |
503 { |
482 } |
504 //On remet à jour la position du curseur de la vidéo. |
483 else |
505 _this.timeToGoAt[_this.centerId] = 0; |
484 { |
506 _this.autoMove = false; |
485 _this.timeToGoAt[_this.centerId] = Math.floor(_this.player.popcorn.currentTime()); |
507 } |
486 } |
508 //Sinon on revient là où on était la dernière fois que la video a été jouée. |
487 _this.player.widgets[0].freePlayer(); |
509 else |
488 _this.playerIsReady = false; |
510 { |
489 $('.LdtPlayer').remove(); |
511 _this.timeToGoAt[_this.centerId] = Math.floor(_this.player.popcorn.currentTime()); |
490 $('body').append('<div class="LdtPlayer" id="LdtPlayer"></div>'); |
512 } |
491 } |
513 //On libère le player. |
492 |
514 _this.player.widgets[0].freePlayer(); |
493 //On obtient l'ID du div de coloration du snapshot vers lequel on se déplace afin de le supprimer. |
515 _this.playerIsReady = false; |
|
516 $('.LdtPlayer').remove(); |
|
517 $('body').append('<div class="LdtPlayer" id="LdtPlayer"></div>'); |
|
518 } |
|
519 |
|
520 //On obtient l'ID du div de coloration du snapshot vers lequel on se déplace afin de le supprimer. |
494 _this.centerId = destinationId; |
521 _this.centerId = destinationId; |
495 |
522 |
496 //On grise le snapshot qu'on vient de quitter. |
523 //On grise le snapshot qu'on vient de quitter. |
497 _this.previousZoomedSN.fadeTo(_this.config['zoomTime'], '0.4'); |
524 _this.previousZoomedSN.fadeTo(_this.config.zoomTime, '0.4'); |
498 |
525 |
499 //console.log(MPCurrentLeft); |
526 //console.log(MPCurrentLeft); |
500 |
527 |
501 //On se déplace. |
528 //On se déplace. |
502 $('#mainPanel').animate( |
529 $('#mainPanel').animate( |
503 { |
530 { |
504 top: MPCurrentTop, |
531 top: MPCurrentTop, |
505 left: MPCurrentLeft |
532 left: MPCurrentLeft |
506 }, _this.config['timeMovingToNeighbour'], function() |
533 }, _this.config.timeMovingToNeighbour, function() |
507 { |
534 { |
508 if(_this.currentSearchGesture[_this.centerId] != '') |
535 //On passe en mode recherche et on recherche dans la vidéo en fonction de la gesture de recherche enregistrée dans la nouvelle vidéo. |
509 { |
536 if(_this.currentSearchGesture[_this.centerId] != '') |
510 console.log('notify move'); |
537 { |
511 _this.currentMode = 'SEARCH'; |
538 _this.currentMode = 'SEARCH'; |
512 _this.isCurrentlyInASearchByGesture = true; |
539 _this.isCurrentlyInASearchByGesture = true; |
513 _this.removeNotifications(); |
540 _this.removeNotifications(); |
514 _this.searchGesture(_this.currentSearchGesture[_this.centerId], 'valid'); |
541 _this.searchGesture(_this.currentSearchGesture[_this.centerId], 'valid'); |
515 } |
542 } |
516 |
543 |
517 //On fait apparaître le snapshot vers lequel on s'est déplacé. |
544 //On fait apparaître le snapshot vers lequel on s'est déplacé. |
518 $('#snapshotDiv-' + destinationId).fadeTo(_this.config['zoomTime'], '1', function() |
545 $('#snapshotDiv-' + destinationId).fadeTo(_this.config.zoomTime, '1', function() |
519 { |
546 { |
520 //On recharge les voisins. |
547 //On recharge les voisins. |
521 _this.previousZoomedSN = $('#snapshotDiv-' + _this.centerId); |
548 _this.previousZoomedSN = $('#snapshotDiv-' + _this.centerId); |
522 |
549 |
523 _this.notifyTopVideo = MPCurrentTop; |
550 _this.notifyTopVideo = MPCurrentTop; |
524 _this.notifyLeftVideo = MPCurrentLeft; |
551 _this.notifyLeftVideo = MPCurrentLeft; |
525 _this.neighboursIds.length = 0; |
552 _this.neighboursIds.length = 0; |
526 _this.currentlyMoving = false; |
553 _this.currentlyMoving = false; |
527 _this.listenToNeighbours(); |
554 _this.listenToNeighbours(); |
528 |
555 |
529 |
556 //On charge le player. |
530 _this.loadPlayer((destinationImg.position().top + MPCurrentTop + _this.MPTop_margin), (destinationImg.position().left + MPCurrentLeft), destinationImg.width(), destinationImg.height(), MPCurrentTop, MPCurrentLeft, _this.timeToGoAt[_this.centerId]); |
557 _this.loadPlayer((destinationImg.position().top + MPCurrentTop + _this.MPTop_margin), (destinationImg.position().left + MPCurrentLeft), destinationImg.width(), destinationImg.height(), MPCurrentTop, MPCurrentLeft, _this.timeToGoAt[_this.centerId]); |
531 }); |
558 }); |
532 }); |
559 }); |
533 } |
560 } |
534 |
561 |
535 /* |
562 /* |
536 * Donne éventuellement un snapshot d'après les coordonnées du pointeur sur l'écran. |
563 * Donne éventuellement un snapshot d'après les coordonnées du pointeur sur l'écran. |
537 * Renvoie null sinon. |
564 * Renvoie null sinon. |
|
565 * Est appelé : dans les fichiers pointers > fonction pointersMosaicInteractions et pointersVideoInteractions et zoomInteractions > zoom. |
538 */ |
566 */ |
539 mosaic.prototype.pointerPositionToSN = function(x, y, isMainPointer) |
567 Mosaic.prototype.pointerPositionToSN = function(x, y, isMainPointer) |
540 { |
568 { |
541 if(this.helpDisplayed) |
569 if(this.helpDisplayed) |
542 { |
570 { |
543 return; |
571 return; |
544 } |
572 } |
545 |
573 |
546 x += $('#mainPointer').width() / 2; |
574 x += $('#mainPointer').width() / 2; |
547 y += $('#mainPointer').height() / 2; |
575 y += $('#mainPointer').height() / 2; |
548 |
576 |
549 // $('.snapshotDivs').css('opacity', '0.5'); |
577 //Taille de la marge des snapshots. |
550 //Taille de la marge des snapshots. |
578 var m = parseInt($('.snapshotDivs').css('margin')); |
551 var m = parseInt($('.snapshotDivs').css('margin')); |
579 |
552 |
580 //Dimensions d'un snapshot de la mosaïque. |
553 //Dimensions d'un snapshot de la mosaïque. |
581 var W = $('.snapshotDivs').width() + m * 2, H = $('.snapshotDivs').height() + m * 2; |
554 var W = $('.snapshotDivs').width() + m * 2, H = $('.snapshotDivs').height() + m * 2; |
582 |
555 |
583 //Position supposée du snapshot dans la mosaïque. |
556 //Position supposée du snapshot dans la mosaïque. |
584 //Au départ on ne sélectionne rien. |
557 //Au départ on ne sélectionne rien. |
585 var i = -1, j = -1; |
558 var i = -1, j = -1; |
586 |
559 |
587 //Espace de centrage vertical de la mosaïque. |
560 //Espace de centrage vertical de la mosaïque. |
588 var top_margin = parseInt(this.MPTop_margin); |
561 var top_margin = parseInt(this.MPTop_margin); |
589 //Dimensions de la mosaïque en nombre de snapshots. |
562 //Dimensions de la mosaïque en nombre de snapshots. |
590 var mosW = this.config.length, mosH = this.config.imagesToShow / mosW; |
563 var mosW = this.config['length'], mosH = this.config['imagesToShow'] / mosW; |
591 |
564 |
592 //Si le pointeur se trouve au niveau de la mosaïque. |
565 //Si le pointeur se trouve au niveau de la mosaïque. |
593 if(x < W * mosW && y >= top_margin && y < H * mosH + top_margin) |
566 if(x < W * mosW && y >= top_margin && y < H * mosH + top_margin) |
594 { |
567 { |
595 //Si le pointeur est sur une des bordures. |
568 //Si le pointeur est sur une des bordures. |
596 var xb = x % W; |
569 var xb = x % W; |
597 var yb = y - top_margin; |
570 var yb = y - top_margin; |
598 yb %= H; |
571 yb %= H; |
599 |
572 |
600 if(xb < m || xb > W - m || yb < m || yb > H - m) |
573 if(xb < m || xb > W - m || yb < m || yb > H - m) |
601 { |
574 { |
602 //On renvoie null. |
575 //On renvoie null. |
603 return null; |
576 return null; |
604 } |
577 } |
605 //Sinon il est forcément sur un des snapshots. |
578 //Sinon il est forcément sur un des snapshots. |
606 else |
579 else |
607 { |
580 { |
608 i = Math.floor(x / W); |
581 i = Math.floor(x / W); |
609 j = Math.floor((y - top_margin) / H); |
582 j = Math.floor((y - top_margin) / H); |
610 } |
583 } |
611 |
584 |
612 //On passe des coordonnées 2D en 1D. |
585 //On passe des coordonnées 2D en 1D. |
613 var snapshot = $('#snapshotDiv-' + (j * mosW + i)); |
586 var snapshot = $('#snapshotDiv-' + (j * mosW + i)); |
614 |
587 |
615 //Si le snapshot a été filtré, on renvoie null si on se trouve dans la mosaïque. |
588 //Si le snapshot a été filtré, on renvoie null si on se trouve dans la mosaïque. |
616 if(this.isMosaicFiltered && (this.currentMode == "MOSAIC" || this.currentMode == "FILTER") && snapshot.css('opacity') == 0) |
589 if(this.isMosaicFiltered && (this.currentMode == "MOSAIC" || this.currentMode == "FILTER") && snapshot.css('opacity') == 0) |
617 { |
590 { |
618 return null; |
591 return null; |
619 } |
592 } |
620 |
593 |
621 //On renvoie le snapshot. |
594 //On renvoie le snapshot. |
622 return snapshot; |
595 return snapshot; |
623 } |
596 } |
624 |
597 |
625 //Si on est arrivé là, c'est que le pointeur n'est pas dans la mosaïque. |
598 //Si on est arrivé là, c'est que le pointeur n'est pas dans la mosaïque. |
626 return null; |
599 return null; |
|
600 } |
627 } |
601 |
628 |
602 /* |
629 /* |
603 * Donne éventuellement un voisin additionnel d'après les coordonnées du pointeur sur l'écran. |
630 * Donne éventuellement un voisin additionnel d'après les coordonnées du pointeur sur l'écran. |
604 * Renvoie null sinon. |
631 * Renvoie null sinon. |
|
632 * Est appelé : dans le fichier pointers > fonction pointersVideoInteractions. |
605 */ |
633 */ |
606 mosaic.prototype.pointerPositionToAN = function(x, y, isMainPointer) |
634 Mosaic.prototype.pointerPositionToAN = function(x, y, isMainPointer) |
607 { |
635 { |
608 if(this.helpDisplayed) |
636 //Si l'aide est affichée, on part. |
609 { |
637 if(this.helpDisplayed) |
610 return; |
638 { |
611 } |
639 return; |
612 |
640 } |
613 x += $('#mainPointer').width() / 2; |
641 |
614 y += $('#mainPointer').height() / 2; |
642 x += $('#mainPointer').width() / 2; |
615 |
643 y += $('#mainPointer').height() / 2; |
616 //Pour tous les voisins. |
644 |
617 for(var i = 0 ; i < this.neighboursIds.length ; i++) |
645 //Pour tous les voisins. |
618 { |
646 for(var i = 0 ; i < this.neighboursIds.length ; i++) |
619 //Si on est sur un bord. |
647 { |
620 if(this.neighboursIds[i] == -1) |
648 //Si on est sur un bord. |
621 { |
649 if(this.neighboursIds[i] == -1) |
622 //On récupère un voisin au delà du bord. |
650 { |
623 var neighbour = $('#borderNeighbour-' + i); |
651 //On récupère un voisin au delà du bord. |
624 |
652 var neighbour = $('#borderNeighbour-' + i); |
625 if(neighbour == null || neighbour == undefined || neighbour.position() == null) |
653 |
626 { |
654 if(neighbour == null || neighbour == undefined || neighbour.position() == null) |
627 return; |
655 { |
628 } |
656 return; |
629 |
657 } |
630 //Si le pointeur est sur le voisin, on le retourne. |
658 |
631 if(x > neighbour.position().left && x < +neighbour.position().left + neighbour.width() && y > neighbour.position().top && y < +neighbour.position().top + neighbour.height()) |
659 //Si le pointeur est sur le voisin, on le retourne. |
632 { |
660 if(x > neighbour.position().left && x < +neighbour.position().left + neighbour.width() && y > neighbour.position().top && y < +neighbour.position().top + neighbour.height()) |
633 return neighbour; |
661 { |
634 } |
662 return neighbour; |
635 } |
663 } |
636 } |
664 } |
637 return null; |
665 } |
|
666 return null; |
638 } |
667 } |
639 |
668 |
640 /* |
669 /* |
641 * Vérifie l'intéraction dézoom. |
670 * Vérifie l'intéraction dézoom. |
|
671 * Est appelé : dans le fichier pointers > fonction pointersVideoInteractions. |
642 */ |
672 */ |
643 mosaic.prototype.checkForDezoom = function() |
673 Mosaic.prototype.checkForDezoom = function() |
644 { |
674 { |
645 //Si on se trouve en mode VIDEO ou SEARCH. |
675 //Si on se trouve en mode VIDEO ou SEARCH. |
646 if(this.currentMode == "VIDEO" || this.currentMode == "SEARCH") |
676 if(this.currentMode == "VIDEO" || this.currentMode == "SEARCH") |
647 { |
677 { |
648 //Si les deux pointeurs sont allés puis ont quitté une bordure. |
678 //Si les deux pointeurs sont allés puis ont quitté une bordure. |
649 if(this.mainPointerExitBorder && this.secondPointerExitBorder) |
679 if(this.mainPointerExitBorder && this.secondPointerExitBorder) |
650 { |
680 { |
651 //Si les voisins existent. |
681 //Si les voisins existent. |
652 if(this.neighboursIds != null && this.neighboursIds.length > 0) |
682 if(this.neighboursIds != null && this.neighboursIds.length > 0) |
653 { |
683 { |
654 var localIdMainPointerNeighbour = $.inArray(this.mainPointerNeighbourSelectedId, this.neighboursIds); |
684 var localIdMainPointerNeighbour = $.inArray(this.mainPointerNeighbourSelectedId, this.neighboursIds); |
655 var localIdSecondPointerNeighbour = $.inArray(this.secondPointerNeighbourSelectedId, this.neighboursIds); |
685 var localIdSecondPointerNeighbour = $.inArray(this.secondPointerNeighbourSelectedId, this.neighboursIds); |
656 |
686 |
657 //Cas où on a des voisins additionnels. |
687 //Cas où on a des voisins additionnels. |
658 if(this.mainPointerNeighbourSelectedId >= this.config['imagesToShow']) |
688 if(this.mainPointerNeighbourSelectedId >= this.config.imagesToShow) |
659 { |
689 { |
660 localIdMainPointerNeighbour = this.mainPointerNeighbourSelectedId - this.config['imagesToShow']; |
690 localIdMainPointerNeighbour = this.mainPointerNeighbourSelectedId - this.config.imagesToShow; |
661 } |
691 } |
662 if(this.secondPointerNeighbourSelectedId >= this.config['imagesToShow']) |
692 if(this.secondPointerNeighbourSelectedId >= this.config.imagesToShow) |
663 { |
693 { |
664 localIdSecondPointerNeighbour = this.secondPointerNeighbourSelectedId - this.config['imagesToShow']; |
694 localIdSecondPointerNeighbour = this.secondPointerNeighbourSelectedId - this.config.imagesToShow; |
665 } |
695 } |
666 |
696 |
667 // console.log(localIdMainPointerNeighbour + ' <=> ' + localIdSecondPointerNeighbour); |
697 if(localIdMainPointerNeighbour > -1 && localIdMainPointerNeighbour < 4 && localIdSecondPointerNeighbour > -1 && localIdSecondPointerNeighbour < 4) |
668 |
698 { |
669 if(localIdMainPointerNeighbour > -1 && localIdMainPointerNeighbour < 4 && localIdSecondPointerNeighbour > -1 && localIdSecondPointerNeighbour < 4) |
699 var sym = (localIdMainPointerNeighbour % 2 == 0) ? (+localIdMainPointerNeighbour + 1) : (localIdMainPointerNeighbour - 1); |
670 { |
700 |
671 var sym = (localIdMainPointerNeighbour % 2 == 0) ? (+localIdMainPointerNeighbour + 1) : (localIdMainPointerNeighbour - 1); |
701 //Si les voisins sélectionnés sont opposés. |
672 |
702 if(sym == localIdSecondPointerNeighbour) |
673 //Si les voisins sélectionnés sont opposés. |
703 { |
674 if(sym == localIdSecondPointerNeighbour) |
704 //Positions des pointeurs. |
675 { |
705 var xMain = $('#mainPointer').position().left - $('#mainPointer').width() / 2; |
676 //Positions des pointeurs. |
706 var yMain = $('#mainPointer').position().top - $('#mainPointer').height() / 2; |
677 var xMain = $('#mainPointer').position().left - $('#mainPointer').width() / 2; |
707 var xSecond = $('#secondPointer').position().left - $('#secondPointer').width() / 2; |
678 var yMain = $('#mainPointer').position().top - $('#mainPointer').height() / 2; |
708 var ySecond = $('#secondPointer').position().top - $('#secondPointer').height() / 2; |
679 var xSecond = $('#secondPointer').position().left - $('#secondPointer').width() / 2; |
709 |
680 var ySecond = $('#secondPointer').position().top - $('#secondPointer').height() / 2; |
710 //Snapshot central. |
681 |
711 var centerSN = $('#snapshotDiv-' + this.centerId); |
682 //Snapshot central. |
712 |
683 var centerSN = $('#snapshotDiv-' + this.centerId); |
713 //Quarts du snapshot central. |
684 |
714 var center1QuartWidth = centerSN.position().left + this.notifyLeftVideo + centerSN.width() / 4; |
685 //Quarts du snapshot central. |
715 var center3QuartsWidth = centerSN.position().left + this.notifyLeftVideo + centerSN.width() * 3 / 4; |
686 var center1QuartWidth = centerSN.position().left + this.notifyLeftVideo + centerSN.width() / 4; |
716 var center1QuartHeight = centerSN.position().top + this.notifyTopVideo + centerSN.height() / 4; |
687 var center3QuartsWidth = centerSN.position().left + this.notifyLeftVideo + centerSN.width() * 3 / 4; |
717 var center3QuartsHeight = centerSN.position().top + this.notifyTopVideo + centerSN.height() * 3 / 4; |
688 var center1QuartHeight = centerSN.position().top + this.notifyTopVideo + centerSN.height() / 4; |
718 |
689 var center3QuartsHeight = centerSN.position().top + this.notifyTopVideo + centerSN.height() * 3 / 4; |
719 //Pour activer le dézoom, il suffit que les pointeurs soient dans un rectangle délimité au centre de l'écran. |
690 |
720 //Si les voisins sélectionnés sont de disposition horizontale. |
691 //Pour activer le dézoom, il suffit que les pointeurs soient dans un rectangle délimité au centre de l'écran. |
721 if(sym == 0 || sym == 1) |
692 //Si les voisins sélectionnés sont de disposition horizontale. |
722 { |
693 if(sym == 0 || sym == 1) |
723 if(xMain > center1QuartWidth && xSecond > center1QuartWidth && xMain < center3QuartsWidth && xSecond < center3QuartsWidth) |
694 { |
724 { |
695 if(xMain > center1QuartWidth && xSecond > center1QuartWidth && xMain < center3QuartsWidth && xSecond < center3QuartsWidth) |
725 this.unzoom(); |
696 { |
726 } |
697 console.log('HORIZONTAL UNZOOM - ' + this.currentMode); |
727 } |
698 this.unzoom(); |
728 //Sinon s'ils sont de disposition verticale. |
699 console.log('HORIZONTAL UNZOOM AFTER - ' + this.currentMode); |
729 else if(sym == 2 || sym == 3) |
700 } |
730 { |
701 } |
731 if(yMain > center1QuartHeight && ySecond > center1QuartHeight && yMain < center3QuartsHeight && ySecond < center3QuartsHeight) |
702 //Sinon s'ils sont de disposition verticale. |
732 { |
703 else if(sym == 2 || sym == 3) |
733 this.unzoom(); |
704 { |
734 } |
705 if(yMain > center1QuartHeight && ySecond > center1QuartHeight && yMain < center3QuartsHeight && ySecond < center3QuartsHeight) |
735 } |
706 { |
736 } |
707 console.log('VERTICAL UNZOOM - ' + this.currentMode); |
737 } |
708 this.unzoom(); |
738 } |
709 } |
739 } |
710 } |
740 } |
711 } |
741 } |
712 } |
|
713 } |
|
714 } |
|
715 } |
|
716 } |
|