applyKaraokeEffect
Tue Dec 12 2023 18:58:50 GMT+0000 (Coordinated Universal Time)
Saved by @FOrestNAtion
<script> function applyKaraokeEffect() { // Function to apply the effect to a list of elements const applyEffectToElements = (elements) => { elements.forEach(element => { // Clear existing spans to avoid duplication if (!element.classList.contains('karaoke-initialized')) { const text = element.innerText; element.innerHTML = ''; // Clear the element const words = text.split(/\s+/); words.forEach((word, index) => { const span = document.createElement('span'); const isPunctuation = /[,.!?;]/.test(word.slice(-1)); const extraTime = isPunctuation ? 500 : 0; span.textContent = word + (index < words.length - 1 ? ' ' : ''); span.dataset.duration = Math.max(300, word.length * 100) + extraTime; element.appendChild(span); }); element.classList.add('karaoke-initialized'); let currentWord = 0; const highlightWord = () => { if (currentWord < element.children.length) { const span = element.children[currentWord]; span.classList.add('highlight'); setTimeout(() => { span.classList.remove('highlight'); currentWord++; highlightWord(); }, span.dataset.duration); } else { currentWord = 0; // Reset to start from the first word again setTimeout(highlightWord, 1000); // Delay before starting the loop again } }; highlightWord(); } }); }; // Target elements outside of the Froala Editor only const karaokeElementsOutsideEditor = document.querySelectorAll('.fnFrPclasskaraoke1:not(.fr-element .fnFrPclasskaraoke1)'); applyEffectToElements(karaokeElementsOutsideEditor); } document.addEventListener('DOMContentLoaded', applyKaraokeEffect); function onModalClose() { setTimeout(applyKaraokeEffect, 500); // Adjust the delay as needed } // Attach a single event listener to the document // and check if the clicked element is a modal close button within a modal document.addEventListener('click', function(event) { if (event.target.matches('.zb-modalClose') && event.target.closest('.zb-modalContent')) { onModalClose(); } }); </script>
Comments