208 width: notify_width - notify_margin * 2, |
215 width: notify_width - notify_margin * 2, |
209 height: notify_height - notify_margin * 2, |
216 height: notify_height - notify_margin * 2, |
210 'z-index': 1000 |
217 'z-index': 1000 |
211 }); |
218 }); |
212 |
219 |
213 //Taille des marges des images. |
|
214 var margins = parseInt($('.notify_imgs_small').css('margin-left')); |
|
215 //Largeur des images. |
|
216 var widths = $('.notify_imgs_small').width(); |
|
217 //Hauteur des images. |
|
218 var heights = $('.notify_imgs_small').height(); |
|
219 //Position horizontale du séparateur de colonnes. |
220 //Position horizontale du séparateur de colonnes. |
220 var sep_left = $('#help_sep').position().left; |
221 var sep_left = $('#help_sep').position().left; |
221 //Marge du panneau d'aide. |
222 //Marge du panneau d'aide. |
222 var help_margin = parseInt($('#notify_help').css('margin-left')); |
223 var help_margin = parseInt($('#notify_help').css('margin-left')); |
223 |
|
224 //On calcule la taille d'une zone de recherche (une des deux parties). |
224 //On calcule la taille d'une zone de recherche (une des deux parties). |
225 var help_column_width = sep_left - help_margin; |
225 var help_column_width = sep_left - help_margin; |
|
226 |
|
227 //Taille des marges des images. |
|
228 var margins = parseInt($('.notify_imgs_small').css('margin-left')); |
|
229 //Largeur des images. |
|
230 var widths = help_column_width / 5 - 4 * margins * 2;// $('.notify_imgs_small').width(); |
|
231 //Hauteur des images. |
|
232 var heights = widths;//$('.notify_imgs_small').height(); |
|
233 |
|
234 $('.notify_imgs_small').css( |
|
235 { |
|
236 width: widths, |
|
237 height: heights, |
|
238 'background-size': widths + 'px ' + heights + 'px', |
|
239 'font-size': widths / 5 + 'px', |
|
240 'padding-left': '0px' |
|
241 }); |
|
242 |
226 //Longueur d'une image. |
243 //Longueur d'une image. |
227 var img_width = (margins * 2 + widths); |
244 var img_width = (margins * 2 + widths); |
228 |
245 |
229 //On récupère le nombre d'images affichables horizontalement pour les gestures de recherche à deux mains dans une des parties de l'aide. |
246 //On récupère le nombre d'images affichables horizontalement pour les gestures de recherche à deux mains dans une des parties de l'aide. |
230 var search_2hands_n_imgs = Math.floor(help_column_width / img_width); |
247 var search_2hands_n_imgs = Math.floor(help_column_width / img_width); |
328 for(var i = 0 ; i < controls_1hand_tab.length ; i++) |
345 for(var i = 0 ; i < controls_1hand_tab.length ; i++) |
329 { |
346 { |
330 $("#1hand_" + controls_1hand_tab[i]).css("background-image", "url('" + img_directory + controls_1hand_tab[i] + ".png')"); |
347 $("#1hand_" + controls_1hand_tab[i]).css("background-image", "url('" + img_directory + controls_1hand_tab[i] + ".png')"); |
331 $("#1hand_" + controls_1hand_tab[i]).html(this.helpText[controls_1hand_tab_text[i]]); |
348 $("#1hand_" + controls_1hand_tab[i]).html(this.helpText[controls_1hand_tab_text[i]]); |
332 } |
349 } |
333 |
350 |
334 //On les fait apparaître. |
351 //On les fait apparaître. |
335 $('#notify_help').css( |
352 $('#notify_help').css( |
336 { |
353 { |
337 opacity: "1" |
354 opacity: "1" |
338 }); |
355 }); |
339 |
356 |
340 $('.notify_imgs_big').css( |
357 $('.notify_imgs_big').css( |
341 { |
358 { |
342 opacity: "1" |
359 opacity: "1" |
343 }); |
360 }); |
|
361 |
|
362 //Si on est en mode d'interaction souris, on rajoute les détails. |
|
363 /*if(this.mouseInteractions) |
|
364 { |
|
365 //Dimensions des flèches. |
|
366 var arrowWidth = 50, arrowHeight = 50; |
|
367 |
|
368 //On ajoute les flèches pour accéder aux détails du panneau d'aide. |
|
369 var help_details_arrows = "<div id='help_details_upArrow' class='help_details_arrows'></div><div id='help_details_downArrow' class='help_details_arrows'></div>"; |
|
370 |
|
371 notify_help.append(help_details_arrows); |
|
372 |
|
373 $('#help_details_upArrow').css( |
|
374 { |
|
375 top: 0, |
|
376 left: notify_help.width() / 2 - arrowWidth / 2 |
|
377 }); |
|
378 $('#help_details_downArrow').css( |
|
379 { |
|
380 top: $('#notify_help').height() - arrowHeight, |
|
381 left: notify_help.width() / 2 - arrowWidth / 2 |
|
382 }); |
|
383 }*/ |
344 } |
384 } |
345 |
385 |
346 /* |
386 /* |
347 * Supprime l'aide. |
387 * Supprime l'aide. |
348 * Est appelé dans les fichiers : |
388 * Est appelé dans les fichiers : |
2028 } |
2068 } |
2029 |
2069 |
2030 /* |
2070 /* |
2031 * Affiche les crédits. |
2071 * Affiche les crédits. |
2032 */ |
2072 */ |
2033 Mosaic.prototype.notifyCredits = function() |
2073 Mosaic.prototype.notifyCredits = function(tabCredits) |
2034 { |
2074 { |
2035 if($('#notify_credits').length()) |
2075 //Si ils sont déjà affichés on quitte. |
2036 { |
2076 if(this.creditsDisplayed) |
2037 return; |
2077 { |
2038 } |
2078 return; |
2039 |
2079 } |
2040 var credits = "<div id='notify_credits'></div>"; |
2080 |
|
2081 //On enlève les autres notifications. |
|
2082 this.removeNotifications(); |
|
2083 |
|
2084 //On indique qu'ils sont affichés. |
|
2085 this.creditsDisplayed = true; |
|
2086 |
|
2087 //Panneau des crédits. |
|
2088 //On crée les flèches au niveau du container en cas d'overflow du texte. |
|
2089 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>"; |
|
2090 |
|
2091 //Pied de page des crédits. |
|
2092 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>"; |
2041 |
2093 |
2042 $('body').append(credits); |
2094 $('body').append(credits); |
|
2095 |
|
2096 //On récupère les éléments css du div des crédits. |
|
2097 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')); |
|
2098 |
|
2099 //On ajoute le pied de page aux crédits. |
|
2100 notify_credits.append(credits_footer); |
|
2101 |
|
2102 //Elements html contenant les crédits. |
|
2103 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>"; |
|
2104 |
|
2105 for(var i = 0 ; i < this.tabCredits.length ; i++) |
|
2106 { |
|
2107 credits_elements += "<div class='credits_film credits_text'>" + this.tabCredits[i].film + "</div><div class='credits_body credits_text'>"; |
|
2108 if(this.tabCredits[i].realisation) |
|
2109 { |
|
2110 credits_elements += this.creditsMetadata.realisation + " : " + this.tabCredits[i].realisation + "<br />"; |
|
2111 } |
|
2112 if(this.tabCredits[i].company) |
|
2113 { |
|
2114 credits_elements += this.creditsMetadata.company + " : " + this.tabCredits[i].company + "<br />"; |
|
2115 } |
|
2116 if(this.tabCredits[i].production) |
|
2117 { |
|
2118 credits_elements += this.creditsMetadata.production + " : " + this.tabCredits[i].production + "<br />"; |
|
2119 } |
|
2120 if(this.tabCredits[i].choregraphy) |
|
2121 { |
|
2122 credits_elements += this.creditsMetadata.choregraphy + " : " + this.tabCredits[i].choregraphy + "<br />"; |
|
2123 } |
|
2124 if(this.tabCredits[i].music) |
|
2125 { |
|
2126 credits_elements += this.creditsMetadata.music + " : " + this.tabCredits[i].music + "<br />"; |
|
2127 } |
|
2128 |
|
2129 credits_elements += "<br /></div>" |
|
2130 } |
|
2131 |
|
2132 credits_elements += "</div>"; |
|
2133 |
|
2134 $('#credits_container').append(credits_elements); |
|
2135 |
|
2136 //On le positionne |
|
2137 notify_credits.css( |
|
2138 { |
|
2139 left: "0px", |
|
2140 top: "0px", |
|
2141 width: window_width - notify_margin * 2 - notify_padding * 2, |
|
2142 height: window_height - notify_margin * 2 - notify_padding * 2, |
|
2143 'z-index': 1000 |
|
2144 }); |
|
2145 |
|
2146 //$('#credits_content').css('background-color', '#0000FF'); |
|
2147 |
|
2148 this.column_gap = 30; |
|
2149 // this.column_width = (notify_credits.width() - notify_margin * 2 - notify_padding * 2) / 3 - this.column_gap * 3; |
|
2150 this.column_width = 150;//Math.ceil((notify_credits.width() - this.column_gap) / 3 - notify_margin * 2); |
|
2151 //console.log(Math.ceil((notify_credits.width() - this.column_gap) / 3 - notify_margin * 2)); |
|
2152 //Dimensions des flèches. |
|
2153 var arrowWidth = 50, arrowHeight = 50; |
|
2154 //Dimensions du footer. |
|
2155 var footer_height = 100; |
|
2156 |
|
2157 //On spécifie les colonnes. |
|
2158 $('#credits_container').css( |
|
2159 { |
|
2160 position: 'absolute', |
|
2161 '-moz-column-width': this.column_width, |
|
2162 '-webkit-column-width': this.column_width, |
|
2163 '-moz-column-gap': this.column_gap, |
|
2164 '-webkit-column-gap': this.column_gap, |
|
2165 '-moz-column-rule': '1px solid #ddccb5', |
|
2166 '-webkit-column-rule': '1px solid #ddccb5' |
|
2167 }); |
|
2168 |
|
2169 //CSS du pied de page. |
|
2170 $('#credits_footer').css( |
|
2171 { |
|
2172 position: 'absolute', |
|
2173 'background-color': '#FFF', |
|
2174 width: +notify_credits.width() + notify_margin + notify_padding, |
|
2175 height: footer_height, |
|
2176 top: +notify_credits.height() - 100 + notify_margin + notify_padding, |
|
2177 left: '0px' |
|
2178 }); |
|
2179 $('#credits_footer_BBM').css( |
|
2180 { |
|
2181 position: 'absolute', |
|
2182 'background-image': 'url(./img/creditsBBM.png)', |
|
2183 'background-repeat': 'no-repeat', |
|
2184 'background-size': '300px 40px', |
|
2185 width: '300px', |
|
2186 height: '40px', |
|
2187 top: '0px', |
|
2188 left: '0px' |
|
2189 }); |
|
2190 $('#credits_footer_partners').css( |
|
2191 { |
|
2192 position: 'absolute', |
|
2193 'background-image': 'url(./img/creditsPartners.png)', |
|
2194 'background-repeat': 'no-repeat', |
|
2195 width: '386px', |
|
2196 height: '41px', |
|
2197 top: $('#credits_footer').height() - 41, |
|
2198 left: +notify_credits.width() - 386 + notify_margin + notify_padding |
|
2199 }); |
|
2200 $('#credits_footer_text').css( |
|
2201 { |
|
2202 position: 'absolute', |
|
2203 width: notify_credits.width() - $('#credits_footer_partners').width(), |
|
2204 top: '40px', |
|
2205 left: '0px', |
|
2206 }); |
|
2207 |
|
2208 //On ajoute les flèches à l'interface, bien qu'elles soient invisibles s'il n'y a pas d'overflow du texte. |
|
2209 $('#credits_upArrow').css( |
|
2210 { |
|
2211 top: 0, |
|
2212 left: notify_credits.width() / 2 - arrowWidth / 2 |
|
2213 }); |
|
2214 $('#credits_downArrow').css( |
|
2215 { |
|
2216 top: $('#credits_footer').position().top - arrowHeight, |
|
2217 left: notify_credits.width() / 2 - arrowWidth / 2 |
|
2218 }); |
|
2219 |
|
2220 //Hauteur totale du texte des crédits. |
|
2221 var credits_total_height = $('#credits_content').height(); |
|
2222 //Nombre de pages de crédits. |
|
2223 this.creditsPageLength = Math.ceil(credits_total_height / (notify_credits.height() * 3)); |
|
2224 |
|
2225 //On suppose qu'il n'y a pas d'overflow du texte des crédits. |
|
2226 this.isCreditsTextOverflow = false; |
|
2227 |
|
2228 //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. |
|
2229 if(credits_total_height > notify_credits.height() * 3) |
|
2230 { |
|
2231 //Si on est arrivé là, on a constaté un overflow du texte des crédits. |
|
2232 this.isCreditsTextOverflow = true; |
|
2233 |
|
2234 //Si on est sur la première page des crédits. |
|
2235 if(this.creditsPageNumber == 0) |
|
2236 { |
|
2237 //On ne laisse pas la place du haut pour la flèche haut puisqu'on est sur la première page. |
|
2238 $('#credits_container').css( |
|
2239 { |
|
2240 //top: 0, |
|
2241 height: notify_credits.height() - footer_height - arrowHeight |
|
2242 }); |
|
2243 $('#credits_downArrow').css('opacity', '1'); |
|
2244 } |
|
2245 //Sinon si on est sur la dernière page des crédits. |
|
2246 else if(this.creditsPageNumber + 1 == creditsPageLength) |
|
2247 { |
|
2248 $('#credits_downArrow').css('opacity', '0'); |
|
2249 } |
|
2250 //Sinon on laisse la place pour revenir en arrière ou en avant. |
|
2251 else |
|
2252 { |
|
2253 $('#credits_container').css( |
|
2254 { |
|
2255 //top: arrowHeight, |
|
2256 height: notify_credits.height() - footer_height - arrowHeight * 2, |
|
2257 }); |
|
2258 } |
|
2259 } |
2043 } |
2260 } |
2044 |
2261 |
2045 /* |
2262 /* |
2046 * Supprime les crédits. |
2263 * Supprime les crédits. |
2047 */ |
2264 */ |
2048 Mosaic.prototype.removeCredits = function() |
2265 Mosaic.prototype.removeCredits = function() |
2049 { |
2266 { |
|
2267 //On indique qu'ils ne sont plus affichés. |
|
2268 this.creditsDisplayed = false; |
|
2269 this.creditsPageNumber = 0; |
2050 $('#notify_credits').remove(); |
2270 $('#notify_credits').remove(); |
2051 } |
2271 } |