template/frontend/src/scripts/default.js

  window.addEventListener('load', function() { window.scrollTo(0,0); }, false);

  /*
   * Personnalisation HEADER visibility
   * Que se passe-t-il lorsque la bannière est invisible ?
   */
  function setLogoVisiblity(visibilityFlag) {
    let element = document.querySelector("nav>*>#settings");
    let value = 'hidden';
    if (visibilityFlag) value = "visible";
    element.style.visibility = value;
  }

  function setSynthesisTopHeight(hauteur) {
    let element = document.querySelector("#synthesis_top");
    element.style.height = hauteur+'px';
  }

  function headerIsNowVisible(header) {
    setLogoVisiblity(false);
    setSynthesisTopHeight(6);
  }

  function headerIsNowInvisible(header) {
    setLogoVisiblity(true);
    setSynthesisTopHeight(80);
    scrollToElement('#synthesis_top');
  }

  /*
   * Personnalisation SYNTHESIS visibility
   * Que se passe-t-il lorsque la synthèse est invisible ?
   */
  function setDatagridFirstColSticky(stickyFlag) {
    let element = null;

    if (stickyFlag) {
      /*
       * Mettre la première case sticky au top left
       */
      element = document.querySelector("#datagrid>table>thead>tr>th:first-child");
      element.style.setProperty('position', 'sticky');
      element.style.setProperty('left', '0px');
      element.style.setProperty('z-index', '30');

      //
      // Mettre la dernière case sticky au bottom left
      //      
      element = document.querySelector("#datagrid>table>tfoot>tr>th:first-child");
      element.style.setProperty('position', 'sticky');
      element.style.setProperty('left', '0px');
      element.style.setProperty('z-index', '30');

    } else {
      element = document.querySelector("#datagrid>table>thead>tr>th:first-child");
      element.style.setProperty('position', 'sticky');
      element.style.setProperty('left', '0px');
      element.style.setProperty('z-index', '10');

      element = document.querySelector("#datagrid>table>tfoot>tr>th:first-child");
      element.style.setProperty('position', 'sticky');
      element.style.setProperty('left', '0px');
      element.style.setProperty('z-index', '10');
    }
  }

  function setDatagridHeadSticky(stickyFlag) {
    let element = document.querySelector("#datagrid>table>thead");
    let navbar = document.querySelector("nav");
    let offset = navbar.offsetHeight;

    if (stickyFlag) {
      /*
       * Mettre le thead sticky au top
       */
      //element = document.querySelector("#datagrid>table>thead");
      element.style.setProperty('position', 'sticky');
      element.style.setProperty('top', offset+'px');
      element.style.setProperty('z-index', '30');
    } else {
      //element = document.querySelector("#datagrid>table>thead");
      element.style.setProperty('position', 'relative');
      element.style.setProperty('top', '0px');
      element.style.setProperty('z-index', '10');
    }
  }

  function setDataGridFootSticky(stickyFlag) {
    let element = document.querySelector("#datagrid>table>tfoot");;
    if (stickyFlag) {
      //
      // Mettre le tfoot sticky au bottom
      //
      element.style.setProperty('position', 'sticky');
      element.style.setProperty('bottom', '0px');
      element.style.setProperty('z-index', '30');

      setDataGridHeadSticky(stickyFlag);

    } else {
      element.style.setProperty('position', 'relative');
      element.style.setProperty('z-index', '10');
    }
  }
  function synthesisIsNowVisible(entry) {

    setDatagridHeadSticky(false);
    setDataGridFootSticky(false);
    /*
    setDatagridFirstColSticky(true);
    */

    myLog('Trigger synthesis is visible');
  }

  function synthesisIsNowInvisible(entry) {

    setDatagridHeadSticky(true);
    setDataGridFootSticky(true);
    /*
    setDatagridFirstColSticky(true);
    */

    myLog('Trigger synthesis is invisible');
  }


  function smoothJump(hash) {
    location.replace("#" + hash);
  }

  function documentGetElementById(id){
    element = document.getElementById(id);
    if (element === null ) return '';
    return element.value;
  }

  function setElementHeight(elementSelector, elementHeight) {
    let element = document.querySelector(elementSelector);
    element.style.height = elementHeight;
  }

  function slideElement(elementSelector, elementHeight) {
    let element = document.querySelector(elementSelector);
    element.style.transition = "all 2s ease-in-out";
    setElementHeight(elementSelector, elementHeight);
  }

  function scrollToElement(elementSelector) {
    let element = document.querySelector(elementSelector);
    element.scrollIntoView({ behavior: 'smooth' });
  }

  function gotoHelp() {
    scrollToElement('#synthesis');
    setTimeout(scrollToElement, 500, '#footer');
  }

  function gotoTop() {
    let element = document.querySelector('header');
    window.scrollTo(0, element.offsetHeight + 1);
  }

  function initDatagrid()
  {
    let fonctionAffichageDataGrid = datagrid_hooks['random'];
    datagridLoading();
    fonctionAffichageDataGrid();
  }


  function initSynthese(mode) {
    let synthesis_body = document.querySelector('#synthesis_body');
    if (synthesis_body) {
      synthesis_body.innerHTML='';
      let template = document.querySelector('#synthesis_body_' + mode);
      if (template) {
        let contenu = document.importNode(template.content, true);
        if (contenu) synthesis_body.appendChild(contenu);
      }
    }
  }

  function initFooter(mode) {
    let footer_body = document.querySelector('footer');
    if (footer_body) {
      footer_body.innerHTML='';
      let template = document.querySelector('#footer_' + mode);
      if (template) {
        let contenu = document.importNode(template.content, true);
        if (contenu) footer_body.appendChild(contenu);
      }
    }
  }

  function activeMenu(element) {
      scrollToElement('#synthesis_top');
      activeMode(element.innerText);
  }
  
  function activeMode(mode) {
    setFilAriane(['Home']);
    if (mode != 'Home') setFilAriane(['Home', mode]);
    initDatagrid(mode);
    initSynthese(mode);
    initFooter(mode);
  }

  // UI
  setLogoVisiblity(false);

  // Contexte de départ
  setContexteValeur('user', 'Anonymous');

  // GO !
  activeMode('Home');