web01/www/js/script.js

// https://www.geeksforgeeks.org/html/difference-between-domcontentloaded-and-load-events/
// Performance for my useCase (modify NAV and FOOTER)
// https://stackoverflow.com/questions/44329324/cannot-read-property-symbolsymbol-iterator-of-undefined
/*
document.addEventListener("DOMContentLoaded", 
    function(e) {
        console.log("DOMContentLoaded triggered !");

        var topEl  = document.getElementsByTagName("nav"); // maybe header
        var listLI = topEl[0].getElementsByTagName("li");


document.getElementById("");
 //       var allA = listLI.getElementsByTagName("a");
// topEl.

listLI.forEach(nodeLI => {console.log(nodeLI.innerHTML);});
*/
/*
allA.forEach(node => {
    console.log(node);
});

*/
/*
        // let myNav = document.getElementsByTagName("nav");
        // myNav.getElementsByTagName("a")
        for (child of allA){
            console.log(child.innerHTML);
        }
*/            // for (document.querySelector("nav")
//    });


/*!SECTION

// .textContent
// .innerHTML


const parent = document.getElementById("myParent");
const children = parent.children;

for (let i = 0; i < children.length; i++) {
  const child = children[i];
  // Perform actions on the child element
  console.log(child.textContent);
}


for (let i = 0; i < children.length; i++) {
  const child = children[i];
  // Perform actions on the child element
  console.log(child.TagName);
console.log(child.textContent);… 


*/

// javascript console output DOM tree
// https://stackoverflow.com/questions/50305257/how-to-console-log-entire-html-dom-tree-in-order-with-attribute-names
// https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker

/*
var walker = document.createTreeWalker(
  document.documentElement,
  NodeFilter.SHOW_ELEMENT // only elements
);

while (walker.nextNode()) {
  let current = walker.currentNode;
  console.log(
    current.tagName,
    [...current.attributes].map(({value,name}) => `${name}=${value}`).join()
  );
}
*/

// Needed for image loaded and fetched : Not on local computer.
/*    https://www.geeksforgeeks.org/html/difference-between-domcontentloaded-and-load-events/
document.addEventListener("load", function(e) {
  console.log("The page has completely loaded.");
});
*/

function timerBlur(){
    var count = 3;
    var timer2 = setInterval(function(){
        
        if (count == 3) {
            document.getElementById('logoAccueil').style.filter = "blur(3px)";

        }
        else if (count == 2) 
        {
          document.getElementById('logoAccueil').style.filter = "blur(2px)";
        }
        else if (count == 1) 
        {
          document.getElementById('logoAccueil').style.filter = "blur(1px)";
        }
                  else if (count == 0) 
        {
          document.getElementById('logoAccueil').style.filter = "";
          clearInterval(timer2);
        }
        count--;
    }, 350);

}

function timerGlitch(){
    var timer = setInterval(function(){
        curSrc = document.getElementById('logoAccueil').getAttribute('src');
        if (curSrc == 'images/LogoALT-F4_Nav.svg') {
          timerBlur();
            document.getElementById('logoAccueil').setAttribute('src', 'images/LogoAlt-F4_NavGlitch.svg')
        }
        else
        {
          document.getElementById('logoAccueil').setAttribute('src', 'images/LogoALT-F4_Nav.svg')
        }
    }, 2500);
}

window.onload = function () {
    timerGlitch();
    setTimeout(function () {
/*                document.getElementById('message').innerHTML =
                    'The page has finished loading! After 2 second'; */
                    // Check if on the test domain and that the text changed, if so display Data.
                    if (window.location.hostname === 's.zkd.ca' && document.getElementById("updateDate").innerHTML != 'DATE_WEBSITE' )
                    {
                        document.getElementById("updateDate").setAttribute("id", "updateDateV");
                    } else
                    {
                        document.getElementById("updateDate").setAttribute("id", "updateDateW");
                        document.getElementById("updateDateW").innerHTML = 'À la prochaine!';
                    }

                    // https://developer.mozilla.org/en-US/docs/Web/API/Element/children
                    // const myHeader = document.getElementByTagName("header"); // TODO: Make sure only first nav (need <header>)
                    myNav = document.getElementsByTagName("nav");
                    console.log(myNav.length());

                    for (var i = 0; i < myNav.children.length(); i++) {
                        var tableChild = myNav.children[i];
                        console.log(tableChild.tagName);
                        // Do stuff
                    }

/*                    for (const child of myNav.children) {
                    console.log(child.tagName);
                    }
*/
            }, 2000);
            // NOTE: Change Current Page based on url in <NAV>


            // TODO Add timer for glitch
            // NOTE Track mouse mouvement and show after a percentage of ?
            // NOTE une page sur deux, ...
        };