2028 } |
2028 } |
2029 |
2029 |
2030 /* |
2030 /* |
2031 * Affiche les crédits. |
2031 * Affiche les crédits. |
2032 */ |
2032 */ |
2033 Mosaic.prototype.notifyCredits = function() |
2033 Mosaic.prototype.notifyCredits = function(tabCredits) |
2034 { |
2034 { |
2035 if($('#notify_credits').length()) |
2035 //Si ils sont déjà affichés on quitte. |
2036 { |
2036 if(this.creditsDisplayed) |
2037 return; |
2037 { |
2038 } |
2038 return; |
2039 |
2039 } |
2040 var credits = "<div id='notify_credits'></div>"; |
2040 |
|
2041 //On enlève les autres notifications. |
|
2042 this.removeNotifications(); |
|
2043 |
|
2044 //On indique qu'ils sont affichés. |
|
2045 this.creditsDisplayed = true; |
|
2046 |
|
2047 //Panneau des crédits. |
|
2048 //On crée les flèches au niveau du container en cas d'overflow du texte. |
|
2049 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>"; |
|
2050 |
|
2051 //Pied de page des crédits. |
|
2052 var credits_footer = "<div id='credits_footer'><div id='credits_footer_BBM'></div><div id='credits_footer_text'>" + this.creditsMetadata.footer + "</div><div id='credits_footer_partners'></div></div>"; |
2041 |
2053 |
2042 $('body').append(credits); |
2054 $('body').append(credits); |
|
2055 |
|
2056 //On récupère les éléments css du div des crédits. |
|
2057 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')); |
|
2058 |
|
2059 //On ajoute le pied de page aux crédits. |
|
2060 notify_credits.append(credits_footer); |
|
2061 |
|
2062 //Elements html contenant les crédits. |
|
2063 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>"; |
|
2064 |
|
2065 for(var i = 0 ; i < this.tabCredits.length ; i++) |
|
2066 { |
|
2067 credits_elements += "<div class='credits_film credits_text'>" + this.tabCredits[i].film + "</div><div class='credits_body credits_text'>"; |
|
2068 if(this.tabCredits[i].realisation) |
|
2069 { |
|
2070 credits_elements += this.creditsMetadata.realisation + " : " + this.tabCredits[i].realisation + "<br />"; |
|
2071 } |
|
2072 if(this.tabCredits[i].company) |
|
2073 { |
|
2074 credits_elements += this.creditsMetadata.company + " : " + this.tabCredits[i].company + "<br />"; |
|
2075 } |
|
2076 if(this.tabCredits[i].production) |
|
2077 { |
|
2078 credits_elements += this.creditsMetadata.production + " : " + this.tabCredits[i].production + "<br />"; |
|
2079 } |
|
2080 if(this.tabCredits[i].choregraphy) |
|
2081 { |
|
2082 credits_elements += this.creditsMetadata.choregraphy + " : " + this.tabCredits[i].choregraphy + "<br />"; |
|
2083 } |
|
2084 if(this.tabCredits[i].music) |
|
2085 { |
|
2086 credits_elements += this.creditsMetadata.music + " : " + this.tabCredits[i].music + "<br />"; |
|
2087 } |
|
2088 |
|
2089 credits_elements += "<br /></div>" |
|
2090 } |
|
2091 |
|
2092 credits_elements += "</div>"; |
|
2093 |
|
2094 $('#credits_container').append(credits_elements); |
|
2095 |
|
2096 //On le positionne |
|
2097 notify_credits.css( |
|
2098 { |
|
2099 left: "0px", |
|
2100 top: "0px", |
|
2101 width: window_width - notify_margin * 2 - notify_padding * 2, |
|
2102 height: window_height - notify_margin * 2 - notify_padding * 2, |
|
2103 'z-index': 1000 |
|
2104 }); |
|
2105 |
|
2106 //$('#credits_content').css('background-color', '#0000FF'); |
|
2107 |
|
2108 this.column_gap = 30; |
|
2109 // this.column_width = (notify_credits.width() - notify_margin * 2 - notify_padding * 2) / 3 - this.column_gap * 3; |
|
2110 this.column_width = 150;//Math.ceil((notify_credits.width() - this.column_gap) / 3 - notify_margin * 2); |
|
2111 //console.log(Math.ceil((notify_credits.width() - this.column_gap) / 3 - notify_margin * 2)); |
|
2112 //Dimensions des flèches. |
|
2113 var arrowWidth = 50, arrowHeight = 50; |
|
2114 //Dimensions du footer. |
|
2115 var footer_height = 100; |
|
2116 |
|
2117 //On spécifie les colonnes. |
|
2118 $('#credits_container').css( |
|
2119 { |
|
2120 position: 'absolute', |
|
2121 '-moz-column-width': this.column_width, |
|
2122 '-webkit-column-width': this.column_width, |
|
2123 '-moz-column-gap': this.column_gap, |
|
2124 '-webkit-column-gap': this.column_gap, |
|
2125 '-moz-column-rule': '1px solid #ddccb5', |
|
2126 '-webkit-column-rule': '1px solid #ddccb5' |
|
2127 }); |
|
2128 |
|
2129 //CSS du pied de page. |
|
2130 $('#credits_footer').css( |
|
2131 { |
|
2132 position: 'absolute', |
|
2133 'background-color': '#FFF', |
|
2134 width: +notify_credits.width() + notify_margin + notify_padding, |
|
2135 height: footer_height, |
|
2136 top: +notify_credits.height() - 100 + notify_margin + notify_padding, |
|
2137 left: '0px' |
|
2138 }); |
|
2139 $('#credits_footer_BBM').css( |
|
2140 { |
|
2141 position: 'absolute', |
|
2142 'background-image': 'url(./img/creditsBBM.png)', |
|
2143 'background-repeat': 'no-repeat', |
|
2144 'background-size': '300px 40px', |
|
2145 width: '300px', |
|
2146 height: '40px', |
|
2147 top: '0px', |
|
2148 left: '0px' |
|
2149 }); |
|
2150 $('#credits_footer_partners').css( |
|
2151 { |
|
2152 position: 'absolute', |
|
2153 'background-image': 'url(./img/creditsPartners.png)', |
|
2154 'background-repeat': 'no-repeat', |
|
2155 width: '386px', |
|
2156 height: '41px', |
|
2157 top: $('#credits_footer').height() - 41, |
|
2158 left: +notify_credits.width() - 386 + notify_margin + notify_padding |
|
2159 }); |
|
2160 $('#credits_footer_text').css( |
|
2161 { |
|
2162 position: 'absolute', |
|
2163 width: notify_credits.width() - $('#credits_footer_partners').width(), |
|
2164 top: '40px', |
|
2165 left: '0px', |
|
2166 }); |
|
2167 |
|
2168 //On ajoute les flèches à l'interface, bien qu'elles soient invisibles s'il n'y a pas d'overflow du texte. |
|
2169 $('#credits_upArrow').css( |
|
2170 { |
|
2171 top: 0, |
|
2172 left: notify_credits.width() / 2 - arrowWidth / 2 |
|
2173 }); |
|
2174 $('#credits_downArrow').css( |
|
2175 { |
|
2176 top: $('#credits_footer').position().top - arrowHeight, |
|
2177 left: notify_credits.width() / 2 - arrowWidth / 2 |
|
2178 }); |
|
2179 |
|
2180 //Hauteur totale du texte des crédits. |
|
2181 var credits_total_height = $('#credits_content').height(); |
|
2182 //Nombre de pages de crédits. |
|
2183 this.creditsPageLength = Math.ceil(credits_total_height / (notify_credits.height() * 3)); |
|
2184 |
|
2185 //On suppose qu'il n'y a pas d'overflow du texte des crédits. |
|
2186 this.isCreditsTextOverflow = false; |
|
2187 |
|
2188 //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. |
|
2189 if(credits_total_height > notify_credits.height() * 3) |
|
2190 { |
|
2191 //Si on est arrivé là, on a constaté un overflow du texte des crédits. |
|
2192 this.isCreditsTextOverflow = true; |
|
2193 |
|
2194 //Si on est sur la première page des crédits. |
|
2195 if(this.creditsPageNumber == 0) |
|
2196 { |
|
2197 //On ne laisse pas la place du haut pour la flèche haut puisqu'on est sur la première page. |
|
2198 $('#credits_container').css( |
|
2199 { |
|
2200 //top: 0, |
|
2201 height: notify_credits.height() - footer_height - arrowHeight |
|
2202 }); |
|
2203 $('#credits_downArrow').css('opacity', '1'); |
|
2204 } |
|
2205 //Sinon si on est sur la dernière page des crédits. |
|
2206 else if(this.creditsPageNumber + 1 == creditsPageLength) |
|
2207 { |
|
2208 $('#credits_downArrow').css('opacity', '0'); |
|
2209 } |
|
2210 //Sinon on laisse la place pour revenir en arrière ou en avant. |
|
2211 else |
|
2212 { |
|
2213 $('#credits_container').css( |
|
2214 { |
|
2215 //top: arrowHeight, |
|
2216 height: notify_credits.height() - footer_height - arrowHeight * 2, |
|
2217 }); |
|
2218 } |
|
2219 } |
2043 } |
2220 } |
2044 |
2221 |
2045 /* |
2222 /* |
2046 * Supprime les crédits. |
2223 * Supprime les crédits. |
2047 */ |
2224 */ |
2048 Mosaic.prototype.removeCredits = function() |
2225 Mosaic.prototype.removeCredits = function() |
2049 { |
2226 { |
|
2227 //On indique qu'ils ne sont plus affichés. |
|
2228 this.creditsDisplayed = false; |
|
2229 this.creditsPageNumber = 0; |
2050 $('#notify_credits').remove(); |
2230 $('#notify_credits').remove(); |
2051 } |
2231 } |