footer-scripts.html

<!-- TE -->
<script type="module" src="/js/tw-elements.umd.min.js?v=1.0.0-rc.1"></script>
<!-- THEME SWITCHER -->
<script type="text/javascript" src="/js/theme.js"></script>
<!-- PRISM -->
<script type="text/javascript" src="/js/new-prism.js"></script>
<link rel="stylesheet" href="/css/new-prism.css" />

<script type="module">
  class Search {
    constructor(input, icon, list, form, dropdown, count, jsonFile) {
      this.input = input;

      this.list = list;

      this.icon = icon;

      this.form = form;

      this.dropdown = dropdown;

      this.count = count;

      this.data = [];

      this.jsonFile = jsonFile;

      this.searchValue = "";

      this.keycodes = Object.freeze({
        ARROW_UP: 38,
        ARROW_DOWN: 40,
        ENTER: 13,
        SLASH: 191,
        ESCAPE: 27,
      });
    }

    get visibleDropdown() {
      return this.dropdown.style.display === "block";
    }

    get options() {
      return this.list.getElementsByTagName("a");
    }

    get results() {
      const result = this.data.filter((entry) => this.compare(entry));
      return this.sort(result);
    }

    init() {
      fetch("/" + this.jsonFile)
        .then((response) => response.json())
        .then((response) => {
          this.data = [...response];

          new te.PerfectScrollbar(this.list, {
            suppressScrollX: true,
            handlers: ["click-rail", "drag-thumb", "wheel", "touch"],
          });

          this.bindEvents();
        });
    }

    bindEvents() {
      this.input.addEventListener("input", (e) => this.search(e));

      this.input.addEventListener("focus", (e) => {
        this.icon.classList.add("font-bold");

        if (e.target.value.length > 0) {
          this.search(e);
        }
      });

      this.input.addEventListener("blur", () => {
        this.icon.classList.remove("font-bold");
        this.removeDataFocus();
      });

      this.input.addEventListener("keydown", (e) => {
        if (e.keyCode === this.keycodes.ARROW_DOWN && this.options.length > 0) {
          e.preventDefault();

          this.options[1].focus();
        }
      });

      window.addEventListener("click", (e) => {
        if (this.visibleDropdown && this.isOutside(e.target)) {
          this.toggleDropdown(false);
        }
      });

      window.addEventListener("keydown", (e) => {
        if (
          e.keyCode === this.keycodes.SLASH &&
          e.ctrlKey &&
          e.target !== this.input
        ) {
          e.preventDefault();
          this.input.focus();
        } else if (e.keyCode === this.keycodes.ESCAPE && this.visibleDropdown) {
          this.toggleDropdown(false);
        } else if (
          e.keyCode === this.keycodes.ENTER &&
          this.visibleDropdown &&
          this.dropdown.querySelector("[data-te-first-search-focused]")
        ) {
          e.preventDefault();
          window.location.href = this.results[0]?.href;
        }
      });
    }

    search(e) {
      this.searchValue = this.normalizeString(
        this.getSearchValue(e.target.value)
      );

      this.toggleDropdown(this.searchValue.length > 0);

      this.renderResults(this.getResultsMarkup());

      this.setupKeyboardNavigation();
    }

    normalizeString(string) {
      return string.trim().toLowerCase();
    }

    getSearchValue(string) {
      if (string.length > 1 && string[0] === "/") return string.slice(1);

      return string;
    }

    toggleDropdown(value) {
      const display = value ? "block" : "none";

      this.dropdown.style.display = display;

      setTimeout(() => {
        this.list.dispatchEvent(new Event("scroll"));
      }, 100);
    }

    renderResults(markup) {
      this.list.innerHTML = markup;

      this.count.innerHTML = this.results.length;
    }

    removeDataFocus() {
      this.dropdown
        .querySelector("[data-te-first-search-focused]")
        ?.removeAttribute("data-te-first-search-focused");
    }

    getResultsMarkup() {
      return this.results
        .map((result, i) => {
          const keywords = result.keywords.filter(
            (keyword) =>
              this.searchValue.length > 0 && keyword.match(this.searchValue)
          );

          return `
      <li>
        <a class="block pt-2 px-2 text-neutral-600 text-[0.8rem] transition motion-reduce:transition-none hover:bg-neutral-100 focus:bg-neutral-100 outline-none dark:text-neutral-200 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600 data-[te-first-search-focused]:bg-neutral-100 dark:data-[te-first-search-focused]:bg-neutral-600" ${
          !i ? "data-te-first-search-focused" : ""
        } href="${result.href}">
          <p class="uppercase mb-0">${this.highlightSearch(
            result.name,
            this.searchValue
          )}</p>
          <p class="text-[0.875em] mb-0 pb-2">Category: ${this.highlightSearch(
            result.category,
            this.searchValue
          )}</p>
          ${
            keywords.length > 0
              ? `<p class="text-[0.875em] mb-0 pb-2 max-w-full whitespace-nowraptext-overflow-ellipsis overflow-hidden">${this.formatKeywords(
                  keywords
                )}</p>`
              : ""
          }
        </a>
        ${
          i !== this.results.length - 1
            ? '<hr class="m-0 p-0 w-50 dark:border-neutral-600">'
            : ""
        }
      </li>
    `;
        })
        .join("\n");
    }

    compare({ name, keywords, category }) {
      return (
        this.searchValue === "/" ||
        this.normalizeString(name).match(this.searchValue) ||
        this.normalizeString(category).match(this.searchValue) ||
        keywords.find((keyword) => keyword.match(this.searchValue))
      );
    }

    sort(entries) {
      return [
        ...entries
          .filter((e) => e.priority && e.priority[this.searchValue])
          .sort((a, b) =>
            a.priority[this.searchValue] > b.priority[this.searchValue] ? 1 : -1
          ),
        ...entries.filter((e) => !e.priority || !e.priority[this.searchValue]),
      ];
    }

    highlightSearch(string) {
      const searchIndex = this.normalizeString(string).indexOf(
        this.searchValue
      );

      if (searchIndex === -1) return string;

      return `${string.slice(
        0,
        searchIndex
      )}<u class="font-medium	text-primary dark:text-primary-400">${string.slice(
        searchIndex,
        searchIndex + this.searchValue.length
      )}</u>${string.slice(searchIndex + this.searchValue.length)}`;
    }

    formatKeywords(keywords) {
      return keywords
        .map((keyword) => this.highlightSearch(keyword))
        .join(", ");
    }

    setupKeyboardNavigation() {
      Array.from(this.options).forEach((option, i) => {
        option.addEventListener("keydown", (e) => this.focusNextOption(e, i));
      });
    }

    focusNextOption(e, index) {
      let direction;

      if (e.keyCode === this.keycodes.ARROW_DOWN) direction = 1;
      else if (e.keyCode === this.keycodes.ARROW_UP) direction = -1;
      else return;

      e.preventDefault();

      const next =
        index + direction > this.options.length - 1
          ? 0
          : index + direction < 0
          ? this.options.length - 1
          : index + direction;

      this.options[next].focus();
    }

    isOutside(element) {
      if (element === this.form) return false;

      if (element === document.body) return true;

      return this.isOutside(element.parentNode);
    }
  }

  (function () {
    const searchInput = document.getElementById("te-search-input");
    const searchIcon = document.getElementById("te-search-icon");
    const searchList = document.getElementById("te-search-list");
    const searchForm = document.getElementById("te-search-container");
    const searchDropdown = document.getElementById("te-search-dropdown");
    const searchCount = document.getElementById("te-search-count");

    let searchJsonFile;
    searchJsonFile = "search.json";

    var scripts = document.getElementsByTagName("script"),
      src = scripts[scripts.length - 1].src;

    const search = new Search(
      searchInput,
      searchIcon,
      searchList,
      searchForm,
      searchDropdown,
      searchCount,
      searchJsonFile
    );

    search.init();
  })();

  if (document.getElementById("close_icon")) {
    // grab everything we need
    const btn = document.getElementById("hamburger");
    const sidebar = document.getElementById("sidebar");
    const close = document.getElementById("close_icon");

    // add our event listener for the click
    btn.addEventListener("click", () => {
      sidebar.classList.toggle("-translate-x-full");
    });

    close.addEventListener("click", () => {
      sidebar.classList.add("-translate-x-full");
    });
  }

  //Scrollspy
  (() => {
    const scrollspyClasses = [
      "data-[te-spy-active]:border-l-2",
      "data-[te-spy-active]:border-solid",
      "data-[te-spy-active]:border-l-primary",
      "data-[te-spy-active]:text-primary",
      "dark:data-[te-spy-active]:border-l-primary-400",
      "dark:data-[te-spy-active]:text-primary-400",
    ];

    const menuSection = document.querySelectorAll("menu li");

    if (menuSection.length === 0) return;

    const addScrollspyClasses = (sections) => {
      sections.forEach((section) => {
        section.classList.add(...scrollspyClasses);
      });
    };

    const teScrollSpyTo = (event) => {
      event.preventDefault();
      const hash = event.target.getAttribute("href");
      const target = document.getElementById(hash.substring(1));

      window.scroll({
        top: target.offsetTop - 75,
        behavior: "smooth",
      });

      if (history.pushState) {
        history.pushState(null, null, hash);
      } else {
        location.hash = hash;
      }
    };

    const deactivateAllMenuSections = (sections) => {
      sections.forEach((section) =>
        section.removeAttribute("data-te-spy-active")
      );
    };

    const activateMenuSection = (section) => {
      section.setAttribute("data-te-spy-active", "");
    };

    const onWindowScroll = () => {
      const SELECTOR_SCROLLSPY_ITEM = "[data-te-spy-item]";
      const mainSections = [
        ...document.querySelectorAll(SELECTOR_SCROLLSPY_ITEM),
      ].filter((section) => section.getBoundingClientRect().y !== 0);
      const filteredMenuSections = [
        ...document.querySelectorAll("menu li"),
      ].filter((section) => section.getBoundingClientRect().y !== 0);

      mainSections.forEach((header, i) => {
        let rect = header.getBoundingClientRect().y;

        if (rect <= 100) {
          deactivateAllMenuSections(filteredMenuSections);
          if (!filteredMenuSections[i]) {
            return;
          }
          activateMenuSection(filteredMenuSections[i]);
        }
      });
    };

    addScrollspyClasses(menuSection);

    menuSection.forEach((menuElement) => {
      const href = menuElement.querySelector("a");
      href.addEventListener("click", teScrollSpyTo, false);
      href.addEventListener("click", () => {
        setTimeout(() => {
          deactivateAllMenuSections(menuSection);
          activateMenuSection(menuElement);
        }, 300);
      });
    });

    window.addEventListener("scroll", onWindowScroll);
  })();

  const clip = document.querySelectorAll(".clip");
  for (let i = 0; i < clip.length; i++) {
    clip[i].addEventListener("mouseenter", function (e) {
      clip[i].play();
    });
    clip[i].addEventListener("mouseout", function (e) {
      clip[i].pause();
    });
  }

  // Copy to clipboard
  const copyElements = document.querySelectorAll("[data-te-copy-to-clipboard]");
  copyElements.forEach((copyElement) => {
    const handleCopyElementClick = (event) => {
      const codeElement = event.target.querySelector("code");
      navigator.clipboard.writeText(codeElement.innerText);
    };

    copyElement.addEventListener("click", handleCopyElementClick, false);
  });
  // Copy to clipboard
</script>

<script type="module">
  // possibility of linking with a hash to a specific pills
  window.addEventListener("load", (event) => {
    const locationHash = window.location.hash;
    const scrollTop = () => {
      window.scrollTo({ top: 0, behavior: "smooth" });
    };

    if (locationHash === "#docsTabsAPI") {
      const apiTab = document.querySelector(
        '#docs-nav-pills a[href="#docsTabsAPI"]'
      );

      if (apiTab) {
        const apiTabsInstance = new te.Tab(apiTab);

        apiTabsInstance.show();
        scrollTop();
      }
    } else if (locationHash === "#docsTabsOverview") {
      scrollTop();
    } else if (
      ["#topTemplates", "#newTemplates", "#trendingTemplates"].indexOf(
        locationHash
      ) !== -1
    ) {
      const templateTab = document.querySelector(
        '#templates-nav-pills a[href="' + locationHash + '"]'
      );

      if (templateTab) {
        const templateTabsInstance = new mdb.Tab(templateTab);

        templateTabsInstance.show();
        scrollTop();
      }
    }

    const navPills = document.querySelectorAll(
      '#docs-nav-pills a[data-te-toggle="pill"]'
    );

    if (navPills.length) {
      navPills.forEach((el) => {
        el.addEventListener("click", (e) => {
          window.location.hash = e.target.hash;

          scrollTop();
        });
      });
    }

    const templatePills = document.querySelectorAll(
      '#templates-nav-pills a[data-te-toggle="pill"]'
    );

    if (templatePills.length) {
      templatePills.forEach((el) => {
        el.addEventListener("click", (e) => {
          window.location.hash = e.target.hash;

          scrollTop();
        });
      });
    }
  });
</script>

<!-- umd toggler -->
<script>
  const switchInputs = document.querySelectorAll("[data-te-umd-toggler]");

  switchInputs.forEach((item) => {
    const umdScriptEnabled = item.dataset.script.toLowerCase() === "javascript";

    if (umdScriptEnabled) {
      item.checked = true;
    }

    const tabs = [...item.parentNode.parentNode.querySelectorAll("a")];

    // change umd name to javascript
    const indexOfUmd = tabs.findIndex(
      (item) => item.textContent.toLowerCase() === "umd"
    );
    if (indexOfUmd >= 0) {
      tabs[indexOfUmd].textContent = "javascript";
    }
  });

  switchInputs.forEach((item) =>
    item.addEventListener("change", toggleScriptTab)
  );

  function getSortedScriptTabs(e, tabs) {
    // check if javascript is first or umd - it's needed to reverse array to highlight proper tabs
    const providedArray = e.target.value
      .replace("[", "")
      .replace("]", "")
      .split(" ");
    const isScriptFirst =
      providedArray.indexOf("umd") > providedArray.indexOf("javascript");

    // get script elements and reverse them if needed
    const scripts = tabs.filter((item) => item.textContent === "javascript");
    return isScriptFirst ? scripts : scripts.reverse();
  }

  function toggleScriptTab(e) {
    const inputParent = e.target.parentNode.parentNode;
    const tabs = [...inputParent.querySelectorAll("a")];

    const sortedScriptTabs = getSortedScriptTabs(e, tabs);

    // check if script tag is active to change pane that is visible
    const activeTab = inputParent
      .querySelector("[data-te-nav-active]")
      .textContent.toLowerCase();
    const isScriptCurrentTab =
      activeTab === "javascript" || activeTab === "umd";

    // change visibility of tabs and its content
    e.target.checked
      ? _toggleScriptTabs(...sortedScriptTabs, isScriptCurrentTab)
      : _toggleScriptTabs(
          ...sortedScriptTabs.slice().reverse(),
          isScriptCurrentTab
        );
  }

  function _toggleScriptTabs(tab1, tab2, isScriptCurrentTab) {
    tab1.classList.toggle("hidden");
    tab2.classList.toggle("hidden");

    isScriptCurrentTab && tab2.click();
  }
</script>
<!-- umd toggler -->