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
incompréhensible 
Bonjour parsimonhi 