Script JS ne fonctionne pas dans un module

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

  • [RÉGLÉ] Script JS ne fonctionne pas dans un module

    Bonjour,
    Je teste une signature tactile pour un de mes projets.
    Le script fonctionne très bien tant que je suis en PHP "simple" mais dès que je mets ce script dans le fichier default.php du module que je développe, la zone de signature tactile ne fonctionne plus. (elle n'est même plus affichée)

    Voici deux exemples :Quelqu'un aurait-il une idée de ce qui se passe ?

    Cordialement.

    Eric

    Voici mon script :
    Code:
    <script>
    $(document).ready(function() {
            var canvasDiv = document.getElementById('canvasDiv');    
    // -----------------------
    // Fonctions Event :
    // -----------------------
    
    // Fonction fin de mouvement :
    function moveEnd() {
        painting = false;
        started = false;
    }
    
    //  Fonction début de mouvement :
    function moveStart(e, mobile) {
        painting = true;
    
        // Coordonnées de la souris :
        if (mobile) {
            // Event mobile :
            var ev = e.originalEvent;
            e.preventDefault();
    
            // Set Coordonnées du doigt :
            cursorX = (ev.pageX - obj.offsetLeft); // 10 = décalage du curseur
            cursorY = (ev.pageY - obj.offsetTop);
        }
        else {
            // Set Coordonnées de la souris :
            cursorX = (e.pageX - this.offsetLeft);
            cursorY = (e.pageY - this.offsetTop);
        }
    }
    // Fonction de mouvement :
    function move(e, mobile, obj) {
        // Si je suis en train de dessiner (click souris enfoncé) :
        if (painting) {
            if (mobile) {
                // Event mobile :
                var ev = e.originalEvent;
                e.preventDefault();
    
                // Set Coordonnées du doigt :
                // cursorX = (ev.pageX - obj.offsetLeft); // 10 = décalage du curseur
                // cursorY = (ev.pageY - obj.offsetTop);
                cursorX = (ev.targetTouches[0].pageX - obj.offsetLeft); // 10 = décalage du curseur
                cursorY = (ev.targetTouches[0].pageY - obj.offsetTop);
            }
            else {
                // Set Coordonnées de la souris :
                cursorX = (e.pageX - obj.offsetLeft); // 10 = décalage du curseur
                cursorY = (e.pageY - obj.offsetTop);
            }
    
            // Dessine une ligne :
            drawLine();
        }
    }
    
    // -----------------------
    // Init du paint, c'est ici qu'on défini tout :
    // -----------------------
    
    // Variables :
    var color = "#000"; // Couleur du pinceau
    var width_brush = 2; // Largeur du pinceau
    var painting = false; // Suis-je en train de dessiner ?
    var started = false; // Ai-je commencé à dessiner ?
    var canvas, context, cursorX, cursorY; // Variables concernant le canvas définies plus tard
    
    $(document).ready(function() {
    
        // -----------------------
        // Ajout du canvas :
        // -----------------------
    
        //var largeur_canvas = $(window).width() - 50; //20
        //var hauteur_canvas = $(window).height() - 300; //180
        var largeur_canvas = "200px";
        var hauteur_canvas = "150px";
    
        $("body").prepend('<canvas id="canvas" width="' + largeur_canvas + '" height="' + hauteur_canvas + '"></canvas>');
    
    
        // -----------------------
        // Définition des variables :
        // -----------------------
    
        // Canvas :
        canvas = $("#canvas");
        context = canvas[0].getContext('2d');
    
        // Trait arrondi :
        context.lineJoin = 'round';
        context.lineCap = 'round';
    
    });
    
    // -----------------------
    // Evenements Mobile
    // -----------------------
    
    $(document).ready(function() {
    
        // Doigt enfoncé sur le canvas, je dessine :
        canvas.bind('touchstart', function(e) {
            moveStart(e, true);
        });
    
        // Relachement du doigt sur tout le document, j'arrête de dessiner :
        $(this).bind('touchend', function() {
            moveEnd();
        });
    
        // Mouvement du doigt sur le canvas :
        canvas.bind('touchmove', function(e) {
            move(e, true, this);
        });
    });
    
    // -----------------------
    // Evenements Souris
    // -----------------------
    
    $(document).ready(function() {
    
        // Click souris enfoncé sur le canvas, je dessine :
        canvas.mousedown(function(e) {
            moveStart(e, false);
        });
    
        // Relachement du Click sur tout le document, j'arrête de dessiner :
        $(this).mouseup(function() {
            moveEnd();
        });
    
        // Mouvement de la souris sur le canvas :
        canvas.mousemove(function(e) {
            move(e, false, this);
        });
    });
    
    // ----------------------------------
    // Paint :
    // ----------------------------------
    
    $(document).ready(function() {
        // Pour chaque carré de couleur :
        $("#couleurs a").each(function() {
            // Je lui attribut une couleur de fond :
            $(this).css("background", $(this).attr("data-couleur"));
    
            // Et au click :
            $(this).click(function() {
                // Je change la couleur du pinceau :
                color = $(this).attr("data-couleur");
    
                // Et les classes CSS :
                $("#couleurs a").removeAttr("class", "");
                $(this).attr("class", "actif");
    
                return false;
            });
        });
    
        // Largeur du pinceau :
        $("#largeurs_pinceau input").change(function() {
            if (!isNaN($(this).val())) {
                width_brush = $(this).val();
                $("#output").html($(this).val() + " pixels");
            }
        });
    });
    
    
    // -----------------------
    // Fonctions de dessin :
    // -----------------------
    
    // Fonction qui dessine une ligne :
    function drawLine() {
        // Si c'est le début, j'initialise
        if (!started) {
            // Je place mon curseur pour la première fois :
            context.beginPath();
            context.moveTo(cursorX, cursorY);
            started = true;
        }
        // Sinon je dessine
        else {
            context.lineTo(cursorX, cursorY);
            context.strokeStyle = color;
            context.lineWidth = width_brush;
            context.stroke();
        }
    }
    
    // Clear du Canvas :
    function clear_canvas() {
        context.clearRect(0,0, canvas.width(), canvas.height());
    }
    
    })    
    
    </script>
    Dernière édition par Agrepe à 21/05/2019, 13h44

  • #2
    Est-ce qu'en activant le rapport d'erreur à "Développement" on a une info sur les erreurs ?
    Tous les services pour les sites Joomla! : sécurité, nettoyage de sites piratés, hébergement, SEO, applications Fabrik, migration, compatibilité mobiles, accessibilité, ...
    Administrateur certifié Joomla! 3
    https://www.betterweb.fr

    Commentaire


    • #3
      Bonjour Eric,

      Qu'est-ce que tu entends par "dès que je mets ce script dans le fichier default.php" ? s'agit-il d'un fichier externe que tu appelles par $document->addScript(...) ?

      Il s'agit d'un script jquery, est-ce que ton module/template a bien chargé jquery ? un petit JHtml::_('jquery.framework',true); peut résoudre ce problème.

      Et, comme suggéré par jfque, as-tu regardé du côté des erreurs dans la console de ton explorateur ?

      Pascal
      If anything can go wrong, it will...If I can help, I will ..https://conseilgouz.com

      Commentaire


      • #4
        Autre point : tu obtiens un bel écran blanc, donc certainement une erreur 500. Passe en mode développement pour avoir plus d'informations sur le plantage https://kb.joomla.fr/procedures/debu...-developpement

        Pascal
        If anything can go wrong, it will...If I can help, I will ..https://conseilgouz.com

        Commentaire


        • #5
          Bonjour,
          Merci pour votre aide.
          Le fichier default.php est le fichier du dossier tmpl du module que je développe.

          Je vais passer en mode développement pour voir si je trouve quelque chose.

          Bien cordialement.

          Eric

          Commentaire


          • #6
            J'ai activé le mode développeur, je n'ai pas d'erreur signalée.

            Cliquez sur l'image pour l'afficher en taille normale

Nom : Capture_esemargement.JPG 
Affichages : 169 
Taille : 47,5 Ko 
ID : 2000906

            Mon php de début de fichier : (j'ai ajouté la ligne JHtml::_('jquery.framework',true)

            Code PHP:
            <?php
            // No direct access
            defined('_JEXEC') or die;
            JHtml::_('jquery.framework');
            JHtml::_('jquery.framework',true);
            $document JFactory::getDocument();
            $document->addStyleSheet("/modules/mod_esemargement/esemargement.css");
            $date JFactory::getDate()->format('d m Y - a');

            ?>
            Mais cela n'a rien changé

            Je pose cela sur un site que je suis en train de développer, j'ai installer le module en accès admin, je peux communiquer l'URL et un accès admin (en message privé) si vous voulez voir.

            Cordialement.

            Eric
            Fichiers joints
            Dernière édition par Agrepe à 21/05/2019, 16h31

            Commentaire


            • #7
              Tu avais déjà une ligne jquery.frmaework dans ton fichier, donc, l'ajout d'un 2éme n'est pas nécessaire. Le true signifie que tu es en charge mode "no conflict" et que l'on utilise jQuery au lieu de $ (https://docs.joomla.org/J3.x:Javascript_Frameworks).

              Où fais-tu le chargement de ton script ?

              Pascal
              If anything can go wrong, it will...If I can help, I will ..https://conseilgouz.com

              Commentaire


              • #8
                Je fais cela:

                Code PHP:
                <?php
                // No direct access
                defined('_JEXEC') or die;
                JHtml::_('jquery.framework');
                $document JFactory::getDocument();
                $document->addStyleSheet("/modules/mod_esemargement/esemargement.css");
                $date JFactory::getDate()->format('d m Y - a');

                ?>

                <script type="text/javascript">
                $(document).ready(function() {
                        var canvasDiv = document.getElementById('canvasDiv');    
                // -----------------------
                // Fonctions Event :
                // -----------------------

                // Fonction fin de mouvement :
                function moveEnd() {
                    painting = false;
                    started = false;
                ....
                }

                Commentaire


                • #9
                  Si tu n'as aucun affichage et qu'il n'y a pas d'erreur, c'est que ton module n'est pas appelé ou chargé.

                  L'as-tu mis dans une position ? où est défini le canvas ? qu'as-tu dans le fichier principal de ton module, le fichier mod_<nom du module>.php qui appelle le fichier du répertoire tmpl ?

                  En résumé, tu as du php et du javascript, mais cela manque un peu de html pour définir ta zone d'affichage.

                  Pascal
                  If anything can go wrong, it will...If I can help, I will ..https://conseilgouz.com

                  Commentaire


                  • #10
                    Bonjour Pascal,
                    Merci pour ton aide.
                    Le module est bien appelé, tout le reste de son contenu est bien affiché
                    Il n'y a que le canvas qui ne s'affiche pas.

                    Ce module (esemargement) n'est accessible que pour les admin, je t'envoie l'url et un accès admin en message privé, tu v.erras mieux.

                    J'utilise le même script dans un autre cas de figure (qui n'est pas du Joomla) et il fonctionne correctement.

                    Cordialement.
                    Eric

                    Commentaire


                    • #11
                      Bonjour Éric

                      Une fois de plus je suis surpris par la manière dont tu codes... parce que nous n'avons pas les mêmes "façons" toi et moi (ceci n'est pas un jugement de valeur mais une incompréhension de ma part).

                      Dans ton post #8, tu fournis un code. Je suppose que c'est un fichier php mais tu y mixes allègrement du PHP et du javascript et même du HTML puisque la balise <script> est une balise HTML. Trois langages dans le même fichier ==> perso, je ne fais jamais cela d'où ma remarque ci-dessus.

                      Je dirais que ton code ne peut pas fonctionner, cela me semble impossible.

                      Ce que tu mets entre tes balises <script>...</script> c'est du javascript ==> pourquoi ne l'isoles-tu pas dans un fichier "script.js" que tu charges dans ta page ? Joomla mets à disposition une instruction pour charger un fichier .js non ? (=je n'ai plus fait ça depuis tant d'années)

                      Ton code PHP est nécessaire pour, juste, les premières lignes de ton fichier.

                      Dans le meilleur des mondes; sépare un maximum les choses (php => dans un fichier php; js => dans un fichier ..., html => dans un fichier html), fais des fichiers les plus simples que possible, même si ce n'est que pour dix lignes, etc.

                      Bonne journée.

                      Christophe (cavo789)
                      Mon blog, on y parle Docker, PHP, WSL, Markdown et plein d'autres choses : https://www.avonture.be
                      Logiciel gratuit de scan antivirus : https://github.com/cavo789/aesecure_quickscan (plus de 45.000 virus détectés, 700.000 fichiers sur liste blanche)​

                      Commentaire


                      • #12
                        Salut,
                        +1 avec Christophe

                        J'ai fait du rangement, ici:


                        Ensuite, dans tmpl/default.php de ton module:

                        Code:
                        defined('_JEXEC') or die;
                        JHtml::_('stylesheet', 'myassets/canvas.css', array('version' => 'auto', 'relative' => true));
                        JHtml::_('script', 'myassets/canvas.js', array('version' => 'auto', 'relative' => true));
                        Tu auras créé un répertoire nommé /myassets/ dans /media/
                        puis 2 répertoires dans /myassets/
                        1 css
                        1 js

                        et bien sùr, renommé le fichier css en canvas.css
                        le fichier js en en canvas.js
                        ou ce que tu veux

                        ET
                        placé ces fichiers dans
                        media/myassets/css
                        media/myassets/js

                        Et voilà.
                        manu93fr aime ceci.
                        Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

                        Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

                        Commentaire


                        • #13
                          Bonjour,

                          Eric m'a passé son module en MP et je l'ai "remis aux normes" telles qu'évoquées par Christophe et comme tu viens de le faire.

                          L'un des problèmes du script est qu'il fait un prepend sur "body", autrement dit il ajoute une zone de saisie de signature tout en haut du site, sans tenir compte de la position du module. Ensuite, il a fallu adapter un peu le script pour qu'il s'y retrouve par rapport à une zone qui n'est pas à un endroit fixe et faire en sorte que cela fonctionne aussi sur téléphone.

                          En résumé, comme tout script trouvé sur internet, il y a quelques adaptations à prévoir.

                          J'attends qu'Eric me confirme que les modifications sont correctes.

                          Pascal
                          cavo789 aime ceci.
                          If anything can go wrong, it will...If I can help, I will ..https://conseilgouz.com

                          Commentaire


                          • #14
                            Envoyé par pmleconte Voir le message
                            Bonjour,

                            Eric m'a passé son module en MP et je l'ai "remis aux normes" telles qu'évoquées par Christophe et comme tu viens de le faire.

                            L'un des problèmes du script est qu'il fait un prepend sur "body", autrement dit il ajoute une zone de saisie de signature tout en haut du site, sans tenir compte de la position du module. Ensuite, il a fallu adapter un peu le script pour qu'il s'y retrouve par rapport à une zone qui n'est pas à un endroit fixe et faire en sorte que cela fonctionne aussi sur téléphone.

                            En résumé, comme tout script trouvé sur internet, il y a quelques adaptations à prévoir.

                            J'attends qu'Eric me confirme que les modifications sont correctes.

                            Pascal
                            Superbe. Bravo Pascal et Ghazal. You rocks
                            Christophe (cavo789)
                            Mon blog, on y parle Docker, PHP, WSL, Markdown et plein d'autres choses : https://www.avonture.be
                            Logiciel gratuit de scan antivirus : https://github.com/cavo789/aesecure_quickscan (plus de 45.000 virus détectés, 700.000 fichiers sur liste blanche)​

                            Commentaire


                            • #15
                              Bonjour,
                              Toutes mes excuses pour ce retard, mais je travaille à des horaires pas possible depuis que j'ai déménagé.

                              MERCI beaucoup c'est NICKEL.

                              C'est vraiment génial d'être entouré de personnes comme vous. (Fabienne, Christophe, Pascal, Loïc ...)

                              Cordialement.

                              Eric
                              Dernière édition par Agrepe à 04/06/2019, 15h03

                              Commentaire

                              Annonce

                              Réduire
                              Aucune annonce pour le moment.

                              Partenaire de l'association

                              Réduire

                              Hébergeur Web PlanetHoster
                              Travaille ...
                              X