# HG changeset patch # User bastiena # Date 1347613613 -7200 # Node ID 417d4b573bc8bdd850472d83c49001db03550de0 # Parent 34afef0f9e189ffac61e6c5ff4ac5ef05262ad43 Front IDILL: credits updated with a second footer part diff -r 34afef0f9e18 -r 417d4b573bc8 front_idill/src/lang/en.json --- a/front_idill/src/lang/en.json Wed Aug 29 11:29:14 2012 +0200 +++ b/front_idill/src/lang/en.json Fri Sep 14 11:06:53 2012 +0200 @@ -1,50 +1,126 @@ { - "gesturesText":["fall", "jump", "spin", "group spin", "bend", "arm carriage", "knee up", "breakdance", "wave", "no motion", "contact", "up-down", "large cast"], - "notificationStrings":{ - "select":"Select", - "confirm":"Confirm", - "timeline":"Timeline move", - "move":"Move", - "search":"Search", - "next":"Next", - "previous":"Previous", - "unzoom":"Unzoom", - "unknown":"Unknown gesture", - "fall":"Fall", - "jump":"Jump", - "circle":"Spin", - "screw":"Screw", - "bend":"Bend", - "arc":"Arc", - "knee-up":"Knee up", - "right-angle":"Breakdance", - "wave":"Wave", - "no-motion":"No motion", - "contact":"Contact", - "grand-jete":"Grand jeté", - "up-down":"Up down" + "gesturesText":["fall", "jump", "spin", "group spin", "bend", "arm carriage", "knee up", "breakdance", "wave", "no motion", "contact", "up-down", "large cast"], + "notificationStrings":{ + "select":"Select", + "confirm":"Confirm", + "timeline":"Timeline move", + "move":"Move", + "search":"Search", + "next":"Next", + "previous":"Previous", + "unzoom":"Unzoom", + "unknown":"Unknown gesture", + "fall":"Fall", + "jump":"Jump", + "circle":"Spin", + "screw":"Screw", + "bend":"Bend", + "arc":"Arc", + "knee-up":"Knee up", + "right-angle":"Breakdance", + "wave":"Wave", + "no-motion":"No motion", + "contact":"Contact", + "grand-jete":"Grand jeté", + "up-down":"Up down" + }, + "helpText":{ + "search_title":"Search", + "search_2hands_text":"Curves to be drawn with both hands", + "search_mouse_text":"Curves to be mouse-drawn", + "search_touch_text":"Curves to be finger-drawn", + "search_body_text":"Gestures to be performed with your body", + "controls_title":"Controls", + "controls_1hand_text":"Controls to be performed with your hands", + "controls_mouse_text":"Controls to be performed with your mouse", + "controls_touch_text":"Controls to be performed with your finger", + "controls_timeline":"Move in timeline", + "controls_mos_horizontal":"Unzoom", + "controls_mos_vertical":"Unzoom", + "controls_move_down":"Move", + "controls_move_left":"Move", + "controls_move_right":"Move", + "controls_move_up":"Move", + "controls_next":"Next", + "controls_previous":"Previous", + "controls_selection":"Selection" + }, + "choice":{ + "caution":"Warning. This prototype was designed to be launched on Google Chrome 20 or greater.", + "mouse":"Mouse interaction mode", + "kinect":"Kinect interaction mode" + }, + "credits_lang":{ + "title":"Presented films credits", + "subtitle":"idill festival / idill.eu (2011 and 2009 ed.)", + "realisation":"realisation", + "company":"company", + "production":"production", + "choregraphy":"choregraphy", + "music":"music", + "footer_line1":"browsebymotion is a contactless video interface that permits you to browse in dance films (idill festival editions 2011 and 2009) using gestures. Select a video and search by dancing or by using a gesture that is part of the grammar.", + "footer_line2":"Project developped with the support of the Culture and Communication Ministery – General Direction of Artistic Creation." }, - "helpText":{ - "search_title":"Search", - "search_2hands_text":"Curves to be drawn with both hands", - "search_mouse_text":"Curves to be mouse-drawn", - "search_body_text":"Gestures to be performed with your body", - "controls_title":"Controls", - "controls_1hand_text":"Gestures to be performed with your hand", - "controls_timeline":"Move in timeline", - "controls_mos_horizontal":"Unzoom", - "controls_mos_vertical":"Unzoom", - "controls_move_down":"Move", - "controls_move_left":"Move", - "controls_move_right":"Move", - "controls_move_up":"Move", - "controls_next":"Next", - "controls_previous":"Previous", - "controls_selection":"Selection" - }, - "choice":{ - "caution":"Warning. This prototype was designed to be launched on Google Chrome 20 or greater.", - "mouse":"Mouse interaction mode", - "kinect":"Kinect interaction mode" - } + "gestures_help":[ + { + "name":"no motion", + "usage":"draw a cross from the top", + "desc":"this gesture represents a stopped or paused movement in the choregraphy" + }, + { + "name":"fall", + "usage":"simulate a fall by crouching", + "desc":"this gesture represents falls in the choregraphy" + }, + { + "name":"contact", + "usage":"draw twho horizontal lines that meet", + "desc":"this gesture represents contact points between dancers or a dancer body parts" + }, + { + "name":"group spin", + "usage":"draw two inverted circles", + "desc":"this gesture represents two or more dancers spinning around themselves or moving synchroneously in circles" + }, + { + "name":"bend", + "usage":"bend forward", + "desc":"this gesture represents bend movements of body parts" + }, + { + "name":"knee up", + "usage":"just raise a knee", + "desc":"this gesture represents raising knees or legs" + }, + { + "name":"arm carriage", + "usage":"draw two circle arcs symetrically opposed from the center", + "desc":"this gesture represents arm carriages" + }, + { + "name":"lift", + "usage":"raise your hands and join them like you would do to lift an object", + "desc":"this gesture represents a lift, which is a dancer lifting another dancer" + }, + { + "name":"jump", + "usage":"jump vertically", + "desc":"this gesture represents jumps" + }, + { + "name":"spin", + "usage":"draw a circle with your hands joined", + "desc":"this gesture represents a spin or a circle performed by a dancer" + }, + { + "name":"up and down", + "usage":"draw a vertical line from the bottom to the up side of the window then go back down toward each side of the line", + "desc":"this gesture represents a body that goes up then down" + }, + { + "name":"wave", + "usage":"draw two sinuzoides that get away from each other", + "desc":"this gesture represents aquatic movements" + } + ] } \ No newline at end of file diff -r 34afef0f9e18 -r 417d4b573bc8 front_idill/src/lang/fr.json --- a/front_idill/src/lang/fr.json Wed Aug 29 11:29:14 2012 +0200 +++ b/front_idill/src/lang/fr.json Fri Sep 14 11:06:53 2012 +0200 @@ -1,50 +1,126 @@ { - "gesturesText":["chute", "saut", "rotation", "rotation de groupe", "penché", "port de bras", "levé de genou", "breakdance", "ondulations", "immobilité", "contact", "de haut en bas", "grand-jeté"], - "notificationStrings":{ - "select":"Sélectionner", - "confirm":"Confirmer", - "timeline":"Déplacer", - "move":"Changer vidéo", - "search":"Recherche", - "next":"Suivant", - "previous":"Précédent", - "unzoom":"Retour mosaïque", - "unknown":"Geste inconnu", - "fall":"Chute", - "jump":"Saut", - "circle":"Rotation", - "screw":"Rotation de groupe", - "bend":"Penché", - "arc":"Port de bras", - "knee-up":"Levé de genou", - "right-angle":"Breakdance", - "wave":"Ondulations", - "no-motion":"Immobilité", - "contact":"Contact", - "grand-jete":"Grand jeté", - "up-down":"De haut en bas" + "gesturesText":["chute", "saut", "rotation", "rotation de groupe", "penché", "port de bras", "levé de genou", "breakdance", "ondulations", "immobilité", "contact", "de haut en bas", "grand-jeté"], + "notificationStrings":{ + "select":"Sélectionner", + "confirm":"Confirmer", + "timeline":"Déplacer", + "move":"Changer vidéo", + "search":"Recherche", + "next":"Suivant", + "previous":"Précédent", + "unzoom":"Retour mosaïque", + "unknown":"Geste inconnu", + "fall":"Chute", + "jump":"Saut", + "circle":"Rotation", + "screw":"Rotation de groupe", + "bend":"Penché", + "arc":"Port de bras", + "knee-up":"Levé de genou", + "right-angle":"Breakdance", + "wave":"Ondulations", + "no-motion":"Immobilité", + "contact":"Contact", + "grand-jete":"Grand jeté", + "up-down":"De haut en bas" + }, + "helpText":{ + "search_title":"Recherche", + "search_2hands_text":"Courbes à effectuer avec les deux mains", + "search_mouse_text":"Courbes à effectuer avec la souris", + "search_touch_text":"Courbes à effectuer avec le doigt", + "search_body_text":"Gestes à effectuer avec le corps", + "controls_title":"Contrôles", + "controls_1hand_text":"Actions de contrôle à effectuer avec les mains", + "controls_mouse_text":"Actions de contrôle à effectuer avec la souris", + "controls_touch_text":"Actions de contrôle à effectuer avec le doigt", + "controls_timeline":"Déplacer", + "controls_mos_horizontal":"Retour mosaïque", + "controls_mos_vertical":"Retour mosaïque", + "controls_move_down":"Changer vidéo", + "controls_move_left":"Changer vidéo", + "controls_move_right":"Changer vidéo", + "controls_move_up":"Changer vidéo", + "controls_next":"Suivant", + "controls_previous":"Précédent", + "controls_selection":"Sélection" + }, + "choice":{ + "caution":"Attention. Ce prototype est conçu pour fonctionner sous Google Chrome 20 ou supérieur.", + "mouse":"Mode d'interaction souris", + "kinect":"Mode d'interaction kinect" + }, + "credits_lang":{ + "title":"Crédits des films présentés", + "subtitle":"festival idill / idill.eu (ed. 2011 et 2009)", + "realisation":"réalisation", + "company":"compagnie", + "production":"production", + "choregraphy":"chorégraphie", + "music":"musique", + "footer_line1":"browsebymotion est une installation vidéo vous permettant de naviguer par le geste et sans aucun contact dans des films de danse (festival idill éditions 2011 et 2009). Sélectionnez une vidéo et lancez une recherche en dansant ou en reproduisant un geste de la grammaire.", + "footer_line2":"Projet réalisé avec le soutien du Ministère de la Culture et de la communication – Direction générale à la Création artistique." }, - "helpText":{ - "search_title":"Recherche", - "search_2hands_text":"Courbes à effectuer avec les deux mains", - "search_mouse_text":"Courbes à effectuer avec la souris", - "search_body_text":"Gestes à effectuer avec le corps", - "controls_title":"Contrôles", - "controls_1hand_text":"Gestes à effectuer avec une seule main", - "controls_timeline":"Déplacer", - "controls_mos_horizontal":"Retour mosaïque", - "controls_mos_vertical":"Retour mosaïque", - "controls_move_down":"Changer vidéo", - "controls_move_left":"Changer vidéo", - "controls_move_right":"Changer vidéo", - "controls_move_up":"Changer vidéo", - "controls_next":"Suivant", - "controls_previous":"Précédent", - "controls_selection":"Sélection" - }, - "choice":{ - "caution":"Attention. Ce prototype est conçu pour fonctionner sous Google Chrome 20 ou supérieur.", - "mouse":"Mode d'interaction souris", - "kinect":"Mode d'interaction kinect" - } + "gestures_help":[ + { + "name":"arrêt", + "usage":"tracer une croix en partant du haut", + "desc":"ce geste symbolise un temps d'arrêt ou un geste suspendu dans la chorégraphie" + }, + { + "name":"chute", + "usage":"simuler une chute en s'accroupissant", + "desc":"ce geste marque des chutes dans la chorégraphie" + }, + { + "name":"contact", + "usage":"tracer deux lignes horizontales qui se rencontrent", + "desc":"ce geste symbolise des points de contact entre danseurs ou même entre les membres d'un même danseur" + }, + { + "name":"rotation de groupe", + "usage":"tracer deux cercles inversés", + "desc":"ce geste symbolise deux ou plusieurs danseurs tournant sur eux-mêmes ou se déplaçant synchronisés en cercle" + }, + { + "name":"inclinaison", + "usage":"se pencher en avant", + "desc":"ce geste marque des mouvements d'inclinaison de membres (bras, jambe, buste, etc.)" + }, + { + "name":"levé de jambe", + "usage":"lever simplement un genou", + "desc":"ce geste indique les levés de jambe" + }, + { + "name":"port de bras", + "usage":"tracer deux arcs de cercle symétriquement opposés depuis le centre", + "desc":"ce geste symbolise les mouvements de bras" + }, + { + "name":"porté", + "usage":"lever les mains en les joignant comme pour soulever un objet", + "desc":"ce geste symbolise un porté, c'est-à-dire un danseur portant un autre danseur" + }, + { + "name":"saut", + "usage":"sauter sur place", + "desc":"ce geste marque les sauts" + }, + { + "name":"spin", + "usage":"tracer un cercle avec les deux mains jointes", + "desc":"ce geste symbolise un tour ou un cercle effectué par un danseur" + }, + { + "name":"up et down", + "usage":"tracer une verticale de bas en haut qui se termine par une descente de chaque côté", + "desc":"ce geste indique un corps qui se dresse puis qui se baisse" + }, + { + "name":"vague", + "usage":"tracer deux sinusoïdes qui s'éloignent l'une de l'autre", + "desc":"ce geste symbolise des mouvements aquatiques" + } + ] } \ No newline at end of file diff -r 34afef0f9e18 -r 417d4b573bc8 front_idill/src/mosaic/css/mosaic.less --- a/front_idill/src/mosaic/css/mosaic.less Wed Aug 29 11:29:14 2012 +0200 +++ b/front_idill/src/mosaic/css/mosaic.less Fri Sep 14 11:06:53 2012 +0200 @@ -297,7 +297,7 @@ /* * Panneau d'aide */ -#notify_help, #notify_credits +#notify_help { position: absolute; margin: @notify-help-margin; @@ -308,6 +308,65 @@ } /* + * Crédits + */ +#notify_credits +{ + position: absolute; + margin: @notify-help-margin; + padding: @notify-help-margin; + border-style: solid; + border-width: @notify-help-border-width; + border-color: #fff; + background-color: #D1D2D4; +} + +/* + * Flèches pour naviguer dans les crédits. +*/ +.credits_arrows, .help_details_arrows +{ + position: absolute; + width: 50px; + height: 50px; + background-size: 50px 50px; + background-repeat: no-repeat; + opacity: 0; +} + +/* + * Flèche du haut pour naviguer dans les crédits. +*/ +#credits_upArrow +{ + background-image: url('../../img/upArrow.png'); +} + +/* + * Flèche du bas pour naviguer dans les crédits. +*/ +#credits_downArrow +{ + background-image: url('../../img/downArrow.png'); +} + +/* + * Flèche du haut pour naviguer dans les détails du panneau d'aide. +*/ +#help_details_upArrow +{ + background-image: url('../../img/upArrow.png'); +} + +/* + * Flèche du bas pour naviguer dans les détails du panneau d'aide. +*/ +#help_details_downArrow +{ + background-image: url('../../img/downArrow.png'); +} + +/* * Colonne de recherche du panneau d'aide. */ #help_search @@ -481,4 +540,31 @@ height: 50px; position: absolute; margin: 20px; +} + +#credits_title +{ + font-weight: bold; + font-size: 30px; +} + +#credits_subtitle +{ + font-size: 25px; +} + +.credits_film +{ + font-weight: bold; + font-size: 22px; +} + +.credits_body +{ + font-size: 20px; +} + +.credits_text +{ + color: #000000; } \ No newline at end of file diff -r 34afef0f9e18 -r 417d4b573bc8 front_idill/src/mosaic/js/mosaic.js --- a/front_idill/src/mosaic/js/mosaic.js Wed Aug 29 11:29:14 2012 +0200 +++ b/front_idill/src/mosaic/js/mosaic.js Fri Sep 14 11:06:53 2012 +0200 @@ -88,6 +88,26 @@ "controls_previous":"Previous", "controls_selection":"Selection" } + + this.creditsMetadata = { + "title":"Presented films credits", + "subtitle":"idill festival / idill.eu (2011 and 2009 ed.)", + "realisation":"realisation", + "company":"company", + "production":"production", + "choregraphy":"choregraphy", + "music":"music" + } + + //Tableau contenant les données des crédits. + this.tabCredits = []; + //Page actuelle des crédits (en cas de dépassement du texte des crédits). + this.creditsPageNumber = 0; + //Nombre de pages des crédits. + this.creditsPageLength = 0; + //Dimensions des colonnes pour le texte des crédits. + this.column_gap = 30; + this.column_width = 0; //Dernières positions des pointeurs. this.mainPointerLastX = null; @@ -682,6 +702,8 @@ _this.getDictionary(); //On charge le fichier des langues. _this.getLang(); + //On récupère les crédits. + _this.getCredits(); }); } diff -r 34afef0f9e18 -r 417d4b573bc8 front_idill/src/mosaic/js/mouseInteractions.js --- a/front_idill/src/mosaic/js/mouseInteractions.js Wed Aug 29 11:29:14 2012 +0200 +++ b/front_idill/src/mosaic/js/mouseInteractions.js Fri Sep 14 11:06:53 2012 +0200 @@ -41,7 +41,7 @@ } //Si on se trouve sur l'icone des crédits et qu'elle est zoomée. - if(this.isCredtisIconZoomed) + if(this.isCreditsIconZoomed) { //On affiche les crédits. this.notifyCredits(); @@ -292,8 +292,8 @@ return; } - //Si on est dans un mode autre qu'un mode zoomé et qu'on n'affiche pas l'aide, on part. - if(this.currentMode != "VIDEO" && this.currentMode != "SEARCH" && this.currentMode != "TIMELINE" && !this.helpDisplayed) + //Si on est dans un mode autre qu'un mode zoomé et qu'on n'affiche pas l'aide ou les crédits, on part. + if(this.currentMode != "VIDEO" && this.currentMode != "SEARCH" && this.currentMode != "TIMELINE" && !this.helpDisplayed && !this.creditsDisplayed) { return; } @@ -344,8 +344,18 @@ } //Si les crédits sont affichés, un clic les ferme. - if(this.creditsDisplayed && !this.isCreditsIconZoomed && !this.isCreditsIconZooming) + if(this.creditsDisplayed && !this.isCreditsIconZoomed && !this.isCreditsIconZooming && !this.isOnCreditsArrow(this.mousePosX, this.mousePosY)) { this.removeCredits(); } + + //Si les crédits sont affichés et qu'on est sur une flèche, on change de page. + if(this.isOnCreditsUpArrow(this.mousePosX, this.mousePosY)) + { + this.goToPreviousCreditsPage(); + } + else if(this.isOnCreditsDownArrow(this.mousePosX, this.mousePosY)) + { + this.goToNextCreditsPage(); + } } \ No newline at end of file diff -r 34afef0f9e18 -r 417d4b573bc8 front_idill/src/mosaic/js/notifications.js --- 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 = "
"; + + 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 = "
"; + + //Pied de page des crédits. + var credits_footer = ""; + + $('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 = "
" + this.creditsMetadata.title + "
" + this.creditsMetadata.subtitle + "

"; + + for(var i = 0 ; i < this.tabCredits.length ; i++) { - return; + credits_elements += "
" + this.tabCredits[i].film + "
"; + if(this.tabCredits[i].realisation) + { + credits_elements += this.creditsMetadata.realisation + " : " + this.tabCredits[i].realisation + "
"; + } + if(this.tabCredits[i].company) + { + credits_elements += this.creditsMetadata.company + " : " + this.tabCredits[i].company + "
"; + } + if(this.tabCredits[i].production) + { + credits_elements += this.creditsMetadata.production + " : " + this.tabCredits[i].production + "
"; + } + if(this.tabCredits[i].choregraphy) + { + credits_elements += this.creditsMetadata.choregraphy + " : " + this.tabCredits[i].choregraphy + "
"; + } + if(this.tabCredits[i].music) + { + credits_elements += this.creditsMetadata.music + " : " + this.tabCredits[i].music + "
"; + } + + credits_elements += "
" } - var credits = "
"; + credits_elements += "
"; + + $('#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 diff -r 34afef0f9e18 -r 417d4b573bc8 front_idill/src/mosaic/js/pointers.js --- a/front_idill/src/mosaic/js/pointers.js Wed Aug 29 11:29:14 2012 +0200 +++ b/front_idill/src/mosaic/js/pointers.js Fri Sep 14 11:06:53 2012 +0200 @@ -1099,6 +1099,196 @@ } /* + * Retourne vrai si la souris est sur la flèche haute dans le panneau des crédits. +*/ +Mosaic.prototype.isOnCreditsUpArrow = function(x, y) +{ + var creditsNotification = $('#notify_credits'), upArrow = $('#credits_upArrow'); + //Si les crédits ne sont pas affichés, on retourne faux. + if(creditsNotification.length <= 0) + { + return false; + } + + var margin = parseInt(creditsNotification.css('margin-left')); + + /*if($('#aa').length <= 0) + { + var a = '
'; + $('body').append(a); + $('#aa').css( + { + position: 'absolute', + 'background-color': '#0000FF', + top: +upArrow.position().top + 2 * margin, + left: upArrow.position().left + 2 * margin, + width: upArrow.width(), + height: upArrow.height() + }); + } + + console.log('---------------UP----------------------'); + console.log(x + ' > ' + (+upArrow.position().left + 2 * margin)); + console.log(x + ' < ' + (+upArrow.position().left + upArrow.width() + 2 * margin)); + console.log(y + ' > ' + (+upArrow.position().top + 2 * margin)); + console.log(y + ' < ' + (+upArrow.position().top + upArrow.height() + 2 * margin)); + console.log('---------------------------------------');*/ + + //Si la flèche est visible et si la souris est dessus, on retourne true. + if(upArrow.length > 0 && upArrow.css('opacity') == '1' && x > (+upArrow.position().left + margin) && x < (+upArrow.position().left + upArrow.width() + margin) && y > (+upArrow.position().top + margin) && y < (+upArrow.position().top + upArrow.height() + margin)) + { + return true; + } + + return false; +} + +/* + * Retourne vrai si la souris est sur la flèche basse dans le panneau des crédits. +*/ +Mosaic.prototype.isOnCreditsDownArrow = function(x, y) +{ + var creditsNotification = $('#notify_credits'), downArrow = $('#credits_downArrow'); + //Si les crédits ne sont pas affichés, on retourne faux. + if(creditsNotification.length <= 0) + { + return false; + } + + //$('#aa').remove(); + + var margin = parseInt(creditsNotification.css('margin-left')); + + /*console.log('--------------DOWN---------------------'); + console.log(x + ' > ' + (+downArrow.position().left + margin)); + console.log(x + ' < ' + (+downArrow.position().left + downArrow.width() + margin)); + console.log(y + ' > ' + (+downArrow.position().top + margin)); + console.log(y + ' < ' + (+downArrow.position().top + downArrow.height() + margin)); + console.log('---------------------------------------');*/ + + //Si la flèche est visible et si la souris est dessus, on retourne true. + if(downArrow.length > 0 && downArrow.css('opacity') == '1' && x > (+downArrow.position().left + margin) && x < (+downArrow.position().left + downArrow.width() + margin) && y > (+downArrow.position().top + margin) && y < (+downArrow.position().top + downArrow.height() + margin)) + { + return true; + } + + return false; +} + +/* + * Retourne vrai si la souris est sur une des flèches du panneau des crédits. +*/ +Mosaic.prototype.isOnCreditsArrow = function(x, y) +{ + //Si la souris est sur une flèche des crédits, on retourne vrai. + if(this.isOnCreditsUpArrow(x, y) || this.isOnCreditsDownArrow(x, y)) + { + return true; + } + + return false; +} + +/* + * Va a la page des crédits suivante. +*/ +Mosaic.prototype.goToNextCreditsPage = function() +{ + console.log(this.creditsPageLength); + //Si on est sur la dernière page, on quitte. + if(this.creditsPageNumber + 1 >= this.creditsPageLength) + { + return; + } + + this.creditsPageNumber++; + this.goToCreditsPageN(this.creditsPageNumber); +} + +/* + * Va a la page des crédits précédente. +*/ +Mosaic.prototype.goToPreviousCreditsPage = function() +{ + //Si on est sur la première page, on quitte. + if(this.creditsPageNumber == 0) + { + return; + } + + this.creditsPageNumber--; + this.goToCreditsPageN(this.creditsPageNumber); +} + +/* + * Va à la page N des crédits. +*/ +Mosaic.prototype.goToCreditsPageN = function(N) +{ + var notify_credits = $('#notify_credits'), arrowHeight = $('#credits_upArrow').height(), footer_height = $('#credits_footer').height(), margin = parseInt($('#notify_credits').css('margin-left')); + + //Si on est sur la première page, on cache la flèche haut. + if(this.creditsPageNumber == 0) + { + $('#credits_upArrow').css( + { + opacity: 0 + }); + $('#credits_downArrow').css( + { + opacity: 1 + }); + $('#credits_container').css( + { + top: margin, + height: notify_credits.height() - footer_height - arrowHeight + }); + } + //Si on est sur la dernière page, on cache la flèche bas. + else if(this.creditsPageNumber + 1 >= this.creditsPageLength) + { + $('#credits_upArrow').css( + { + opacity: 1 + }); + $('#credits_downArrow').css( + { + opacity: 0 + }); + $('#credits_container').css( + { + top: +arrowHeight + margin, + height: notify_credits.height() - footer_height - arrowHeight - margin + }); + } + //Si on est dans les autres pages, on affiche les deux flèches. + else + { + $('#credits_upArrow').css( + { + opacity: 1 + }); + $('#credits_downArrow').css( + { + opacity: 1 + }); + $('#credits_container').css( + { + top: +arrowHeight + margin, + height: notify_credits.height() - footer_height - 2 * arrowHeight - margin + }); + } + + //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) + }); +} + + + +/* * Retourne vrai si le doigt est sur le bouton de lecture de video dans le mode d'interaction tablettes. */ Mosaic.prototype.isOnPlayButton = function(x, y) diff -r 34afef0f9e18 -r 417d4b573bc8 front_idill/src/mosaic/js/search.js --- a/front_idill/src/mosaic/js/search.js Wed Aug 29 11:29:14 2012 +0200 +++ b/front_idill/src/mosaic/js/search.js Fri Sep 14 11:06:53 2012 +0200 @@ -99,6 +99,7 @@ _this.gesturesText = data.gesturesText; _this.notificationStrings = data.notificationStrings; _this.helpText = data.helpText; + _this.creditsMetadata = data.credits_lang; }); } @@ -364,4 +365,21 @@ } return ''; +} + +/* + * Extrait les données des crédits. +*/ +Mosaic.prototype.getCredits = function() +{ + var _this = this; + + $.getJSON(this.config.creditsPath, function(data) + { + //On récupère les données des crédits et on les place dans un tableau avant de le retourner. + for(var i = 0 ; i < data.creditsData.length ; i++) + { + _this.tabCredits[i] = data.creditsData[i]; + } + }); } \ No newline at end of file diff -r 34afef0f9e18 -r 417d4b573bc8 front_idill/src/mosaic/js/zoomInteractions.js --- a/front_idill/src/mosaic/js/zoomInteractions.js Wed Aug 29 11:29:14 2012 +0200 +++ b/front_idill/src/mosaic/js/zoomInteractions.js Fri Sep 14 11:06:53 2012 +0200 @@ -25,7 +25,7 @@ */ Mosaic.prototype.preZoom = function(snapshot) { - if(this.currentMode == "NO-USER" || this.currentMode.indexOf("INCOMING") > -1 || snapshot == null || this.helpDisplayed || this.isMosaicFiltering || this.isSearchByCurvesOn || this.gestureDelRequested) + if(this.currentMode == "NO-USER" || this.currentMode.indexOf("INCOMING") > -1 || snapshot == null || this.helpDisplayed || this.creditsDisplayed || this.isMosaicFiltering || this.isSearchByCurvesOn || this.gestureDelRequested) { return; } @@ -273,7 +273,7 @@ var _this = this; //Si la mosaïque est en pleine écran, pas la peine de zoomer. - if(this.currentMode == "VIDEO" || this.currentMode == "SEARCH" || this.currentMode.indexOf("INCOMING") > -1 || this.helpDisplayed || this.isMosaicFiltering) + if(this.currentMode == "VIDEO" || this.currentMode == "SEARCH" || this.currentMode.indexOf("INCOMING") > -1 || this.helpDisplayed || this.creditsDisplayed || this.isMosaicFiltering) { return; }