# HG changeset patch # User bastiena # Date 1348316915 -7200 # Node ID 58ba3ae2d3d90f7aa71c3baadf7217f8f6d53f43 # Parent d84290f64c4cb91e4cc2916230e37d935c976694 Front IDILL: credits algorithm updated (3 columns only) diff -r d84290f64c4c -r 58ba3ae2d3d9 front_idill/src/mosaic/js/notifications.js --- a/front_idill/src/mosaic/js/notifications.js Fri Sep 21 16:13:20 2012 +0200 +++ b/front_idill/src/mosaic/js/notifications.js Sat Sep 22 14:28:35 2012 +0200 @@ -2218,7 +2218,7 @@ //Panneau des crédits. //On crée les flèches au niveau du container en cas d'overflow du texte. - var credits = "
"; + var credits = "
"; //Pied de page des crédits. var credits_footer = ""; @@ -2232,7 +2232,7 @@ notify_credits.append(credits_footer); //Elements html contenant les crédits. - var credits_elements = "
" + this.creditsMetadata.title + "
" + this.creditsMetadata.subtitle + "

"; + var credits_elements = "
" + this.creditsMetadata.title + "
" + this.creditsMetadata.subtitle + "

"; for(var i = 0 ; i < this.tabCredits.length ; i++) { @@ -2259,6 +2259,15 @@ } credits_elements += "
" + + if(i == Math.floor(this.tabCredits.length / 3)) + { + credits_elements += "
" + } + else if(i == Math.floor(this.tabCredits.length * 2 / 3)) + { + credits_elements += "
" + } } credits_elements += "
"; @@ -2290,14 +2299,38 @@ $('#credits_container').css( { position: 'absolute', - '-moz-column-width': this.column_width, + /*,'-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' + '-webkit-column-rule': '1px solid #ddccb5'*/ }); + $('.credits_content').css( + { + position: 'absolute', + width: Math.floor(notify_credits.width() / 3) + }); + $('#credits_content_left').css( + { + top: 0, + left: 0 + }); + $('#credits_content_center').css( + { + top: 0, + left: Math.floor(notify_credits.width() / 3) + }); + $('#credits_content_right').css( + { + top: 0, + left: Math.floor(notify_credits.width() * 2 / 3) + }); + + //On récupère la hauteur de la colonne la plus longue. + var credits_content_max_height = Math.max(Math.max($('#credits_content_left').height(), $('#credits_content_center').height()), $('#credits_content_right').height()); + //CSS du pied de page. $('#credits_footer').css( { @@ -2349,16 +2382,34 @@ left: notify_credits.width() / 2 - arrowWidth / 2 }); - //Hauteur totale du texte des crédits. - var credits_total_height = $('#credits_content').height(); + //On masque ce qu'il y a derrière les flèches. + $('.credits_masks').css( + { + position: 'absolute', + left: 0, + 'background-color': '#D1D2D4', + width: notify_credits.width(), + height: arrowHeight, + opacity: 0, + 'z-index': 100 + }); + $('#credits_upArrow_mask').css( + { + top: 0 + }); + $('#credits_downArrow_mask').css( + { + top: $('#credits_footer').position().top - arrowHeight + }); + //Nombre de pages de crédits. - this.creditsPageLength = Math.ceil(credits_total_height / (notify_credits.height() * 3)); + this.creditsPageLength = Math.ceil(credits_content_max_height / (notify_credits.height() - footer_height - 2 * arrowHeight)); //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) + if(credits_content_max_height > (notify_credits.height() - footer_height - 2 * arrowHeight)) { //Si on est arrivé là, on a constaté un overflow du texte des crédits. this.isCreditsTextOverflow = true; @@ -2372,12 +2423,12 @@ //top: 0, height: notify_credits.height() - footer_height - arrowHeight }); - $('#credits_downArrow').css('opacity', '1'); + $('#credits_downArrow, #credits_downArrow_mask').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'); + $('#credits_downArrow, #credits_downArrow_mask').css('opacity', '0'); } //Sinon on laisse la place pour revenir en arrière ou en avant. else diff -r d84290f64c4c -r 58ba3ae2d3d9 front_idill/src/mosaic/js/pointers.js --- a/front_idill/src/mosaic/js/pointers.js Fri Sep 21 16:13:20 2012 +0200 +++ b/front_idill/src/mosaic/js/pointers.js Sat Sep 22 14:28:35 2012 +0200 @@ -1201,11 +1201,11 @@ //Si on est sur la première page, on cache la flèche haut. if(this.creditsPageNumber == 0) { - $('#credits_upArrow').css( + $('#credits_upArrow, #credits_upArrow_mask').css( { opacity: 0 }); - $('#credits_downArrow').css( + $('#credits_downArrow, #credits_downArrow_mask').css( { opacity: 1 }); @@ -1218,11 +1218,11 @@ //Si on est sur la dernière page, on cache la flèche bas. else if(this.creditsPageNumber + 1 >= this.creditsPageLength) { - $('#credits_upArrow').css( + $('#credits_upArrow, #credits_upArrow_mask').css( { opacity: 1 }); - $('#credits_downArrow').css( + $('#credits_downArrow, #credits_downArrow_mask').css( { opacity: 0 }); @@ -1235,11 +1235,11 @@ //Si on est dans les autres pages, on affiche les deux flèches. else { - $('#credits_upArrow').css( + $('#credits_upArrow, #credits_upArrow_mask').css( { opacity: 1 }); - $('#credits_downArrow').css( + $('#credits_downArrow, #credits_downArrow_mask').css( { opacity: 1 }); @@ -1249,11 +1249,11 @@ height: notify_credits.height() - footer_height - 2 * arrowHeight - margin }); } - + //console.log('in'); //On déplace le texte des crédits. $('#credits_container').css( { - left: -($('#credits_container').width() * N - parseInt(notify_credits.css('margin-left')))// + this.column_gap) + top: -(($('#credits_container').height() - 2 * $('.credits_arrows').height()) * N - parseInt(notify_credits.css('margin-left')))// + this.column_gap) }); }