avant corrections

2023-11-02 08:04:25 +01:00
parent 52fdf5bdf4
commit 4999a4a944
12 changed files with 1328 additions and 137 deletions
@@ -4,8 +4,18 @@ import domReady from '@roots/sage/client/dom-ready';
 * Application entrypoint
 */
 domReady(async () => {
-  // pour régler tous les pb au refresh quand la page est déjà scrollée
-  window.scrollTo(0, 0);
+
+  window.addEventListener('load', function() {
+    setTimeout(function() {
+      window.scrollTo(0, 0);
+    }, 0);
+  });
+
+  window.addEventListener('resize', function() {
+    setTimeout(function() {
+      window.scrollTo(0, 0);
+    }, 0);
+  });

  // CLEANER LE TABLEAU
  let minHeadTh = document.querySelector("#main table thead tr th:first-of-type");
@@ -27,6 +37,12 @@ domReady(async () => {
  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;
@@ -42,22 +58,65 @@ domReady(async () => {
      tableHead.style.height = tableHead.style.minHeight;
    }
  }
-  // italiques -> A FAIRE SUR LE CSV AVANT D'IMPORTER CA RALENTIT DE OUF LE CHARGEMENT
-  /*       let tbody = document.querySelector('body main table tbody');
-  let tbodyContent = tbody.innerHTML;
-  let asteriskCounter = 0;
-  for (let i = 0; i < tbodyContent.length; i++) {
-    if (tbodyContent[i] == "*") {
-      if (asteriskCounter % 2 == 0) {
-        tbodyContent = tbodyContent.substring(0, i) + '<span class="font-caslon italic">' + tbodyContent.substring(i + 1);
-      } else {
-        tbodyContent = tbodyContent.substring(0, i) + '</span>' + tbodyContent.substring(i + 1);
-      }
-      asteriskCounter++;
+
+  // 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 = `<p>${loginPopupText}</p>`;
+  }
+  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);
+  }
+
+
+  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;
    }
  }
-  tbody.innerHTML = tbodyContent;
-*/
+

  // titres de parties dans le tableau
  let mainpartTitless = document.querySelectorAll('.isMainPart');
@@ -128,7 +187,7 @@ domReady(async () => {
  }
  let totalTime = convertToSeconds(lastTime[0].innerText);

-  let tlContainer, tlContainerHeight, bodyHeight;
+  let tlContainer, tlContainerHeight;
  let partBlockHeights = [];
  let activePartIndex = 0;
  
@@ -139,7 +198,6 @@ domReady(async () => {
    tlContainer.style.height = `calc(100vh - ${header.offsetHeight}px - ${footer.offsetHeight}px - 60px)`;
    tlContainer.style.top = `${document.querySelector('header').offsetHeight + 30}px`;
    tlContainerHeight = tlContainer.offsetHeight;
-    bodyHeight = document.querySelector('body').offsetHeight;
    for (let partDuration of partDurations) {
      partBlockHeights.push(partDuration / totalTime * tlContainerHeight);
    }
@@ -172,6 +230,7 @@ domReady(async () => {
        toggleTitleHover(i, 'hide');
      });
      tlContainer.children[0].addEventListener("click", function() {
+        isScrollingFromGrab = false;
        titresFrise[i].el.scrollIntoView({ behavior: 'smooth', block: 'center' });
      });
    }
@@ -197,6 +256,8 @@ domReady(async () => {

  let lastMain = null;

+  let grabbing = false;
+
  for (let i = 0; i < elements.length; i++) {
    let current = elements[i];
    let next = elements[i + 1];
@@ -302,6 +363,11 @@ domReady(async () => {
    }
  }

+
+  // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+  // ICI IL Y A LE GRAB DU CURSEUR DE LA TL
+  // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+
  // make the cursor move on scroll
  let cursor = document.querySelector('#cursor');
  cursor.style.top = `${document.querySelector('#timeline_container').getBoundingClientRect().top}px`;
@@ -312,8 +378,7 @@ domReady(async () => {
  partRects = Array.from(partRects);
  partRects = partRects.reverse();
  partRects[0].style.width = '32px';
-  let grabbing = false;
-  document.addEventListener("scroll", (event) => {
+  document.addEventListener("scroll", () => {
    if (!grabbing) {
      displayCurrentPartTitle(getCurrentPartFromScroll());
      moveCursorFromScroll(getCurrentPartFromScroll());
@@ -324,9 +389,15 @@ domReady(async () => {
    let offsetY;
  
    element.addEventListener('mousedown', (e) => {
+      let elTransformY;
+      if (!element.style.transform) {
+        elTransformY = 0;
+      } else {
+        elTransformY = +element.style.transform.split('(')[1].split('p')[0];
+      }
      e.preventDefault();
      grabbing = true;
-      offsetY = e.clientY - +element.style.top.slice(0, -2);
+      offsetY = e.clientY - elTransformY;
      element.style.cursor = 'grabbing';
    });
  
@@ -334,74 +405,29 @@ domReady(async () => {
      if (grabbing) {
        if (e.clientY < tlContainerHeight + tlContainer.offsetTop && e.clientY > tlContainer.offsetTop) {
          const y = e.clientY - offsetY;
-          element.style.top = `${y}px`;
-          relatedEl.style.top = `${y}px`;
+          element.style.transform = `translateY(${y}px)`;
+          relatedEl.style.transform = `translateY(${y}px)`;
          if (!isNaN(y)) displayCurrentPartTitle(getCurrentPartFromCursor(y));
-        } else if (e.clientY <= tlContainer.offsetTop) {
-          element.style.top = `${tlContainer.offsetTop}px`;
-          relatedEl.style.top = `${tlContainer.offsetTop}px`;
+        } else if (e.clientY < tlContainer.offsetTop + 10) {
+          element.style.transform = `translateY(0px)`;
+          relatedEl.style.transform = `translateY(0px)`;
        } else if (e.clientY >= tlContainerHeight + tlContainer.offsetTop) {
-          element.style.top = `${tlContainerHeight + tlContainer.offsetTop}px`;
-          relatedEl.style.top = `${tlContainerHeight + tlContainer.offsetTop}px`;
+          element.style.transform = `translateY(${tlContainerHeight}px)`;
+          relatedEl.style.transform = `translateY(${tlContainerHeight}px)`;
        }
      }
    });
  
    document.addEventListener('mouseup', () => {
-      grabbing = false;
+      if (grabbing) scrollOnGrab(element);
      element.style.cursor = 'grab';
+      grabbing = false;
    });
  }

  makeElementDraggable(cursor, titres);
  makeElementDraggable(titres, cursor);

-
-
-
-
-
-/*   let cursorPrevTranslateAmount = +cursor.style.transform.slice(0, -3).slice(11);
-  // make the cursor draggable
-  let prevMousePos = 0;
-  cursor.addEventListener("mousedown", (event) => {
-    if (!grabbing) {
-      event.preventDefault();
-      grabbing = true;
-      prevMousePos = event.clientY;
-    }
-  });
-  window.addEventListener("mousemove", (event) => {
-    if (grabbing) {
-      event.preventDefault();
-      let newPos = cursorPrevTranslateAmount + (event.clientY - prevMousePos);
-      if (event.clientY < tlContainerHeight + tlContainer.offsetTop && event.clientY > tlContainer.offsetTop) {
-        cursor.style.transform = `translateY(${newPos}px)`;
-        window.scrollBy(0, (event.clientY - prevMousePos) * (bodyHeight / tlContainerHeight));
-        cursorPrevTranslateAmount = +cursor.style.transform.slice(0, -3).slice(11);
-      } else if (event.clientY <= tlContainer.offsetTop) {
-        cursor.style.transform = "translateY(0px)";
-        window.scroll(0, 0);
-        cursorPrevTranslateAmount = 0;
-      } else if (event.clientY >= tlContainerHeight + tlContainer.offsetTop) {
-        cursor.style.transform = `translateY(${tlContainerHeight}px)`;
-        window.scroll(0, bodyHeight);         
-        cursorPrevTranslateAmount = +cursor.style.transform.slice(0, -3).slice(11);
-      }
-      prevMousePos = event.clientY;
-    }
-  });
-  window.addEventListener("mouseup", (event) => {
-    if (grabbing) {
-      grabbing = false;
-    }
-  });
- */
-
-
-
-
-
  // get heights of parts dans le tableau et dans la timeline
  function getSteps() {
    let tlElSteps = [];
@@ -422,45 +448,102 @@ domReady(async () => {
    });
  }

-  function moveCursorFromScroll(currentPartIndex) {
-    let currentScroll = window.scrollY;
-    
-    let cursorTopValue = 0;
-    let tlPartHeight, tlPartBottom;
-    
+
+  // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+  // ICI IL Y A LE SCROLL DU GRAB
+  // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+  let isScrollingFromGrab = false;
+
+  function scrollOnGrab(el) {
+   let scrollValue = 
+      ((getSteps().scrollSteps[getCursorPositionInTimelinePart(el).stepAfterMouseUp] - getSteps().scrollSteps[getCursorPositionInTimelinePart(el).stepAfterMouseUp - 1]) * getCursorPositionInTimelinePart(el).proportionInPart)
+      + getSteps().scrollSteps[getCursorPositionInTimelinePart(el).stepAfterMouseUp];
+    isScrollingFromGrab = true;
+    window.scrollTo({ top: scrollValue, behavior: 'smooth' });
+    setTimeout(() => {
+      isScrollingFromGrab = false;
+    }, 2000);
+  }
+
+  function getCursorPositionInTimelinePart(el) {
+    let elTransformY;
+    if (!el.style.transform) {
+      elTransformY = 0;
+    } else {
+      elTransformY = +el.style.transform.split('(')[1].split('p')[0];
+    }
+
+    let tlPartHeight, tlPartBottom, tlPartTop, proportionInPart, stepAfterMouseUp;
    for (let j = 0; j < partRects.length; j++) {
-      tlPartHeight = partRects[j].getBoundingClientRect().height
-      tlPartBottom = partRects[j].getBoundingClientRect().top - tlContainer.getBoundingClientRect().top;
-      cursorTopValue = tlPartBottom;
-      // get the amount of the current scrollpart scrolled
-      if (j === currentPartIndex) break;
+      if (j === getCurrentPartFromCursor(elTransformY)) {
+        tlPartHeight = partRects[j].getBoundingClientRect().height;
+        tlPartBottom = partRects[j].getBoundingClientRect().top - tlContainer.getBoundingClientRect().top;
+        tlPartTop = tlPartBottom - tlPartHeight;
+        proportionInPart = ((tlPartHeight - (elTransformY - tlPartTop)) / tlPartHeight) * -1;
+        if (proportionInPart > 0 && proportionInPart < 1) {
+          stepAfterMouseUp = j;
+          return {stepAfterMouseUp, proportionInPart};
+        } else {
+          stepAfterMouseUp = j;
+          proportionInPart = 0;
+          return {stepAfterMouseUp, proportionInPart};
+        }
+      } 
    }
+  }

-    let currentScrollPartBottom = getSteps().scrollSteps[currentPartIndex - 1] ? getSteps().scrollSteps[currentPartIndex - 1] : 0;
-    let currentScrollPartHeight;
-    if (getSteps().scrollSteps[currentPartIndex + 1]) {
-      currentScrollPartHeight = getSteps().scrollSteps[currentPartIndex + 1] - currentScrollPartBottom;
-    } else {
-      currentScrollPartHeight = document.querySelector('body').scrollHeight - currentScrollPartBottom;
-    }
-    let currentScrollSincePartBottom = currentScroll - currentScrollPartBottom;
-    let scrollPartProportion = currentScrollSincePartBottom / currentScrollPartHeight;

-    cursorTopValue = cursorTopValue + tlPartHeight * (tlPartHeight / tlPartHeight * (scrollPartProportion - 0.3));
-    
-    if (cursorTopValue > 0) {
-      cursor.style.transform = `translateY(${cursorTopValue}px)`;
-      titres.style.transform = `translateY(${cursorTopValue}px)`;
-    } else {
-      cursor.style.transform = `translateY(0px)`;
-      titres.style.transform = `translateY(0px)`;
+  // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+  // ICI IL Y A LE RAPPORT SCROLL / TIMELINE
+  // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+
+  function moveCursorFromScroll(currentPartIndex) {
+    if (!isScrollingFromGrab) {
+      let currentScroll = window.scrollY;
+      
+      let cursorTopValue = 0;
+      let tlPartHeight, tlPartBottom;
+      
+      for (let j = 0; j < partRects.length; j++) {
+        tlPartHeight = partRects[j].getBoundingClientRect().height
+        tlPartBottom = partRects[j].getBoundingClientRect().top - tlContainer.getBoundingClientRect().top;
+        cursorTopValue = tlPartBottom;
+        // get the amount of the current scrollpart scrolled
+        if (j === currentPartIndex) break;
+      }
+  
+      let currentScrollPartBottom = getSteps().scrollSteps[currentPartIndex - 1] ? getSteps().scrollSteps[currentPartIndex - 1] : 0;
+      let currentScrollPartHeight;
+      if (getSteps().scrollSteps[currentPartIndex + 1]) {
+        currentScrollPartHeight = getSteps().scrollSteps[currentPartIndex + 1] - currentScrollPartBottom;
+      } else {
+        currentScrollPartHeight = document.querySelector('body').scrollHeight - currentScrollPartBottom;
+      }
+      let currentScrollSincePartBottom = currentScroll - currentScrollPartBottom;
+      let scrollPartProportion = currentScrollSincePartBottom / currentScrollPartHeight;
+  
+      cursorTopValue = cursorTopValue + tlPartHeight * (tlPartHeight / tlPartHeight * (scrollPartProportion - 0.3));
+      
+      if (cursorTopValue > 0) {
+        cursor.style.transform = `translateY(${cursorTopValue}px)`;
+        titres.style.transform = `translateY(${cursorTopValue}px)`;
+      } else {
+        cursor.style.transform = `translateY(0px)`;
+        titres.style.transform = `translateY(0px)`;
+      }
    }
  }

  let prevPartIndex = 0;
+  let lastCallTimestamp = 0;

  function displayCurrentPartTitle(currentPartIndex) {
-    titres.firstElementChild.innerText = getCurrentTime(titresFrise[currentPartIndex]?.el);
+    if (isNaN(currentPartIndex)) currentPartIndex = 0;
+    const currentTime = performance.now();
+    if (currentTime - lastCallTimestamp >= 400) {
+      lastCallTimestamp = currentTime;
+      titres.firstElementChild.innerText = getCurrentTime(titresFrise[currentPartIndex]?.el); // ICI POUR METTRE LE TEMPS BIEN
+    }
    let mainEl = titres.children[1];
    let subEl = titres.lastElementChild;
    if (mainEl.innerText != titresFrise[currentPartIndex]?.main || subEl.innerText != titresFrise[currentPartIndex]?.sub) {
@@ -487,26 +570,332 @@ domReady(async () => {
    }
  }

-  function getCurrentPartFromCursor(cursorTop) {
+  function getCurrentPartFromCursor(cursorTransformY) {
    for (let i = 0; i < getSteps().tlElSteps.length; i++) {
-     if (cursorTop - tlContainer.offsetTop >= getSteps().tlElSteps[i] && cursorTop - tlContainer.offsetTop < getSteps().tlElSteps[i + 1]) {
+     if (cursorTransformY >= getSteps().tlElSteps[i] && cursorTransformY < getSteps().tlElSteps[i + 1]) {
        return(i);
-      } else if (cursorTop - tlContainer.offsetTop > getSteps().tlElSteps[getSteps().tlElSteps.length - 1]) {
+      } else if (cursorTransformY > getSteps().tlElSteps[getSteps().tlElSteps.length - 1]) {
        return(getSteps().tlElSteps.length - 1);
     }
    }
  }

+  ///////////////////////////////////////
+  // ICI LE GETCURRENTTIME !!!!!!!!!!!!!!
+  ///////////////////////////////////////
+
  function getCurrentTime(titleEl) {
    let nextRow = titleEl?.nextElementSibling;
-    while(nextRow) {
-      if (nextRow.offsetTop > window.scrollY &&
-          nextRow.classList.contains('isContentPart')) {
-        return(nextRow.firstElementChild.innerText);
+    if (!grabbing) {
+      while(nextRow) {
+        if (nextRow.offsetTop > window.scrollY &&
+            nextRow.classList.contains('isContentPart')) {
+              return(nextRow.firstElementChild.innerText);
+            }
+        nextRow = nextRow.nextElementSibling;
      }
-      nextRow = nextRow.nextElementSibling;
+    } else {
+      let cursor = document.querySelector('#cursor');
+      let allRowsUnder = [];
+      nextRow = nextRow.nextElementSibling.nextElementSibling;
+      while(nextRow) {
+        if (nextRow.classList.contains('isMainPart') || nextRow.classList.contains('isSubPart')) {
+          break;
+        }
+        allRowsUnder.push(nextRow);
+        nextRow = nextRow.nextElementSibling;
+      }
+      return allRowsUnder[Math.floor(allRowsUnder.length * getCursorPositionInTimelinePart(cursor).proportionInPart)].firstElementChild.innerText;
    }
  }
+
+
+  // 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);
+
+
+  // recherche
+  let searchableContent = document.querySelectorAll('tr td:not(:first-of-type):not(:last-of-type)');
+  let searchInput = document.querySelector('input[type="search"]');
+  let searchResults = document.querySelector('#search_results');
+  let isResultOpen = false;
+  let resultAmount = 0;
+  let resultAmountText = document.querySelector('#result_amount');
+  let hilightedWords;
+  let typingTimer;
+  let currentSelectedWord = 0;
+  let downArrow = document.querySelector('#search_results div div img:first-of-type');
+  let upArrow = document.querySelector('#search_results div div img:last-of-type');
+
+  let thereAreResults = false;
+  let inputIsActive = false;
+
+  searchInput.addEventListener('focus', () => { inputIsActive = true; toggleSearchResults(); });
+  searchInput.addEventListener('blur', () => { inputIsActive = false; });
+
+  searchInput.addEventListener('keydown', function(e) {
+    triggerSearch();
+  });
+
+  function triggerSearch() {
+    setTimeout(() => {
+
+      hilightedWords = [];
+
+      removeHighlightTags();
+      
+      resultAmount = 0;
+      
+      let input = searchInput.value.toLowerCase();
+      
+      if (searchInput.value.length >= 3) {
+
+        thereAreResults = true;
+
+        clearTimeout(typingTimer);
+
+        typingTimer = setTimeout(function() {
+
+          searchInContent(input);
+
+/*           if (!isResultOpen) {
+            toggleSearchResults();
+          }
+ */  
+          let currentScroll = window.scrollY;
+
+          if (hilightedWords.length != 0) {
+            
+            searchResults.querySelector('div p:first-of-type').style.display = "block";
+            searchResults.querySelector('div p:last-of-type').style.display = "none";
+
+            for (let i = 0; i < hilightedWords.length; i++) {
+
+              let wordBoundingTop = hilightedWords[i].getBoundingClientRect().top;
+
+              if (hilightedWords.length <= 1) {
+                let scrollValue = (wordBoundingTop + currentScroll) - window.innerHeight / 2;
+                window.scrollTo({ top: scrollValue, behavior: 'smooth' });
+                currentSelectedWord = 1;
+                resultAmountText.innerText = currentSelectedWord + "/" + resultAmountText.innerText;
+                upArrow.classList.add('disabled');
+                downArrow.classList.add('disabled');
+              } else {
+                if (currentScroll < hilightedWords[i].getBoundingClientRect().top && i === 0) {
+    
+                  let scrollValue = (wordBoundingTop + currentScroll) - window.innerHeight / 2;
+                  window.scrollTo({ top: scrollValue, behavior: 'smooth' });
+                  currentSelectedWord = 1;
+                  resultAmountText.innerText = currentSelectedWord + "/" + resultAmountText.innerText;
+                  upArrow.classList.add('disabled');
+                  downArrow.classList.remove('disabled');
+                  break;
+    
+                } else if (
+                  currentScroll < wordBoundingTop + currentScroll && currentScroll > hilightedWords[i - 1]?.getBoundingClientRect().top + currentScroll
+                ) {
+      
+                  let scrollValue = (wordBoundingTop + currentScroll) - window.innerHeight / 2;
+                  window.scrollTo({ top: scrollValue, behavior: 'smooth' });
+                  currentSelectedWord = i + 1;
+                  resultAmountText.innerText = currentSelectedWord + "/" + resultAmountText.innerText;
+                  upArrow.classList.remove('disabled');
+                  downArrow.classList.remove('disabled');
+                  break;
+    
+                } else if (currentScroll > wordBoundingTop && i === hilightedWords.length - 1) {
+      
+                  let scrollValue = (wordBoundingTop + currentScroll) - window.innerHeight / 2;
+                  window.scrollTo({ top: scrollValue, behavior: 'smooth' });
+                  currentSelectedWord = hilightedWords.length;
+                  resultAmountText.innerText = currentSelectedWord + "/" + resultAmountText.innerText;
+                  upArrow.classList.remove('disabled');
+                  downArrow.classList.add('disabled');
+                  break;
+    
+                }
+  
+              }
+              
+            }  
+
+          } else {
+            searchResults.querySelector('div p:first-of-type').style.display = "none";
+            searchResults.querySelector('div p:last-of-type').style.display = "block";
+            upArrow.classList.add('disabled');
+            downArrow.classList.add('disabled');
+          }
+
+        }, 800);
+
+      } else {
+        removeHighlightTags();
+        thereAreResults = false;
+
+        searchResults.querySelector('div p:first-of-type').style.display = "none";
+        searchResults.querySelector('div p:last-of-type').style.display = "block";
+        upArrow.classList.add('disabled');
+        downArrow.classList.add('disabled');
+/*         if (isResultOpen) {
+          toggleSearchResults();
+        }
+ */      }
+    }, 10);
+  }
+
+  function searchInContent(input) {
+    for (let content of searchableContent) {
+
+      if (content.innerText != '') {
+
+        for (let textEl of content.children) {
+
+          if (textEl.innerText !== '') {
+
+            if (textEl.innerHTML.toLowerCase().includes(input)) {
+              
+              let splitContent = textEl.innerHTML.toLowerCase().split(input);
+              
+              let processedText = '';
+              
+              for (let i = 0; i < splitContent.length; i++) {
+
+                if (splitContent[0] !== '' || splitContent[splitContent.length - 1] !== '') {
+
+                  if (i === 0) {
+                    processedText += textEl.innerHTML.substring(0, splitContent[i].length);
+
+                  } else {
+                    let amountOfTextToConcatenate = 0;
+                    for (let j = 0; j <= i - 1; j ++) {
+                      amountOfTextToConcatenate += splitContent[j].length + input.length;
+                    }
+                    processedText += 
+                      '<span class="highlight">' + 
+                      textEl.innerHTML.substring(amountOfTextToConcatenate - input.length, amountOfTextToConcatenate) +
+                      '</span>' +
+                      textEl.innerHTML.substring(
+                        amountOfTextToConcatenate, amountOfTextToConcatenate + splitContent[i].length
+                      );
+
+                  }
+                } else if (splitContent[splitContent.length - 1] === '' && splitContent[0] === '') {
+                  processedText = '<span class="highlight">' + textEl.innerHTML.substring(splitContent[i - 1].length, splitContent[i - 1].length + input.length) + '</span>';
+
+                }
+
+              }
+
+              textEl.innerHTML = processedText;
+
+              hilightedWords = document.querySelectorAll('.highlight');
+              resultAmount = hilightedWords.length;
+
+            }
+
+          }
+
+        }
+      }
+    }
+
+    resultAmountText.innerText = resultAmount;
+  }
+
+  function removeHighlightTags() {
+    for (let content of searchableContent) {
+      if (content.innerHTML.includes('<span class="highlight">')) {
+        content.innerHTML = content.innerHTML.replace(/<span class="highlight">|<\/span>/g, '');
+      }
+    }
+  }
+
+  function toggleSearchResults() {
+    if (thereAreResults || inputIsActive) {
+      searchResults.style.display = "block";
+      searchResults.style.opacity = 1;
+      searchResults.style.maxHeight = "1000px";
+      isResultOpen = true;
+    } else {
+      searchResults.style.opacity = 0;
+      searchResults.style.maxHeight = "0px";
+      isResultOpen = false;
+      setTimeout(() => {
+        searchResults.style.display = "none";
+      }, 300);
+    }
+  }
+
+  upArrow.addEventListener('click', function (el) {
+    if (!el.target.classList.contains('disabled')) {
+      let currentScroll = window.scrollY;
+      currentSelectedWord--;
+
+      let wordBoundingTop = hilightedWords[currentSelectedWord - 1].getBoundingClientRect().top;
+
+      let scrollValue = (wordBoundingTop + currentScroll) - window.innerHeight / 2;
+      window.scrollTo({ top: scrollValue, behavior: 'smooth' });
+      resultAmountText.innerText = currentSelectedWord + "/" + resultAmountText.innerText.split('/')[1];
+
+      if (currentSelectedWord === 1) {
+        upArrow.classList.add('disabled');
+        downArrow.classList.remove('disabled');
+      } else {
+        upArrow.classList.remove('disabled');
+        downArrow.classList.remove('disabled');
+      }
+      
+    }
+  });
+
+  downArrow.addEventListener('click', function (el) {
+    if (!el.target.classList.contains('disabled')) {
+      let currentScroll = window.scrollY;
+      currentSelectedWord++;
+
+      let wordBoundingTop = hilightedWords[currentSelectedWord - 1].getBoundingClientRect().top;
+
+      let scrollValue = (wordBoundingTop + currentScroll) - window.innerHeight / 2;
+      window.scrollTo({ top: scrollValue, behavior: 'smooth' });
+      resultAmountText.innerText = currentSelectedWord + "/" + resultAmountText.innerText.split('/')[1];
+
+      if (currentSelectedWord === hilightedWords.length) {
+        downArrow.classList.add('disabled');
+        upArrow.classList.remove('disabled');
+      } else {
+        downArrow.classList.remove('disabled');
+        upArrow.classList.remove('disabled');
+      }
+    }
+  });
+
+  let tagsDiv = document.querySelector('#search_results > div:last-of-type');
+
+  window.addEventListener('click', function (el) {
+    if (!searchResults.contains(el.target) && isResultOpen && el.target != searchInput && el.target != tagsDiv) {
+      toggleSearchResults();
+    }
+  });
+
+  let searchWordList = document.querySelector('#content_search_tag');
+  searchWordList = searchWordList.innerText.substring(1, searchWordList.innerText.length - 1).split(', ');
+
+  for (let tag of searchWordList) {
+    let tagWrapper = document.createElement('p');
+    tagWrapper.innerText = tag;
+    tagWrapper.addEventListener('click', function () {
+      searchInput.value = tag;
+      triggerSearch();
+    });
+    tagsDiv.appendChild(tagWrapper);
+  }
+
 });

 /**
@@ -0,0 +1,21 @@
+(function($) {
+    // Access the page content
+    var pageContent = pageContentData.content;
+
+    // Now you can use the 'pageContent' variable in your JavaScript code
+    console.log(pageContent);
+
+    setTimeout(() => {
+        let editorWriting = document.querySelector('.edit-post-visual-editor');
+        let writingSpace = document.querySelector('.block-editor-writing-flow');
+        writingSpace.style.padding = "0";
+        console.log(editorWriting);
+        let tutorialWrapper = document.createElement('div');
+        tutorialWrapper.style.width = "100%";
+        tutorialWrapper.style.backgroundColor = "#384756";
+        tutorialWrapper.style.padding = "20px";
+        tutorialWrapper.innerHTML = pageContent;
+        editorWriting.appendChild(tutorialWrapper);
+    }, 2000);
+
+})(jQuery);