Changeset 8001


Ignore:
Timestamp:
12/22/13 19:33:04 (6 years ago)
Author:
kent1
Message:

On utilise l'évènement mousedown et mouseup sur les flèches en utilisant setInterval et clearInterval pour gérer quand on laisse appuyé

On utilise la même chose pour la gestion du clavier :

space ou haut ou droite avancent
gauche ou bas vont vers l'arrière
esc ferme les boites

File:
1 edited

Legend:

Unmodified
Added
Removed
  • plugins_spip/terraeco_infographie/trunk/infographie.html

    r8000 r8001  
    100100                                                        height = 450 - margin.top - margin.bottom,
    101101                                                        vitesse = 200,
    102                                                         infobox = tip = moving = infobox_bloquee = move_again = false;
     102                                                        infobox = tip = moving = infobox_bloquee = move_again = progress_mousedown = false;
    103103
    104104                                                jQuery('#'+containerid).on('mousewheel', function(event) {
     
    177177                                                                        infobox_update('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="logo">'+d.logo+'</div><div class="contenu"><span class="annee">'+d.axe_x+'</span>'+d.commentaire+'</div>',
    178178                                                                                function(){
    179                                                                                         jQuery('.'+infobox_class).fadeIn(500,function(){
     179                                                                                        jQuery('.'+infobox_class).fadeIn(vitesse,function(){
    180180                                                                                                jQuery('.'+infobox_class+' .close_box').on('click',function(){
    181181                                                                                                        jQuery('.'+infobox_class).fadeOut();
     
    185185                                                                        );
    186186                                                                }
    187                                                                 setTimeout(show_info,vitesse);
     187                                                                setTimeout(show_info,vitesse-30);
    188188                                                        }
    189189                                                       
     
    297297                                                        .html('<div class="left">[(#CHEMIN{images/fleche_gauche.png}|balise_img|texte_script)]</div><div class="right">[(#CHEMIN{images/fleche_droite.png}|balise_img|texte_script)]</div>');
    298298                                               
    299                                                 // Au click sur les fleches on avance d'un cran ou on recule
    300                                                 jQuery('.arrows_nav > div').on('click',function(){
    301                                                         if(jQuery('.'+infobox_class).is(':hidden') && moving == false){
    302                                                                 if(jQuery(this).is('.left'))
    303                                                                         graph_replace(-1);
    304                                                                 else
    305                                                                         graph_replace(1);
    306                                                         }
    307                                                 });
    308 
    309299                                                /**
    310300                                                 * Récupération des données et on fabrique nos groupes de valeurs
     
    409399                                                });
    410400                                               
     401                                                // Au click sur les fleches on avance d'un cran ou on recule
     402                                                jQuery('.arrows_nav > div')
     403                                                        .on('click',function(event){
     404                                                                event.stopPropagation();
     405                                                        })
     406                                                        .on('mousedown',function(event){
     407                                                                event.stopPropagation();
     408                                                                if(jQuery('.'+infobox_class).is(':hidden') && moving == false){
     409                                                                        if(jQuery(this).is('.left')){
     410                                                                                graph_replace(-1);
     411                                                                                progress_mousedown = setInterval(function(){
     412                                                                                                                                if(jQuery('.'+infobox_class).is(':hidden'))
     413                                                                                                                                        graph_replace(-1);
     414                                                                                                                        }, vitesse);
     415                                                                        }else{
     416                                                                                graph_replace(1);
     417                                                                                progress_mousedown = setInterval(function(){
     418                                                                                                                                if(jQuery('.'+infobox_class).is(':hidden'))
     419                                                                                                                                        graph_replace(1);
     420                                                                                                                        }, vitesse);
     421                                                                        }
     422                                                                }
     423                                                        })
     424                                                        .on('mouseup',function(event){
     425                                                                event.stopPropagation();
     426                                                                clearInterval(progress_mousedown);
     427                                                        });
     428                                               
     429                                                jQuery(window).on('keydown',function(e) {
     430                                                        var meta_key_pressed = e.ctrlKey || e.metaKey || e.altKey || e.shiftKey;
     431                                                        switch (e.keyCode) {
     432                                                                case 27 :
     433                                                                        /**
     434                                                                         * Touche esc : ferme les anecdotes
     435                                                                         */
     436                                                                        clearInterval(progress_mousedown);
     437                                                                        if(jQuery('.'+infobox_class).is(':visible'))
     438                                                                                jQuery('.'+infobox_class).fadeOut();
     439                                                                        e.preventDefault();
     440                                                                        break;
     441                                                                case 32 :
     442                                                                         /**
     443                                                                          * Touche Space : avance sur la ligne de temps
     444                                                                          */
     445                                                                        clearInterval(progress_mousedown);
     446                                                                        if(jQuery('.'+infobox_class).is(':hidden') && moving == false){
     447                                                                                graph_replace(1);
     448                                                                                progress_mousedown = setInterval(function(){
     449                                                                                                                                if(jQuery('.'+infobox_class).is(':hidden'))
     450                                                                                                                                        graph_replace(1);
     451                                                                                                                        }, vitesse);
     452                                                                        }
     453                                                                        e.preventDefault();
     454                                                                        break;
     455                                                                case 37 : case 39 : case 38 : case 40 :
     456                                                                        /**
     457                                                                         * Gauche (37), droite (39), haut (38), bas (40)
     458                                                                         * Avance ou recule sur la ligne de temps
     459                                                                         */
     460                                                                        clearInterval(progress_mousedown);
     461                                                                        if(jQuery('.'+infobox_class).is(':hidden') && moving == false){
     462                                                                                if(e.keyCode == 37 || e.keyCode == 40){
     463                                                                                        graph_replace(-1);
     464                                                                                        progress_mousedown = setInterval(function(){
     465                                                                                                                                        if(jQuery('.'+infobox_class).is(':hidden'))
     466                                                                                                                                                graph_replace(-1);
     467                                                                                                                                }, vitesse);
     468                                                                                }else{
     469                                                                                        graph_replace(1);
     470                                                                                        progress_mousedown = setInterval(function(){
     471                                                                                                                                        if(jQuery('.'+infobox_class).is(':hidden'))
     472                                                                                                                                                graph_replace(1);
     473                                                                                                                                }, vitesse);
     474                                                                                }
     475                                                                        }
     476                                                                        e.preventDefault();
     477                                                                        break;
     478                                                        }
     479                                                }).on('keyup',function(e){
     480                                                        switch (e.keyCode) {
     481                                                                /**
     482                                                                 * On arrÚte le setInterval à chaque nouvelle itération
     483                                                                 */
     484                                                                case 37 : case 38 : case 40 : case 39 : case 32 : case 27 :
     485                                                                        clearInterval(progress_mousedown);
     486                                                                        e.preventDefault();
     487                                                                break;
     488                                                        }
     489                                                });
    411490                                                /**
    412491                                                 * Fonction de création des objets du diagramme
Note: See TracChangeset for help on using the changeset viewer.