[Résolu] Symfony - fonction dans controleur Stimulus ne fonctionne pas

Question

21t0r01

27 Mar 2023 à 15:27

Salut des dev !

Alors moi j'ai un souci, dans mon application Symfony 5.4 avec webpack Encore, j'utilise des controleurs Stimulus pour exécuter le javascript directement sur les éléments concernés.
J'ai ce contrôleur, qui doit afficher un texte avec un effet "typescript" :

import { Controller } from '@hotwired/stimulus';

export default class extends Controller {
connect() {

console.log("animationDuTexte OK");

const $ = require('jquery');
require('bootstrap');

(function ($) {

var defaults = {
typeSpeed: 10,
inline: true,
cursorChar: '█',
cursorBlinkSpeed: 300,
delayBeforeType: 1000,
delayAfterType: 3000,
onComplete: false,
onBeforeType: false,
onAfterType: false,
expansions: [
' ',
'>',
'<',
'"',
'&'
]
};

$.fn.coolType = function (text, options) {
var $this = this,
settings = $.extend({}, defaults, options),
$container = $('<span>'),
$cursor = $('<span>')
.css({
paddingLeft: 3,
display: settings.inline ? 'inline' : 'block'
})
.html(settings.cursorChar)
.hide();

$container.appendTo($this);
$cursor.appendTo($this);

function startBlinking() {
$cursor.data('intervalId', setInterval(function () {
$cursor.toggle();
}, settings.cursorBlinkSpeed));
}

function stopBlinking() {
clearInterval($cursor.data('intervalId'));
}

function expandChar(charIndex) {
var char = text[charIndex];
for (var expansionIndex in settings.expansions) {
var expansion = settings.expansions[expansionIndex];
if (expansion[0] === char) {
var textToCompare = text.substr(charIndex, expansion.length);
if (textToCompare === expansion)
return { char: expansion, charIndex: charIndex + (expansion.length - 1) };
}
}
return { char: char, charIndex: charIndex };
}

function typeText() {
if (settings.onBeforeType) settings.onBeforeType();
var charIndex = 0;
var intervalId = setInterval(function () {
var expanded = expandChar(charIndex),
char = expanded.char;
charIndex = expanded.charIndex;
$container.append(char);
charIndex++;
if (charIndex === text.length) {
clearInterval(intervalId);
if (settings.onAfterType) settings.onAfterType();
if (settings.delayAfterType > 0) {
startBlinking();
setTimeout(function () {
stopBlinking();
$cursor.remove();
if (settings.onComplete) settings.onComplete();
}, settings.delayAfterType);
}
else {
$cursor.remove();
if (settings.onComplete) settings.onComplete();
}
}
}, settings.typeSpeed);
}

if (settings.delayBeforeType > 0) {
$cursor.show();
startBlinking();
setTimeout(function () {
stopBlinking();
$cursor.show();
typeText();
}, settings.delayBeforeType);
}
else {
$cursor.show();
typeText();
}
};
})(jQuery);

}
}

et voici le HTML : % block body %}

<div class="d-flex flex-column transition-fade" id="qui-suis-je">
<div class="box_quiSuisJe1">
<h1 class="text-center">Qui suis je ?</h1>
<img class="photo" src="{{'../assets/images/photo.png'}}" width="200">
</div>
<div id="textToType" style="display: none" data-controller="animationDuTexte">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta consectetur pretium. Ut scelerisque, quam eget tempor sollicitudin, ipsum nunc molestie risus, non cursus lacus tortor sed metus. Fusce varius, risus a convallis hendrerit, nisl metus porttitor tellus, eget venenatis metus tellus tincidunt est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sollicitudin porta leo ac suscipit. Donec dictum laoreet tristique. In hac habitasse platea dictumst. Nunc nulla odio, malesuada eu pellentesque sit amet, vestibulum a ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor, massa id egestas feugiat, purus erat semper massa, sit amet venenatis nunc nisi at justo. Cras posuere commodo fermentum. Integer non est nibh, sit amet tincidunt nibh. Curabitur imperdiet mauris vitae ipsum malesuada a mattis nisi suscipit.
</div>
</div>

{% endblock %}

et ça ne MARCHE PAS Smiley sweatdrop

.
Dans la console, le console.log s'affiche, et j'ai bien les notifs de connexion du Stimulus, mais la fonction ne marche pas, elle semble pourtant correcte.
Par ailleurs j'utilise d'autres Stimulus ailleurs qui eux fonctionnent ! Mais même par comparaison, je n'arrive pas à trouver d'ou vient le problème.

Quelqu'un aurait il une idée ?
Merci pour votre attention les copains

niuxe

Modérateur

27 Mar 2023 à 17:05

Salut,

aide forum alsacreations a écrit :

#### Conventions d'écriture

L'emploi des majuscules est à utiliser avec parcimonie dans les titres de sujet comme dans les messages. En effet, un texte entièrement rédigé en majuscules donne l'impression que la personne crie sur un ton agressif, sur internet. Veuillez donner un titre de sujet évocateur lorsque vous en rédigez un nouveau, et non pas simplement Question, HELP, Problème! ou URGENT!!!!. À question bien posée, réponse vite trouvée. Le forum n'étant pas équipé d'un vérificateur d'orthographe, veuillez vous relire afin que votre message soit bien compris par tous et qu'on vous prenne au sérieux.

Merci de bien vouloir prendre le temps de présenter correctement vos messages, surtout si ces messages doivent inciter les autres membres à vous dépanner sur un problème. Utilisez les boutons de mise en forme (gras, italique, code source, etc.). N'hésitez pas à fournir une image explicative et une adresse où les membres auront un aperçu de votre situation. Il faut toujours donner un maximum de détails pour que les autres membres puissent vous comprendre et vous aider.

je suis quasi sûr que si tu retournes l'écran, le code reste attaché sur l'écran. Il est tellement compact qu'il est illisible. Peux tu utiliser la mise en forme des messages du forum stp ? l'indentation du code ne sera pas du luxe.
Modifié par niuxe (27 Mar 2023 - 17:08)

21t0r01

27 Mar 2023 à 22:32

Je me rappelais plus comment ça fonctionnait la mise en forme ! Smiley lol

Et pis j'ai pas vu que l'indentation suivait pas au copier/coller
Désolé je recommence :

Alors donc, je disais que j'ai un souci, dans mon application Symfony 5.4 avec webpack Encore, j'utilise des controleurs Stimulus pour exécuter le javascript directement sur les éléments concernés, et j'ai donc ce contrôleur, qui doit afficher un texte avec un effet "typescript" :


import { Controller } from '@hotwired/stimulus';

export default class extends Controller {
connect() {

   console.log("animationDuTexte OK");

   const $ = require('jquery');
   require('bootstrap');


   (function ($) {

     var defaults = {
     typeSpeed: 10,
     inline: true,
     cursorChar: '&#9608;',
     cursorBlinkSpeed: 300,
     delayBeforeType: 1000,
     delayAfterType: 3000,
     onComplete: false,
     onBeforeType: false,
     onAfterType: false,
     expansions: [
       '&nbsp;',
       '&gt;',
       '&lt;',
       '&quot;',
       '&amp;'
     ]
   };

   $.fn.coolType = function (text, options) {
      var $this = this,
      settings = $.extend({}, defaults, options),
     $container = $('<span>'),
     $cursor = $('<span>')
     .css({
        paddingLeft: 3,
        display: settings.inline ? 'inline' : 'block'
      })
      .html(settings.cursorChar)
      .hide();

      $container.appendTo($this);
      $cursor.appendTo($this);


   function startBlinking() {
      $cursor.data('intervalId', setInterval(function () {
      $cursor.toggle();
      }, settings.cursorBlinkSpeed));
   }


   function stopBlinking() {
   clearInterval($cursor.data('intervalId'));
   }


   function expandChar(charIndex) {
      var char = text[charIndex];
      for (var expansionIndex in settings.expansions) {
         var expansion = settings.expansions[expansionIndex];
         if (expansion[0] === char) {
            var textToCompare = text.substr(charIndex, expansion.length);
            if (textToCompare === expansion)
            return { char: expansion, charIndex: charIndex + (expansion.length - 1) };
         }
      }
   return { char: char, charIndex: charIndex };
   }

   function typeText() {
      if (settings.onBeforeType) settings.onBeforeType();
      var charIndex = 0;
      var intervalId = setInterval(function () {
         var expanded = expandChar(charIndex),
         char = expanded.char;
         charIndex = expanded.charIndex;
         $container.append(char);
         charIndex++;
         if (charIndex === text.length) {
            clearInterval(intervalId);
            if (settings.onAfterType) settings.onAfterType();
            if (settings.delayAfterType > 0) {
                  startBlinking();
                  setTimeout(function () {
                     stopBlinking();
                     $cursor.remove();
                     if (settings.onComplete) settings.onComplete();
                 }, settings.delayAfterType);
             }
            else {
               $cursor.remove();
               if (settings.onComplete) settings.onComplete();
            }
         }
      }, settings.typeSpeed);
   }

   if (settings.delayBeforeType > 0) {
      $cursor.show();
      startBlinking();
      setTimeout(function () {
         stopBlinking();
         $cursor.show();
         typeText();
      }, settings.delayBeforeType);
   }
   else {
      $cursor.show();
      typeText();
   }
};
})(jQuery);

}
}

et ce HTML (Twig) :

% block body %}

<div class="d-flex flex-column transition-fade" id="qui-suis-je">
   <div class="box_quiSuisJe1">
      <h1 class="text-center">Qui suis je ?</h1>
      <img class="photo" src="{{'../assets/images/photo.png'}}" width="200">
   </div>
   <div id="textToType" style="display: none" data-controller="animationDuTexte">
Lorem ipsum .
   </div>
</div>

{% endblock %}

et ça ne marche pas .

Dans la console, le console.log s'affiche et j'ai bien les notifs de connexion du Stimulus, mais la fonction ne marche pas, elle semble pourtant correcte.
Par ailleurs j'utilise d'autres Stimulus ailleurs qui eux fonctionnent ! Mais même par comparaison, je n'arrive pas à trouver d'où vient le problème.

Est ce que vous avez une idée d'où ça peut venir ?
Merci pour votre attention big up !

niuxe

Modérateur

27 Mar 2023 à 23:13

L'argument de la closure ?

Et si tu remplaces :


const $ = require('jquery');

par :


const jQuery = require('jquery');

ps : Je viens de parcourir la doc de stimulus. Je ne suis pas convaincu de cette librairie (Decorator passablement utile.). il faudrait que je la teste sur un Command. Dans la doc, il y a un exemple de slider. En Vanilla, tu peux le faire et d'une manière encore plus propre (séparation des couches).
Modifié par niuxe (27 Mar 2023 - 23:26)

21t0r01

30 Mar 2023 à 13:16

Hello Niuxe, merci pour ton aide !

J'ai trouvé le problème il était tout bête, c'était pas l'argument closure : le HTML était incomplet Smiley sweatdrop

, les sélecteurs importants non désignés. J'ai rajouté en tout début de fonction :


 $(function () {
                var text = $('.texteATaper').text();
                $('.container').coolType(text);
            });

Et là, la magie opère ... Désolé pour le dérangement.

Pour Stimulus, je m'en sers parce qu'il est utilisé dans le cadre de Swup (Symfony UX), et que le système de contrôleur à attacher à un élément du DOM est bien pratique pour exécuter localement scripts et feuilles de style, ça évite notamment le flash de chargement des styles au lancement de la page. Il y a peut etre d'autres solutions pour ça ? En tout cas je les connais pas.

A la prochaine et longue vie à AlsaCréations !

ps

Prévenir un modérateur

Répondre au sujet

Développement web côté serveur, CMS

[Résolu] Symfony - fonction dans controleur Stimulus ne fonctionne pas