|
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 : mouseInteractions.js |
|
14 * |
|
15 * Auteur : alexandre.bastien@iri.centrepompidou.fr |
|
16 * |
|
17 * Fonctionnalités : Définit les fonctions d'intéraction souris. |
|
18 */ |
|
19 |
|
20 /* |
|
21 * Fonction appelée lors d'un mouse down en mode d'interaction souris. |
|
22 * Est appelé dans le fichier : |
|
23 * mosaic > fonction loadMosaic, attachée à l'événement jQuery mousedown. |
|
24 */ |
|
25 Mosaic.prototype.onMouseDown = function(e) |
|
26 { |
|
27 this.isMouseDown = true; |
|
28 |
|
29 //Si on se trouve sur l'icone d'aide et qu'elle est zoomée. |
|
30 if(this.isHelpIconZoomed) |
|
31 { |
|
32 //On affiche différentes aides en fonction de si on se trouve dans une vidéo ou non. |
|
33 if(this.currentMode == 'SEARCH' || this.currentMode == 'VIDEO' || this.currentMode == 'TIMELINE') |
|
34 { |
|
35 this.notifyHelp(false); |
|
36 } |
|
37 else if(this.currentMode == 'FILTER' || this.currentMode == 'MOSAIC') |
|
38 { |
|
39 this.notifyHelp(true); |
|
40 } |
|
41 } |
|
42 |
|
43 //On met à jour les coordonnées de la souris au dernier mouse down. |
|
44 this.mouseDownPosX = e.pageX; |
|
45 this.mouseDownPosY = e.pageY; |
|
46 |
|
47 //Si on est sur une notification de gesture de recherche. |
|
48 this.removeSearchNotificationIfOnIt(e.pageX, e.pageY); |
|
49 this.isUserInSearchZone = true; |
|
50 |
|
51 //Si on est en mode de tracé de courbes, on indique qu'on a commencé à tracer au canvas. |
|
52 if(this.isSearchByCurvesOn) |
|
53 { |
|
54 this.searchCanvas.onPointerIn(this.mousePosX, this.mousePosY, null, null); |
|
55 } |
|
56 } |
|
57 |
|
58 /* |
|
59 * Fonction appelée lors d'un mouse move en mode d'interaction souris. |
|
60 * Est appelé dans le fichier : |
|
61 * mosaic > fonction loadMosaic, attachée à l'événement jQuery mousemove. |
|
62 */ |
|
63 Mosaic.prototype.onMouseMove = function(e) |
|
64 { |
|
65 //On vérifie si la souris n'est pas sur l'icone d'aide. |
|
66 if(this.isOnHelpIcon(this.mousePosX, this.mousePosY)) |
|
67 { |
|
68 //On agrandit l'icone d'aide. |
|
69 this.showBigHelp(); |
|
70 } |
|
71 else |
|
72 { |
|
73 //On la rétrecit sinon. |
|
74 this.showSmallHelp(); |
|
75 } |
|
76 |
|
77 //Si on n'a pas appuyé sur la souris avant, on part. |
|
78 if(!this.isMouseDown) |
|
79 { |
|
80 return; |
|
81 } |
|
82 |
|
83 var _this = this; |
|
84 |
|
85 //Si on est en mode de tracé de courbes, on met à jour la courbe. |
|
86 if(this.isSearchByCurvesOn) |
|
87 { |
|
88 this.searchCanvas.onPointerMove(this.mousePosX, this.mousePosY - this.MPTop_margin, null, null); |
|
89 } |
|
90 |
|
91 //On met à jour l'ancienne position de la souris si elle est nulle. |
|
92 if(!this.mousePosLastX && this.mousePosLastX != 0) |
|
93 { |
|
94 this.mousePosLastX = this.mousePosX; |
|
95 } |
|
96 if(!this.mousePosLastY && this.mousePosLastY != 0) |
|
97 { |
|
98 this.mousePosLastY = this.mousePosY; |
|
99 } |
|
100 |
|
101 //Le delta s'accroît si la souris bouge. |
|
102 this.mouseUpDownDelta += Math.floor(Math.sqrt((this.mousePosLastX - e.pageX) * (this.mousePosLastX - e.pageX) + (this.mousePosLastY - e.pageY) * (this.mousePosLastY - e.pageY))); |
|
103 |
|
104 //On met à jour l'ancienne position de la souris. |
|
105 if(this.mousePosLastX != this.mousePosX) |
|
106 { |
|
107 this.mousePosLastX = this.mousePosX; |
|
108 } |
|
109 if(this.mousePosLastY != this.mousePosY) |
|
110 { |
|
111 this.mousePosLastY = this.mousePosY; |
|
112 } |
|
113 |
|
114 //Si la souris a parcouru une trop grande distance, on entre en recherche. |
|
115 if(this.mouseUpDownDelta > this.config.mouseUpDownDeltaTreshold) |
|
116 { |
|
117 //Si on est en mosaique, on entre en filtrage. |
|
118 if(this.currentMode == "MOSAIC") |
|
119 { |
|
120 this.preUnzoom(); |
|
121 this.currentMode = "FILTER"; |
|
122 this.isMosaicFiltered = true; |
|
123 } |
|
124 //Si on est en mode de filtrage, mais qu'on n'est pas en tracé de courbes. |
|
125 else if(this.currentMode == "FILTER" && !this.isSearchByCurvesOn && this.isUserInSearchZone) |
|
126 { |
|
127 //On lance une nouvelle recherche pas courbes. |
|
128 this.preUnzoom(); |
|
129 } |
|
130 //Si on est dans une vidéo, on entre en recherche. |
|
131 else if(this.currentMode == "VIDEO" || this.currentMode == "TIMELINE") |
|
132 { |
|
133 this.currentMode = "SEARCH"; |
|
134 } |
|
135 //Si on est en mode recherche dans une vidéo, mais qu'on n'est pas en tracé de courbes. |
|
136 /*else if(this.currentMode == "SEARCH" && !this.isSearchByCurvesOn) |
|
137 { |
|
138 //On lance une nouvelle recherche pas courbes. |
|
139 }*/ |
|
140 |
|
141 if(this.currentMode != "NO-USER" && this.currentMode.indexOf("INCOMING") == -1 && !this.isSearchByCurvesOn) |
|
142 { |
|
143 this.isSearchByCurvesOn = true; |
|
144 this.startSearch(); |
|
145 this.searchCanvas.onPointerIn(this.mousePosX, this.mousePosY - this.MPTop_margin, null, null); |
|
146 } |
|
147 |
|
148 //S'il n'est pas possible d'afficher l'aide. |
|
149 if(!this.canNotifyHelp) |
|
150 { |
|
151 //On rend son affichage possible après un certain délai. |
|
152 this.canNotifyHelpTimeout = setTimeout(function() |
|
153 { |
|
154 _this.canNotifyHelp = true; |
|
155 }, this.config.timeoutCanNotifyHelp); |
|
156 } |
|
157 } |
|
158 } |
|
159 |
|
160 /* |
|
161 * Fonction appelée lors d'un mouse up en mode d'interaction souris. |
|
162 * Est appelé dans le fichier : |
|
163 * mosaic > fonction loadMosaic, attachée à l'événement jQuery mousemove. |
|
164 */ |
|
165 Mosaic.prototype.onMouseUp = function() |
|
166 { |
|
167 this.isMouseDown = false; |
|
168 |
|
169 //Si on était en train de tracer une courbe. |
|
170 if(this.isSearchByCurvesOn) |
|
171 { |
|
172 //On quitte la zone de recherche. |
|
173 /*this.isUserInSearchZone = false; |
|
174 |
|
175 //On regarde si ce qu'on a tracé correspond à une courbe en particulier. |
|
176 var gesture_match = this.gestureWithSameCode(this.actualCode); |
|
177 this.actualCode = ''; |
|
178 |
|
179 //Si oui. |
|
180 if(gesture_match.length > 0) |
|
181 { |
|
182 //Si on est en mode recherche dans une vidéo et que le player est prêt. |
|
183 if(this.currentMode == "SEARCH" && this.playerIsReady) |
|
184 { |
|
185 //On effectue une recherche dans cette vidéo. |
|
186 this.player.widgets[0].searchByGesture(gesture_match); |
|
187 this.isCurrentlyInASearchByGesture = this.player.widgets[0].isCurrentlyInASearchByGesture; |
|
188 |
|
189 //On va au premier marqueur trouvé. |
|
190 if(this.player && this.player.widgets[0] && this.timeToGoAt[this.centerId] === 0 && this.player.widgets[0].atLeastOneSearchMarker(this.currentSearchGesture[this.centerId])) |
|
191 { |
|
192 this.player.widgets[0].goToFirstSearchedMarker(this.currentSearchGesture[this.centerId]); |
|
193 } |
|
194 |
|
195 //On affiche la notification de gesture de recherche. |
|
196 this.removeNotifications(); |
|
197 this.currentSearchGesture[this.centerId] = gesture_match; |
|
198 this.searchGesture(gesture_match, 'valid'); |
|
199 this.curvesGesturesFound = false; |
|
200 } |
|
201 //Si on est en mode de filtrage de mosaique. |
|
202 else if(this.currentMode == "FILTER") |
|
203 { |
|
204 if(this.isMosaicFiltered) |
|
205 { |
|
206 //On notifie la recherche par filtrage. |
|
207 this.removeNotifications(); |
|
208 this.filterSearchedType = gesture_match; |
|
209 this.filterGesture(gesture_match, 'valid'); |
|
210 //On filtre la mosaique. |
|
211 this.searchFilter(gesture_match); |
|
212 this.curvesGesturesFound = false; |
|
213 } |
|
214 } |
|
215 } |
|
216 //Si aucune gesture ne matche dans le dictionnaire. |
|
217 else |
|
218 { |
|
219 //Si on était en mode filtrage de la mosaïque et qu'aucune gesture de filtrage n'avait été détectée avant ca, on revient en mode mosaïque. |
|
220 if(this.currentMode == "FILTER" && this.filterSearchedType == "") |
|
221 { |
|
222 this.currentMode = "MOSAIC"; |
|
223 this.isMosaicFiltered = false; |
|
224 } |
|
225 //Sinon si on était en mode recherche dans une video et qu'aucune gesture n'avait été détectée avant ca, on revient en mode video. |
|
226 if(this.currentMode == "SEARCH" && this.currentSearchGesture[this.centerId] == "") |
|
227 { |
|
228 this.currentMode = "VIDEO"; |
|
229 } |
|
230 }*/ |
|
231 //On dit au module de recherche qu'on arrête de tracer des courbes. |
|
232 this.searchCanvas.onPointerOut(); |
|
233 } |
|
234 |
|
235 this.mousePosLastX = null; |
|
236 this.mousePosLastY = null; |
|
237 |
|
238 //Si la distance parcourue par la souris entre le mouse down et le mouse up est inférieure ou égale au seuil. |
|
239 if(this.mouseUpDownDelta <= this.config.mouseUpDownDeltaTreshold) |
|
240 { |
|
241 //Si on est sur un snapshot prézoomé. |
|
242 if(this.isOnAPrezoomSN && this.previousZoomedSN != '' && (this.currentMode == 'MOSAIC' || this.currentMode == 'FILTER') && !this.isPrezooming) |
|
243 { |
|
244 this.zoom(); |
|
245 } |
|
246 } |
|
247 |
|
248 //On réinitialise le delta, on quitte la recherche par courbes. |
|
249 this.mouseUpDownDelta = 0; |
|
250 this.isSearchByCurvesOn = false; |
|
251 this.leaveSearch(); |
|
252 |
|
253 //Si on est en mode de filtrage et qu'on a une gesture de filtrage trouvée. |
|
254 if(this.currentMode == 'FILTER' && this.filterSearchedType != '') |
|
255 { |
|
256 //On notifie. |
|
257 this.removeNotifications(); |
|
258 this.filterGesture(this.filterSearchedType, 'valid'); |
|
259 } |
|
260 } |
|
261 |
|
262 /* |
|
263 * Fonction appelée lors d'un clic en mode d'interaction souris. |
|
264 * Est appelé dans le fichier : |
|
265 * mosaic > fonction loadMosaic. |
|
266 */ |
|
267 Mosaic.prototype.onClick = function(x, y) |
|
268 { |
|
269 //Si la position de la souris entre le mouse down et le mouse up change de plus de 10px, on part. |
|
270 if(!this.mouseDownPosX || !this.mouseDownPosY || Math.sqrt((this.mouseDownPosX - x) * (this.mouseDownPosX - x) + (this.mouseDownPosY - y) * (this.mouseDownPosY - y)) > 10) |
|
271 { |
|
272 return; |
|
273 } |
|
274 |
|
275 //Si on est dans un mode autre qu'un mode zoomé et qu'on n'affiche pas l'aide, on part. |
|
276 if(this.currentMode != "VIDEO" && this.currentMode != "SEARCH" && this.currentMode != "TIMELINE" && !this.helpDisplayed) |
|
277 { |
|
278 return; |
|
279 } |
|
280 |
|
281 //Si on clique en dehors de la video centrale, alors on dézoome. |
|
282 var TL = $('.Ldt-Timeline'); |
|
283 var TLwidth = TL.width(), TLheight = TL.height(); |
|
284 var Ptop = $('.LdtPlayer').position().top, Pleft = $('.LdtPlayer').position().left; |
|
285 var Pheight = $('.LdtPlayer').height(); |
|
286 var MPx = this.mousePosX, MPy = this.mousePosY; |
|
287 |
|
288 //On regarde si on a cliqué sur un snapshot. |
|
289 var SN = this.pointerPositionToSN(MPx - this.notifyLeftVideo, MPy - this.notifyTopVideo, true); |
|
290 var SNId; |
|
291 if(SN) |
|
292 { |
|
293 SNId = parseInt(SN.attr('id').replace('snapshotDiv-', '')); |
|
294 } |
|
295 |
|
296 //Si on n'a pas demandé à supprimé la notification de gesture. |
|
297 if(!this.gestureDelRequested && !this.helpDisplayed) |
|
298 { |
|
299 //Si non, ou s'il ne fait pas partie des voisins. |
|
300 if(!SNId || !_.include(this.neighboursIds, SNId)) |
|
301 { |
|
302 //Si le clic a lieu en dehors du player et que l'aide n'est pas affichée, on dezoom. |
|
303 if(MPx < Pleft || MPx > (+Pleft + TLwidth) || MPy < Ptop || MPy > (+Ptop + Pheight - TLheight)) |
|
304 { |
|
305 this.unzoom(); |
|
306 } |
|
307 } |
|
308 //Si on se trouve sur un voisin, on bouge. |
|
309 else if(SNId && _.include(this.neighboursIds, SNId) && this.canMoveToNeighbour) |
|
310 { |
|
311 this.moveToNeighbour($('#snapshotDiv-' + SNId)); |
|
312 } |
|
313 } |
|
314 //Si on l'a demandé, on enlève la demande de suppression. |
|
315 else |
|
316 { |
|
317 this.gestureDelRequested = false; |
|
318 } |
|
319 |
|
320 //Si l'aide est affichée, un clic la ferme. |
|
321 if(this.helpDisplayed && !this.isHelpIconZoomed && !this.isHelpIconZooming) |
|
322 { |
|
323 this.removeHelp(); |
|
324 } |
|
325 } |