diff -r eae52b187e29 -r 205409da0f32 front_idill/src/mosaic/js/touchInteractions.js --- /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 +* +* 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