Difference between revisions of "MediaWiki:Common.js"

Line 1: Line 1:
/* Any JavaScript here will be loaded for all users on every page load. */
 
 
function initializeCharDivs() {
 
function initializeCharDivs() {
 
   // find all divs with class "js-hanzi"
 
   // find all divs with class "js-hanzi"
 
   const charDivs = document.querySelectorAll('.js-hanzi');
 
   const charDivs = document.querySelectorAll('.js-hanzi');
   charDivs.forEach((charDiv) => {
+
   for(let idx = 0; idx < charDivs.length; idx++) {
 
     // get the character from the data-char attribute
 
     // get the character from the data-char attribute
     const char = charDiv.dataset.char;
+
     const char = charDivs[idx].dataset.char;
 
     // create a writer for the character, and loop animation
 
     // create a writer for the character, and loop animation
     const writer = HanziWriter.create(charDiv, char, {
+
     const writer = HanziWriter.create(charDivs[idx], char, {
 
       width: 100,
 
       width: 100,
 
       height: 100,
 
       height: 100,
Line 14: Line 13:
 
     });
 
     });
 
     writer.loopCharacterAnimation();
 
     writer.loopCharacterAnimation();
   });
+
   };
 
};
 
};
 
document.addEventListener('DOMContentLoaded', initializeCharDivs);
 
document.addEventListener('DOMContentLoaded', initializeCharDivs);
 
initializeCharDivs();
 
initializeCharDivs();

Revision as of 02:05, 4 March 2024

function initializeCharDivs() {
  // find all divs with class "js-hanzi"
  const charDivs = document.querySelectorAll('.js-hanzi');
  for(let idx = 0; idx < charDivs.length; idx++) {
    // get the character from the data-char attribute
    const char = charDivs[idx].dataset.char;
    // create a writer for the character, and loop animation
    const writer = HanziWriter.create(charDivs[idx], char, {
      width: 100,
      height: 100,
      padding: 5,
      showOutline: true,
    });
    writer.loopCharacterAnimation();
  };
};
document.addEventListener('DOMContentLoaded', initializeCharDivs);
initializeCharDivs();