--- a/front_idill/src/mosaic/js/notifications.js Mon Jul 23 10:52:41 2012 +0200
+++ b/front_idill/src/mosaic/js/notifications.js Mon Jul 23 16:59:35 2012 +0200
@@ -1,1455 +1,1494 @@
-/* ===============================================
- * *
- * ZONE DES NOTIFICATIONS *
- * *
- =============================================== */
+/*
+* 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 : notifications.js
+ *
+ * Auteur : alexandre.bastien@iri.centrepompidou.fr
+ *
+ * Fonctionnalités : Définit les fonctions de notification (images apparaissant en haut de la fenêtre).
+ */
/*
* Affiche l'aide.
+ * Est appelé dans les fichiers :
+ * mosaic > fonction manageControlEvents.
+ * curvesDetector > fonction updateDists.
*/
-mosaic.prototype.notifyHelp = function(inMosaic)
+Mosaic.prototype.notifyHelp = function(inMosaic)
{
- if(this.helpDisplayed)
- {
- return;
- }
-
- console.log('HELP DISPLAYED');
-
- this.removeNotifications();
-
- this.helpDisplayed = true;
-
- var search_2hands_tab;
- var search_2hands_tab_opacities;
- var search_body_tab;
- var search_body_tab_opacities;
- var controls_1hand_tab;
- var controls_1hand_tab;
- var controls_1hand_tab_opacities;
- var controls_1hand_tab_opacities;
-
- var img_directory = './pictos/help/';
-
- if(this.mouseInteractions)
- {
- search_2hands_tab = ['arret', 'contact', 'grandjete', 'group_spin', 'port_de_bras', 'spin', 'up_down', 'wave', 'chute', 'knee_up', 'jump', 'bend'];
- search_2hands_tab_opacities = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
- }
- else
- {
- search_2hands_tab = ['arret', 'contact', 'grandjete', 'group_spin', 'port_de_bras', 'spin', 'up_down', 'wave'];
- search_body_tab = ['chute', 'knee_up', 'jump', 'bend'];
- search_2hands_tab_opacities = [0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5];
- search_body_tab_opacities = [1, 1, 1, 1];
- }
-
- if(inMosaic)
- {
- controls_1hand_tab = ['selection'];
- controls_1hand_tab_opacities = [1];
- }
- else
- {
- controls_1hand_tab = ['deplacer', 'precedent', 'suivant', 'mosaique_horizontal', 'mosaique_vertical', 'move_down', 'move_up', 'move_right', 'move_left'];
- controls_1hand_tab_opacities = [1, 1, 1, 1, 1, 1, 1, 1, 1];
- }
-
- //On spécifie les notifications en div.
- var search_title = "<div id='search_title'></div>";
- var search_img = "<div id='search_img' class='notify_imgs'></div>";
- var search_2hands_text = "<div id='search_2hands_text'></div>";
- var search_2hands_imgs = "<div id='search_2hands_imgs' class='notify_imgs_big'>";
-
- for(var i = 0 ; i < search_2hands_tab.length ; i++)
- {
- search_2hands_imgs += "<div id='2hands_" + search_2hands_tab[i] + "' class='notify_imgs_small' style='opacity: " + search_2hands_tab_opacities[i] + ";'></div>";
- }
- search_2hands_imgs += "</div>";
-
- var search_body_text;
- var search_body_imgs;
-
- if(!this.mouseInteractions)
- {
- search_body_text = "<div id='search_body_text'></div>";
- search_body_imgs = "<div id='search_body_imgs' class='notify_imgs'>"
-
- for(var i = 0 ; i < search_body_tab.length ; i++)
- {
- search_body_imgs += "<div id='body_" + search_body_tab[i] + "' class='notify_imgs_small' style='opacity: " + search_body_tab_opacities[i] + ";'></div>";
- }
- search_body_imgs += "</div>";
- }
-
- var controls_title = "<div id='controls_title'></div>";
- var controls_img = "<div id='controls_img' class='notify_imgs'></div>";
- var controls_1hand_text = "<div id='controls_1hand_text'></div>";
- var controls_1hand_imgs;
- var controls_1hand_imgs;
-
- controls_1hand_imgs = "<div id='controls_1hand_imgs' class='notify_imgs'>";
- for(var i = 0 ; i < controls_1hand_tab.length ; i++)
- {
- controls_1hand_imgs += "<div id='1hand_" + controls_1hand_tab[i] + "' class='notify_imgs_small' style='opacity: " + controls_1hand_tab_opacities[i] + ";'></div>";
- }
- controls_1hand_imgs += "</div>";
-
- var help_search;
-
- if(this.mouseInteractions)
- {
- help_search = "<div id='help_search'>" + search_title + search_img + search_2hands_text + search_2hands_imgs + "</div>";
- }
- else
- {
- help_search = "<div id='help_search'>" + search_title + search_img + search_2hands_text + search_2hands_imgs + search_body_text + search_body_imgs + "</div>";
- }
- var help_controls;
+ //Si elle est déjà affichée on quitte.
+ if(this.helpDisplayed)
+ {
+ return;
+ }
+
+ //On enlève les autres notifications.
+ this.removeNotifications();
+
+ //On indique qu'elle est affiché.
+ this.helpDisplayed = true;
+
+ //Section des courbes de recherche.
+ var search_2hands_tab;
+ //Section des recherches corporelles.
+ var search_body_tab;
+ //Section des actions de contrôle sur l'interface.
+ var controls_1hand_tab;
+ //Opacités (indique si elles sont actuellement implémentées).
+ var search_2hands_tab_opacities;
+ var search_body_tab_opacities;
+ var controls_1hand_tab_opacities;
+ var controls_1hand_tab_opacities;
+
+ //Dossier contenant les images.
+ var img_directory = './pictos/help/';
+
+ //Si on est en mode d'intéraction souris, la recherche corporelle se fait par des courbes. On les regroupes donc dans la section des courbes.
+ if(this.config.mouseInteractions)
+ {
+ search_2hands_tab = ['arret', 'contact', 'grandjete', 'group_spin', 'port_de_bras', 'spin', 'up_down', 'wave', 'chute', 'knee_up', 'jump', 'bend'];
+ search_2hands_tab_opacities = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
+ }
+ else
+ {
+ search_2hands_tab = ['arret', 'contact', 'grandjete', 'group_spin', 'port_de_bras', 'spin', 'up_down', 'wave'];
+ search_body_tab = ['chute', 'knee_up', 'jump', 'bend'];
+ search_2hands_tab_opacities = [0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5];
+ search_body_tab_opacities = [1, 1, 1, 1];
+ }
+
+ //Dans la mosaique, on ne peut que sélectionner un snapshot.
+ if(inMosaic)
+ {
+ controls_1hand_tab = ['selection'];
+ controls_1hand_tab_opacities = [1];
+ }
+ //Dans une vidéo, on peut aller d'un voisin à l'autre, bouger dans la timeline, dézoomer et swiper d'un marqueur à l'autre.
+ else
+ {
+ controls_1hand_tab = ['deplacer', 'precedent', 'suivant', 'mosaique_horizontal', 'mosaique_vertical', 'move_down', 'move_up', 'move_right', 'move_left'];
+ controls_1hand_tab_opacities = [1, 1, 1, 1, 1, 1, 1, 1, 1];
+ }
+
+ //Colonne de recherche.
+ //Titre de la colonne de recherche.
+ var search_title = "<div id='search_title'></div>";
+ //Image de la colonne.
+ var search_img = "<div id='search_img' class='notify_imgs'></div>";
+ //Sous-titre.
+ var search_2hands_text = "<div id='search_2hands_text'></div>";
+ //Images de recherche par courbes.
+ var search_2hands_imgs = "<div id='search_2hands_imgs' class='notify_imgs_big'>";
+
+ //On crée les images.
+ for(var i = 0 ; i < search_2hands_tab.length ; i++)
+ {
+ search_2hands_imgs += "<div id='2hands_" + search_2hands_tab[i] + "' class='notify_imgs_small' style='opacity: " + search_2hands_tab_opacities[i] + ";'></div>";
+ }
+ search_2hands_imgs += "</div>";
+
+ //Sous-titre de la zone de recherche corporelle.
+ var search_body_text;
+ //Images de recherche corporelle.
+ var search_body_imgs;
+
+ //Si on est en mode Kinect.
+ if(!this.config.mouseInteractions)
+ {
+ //On crée le texte et les images de la recherche corporelle.
+ search_body_text = "<div id='search_body_text'></div>";
+ search_body_imgs = "<div id='search_body_imgs' class='notify_imgs'>"
+
+ for(var i = 0 ; i < search_body_tab.length ; i++)
+ {
+ search_body_imgs += "<div id='body_" + search_body_tab[i] + "' class='notify_imgs_small' style='opacity: " + search_body_tab_opacities[i] + ";'></div>";
+ }
+ search_body_imgs += "</div>";
+ }
+
+ //Titre de la colonne des actions de contrôle.
+ var controls_title = "<div id='controls_title'></div>";
+ //Image de la colonne.
+ var controls_img = "<div id='controls_img' class='notify_imgs'></div>";
+ //Sous-titre de la zone de contrôle de l'interface.
+ var controls_1hand_text = "<div id='controls_1hand_text'></div>";
+ //Images des actions de contrôle de l'interface.
+ var controls_1hand_imgs;
+
+ controls_1hand_imgs = "<div id='controls_1hand_imgs' class='notify_imgs'>";
+ for(var i = 0 ; i < controls_1hand_tab.length ; i++)
+ {
+ controls_1hand_imgs += "<div id='1hand_" + controls_1hand_tab[i] + "' class='notify_imgs_small' style='opacity: " + controls_1hand_tab_opacities[i] + ";'></div>";
+ }
+ controls_1hand_imgs += "</div>";
+
+ //Colonne de recherche du panneau d'aide.
+ var help_search;
+
+ //Dans le mode d'intéraction souris, les gestures de recherche corporelles ont été intégrées aux courbes.
+ if(this.config.mouseInteractions)
+ {
+ help_search = "<div id='help_search'>" + search_title + search_img + search_2hands_text + search_2hands_imgs + "</div>";
+ }
+ else
+ {
+ help_search = "<div id='help_search'>" + search_title + search_img + search_2hands_text + search_2hands_imgs + search_body_text + search_body_imgs + "</div>";
+ }
+
+ //Colonne de contrôle du panneau d'aide.
+ var help_controls;
- help_controls = "<div id='help_controls'>" + controls_title + controls_img + controls_1hand_text + controls_1hand_imgs + "</div>";
-
- var notification_help = "<div id='notify_help'>" + help_search + "<div id='help_sep'></div>" + help_controls + "</div>";
-
- //On les ajoute à la mosaïque.
- $('body').append(notification_help);
-
- //On calcule leurs coordonnées et dimensions.
- var notify_width = $(window).width(), notify_height = $(window).height();
- var notify_margin = parseInt($('#notify_help').css('margin'));
- var notify_ = 10;
-
- //On les positionne.
- $('#notify_help').css(
- {
- left: "0px",
- top: "0px",
- width: notify_width - notify_margin * 2,
- height: notify_height - notify_margin * 2,
- 'z-index': 2000
- });
-
- // console.log(($('#help_search').width() - ($('.notify_imgs_small').width() * 5 + parseInt($('.notify_imgs_small').css('margin')))) / 2);
-
- var margins = parseInt($('.notify_imgs_small').css('margin'));
- var widths = $('.notify_imgs_small').width();
- var heights = $('.notify_imgs_small').height();
-
- var sep_left = $('#help_sep').position().left;
- var help_margin = parseInt($('#notify_help').css('margin'));
-
- //On calcule la taille d'une zone de recherche (une des deux parties).
- var help_column_width = sep_left - help_margin;
- //Longueur d'une image.
- var img_width = (margins * 2 + widths);
- //Longueur totale des images de recherche à deux mains mises bout à bout.
- // var search_2hands_total_width = search_2hands_tab.length * img_width;
-
- //On récupère le nombre d'images affichables horizontalement pour les gestures de recherche à deux mains dans une des parties de l'aide.
- var search_2hands_n_imgs = Math.floor(help_column_width / img_width);
- //Calcul du padding-left de cette section.
- var search_2hands_padding_left = (help_column_width - search_2hands_n_imgs * img_width) / 2;
-
- $('#search_2hands_imgs').css(
- {
- // 'padding-left': ($('#help_search').width() - ($('.notify_imgs_small').width() * 5 + parseInt($('.notify_imgs_small').css('margin')))) / 2,
- 'padding-left': search_2hands_padding_left,
- 'height': ($('.notify_imgs_small').height() * 2 + parseInt($('.notify_imgs_small').css('margin')))
- });
-
- //On récupère le nombre d'images affichables horizontalement pour les gestures de recherche corporelles dans une des parties de l'aide.
- var search_body_n_imgs = Math.floor(help_column_width / img_width);
- //Calcul du padding-left de cette section.
- var search_body_padding_left = (help_column_width - search_body_n_imgs * img_width) / 2;
-
- $('#search_body_imgs').css(
- {
- // 'padding-left': ($('#help_search').width() - ($('.notify_imgs_small').width() * 4 + parseInt($('.notify_imgs_small').css('margin')))) / 2,
- 'padding-left': search_body_padding_left,
- 'height': ($('.notify_imgs_small').height() * 2 + parseInt($('.notify_imgs_small').css('margin')))
- });
-
- //On récupère le nombre d'images affichables horizontalement pour les gestures de controle dans une des parties de l'aide.
- var controls_1hand_n_imgs = Math.floor(help_column_width / img_width);
- //Calcul du padding-left de cette section.
- var controls_1hand_padding_left = (help_column_width - controls_1hand_n_imgs * img_width) / 2;
-
- $('#controls_1hand_imgs').css(
- {
- // 'padding-left': ($('#help_controls').width() - ($('.notify_imgs_small').width())) / 2,
- 'padding-left': controls_1hand_padding_left,
- 'height': ($('.notify_imgs_small').height())
- });
-
- var search_width = $('#help_search').width();
-
- $('#search_title').html('Recherche');
-
- if(this.mouseInteractions)
- {
- $('#search_2hands_text').html('Courbes à effectuer avec la souris');
- }
- else
- {
- $('#search_2hands_text').html('Gestes à effectuer avec les deux mains');
- }
-
- for(var i = 0 ; i < search_2hands_tab.length ; i++)
- {
- $("#2hands_" + search_2hands_tab[i]).css("background-image", "url('" + img_directory + 'MI/' + search_2hands_tab[i] + ".png')");
- //console.log("url('../../pictos/help/" + search_2hands_tab[i] + ".png')");
- }
-
- if(!this.mouseInteractions)
- {
- $('#search_body_text').html('Gestes à effectuer avec le corps entier');
-
- for(var i = 0 ; i < search_body_tab.length ; i++)
- {
- $("#body_" + search_body_tab[i]).css("background-image", "url('" + img_directory + search_body_tab[i] + ".png')");
- //console.log("url('../../pictos/help/" + search_2hands_tab[i] + ".png')");
- }
- }
-
- $('#controls_title').html('Contrôles');
- $('#controls_1hand_text').html('Gestes à effectuer avec une seule main');
-
- for(var i = 0 ; i < controls_1hand_tab.length ; i++)
- {
- $("#1hand_" + controls_1hand_tab[i]).css("background-image", "url('" + img_directory + controls_1hand_tab[i] + ".png')");
- }
-
- //On les fait apparaître.
- $('#notify_help').css(
- {
- opacity: "1"
- });
-
- $('.notify_imgs_big').css(
- {
- opacity: "1"
- });
+ help_controls = "<div id='help_controls'>" + controls_title + controls_img + controls_1hand_text + controls_1hand_imgs + "</div>";
+
+ //Panneau d'aide.
+ var notification_help = "<div id='notify_help'>" + help_search + "<div id='help_sep'></div>" + help_controls + "</div>";
+
+ //On les ajoute à la mosaïque.
+ $('body').append(notification_help);
+
+ //On calcule leurs coordonnées et dimensions.
+ var notify_width = $(window).width(), notify_height = $(window).height();
+ var notify_margin = parseInt($('#notify_help').css('margin'));
+ var notify_ = 10;
+
+ //On les positionne.
+ $('#notify_help').css(
+ {
+ left: "0px",
+ top: "0px",
+ width: notify_width - notify_margin * 2,
+ height: notify_height - notify_margin * 2,
+ 'z-index': 1000
+ });
+
+ //Taille des marges des images.
+ var margins = parseInt($('.notify_imgs_small').css('margin'));
+ //Largeur des images.
+ var widths = $('.notify_imgs_small').width();
+ //Hauteur des images.
+ var heights = $('.notify_imgs_small').height();
+ //Position horizontale du séparateur de colonnes.
+ var sep_left = $('#help_sep').position().left;
+ //Marge du panneau d'aide.
+ var help_margin = parseInt($('#notify_help').css('margin'));
+
+ //On calcule la taille d'une zone de recherche (une des deux parties).
+ var help_column_width = sep_left - help_margin;
+ //Longueur d'une image.
+ var img_width = (margins * 2 + widths);
+
+ //On récupère le nombre d'images affichables horizontalement pour les gestures de recherche à deux mains dans une des parties de l'aide.
+ var search_2hands_n_imgs = Math.floor(help_column_width / img_width);
+ //Calcul du padding-left de cette section.
+ var search_2hands_padding_left = (help_column_width - search_2hands_n_imgs * img_width) / 2;
+
+ //On positionne la section de recherche par courbes.
+ $('#search_2hands_imgs').css(
+ {
+ 'padding-left': search_2hands_padding_left,
+ 'height': ($('.notify_imgs_small').height() * 2 + parseInt($('.notify_imgs_small').css('margin')))
+ });
+
+ //On récupère le nombre d'images affichables horizontalement pour les gestures de recherche corporelles dans une des parties de l'aide.
+ var search_body_n_imgs = Math.floor(help_column_width / img_width);
+ //Calcul du padding-left de cette section.
+ var search_body_padding_left = (help_column_width - search_body_n_imgs * img_width) / 2;
+
+ //On positionne la section de recherche par gestures corporelles.
+ $('#search_body_imgs').css(
+ {
+ 'padding-left': search_body_padding_left,
+ 'height': ($('.notify_imgs_small').height() * 2 + parseInt($('.notify_imgs_small').css('margin')))
+ });
+
+ //On récupère le nombre d'images affichables horizontalement pour les gestures de controle dans une des parties de l'aide.
+ var controls_1hand_n_imgs = Math.floor(help_column_width / img_width);
+ //Calcul du padding-left de cette section.
+ var controls_1hand_padding_left = (help_column_width - controls_1hand_n_imgs * img_width) / 2;
+
+ //On potisionne la section des actions de contrôle de l'interface.
+ $('#controls_1hand_imgs').css(
+ {
+ 'padding-left': controls_1hand_padding_left,
+ 'height': ($('.notify_imgs_small').height())
+ });
+
+ //Longueur de la colonne de recherche.
+ var search_width = $('#help_search').width();
+
+ $('#search_title').html('Recherche');
+ var MI = '';
+
+ //Le texte de recherche et les images changent en fonction du mode d'intéraction (souris/Kinect).
+ if(this.config.mouseInteractions)
+ {
+ $('#search_2hands_text').html('Courbes à effectuer avec la souris');
+ MI = 'MI/';
+ }
+ else
+ {
+ $('#search_2hands_text').html('Gestes à effectuer avec les deux mains');
+ }
+
+ //On affecte les images pour la recherche par courbes.
+ for(var i = 0 ; i < search_2hands_tab.length ; i++)
+ {
+ $("#2hands_" + search_2hands_tab[i]).css("background-image", "url('" + img_directory + MI + search_2hands_tab[i] + ".png')");
+ }
+
+ //Si on est en mode Kinect, on affecte les images de recherche corporelle.
+ if(!this.config.mouseInteractions)
+ {
+ $('#search_body_text').html('Gestes à effectuer avec le corps entier');
+
+ for(var i = 0 ; i < search_body_tab.length ; i++)
+ {
+ $("#body_" + search_body_tab[i]).css("background-image", "url('" + img_directory + search_body_tab[i] + ".png')");
+ }
+ }
+
+ //Actions de contrôle de l'interface.
+ $('#controls_title').html('Contrôles');
+ $('#controls_1hand_text').html('Gestes à effectuer avec une seule main');
+
+ //On affecte les images des actions de contrôle de l'interface.
+ for(var i = 0 ; i < controls_1hand_tab.length ; i++)
+ {
+ $("#1hand_" + controls_1hand_tab[i]).css("background-image", "url('" + img_directory + controls_1hand_tab[i] + ".png')");
+ }
+
+ //On les fait apparaître.
+ $('#notify_help').css(
+ {
+ opacity: "1"
+ });
+
+ $('.notify_imgs_big').css(
+ {
+ opacity: "1"
+ });
}
/*
* Supprime l'aide.
+ * Est appelé dans les fichiers :
+ * pointers > fonction detectIdlePointers.
+ * mosaic > fonction manageControlEvents et onClick.
+ * curvesDetector > fonction updateDists.
*/
-mosaic.prototype.removeHelp = function()
+Mosaic.prototype.removeHelp = function()
{
- if(!this.helpDisplayed)
- {
- return;
- }
-
- var _this = this;
-
- $('#notify_help').fadeOut(this.timeNotifyFade, function()
- {
- _this.helpDisplayed = false;
- // _this.canNotifyHelp = false;
- _this.canNotifyHelp = true;
- console.log('CAN NOT NOTIFY HELP');
- $('#notify_help').remove();
- });
+ //Si l'aide n'est pas affichée, on part.
+ if(!this.helpDisplayed)
+ {
+ return;
+ }
+
+ var _this = this;
+
+ //On fait disparaître l'aide.
+ $('#notify_help').fadeOut(this.timeNotifyFade, function()
+ {
+ //On indique que l'aide n'est plus affichée, et on détruit le panneau.
+ _this.helpDisplayed = false;
+ _this.canNotifyHelp = true;
+ $('#notify_help').remove();
+ });
}
/*
- * Affiche la notification de validation/survol de gesture de filtrage.
- * Mode prend pour valeurs : "valid" ou "hover".
+ * Affichage de la notification de sélection & recherche dans la mosaïque.
+ * Est appelé dans les fichiers :
+ * zoomInteractions > fonctions preUnzoom et unzoom.
+ * mosaic > fonction showNImages.
*/
-mosaic.prototype.notifySearch1Gesture = function(gestureName, mode)
+Mosaic.prototype.mosaicSelectionAndSearch = function()
{
- // console.log('C');
- if($('#notify_search_1gesture').length > 0)
- {
- $('#notify_search_1gesture').remove();
- }
-
- //Si on a effectué une demande de recherche auparavant, on supprime la notification de demande de recherche.
- if($('#notify_search').length > 0)
- {
- this.removeNotifications();
- }
-
- var _this = this;
-
- //On spécifie les notifications en div.
- var notification_search_1gesture = "<div id='notify_search_1gesture' class='notifications'></div>";
-
- //On les ajoute à la mosaïque.
- $('body').append(notification_search_1gesture);
-
- // 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;
-
- if(_.include(this.gestures, gestureName))
- {
- $('#notify_search_1gesture').css('background-image', 'url("./pictos/big/' + mode + '/' + gestureName + '.png")');
- }
- else if(mode == 'none')
- {
- $('#notify_search_1gesture').css('background-image', 'url("./pictos/big/normal/inconnu.png")');
- }
-
- //On les positionne.
- $('#notify_search_1gesture').css(
- {
- top: 0,
- left: ($(window).width() - notify_width) / 2
- });
-
- //On les fait apparaître.
- $('.notifications').css(
- {
- opacity: "0.9"
- });
-}
+ //Si on n'est pas en mode mosaic, on part.
+ if(this.currentMode != 'MOSAIC')
+ {
+ return;
+ }
+
+ //On spécifie les notifications en div.
+ var notification_selection = "<div id='notify_selection' class='notifications'></div>";
+ var notification_search = "<div id='notify_search' class='notifications'></div>";
+
+ //On les ajoute à la mosaïque.
+ $('body').append(notification_selection + notification_search);
-// /!\/!\/!\ //
-
-/* NOUVELLES NOTIFICATIONS */
-
-// /!\/!\/!\ //
-
-/*
- * Affichage de la notification de sélection & recherche dans la mosaïque.
-*/
-mosaic.prototype.mosaicSelectionAndSearch = function()
-{
- if(this.currentMode != 'MOSAIC')
- {
- return;
- }
-
- //On spécifie les notifications en div.
- var notification_selection = "<div id='notify_selection' class='notifications'></div>";
- var notification_search = "<div id='notify_search' class='notifications'></div>";
-
- //On les ajoute à la mosaïque.
- $('body').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"
- });
+ //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"
+ });
}
/*
* Affichage de la notification de sélection dans la mosaïque.
+ * Est appelé dans le fichier :
+ * zoomInteractions > fonction preZoom.
*/
-mosaic.prototype.mosaicSelection = function()
+Mosaic.prototype.mosaicSelection = function()
{
- if(this.currentMode != 'MOSAIC')
- {
- return;
- }
-
- //On spécifie la notification en div.
- var notification_selection = "<div id='notify_selection' class='notifications'></div>";
-
- //On l'ajoute à la mosaïque.
- $('body').append(notification_selection);
+ //Si on n'est pas en mode mosaic, on part.
+ if(this.currentMode != 'MOSAIC')
+ {
+ return;
+ }
+
+ //On spécifie la notification en div.
+ var notification_selection = "<div id='notify_selection' class='notifications'></div>";
+
+ //On l'ajoute à la mosaïque.
+ $('body').append(notification_selection);
- //On calcule ses 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;
-
- //On les positionne.
- $('#notify_selection').css(
- {
- left: selection_left
- });
-
- //On les fait apparaître.
- $('.notifications').css(
- {
- opacity: "0.9"
- });
+ //On calcule ses 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;
+
+ //On les positionne.
+ $('#notify_selection').css(
+ {
+ left: selection_left
+ });
+
+ //On les fait apparaître.
+ $('.notifications').css(
+ {
+ opacity: "0.9"
+ });
}
/*
* Affichage de la notification de recherche dans une demande de filtrage de la mosaïque.
+ * Est appelé dans les fichiers :
+ * pointers > fonction launchIdlePointers.
+ * zoomInteractions > fonction preUnzoom.
*/
-mosaic.prototype.filterSearch = function()
+Mosaic.prototype.filterSearch = function()
{
- if(this.currentMode != 'FILTER' || this.filterSearchedType)
- {
- return;
- }
-
- // window.location.reload();
-
- //On spécifie la notification en div.
- var notification_search = "<div id='notify_search' class='notifications'></div>";
-
- //On l'ajoute à la mosaïque.
- $('body').append(notification_search);
+ //Si on n'est pas en mode filtrage ou qu'aucune recherche n'est affectée au filtrage, on part.
+ if(this.currentMode != 'FILTER' || this.filterSearchedType)
+ {
+ return;
+ }
+
+ //On spécifie la notification en div.
+ var notification_search = "<div id='notify_search' class='notifications'></div>";
+
+ //On l'ajoute à la mosaïque.
+ $('body').append(notification_search);
- //On calcule ses 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;
-
- //On la positionne.
- $('#notify_search').css(
- {
- left: search_left
- });
-
- //On la fait apparaître.
- $('.notifications').css(
- {
- opacity: "0.9"
- });
+ //On calcule ses 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;
+
+ //On la positionne.
+ $('#notify_search').css(
+ {
+ left: search_left
+ });
+
+ //On la fait apparaître.
+ $('.notifications').css(
+ {
+ opacity: "0.9"
+ });
}
/*
* Affichage de la notification de recherche & sélection dans une demande de filtrage de la mosaïque.
+ * Est appelé dans le fichier :
+ * zoomInteractions > fonction preZoom.
*/
-mosaic.prototype.filterSearchAndSelection = function()
+Mosaic.prototype.filterSearchAndSelection = function()
{
- if(this.currentMode != 'FILTER' || this.filterSearchedType)
- {
- return;
- }
-
- //On spécifie les notifications en div.
- var notification_selection = "<div id='notify_selection' class='notifications'></div>";
- var notification_search = "<div id='notify_search' class='notifications'></div>";
-
- //On les ajoute à la mosaïque.
- $('body').append(notification_selection + notification_search);
+ //Si on n'est pas en mode filtrage ou qu'aucune recherche n'est affectée au filtrage, on part.
+ if(this.currentMode != 'FILTER' || this.filterSearchedType)
+ {
+ return;
+ }
+
+ //On spécifie les notifications en div.
+ var notification_selection = "<div id='notify_selection' class='notifications'></div>";
+ var notification_search = "<div id='notify_search' class='notifications'></div>";
+
+ //On les ajoute à la mosaïque.
+ $('body').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 search_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2;
- var selection_left = search_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"
- });
+ //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 selection_left = search_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"
+ });
}
/*
* Affichage de la notification de résultat de gesture dans la mosaïque filtrée.
+ * Est appelé dans les fichiers :
+ * zoomInteractions > fonction preUnzoom.
+ * mosaic > onMouseUp et manageControlEvents.
+ * curvesDetector > updateDists.
*/
-mosaic.prototype.filterGesture = function(gestureName, mode)
+Mosaic.prototype.filterGesture = function(gestureName, mode)
{
- if(this.currentMode != 'FILTER' || !this.filterSearchedType)
- {
- return;
- }
-
- // console.trace();
-
- var _this = this;
-
- //On spécifie les notifications en div.
- var notification_search_1gesture = "<div id='notify_search_1gesture' class='notifications'></div>";
-
- //On les ajoute à la mosaïque.
- $('body').append(notification_search_1gesture);
-
- // 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;
-
- // 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/' + (this.mouseInteractions ? 'MI' : '') + '/' + (this.gestureDelRequested ? 'hover' : 'valid') + '/' + gestureName + '.png")');
- }
- else if(mode == 'none')
- {
- $('#notify_search_1gesture').css('background-image', 'url("./pictos/big/normal/inconnu.png")');
- }
-
- //On les positionne.
- $('#notify_search_1gesture').css(
- {
- top: 0,
- left: ($(window).width() - notify_width) / 2
- });
-
- //On les fait apparaître.
- $('.notifications').css(
- {
- opacity: "0.9"
- });
+ //Si on n'est pas en mode filtrage ou qu'aucune recherche n'est affectée au filtrage, on part.
+ if(this.currentMode != 'FILTER' || !this.filterSearchedType)
+ {
+ return;
+ }
+
+ var _this = this;
+
+ //On spécifie les notifications en div.
+ var notification_search_1gesture = "<div id='notify_search_1gesture' class='notifications'></div>";
+
+ //On les ajoute à la mosaïque.
+ $('body').append(notification_search_1gesture);
+
+ //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;
+
+ if(_.include(this.gestures, gestureName))
+ {
+ $('#notify_search_1gesture').css('background-image', 'url("./pictos/big/' + (this.config.mouseInteractions ? 'MI' : '') + '/' + (this.gestureDelRequested ? 'hover' : 'valid') + '/' + gestureName + '.png")');
+ }
+ else if(mode == 'none')
+ {
+ $('#notify_search_1gesture').css('background-image', 'url("./pictos/big/normal/inconnu.png")');
+ }
+
+ //On les positionne.
+ $('#notify_search_1gesture').css(
+ {
+ top: 0,
+ left: ($(window).width() - notify_width) / 2
+ });
+
+ //On les fait apparaître.
+ $('.notifications').css(
+ {
+ opacity: "0.9"
+ });
}
/*
* Affichage de la notification de résultat de gesture & de sélection dans la mosaïque filtrée.
+ * Est appelé dans le fichier :
+ * zoomInteractions > fonction preZoom.
*/
-mosaic.prototype.filterGestureAndSelection = function(gestureName, mode)
+Mosaic.prototype.filterGestureAndSelection = function(gestureName, mode)
{
- if(this.currentMode != 'FILTER' || !this.filterSearchedType)
- {
- return;
- }
-
- //On spécifie les notifications en div.
- var notification_search_1gesture = "<div id='notify_search_1gesture' class='notifications'></div>";
- var notification_selection = "<div id='notify_selection' class='notifications'></div>";
-
- //On les ajoute à la mosaïque.
- $('body').append(notification_search_1gesture + notification_selection);
+ //Si on n'est pas en mode filtrage ou qu'aucune recherche n'est affectée au filtrage, on part.
+ if(this.currentMode != 'FILTER' || !this.filterSearchedType)
+ {
+ return;
+ }
+
+ //On spécifie les notifications en div.
+ var notification_search_1gesture = "<div id='notify_search_1gesture' class='notifications'></div>";
+ var notification_selection = "<div id='notify_selection' class='notifications'></div>";
+
+ //On les ajoute à la mosaïque.
+ $('body').append(notification_search_1gesture + notification_selection);
- //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 selection_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")');
- }
-
- //On les positionne.
- $('#notify_search_1gesture').css(
- {
- left: search_1gesture_left
- });
- $('#notify_selection').css(
- {
- left: selection_left
- });
-
- //On les fait apparaître.
- $('.notifications').css(
- {
- opacity: "0.9"
- });
+ //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 selection_left = search_1gesture_left + notify_width + notify_margin;
+
+ if(_.include(this.gestures, gestureName))
+ {
+ $('#notify_search_1gesture').css('background-image', 'url("./pictos/big/' + (this.config.mouseInteractions ? 'MI' : '') + '/' + mode + '/' + gestureName + '.png")');
+ }
+ else if(mode == 'none')
+ {
+ $('#notify_search_1gesture').css('background-image', 'url("./pictos/big/normal/inconnu.png")');
+ }
+
+ //On les positionne.
+ $('#notify_search_1gesture').css(
+ {
+ left: search_1gesture_left
+ });
+ $('#notify_selection').css(
+ {
+ left: selection_left
+ });
+
+ //On les fait apparaître.
+ $('.notifications').css(
+ {
+ opacity: "0.9"
+ });
}
/*
* Affiche la notification de dezoom.
* Direction vaut left ou right.
+ * Est appelé dans le fichier :
+ * mosaic > fonction manageControlEvents.
*/
-mosaic.prototype.videoSwipe = function(direction)
+Mosaic.prototype.videoSwipe = function(direction)
{
- if(this.currentMode != 'VIDEO' || !this.isSwipe)
- {
- return;
- }
-
- var _this = this;
-
- //On spécifie les notifications en div.
- var notification_swipe = "<div id='notify_swipe' class='notifications'></div>";
-
- //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"
- });
+ //Si on n'est pas en mode video ou qu'on n'est pas en train d'effectuer un swipe, on part.
+ if(this.currentMode != 'VIDEO' || !this.isSwipe)
+ {
+ return;
+ }
+
+ var _this = this;
+
+ //On spécifie les notifications en div.
+ var notification_swipe = "<div id='notify_swipe' class='notifications'></div>";
+
+ //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 = 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"
+ });
}
/*
* Affichage de la notification de résultat de move vers un voisin.
+ * Est appelé dans le fichier :
+ * neighbours > fonction selectNeighbour.
*/
-mosaic.prototype.videoMove = function(targetId)
+Mosaic.prototype.videoMove = function(targetId)
{
- if(this.currentMode != 'VIDEO')
- {
- return;
- }
-
- var _this = this;
-
- //On spécifie les notifications en div.
- var notification_move = "<div id='notify_move' class='notifications'></div>";
-
- //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"
- });
+ //Si on n'est pas en mode video, on part.
+ if(this.currentMode != 'VIDEO')
+ {
+ return;
+ }
+
+ var _this = this;
+
+ //On spécifie les notifications en div.
+ var notification_move = "<div id='notify_move' class='notifications'></div>";
+
+ //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);
+
+ if(side == -1)
+ {
+ return;
+ }
+
+ var sides = ['left', 'right', 'up', 'down'];
+
+ 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.
+ * Est appelé dans le fichier :
+ * neighbours > fonction selectNeighbour.
*/
-mosaic.prototype.videoMoveAndUnzoom = function(targetId)
+Mosaic.prototype.videoMoveAndUnzoom = function(targetId)
{
- if(this.currentMode != 'VIDEO')
- {
- return;
- }
-
- var _this = this;
-
- //On spécifie les notifications en div.
- var notification_move = "<div id='notify_move' class='notifications'></div>";
- var notification_unzoom = "<div id='notify_unzoom' class='notifications'></div>";
-
- //On les ajoute à la mosaïque.
- $('body').append(notification_move + notification_unzoom);
-
- //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 * 3) / 2;
- var unzoom_left = move_left + notify_width + 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 + move_left,
- 'background-image': 'url(./pictos/notifications/move_' + sides[side] + '.png)'
- });
-
- $('#notify_unzoom').css(
- {
- top: -notifyTop,
- left: -notifyLeft + unzoom_left,
- 'background-image': 'url(./pictos/notifications/unzoom_' + unzooms[Math.floor(side / 2)] + '.png)'
- });
-
- //On les fait apparaître.
- $('.notifications').css(
- {
- opacity: "0.9"
- });
+ //Si on n'est pas en mode video, on part.
+ if(this.currentMode != 'VIDEO')
+ {
+ return;
+ }
+
+ var _this = this;
+
+ //On spécifie les notifications en div.
+ var notification_move = "<div id='notify_move' class='notifications'></div>";
+ var notification_unzoom = "<div id='notify_unzoom' class='notifications'></div>";
+
+ //On les ajoute à la mosaïque.
+ $('body').append(notification_move + notification_unzoom);
+
+ //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 * 3) / 2;
+ var unzoom_left = move_left + notify_width + notify_margin;
+
+ var side = $.inArray(parseInt(targetId), this.neighboursIds);
+
+ if(side == -1)
+ {
+ return;
+ }
+
+ var sides = ['left', 'right', 'up', 'down'];
+ var unzooms = ['horizontal', 'vertical'];
+
+ 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)'
+ });
+
+ $('#notify_unzoom').css(
+ {
+ top: -notifyTop,
+ left: -notifyLeft + unzoom_left,
+ 'background-image': 'url(./pictos/notifications/unzoom_' + unzooms[Math.floor(side / 2)] + '.png)'
+ });
+
+ //On les fait apparaître.
+ $('.notifications').css(
+ {
+ opacity: "0.9"
+ });
}
/*
* Affichage de la notification de résultat de dézoom dans une vidéo.
+ * Est appelé dans le fichier :
+ * neighbours > fonction selectNeighbour.
*/
-mosaic.prototype.videoUnzoom = function(targetId)
+Mosaic.prototype.videoUnzoom = function(targetId)
{
- if(this.currentMode != 'VIDEO')
- {
- return;
- }
-
- var _this = this;
-
- //On spécifie la notifications en div.
- var notification_unzoom = "<div id='notify_unzoom' class='notifications'></div>";
-
- //On l'ajoute à la mosaïque.
- $('body').append(notification_unzoom);
-
- //On calcule ses coordonnées et dimensions.
- var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
- var notify_margin = parseInt($('.notifications').css('margin'));
- var unzoom_left = $(window).width() / 2 - notify_width / 2 - notify_margin;
-
- var side = $.inArray(parseInt(targetId), this.neighboursIds);
- if(side == -1)
- {
- return;
- }
-
- var unzooms = ['horizontal', 'vertical'];
-
- // var notifyTop = this.notifyTopVideo, notifyLeft = this.notifyLeftVideo;
- var notifyTop = 0, notifyLeft = 0;
-
- //On la positionne.
- $('#notify_unzoom').css(
- {
- top: -notifyTop,
- left: -notifyLeft + unzoom_left,
- 'background-image': 'url(./pictos/notifications/unzoom_' + unzooms[Math.floor(side / 2)] + '.png)'
- });
-
- //On les fait apparaître.
- $('.notifications').css(
- {
- opacity: "0.9"
- });
+ //Si on n'est pas en mode video, on part.
+ if(this.currentMode != 'VIDEO')
+ {
+ return;
+ }
+
+ var _this = this;
+
+ //On spécifie la notifications en div.
+ var notification_unzoom = "<div id='notify_unzoom' class='notifications'></div>";
+
+ //On l'ajoute à la mosaïque.
+ $('body').append(notification_unzoom);
+
+ //On calcule ses coordonnées et dimensions.
+ var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
+ var notify_margin = parseInt($('.notifications').css('margin'));
+ var unzoom_left = $(window).width() / 2 - notify_width / 2 - notify_margin;
+
+ var side = $.inArray(parseInt(targetId), this.neighboursIds);
+ if(side == -1)
+ {
+ return;
+ }
+
+ var unzooms = ['horizontal', 'vertical'];
+
+ var notifyTop = 0, notifyLeft = 0;
+
+ //On la positionne.
+ $('#notify_unzoom').css(
+ {
+ top: -notifyTop,
+ left: -notifyLeft + unzoom_left,
+ 'background-image': 'url(./pictos/notifications/unzoom_' + unzooms[Math.floor(side / 2)] + '.png)'
+ });
+
+ //On les fait apparaître.
+ $('.notifications').css(
+ {
+ opacity: "0.9"
+ });
}
/*
* Affichage de la notification de timeline dans une vidéo/recherche.
+ * Est appelé dans le fichier :
+ * pointers > fonction pointersTimelineSelection.
*/
-mosaic.prototype.timelineTimeline = function()
+Mosaic.prototype.timelineTimeline = function()
{
- if(this.currentMode != 'TIMELINE')
- {
- return;
- }
-
- var _this = this;
-
- //On spécifie la notifications en div.
- var notification_timeline = "<div id='notify_timeline' class='notifications'></div>";
-
- //On l'ajoute à la mosaïque.
- $('body').append(notification_timeline);
-
- //On calcule ses coordonnées et dimensions.
- var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
- var notify_margin = parseInt($('.notifications').css('margin'));
- var timeline_left = $(window).width() / 2 - notify_width / 2 - notify_margin;
-
- // var notifyTop = this.notifyTopVideo, notifyLeft = this.notifyLeftVideo;
- var notifyTop = 0, notifyLeft = 0;
-
- //On la positionne.
- $('#notify_timeline').css(
- {
- top: -notifyTop,
- left: -notifyLeft + timeline_left
- });
-
- //On les fait apparaître.
- $('.notifications').css(
- {
- opacity: "0.9"
- });
+ //Si on n'est pas en mode timeline, on part.
+ if(this.currentMode != 'TIMELINE')
+ {
+ return;
+ }
+
+ var _this = this;
+
+ //On spécifie la notifications en div.
+ var notification_timeline = "<div id='notify_timeline' class='notifications'></div>";
+
+ //On l'ajoute à la mosaïque.
+ $('body').append(notification_timeline);
+
+ //On calcule ses coordonnées et dimensions.
+ var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
+ var notify_margin = parseInt($('.notifications').css('margin'));
+ var timeline_left = $(window).width() / 2 - notify_width / 2 - notify_margin;
+
+ var notifyTop = 0, notifyLeft = 0;
+
+ //On la positionne.
+ $('#notify_timeline').css(
+ {
+ top: -notifyTop,
+ left: -notifyLeft + timeline_left
+ });
+
+ //On les fait apparaître.
+ $('.notifications').css(
+ {
+ opacity: "0.9"
+ });
}
/*
* Affichage de la notification de recherche dans une vidéo de recherche.
+ * Est appelé dans les fichiers :
+ * neighbours > fonction deselectNeighbour.
+ * pointers > fonction launchIdlePointers.
+ * mosaic > fonction manageControlEvents.
*/
-mosaic.prototype.searchSearch = function()
+Mosaic.prototype.searchSearch = function()
{
- if(this.currentMode != 'SEARCH' || this.isCurrentlyInASearchByGesture)
- {
- return;
- }
-
- var _this = this;
-
- //On spécifie la notifications en div.
- var notification_search = "<div id='notify_search' class='notifications'></div>";
-
- //On l'ajoute à la mosaïque.
- $('body').append(notification_search);
-
- //On calcule ses 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;
-
- // var notifyTop = this.notifyTopVideo, notifyLeft = this.notifyLeftVideo;
- var notifyTop = 0, notifyLeft = 0;
-
- //On la positionne.
- $('#notify_search').css(
- {
- top: -notifyTop,
- left: -notifyLeft + search_left
- });
-
- //On les fait apparaître.
- $('.notifications').css(
- {
- opacity: "0.9"
- });
+ //Si on n'est pas en mode recherche dans une video ou qu'aucune recherche n'est effectuée, on part.
+ if(this.currentMode != 'SEARCH' || this.isCurrentlyInASearchByGesture)
+ {
+ return;
+ }
+
+ var _this = this;
+
+ //On spécifie la notifications en div.
+ var notification_search = "<div id='notify_search' class='notifications'></div>";
+
+ //On l'ajoute à la mosaïque.
+ $('body').append(notification_search);
+
+ //On calcule ses 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;
+
+ var notifyTop = 0, notifyLeft = 0;
+
+ //On la positionne.
+ $('#notify_search').css(
+ {
+ top: -notifyTop,
+ left: -notifyLeft + search_left
+ });
+
+ //On les fait apparaître.
+ $('.notifications').css(
+ {
+ opacity: "0.9"
+ });
}
/*
* Affichage de la notification de recherche & de swipe dans une vidéo de recherche.
+ * Est appelé dans le fichier :
+ * mosaic > fonction manageControlEvents.
*/
-mosaic.prototype.searchSearchAndSwipe = function(direction)
+Mosaic.prototype.searchSearchAndSwipe = function(direction)
{
- if(this.currentMode != 'SEARCH' || this.isCurrentlyInASearchByGesture || !this.isSwipe)
- {
- return;
- }
-
- var _this = this;
-
- //On spécifie les notifications en div.
- var notification_search = "<div id='notify_search' class='notifications'></div>";
- var notification_swipe = "<div id='notify_swipe' class='notifications'></div>";
-
- //On les ajoute à la mosaïque.
- $('body').append(notification_search + 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 search_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2;
- var swipe_left = search_left + notify_width + notify_margin;
-
- // var notifyTop = this.notifyTopVideo, notifyLeft = this.notifyLeftVideo;
- var notifyTop = 0, notifyLeft = 0;
-
- //On les positionne.
- $('#notify_search').css(
- {
- top: -notifyTop,
- left: -notifyLeft + search_left
- });
- $('#notify_swipe').css(
- {
- top: -notifyTop,
- left: -notifyLeft + swipe_left,
- 'background-image': 'url(./pictos/notifications/swipe_' + direction + '.png)'
- });
-
- //On les fait apparaître.
- $('.notifications').css(
- {
- opacity: "0.9"
- });
+ //Si on n'est pas en mode recherche dans une video ou qu'aucune recherche n'est effectuée ou qu'on n'est pas en train de faire un swipe, on part.
+ if(this.currentMode != 'SEARCH' || this.isCurrentlyInASearchByGesture || !this.isSwipe)
+ {
+ return;
+ }
+
+ var _this = this;
+
+ //On spécifie les notifications en div.
+ var notification_search = "<div id='notify_search' class='notifications'></div>";
+ var notification_swipe = "<div id='notify_swipe' class='notifications'></div>";
+
+ //On les ajoute à la mosaïque.
+ $('body').append(notification_search + 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 search_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2;
+ var swipe_left = search_left + notify_width + notify_margin;
+
+ var notifyTop = 0, notifyLeft = 0;
+
+ //On les positionne.
+ $('#notify_search').css(
+ {
+ top: -notifyTop,
+ left: -notifyLeft + search_left
+ });
+ $('#notify_swipe').css(
+ {
+ top: -notifyTop,
+ left: -notifyLeft + swipe_left,
+ 'background-image': 'url(./pictos/notifications/swipe_' + direction + '.png)'
+ });
+
+ //On les fait apparaître.
+ $('.notifications').css(
+ {
+ opacity: "0.9"
+ });
}
/*
* Affichage de la notification de recherche, de move vers un voisin.
+ * Est appelé dans le fichier :
+ * neighbours > fonction selectNeighbour.
*/
-mosaic.prototype.searchSearchAndMove = function(targetId)
+Mosaic.prototype.searchSearchAndMove = function(targetId)
{
- if(this.currentMode != 'SEARCH' || this.isCurrentlyInASearchByGesture)
- {
- return;
- }
-
- //On spécifie les notifications en div.
- var notification_search = "<div id='notify_search' class='notifications'></div>";
- var notification_move = "<div id='notify_move' class='notifications'></div>";
-
- //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"
- });
+ //Si on n'est pas en mode recherche dans une video ou qu'aucune recherche n'est effectuée, on part.
+ if(this.currentMode != 'SEARCH' || this.isCurrentlyInASearchByGesture)
+ {
+ return;
+ }
+
+ //On spécifie les notifications en div.
+ var notification_search = "<div id='notify_search' class='notifications'></div>";
+ var notification_move = "<div id='notify_move' class='notifications'></div>";
+
+ //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.
+ * Est appelé dans le fichier :
+ * neighbours > fonction selectNeighbour.
*/
-mosaic.prototype.searchSearchAndMoveAndUnzoom = function(targetId)
+Mosaic.prototype.searchSearchAndMoveAndUnzoom = function(targetId)
{
- if(this.currentMode != 'SEARCH' || this.isCurrentlyInASearchByGesture)
- {
- return;
- }
-
- //On spécifie les notifications en div.
- var notification_search = "<div id='notify_search' class='notifications'></div>";
- var notification_move = "<div id='notify_move' class='notifications'></div>";
- var notification_unzoom = "<div id='notify_unzoom' class='notifications'></div>";
-
- //On les ajoute à la mosaïque.
- $('body').append(notification_search + notification_move + notification_unzoom);
-
- //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 * 3 + notify_margin * 4) / 2;
- var move_left = search_left + notify_width + notify_margin;
- var unzoom_left = move_left + notify_width + notify_margin;
-
- var side = $.inArray(parseInt(targetId), this.neighboursIds);
-
- 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_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)'
- });
- $('#notify_unzoom').css(
- {
- top: -notifyTop,
- left: -notifyLeft + unzoom_left,
- 'background-image': 'url(./pictos/notifications/unzoom_' + unzooms[Math.floor(side / 2)] + '.png)'
- });
-
- //On les fait apparaître.
- $('.notifications').css(
- {
- opacity: "0.9"
- });
+ //Si on n'est pas en mode recherche dans une video ou qu'aucune recherche n'est effectuée, on part.
+ if(this.currentMode != 'SEARCH' || this.isCurrentlyInASearchByGesture)
+ {
+ return;
+ }
+
+ //On spécifie les notifications en div.
+ var notification_search = "<div id='notify_search' class='notifications'></div>";
+ var notification_move = "<div id='notify_move' class='notifications'></div>";
+ var notification_unzoom = "<div id='notify_unzoom' class='notifications'></div>";
+
+ //On les ajoute à la mosaïque.
+ $('body').append(notification_search + notification_move + notification_unzoom);
+
+ //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 * 3 + notify_margin * 4) / 2;
+ var move_left = search_left + notify_width + notify_margin;
+ var unzoom_left = move_left + notify_width + notify_margin;
+
+ var side = $.inArray(parseInt(targetId), this.neighboursIds);
+
+ if(side == -1)
+ {
+ return;
+ }
+
+ var sides = ['left', 'right', 'up', 'down'];
+ var unzooms = ['horizontal', 'vertical'];
+
+ 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)'
+ });
+ $('#notify_unzoom').css(
+ {
+ top: -notifyTop,
+ left: -notifyLeft + unzoom_left,
+ 'background-image': 'url(./pictos/notifications/unzoom_' + unzooms[Math.floor(side / 2)] + '.png)'
+ });
+
+ //On les fait apparaître.
+ $('.notifications').css(
+ {
+ opacity: "0.9"
+ });
}
/*
* Affichage de la notification de recherche & de dézoom dans une vidéo de recherche.
+ * Est appelé dans le fichier :
*/
-mosaic.prototype.searchSearchAndUnzoom = function()
+Mosaic.prototype.searchSearchAndUnzoom = function()
{
- if(this.currentMode != 'SEARCH' || this.isCurrentlyInASearchByGesture)
- {
- return;
- }
-
- var _this = this;
-
- //On spécifie les notifications en div.
- var notification_search = "<div id='notify_search' class='notifications'></div>";
- var notification_unzoom = "<div id='notify_unzoom' class='notifications'></div>";
-
- //On les ajoute à la mosaïque.
- $('body').append(notification_search + notification_unzoom);
-
- //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 unzoom_left = search_left + notify_width + notify_margin;
-
- var side = $.inArray(parseInt(targetId), this.neighboursIds);
- // console.log(this.neighboursIds, parseInt(targetId), side);
- if(side == -1)
- {
- return;
- }
-
- 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 + search_left
- });
-
- $('#notify_unzoom').css(
- {
- top: -notifyTop,
- left: -notifyLeft + unzoom_left,
- 'background-image': 'url(./pictos/notifications/unzoom_' + unzooms[Math.floor(side / 2)] + '.png)'
- });
-
- //On les fait apparaître.
- $('.notifications').css(
- {
- opacity: "0.9"
- });
+ //Si on n'est pas en mode recherche dans une video ou qu'aucune recherche n'est effectuée, on part.
+ if(this.currentMode != 'SEARCH' || this.isCurrentlyInASearchByGesture)
+ {
+ return;
+ }
+
+ var _this = this;
+
+ //On spécifie les notifications en div.
+ var notification_search = "<div id='notify_search' class='notifications'></div>";
+ var notification_unzoom = "<div id='notify_unzoom' class='notifications'></div>";
+
+ //On les ajoute à la mosaïque.
+ $('body').append(notification_search + notification_unzoom);
+
+ //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 unzoom_left = search_left + notify_width + notify_margin;
+
+ var side = $.inArray(parseInt(targetId), this.neighboursIds);
+
+ if(side == -1)
+ {
+ return;
+ }
+
+ var unzooms = ['horizontal', 'vertical'];
+
+ var notifyTop = 0, notifyLeft = 0;
+
+ //On les positionne.
+ $('#notify_move').css(
+ {
+ top: -notifyTop,
+ left: -notifyLeft + search_left
+ });
+
+ $('#notify_unzoom').css(
+ {
+ top: -notifyTop,
+ left: -notifyLeft + unzoom_left,
+ 'background-image': 'url(./pictos/notifications/unzoom_' + unzooms[Math.floor(side / 2)] + '.png)'
+ });
+
+ //On les fait apparaître.
+ $('.notifications').css(
+ {
+ opacity: "0.9"
+ });
}
/*
* Affichage de la notification de résultat dans une vidéo de recherche.
+ * Est appelé dans les fichiers :
+ * neighbours > fonctions deselectNeighbour et moveToNeighbour.
+ * playerControl > fonction exitTimeline.
+ * zoomInteractions > fonction zoom.
+ * mosaic > fonctions onMouseUp et manageControlEvents.
+ * curvesDetector > fonction updateDists.
*/
-mosaic.prototype.searchGesture = function(gestureName, mode)
+Mosaic.prototype.searchGesture = function(gestureName, mode)
{
- console.log('NOTIFY GESTURE ' + this.currentMode + ' ' + this.centerId + ' ' + this.currentSearchGesture[this.centerId]);
- if(this.currentMode != 'SEARCH' || this.currentSearchGesture[this.centerId] == '')
- {
- return;
- }
- console.log('NOTIFY GESTURE');
- var _this = this;
-
- //On spécifie les notifications en div.
- var notification_search_1gesture = "<div id='notify_search_1gesture' class='notifications'></div>";
-
- //On les ajoute à la mosaïque.
- $('body').append(notification_search_1gesture);
-
- // 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;
-
- // console.log('SHOW GESTURE NOTIFICATION 1');
- if(_.include(this.gestures, gestureName))
- {
- // console.log('SHOW GESTURE NOTIFICATION 2');
- $('#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")');
- }
-
- //On les positionne.
- $('#notify_search_1gesture').css(
- {
- top: 0,
- left: ($(window).width() - notify_width) / 2
- });
-
- //On les fait apparaître.
- $('.notifications').css(
- {
- opacity: "0.9"
- });
+ //Si on n'est pas en mode recherche dans une video ou qu'aucune recherche n'est reconnue, on part.
+ if(this.currentMode != 'SEARCH' || this.currentSearchGesture[this.centerId] == '')
+ {
+ return;
+ }
+
+ var _this = this;
+
+ //On spécifie les notifications en div.
+ var notification_search_1gesture = "<div id='notify_search_1gesture' class='notifications'></div>";
+
+ //On les ajoute à la mosaïque.
+ $('body').append(notification_search_1gesture);
+
+ //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;
+
+ if(_.include(this.gestures, gestureName))
+ {
+ $('#notify_search_1gesture').css('background-image', 'url("./pictos/big/' + (this.config.mouseInteractions ? 'MI/' : '') + mode + '/' + gestureName + '.png")');
+ }
+ else if(mode == 'none')
+ {
+ $('#notify_search_1gesture').css('background-image', 'url("./pictos/big/normal/inconnu.png")');
+ }
+
+ //On les positionne.
+ $('#notify_search_1gesture').css(
+ {
+ top: 0,
+ left: ($(window).width() - notify_width) / 2
+ });
+
+ //On les fait apparaître.
+ $('.notifications').css(
+ {
+ opacity: "0.9"
+ });
}
/*
* Affichage de la notification de résultat & de swipe dans une vidéo de recherche.
+ * Est appelé dans le fichier :
+ * mosaic > fonction manageControlEvents.
*/
-mosaic.prototype.searchGestureAndSwipe = function(gestureName, mode, direction)
+Mosaic.prototype.searchGestureAndSwipe = function(gestureName, mode, direction)
{
- if(this.currentMode != 'SEARCH' || !this.isCurrentlyInASearchByGesture || !this.isSwipe)
- {
- return;
- }
-
- var _this = this;
-
- //On spécifie les notifications en div.
- var notification_search_1gesture = "<div id='notify_search_1gesture' class='notifications'></div>";
- var notification_swipe = "<div id='notify_swipe' class='notifications'></div>";
-
- //On les ajoute à la mosaïque.
- $('body').append(notification_search_1gesture + notification_swipe);
-
- // 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 swipe_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")');
- }
-
- //On les positionne.
- $('#notify_search_1gesture').css(
- {
- left: search_1gesture_left
- });
- $('#notify_swipe').css(
- {
- left: swipe_left,
- 'background-image': 'url(./pictos/notifications/swipe_' + direction + '.png)'
- });
-
- //On les fait apparaître.
- $('.notifications').css(
- {
- opacity: "0.9"
- });
+ //Si on n'est pas en mode recherche dans une video ou qu'aucune recherche n'est reconnue ou on ne fait pas de swipe, on part.
+ if(this.currentMode != 'SEARCH' || this.currentSearchGesture[this.centerId] == '' || !this.isSwipe)
+ {
+ return;
+ }
+
+ var _this = this;
+
+ //On spécifie les notifications en div.
+ var notification_search_1gesture = "<div id='notify_search_1gesture' class='notifications'></div>";
+ var notification_swipe = "<div id='notify_swipe' class='notifications'></div>";
+
+ //On les ajoute à la mosaïque.
+ $('body').append(notification_search_1gesture + 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 search_1gesture_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2;
+ var swipe_left = search_1gesture_left + notify_width + notify_margin;
+
+ if(_.include(this.gestures, gestureName))
+ {
+ $('#notify_search_1gesture').css('background-image', 'url("./pictos/big/' + (this.config.mouseInteractions ? 'MI/' : '') + mode + '/' + gestureName + '.png")');
+ }
+ else if(mode == 'none')
+ {
+ $('#notify_search_1gesture').css('background-image', 'url("./pictos/big/normal/inconnu.png")');
+ }
+
+ //On les positionne.
+ $('#notify_search_1gesture').css(
+ {
+ left: search_1gesture_left
+ });
+ $('#notify_swipe').css(
+ {
+ left: swipe_left,
+ 'background-image': 'url(./pictos/notifications/swipe_' + direction + '.png)'
+ });
+
+ //On les fait apparaître.
+ $('.notifications').css(
+ {
+ opacity: "0.9"
+ });
}
/*
* Affichage de la notification de résultat, de move vers un voisin.
+ * Est appelé dans le fichier :
+ * neighbours > fonction selectNeighbour.
*/
-mosaic.prototype.searchGestureAndMove = function(gestureName, mode, targetId)
+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 = "<div id='notify_search_1gesture' class='notifications'></div>";
- var notification_move = "<div id='notify_move' class='notifications'></div>";
-
- //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"
- });
+ //Si on n'est pas en mode recherche dans une video ou qu'aucune recherche n'est reconnue, on part.
+ if(this.currentMode != 'SEARCH' || this.currentSearchGesture[this.centerId] == '')
+ {
+ return;
+ }
+
+ var _this = this;
+
+ //On spécifie les notifications en div.
+ var notification_search_1gesture = "<div id='notify_search_1gesture' class='notifications'></div>";
+ var notification_move = "<div id='notify_move' class='notifications'></div>";
+
+ //On les ajoute à la mosaïque.
+ $('body').append(notification_search_1gesture + 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_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.config.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.
+ * Est appelé dans le fichier :
+ * neighbours > fonction selectNeighbour.
*/
-mosaic.prototype.searchGestureAndMoveAndUnzoom = function(gestureName, mode, targetId)
+Mosaic.prototype.searchGestureAndMoveAndUnzoom = 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 = "<div id='notify_search_1gesture' class='notifications'></div>";
- var notification_move = "<div id='notify_move' class='notifications'></div>";
- var notification_unzoom = "<div id='notify_unzoom' class='notifications'></div>";
-
- //On les ajoute à la mosaïque.
- $('body').append(notification_search_1gesture + notification_move + notification_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 search_1gesture_left = $(window).width() / 2 - (notify_width * 3 + notify_margin * 4) / 2;
- var move_left = search_1gesture_left + notify_width + notify_margin;
- var unzoom_left = move_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'];
- var unzooms = ['horizontal', 'vertical'];
-
- //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)'
- });
- $('#notify_unzoom').css(
- {
- left: unzoom_left,
- 'background-image': 'url(./pictos/notifications/unzoom_' + unzooms[Math.floor(side / 2)] + '.png)'
- });
-
- //On les fait apparaître.
- $('.notifications').css(
- {
- opacity: "0.9"
- });
+ //Si on n'est pas en mode recherche dans une video ou qu'aucune recherche n'est reconnue, on part.
+ if(this.currentMode != 'SEARCH' || this.currentSearchGesture[this.centerId] == '')
+ {
+ return;
+ }
+
+ var _this = this;
+
+ //On spécifie les notifications en div.
+ var notification_search_1gesture = "<div id='notify_search_1gesture' class='notifications'></div>";
+ var notification_move = "<div id='notify_move' class='notifications'></div>";
+ var notification_unzoom = "<div id='notify_unzoom' class='notifications'></div>";
+
+ //On les ajoute à la mosaïque.
+ $('body').append(notification_search_1gesture + notification_move + notification_unzoom);
+
+ //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 * 3 + notify_margin * 4) / 2;
+ var move_left = search_1gesture_left + notify_width + notify_margin;
+ var unzoom_left = move_left + notify_width + notify_margin;
+
+ if(_.include(this.gestures, gestureName))
+ {
+ $('#notify_search_1gesture').css('background-image', 'url("./pictos/big/' + (this.config.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'];
+ var unzooms = ['horizontal', 'vertical'];
+
+ //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)'
+ });
+ $('#notify_unzoom').css(
+ {
+ left: unzoom_left,
+ 'background-image': 'url(./pictos/notifications/unzoom_' + unzooms[Math.floor(side / 2)] + '.png)'
+ });
+
+ //On les fait apparaître.
+ $('.notifications').css(
+ {
+ opacity: "0.9"
+ });
}
/*
* Affichage de la notification de résultat & de dézoom dans une vidéo de recherche.
+ * Est appelé dans le fichier :
*/
-mosaic.prototype.searchGestureAndUnzoom = function(gestureName, mode, targetId)
+Mosaic.prototype.searchGestureAndUnzoom = 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 = "<div id='notify_search_1gesture' class='notifications'></div>";
- var notification_unzoom = "<div id='notify_unzoom' class='notifications'></div>";
-
- //On les ajoute à la mosaïque.
- $('body').append(notification_search_1gesture + notification_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 search_1gesture_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2;
- var unzoom_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 unzooms = ['horizontal', 'vertical'];
-
- //On les positionne.
- $('#notify_search_1gesture').css(
- {
- left: search_1gesture_left
- });
- $('#notify_unzoom').css(
- {
- left: unzoom_left,
- 'background-image': 'url(./pictos/notifications/unzoom_' + unzooms[Math.floor(side / 2)] + '.png)'
- });
-
- //On les fait apparaître.
- $('.notifications').css(
- {
- opacity: "0.9"
- });
+ //Si on n'est pas en mode recherche dans une video ou qu'aucune recherche n'est reconnue, on part.
+ if(this.currentMode != 'SEARCH' || this.currentSearchGesture[this.centerId] == '')
+ {
+ return;
+ }
+
+ var _this = this;
+
+ //On spécifie les notifications en div.
+ var notification_search_1gesture = "<div id='notify_search_1gesture' class='notifications'></div>";
+ var notification_unzoom = "<div id='notify_unzoom' class='notifications'></div>";
+
+ //On les ajoute à la mosaïque.
+ $('body').append(notification_search_1gesture + notification_unzoom);
+
+ //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 unzoom_left = search_1gesture_left + notify_width + notify_margin;
+
+ if(_.include(this.gestures, gestureName))
+ {
+ $('#notify_search_1gesture').css('background-image', 'url("./pictos/big/' + (this.config.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(
+ {
+ left: search_1gesture_left
+ });
+ $('#notify_unzoom').css(
+ {
+ left: unzoom_left,
+ 'background-image': 'url(./pictos/notifications/unzoom_' + unzooms[Math.floor(side / 2)] + '.png)'
+ });
+
+ //On les fait apparaître.
+ $('.notifications').css(
+ {
+ opacity: "0.9"
+ });
}
/*
* Affichage des notifications de gestures trouvées dans une recherche par courbes.
+ * Est appelé dans le fichier :
+ * curvesDetector > fonction updateDists.
*/
-mosaic.prototype.curvesGestures = function(gestures)
+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 = "<div class='notifications' id='notify_curves'></div>";
- $('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 += "<div class='notifications' id='notify_curves_" + gestures_tab[i] + "'></div>";
- }
-
- //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"
- });
+ //S'il n'y a pas de gestures à afficher.
+ if(gestures.length == 0)
+ {
+ //On ajoute une seule notification.
+ var notification_curves = "<div class='notifications' id='notify_curves'></div>";
+ $('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 += "<div class='notifications' id='notify_curves_" + gestures_tab[i] + "'></div>";
+ }
+
+ //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.config.mouseInteractions ? '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"
+ });
}
/*
- * Efface les notifications.
+ * Efface les notifications. Précède chaque notification.
+ * Est appelé dans les fichiers :
+ * neighbours > fonctions listenToNeighbours, selectNeighbour, deselectNeighbour et moveToNeighbour.
+ * notifications > fonction notifyHelp.
+ * playerControl > fonction exitTimeline.
+ * pointers > fonctions pointersTimelineSelection, launchIdlePointers et removeSearchNotificationIfOnIt.
+ * search > fonction removeFilter.
+ * zoomInteractions > fonctions preZoom, preUnzoom, zoom et unzoom.
+ * mosaic > fonctions onMouseUp, showNImages et manageControlEvents.
+ * curvesDetector > fonction updateDists.
*/
-mosaic.prototype.removeNotifications = function()
+Mosaic.prototype.removeNotifications = function()
{
- // console.trace();
- $('.notifications').remove();
+ $('.notifications').remove();
}
\ No newline at end of file