--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/front_idill/src/mosaic/js/touchInteractions.js Wed Aug 08 18:40:40 2012 +0200
@@ -0,0 +1,316 @@
+/*
+* 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 : touchInteractions.js
+ *
+ * Auteur : alexandre.bastien@iri.centrepompidou.fr
+ *
+ * Fonctionnalités : Définit les fonctions d'intéraction pour tablettes.
+ */
+
+/*
+ * Fonction appelée lors d'un touch start en mode d'interaction touch.
+ * Est appelé dans le fichier :
+ * mosaic > fonction loadMosaic, attachée à l'événement ontouchstart.
+*/
+Mosaic.prototype.onTouchStart = function(e)
+{
+ this.isTouchStart = true;
+ this.isTouchMove = false;
+
+ //Si on est sur l'icone de sortie.
+ if(this.isOnExitIcon(e.pageX, e.pageY) && this.helpDisplayed)
+ {
+ //On ferme l'aide.
+ this.removeExitIcon();
+ this.removeHelp();
+ }
+
+ //Si on est sur l'icone de retour à la mosaïque.
+ if(this.isOnHomeIcon(e.pageX, e.pageY) && !this.helpDisplayed)
+ {
+ //On dézoom.
+ this.unzoom();
+ }
+
+ //Si on se trouve sur l'icone d'aide et qu'elle est zoomée.
+ if(this.isOnHelpIcon(e.pageX, e.pageY) && !this.helpDisplayed)
+ {
+ //On affiche différentes aides en fonction de si on se trouve dans une vidéo ou non.
+ if(this.currentMode == 'SEARCH' || this.currentMode == 'VIDEO' || this.currentMode == 'TIMELINE')
+ {
+ this.notifyHelp(false);
+ }
+ else if(this.currentMode == 'FILTER' || this.currentMode == 'MOSAIC')
+ {
+ this.notifyHelp(true);
+ }
+ }
+
+ //Si on est dans une vidéo.
+ if(this.currentMode == 'VIDEO' || this.currentMode == 'SEARCH')
+ {
+ //On regarde si on a touché un snapshot.
+ var snapshot = this.positionToSN(e.pageX - this.notifyLeftVideo, e.pageY - this.notifyTopVideo);
+
+ if(snapshot && !this.isOnSearchNotification(e.pageX, e.pageY) && !this.isOnSearchExitIcon(e.pageX, e.pageY))
+ {
+ this.canMoveToNeighbour = true;
+ var id = snapshot.attr('id').replace('snapshotDiv-', '');
+ this.correctMoveToNeighbour(id, e.pageX - this.notifyLeftVideo, e.pageY - this.notifyTopVideo);
+ this.canMoveToNeighbour = false;
+ }
+ }
+
+ //Si on est sur l'icone de sortie de recherche.
+ if(this.isOnSearchExitIcon(e.pageX, e.pageY) && !this.helpDisplayed)
+ {
+ //On ferme l'aide.
+ this.removeSearchExitIcon();
+
+ this.removeNotifications();
+ if(this.currentMode == 'SEARCH')
+ {
+ this.player.widgets[0].removeSearchByGesture();
+ this.currentMode = 'VIDEO';
+ this.currentSearchGesture[this.centerId] = '';
+ }
+ else if(this.currentMode == 'TIMELINE')
+ {
+ this.player.widgets[0].removeSearchByGesture();
+ this.currentMode = 'TIMELINE';
+ this.currentSearchGesture[this.centerId] = '';
+ }
+ else if(this.currentMode == 'FILTER')
+ {
+ this.removeFilter();
+ }
+
+ this.alreadyOnNotification = false;
+ this.isCurrentlyInASearchByGesture = false;
+ this.curvesGesturesFound = false;
+ this.canDrawNextCurve = false;
+ this.isSearchByCurvesOn = false;
+ this.canNotifyHelp = false;
+ }
+
+ //On met à jour les coordonnées de la souris au dernier mouse down.
+ this.mouseDownPosX = e.pageX;
+ this.mouseDownPosY = e.pageY;
+ this.mousePosX = e.pageX;
+ this.mousePosY = e.pageY;
+
+ this.isUserInSearchZone = true;
+
+ //Si on est en mode de tracé de courbes, on indique qu'on a commencé à tracer au canvas.
+ if(this.isSearchByCurvesOn)
+ {
+ this.searchCanvas.onPointerIn(this.mousePosX, this.mousePosY, null, null);
+ }
+}
+
+/*
+ * Fonction appelée lors d'un touch move en mode d'interaction touch.
+ * Est appelé dans le fichier :
+ * mosaic > fonction loadMosaic, attachée à l'événement jQuery ontouchmove.
+*/
+Mosaic.prototype.onTouchMove = function(e)
+{
+ //Si on n'a pas appuyé sur la souris avant, on part.
+ if(!this.isTouchStart)
+ {
+ return;
+ }
+
+ var _this = this;
+
+ //Si on est en mode de tracé de courbes, on met à jour la courbe.
+ if(this.isSearchByCurvesOn)
+ {
+ this.searchCanvas.onPointerMove(this.mousePosX, this.mousePosY - this.MPTop_margin, null, null);
+ }
+
+ //On met à jour l'ancienne position du doigt si elle est nulle.
+ if(!this.mousePosLastX && this.mousePosLastX != 0)
+ {
+ this.mousePosLastX = this.mousePosX;
+ }
+ if(!this.mousePosLastY && this.mousePosLastY != 0)
+ {
+ this.mousePosLastY = this.mousePosY;
+ }
+
+ //Le delta s'accroît si le doigt bouge.
+ this.touchUpDownDelta += Math.floor(Math.sqrt((this.mousePosLastX - e.pageX) * (this.mousePosLastX - e.pageX) + (this.mousePosLastY - e.pageY) * (this.mousePosLastY - e.pageY)));
+
+ //On met à jour l'ancienne position du doigt.
+ if(this.mousePosLastX != this.mousePosX)
+ {
+ this.mousePosLastX = this.mousePosX;
+ }
+ if(this.mousePosLastY != this.mousePosY)
+ {
+ this.mousePosLastY = this.mousePosY;
+ }
+
+ //Si le doigt a parcouru une trop grande distance, on entre en recherche.
+ if(this.touchUpDownDelta > this.config.touchUpDownDeltaTreshold)
+ {
+ this.isTouchMove = true;
+ //Si on est en mosaique, on entre en filtrage.
+ if(this.currentMode == "MOSAIC")
+ {
+ this.currentMode = "FILTER";
+ this.isMosaicFiltered = true;
+ }
+ //Si on est dans une vidéo, on entre en recherche.
+ else if(this.currentMode == "VIDEO" || this.currentMode == "TIMELINE")
+ {
+ this.currentMode = "SEARCH";
+ }
+
+ if(!this.isSearchByCurvesOn)
+ {
+ this.isSearchByCurvesOn = true;
+ this.startSearch();
+ this.searchCanvas.onPointerIn(this.mousePosX, this.mousePosY - this.MPTop_margin, null, null);
+ }
+ }
+}
+
+/*
+ * Fonction appelée lors d'un touch end en mode d'interaction touch.
+ * Est appelé dans le fichier :
+ * mosaic > fonction loadMosaic, attachée à l'événement jQuery ontouchend.
+*/
+Mosaic.prototype.onTouchEnd = function(e)
+{
+ // alert(this.mousePosX + ' ' + this.mousePosY);
+ //Si on est dans la mosaïque.
+ if(this.currentMode == 'MOSAIC' || this.currentMode == 'FILTER')
+ {
+ //On regarde si on a touché un snapshot.
+ var snapshot = this.positionToSN(this.mousePosX, this.mousePosY);
+ // alert(snapshot);
+ // alert(this.isTouchMove);
+ if(snapshot && !this.isTouchMove)
+ {
+ this.previousZoomedSN = snapshot;
+ this.previousId = snapshot.attr('id');
+ this.zoom();
+ }
+ }
+ //Sinon si on est dans une video.
+ else if(this.currentMode == 'VIDEO' || this.currentMode == 'SEARCH' || this.currentMode == 'TIMELINE')
+ {
+ // console.log(this.isTLSelected(true, null));
+ }
+
+ this.isTouchStart = false;
+
+ //Si on était en train de tracer une courbe.
+ if(this.isSearchByCurvesOn)
+ {
+ //On dit au module de recherche qu'on arrête de tracer des courbes.
+ this.searchCanvas.onPointerOut();
+ }
+
+ this.mousePosLastX = null;
+ this.mousePosLastY = null;
+
+ //Si la distance parcourue par la souris entre le mouse down et le mouse up est inférieure ou égale au seuil.
+ if(this.touchUpDownDelta <= this.config.touchUpDownDeltaTreshold)
+ {
+ //Si on est sur un snapshot prézoomé.
+ if(this.isOnAPrezoomSN && this.previousZoomedSN != '' && (this.currentMode == 'MOSAIC' || this.currentMode == 'FILTER') && !this.isPrezooming)
+ {
+ this.zoom();
+ }
+ }
+
+ //On réinitialise le delta, on quitte la recherche par courbes.
+ this.touchUpDownDelta = 0;
+ this.isSearchByCurvesOn = false;
+ this.leaveSearch();
+
+ //Si on est en mode de filtrage et qu'on a une gesture de filtrage trouvée.
+ if(this.currentMode == 'FILTER' && this.filterSearchedType != '')
+ {
+ //On notifie.
+ this.removeNotifications();
+ this.filterGesture(this.filterSearchedType, 'valid');
+ }
+ this.isTouchMove = false;
+}
+
+/*
+ * Donne éventuellement un snapshot d'après les coordonnées passées en paramètres.
+ * Renvoie null sinon.
+*/
+Mosaic.prototype.positionToSN = function(x, y)
+{
+ if(this.helpDisplayed)
+ {
+ return;
+ }
+
+ //Taille de la marge des snapshots.
+ var m = parseInt($('.snapshotDivs').css('margin-left'));
+
+ //Dimensions d'un snapshot de la mosaïque.
+ var W = $('.snapshotDivs').width() + m * 2, H = $('.snapshotDivs').height() + m * 2;
+
+ //Position supposée du snapshot dans la mosaïque.
+ //Au départ on ne sélectionne rien.
+ var i = -1, j = -1;
+
+ //Espace de centrage vertical de la mosaïque.
+ var top_margin = parseInt(this.MPTop_margin);
+ //Dimensions de la mosaïque en nombre de snapshots.
+ var mosW = this.config.imagesByLine, mosH = this.config.imagesToShow / mosW;
+
+ //Si le pointeur se trouve au niveau de la mosaïque.
+ if(x < W * mosW && y >= top_margin && y < H * mosH + top_margin)
+ {
+ //Si le pointeur est sur une des bordures.
+ var xb = x % W;
+ var yb = y - top_margin;
+ yb %= H;
+
+ if(xb < m || xb > W - m || yb < m || yb > H - m)
+ {
+ //On renvoie null.
+ return null;
+ }
+ //Sinon il est forcément sur un des snapshots.
+ else
+ {
+ i = Math.floor(x / W);
+ j = Math.floor((y - top_margin) / H);
+ }
+
+ //On passe des coordonnées 2D en 1D.
+ var snapshot = $('#snapshotDiv-' + (j * mosW + i));
+
+ //Si le snapshot a été filtré, on renvoie null si on se trouve dans la mosaïque.
+ if(this.isMosaicFiltered && (this.currentMode == "MOSAIC" || this.currentMode == "FILTER") && snapshot.css('opacity') == 0)
+ {
+ return null;
+ }
+
+ //On renvoie le snapshot.
+ return snapshot;
+ }
+
+ //Si on est arrivé là, c'est que le pointeur n'est pas dans la mosaïque.
+ return null;
+}
\ No newline at end of file