appscms-tools-theme 5.2.0 → 5.2.1

data/assets/js/appscms-search.js

@@ -0,0 +1,133 @@
+let features = [];
+let featureshi = [];
+let featuresar = [];
+let featuresda = [];
+let featuresde = [];
+let featureses = [];
+let featuresfr = [];
+let featuresid = [];
+let featuresit = [];
+let featuresja = [];
+let featuresko = [];
+let featuresnl = [];
+let featurespl = [];
+let featurespt = [];
+let featuresru = [];
+let featuressv = [];
+let featuresth = [];
+let featurestr = [];
+let featuresuk = [];
+let featuresvi = [];
+let featureszh = [];
+let featureszhtw = [];
+
+// Fetch data from searchbar.json
+const fetchFeatures = async () => {
+  try {
+    const response = await fetch('/searchbar.json');
+    const data = await response.json();
+    features = data.features;
+    featureshi = data.featureshi;
+    featuresar = data.featuresar;
+    featuresda = data.featuresda;
+    featuresde = data.featuresde;
+    featureses = data.featureses;
+    featuresfr = data.featuresfr;
+    featuresid = data.featuresid;
+    featuresit = data.featuresit;
+    featuresja = data.featuresja;
+    featuresko = data.featuresko;
+    featuresnl = data.featuresnl;
+    featurespl = data.featurespl;
+    featurespt = data.featurespt;
+    featuresru = data.featuresru;
+    featuressv = data.featuressv;
+    featuresth = data.featuresth;
+    featurestr = data.featurestr;
+    featuresuk = data.featuresuk;
+    featuresvi = data.featuresvi;
+    featureszh = data.featureszh;
+    featureszhtw = data.featureszhtw;
+  } catch (error) {
+    console.error('Error loading features:', error);
+    featureList.innerHTML = '<div class="error-msg">Error loading features</div>';
+  }
+};
+
+const getFeatureSet = () => {
+  const currentUrl = window.location.pathname;
+  if (currentUrl.includes('/hi')) return featureshi;
+  if (currentUrl.includes('/ar')) return featuresar;
+  if (currentUrl.includes('/da')) return featuresda;
+  if (currentUrl.includes('/de')) return featuresde;
+  if (currentUrl.includes('/es')) return featureses;
+  if (currentUrl.includes('/fr')) return featuresfr;
+  if (currentUrl.includes('/id')) return featuresid;
+  if (currentUrl.includes('/it')) return featuresit;
+  if (currentUrl.includes('/ja')) return featuresja;
+  if (currentUrl.includes('/ko')) return featuresko;
+  if (currentUrl.includes('/nl')) return featuresnl;
+  if (currentUrl.includes('/pl')) return featurespl;
+  if (currentUrl.includes('/pt')) return featurespt;
+  if (currentUrl.includes('/ru')) return featuresru;
+  if (currentUrl.includes('/sv')) return featuressv;
+  if (currentUrl.includes('/th')) return featuresth;
+  if (currentUrl.includes('/tr')) return featurestr;
+  if (currentUrl.includes('/uk')) return featuresuk;
+  if (currentUrl.includes('/vi')) return featuresvi;
+  if (currentUrl.includes('/zh')) return featureszh;
+  if (currentUrl.includes('/zh-tw')) return featureszhtw;
+  return features;
+};
+const featureList = document.querySelector('#appscms-tools-section-row');
+const renderFeatures = (query) => {
+  featureList.innerHTML = "";
+  const currentFeatures = getFeatureSet();
+  const filteredFeatures = currentFeatures.filter(currentFeatures =>
+    currentFeatures.name.toLowerCase().includes(query.toLowerCase())
+  );
+
+  if (filteredFeatures.length > 0) {
+    filteredFeatures.forEach(item => {
+      const listItem = document.createElement("div");
+      const classNames = "col-xl-4 col-lg-6 col-md-6 appscms-tool-container";
+      let classList = classNames.split(" ");
+      classList.forEach(function (className) {
+        listItem.classList.add(className);
+      });
+      listItem.innerHTML = `
+              <a href="${item.url}">
+                <div class="appscms-tool">
+                  <div class="tool-top" style="background: ${item.color};">
+                    <div class="tool-img">
+                      <img crossorigin="anonymous" src="${item.icon}" alt="img" />
+                    </div>
+                    <div class="tool-text">${truncate(item.description, 67, '..')}</div>
+                  </div>
+                  <div class="tool-heading">${truncate(item.name, 33, '..')}</div>
+                </div>
+              </a>
+          `;
+      featureList.appendChild(listItem);
+    });
+  }
+  else {
+    let msg = document.createElement('div')
+    msg.classList.add('no-result-found-msg')
+    msg.innerHTML = "No search results found!"
+    featureList.appendChild(msg)
+  }
+};
+function truncate(str, length, ending = '..') {
+  if (!str) return '';
+  return str.length > length ? str.substring(0, length) + ending : str;
+}
+
+const searchInput = document.querySelector('#search-features');
+searchInput.addEventListener("input", function () {
+  const query = searchInput.value.trim();
+  renderFeatures(query);
+});
+
+// Initialize by fetching data
+fetchFeatures();

data/assets/js/appscms-theme.js

@@ -0,0 +1,459 @@
+---
+---
+console.log(document.querySelectorAll('*').length);
+
+if ("{{ site.safeui }}"==="true") {
+  document.addEventListener("DOMContentLoaded", function () {
+    var safuiAlert = document.querySelector("#safeui-alert");
+    if (safuiAlert) {
+      setTimeout(function () {
+        safuiAlert.style.transition = "1s";
+        safuiAlert.style.height = "0";
+        safuiAlert.style.paddingTop = "0";
+        safuiAlert.style.paddingBottom = "0";
+        safuiAlert.style.marginTop = "0";
+        safuiAlert.style.marginBottom = "0";
+        setTimeout(function () {
+          safuiAlert.parentNode.removeChild(safuiAlert);
+        }, 1000);
+      }, 7000);
+    }
+  });
+}
+const hamburger = document.querySelector("#hamburger");
+const closeNavHam = document.querySelector("#close-nav-ham");
+const appscmsToolbar = document.querySelector(".appscms-toolbar");
+const appscmsToolbarListItems = document.querySelectorAll(
+  ".appscms-toolbar-list-item-span"
+);
+closeNavHam.addEventListener("click", () => {
+  if (hamburger.dataset.open === "1") {
+    hamburger.dataset.open = "0";
+    appscmsToolbar.style.right = "-272px";
+    appscmsToolbar.style.display = "none";
+    hamburger.innerHTML = ` <svg
+        style="font-size:25px"
+          stroke="currentColor"
+          fill="currentColor"
+          stroke-width="0"
+          viewBox="0 0 512 512"
+          aria-hidden="true"
+          focusable="false"
+          height="50px"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fill="none"
+            stroke-linecap="round"
+            stroke-miterlimit="10"
+            stroke-width="48"
+            d="M88 152h336M88 256h336M88 360h336"
+          ></path>
+        </svg>`;
+  }
+})
+hamburger.addEventListener("click", () => {
+  if (hamburger.dataset.open === "1") {
+    hamburger.dataset.open = "0";
+    appscmsToolbar.style.right = "-272px";
+    appscmsToolbar.style.display = "none";
+    hamburger.innerHTML = ` <svg
+        style="font-size:25px"
+          stroke="currentColor"
+          fill="currentColor"
+          stroke-width="0"
+          viewBox="0 0 512 512"
+          aria-hidden="true"
+          focusable="false"
+          height="50px"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fill="none"
+            stroke-linecap="round"
+            stroke-miterlimit="10"
+            stroke-width="48"
+            d="M88 152h336M88 256h336M88 360h336"
+          ></path>
+        </svg>`;
+  } else {
+    hamburger.dataset.open = "1";
+    appscmsToolbar.style.right = "0px";
+    appscmsToolbar.style.display = "block";
+    hamburger.innerHTML = `<svg  height="50px"
+        width="1em"  style="font-size:25px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g clip-path="url(#clip0_429_11083)"> <path d="M7 7.00006L17 17.0001M7 17.0001L17 7.00006" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path> </g> <defs> <clipPath id="clip0_429_11083"> <rect width="24" height="24" fill="white"></rect> </clipPath> </defs> </g></svg>`;
+  }
+});
+Array.from(appscmsToolbarListItems).map((item) => {
+  item.addEventListener("click", (e) => {
+    e.preventDefault();
+    var style = window.getComputedStyle(item.nextElementSibling);
+    var maxHeight = style.getPropertyValue("max-height");
+console.log(maxHeight)
+    if (maxHeight && maxHeight !== "0px") {
+      // If the item is expanded, collapse it
+      item.nextElementSibling.style.maxHeight = "0";
+      item.nextElementSibling.style.opacity = "0";
+      item.nextElementSibling.style.height = "0";
+    } else {
+      // If the item is collapsed, expand it
+      item.nextElementSibling.style.maxHeight =
+        item.nextElementSibling.scrollHeight + "px";
+      item.nextElementSibling.style.opacity = "1";
+      item.nextElementSibling.style.height = "auto";
+    }
+  });
+});
+
+if ("{{ site.removeBootstrapJs }}" === "true") {
+  const languagesModal = document.querySelector("#staticBackdrop");
+  const intModalBtn = document.querySelector("#int-modal-btn");
+  const closeBtn = document.querySelector("#close-modal");
+
+  if (intModalBtn) {
+    intModalBtn.addEventListener("click", () => {
+      languagesModal.style.display = "block";
+      languagesModal.classList.add("show");
+      let modal = document.createElement("div");
+      modal.classList.add("modal-backdrop", "show");
+      document.body.appendChild(modal);
+    });
+    closeBtn.addEventListener("click", () => {
+      languagesModal.style.display = "none";
+      languagesModal.classList.remove("show");
+      let modal = document.querySelector(".modal-backdrop");
+      document.body.removeChild(modal);
+    });
+  }
+}
+
+document.addEventListener("DOMContentLoaded", function() {
+  const downloadButton = document.getElementById("download-button");
+  
+  if (downloadButton) {
+    const loader =  document.querySelector(".button-loader");
+    const downloadSvg =  downloadButton.querySelector("#download-svg");
+  const savingData = document.getElementById("saving-data");
+
+    downloadButton.addEventListener("click", function() {
+
+        loader.style.display = "block";
+        downloadSvg.style.visibility = "hidden";
+      
+
+      // Show saving data message
+      savingData.style.display = "flex";
+
+      // Your additional code can go here
+      // Add your code logic here to execute when the button is clicked
+
+    });
+  }
+  
+});
+
+// Check if the button exists
+const processingBtn = document.getElementById('processing-btn');
+const buttonLoader = document.querySelector('.button-loader');
+if (processingBtn && buttonLoader) {
+  processingBtn.addEventListener('click', (event) => {
+    buttonLoader.style.display = 'block';
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        history.back();
+      });
+    });
+  }, { passive: true });
+}
+
+
+// if ("{{ site.navigationSearch }}" === "true") {
+//   // Fetch data directly from alllinks.json
+//   fetch("/alllinks.json")
+//     .then((response) => response.json())
+//     .then((data) => {
+//       // Check if the URL includes "/hi" to determine the language
+//       if (window.location.pathname.includes("/hi")) {
+//         window.fetchedData = data.featuredLinkshi; // Use Hindi data
+//       } else {
+//         window.fetchedData = data.featuredLinks; // Use English data
+//       }
+//     })
+//     .catch((error) => {
+//       console.error("Error fetching data:", error);
+//     });
+
+//   // Filter data based on search query
+//   function filterData(data, query) {
+//     return data.filter((item) =>
+//       item.name.toLowerCase().includes(query.toLowerCase())
+//     );
+//   }
+
+//   // Display filtered results
+//   function displayResults(results) {
+//     const resultsContainer = document.getElementById("results");
+//     resultsContainer.style.display = results.length ? "block" : "none";
+//     resultsContainer.innerHTML = results.length
+//       ? results
+//           .map(
+//             (result) =>
+//               `<div class="result-item"><a href="${result.url}" target="_blank">${result.name}</a></div>`
+//           )
+//           .join("")
+//       : "<p>No results found</p>";
+//   }
+
+//   function mobileDisplayResults(results) {
+//     const mobileResultsContainer = document.querySelector(
+//       ".mobile-searchbarResults"
+//     );
+//     mobileResultsContainer.style.display = results.length ? "block" : "none";
+//     mobileResultsContainer.innerHTML = results.length
+//       ? results
+//           .map(
+//             (result) =>
+//               `<div class="mobile-result-item"><a href="${result.url}" target="_blank">${result.name}</a></div>`
+//           )
+//           .join("")
+//       : "<p>No results found</p>";
+//   }
+
+//   // Handle search input
+//   const searchInput = document.querySelector(".search-input");
+
+//   searchInput.addEventListener("input", (event) => {
+//     const query = event.target.value;
+//     const data = window.fetchedData || [];
+//     const filteredResults = filterData(data, query);
+//     displayResults(filteredResults);
+
+//     gtag("event", "search", {
+//       event_category: "engagement",
+//       event_label: "Search Box",
+//       value: query,
+//     });
+//   });
+
+//   const mobileSearchInput = document.querySelector(".mobile-search-input");
+//   mobileSearchInput.addEventListener("input", (event) => {
+//     const query = event.target.value;
+//     const data = window.fetchedData || [];
+//     const filteredResults = filterData(data, query);
+//     mobileDisplayResults(filteredResults);
+
+//     gtag("event", "search", {
+//       event_category: "engagement",
+//       event_label: "Search Box",
+//       value: query,
+//     });
+//   });
+
+//   // Hide results when clicking outside search input and results container
+//   document.addEventListener("click", (event) => {
+//     const resultsContainer = document.getElementById("results");
+
+//     if (
+//       !searchInput.contains(event.target) &&
+//       !resultsContainer.contains(event.target)
+//     ) {
+//       resultsContainer.style.display = "none";
+//     }
+//     if (!window.location.pathname.includes("/hi")) {
+//       const mobileResultsContainer = document.querySelector(
+//         ".mobile-searchbarResults"
+//       );
+//       if (
+//         !mobileSearchInput.contains(event.target) &&
+//         !mobileResultsContainer.contains(event.target)
+//       ) {
+//         mobileResultsContainer.style.display = "none";
+//       }
+//     }
+//   });
+// }
+
+if ("{{ site.navigationSearch }}" === "true") {
+  // Define supported languages and their corresponding data keys
+  const SUPPORTED_LANGUAGES = {
+    de: 'featuredLinksde',
+    da: 'featuredLinksda',
+    es: 'featuredLinkses',
+    id: 'featuredLinksid',
+    it: 'featuredLinksit',
+    nl: 'featuredLinksnl',
+    pl: 'featuredLinkspl',
+    pt: 'featuredLinkspt',
+    sv: 'featuredLinkssv',
+    tr: 'featuredLinkstr',
+    vi: 'featuredLinksvi',
+    hi: 'featuredLinkshi',
+    fr: 'featuredLinksfr',
+  };
+
+  // Helper function to get current language from URL
+  function getCurrentLanguage() {
+    const path = window.location.pathname;
+    return Object.keys(SUPPORTED_LANGUAGES).find(lang => 
+      path.includes(`/${lang}`)
+    ) || 'en';
+  }
+
+  // Fetch data directly from alllinks.json
+  fetch("/alllinks.json")
+    .then((response) => response.json())
+    .then((data) => {
+      // Store all data globally
+      window.allData = data;
+      const currentLang = getCurrentLanguage();
+      // Set initial data based on current language
+      window.fetchedData = currentLang === 'en' 
+        ? data.featuredLinks 
+        : data[SUPPORTED_LANGUAGES[currentLang]];
+    })
+    .catch((error) => {
+      console.error("Error fetching data:", error);
+    });
+
+  // Filter data based on search query
+  function filterData(data, query) {
+    return data ? data.filter((item) =>
+      item.name.toLowerCase().includes(query.toLowerCase())
+    ) : [];
+  }
+
+  // Display filtered results
+  function displayResults(primaryResults, secondaryResults = [], container) {
+    const resultsContainer = container || document.getElementById("results");
+    const currentLang = getCurrentLanguage();
+    
+    // Combine results, with primary results first
+    const combinedResults = [...primaryResults];
+    if (primaryResults.length < 4) {
+      // Only add secondary results if primary results are less than 4
+      secondaryResults.forEach(result => {
+        // Check if this result isn't already in primary results
+        if (!primaryResults.some(pr => pr.url === result.url)) {
+          combinedResults.push(result);
+        }
+      });
+    }
+
+    resultsContainer.style.display = combinedResults.length ? "block" : "none";
+    
+    if (combinedResults.length === 0) {
+      resultsContainer.innerHTML = "<p>No results found</p>";
+      return;
+    }
+
+    // Get language display name for the indicator
+    const getLanguageDisplayName = () => {
+      try {
+        return new Intl.DisplayNames(['en'], { type: 'language' }).of('en');
+      } catch (e) {
+        return 'English';
+      }
+    };
+
+    // Display results with language indicators
+    resultsContainer.innerHTML = combinedResults
+      .map((result, index) => {
+        const isSecondary = index >= primaryResults.length;
+        return `
+          <div class="result-item ${isSecondary ? 'secondary-result' : ''}">
+            <a href="${result.url}" target="_blank">${result.name}</a>
+            ${isSecondary ? `<span class="language-indicator"></span>` : ''}
+          </div>
+        `;
+      })
+      .join("");
+  }
+
+  function handleSearch(event, isDesktop = true) {
+    const query = event.target.value.trim();
+    const container = isDesktop ? 
+      document.getElementById("results") : 
+      document.querySelector(".mobile-searchbarResults");
+
+    if (!query) {
+      container.style.display = "none";
+      return;
+    }
+
+    const currentLang = getCurrentLanguage();
+    const currentLangData = currentLang === 'en' 
+      ? window.allData.featuredLinks 
+      : window.allData[SUPPORTED_LANGUAGES[currentLang]];
+
+    // First, search in current language data
+    const primaryResults = filterData(currentLangData, query);
+    
+    // If primary results are less than 4, also search in English data
+    const englishResults = primaryResults.length < 4 ? 
+      filterData(window.allData.featuredLinks, query) : 
+      [];
+
+    // Display results with current language first, then English if needed
+    displayResults(primaryResults, englishResults, container);
+
+    gtag("event", "search", {
+      event_category: "engagement",
+      event_label: "Search Box",
+      value: query,
+    });
+  }
+
+  // Set up desktop search
+  const searchInput = document.querySelector(".search-input");
+  searchInput.addEventListener("input", (event) => handleSearch(event, true));
+
+  // Set up mobile search
+  const mobileSearchInput = document.querySelector(".mobile-search-input");
+  mobileSearchInput.addEventListener("input", (event) => handleSearch(event, false));
+
+  // Hide results when clicking outside
+  document.addEventListener("click", (event) => {
+    const resultsContainer = document.getElementById("results");
+    const mobileResultsContainer = document.querySelector(".mobile-searchbarResults");
+
+    if (!searchInput.contains(event.target) && !resultsContainer.contains(event.target)) {
+      resultsContainer.style.display = "none";
+    }
+
+    if (!mobileSearchInput.contains(event.target) && !mobileResultsContainer.contains(event.target)) {
+      mobileResultsContainer.style.display = "none";
+    }
+  });
+}
+  document.addEventListener("DOMContentLoaded", function () {
+    const scrollContainer = document.querySelector(".appscms-toolbar-list");
+    const scrollLeft = document.querySelector(".scroll-left");
+    const scrollRight = document.querySelector(".scroll-right");
+
+    function updateScrollButtons() {
+      scrollLeft.style.display =
+        scrollContainer.scrollLeft > 0 ? "block" : "none";
+      scrollRight.style.display =
+        scrollContainer.scrollWidth >
+          scrollContainer.clientWidth + scrollContainer.scrollLeft
+          ? "block"
+          : "none";
+    }
+
+    scrollLeft.addEventListener("click", function () {
+      scrollContainer.scrollLeft -= 120; // Adjust this value as needed
+      updateScrollButtons();
+    });
+
+    scrollRight.addEventListener("click", function () {
+      scrollContainer.scrollLeft += 120; // Adjust this value as needed
+      updateScrollButtons();
+    });
+
+    scrollContainer.addEventListener("scroll", updateScrollButtons);
+
+    // Initial check to hide buttons if necessary
+    updateScrollButtons();
+  });