partition-jlg-theme/resources/scripts/app.js

import domReady from '@roots/sage/client/dom-ready';
import { customSearch } from './front/search.js';
import { customTimeline } from './front/timeline.js';


/**
 * Application entrypoint
 */
domReady(async () => {

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

  window.addEventListener('resize', function() {
    setTimeout(function() {
      window.scrollTo(0, 0);
    }, 0);
  });

  // POUR LES LIENS D'EDITION/CONNEXION QUAND ON EST PAS CONNECTÉS
  let connectLinks = document.querySelectorAll('a.xoo-el-login-tgr');
  for (let connectLink of connectLinks) {
    if (connectLink.previousElementSibling) {
      let penImg = connectLink.previousElementSibling;
      connectLink.classList.add('edit-button');
      connectLink.innerText = '';
      connectLink.append(penImg);
    }
  }

  // CLEANER LE TABLEAU
  let minHeadTh = document.querySelector("#main table thead tr th:first-of-type");
  minHeadTh.style.width = `${100 / 8}%`;

  let otherHeadThs = document.querySelectorAll("#main table thead tr th:not(:first-of-type)");
  for (let otherHeadTh of otherHeadThs) {
    otherHeadTh.style.width = `${100 / 8 * 1.75}%`;
  }
  
  let minTableTds = document.querySelectorAll("#main table tbody tr td:first-of-type");
  for (let minTableTd of minTableTds) {
    if (minTableTd.parentNode.childElementCount != 1) {
      minTableTd.style.width = `${100 / 8}%`;
    }
  }

  let otherTableTds = document.querySelectorAll("#main table tbody tr td:not(:first-of-type)");
  for (let otherTableTd of otherTableTds) {
    otherTableTd.style.width = `${100 / 8 * 1.75}%`;
  }

  let editButtons = document.querySelectorAll(".edit-button");
  for (let editButton of editButtons) {
    let editContainer = editButton.parentElement;
    editContainer.style.height = `${editContainer.previousElementSibling.offsetHeight}px`;
  }
  // HEADER AU SCROLL
  let tableHead = document.querySelector("thead tr");
  let tHeadHeight = tableHead.offsetHeight;
  tableHead.style.maxHeight = `${tHeadHeight}px`;
  let headerHeight = document.querySelector("header").offsetHeight;
  let titleLarge = document.querySelector('.brand span:nth-of-type(2)');
  let titlesSmall = document.querySelectorAll('.brand span:not(.brand span:nth-of-type(2))');
  let titleContainer = document.querySelector('.brand');
  window.onscroll = () => {
    tableHead.style.minHeight = `${headerHeight + 72}px`;
    let scroll = window.scrollY;
    let headerNewHeight = tHeadHeight - scroll;
    if (headerNewHeight > 72) {
      tableHead.style.height = `${headerHeight + headerNewHeight}px`;
      titleContainer.style.lineHeight = "1.75rem";
      titleLarge.style.fontSize = '35px';
      for (let titleSmall of titlesSmall) {
        titleSmall.style.fontSize = '25px';
      }
    } else {
      tableHead.style.height = tableHead.style.minHeight;
      titleContainer.style.lineHeight = "1.4rem";
      titleLarge.style.fontSize = '24px';
      for (let titleSmall of titlesSmall) {
        titleSmall.style.fontSize = '17px';
      }
    }
  }

  // C'EST LA POUR LES PRIVACY POLICY
  // texte d'explication du login popup
  // et privacy policy
  let loginPopupText = document.getElementById('content_login_popup');
  let privacyText = document.getElementById('content_privacy').innerHTML;
  loginPopupText = loginPopupText.innerText;
  let loginPopupTextWrapper = document.getElementsByClassName('xoo-el-sidebar');
  if (loginPopupTextWrapper[0]) {
    loginPopupTextWrapper[0].innerHTML = `<div>Espace collaboratif du site</div>`;
    loginPopupTextWrapper[0].innerHTML += `<p style="padding-top: 15px;">${loginPopupText}</p>`;
  }
  let loginPopupHeader = document.querySelector('.xoo-el-sidebar div:first-of-type');
  if (loginPopupHeader !== null) {
    loginPopupHeader.setAttribute('style', 'background-color: white; width: 100%; font-weight: bold; padding: 20px 30px;');
  }
  let policyDropdown = document.createElement('div');
  policyDropdown.style.width = "100%";
  policyDropdown.style.cursor = "pointer";
  policyDropdown.style.fontWeight = "bold";
  policyDropdown.style.display = "flex";
  policyDropdown.style.justifyContent = "space-between";
  policyDropdown.style.backgroundColor = "white";
  policyDropdown.style.padding = "20px 30px";
  let policyDropdownTitle = document.createElement('p');
  policyDropdownTitle.style.padding = "0";
  let policyDropdownPlus = document.createElement('p');
  policyDropdownPlus.style.padding = "0";
  policyDropdownPlus.innerText = '+';
  policyDropdownTitle.innerText = "Politique de confidentialité";
  policyDropdown.appendChild(policyDropdownTitle);
  policyDropdown.appendChild(policyDropdownPlus);
  let privacyPolicyContent = document.createElement('div');
  privacyPolicyContent.innerHTML = privacyText;
  privacyPolicyContent.style.width = "100%";
  privacyPolicyContent.style.padding = "0px";
  let policyParagraphs = privacyPolicyContent.querySelectorAll('p, h2');
  for (let policyParagraph of policyParagraphs) {
    policyParagraph.style.padding = '0';
    policyParagraph.style.marginBottom = '15px';
  }
  privacyPolicyContent.style.height = "0px";
  privacyPolicyContent.style.overflow = "hidden";
  let policyOpen = false;
  policyDropdown.addEventListener('click', togglePolicy);
  if (loginPopupTextWrapper[0]) {
    loginPopupTextWrapper[0].appendChild(policyDropdown);
    loginPopupTextWrapper[0].style.overflowY = "scroll";
    loginPopupTextWrapper[0].appendChild(privacyPolicyContent);
  }

  const privacyLink = document.querySelector('.xoo-aff-checkbox_single a');
  if (privacyLink) {
    privacyLink.addEventListener('click', function (e) {
      e.preventDefault();
      togglePolicy();
    });
  }


  function togglePolicy() {
    if (policyOpen) {
      privacyPolicyContent.style.height = "0px";
      privacyPolicyContent.style.padding = "0px";
      policyOpen = false;
    } else {
      privacyPolicyContent.style.height = "auto";
      privacyPolicyContent.style.padding = "10px 20px";
      policyOpen = true;
    }
  }

  customTimeline();
  customSearch();


  // désactive le loading quand les éléments sont affichés correctement
  setTimeout(() => {
    let loadingEl = document.getElementById('loading');
    loadingEl.style.opacity = "0";
    setTimeout(() => {
      loadingEl.style.display = "none";
    }, 200);
  }, 100);

});

/**
 * @see {@link https://webpack.js.org/api/hot-module-replacement/}
 */
if (import.meta.webpackHot) import.meta.webpackHot.accept(console.error);