Joomladay francophone 2018 à Paris 18 et 19 mai

Discussions sur le code de Mootools

Réduire
X
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [pour info] Discussions sur le code de Mootools

    L'objectif de cette discussion est d'aborder certains points épineux, compliqués à comprendre, du code basé sur Mootools.
    C'est off-topic par rapport à ce forum, mais on s'est dit que ca pourrait peut-être être utile à la communauté.
    Et bien sûr, tout le monde est invité à participer.

    A lire absolument, l'excellente traduction de "30 days of mootools "
    par Damien Desrousseaux :
    http://www.6ma.fr/tuto/mootools+jour...troduction-458
    C'est pour Mootools 1.2, mais l'essentiel est dit.

    [Aux modérateurs] si c'est trop off-topic, pas grave, on se débrouillera autrement.
    Mais on essaiera le plus possible de donner des applications dans Joomla.

    Topic du jour : this.bind()


    Quand on crée des classes avec Mootools, une pratique courante est d'ajouter des "évenements" (click, onmouseover, onmouseenter, onmouseleave) aux éléments ou de répéter certaines valeurs.

    "Binding" permets d'utiliser la référence "this" à des endroits où cela est normalement impossible.
    Ex :
    on a créé une classe Mootools par une méthode que l'on nomme showMessage() dont le seul objectif est de lancer un message par la fonction alert().
    Ce message est une option, dont la variable est this.options.message.
    En d'autres circonstances, pas de souci, mais addEvent() mange le truc et balance une JS Error

    Code PHP:
    //more class code above....
        
    showMessage: function() {
            
            $(
    'myelement').addEvent('click', function() {
                
    alert(this.options.message);
            });
            
        },    
    //more class code below 
    Il faut donc "bind" la classe à l'Event.

    Code PHP:
    //more class code above....
        
        
    showMessage: function() {
            
            $(
    'myelement').addEvent('click', function() {
                
    alert(this.options.message);
            }.
    bind(this));
            
        },
        
    //more class code below 
    On lie la classe à la fonction Event. On peut ainsi "indiquer l'existence" de la classe et de ses options (dans ce cas, l'option message en utilisant "this".

    PS : "bind" signifie "lier".


    Autre exemple (Clientcide)

    Code PHP:
    var LinkAlert = new Class({
        
    initialize: function(links){
            
    this.links = $$(links);
            
    this.links.each(this.setupLinkthis);
        },
        
    setupLink: function(link) {
            
    link.addEvent('click', function(){
                
    this.alert(link);
            }.
    bind(this));
        },
        
    alert: function(link){
            
    alert(this.prefix link.get('href'));
        },
        
    prefix"The link you clicked goes to "
    }); 
    Cette class attrape tous les liens qu'on lui fournit, ajoute un "click event" à chacun d'eux, et, quand le lien est cliqué, indique par la fonction "alert" que le lien est cliqué.
    A quoi ca sert, direz-vous ?, mais c'est juste un exemple !

    Le premier "bind" se place dans la méthode "initialize", qui transmet chaque lien à la méthode "setupLink".

    Dernier exemple (mootools.net)
    Code PHP:
    function myFunction(){
        
    //Remarque : ce'this' fait référence à la fenêtre, pas à l'élément.
        //Cette fonction doit être liée à l'élément qu'on veut manipuler.
        
    this.setStyle('color''red');
    };
    var 
    myBoundFunction myFunction.bind(myElement);
    myBoundFunction(); //Pour rendre le texte de l'élement en rouge. 
    D'autres exemples à suivre par CED1870.
    Dernière édition par ghazal à 20/08/2009, 14h03
    “Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter le nouveau service (en Beta) de la base de connaissance https://kb.joomla.fr

  • #2
    Exemple 1 : MenuMorphing

    Voici un petit exemple que j'ai adapté de mes scripts pour utiliser les fonctions de Class et Bind offertes par Mootools.
    Code PHP:
    var menuMorphing = new Class({
                 Implements: 
    Options,
                 
    options: {    //options par défaut si aucune option utilisateur n'est renseignée
                          
    couleur '#fff',
                          
    margeLeft '30',
                          
    duree1 300,
                          
    duree2 1200
                 
    },
                 
    initialize: function(element,options){
                             
    this.setOptions(options); //enregistre les options utilisateur
                             
    this.animation(element); //lance la fonction animation
                 
    },
                 
    animation: function(element){
                            
    element.each(function(el) {
                                  
    /*** enregistre les valeurs des styles actuels avant animation ***/
                                  
    var mlDefaut el.getStyle('margin-left');
                                  var 
    couleurDefaut el.getStyle('color');
                                  var 
    fx = new Fx.Styles(el, {duration:this.options.duree1wait:false});
                                  var 
    fxLeave = new Fx.Styles(el, {duration:this.options.duree2wait:false});
                                  
    /*** ajoute l'animation au passage de la souris ***/
                                  
    el.addEvent('mouseenter', function(){

                                            
    fx.start({
                            
    'margin-left'this.options.margeLeft,
                                                    
    'color' this.options.couleur
                        
    });
                        
    fxLeave.stop();

                                  }.
    bind(this));
                                  
    /*** rétablit les styles initiaux quand la souris quitte l'objet ***/
                                  
    el.addEvent('mouseleave', function(){
                                            
    fxLeave.start({
                            
    'margin-left'mlDefaut,
                                                    
    'color' couleurDefaut
                        
    });
                        
    fx.stop();

                                  });
                             }.
    bind(this));
                  }
    });
    menuMorphing.implement(new Options); //ajoute les options utilisateur à la class

    window.addEvent('domready', function() {new menuMorphing($$("#gauche a"),{
                                           
    couleur '#f00'
                                           
    })
    }); 
    Ici j'ai un template qui contient une DIV id="gauche" dans laquel je charge un menu. Les éléments A du menu se déplacent de 30px sur la gauche et deviennent rouge (#f00"). On choisit les éléments sur lesquels agir grâce à l'appel de la fonction
    Code PHP:
    window.addEvent('domready', function() {new menuMorphing($$("#gauche a"),{
                                           
    couleur '#f00'
                                           
    })
    }); 
    Ici l'utilité du Bind est de pouvoir récupérer les valeurs des options pour les injecter dans les fonctions.
    Il faut faire un Bind sur eleemnt.each pour y injecter le this, ensuite sur el.addEvent afin d'utiliser this.options.monoption dans la fonction.

    En espérant que cet exemple peut vous aider .
    Je suis moi aussi actuellement en train de tester en "profondeur" l'utilisation du bind, donc n'hésitez pas à faire part de votre expérience !
    Dernière édition par ced1870 à 20/08/2009, 12h28
    Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
    http://www.template-creator.com Outil de création de templates
    Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

    Commentaire


    • #3
      Exemple 2 : Simple alerte

      L'exemple que j'ai donné en premier est peut-etre un peu costaud, alors je l'ai simplifié au maximum. Voici un code qui permet d'afficher une boite de dialogue qui affiche le texte que l'on a mis dans les options de la fonction soit au moment où on en crée une nouvelle ou alors dans les options par défaut. Je vous laisse tester. Le message se déclenche lorsque vous survolez un lien de votre page.
      Code PHP:
      var test1 = new Class({
                   Implements: 
      Options,
                   
      options: {    //options par défaut si aucune option utilisateur n'est renseignée
                            
      texte 'Ceci est mon texte par defaut'
                   
      },
                   
      initialize: function(element,options){
                               
      this.setOptions(options); //enregistre les options utilisateur
                               
      element.each(function(el){
                                 
      el.addEvent('mouseenter', function(){
                                               
      alert(this.options.texte);
                                 }.
      bind(this));

                               }.
      bind(this));
                   }
      });
      test1.implement(new Options); //ajoute les options utilisateur à la class

      window.addEvent('domready', function() {new test1($$("a"),{
                                             
      texte 'Ceci est mon texte perso'
                                             
      })
      }); 
      On peut voir qu'il y a 2 bind,1 pour le element.each, et 1 pour le addEvent. Si on ne les mets pas en place, on ne peut pas récupérer l'information dans this.options.texte.
      Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
      http://www.template-creator.com Outil de création de templates
      Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

      Commentaire


      • #4
        Nickel.
        Un petit html qui accompagnerait le code js ?
        “Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter le nouveau service (en Beta) de la base de connaissance https://kb.joomla.fr

        Commentaire


        • #5
          pas besoin, ça fonctionne sur n'importe quel lien de la page pour l'exemple 2
          Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
          http://www.template-creator.com Outil de création de templates
          Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

          Commentaire

          Annonce

          Réduire
          1 sur 2 < >

          C'est [Réglé] et on n'en parle plus ?

          A quoi ça sert ?
          La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

          Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

          Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
          Comment ajouter la mention [Réglé] à votre discussion ?
          1 - Aller sur votre discussion et éditer votre premier message :


          2 - Cliquer sur la liste déroulante Préfixe.

          3 - Choisir le préfixe [Réglé].


          4 - Et voilà… votre discussion est désormais identifiée comme réglée.

          2 sur 2 < >

          Assistance au forum - Outil de publication d'infos de votre site

          Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

          Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

          Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

          UTILISER À VOS PROPRES RISQUES :
          L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

          Problèmes connus :
          FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

          Installation :

          1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

          Archive zip : https://github.com/AFUJ/FPA/zipball/master

          2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

          3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

          4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

          5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

          6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
          et remplacer www. votresite .com par votre nom de domaine


          Exemples:
          Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
          Télécharger le script fpa-fr.php dans: /public_html/
          Pour executer le script: http://www..com/fpa-fr.php

          Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
          Télécharger le script fpa-fr.php dans: /public_html/cms/
          Pour executer le script: http://www..com/cms/fpa-fr.php

          En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

          Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
          Voir plus
          Voir moins
          Travaille ...
          X