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

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 .
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

Je me rappelais plus comment ça fonctionnait la mise en forme !
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: '█',
     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 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 !

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 , 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