--- a/front_idill/src/mosaic/js/notifications.js Wed Aug 29 11:29:14 2012 +0200
+++ b/front_idill/src/mosaic/js/notifications.js Fri Sep 14 11:06:53 2012 +0200
@@ -175,6 +175,13 @@
//On les ajoute à la mosaïque.
$('body').append(notification_help);
+ var notify_imgs_width = $('#notify_imgs_small').css('margin-leftf')
+
+ $('.notify_imgs').css(
+ {
+ width: $('#notify_imgs_small')
+ });
+
if(this.isTablet)
{
//On rétrécit certaines images si on est sur une tablette.
@@ -210,19 +217,29 @@
'z-index': 1000
});
- //Taille des marges des images.
- var margins = parseInt($('.notify_imgs_small').css('margin-left'));
- //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-left'));
-
//On calcule la taille d'une zone de recherche (une des deux parties).
var help_column_width = sep_left - help_margin;
+
+ //Taille des marges des images.
+ var margins = parseInt($('.notify_imgs_small').css('margin-left'));
+ //Largeur des images.
+ var widths = help_column_width / 5 - 4 * margins * 2;// $('.notify_imgs_small').width();
+ //Hauteur des images.
+ var heights = widths;//$('.notify_imgs_small').height();
+
+ $('.notify_imgs_small').css(
+ {
+ width: widths,
+ height: heights,
+ 'background-size': widths + 'px ' + heights + 'px',
+ 'font-size': widths / 5 + 'px',
+ 'padding-left': '0px'
+ });
+
//Longueur d'une image.
var img_width = (margins * 2 + widths);
@@ -330,7 +347,7 @@
$("#1hand_" + controls_1hand_tab[i]).css("background-image", "url('" + img_directory + controls_1hand_tab[i] + ".png')");
$("#1hand_" + controls_1hand_tab[i]).html(this.helpText[controls_1hand_tab_text[i]]);
}
-
+
//On les fait apparaître.
$('#notify_help').css(
{
@@ -341,6 +358,29 @@
{
opacity: "1"
});
+
+ //Si on est en mode d'interaction souris, on rajoute les détails.
+ /*if(this.mouseInteractions)
+ {
+ //Dimensions des flèches.
+ var arrowWidth = 50, arrowHeight = 50;
+
+ //On ajoute les flèches pour accéder aux détails du panneau d'aide.
+ var help_details_arrows = "<div id='help_details_upArrow' class='help_details_arrows'></div><div id='help_details_downArrow' class='help_details_arrows'></div>";
+
+ notify_help.append(help_details_arrows);
+
+ $('#help_details_upArrow').css(
+ {
+ top: 0,
+ left: notify_help.width() / 2 - arrowWidth / 2
+ });
+ $('#help_details_downArrow').css(
+ {
+ top: $('#notify_help').height() - arrowHeight,
+ left: notify_help.width() / 2 - arrowWidth / 2
+ });
+ }*/
}
/*
@@ -2030,16 +2070,193 @@
/*
* Affiche les crédits.
*/
-Mosaic.prototype.notifyCredits = function()
+Mosaic.prototype.notifyCredits = function(tabCredits)
{
- if($('#notify_credits').length())
+ //Si ils sont déjà affichés on quitte.
+ if(this.creditsDisplayed)
+ {
+ return;
+ }
+
+ //On enlève les autres notifications.
+ this.removeNotifications();
+
+ //On indique qu'ils sont affichés.
+ this.creditsDisplayed = true;
+
+ //Panneau des crédits.
+ //On crée les flèches au niveau du container en cas d'overflow du texte.
+ var credits = "<div id='notify_credits'><div id='credits_upArrow' class='credits_arrows'></div><div id='credits_container'></div><div id='credits_downArrow' class='credits_arrows'></div></div>";
+
+ //Pied de page des crédits.
+ var credits_footer = "<div id='credits_footer'><div id='credits_footer_BBM'></div><div id='credits_footer_text'>" + this.creditsMetadata.footer_line1 + "<br />" + this.creditsMetadata.footer_line2 + "</div><div id='credits_footer_partners'></div></div>";
+
+ $('body').append(credits);
+
+ //On récupère les éléments css du div des crédits.
+ var notify_credits = $('#notify_credits'), window_width = $(window).width(), window_height = $(window).height(), notify_margin = parseInt(notify_credits.css('margin-left')), notify_padding = parseInt(notify_credits.css('padding-left'));
+
+ //On ajoute le pied de page aux crédits.
+ notify_credits.append(credits_footer);
+
+ //Elements html contenant les crédits.
+ var credits_elements = "<div id='credits_content'><div id='credits_title' class='credits_text'>" + this.creditsMetadata.title + "<br /></div><div id='credits_subtitle' class='credits_text'><i>" + this.creditsMetadata.subtitle + "</i><br /><br /></div>";
+
+ for(var i = 0 ; i < this.tabCredits.length ; i++)
{
- return;
+ credits_elements += "<div class='credits_film credits_text'>" + this.tabCredits[i].film + "</div><div class='credits_body credits_text'>";
+ if(this.tabCredits[i].realisation)
+ {
+ credits_elements += this.creditsMetadata.realisation + " : " + this.tabCredits[i].realisation + "<br />";
+ }
+ if(this.tabCredits[i].company)
+ {
+ credits_elements += this.creditsMetadata.company + " : " + this.tabCredits[i].company + "<br />";
+ }
+ if(this.tabCredits[i].production)
+ {
+ credits_elements += this.creditsMetadata.production + " : " + this.tabCredits[i].production + "<br />";
+ }
+ if(this.tabCredits[i].choregraphy)
+ {
+ credits_elements += this.creditsMetadata.choregraphy + " : " + this.tabCredits[i].choregraphy + "<br />";
+ }
+ if(this.tabCredits[i].music)
+ {
+ credits_elements += this.creditsMetadata.music + " : " + this.tabCredits[i].music + "<br />";
+ }
+
+ credits_elements += "<br /></div>"
}
- var credits = "<div id='notify_credits'></div>";
+ credits_elements += "</div>";
+
+ $('#credits_container').append(credits_elements);
+
+ //On le positionne
+ notify_credits.css(
+ {
+ left: "0px",
+ top: "0px",
+ width: window_width - notify_margin * 2 - notify_padding * 2,
+ height: window_height - notify_margin * 2 - notify_padding * 2,
+ 'z-index': 1000
+ });
+
+ //$('#credits_content').css('background-color', '#0000FF');
+
+ this.column_gap = 30;
+ // this.column_width = (notify_credits.width() - notify_margin * 2 - notify_padding * 2) / 3 - this.column_gap * 3;
+ this.column_width = 150;//Math.ceil((notify_credits.width() - this.column_gap) / 3 - notify_margin * 2);
+ //console.log(Math.ceil((notify_credits.width() - this.column_gap) / 3 - notify_margin * 2));
+ //Dimensions des flèches.
+ var arrowWidth = 50, arrowHeight = 50;
+ //Dimensions du footer.
+ var footer_height = 100;
+
+ //On spécifie les colonnes.
+ $('#credits_container').css(
+ {
+ position: 'absolute',
+ '-moz-column-width': this.column_width,
+ '-webkit-column-width': this.column_width,
+ '-moz-column-gap': this.column_gap,
+ '-webkit-column-gap': this.column_gap,
+ '-moz-column-rule': '1px solid #ddccb5',
+ '-webkit-column-rule': '1px solid #ddccb5'
+ });
- $('body').append(credits);
+ //CSS du pied de page.
+ $('#credits_footer').css(
+ {
+ position: 'absolute',
+ 'background-color': '#FFF',
+ width: +notify_credits.width() + notify_margin + notify_padding,
+ height: footer_height,
+ top: +notify_credits.height() - 100 + notify_margin + notify_padding,
+ left: '0px'
+ });
+ $('#credits_footer_BBM').css(
+ {
+ position: 'absolute',
+ 'background-image': 'url(./img/creditsBBM.png)',
+ 'background-repeat': 'no-repeat',
+ 'background-size': '300px 40px',
+ width: '300px',
+ height: '40px',
+ top: '0px',
+ left: '0px'
+ });
+ $('#credits_footer_partners').css(
+ {
+ position: 'absolute',
+ 'background-image': 'url(./img/creditsPartners.png)',
+ 'background-repeat': 'no-repeat',
+ width: '386px',
+ height: '41px',
+ top: $('#credits_footer').height() - 41,
+ left: +notify_credits.width() - 386 + notify_margin + notify_padding
+ });
+ $('#credits_footer_text').css(
+ {
+ position: 'absolute',
+ width: notify_credits.width() - $('#credits_footer_partners').width(),
+ top: '40px',
+ left: '0px',
+ });
+
+ //On ajoute les flèches à l'interface, bien qu'elles soient invisibles s'il n'y a pas d'overflow du texte.
+ $('#credits_upArrow').css(
+ {
+ top: 0,
+ left: notify_credits.width() / 2 - arrowWidth / 2
+ });
+ $('#credits_downArrow').css(
+ {
+ top: $('#credits_footer').position().top - arrowHeight,
+ left: notify_credits.width() / 2 - arrowWidth / 2
+ });
+
+ //Hauteur totale du texte des crédits.
+ var credits_total_height = $('#credits_content').height();
+ //Nombre de pages de crédits.
+ this.creditsPageLength = Math.ceil(credits_total_height / (notify_credits.height() * 3));
+
+ //On suppose qu'il n'y a pas d'overflow du texte des crédits.
+ this.isCreditsTextOverflow = false;
+
+ //Si la taille totale des crédits excède celle de la hauteur du panneau des crédits x 3, alors le panneau sera en plusieurs parties.
+ if(credits_total_height > notify_credits.height() * 3)
+ {
+ //Si on est arrivé là, on a constaté un overflow du texte des crédits.
+ this.isCreditsTextOverflow = true;
+
+ //Si on est sur la première page des crédits.
+ if(this.creditsPageNumber == 0)
+ {
+ //On ne laisse pas la place du haut pour la flèche haut puisqu'on est sur la première page.
+ $('#credits_container').css(
+ {
+ //top: 0,
+ height: notify_credits.height() - footer_height - arrowHeight
+ });
+ $('#credits_downArrow').css('opacity', '1');
+ }
+ //Sinon si on est sur la dernière page des crédits.
+ else if(this.creditsPageNumber + 1 == creditsPageLength)
+ {
+ $('#credits_downArrow').css('opacity', '0');
+ }
+ //Sinon on laisse la place pour revenir en arrière ou en avant.
+ else
+ {
+ $('#credits_container').css(
+ {
+ //top: arrowHeight,
+ height: notify_credits.height() - footer_height - arrowHeight * 2,
+ });
+ }
+ }
}
/*
@@ -2047,5 +2264,8 @@
*/
Mosaic.prototype.removeCredits = function()
{
+ //On indique qu'ils ne sont plus affichés.
+ this.creditsDisplayed = false;
+ this.creditsPageNumber = 0;
$('#notify_credits').remove();
}
\ No newline at end of file