|
44
|
1 |
/* |
|
|
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. |
|
|
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. |
|
|
4 |
*/ |
|
|
5 |
mosaic.prototype.preZoom = function(snapshot) |
|
|
6 |
{ |
|
47
|
7 |
if(this.currentMode == "NO-USER" || this.currentMode.indexOf("INCOMING") > -1 || snapshot == null || this.helpDisplayed || this.isMosaicFiltering || this.isSearchByCurvesOn || this.gestureDelRequested) |
|
44
|
8 |
{ |
|
|
9 |
return; |
|
|
10 |
} |
|
|
11 |
|
|
|
12 |
if(this.fullscreen) |
|
|
13 |
{ |
|
|
14 |
return; |
|
|
15 |
} |
|
|
16 |
this.preUnzoom(); |
|
|
17 |
//On enlève les notifications initiales si elles existent. |
|
45
|
18 |
// this.removeSelectionSearchMosaicFull(); |
|
47
|
19 |
this.removeNotifications(); |
|
44
|
20 |
|
|
|
21 |
//Mosaïque. |
|
|
22 |
var _this = this; |
|
|
23 |
//Dimensions de la mosaïque. |
|
|
24 |
var h = this.height, w = this.width; |
|
|
25 |
//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; |
|
|
27 |
//Dimensions et position d'un snapshot dans la mosaïque. |
|
|
28 |
var snHeight = this.snapshotHeight, snWidth = this.snapshotWidth; |
|
|
29 |
var sTop = snapshot.position().top, sLeft = snapshot.position().left; |
|
|
30 |
var prezoomPercentage = this.config['prezoomPercentage']; |
|
|
31 |
|
|
|
32 |
//ID de l'image actuelle. |
|
|
33 |
var currentId = $('img', snapshot).attr('id'); |
|
|
34 |
|
|
|
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. |
|
|
36 |
if(this.zoomed) |
|
|
37 |
{ |
|
|
38 |
/*var currentSN = this.pointerPositionToSN(pointerX, pointerY); |
|
|
39 |
if(currentSN != null && currentSN.attr('id') != snapshot.attr('id')) |
|
|
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 |
|
|
|
56 |
//On indique qu'on a zoomé et on spécifie le snapshot sur lequel on a zoomé. |
|
|
57 |
this.zoomed = true; |
|
|
58 |
this.previousZoomedSN = snapshot; |
|
|
59 |
this.previousId = currentId; |
|
|
60 |
|
|
|
61 |
//On récupère les attributs de l'image. |
|
|
62 |
var fakeImg = $('img', snapshot); |
|
|
63 |
//On forme la balise de la fausse image et on passe son url pour les grands snapshots. |
|
|
64 |
fakeImg = '<img id="fake-' + currentId + '" class="snapshots" src="' + fakeImg.attr('src').replace('-little/', '/') + '" />'; |
|
|
65 |
//On génère un faux snapshot identique au précédent et qu'on va coller dessus. |
|
|
66 |
var fakeSnapshot = '<div id="prezoomContainer-' + currentId + '" class="prezoomContainers"><div id="prezoomSnapshot-' + currentId + '" class="snapshotDivs">' + fakeImg + '</div></div>'; |
|
|
67 |
|
|
|
68 |
//On l'ajoute à la mosaïque. |
|
|
69 |
$('#mainPanel').append(fakeSnapshot); |
|
|
70 |
//On modifie ses attributs. |
|
|
71 |
// console.log('cid : ' + currentId, $('#fake-' + currentId).length); |
|
|
72 |
$('#fake-' + currentId).load(function() |
|
|
73 |
{ |
|
|
74 |
// 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)); |
|
|
76 |
$('#prezoomSnapshot-' + currentId).css('width', (snWidth)).css('height', (snHeight)); |
|
45
|
77 |
$('#prezoomContainer-' + currentId).css('display', 'block'); |
|
44
|
78 |
|
|
|
79 |
//Dimensions et coordonnées initiales du div sur lequel on zoom. |
|
|
80 |
var initialDivWidth = $('#prezoomContainer-' + currentId).width(), initialDivHeight = $('#prezoomContainer-' + currentId).height(); |
|
|
81 |
var initialDivTop = $('#prezoomContainer-' + currentId).position().top, initialDivLeft = $('#prezoomContainer-' + currentId).position().left; |
|
|
82 |
//Dimensions et coordonnées finales du div. |
|
|
83 |
var finalDivWidth = initialDivWidth * (prezoomPercentage+1), diffWidth = finalDivWidth - initialDivWidth, finalDivHeight = initialDivHeight + diffWidth; |
|
|
84 |
var finalDivTop = (initialDivTop - (finalDivHeight - snHeight)/2), finalDivLeft = (initialDivLeft - (finalDivWidth - snWidth)/2); |
|
|
85 |
|
|
|
86 |
//CAS PARTICULIER pour la position du snapshot zoomé : les bordures. |
|
|
87 |
if(finalDivTop < 0) |
|
|
88 |
{ |
|
|
89 |
finalDivTop = -margin; |
|
|
90 |
} |
|
|
91 |
if(finalDivTop + finalDivHeight > h) |
|
|
92 |
{ |
|
|
93 |
finalDivTop = h - finalDivHeight; |
|
|
94 |
} |
|
|
95 |
if(finalDivLeft < 0) |
|
|
96 |
{ |
|
|
97 |
finalDivLeft = 0; |
|
|
98 |
} |
|
|
99 |
if(finalDivLeft + finalDivWidth + margin*2 > w) |
|
|
100 |
{ |
|
|
101 |
finalDivLeft = w - finalDivWidth - margin*2; |
|
|
102 |
} |
|
|
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 |
|
|
|
114 |
//On prézoom le div en le centrant sur le milieu du snapshot pointé. |
|
|
115 |
$('#prezoomSnapshot-' + currentId).animate( |
|
|
116 |
{ |
|
|
117 |
width: finalDivWidth + margin, |
|
|
118 |
height: finalDivHeight - margin*2, |
|
|
119 |
top: finalDivTop + margin, |
|
|
120 |
left: finalDivLeft + margin |
|
|
121 |
}, _this.config['timePrezoom']); |
|
|
122 |
$('#prezoomContainer-' + currentId).animate( |
|
|
123 |
{ |
|
|
124 |
width: finalDivWidth + margin*2, |
|
|
125 |
height: finalDivHeight - margin, |
|
|
126 |
top: finalDivTop + margin, |
|
|
127 |
left: finalDivLeft |
|
|
128 |
}, _this.config['timePrezoom'], function() |
|
|
129 |
{ |
|
45
|
130 |
if(!_this.mouseInteractions) |
|
44
|
131 |
{ |
|
45
|
132 |
//On met le spinner gif sur le pointeur, s'il n'existe pas déjà. |
|
|
133 |
if($('#spinner').length == 0) |
|
44
|
134 |
{ |
|
45
|
135 |
//On repère le pointeur ayant provoqué le prezoom. |
|
|
136 |
var prezoomPointer; |
|
|
137 |
if(!_this.isMainPointerDisplayed) |
|
|
138 |
{ |
|
|
139 |
prezoomPointer = $('#secondPointer'); |
|
|
140 |
} |
|
|
141 |
if(!_this.isSecondPointerDisplayed) |
|
|
142 |
{ |
|
|
143 |
prezoomPointer = $('#mainPointer'); |
|
|
144 |
} |
|
|
145 |
|
|
|
146 |
var spinner = "<img id='spinner'></div>"; |
|
|
147 |
$('body').append(spinner); |
|
|
148 |
$('#spinner').css( |
|
|
149 |
{ |
|
|
150 |
position: 'absolute', |
|
|
151 |
top: prezoomPointer.position().top, |
|
|
152 |
left: prezoomPointer.position().left, |
|
|
153 |
width: 85, |
|
|
154 |
height: 85, |
|
|
155 |
'z-index': 600 |
|
|
156 |
}); |
|
|
157 |
$('#spinner').attr('src', './img/cursors/selector_anim_2.gif'); |
|
44
|
158 |
} |
|
45
|
159 |
} |
|
|
160 |
else |
|
|
161 |
{ |
|
|
162 |
_this.isOnAPrezoomSN = true; |
|
44
|
163 |
} |
|
|
164 |
|
|
|
165 |
if(_this.currentMode == 'MOSAIC') |
|
|
166 |
{ |
|
47
|
167 |
_this.removeNotifications(); |
|
44
|
168 |
_this.mosaicSelection(); |
|
|
169 |
} |
|
45
|
170 |
else if(_this.currentMode == 'FILTER' && !_this.filterSearchedType && _this.curvesGesturesFound) |
|
44
|
171 |
{ |
|
47
|
172 |
_this.removeNotifications(); |
|
44
|
173 |
_this.filterSearchAndSelection(); |
|
|
174 |
} |
|
|
175 |
else if(_this.currentMode == 'FILTER' && _this.filterSearchedType) |
|
|
176 |
{ |
|
47
|
177 |
_this.removeNotifications(); |
|
44
|
178 |
_this.filterGestureAndSelection(_this.filterSearchedType, 'valid'); |
|
|
179 |
} |
|
|
180 |
}); |
|
|
181 |
}); |
|
|
182 |
|
|
45
|
183 |
if(!this.mouseInteractions) |
|
44
|
184 |
{ |
|
45
|
185 |
this.zoomTimeout = setTimeout(function() |
|
44
|
186 |
{ |
|
45
|
187 |
_this.zoom(); |
|
|
188 |
}, this.config['timeoutZoom']); |
|
|
189 |
} |
|
44
|
190 |
} |
|
|
191 |
|
|
|
192 |
/* |
|
|
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é. |
|
|
194 |
*/ |
|
|
195 |
mosaic.prototype.preUnzoom = function() |
|
|
196 |
{ |
|
|
197 |
//Si on n'a pas zoomé, on quitte la fonction. |
|
|
198 |
/*if(!this.zoomed) |
|
|
199 |
{ |
|
|
200 |
return; |
|
|
201 |
}*/ |
|
|
202 |
|
|
|
203 |
/*if(this.currentMode == "NO-USER" || this.currentMode.indexOf("INCOMING") > -1) |
|
|
204 |
{ |
|
|
205 |
return; |
|
|
206 |
}*/ |
|
|
207 |
|
|
|
208 |
$('#spinner').remove(); |
|
|
209 |
|
|
|
210 |
var _this = this; |
|
|
211 |
|
|
45
|
212 |
this.isOnAPrezoomSN = false; |
|
44
|
213 |
clearTimeout(this.zoomTimeout); |
|
|
214 |
|
|
|
215 |
if(this.currentMode == 'MOSAIC') |
|
|
216 |
{ |
|
47
|
217 |
this.removeNotifications(); |
|
44
|
218 |
this.mosaicSelectionAndSearch(); |
|
|
219 |
} |
|
45
|
220 |
else if(_this.currentMode == 'FILTER' && !this.filterSearchedType && !this.curvesGesturesFound) |
|
44
|
221 |
{ |
|
47
|
222 |
this.removeNotifications(); |
|
44
|
223 |
this.filterSearch(); |
|
|
224 |
} |
|
45
|
225 |
else if(_this.currentMode == 'FILTER' && this.filterSearchedType && !this.curvesGesturesFound) |
|
44
|
226 |
{ |
|
47
|
227 |
this.removeNotifications(); |
|
44
|
228 |
this.filterGesture(this.filterSearchedType, 'valid'); |
|
|
229 |
} |
|
|
230 |
/*this.removePointMosaicPrezoom(); |
|
|
231 |
this.notifySelectionSearchMosaicFull();*/ |
|
|
232 |
|
|
|
233 |
//On spécifie la marge afin de centrer le prédézoom. |
|
|
234 |
var margin = this.marginWidth; |
|
|
235 |
//ID du snapshot précédemment pointé. |
|
|
236 |
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. |
|
|
240 |
for(var i = 0 ; i < this.config['imagesToShow'] ; i++) |
|
|
241 |
{ |
|
|
242 |
if($('#prezoomContainer-snapshot-' + i).length > 0) |
|
|
243 |
{ |
|
|
244 |
$('#prezoomContainer-snapshot-' + i).animate( |
|
|
245 |
{ |
|
|
246 |
width: this.snapshotWidth + margin, |
|
|
247 |
height: this.snapshotHeight + margin, |
|
|
248 |
top: $('#snapshotDiv-' + i).position().top,//this.previousZoomedSN.position().top, |
|
|
249 |
left: $('#snapshotDiv-' + i).position().left//this.previousZoomedSN.position().left |
|
|
250 |
}, this.config['preUnzoomTime'], function(){ $(this).remove(); _this.zoomed = false; }); |
|
|
251 |
$('#prezoomSnapshot-snapshot-' + i).animate( |
|
|
252 |
{ |
|
|
253 |
width: this.snapshotWidth, |
|
|
254 |
height: this.snapshotHeight, |
|
|
255 |
top: $('#snapshotDiv-' + i).position().top,//this.previousZoomedSN.position().top, |
|
|
256 |
left: $('#snapshotDiv-' + i).position().left//this.previousZoomedSN.position().left |
|
|
257 |
}, this.config['preUnzoomTime']); |
|
|
258 |
} |
|
|
259 |
} |
|
|
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 |
} |
|
|
276 |
|
|
|
277 |
|
|
|
278 |
/* |
|
|
279 |
* Zoom d'un snapshot en plein écran. |
|
|
280 |
*/ |
|
|
281 |
mosaic.prototype.zoom = function() |
|
|
282 |
{ |
|
|
283 |
var _this = this; |
|
|
284 |
|
|
|
285 |
//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) |
|
|
287 |
{ |
|
|
288 |
return; |
|
|
289 |
} |
|
|
290 |
|
|
|
291 |
//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']; |
|
|
293 |
var zoomPercentage = this.config['zoomPercentage']; |
|
|
294 |
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)); |
|
|
296 |
var newPreMPWidth = initMPWidth * len * zoomPercentage + zoomedMargin * (len), newPreMPHeight = initMPHeight * (imgs / len) * zoomPercentage + zoomedMargin * ((imgs / len)); |
|
|
297 |
|
|
|
298 |
//Dimensions et coordonnées initiales du div sur lequel on zoom. |
|
|
299 |
var initialDivWidth = this.previousZoomedSN.width(), initialDivHeight = this.previousZoomedSN.height(); |
|
|
300 |
var initialDivTop = this.previousZoomedSN.position().top, initialDivLeft = this.previousZoomedSN.position().left; |
|
|
301 |
//Dimensions et coordonnées finales du div. |
|
|
302 |
var finalDivWidth = initialDivWidth * (zoomPercentage+1), finalDivHeight = initialDivHeight * (zoomPercentage+1); |
|
|
303 |
var newZoomTop = -this.previousZoomedSN.position().top*(newPreMPHeight/initMPHeight) - zoomedMargin/2 + (initMPHeight - initMPHeight * zoomPercentage)/2, newZoomLeft = -this.previousZoomedSN.position().left*(newPreMPWidth/initMPWidth) - zoomedMargin/2 + (initMPWidth - initMPWidth * zoomPercentage)/2; |
|
|
304 |
var newSnWidth = initMPWidth * zoomPercentage, newSnHeight = initMPHeight * zoomPercentage; |
|
|
305 |
|
|
|
306 |
this.preUnzoom(this); |
|
|
307 |
/*SINGULARITE*/ |
|
|
308 |
this.fullscreen = true; |
|
|
309 |
|
|
|
310 |
//On passe l'image du snapshot pointé en HD. |
|
|
311 |
var zoomedImg = $('img', this.previousZoomedSN); |
|
|
312 |
var src = zoomedImg.attr('src'); |
|
|
313 |
zoomedImg.attr('src', src.replace('-little/', '/')); |
|
|
314 |
|
|
|
315 |
//On récupère son ID. |
|
|
316 |
var tab, zoomedImgId; |
|
|
317 |
tab = _this.previousId.split('-'); |
|
|
318 |
zoomedImgId = tab[1]; |
|
|
319 |
|
|
|
320 |
//On donne les dimensions des snapshots. |
|
|
321 |
$('.snapshotDivs').animate( |
|
|
322 |
{ |
|
|
323 |
width: newSnWidth, |
|
|
324 |
height: newSnHeight, |
|
|
325 |
margin: zoomedMargin/2 + 'px', |
|
|
326 |
}, this.config['zoomTime']); |
|
|
327 |
|
|
|
328 |
if(this.currentMode != 'NO-USER') |
|
|
329 |
{ |
|
|
330 |
//Les snapshots baissent alors en opacité, donnant l'impression qu'ils sont grisés. |
|
|
331 |
$('.snapshotDivs').animate( |
|
|
332 |
{ |
|
|
333 |
opacity: '0.4' |
|
|
334 |
}, this.config['zoomTime']); |
|
|
335 |
//Le snapshot du milieu revient à une opacité optimale, ce qui attire l'attention de l'utilisateur. |
|
|
336 |
$(this.previousZoomedSN).animate( |
|
|
337 |
{ |
|
|
338 |
opacity: '1' |
|
|
339 |
}, this.config['zoomTime']); |
|
|
340 |
} |
|
|
341 |
// console.log('BBB1 : ' + this.currentMode); |
|
|
342 |
//On zoome sur la mosaïque. |
|
|
343 |
$('#mainPanel').animate( |
|
|
344 |
{ |
|
|
345 |
width: newPreMPWidth, |
|
|
346 |
height: newPreMPHeight, |
|
|
347 |
top: newZoomTop, |
|
|
348 |
left: newZoomLeft |
|
|
349 |
}, this.config['zoomTime'], function() |
|
|
350 |
{ |
|
|
351 |
_this.snTop = (zoomedImg.position().top + newZoomTop + _this.MPTop_margin), _this.snLeft = (zoomedImg.position().left + newZoomLeft); |
|
|
352 |
_this.snWidth = newSnWidth + 1, _this.snHeight = newSnHeight + 1; |
|
|
353 |
|
|
|
354 |
_this.notifyTopVideo = newZoomTop; |
|
|
355 |
_this.notifyLeftVideo = newZoomLeft; |
|
|
356 |
|
|
|
357 |
//On charge les interactions avec les voisins. |
|
|
358 |
_this.centerId = zoomedImgId; |
|
|
359 |
// console.log('BBB2 : ' + _this.currentMode); |
|
|
360 |
if(_this.currentMode != "NO-USER") |
|
|
361 |
{ |
|
|
362 |
// console.log('PROBLEM'); |
|
|
363 |
_this.currentMode = 'VIDEO'; |
|
|
364 |
_this.listenToNeighbours(); |
|
|
365 |
} |
|
|
366 |
|
|
47
|
367 |
console.log('gesture shown : ' + _this.currentSearchGesture[_this.centerId]); |
|
|
368 |
|
|
|
369 |
if(_this.currentSearchGesture[_this.centerId] != '') |
|
|
370 |
{ |
|
|
371 |
_this.currentMode = 'SEARCH'; |
|
|
372 |
_this.isCurrentlyInASearchByGesture = true; |
|
|
373 |
_this.removeNotifications(); |
|
|
374 |
_this.searchGesture(_this.currentSearchGesture[_this.centerId], 'valid'); |
|
|
375 |
} |
|
|
376 |
|
|
44
|
377 |
$('#spinner').remove(); |
|
|
378 |
$('#mainPointer').css('background-image', 'url(./img/cursors/pointer.png)'); |
|
|
379 |
$('#secondPointer').css('background-image', 'url(./img/cursors/pointer2.png)'); |
|
|
380 |
|
|
|
381 |
// console.log('BBB3 : ' + _this.currentMode); |
|
|
382 |
_this.loadPlayer(_this.snTop, _this.snLeft, _this.snWidth, _this.snHeight, newZoomTop, newZoomLeft, _this.timeToGoAt[_this.centerId]); |
|
45
|
383 |
|
|
|
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 |
}); |
|
44
|
431 |
}); |
|
|
432 |
} |
|
|
433 |
|
|
|
434 |
/* |
|
|
435 |
* Retour à la taille normale de la mosaïque. |
|
|
436 |
*/ |
|
|
437 |
mosaic.prototype.unzoom = function() |
|
|
438 |
{ |
|
|
439 |
//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) |
|
|
442 |
{ |
|
|
443 |
return; |
|
|
444 |
} |
|
|
445 |
|
|
45
|
446 |
var _this = this; |
|
|
447 |
|
|
|
448 |
if(this.mouseInteractions) |
|
|
449 |
{ |
|
47
|
450 |
$(window).unbind('click'); |
|
|
451 |
$(window).unbind('mousewheel'); |
|
45
|
452 |
|
|
|
453 |
//On rebind le clic pour supprimer une recherche. |
|
47
|
454 |
$(window).click(function(e) |
|
45
|
455 |
{ |
|
|
456 |
_this.removeSearchNotificationIfOnIt(e.pageX, e.pageY); |
|
|
457 |
}); |
|
|
458 |
} |
|
|
459 |
|
|
44
|
460 |
this.canSwipe = false; |
|
|
461 |
|
|
|
462 |
//Si la TL avait été sélectionnée, on la déselectionne. |
|
|
463 |
if(this.currentMode == 'TIMELINE') |
|
|
464 |
{ |
|
45
|
465 |
this.exitTimeline('unzoom'); |
|
44
|
466 |
} |
|
|
467 |
|
|
|
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 |
|
|
|
478 |
//On charge les attributs nécessaires aux calculs. |
|
|
479 |
var sWidth = this.snapshotWidth, sHeight = this.snapshotHeight; |
|
|
480 |
var mpWidth = this.width, mpHeight = this.height; |
|
|
481 |
var _this = this; |
|
|
482 |
|
|
|
483 |
//On passe le snapshot sur lequel on a zoomé en SD. |
|
|
484 |
var zoomedImg = $('img', this.previousZoomedSN); |
|
|
485 |
var src = zoomedImg.attr('src'); |
|
|
486 |
zoomedImg.attr('src', src.replace('snapshots/', 'snapshots-little/')); |
|
|
487 |
|
|
|
488 |
if(_this.player.widgets && _this.player.widgets[0]) |
|
|
489 |
{ |
|
|
490 |
// console.log(Math.floor(_this.player.popcorn.currentTime())); |
|
|
491 |
_this.timeToGoAt[_this.centerId] = Math.floor(_this.player.popcorn.currentTime()); |
|
|
492 |
_this.player.widgets[0].freePlayer(); |
|
|
493 |
} |
|
|
494 |
|
|
|
495 |
_this.playerIsReady = false; |
|
|
496 |
$('.LdtPlayer').remove(); |
|
|
497 |
$('body').append('<div class="LdtPlayer" id="LdtPlayer"></div>'); |
|
|
498 |
_this.reaffectKeyPress(); |
|
|
499 |
|
|
|
500 |
//On rend leur opacité aux snapshots. Qui ne sont alors plus grisés. |
|
|
501 |
$('.snapshotDivs').animate( |
|
|
502 |
{ |
|
|
503 |
width: sWidth, |
|
|
504 |
height: sHeight, |
|
|
505 |
margin: this.marginWidth/2 + 'px' |
|
|
506 |
}, this.config['unzoomTime'], function() |
|
|
507 |
{ |
|
|
508 |
_this.neighboursIds.length = 0; |
|
|
509 |
_this.currentlyUnzooming = false; |
|
|
510 |
}); |
|
|
511 |
|
|
|
512 |
if(this.currentMode != 'NO-USER') |
|
|
513 |
{ |
|
|
514 |
if(this.currentMode.indexOf("INCOMING") == -1 && !this.isMosaicFiltered) |
|
|
515 |
{ |
|
|
516 |
$('.snapshotDivs').animate( |
|
|
517 |
{ |
|
|
518 |
opacity: '1' |
|
|
519 |
}, this.config['unzoomTime']); |
|
|
520 |
} |
|
|
521 |
else if(this.currentMode.indexOf("INCOMING") == -1 && this.isMosaicFiltered) |
|
|
522 |
{ |
|
|
523 |
for(var i = 0 ; i < this.config['imagesToShow'] ; i++) |
|
|
524 |
{ |
|
|
525 |
$('#snapshotDiv-' + i).animate( |
|
|
526 |
{ |
|
|
527 |
opacity: this.opacities[i] |
|
|
528 |
}, this.config['unzoomTime']); |
|
|
529 |
} |
|
|
530 |
} |
|
|
531 |
} |
|
|
532 |
else |
|
|
533 |
{ |
|
|
534 |
// console.log('init'); |
|
|
535 |
this.previousZoomedSN.fadeTo(this.config['unzoomTime'], 0, function() |
|
|
536 |
{ |
|
|
537 |
_this.init(); |
|
|
538 |
}); |
|
|
539 |
} |
|
|
540 |
|
|
|
541 |
//On dézoom sur la mosaïque. |
|
|
542 |
$('#mainPanel').animate( |
|
|
543 |
{ |
|
|
544 |
width: mpWidth, |
|
|
545 |
height: mpHeight, |
|
|
546 |
top: '0px', |
|
|
547 |
left: '0px' |
|
|
548 |
}, this.config['unzoomTime'], function() |
|
|
549 |
{ |
|
|
550 |
//On n'est plus en plein écran, et on ne peut plus se déplacer vers le prochain voisin. |
|
|
551 |
_this.fullscreen = false; |
|
|
552 |
_this.canMoveToNeighbour = false; |
|
|
553 |
|
|
|
554 |
if(_this.currentMode != 'NO-USER' && _this.currentMode.indexOf('INCOMING-') == -1) |
|
|
555 |
{ |
|
|
556 |
if(_this.isMosaicFiltered) |
|
|
557 |
{ |
|
|
558 |
//On revient en mode FILTER. |
|
|
559 |
_this.currentMode = 'FILTER'; |
|
|
560 |
} |
|
|
561 |
else |
|
|
562 |
{ |
|
|
563 |
//On revient en mode MOSAIC. |
|
|
564 |
_this.currentMode = 'MOSAIC'; |
|
|
565 |
} |
|
|
566 |
|
|
|
567 |
//On ne permet plus le déplacement vers les voisins. |
|
|
568 |
/*$('.snapshotDivs').unbind('mouseover', function() |
|
|
569 |
{ |
|
|
570 |
_this.selectNeighbour(); |
|
|
571 |
});*/ |
|
|
572 |
|
|
|
573 |
//On remet les notifications initiales si on n'est pas dans une recherche par filtrage. |
|
|
574 |
if(_this.currentMode == 'MOSAIC' && !_this.filterSearchedType) |
|
|
575 |
{ |
|
47
|
576 |
_this.removeNotifications(); |
|
44
|
577 |
// _this.notifySelectionSearchMosaicFull(); |
|
|
578 |
_this.mosaicSelectionAndSearch(); |
|
|
579 |
} |
|
|
580 |
} |
|
|
581 |
|
|
|
582 |
this.currentlyUnzooming = false; |
|
|
583 |
}); |
|
|
584 |
} |