diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/mosaic/js/notifications.js
--- a/front_idill/src/mosaic/js/notifications.js Fri Jun 29 16:16:24 2012 +0200
+++ b/front_idill/src/mosaic/js/notifications.js Thu Jul 05 16:04:33 2012 +0200
@@ -5,366 +5,6 @@
=============================================== */
/*
- * Affiche la notification de sélection/recherche lorsque la mosaique est complète.
-*/
-mosaic.prototype.notifySelectionSearchMosaicFull = function()
-{
- if(this.currentMode != "MOSAIC" && this.currentMode != "FILTER" || this.isCurrentlyInASearchByGesture || $('#notify_selection').length > 0 || $('#notify_search').length > 0 || $('#notify_point').length > 0)
- {
- return;
- }
-
- console.log('NOTIFY SEL SEA');
-
- //On spécifie les notifications en div.
- var notification_selection = "";
- var notification_search = "";
-
- //On les ajoute à la mosaïque.
- $('#mainPanel').append(notification_selection + notification_search);
-
- //On calcule leurs coordonnées et dimensions.
- var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
- var notify_margin = parseInt($('.notifications').css('margin'));
- var selection_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2;
- var search_left = selection_left + notify_width + notify_margin;
-
- //On les positionne.
- $('#notify_selection').css(
- {
- left: selection_left
- });
- $('#notify_search').css(
- {
- left: search_left
- });
-
- //On les fait apparaître.
- $('.notifications').css(
- {
- opacity: "0.9"
- });
-}
-
-/*
- * Supprime la notification de sélection/recherche lorsque la mosaique est complète.
-*/
-mosaic.prototype.removeSelectionSearchMosaicFull = function()
-{
- if(this.isOnASnapshot)
- {
- // console.log('DEL SEL SEA');
- $('#notify_selection, #notify_search').remove();
- }
-}
-
-/*
- * Affiche la notification de maintient du pointage lors d'une phase de prézoom.
-*/
-mosaic.prototype.notifyPointMosaicPrezoom = function()
-{
- this.removeSelectionSearchMosaicFull();
- if($('#notify_point').length > 0 || $('#notify_search').length > 0 || this.currentMode != 'MOSAIC' && this.currentMode != 'FILTER' && !this.isOnASnapshot)
- {
- this.removePointMosaicPrezoom();
- return;
- }
-
- //On spécifie les notifications en div.
- var notification_point = "";
-
- //On les ajoute à la mosaïque.
- $('#mainPanel').append(notification_point);
-
- //On calcule leurs coordonnées et dimensions.
- var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
- var notify_margin = parseInt($('.notifications').css('margin'));
- var point_left = $(window).width() / 2 - (notify_width) / 2 - notify_margin;
-
- //On les positionne.
- $('#notify_point').css(
- {
- left: point_left
- });
-
- //On les fait apparaître.
- $('.notifications').css(
- {
- opacity: "0.9"
- });
-}
-
-/*
- * Supprime la notification de maintient du pointage.
-*/
-mosaic.prototype.removePointMosaicPrezoom = function()
-{
- //if(!this.isOnASnapshot)
- //{
- $('#notify_point').remove();
- //}
-}
-
-/*
- * Affiche la notification de recherche (qu'elle soit par gesture ou par courbes).
-*/
-mosaic.prototype.notifySearch = function()
-{
- /*this.removeSelectionSearchMosaicFull();
- if($('#notify_point').length > 0 || $('#notify_search').length > 0 || this.currentMode != 'MOSAIC' && this.currentMode != 'FILTER' && !this.isOnASnapshot)
- {
- //this.removeNotifySearch();
- //return;
- }*/
-
- if($('.notifications').length > 0)
- {
- $('.notifications').remove();
- }
-
- //On spécifie les notifications en div.
- var notification_search = "";
-
- //On les ajoute à la mosaïque.
- $('body').append(notification_search);
-
- //On calcule leurs coordonnées et dimensions.
- var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
- var notify_margin = parseInt($('.notifications').css('margin'));
- var point_left = $(window).width() / 2 - (notify_width) / 2 - notify_margin;
-
- //On les positionne.
- $('#notify_search').css(
- {
- left: point_left
- });
-
- //On les fait apparaître.
- $('.notifications').css(
- {
- opacity: "0.9"
- });
-}
-
-/*
- * Supprime la notification de maintient du pointage.
-*/
-mosaic.prototype.removeNotifySearch = function()
-{
- //if(!this.isOnASnapshot)
- //{
- //$('#notify_search').remove();
- //}
-}
-
-/*
- * Affiche la notification de changement de voisin et de dezoom.
-*/
-mosaic.prototype.notifyMoveUnzoom = function(targetId)
-{
- console.log('MOVE & UNZOOM');
-
- if($('.notifications').length > 0 || !this.neighboursIds || this.neighboursIds.length == 0 || targetId == -1 || this.currentMode != 'VIDEO' && this.currentMode != 'SEARCH' && this.currentMode != 'TIMELINE')
- {
- return;
- }
-
- console.log('NOT');
-
- var _this = this;
-
- //On spécifie les notifications en div.
- var notification_move_unzoom = "";
-
- //On les ajoute à la mosaïque.
- $('body').append(notification_move_unzoom);
-
- // console.log(this.player.config.gui.zoomTop + " " + this.player.config.gui.zoomLeft);
-
- //On calcule leurs coordonnées et dimensions.
- var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
- var notify_margin = parseInt($('.notifications').css('margin'));
- var point_left = $(window).width() / 2 - (notify_width) / 2 - notify_margin;
-
- var side = $.inArray(parseInt(targetId), this.neighboursIds);
- // console.log(this.neighboursIds, parseInt(targetId), side);
- if(side == -1)
- {
- return;
- }
-
- var sides = ['left', 'right', 'up', 'down'];
- var unzooms = ['horizontal', 'vertical'];
-
- // var notifyTop = this.notifyTopVideo, notifyLeft = this.notifyLeftVideo;
- var notifyTop = 0, notifyLeft = 0;
-
- //On les positionne.
- $('#notify_move').css(
- {
- top: -notifyTop,
- left: -notifyLeft + ($(window).width() - notify_width * 2 - notify_margin * 2) / 2,
- 'background-image': 'url(./pictos/notifications/move_' + sides[side] + '.png)'
- });
-
- $('#notify_unzoom').css(
- {
- top: -notifyTop,
- left: -notifyLeft + ($(window).width()) / 2,
- 'background-image': 'url(./pictos/notifications/unzoom_' + unzooms[Math.floor(side / 2)] + '.png)'
- });
-
- // console.log('url(./pictos/notifications/move_' + sides[side] + '.png)');
- // console.log($('#notify_move').css('background-image', 'url(./pictos/notifications/move_' + sides[side] + '.png)'));
- // console.log($('#notify_move').css('background-image'));
-
- //On les fait apparaître.
- $('.notifications').css(
- {
- opacity: "0.9"
- });
-}
-
-/*
- * Supprime la notification de recherche de gesture.
-*/
-mosaic.prototype.removeNotifyMoveUnzoom = function()
-{
- $('#notify_move').remove();
- $('#notify_unzoom').remove();
-}
-
-/*
- * Affiche la notification de dezoom.
-*/
-mosaic.prototype.notifyUnzoom = function(targetId)
-{
- console.log('UNZOOM');
-
- if($('.notifications').length > 0 || !this.neighboursIds || this.neighboursIds.length == 0 || targetId == -1 || this.currentMode != 'VIDEO' && this.currentMode != 'SEARCH' && this.currentMode != 'TIMELINE')
- {
- return;
- }
-
- console.log('NOT');
-
- var _this = this;
-
- //On spécifie les notifications en div.
- var notification_move_unzoom = "";
-
- //On les ajoute à la mosaïque.
- $('body').append(notification_move_unzoom);
-
- // console.log(this.player.config.gui.zoomTop + " " + this.player.config.gui.zoomLeft);
-
- //On calcule leurs coordonnées et dimensions.
- var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
- var notify_margin = parseInt($('.notifications').css('margin'));
- var point_left = $(window).width() / 2 - (notify_width) / 2 - notify_margin;
-
- var side = $.inArray(parseInt(targetId), this.neighboursIds);
- // console.log(this.neighboursIds, parseInt(targetId), side);
- if(side == -1)
- {
- return;
- }
-
- var sides = ['left', 'right', 'up', 'down'];
- var unzooms = ['horizontal', 'vertical'];
-
- // var notifyTop = this.notifyTopVideo, notifyLeft = this.notifyLeftVideo;
- var notifyTop = 0, notifyLeft = 0;
-
- //On les positionne.
- $('#notify_move').css(
- {
- top: -notifyTop,
- left: -notifyLeft + ($(window).width() - notify_width * 2 - notify_margin * 2) / 2,
- 'background-image': 'url(./pictos/notifications/move_' + sides[side] + '.png)'
- });
-
- $('#notify_unzoom').css(
- {
- top: -notifyTop,
- left: -notifyLeft + ($(window).width()) / 2,
- 'background-image': 'url(./pictos/notifications/unzoom_' + unzooms[Math.floor(side / 2)] + '.png)'
- });
-
- // console.log('url(./pictos/notifications/move_' + sides[side] + '.png)');
- // console.log($('#notify_move').css('background-image', 'url(./pictos/notifications/move_' + sides[side] + '.png)'));
- // console.log($('#notify_move').css('background-image'));
-
- //On les fait apparaître.
- $('.notifications').css(
- {
- opacity: "0.9"
- });
-}
-
-/*
- * Supprime la notification de dezoom.
-*/
-mosaic.prototype.removeNotifyUnzoom = function()
-{
- $('#notify_unzoom').remove();
-}
-
-/*
- * Affiche la notification de dezoom.
- * Direction vaut left ou right.
-*/
-mosaic.prototype.notifySwipe = function(direction)
-{
- console.log('TRY SWIPE');
-
- if($('.notifications').length > 0 || this.currentMode != 'VIDEO' && this.currentMode != 'SEARCH' && this.currentMode != 'TIMELINE' && !this.isSwipe)
- {
- return;
- }
-
- console.log('IN SWIPE');
-
- var _this = this;
-
- //On spécifie les notifications en div.
- var notification_swipe = "";
-
- //On les ajoute à la mosaïque.
- $('body').append(notification_swipe);
-
- //On calcule leurs coordonnées et dimensions.
- var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
- var notify_margin = parseInt($('.notifications').css('margin'));
- var point_left = $(window).width() / 2 - (notify_width) / 2 - notify_margin;
-
- // var notifyTop = this.notifyTopVideo, notifyLeft = this.notifyLeftVideo;
- var notifyTop = 0, notifyLeft = 0;
-
- //On les positionne.
- $('#notify_swipe').css(
- {
- top: -notifyTop,
- left: -notifyLeft + ($(window).width() - notify_width - notify_margin) / 2,
- 'background-image': 'url(./pictos/notifications/swipe_' + direction + '.png)'
- });
-
- //On les fait apparaître.
- $('.notifications').css(
- {
- opacity: "0.9"
- });
-}
-
-/*
- * Supprime la notification de dezoom.
-*/
-mosaic.prototype.removeNotifyUnzoom = function()
-{
- $('#notify_unzoom').remove();
-}
-
-/*
* Affiche l'aide.
*/
mosaic.prototype.notifyHelp = function(inMosaic)
@@ -835,9 +475,11 @@
var notify_margin = parseInt($('.notifications').css('margin'));
var point_left = $(window).width() / 2 - (notify_width) / 2 - notify_margin;
+ // console.log('url("./pictos/big/' + (this.mouseInteractions ? 'MI' : '') + '/' + mode + '/' + gestureName + '.png")');
+
if(_.include(this.gestures, gestureName))
{
- $('#notify_search_1gesture').css('background-image', 'url("./pictos/big/' + mode + '/' + gestureName + '.png")');
+ $('#notify_search_1gesture').css('background-image', 'url("./pictos/big/' + (this.mouseInteractions ? 'MI' : '') + '/' + (this.gestureDelRequested ? 'hover' : 'valid') + '/' + gestureName + '.png")');
}
else if(mode == 'none')
{
@@ -883,7 +525,7 @@
if(_.include(this.gestures, gestureName))
{
- $('#notify_search_1gesture').css('background-image', 'url("./pictos/big/' + mode + '/' + gestureName + '.png")');
+ $('#notify_search_1gesture').css('background-image', 'url("./pictos/big/' + (this.mouseInteractions ? 'MI' : '') + '/' + mode + '/' + gestureName + '.png")');
}
else if(mode == 'none')
{
@@ -950,6 +592,56 @@
}
/*
+ * Affichage de la notification de résultat de move vers un voisin.
+*/
+mosaic.prototype.videoMove = function(targetId)
+{
+ if(this.currentMode != 'VIDEO')
+ {
+ return;
+ }
+
+ var _this = this;
+
+ //On spécifie les notifications en div.
+ var notification_move = "";
+
+ //On les ajoute à la mosaïque.
+ $('body').append(notification_move);
+
+ //On calcule leurs coordonnées et dimensions.
+ var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
+ var notify_margin = parseInt($('.notifications').css('margin'));
+ var move_left = $(window).width() / 2 - (notify_width) / 2 + notify_margin;
+
+ var side = $.inArray(parseInt(targetId), this.neighboursIds);
+ // console.log(this.neighboursIds, parseInt(targetId), side);
+ if(side == -1)
+ {
+ return;
+ }
+
+ var sides = ['left', 'right', 'up', 'down'];
+
+ // var notifyTop = this.notifyTopVideo, notifyLeft = this.notifyLeftVideo;
+ var notifyTop = 0, notifyLeft = 0;
+
+ //On les positionne.
+ $('#notify_move').css(
+ {
+ top: -notifyTop,
+ left: -notifyLeft + move_left,
+ 'background-image': 'url(./pictos/notifications/move_' + sides[side] + '.png)'
+ });
+
+ //On les fait apparaître.
+ $('.notifications').css(
+ {
+ opacity: "0.9"
+ });
+}
+
+/*
* Affichage de la notification de résultat de move vers un voisin & de dézoom dans une vidéo.
*/
mosaic.prototype.videoMoveAndUnzoom = function(targetId)
@@ -1187,6 +879,60 @@
}
/*
+ * Affichage de la notification de recherche, de move vers un voisin.
+*/
+mosaic.prototype.searchSearchAndMove = function(targetId)
+{
+ if(this.currentMode != 'SEARCH' || this.isCurrentlyInASearchByGesture)
+ {
+ return;
+ }
+
+ //On spécifie les notifications en div.
+ var notification_search = "";
+ var notification_move = "";
+
+ //On les ajoute à la mosaïque.
+ $('body').append(notification_search + notification_move);
+
+ //On calcule leurs coordonnées et dimensions.
+ var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
+ var notify_margin = parseInt($('.notifications').css('margin'));
+ var search_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2;
+ var move_left = search_left + notify_width + notify_margin;
+
+ var side = $.inArray(parseInt(targetId), this.neighboursIds);
+
+ if(side == -1)
+ {
+ return;
+ }
+
+ var sides = ['left', 'right', 'up', 'down'];
+
+ var notifyTop = 0, notifyLeft = 0;
+
+ //On les positionne.
+ $('#notify_search').css(
+ {
+ top: -notifyTop,
+ left: -notifyLeft + search_left
+ });
+ $('#notify_move').css(
+ {
+ top: -notifyTop,
+ left: -notifyLeft + move_left,
+ 'background-image': 'url(./pictos/notifications/move_' + sides[side] + '.png)'
+ });
+
+ //On les fait apparaître.
+ $('.notifications').css(
+ {
+ opacity: "0.9"
+ });
+}
+
+/*
* Affichage de la notification de recherche, de move vers un voisin & de dézoom dans une vidéo de recherche.
*/
mosaic.prototype.searchSearchAndMoveAndUnzoom = function(targetId)
@@ -1335,7 +1081,7 @@
if(_.include(this.gestures, gestureName))
{
- $('#notify_search_1gesture').css('background-image', 'url("./pictos/big/' + mode + '/' + gestureName + '.png")');
+ $('#notify_search_1gesture').css('background-image', 'url("./pictos/big/' + (this.mouseInteractions ? 'MI/' : '') + mode + '/' + gestureName + '.png")');
}
else if(mode == 'none')
{
@@ -1385,7 +1131,7 @@
if(_.include(this.gestures, gestureName))
{
- $('#notify_search_1gesture').css('background-image', 'url("./pictos/big/' + mode + '/' + gestureName + '.png")');
+ $('#notify_search_1gesture').css('background-image', 'url("./pictos/big/' + (this.mouseInteractions ? 'MI/' : '') + mode + '/' + gestureName + '.png")');
}
else if(mode == 'none')
{
@@ -1411,6 +1157,69 @@
}
/*
+ * Affichage de la notification de résultat, de move vers un voisin.
+*/
+mosaic.prototype.searchGestureAndMove = function(gestureName, mode, targetId)
+{
+ if(this.currentMode != 'SEARCH' || !this.isCurrentlyInASearchByGesture)
+ {
+ return;
+ }
+
+ var _this = this;
+
+ //On spécifie les notifications en div.
+ var notification_search_1gesture = "";
+ var notification_move = "";
+
+ //On les ajoute à la mosaïque.
+ $('body').append(notification_search_1gesture + notification_move);
+
+ // console.log(this.player.config.gui.zoomTop + " " + this.player.config.gui.zoomLeft);
+
+ //On calcule leurs coordonnées et dimensions.
+ var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
+ var notify_margin = parseInt($('.notifications').css('margin'));
+ var search_1gesture_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2;
+ var move_left = search_1gesture_left + notify_width + notify_margin;
+
+ if(_.include(this.gestures, gestureName))
+ {
+ $('#notify_search_1gesture').css('background-image', 'url("./pictos/big/' + (this.mouseInteractions ? 'MI/' : '') + mode + '/' + gestureName + '.png")');
+ }
+ else if(mode == 'none')
+ {
+ $('#notify_search_1gesture').css('background-image', 'url("./pictos/big/normal/inconnu.png")');
+ }
+
+ var side = $.inArray(parseInt(targetId), this.neighboursIds);
+
+ if(side == -1)
+ {
+ return;
+ }
+
+ var sides = ['left', 'right', 'up', 'down'];
+
+ //On les positionne.
+ $('#notify_search_1gesture').css(
+ {
+ left: search_1gesture_left
+ });
+ $('#notify_move').css(
+ {
+ left: move_left,
+ 'background-image': 'url(./pictos/notifications/move_' + sides[side] + '.png)'
+ });
+
+ //On les fait apparaître.
+ $('.notifications').css(
+ {
+ opacity: "0.9"
+ });
+}
+
+/*
* Affichage de la notification de résultat, de move vers un voisin & de dézoom dans une vidéo de recherche.
*/
mosaic.prototype.searchGestureAndMoveAndUnzoom = function(gestureName, mode, targetId)
@@ -1441,7 +1250,7 @@
if(_.include(this.gestures, gestureName))
{
- $('#notify_search_1gesture').css('background-image', 'url("./pictos/big/' + mode + '/' + gestureName + '.png")');
+ $('#notify_search_1gesture').css('background-image', 'url("./pictos/big/' + (this.mouseInteractions ? 'MI/' : '') + mode + '/' + gestureName + '.png")');
}
else if(mode == 'none')
{
@@ -1484,7 +1293,7 @@
/*
* Affichage de la notification de résultat & de dézoom dans une vidéo de recherche.
*/
-mosaic.prototype.searchGestureAndUnzoom = function()
+mosaic.prototype.searchGestureAndUnzoom = function(gestureName, mode, targetId)
{
if(this.currentMode != 'SEARCH' || !this.isCurrentlyInASearchByGesture)
{
@@ -1510,13 +1319,22 @@
if(_.include(this.gestures, gestureName))
{
- $('#notify_search_1gesture').css('background-image', 'url("./pictos/big/' + mode + '/' + gestureName + '.png")');
+ $('#notify_search_1gesture').css('background-image', 'url("./pictos/big/' + (this.mouseInteractions ? 'MI/' : '') + mode + '/' + gestureName + '.png")');
}
else if(mode == 'none')
{
$('#notify_search_1gesture').css('background-image', 'url("./pictos/big/normal/inconnu.png")');
}
+ var side = $.inArray(parseInt(targetId), this.neighboursIds);
+
+ if(side == -1)
+ {
+ return;
+ }
+
+ var unzooms = ['horizontal', 'vertical'];
+
//On les positionne.
$('#notify_search_1gesture').css(
{
@@ -1524,7 +1342,8 @@
});
$('#notify_unzoom').css(
{
- left: unzoom_left
+ left: unzoom_left,
+ 'background-image': 'url(./pictos/notifications/unzoom_' + unzooms[Math.floor(side / 2)] + '.png)'
});
//On les fait apparaître.
@@ -1532,4 +1351,76 @@
{
opacity: "0.9"
});
+}
+
+/*
+ * Affichage des notifications de gestures trouvées dans une recherche par courbes.
+*/
+mosaic.prototype.curvesGestures = function(gestures)
+{
+ //S'il n'y a pas de gestures à afficher.
+ if(gestures.length == 0)
+ {
+ console.log('NONE');
+ //On ajoute une seule notification.
+ var notification_curves = "";
+ $('body').append(notification_curves);
+
+ //On calcule leurs dimensions et coordonnées.
+ var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
+ var notify_margin = parseInt($('.notifications').css('margin'));
+ var curves_left = $(window).width() / 2 - (notify_width + notify_margin * 2) / 2;
+
+ $('#notify_curves').css(
+ {
+ left: curves_left,
+ 'background-image': 'url("./pictos/big/normal/inconnu.png")',
+ opacity: '0.9'
+ });
+ return;
+ }
+
+ //Sinon, on les met dans un tableau.
+ var gestures_tab = gestures.split(';');
+
+ var notifications_curves_gestures = '';
+
+ //On crée autant de notifications qu'il y a de gestures.
+ for(var i = 0 ; i < gestures_tab.length ; i++)
+ {
+ notifications_curves_gestures += "";
+ }
+
+ //On les ajoute à la mosaïque.
+ $('body').append(notifications_curves_gestures);
+
+ //On calcule leurs dimensions.
+ var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
+ var notify_margin = parseInt($('.notifications').css('margin'));
+ var curves_gestures_left = [];
+
+ //On calcule leurs dimensions et leur backgrounds.
+ curves_gestures_left[0] = $(window).width() / 2 - (notify_width * (gestures_tab.length) + notify_margin * (gestures_tab.length + 2)) / 2;
+
+ for(var i = 0 ; i < gestures_tab.length ; i++)
+ {
+ //On va chercher leurs backgrounds.
+ $('#notify_curves_' + gestures_tab[i]).css('background-image', 'url("./pictos/big/' + (this.mouseInteractions ? 'MI/' : '') + 'normal/' + gestures_tab[i] + '.png")');
+ // console.log('url("./pictos/big/MI/normal/' + gestures_tab[i] + '.png")');
+
+ //On calcule leurs coordonnées.
+ if(i+1 < gestures_tab.length)
+ {
+ curves_gestures_left[i+1] = curves_gestures_left[i] + notify_width + notify_margin * 2;
+ }
+
+ //On les place.
+ $('#notify_curves_' + gestures_tab[i]).css('left', curves_gestures_left[i]);
+ }
+
+ //On les fait apparaître.
+ $('.notifications').css(
+ {
+ opacity: "0.9"
+ });
}
\ No newline at end of file