--- a/front_idill/src/mosaic/js/zoomInteractions.js Mon Jul 23 10:52:41 2012 +0200
+++ b/front_idill/src/mosaic/js/zoomInteractions.js Mon Jul 23 16:59:35 2012 +0200
@@ -1,57 +1,63 @@
+/*
+* This file is part of the TraKERS\Front IDILL package.
+*
+* (c) IRI <http://www.iri.centrepompidou.fr/>
+*
+* For the full copyright and license information, please view the LICENSE
+* file that was distributed with this source code.
+*/
+
+/*
+ * Projet : TraKERS
+ * Module : Front IDILL
+ * Fichier : zoomInteractions.js
+ *
+ * Auteur : alexandre.bastien@iri.centrepompidou.fr
+ *
+ * Fonctionnalités : Définit les fonctions de zoom/dezoom prezoom/preunzoom.
+ */
+
/*
* 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.
* 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.
+ * Est appelé dans le fichier :
+ * pointers > fonction pointersMosaicInteractions.
*/
-mosaic.prototype.preZoom = function(snapshot)
+Mosaic.prototype.preZoom = function(snapshot)
{
- if(this.currentMode == "NO-USER" || this.currentMode.indexOf("INCOMING") > -1 || snapshot == null || this.helpDisplayed || this.isMosaicFiltering || this.isSearchByCurvesOn || this.gestureDelRequested)
- {
- return;
- }
-
+ if(this.currentMode == "NO-USER" || this.currentMode.indexOf("INCOMING") > -1 || snapshot == null || this.helpDisplayed || this.isMosaicFiltering || this.isSearchByCurvesOn || this.gestureDelRequested)
+ {
+ return;
+ }
+
if(this.fullscreen)
- {
+ {
return;
- }
- this.preUnzoom();
- //On enlève les notifications initiales si elles existent.
- // this.removeSelectionSearchMosaicFull();
- this.removeNotifications();
-
+ }
+ this.isPrezooming = true;
+ this.preUnzoom();
+ //On enlève les notifications initiales si elles existent.
+ this.removeNotifications();
+
//Mosaïque.
var _this = this;
//Dimensions de la mosaïque.
var h = this.height, w = this.width;
//Longueur en images, nombre d'images et taille de bordure de la mosaïque.
- var len = this.config['length'], imgs = this.config['imagesToShow'], margin = this.marginWidth;
+ var len = this.config.length, imgs = this.config.imagesToShow, margin = this.marginWidth;
//Dimensions et position d'un snapshot dans la mosaïque.
var snHeight = this.snapshotHeight, snWidth = this.snapshotWidth;
var sTop = snapshot.position().top, sLeft = snapshot.position().left;
- var prezoomPercentage = this.config['prezoomPercentage'];
+ var prezoomPercentage = this.config.prezoomPercentage;
//ID de l'image actuelle.
var currentId = $('img', snapshot).attr('id');
//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.
if(this.zoomed)
- {
- /*var currentSN = this.pointerPositionToSN(pointerX, pointerY);
- if(currentSN != null && currentSN.attr('id') != snapshot.attr('id'))
- {
- this.preUnzoom();
- }*/
- // if($('#preZoomContainer-' + currentId) != $(this) && this.previousZoomedSN != '' && this.previousId != '')
- /*if(this.previousZoomedSN.attr('id') !== snapshot.attr('id'))
- {
- this.preUnzoom();
- }
- else
- {
- return;
- }*/
- this.preUnzoom();
- // return;
- }
+ {
+ this.preUnzoom();
+ }
//On indique qu'on a zoomé et on spécifie le snapshot sur lequel on a zoomé.
this.zoomed = true;
@@ -68,13 +74,13 @@
//On l'ajoute à la mosaïque.
$('#mainPanel').append(fakeSnapshot);
//On modifie ses attributs.
- // console.log('cid : ' + currentId, $('#fake-' + currentId).length);
+ // console.log('cid : ' + currentId, $('#fake-' + currentId).length);
$('#fake-' + currentId).load(function()
{
- // snapshot.fadeTo(400, '0.5').delay(200).fadeTo(400, '1');
+ // snapshot.fadeTo(400, '0.5').delay(200).fadeTo(400, '1');
$('#prezoomContainer-' + currentId).css('top', sTop).css('left', sLeft).css('width', (snWidth + margin)).css('height', (snHeight + margin));
$('#prezoomSnapshot-' + currentId).css('width', (snWidth)).css('height', (snHeight));
- $('#prezoomContainer-' + currentId).css('display', 'block');
+ $('#prezoomContainer-' + currentId).css('display', 'block');
//Dimensions et coordonnées initiales du div sur lequel on zoom.
var initialDivWidth = $('#prezoomContainer-' + currentId).width(), initialDivHeight = $('#prezoomContainer-' + currentId).height();
@@ -85,31 +91,21 @@
//CAS PARTICULIER pour la position du snapshot zoomé : les bordures.
if(finalDivTop < 0)
- {
+ {
finalDivTop = -margin;
- }
+ }
if(finalDivTop + finalDivHeight > h)
- {
+ {
finalDivTop = h - finalDivHeight;
- }
+ }
if(finalDivLeft < 0)
- {
+ {
finalDivLeft = 0;
- }
+ }
if(finalDivLeft + finalDivWidth + margin*2 > w)
- {
+ {
finalDivLeft = w - finalDivWidth - margin*2;
- }
-
- ////Code de debug.
- ////CAUTION////
- /*var red = '<div id="red"></div>';
- if($('#red') != null || $('#red') != undefined)
- $('body').append(red);
- $('#red').css('background-color', '#FF0000').css('position', 'absolute').css('top', '0px').css('left', '0px').css('width', '100px').css('height', '100px');
- $('#red').css('top', finalDivTop).css('left', finalDivLeft).css('width', finalDivWidth).css('height', finalDivHeight);*/
- //alert("initial : " + initialDivWidth + " " + initialDivHeight + " ; final : " + finalDivWidth + " " + finalDivHeight);
- ////CAUTION////
+ }
//On prézoom le div en le centrant sur le milieu du snapshot pointé.
$('#prezoomSnapshot-' + currentId).animate(
@@ -118,179 +114,170 @@
height: finalDivHeight - margin*2,
top: finalDivTop + margin,
left: finalDivLeft + margin
- }, _this.config['timePrezoom']);
+ }, _this.config.timePrezoom);
$('#prezoomContainer-' + currentId).animate(
{
width: finalDivWidth + margin*2,
height: finalDivHeight - margin,
top: finalDivTop + margin,
left: finalDivLeft
- }, _this.config['timePrezoom'], function()
- {
- if(!_this.mouseInteractions)
- {
- //On met le spinner gif sur le pointeur, s'il n'existe pas déjà.
- if($('#spinner').length == 0)
- {
- //On repère le pointeur ayant provoqué le prezoom.
- var prezoomPointer;
- if(!_this.isMainPointerDisplayed)
- {
- prezoomPointer = $('#secondPointer');
- }
- if(!_this.isSecondPointerDisplayed)
- {
- prezoomPointer = $('#mainPointer');
- }
-
- var spinner = "<img id='spinner'></div>";
- $('body').append(spinner);
- $('#spinner').css(
- {
- position: 'absolute',
- top: prezoomPointer.position().top,
- left: prezoomPointer.position().left,
- width: 85,
- height: 85,
- 'z-index': 600
- });
- $('#spinner').attr('src', './img/cursors/selector_anim_2.gif');
- }
- }
- else
- {
- _this.isOnAPrezoomSN = true;
- }
-
- if(_this.currentMode == 'MOSAIC')
- {
- _this.removeNotifications();
- _this.mosaicSelection();
- }
- else if(_this.currentMode == 'FILTER' && !_this.filterSearchedType && _this.curvesGesturesFound)
- {
- _this.removeNotifications();
- _this.filterSearchAndSelection();
- }
- else if(_this.currentMode == 'FILTER' && _this.filterSearchedType)
- {
- _this.removeNotifications();
- _this.filterGestureAndSelection(_this.filterSearchedType, 'valid');
- }
- });
+ }, _this.config.timePrezoom, function()
+ {
+ //On a fini de prézoomer.
+ _this.isPrezooming = false;
+ //Si on est en mode Kinect.
+ if(!_this.config.mouseInteractions)
+ {
+ //On met le spinner gif sur le pointeur, s'il n'existe pas déjà.
+ if($('#spinner').length == 0)
+ {
+ //On repère le pointeur ayant provoqué le prezoom.
+ var prezoomPointer;
+ if(!_this.isMainPointerDisplayed)
+ {
+ prezoomPointer = $('#secondPointer');
+ }
+ if(!_this.isSecondPointerDisplayed)
+ {
+ prezoomPointer = $('#mainPointer');
+ }
+
+ //On crée le spinner qui indique le temps restant avant le zoom.
+ var spinner = "<img id='spinner'></div>";
+ $('body').append(spinner);
+ $('#spinner').css(
+ {
+ position: 'absolute',
+ top: prezoomPointer.position().top,
+ left: prezoomPointer.position().left,
+ width: 85,
+ height: 85,
+ 'z-index': 600
+ });
+ $('#spinner').attr('src', './img/cursors/selector_anim_2.gif');
+ }
+ }
+ //Si on est en mode d'interaction souris, on indique juste qu'on est en prezoom.
+ else
+ {
+ _this.isOnAPrezoomSN = true;
+ }
+
+ //Si on est en mode mosaic, on indique juste qu'on effectue une selection.
+ if(_this.currentMode == 'MOSAIC')
+ {
+ _this.removeNotifications();
+ _this.mosaicSelection();
+ }
+ //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.
+ else if(_this.currentMode == 'FILTER' && !_this.filterSearchedType && _this.curvesGesturesFound)
+ {
+ _this.removeNotifications();
+ _this.filterSearchAndSelection();
+ }
+ //Si on est en filtrage avec une gesture de recherche, on indique la gesture et la selection.
+ else if(_this.currentMode == 'FILTER' && _this.filterSearchedType)
+ {
+ _this.removeNotifications();
+ _this.filterGestureAndSelection(_this.filterSearchedType, 'valid');
+ }
+ });
});
- if(!this.mouseInteractions)
- {
- this.zoomTimeout = setTimeout(function()
- {
- _this.zoom();
- }, this.config['timeoutZoom']);
- }
+ //Si on est en mode Kinect, on zoom après un certain temps.
+ if(!this.config.mouseInteractions)
+ {
+ this.zoomTimeout = setTimeout(function()
+ {
+ _this.zoom();
+ }, this.config.timeoutZoom);
+ }
}
/*
* 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é.
+ * Est appelé dans les fichiers :
+ * pointers > fonction pointersMosaicInteractions.
+ * zoomInteractions > fonctions preZoom et zoom.
+ * mosaic > fonction onMouseMove.
+ * client > fonction processMsg.
*/
-mosaic.prototype.preUnzoom = function()
+Mosaic.prototype.preUnzoom = function()
{
- //Si on n'a pas zoomé, on quitte la fonction.
- /*if(!this.zoomed)
- {
- return;
- }*/
-
- /*if(this.currentMode == "NO-USER" || this.currentMode.indexOf("INCOMING") > -1)
- {
- return;
- }*/
-
- $('#spinner').remove();
-
- var _this = this;
-
- this.isOnAPrezoomSN = false;
- clearTimeout(this.zoomTimeout);
-
- if(this.currentMode == 'MOSAIC')
- {
- this.removeNotifications();
- this.mosaicSelectionAndSearch();
- }
- else if(_this.currentMode == 'FILTER' && !this.filterSearchedType && !this.curvesGesturesFound)
- {
- this.removeNotifications();
- this.filterSearch();
- }
- else if(_this.currentMode == 'FILTER' && this.filterSearchedType && !this.curvesGesturesFound)
- {
- this.removeNotifications();
- this.filterGesture(this.filterSearchedType, 'valid');
- }
- /*this.removePointMosaicPrezoom();
- this.notifySelectionSearchMosaicFull();*/
+ $('#spinner').remove();
+
+ var _this = this;
+
+ //On indique qu'on n'est plus en prezoom.
+ this.isOnAPrezoomSN = false;
+ clearTimeout(this.zoomTimeout);
+
+ //Si on est en mode mosaic, on indique qu'on peut pointer ou bien rechercher.
+ if(this.currentMode == 'MOSAIC')
+ {
+ this.removeNotifications();
+ this.mosaicSelectionAndSearch();
+ }
+ //Si on est en filtrage sans gesture, on indique qu'on est juste en filtrage.
+ else if(_this.currentMode == 'FILTER' && !this.filterSearchedType && !this.curvesGesturesFound)
+ {
+ this.removeNotifications();
+ this.filterSearch();
+ }
+ //Si on est en filtrage avec gesture, on indique la gesture de filtrage.
+ else if(_this.currentMode == 'FILTER' && this.filterSearchedType && !this.curvesGesturesFound)
+ {
+ this.removeNotifications();
+ this.filterGesture(this.filterSearchedType, 'valid');
+ }
//On spécifie la marge afin de centrer le prédézoom.
var margin = this.marginWidth;
//ID du snapshot précédemment pointé.
var id = this.previousId;
- //On ne zoom plus.
- //this.zoomed = false;
//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.
- for(var i = 0 ; i < this.config['imagesToShow'] ; i++)
- {
- if($('#prezoomContainer-snapshot-' + i).length > 0)
- {
- $('#prezoomContainer-snapshot-' + i).animate(
- {
- width: this.snapshotWidth + margin,
- height: this.snapshotHeight + margin,
- top: $('#snapshotDiv-' + i).position().top,//this.previousZoomedSN.position().top,
- left: $('#snapshotDiv-' + i).position().left//this.previousZoomedSN.position().left
- }, this.config['preUnzoomTime'], function(){ $(this).remove(); _this.zoomed = false; });
- $('#prezoomSnapshot-snapshot-' + i).animate(
- {
- width: this.snapshotWidth,
- height: this.snapshotHeight,
- top: $('#snapshotDiv-' + i).position().top,//this.previousZoomedSN.position().top,
- left: $('#snapshotDiv-' + i).position().left//this.previousZoomedSN.position().left
- }, this.config['preUnzoomTime']);
- }
- }
-
- /*$('#prezoomSnapshot-' + id).animate(
+ for(var i = 0 ; i < this.config.imagesToShow ; i++)
{
- width: this.snapshotWidth,
- height: this.snapshotHeight,
- top: this.previousZoomedSN.position().top,
- left: this.previousZoomedSN.position().left
- }, this.config['preUnzoomTime']);
- $('#prezoomContainer-' + id).animate(
- {
- width: this.snapshotWidth + margin,
- height: this.snapshotHeight + margin,
- top: this.previousZoomedSN.position().top,
- left: this.previousZoomedSN.position().left
- }, this.config['preUnzoomTime'], function(){ $(this).remove(); _this.zoomed = false; });*/
+ if($('#prezoomContainer-snapshot-' + i).length > 0)
+ {
+ $('#prezoomContainer-snapshot-' + i).animate(
+ {
+ width: this.snapshotWidth + margin,
+ height: this.snapshotHeight + margin,
+ top: $('#snapshotDiv-' + i).position().top,
+ left: $('#snapshotDiv-' + i).position().left
+ }, this.config.preUnzoomTime, function(){ $(this).remove(); _this.zoomed = false; });
+ $('#prezoomSnapshot-snapshot-' + i).animate(
+ {
+ width: this.snapshotWidth,
+ height: this.snapshotHeight,
+ top: $('#snapshotDiv-' + i).position().top,
+ left: $('#snapshotDiv-' + i).position().left
+ }, this.config.preUnzoomTime);
+ }
+ }
}
/*
* Zoom d'un snapshot en plein écran.
+ * Est appelé dans les fichiers :
+ * zoomInteractions > fonction preZoom.
+ * mosaic > fonctions onMouseUp et init.
*/
-mosaic.prototype.zoom = function()
+Mosaic.prototype.zoom = function()
{
var _this = this;
//Si la mosaïque est en pleine écran, pas la peine de zoomer.
if(this.currentMode == "VIDEO" || this.currentMode == "SEARCH" || this.currentMode.indexOf("INCOMING") > -1 || this.helpDisplayed)
- {
+ {
return;
- }
+ }
//On prend les attributs nécessaires au calculs.
- var margin = this.marginWidth, len = this.config['length'], imgs = this.config['imagesToShow'], zoomedMargin = this.config['zoomedMargin'];
- var zoomPercentage = this.config['zoomPercentage'];
+ var margin = this.marginWidth, len = this.config.length, imgs = this.config.imagesToShow, zoomedMargin = this.config.zoomedMargin;
+ var zoomPercentage = this.config.zoomPercentage;
var initMPWidth = this.previousZoomedSN.width() * len + margin*len, initMPHeight = this.previousZoomedSN.height() * (imgs / len) + margin*(imgs / len);
var newMPWidth = initMPWidth * len + zoomedMargin * (len), newMPHeight = initMPHeight * (imgs / len) + zoomedMargin * ((imgs / len));
var newPreMPWidth = initMPWidth * len * zoomPercentage + zoomedMargin * (len), newPreMPHeight = initMPHeight * (imgs / len) * zoomPercentage + zoomedMargin * ((imgs / len));
@@ -303,7 +290,7 @@
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;
var newSnWidth = initMPWidth * zoomPercentage, newSnHeight = initMPHeight * zoomPercentage;
- this.preUnzoom(this);
+ this.preUnzoom();
/*SINGULARITE*/
this.fullscreen = true;
@@ -316,29 +303,28 @@
var tab, zoomedImgId;
tab = _this.previousId.split('-');
zoomedImgId = tab[1];
-
- //On donne les dimensions des snapshots.
- $('.snapshotDivs').animate(
- {
- width: newSnWidth,
- height: newSnHeight,
- margin: zoomedMargin/2 + 'px',
- }, this.config['zoomTime']);
-
- if(this.currentMode != 'NO-USER')
- {
- //Les snapshots baissent alors en opacité, donnant l'impression qu'ils sont grisés.
- $('.snapshotDivs').animate(
- {
- opacity: '0.4'
- }, this.config['zoomTime']);
- //Le snapshot du milieu revient à une opacité optimale, ce qui attire l'attention de l'utilisateur.
- $(this.previousZoomedSN).animate(
- {
- opacity: '1'
- }, this.config['zoomTime']);
- }
- // console.log('BBB1 : ' + this.currentMode);
+
+ //On donne les dimensions des snapshots.
+ $('.snapshotDivs').animate(
+ {
+ width: newSnWidth,
+ height: newSnHeight,
+ margin: zoomedMargin/2 + 'px',
+ }, this.config.zoomTime);
+
+ if(this.currentMode != 'NO-USER')
+ {
+ //Les snapshots baissent alors en opacité, donnant l'impression qu'ils sont grisés.
+ $('.snapshotDivs').animate(
+ {
+ opacity: '0.4'
+ }, this.config.zoomTime);
+ //Le snapshot du milieu revient à une opacité optimale, ce qui attire l'attention de l'utilisateur.
+ $(this.previousZoomedSN).animate(
+ {
+ opacity: '1'
+ }, this.config.zoomTime);
+ }
//On zoome sur la mosaïque.
$('#mainPanel').animate(
{
@@ -346,134 +332,81 @@
height: newPreMPHeight,
top: newZoomTop,
left: newZoomLeft
- }, this.config['zoomTime'], function()
+ }, this.config.zoomTime, function()
{
_this.snTop = (zoomedImg.position().top + newZoomTop + _this.MPTop_margin), _this.snLeft = (zoomedImg.position().left + newZoomLeft);
- _this.snWidth = newSnWidth + 1, _this.snHeight = newSnHeight + 1;
-
- _this.notifyTopVideo = newZoomTop;
- _this.notifyLeftVideo = newZoomLeft;
-
- //On charge les interactions avec les voisins.
+ _this.snWidth = newSnWidth + 1, _this.snHeight = newSnHeight + 1;
+
+ _this.notifyTopVideo = newZoomTop;
+ _this.notifyLeftVideo = newZoomLeft;
+
+ //On charge les interactions avec les voisins.
_this.centerId = zoomedImgId;
- // console.log('BBB2 : ' + _this.currentMode);
- if(_this.currentMode != "NO-USER")
- {
- // console.log('PROBLEM');
- _this.currentMode = 'VIDEO';
- _this.listenToNeighbours();
- }
-
- console.log('gesture shown : ' + _this.currentSearchGesture[_this.centerId]);
-
- if(_this.currentSearchGesture[_this.centerId] != '')
- {
- _this.currentMode = 'SEARCH';
- _this.isCurrentlyInASearchByGesture = true;
- _this.removeNotifications();
- _this.searchGesture(_this.currentSearchGesture[_this.centerId], 'valid');
- }
-
- $('#spinner').remove();
- $('#mainPointer').css('background-image', 'url(./img/cursors/pointer.png)');
- $('#secondPointer').css('background-image', 'url(./img/cursors/pointer2.png)');
-
- // console.log('BBB3 : ' + _this.currentMode);
- _this.loadPlayer(_this.snTop, _this.snLeft, _this.snWidth, _this.snHeight, newZoomTop, newZoomLeft, _this.timeToGoAt[_this.centerId]);
-
- $('body').click(function()
- {
- //Si on clique en dehors de la video centrale, alors on dézoome.
- var TL = $('.Ldt-Timeline');
- var TLwidth = TL.width(), TLheight = TL.height();
- var Ptop = $('.LdtPlayer').position().top, Pleft = $('.LdtPlayer').position().left;
- var Pheight = $('.LdtPlayer').height();
- var MPx = _this.mousePosX, MPy = _this.mousePosY;
-
- //On regarde si on a cliqué sur un snapshot.
- var SN = _this.pointerPositionToSN(MPx - _this.notifyLeftVideo, MPy - _this.notifyTopVideo, true);
- var SNId;
- if(SN)
- {
- SNId = parseInt(SN.attr('id').replace('snapshotDiv-', ''));
- }
-
- if(!_this.gestureDelRequested)
- {
- //Si non, ou s'il ne fait pas partie des voisins.
- if(!SNId || !_.include(_this.neighboursIds, SNId))
- {
- if(MPx < Pleft || MPx > (+Pleft + TLwidth) || MPy < Ptop || MPy > (+Ptop + Pheight - TLheight))
- {
- _this.unzoom();
- }
- }
- //Si on se trouve sur un voisin, on bouge.
- else if(SNId && _.include(_this.neighboursIds, SNId) && _this.canMoveToNeighbour)
- {
- _this.moveToNeighbour($('#snapshotDiv-' + SNId));
- }
- }
- else
- {
- _this.gestureDelRequested = false;
- }
- });
-
- $('body').on('mousewheel', function(event, delta, deltaX, deltaY)
- {
- //Action quand on "tire" la molette vers soi.
- if (delta < 0)
- {
- _this.unzoom();
- }
- });
+
+ //Si on n'est pas en mode sans utilisateur, on passe en mode video et on regarde les voisins.
+ if(_this.currentMode != "NO-USER")
+ {
+ _this.currentMode = 'VIDEO';
+ _this.listenToNeighbours();
+ }
+
+ //Si on a une recherche dans cette video.
+ if(_this.currentSearchGesture[_this.centerId] != '')
+ {
+ //On passe en recherche en indiquant la gesture de recherche.
+ _this.currentMode = 'SEARCH';
+ _this.isCurrentlyInASearchByGesture = true;
+ _this.removeNotifications();
+ _this.searchGesture(_this.currentSearchGesture[_this.centerId], 'valid');
+ }
+
+ //On enlève le spinner et on redonne les apparences par défaut aux pointeurs.
+ $('#spinner').remove();
+ $('#mainPointer').css('background-image', 'url(./img/cursors/pointer.png)');
+ $('#secondPointer').css('background-image', 'url(./img/cursors/pointer2.png)');
+
+ //On charge le player.
+ _this.loadPlayer(_this.snTop, _this.snLeft, _this.snWidth, _this.snHeight, newZoomTop, newZoomLeft, _this.timeToGoAt[_this.centerId]);
});
}
/*
* Retour à la taille normale de la mosaïque.
+ * Est appelé dans les fichiers :
+ * neighbours > fonction checkForDezoom.
+ * zoomInteractions > fonction zoom.
+ * mosaic > fonctions showNImages et onPlayerLoad.
*/
-mosaic.prototype.unzoom = function()
+Mosaic.prototype.unzoom = function()
{
//Si on n'est pas en plein écran, on quitte.
- // console.log("'" + this.currentMode + "'");
if(this.currentMode != "SEARCH" && this.currentMode != "VIDEO" && this.currentMode != "NO-USER" && this.currentMode.indexOf("INCOMING") == -1)
- {
+ {
return;
- }
-
- var _this = this;
-
- if(this.mouseInteractions)
- {
- $(window).unbind('click');
- $(window).unbind('mousewheel');
-
- //On rebind le clic pour supprimer une recherche.
- $(window).click(function(e)
- {
- _this.removeSearchNotificationIfOnIt(e.pageX, e.pageY);
- });
- }
-
- this.canSwipe = false;
-
- //Si la TL avait été sélectionnée, on la déselectionne.
- if(this.currentMode == 'TIMELINE')
- {
- this.exitTimeline('unzoom');
- }
-
- this.currentlyUnzooming = true;
-
- this.removeAdditionalNeighbours();
- this.deselectAllNeighbours();
-
- this.snTop = 0;
- this.snLeft = 0;
- this.Width = 0;
- this.snHeight = 0;
+ }
+
+ var _this = this;
+
+ //Il n'est plus possible de swiper.
+ this.canSwipe = false;
+
+ //Si la TL avait été sélectionnée, on la déselectionne.
+ if(this.currentMode == 'TIMELINE')
+ {
+ this.exitTimeline('unzoom');
+ }
+
+ //On indique qu'on est en train de dezoomer.
+ this.currentlyUnzooming = true;
+
+ //On supprime les voisins additionnels et on déselectionne les voisins.
+ this.removeAdditionalNeighbours();
+ this.deselectAllNeighbours();
+
+ this.snTop = 0;
+ this.snLeft = 0;
+ this.Width = 0;
+ this.snHeight = 0;
//On charge les attributs nécessaires aux calculs.
var sWidth = this.snapshotWidth, sHeight = this.snapshotHeight;
@@ -484,18 +417,18 @@
var zoomedImg = $('img', this.previousZoomedSN);
var src = zoomedImg.attr('src');
zoomedImg.attr('src', src.replace('snapshots/', 'snapshots-little/'));
-
- if(_this.player.widgets && _this.player.widgets[0])
- {
- // console.log(Math.floor(_this.player.popcorn.currentTime()));
- _this.timeToGoAt[_this.centerId] = Math.floor(_this.player.popcorn.currentTime());
- _this.player.widgets[0].freePlayer();
- }
-
- _this.playerIsReady = false;
- $('.LdtPlayer').remove();
- $('body').append('<div class="LdtPlayer" id="LdtPlayer"></div>');
- _this.reaffectKeyPress();
+
+ //On libère le player.
+ if(_this.player.widgets && _this.player.widgets[0])
+ {
+ _this.timeToGoAt[_this.centerId] = Math.floor(_this.player.popcorn.currentTime());
+ _this.player.widgets[0].freePlayer();
+ }
+
+ //On indique que le player n'est pas prêt et on le supprime.
+ _this.playerIsReady = false;
+ $('.LdtPlayer').remove();
+ $('body').append('<div class="LdtPlayer" id="LdtPlayer"></div>');
//On rend leur opacité aux snapshots. Qui ne sont alors plus grisés.
$('.snapshotDivs').animate(
@@ -503,41 +436,46 @@
width: sWidth,
height: sHeight,
margin: this.marginWidth/2 + 'px'
- }, this.config['unzoomTime'], function()
- {
- _this.neighboursIds.length = 0;
- _this.currentlyUnzooming = false;
- });
-
- if(this.currentMode != 'NO-USER')
- {
- if(this.currentMode.indexOf("INCOMING") == -1 && !this.isMosaicFiltered)
- {
- $('.snapshotDivs').animate(
- {
- opacity: '1'
- }, this.config['unzoomTime']);
- }
- else if(this.currentMode.indexOf("INCOMING") == -1 && this.isMosaicFiltered)
- {
- for(var i = 0 ; i < this.config['imagesToShow'] ; i++)
- {
- $('#snapshotDiv-' + i).animate(
- {
- opacity: this.opacities[i]
- }, this.config['unzoomTime']);
- }
- }
- }
- else
- {
- // console.log('init');
- this.previousZoomedSN.fadeTo(this.config['unzoomTime'], 0, function()
- {
- _this.init();
- });
- }
-
+ }, this.config.unzoomTime, function()
+ {
+ //Après le dezoom, on indique qu'on a finit de dezoomer.
+ _this.neighboursIds.length = 0;
+ _this.currentlyUnzooming = false;
+ });
+
+ //Si l'utilisateur est là.
+ if(this.currentMode != 'NO-USER')
+ {
+ //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.
+ if(this.currentMode.indexOf("INCOMING") == -1 && !this.isMosaicFiltered)
+ {
+ $('.snapshotDivs').animate(
+ {
+ opacity: '1'
+ }, this.config.unzoomTime);
+ }
+ //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.
+ else if(this.currentMode.indexOf("INCOMING") == -1 && this.isMosaicFiltered)
+ {
+ for(var i = 0 ; i < this.config.imagesToShow ; i++)
+ {
+ $('#snapshotDiv-' + i).animate(
+ {
+ opacity: this.opacities[i]
+ }, this.config.unzoomTime);
+ }
+ }
+ }
+ //Si on est en mode sans utilisateur.
+ else
+ {
+ //On sélectionne un autre snapshot pour le jouer dans le player.
+ this.previousZoomedSN.fadeTo(this.config.unzoomTime, 0, function()
+ {
+ _this.init();
+ });
+ }
+
//On dézoom sur la mosaïque.
$('#mainPanel').animate(
{
@@ -545,40 +483,34 @@
height: mpHeight,
top: '0px',
left: '0px'
- }, this.config['unzoomTime'], function()
+ }, this.config.unzoomTime, function()
{
//On n'est plus en plein écran, et on ne peut plus se déplacer vers le prochain voisin.
_this.fullscreen = false;
_this.canMoveToNeighbour = false;
-
- if(_this.currentMode != 'NO-USER' && _this.currentMode.indexOf('INCOMING-') == -1)
- {
- if(_this.isMosaicFiltered)
- {
- //On revient en mode FILTER.
- _this.currentMode = 'FILTER';
- }
- else
- {
- //On revient en mode MOSAIC.
- _this.currentMode = 'MOSAIC';
- }
-
- //On ne permet plus le déplacement vers les voisins.
- /*$('.snapshotDivs').unbind('mouseover', function()
- {
- _this.selectNeighbour();
- });*/
-
- //On remet les notifications initiales si on n'est pas dans une recherche par filtrage.
- if(_this.currentMode == 'MOSAIC' && !_this.filterSearchedType)
- {
- _this.removeNotifications();
- // _this.notifySelectionSearchMosaicFull();
- _this.mosaicSelectionAndSearch();
- }
- }
-
- this.currentlyUnzooming = false;
+
+ //Si on est au point d'interaction maximal.
+ if(_this.currentMode != 'NO-USER' && _this.currentMode.indexOf('INCOMING-') == -1)
+ {
+ //Si la mosaique est filtrée, on revient en mode de filtrage, sinon en mode mosaic.
+ if(_this.isMosaicFiltered)
+ {
+ _this.currentMode = 'FILTER';
+ }
+ else
+ {
+ _this.currentMode = 'MOSAIC';
+ }
+
+ //On remet les notifications initiales si on n'est pas dans une recherche par filtrage.
+ if(_this.currentMode == 'MOSAIC' && !_this.filterSearchedType)
+ {
+ _this.removeNotifications();
+ _this.mosaicSelectionAndSearch();
+ }
+ }
+
+ //On indique qu'on est plus en dezoom.
+ this.currentlyUnzooming = false;
});
}
\ No newline at end of file