--- a/front_idill/src/mosaic/js/notifications.js Thu Aug 02 11:54:08 2012 +0200
+++ b/front_idill/src/mosaic/js/notifications.js Wed Aug 08 18:40:40 2012 +0200
@@ -130,6 +130,9 @@
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>";
+
+ //On ajoute ce qu'il faut pour quitter l'aide.
+
}
//Titre de la colonne des actions de contrôle.
@@ -172,9 +175,29 @@
//On les ajoute à la mosaïque.
$('body').append(notification_help);
+ if(this.isTablet)
+ {
+ //On rétrécit certaines images si on est sur une tablette.
+ $('#search_img, #controls_img').css(
+ {
+ height: 150,
+ 'background-size': '150px 150px'
+ });
+
+ $('.notify_imgs_small').css(
+ {
+ height: 80,
+ width: 80,
+ 'background-size': '80px 80px'
+ });
+
+ //On ajoute l'icone de sortie.
+ this.exitIcon();
+ }
+
//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_margin = parseInt($('#notify_help').css('margin-left'));
var notify_ = 10;
//On les positionne.
@@ -188,7 +211,7 @@
});
//Taille des marges des images.
- var margins = parseInt($('.notify_imgs_small').css('margin'));
+ var margins = parseInt($('.notify_imgs_small').css('margin-left'));
//Largeur des images.
var widths = $('.notify_imgs_small').width();
//Hauteur des images.
@@ -196,7 +219,7 @@
//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'));
+ var help_margin = parseInt($('#notify_help').css('margin-left'));
//On calcule la taille d'une zone de recherche (une des deux parties).
var help_column_width = sep_left - help_margin;
@@ -212,7 +235,7 @@
$('#search_2hands_imgs').css(
{
'padding-left': search_2hands_padding_left,
- 'height': ($('.notify_imgs_small').height() * 2 + parseInt($('.notify_imgs_small').css('margin')))
+ 'height': ($('.notify_imgs_small').height() * 2 + parseInt($('.notify_imgs_small').css('margin-left')))
});
//On récupère le nombre d'images affichables horizontalement pour les gestures de recherche corporelles dans une des parties de l'aide.
@@ -224,7 +247,7 @@
$('#search_body_imgs').css(
{
'padding-left': search_body_padding_left,
- 'height': ($('.notify_imgs_small').height() * 2 + parseInt($('.notify_imgs_small').css('margin')))
+ 'height': ($('.notify_imgs_small').height() * 2 + parseInt($('.notify_imgs_small').css('margin-left')))
});
//On récupère le nombre d'images affichables horizontalement pour les gestures de controle dans une des parties de l'aide.
@@ -353,7 +376,7 @@
{
//On ajoute à la mosaïque seulement la recherche.
$('body').append(notification_search);
- notify_margin = parseInt($('.notifications').css('margin'));
+ notify_margin = parseInt($('.notifications').css('margin-left'));
notify_width = $('.notifications').width();
notify_height = $('.notifications').height();
//On calcule leurs coordonnées.
@@ -365,7 +388,7 @@
{
//On les ajoute à la mosaïque.
$('body').append(notification_selection + notification_search);
- notify_margin = parseInt($('.notifications').css('margin'));
+ notify_margin = parseInt($('.notifications').css('margin-left'));
notify_width = $('.notifications').width();
notify_height = $('.notifications').height();
//On calcule leurs coordonnées.
@@ -416,7 +439,7 @@
//On calcule ses coordonnées et dimensions.
var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
- var notify_margin = parseInt($('.notifications').css('margin'));
+ var notify_margin = parseInt($('.notifications').css('margin-left'));
var selection_left = $(window).width() / 2 - (notify_width) / 2 - notify_margin;
if(this.config.mouseInteractions)
@@ -462,7 +485,7 @@
//On calcule ses coordonnées et dimensions.
var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
- var notify_margin = parseInt($('.notifications').css('margin'));
+ var notify_margin = parseInt($('.notifications').css('margin-left'));
var search_left = $(window).width() / 2 - notify_width / 2 - notify_margin;
if(this.config.mouseInteractions)
@@ -506,7 +529,7 @@
//On les ajoute à la mosaïque.
$('body').append(notification_selection + notification_search);
- var notify_width = $('.notifications').width(), notify_height = $('.notifications').height(), notify_margin = parseInt($('.notifications').css('margin'));
+ var notify_width = $('.notifications').width(), notify_height = $('.notifications').height(), notify_margin = parseInt($('.notifications').css('margin-left'));
//On calcule leurs coordonnées.
var selection_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2;
@@ -566,7 +589,7 @@
//On calcule leurs coordonnées et dimensions.
var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
- var notify_margin = parseInt($('.notifications').css('margin'));
+ var notify_margin = parseInt($('.notifications').css('margin-left'));
var point_left = $(window).width() / 2 - (notify_width) / 2 - notify_margin;
if(_.include(this.gestures, gestureName))
@@ -592,6 +615,11 @@
{
opacity: "0.9"
});
+
+ if(this.isTablet)
+ {
+ this.searchExitIcon();
+ }
}
/*
@@ -616,7 +644,7 @@
//On calcule leurs coordonnées et dimensions.
var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
- var notify_margin = parseInt($('.notifications').css('margin'));
+ var notify_margin = parseInt($('.notifications').css('margin-left'));
var search_1gesture_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2;
var selection_left = search_1gesture_left + notify_width + notify_margin;
@@ -679,7 +707,7 @@
//On calcule leurs coordonnées et dimensions.
var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
- var notify_margin = parseInt($('.notifications').css('margin'));
+ var notify_margin = parseInt($('.notifications').css('margin-left'));
var point_left = $(window).width() / 2 - (notify_width) / 2 - notify_margin;
var notifyTop = 0, notifyLeft = 0;
@@ -731,7 +759,7 @@
//On calcule leurs coordonnées et dimensions.
var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
- var notify_margin = parseInt($('.notifications').css('margin'));
+ var notify_margin = parseInt($('.notifications').css('margin-left'));
var move_left = $(window).width() / 2 - (notify_width) / 2 + notify_margin;
var side = $.inArray(parseInt(targetId), this.neighboursIds);
@@ -786,7 +814,7 @@
//On calcule leurs coordonnées et dimensions.
var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
- var notify_margin = parseInt($('.notifications').css('margin'));
+ var notify_margin = parseInt($('.notifications').css('margin-left'));
var move_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2;
var unzoom_left = move_left + notify_width + notify_margin;
@@ -850,7 +878,7 @@
//On calcule ses coordonnées et dimensions.
var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
- var notify_margin = parseInt($('.notifications').css('margin'));
+ var notify_margin = parseInt($('.notifications').css('margin-left'));
var unzoom_left = $(window).width() / 2 - notify_width / 2 - notify_margin;
var side = $.inArray(parseInt(targetId), this.neighboursIds);
@@ -903,7 +931,7 @@
//On calcule ses coordonnées et dimensions.
var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
- var notify_margin = parseInt($('.notifications').css('margin'));
+ var notify_margin = parseInt($('.notifications').css('margin-left'));
var timeline_left = $(window).width() / 2 - notify_width / 2 - notify_margin;
var notifyTop = 0, notifyLeft = 0;
@@ -949,7 +977,7 @@
//On calcule ses coordonnées et dimensions.
var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
- var notify_margin = parseInt($('.notifications').css('margin'));
+ var notify_margin = parseInt($('.notifications').css('margin-left'));
var search_left = $(window).width() / 2 - notify_width / 2 - notify_margin;
var notifyTop = 0, notifyLeft = 0;
@@ -994,7 +1022,7 @@
//On calcule leurs coordonnées et dimensions.
var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
- var notify_margin = parseInt($('.notifications').css('margin'));
+ var notify_margin = parseInt($('.notifications').css('margin-left'));
var search_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2;
var swipe_left = search_left + notify_width + notify_margin;
@@ -1052,7 +1080,7 @@
//On calcule leurs coordonnées et dimensions.
var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
- var notify_margin = parseInt($('.notifications').css('margin'));
+ var notify_margin = parseInt($('.notifications').css('margin-left'));
var search_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2;
var move_left = search_left + notify_width + notify_margin;
@@ -1113,7 +1141,7 @@
//On calcule leurs coordonnées et dimensions.
var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
- var notify_margin = parseInt($('.notifications').css('margin'));
+ var notify_margin = parseInt($('.notifications').css('margin-left'));
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;
@@ -1183,7 +1211,7 @@
//On calcule leurs coordonnées et dimensions.
var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
- var notify_margin = parseInt($('.notifications').css('margin'));
+ var notify_margin = parseInt($('.notifications').css('margin-left'));
var search_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2;
var unzoom_left = search_left + notify_width + notify_margin;
@@ -1246,10 +1274,10 @@
//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 notify_margin = parseInt($('.notifications').css('margin-left'));
var point_left = $(window).width() / 2 - (notify_width) / 2 - notify_margin;
if(_.include(this.gestures, gestureName))
@@ -1275,6 +1303,11 @@
{
opacity: "0.9"
});
+
+ if(this.isTablet)
+ {
+ this.searchExitIcon();
+ }
}
/*
@@ -1298,10 +1331,10 @@
//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 notify_margin = parseInt($('.notifications').css('margin-left'));
var search_1gesture_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2;
var swipe_left = search_1gesture_left + notify_width + notify_margin;
@@ -1364,10 +1397,10 @@
//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 notify_margin = parseInt($('.notifications').css('margin-left'));
var search_1gesture_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2;
var move_left = search_1gesture_left + notify_width + notify_margin;
@@ -1408,6 +1441,11 @@
{
opacity: "0.9"
});
+
+ if(this.isTablet)
+ {
+ this.searchExitIcon();
+ }
}
/*
@@ -1435,7 +1473,7 @@
//On calcule leurs coordonnées et dimensions.
var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
- var notify_margin = parseInt($('.notifications').css('margin'));
+ var notify_margin = parseInt($('.notifications').css('margin-left'));
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;
@@ -1484,6 +1522,11 @@
{
opacity: "0.9"
});
+
+ if(this.isTablet)
+ {
+ this.searchExitIcon();
+ }
}
/*
@@ -1509,7 +1552,7 @@
//On calcule leurs coordonnées et dimensions.
var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
- var notify_margin = parseInt($('.notifications').css('margin'));
+ var notify_margin = parseInt($('.notifications').css('margin-left'));
var search_1gesture_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2;
var unzoom_left = search_1gesture_left + notify_width + notify_margin;
@@ -1568,7 +1611,7 @@
//On calcule leurs dimensions et coordonnées.
var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
- var notify_margin = parseInt($('.notifications').css('margin'));
+ var notify_margin = parseInt($('.notifications').css('margin-left'));
var curves_left = $(window).width() / 2 - (notify_width + notify_margin * 2) / 2;
$('#notify_curves').css(
@@ -1586,24 +1629,40 @@
//Sinon, on les met dans un tableau.
var gestures_tab = gestures.split(';');
- var notifications_curves_gestures = '';
+ var notifications_curves_gestures = "<div id='notify_curves_container'>";
//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>";
+ notifications_curves_gestures += "<div class='notification_curves' id='notify_curves_" + gestures_tab[i] + "'></div>";
}
+
+ notifications_curves_gestures += "</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 = [];
+ var notify_width = $('.notification_curves').width(), notify_height = $('.notification_curves').height();
+ var notify_margin = parseInt($('.notification_curves').css('margin-left'));
+
+ //Nombre de notifications dans une ligne.
+ var notify_in_a_row = Math.floor($(window).width() / (+notify_width + 2 * notify_margin));
+ //Espace libre restant sur la ligne.
+ var free_space = $(window).width() - notify_in_a_row * (+notify_width + 2 * notify_margin);
+
+ //On met à jour le container.
+ $('#notify_curves_container').css(
+ {
+ height: Math.ceil(gestures_tab.length * (+notify_width + 2 * notify_margin) / $(window).width()),
+ 'margin-left': free_space / 2,
+ 'margin-right': free_space / 2
+ });
+
+ // 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;
+ // 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++)
{
@@ -1613,16 +1672,16 @@
//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;
+ // 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]);
+ // $('#notify_curves_' + gestures_tab[i]).css('left', curves_gestures_left[i]);
this.putText($('#notify_curves_' + gestures_tab[i]), this.notificationStrings[gestures_tab[i]]);
}
//On les fait apparaître.
- $('.notifications').css(
+ $('.notification_curves').css(
{
opacity: "0.9"
});
@@ -1643,6 +1702,8 @@
Mosaic.prototype.removeNotifications = function()
{
$('.notifications').remove();
+ $('#notify_curves_container').remove();
+ $('.notification_curves').remove();
}
/*
@@ -1671,7 +1732,7 @@
$('#helpIcon').css(
{
top: 0,
- left: $(window).width() - $('#helpIcon').width() - 2 * parseInt($('#helpIcon').css('margin'))
+ left: $(window).width() - $('#helpIcon').width() - 2 * parseInt($('#helpIcon').css('margin-left'))
});
}
@@ -1709,7 +1770,7 @@
{
width: 100,
height: 100,
- left: $(window).width() - 100 - 2 * parseInt($('#helpIcon').css('margin'))
+ left: $(window).width() - 100 - 2 * parseInt($('#helpIcon').css('margin-left'))
}, this.config.timeShowBigHelp, function()
{
_this.isHelpIconZoomed = true;
@@ -1740,10 +1801,97 @@
{
width: 50,
height: 50,
- left: $(window).width() - 50 - 2 * parseInt($('#helpIcon').css('margin'))
+ left: $(window).width() - 50 - 2 * parseInt($('#helpIcon').css('margin-left'))
}, this.config.timeShowBigHelp, function()
{
_this.isHelpIconZoomed = false;
_this.isHelpIconZooming = false;
});
+}
+
+/*
+ * Affiche l'icone de sortie pour tablettes.
+*/
+Mosaic.prototype.exitIcon = function()
+{
+ this.removeExitIcon();
+ //On construit le div.
+ var exitIcon = "<img id='exitIcon' src='./img/exitIcon.png' />";
+ //On l'ajoute.
+ $('body').append(exitIcon);
+ //On spécifie ses coordonnées.
+ $('#exitIcon').css(
+ {
+ top: 0,
+ left: $(window).width() - $('#exitIcon').width() - 2 * parseInt($('#exitIcon').css('margin-left')),
+ 'z-index': 1000
+ });
+}
+
+/*
+ * Supprime l'icone de sortie pour tablettes.
+*/
+Mosaic.prototype.removeExitIcon = function()
+{
+ $('#exitIcon').remove();
+}
+
+/*
+ * Affiche l'icone de retour à la mosaïque pour tablettes.
+*/
+Mosaic.prototype.homeIcon = function()
+{
+ this.removeHomeIcon();
+ //On construit le div.
+ var homeIcon = "<img id='homeIcon' src='./img/homeIcon.png' />";
+ //On l'ajoute.
+ $('body').append(homeIcon);
+ //On spécifie ses coordonnées.
+ $('#homeIcon').css(
+ {
+ top: 0,
+ left: 0,
+ 'z-index': 900
+ });
+}
+
+/*
+ * Supprime l'icone de sortie pour tablettes.
+*/
+Mosaic.prototype.removeHomeIcon = function()
+{
+ $('#homeIcon').remove();
+}
+
+/*
+ * Affiche l'icone de sortie de recherche pour tablettes.
+*/
+Mosaic.prototype.searchExitIcon = function()
+{
+ //S'il n'y a pas de notification de recherche, on s'en va.
+ if($('#notify_search_1gesture').length == 0)
+ {
+ return;
+ }
+
+ this.removeSearchExitIcon();
+ //On construit le div.
+ var searchExitIcon = "<img id='searchExitIcon' src='./img/exitIcon.png' />";
+ //On l'ajoute.
+ $('body').append(searchExitIcon);
+ //On spécifie ses coordonnées.
+ $('#searchExitIcon').css(
+ {
+ top: 0,
+ left: +$('#notify_search_1gesture').position().left + $('#notify_search_1gesture').width() - $('#searchExitIcon').width() - parseInt($('#searchExitIcon').css('margin-left')) / 2,
+ 'z-index': 900
+ });
+}
+
+/*
+ * Supprime l'icone de sortie de recherche pour tablettes.
+*/
+Mosaic.prototype.removeSearchExitIcon = function()
+{
+ $('#searchExitIcon').remove();
}
\ No newline at end of file