appscms-tools-theme 5.1.8 → 5.2.0

data/assets/js/appscms-theme.js

@@ -1,459 +0,0 @@
----
----
-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();
-  });

data/assets/js/batch.js

@@ -1,219 +0,0 @@
-const getScript = document.currentScript;
-const pageTool = getScript.dataset.tool;
-const lang = getScript.dataset.lang;
-const inputBox = document.querySelector(".upload-btn");
-const addFiles = document.querySelector(".add-more-files");
-const fileDropBox = document.querySelector(".box");
-const workspace = document.querySelector(".workspace");
-const selectedFilesList = document.querySelector(".selectedFilesList");
-const downloadButton = document.querySelector("#download-button");
-const submitButton = document.querySelector("#submit-button");
-const showProcessingFiles = document.querySelector(".files-processing-list");
-let zipFileType = null;
-let renderFileTypes = null;
-
-const showLoader = () => {
-  showLoading();
-};
-const closeLoader = () => {};
-
-fileDropBox.addEventListener("dragover", (e) => {
-  e.preventDefault();
-});
-fileDropBox.addEventListener("drop", (e) => {
-  e.preventDefault();
-  handleFile(e.dataTransfer.files[0]);
-});
-const fileOnChange = () => {
-  handleFile(file.files);
-};
-inputBox.onclick = function () {
-  document.querySelector("#file").click();
-};
-const fileOnChange2 = () => {
-  addMoreFiles(document.querySelector("#file2").files);
-};
-addFiles.onclick = function () {
-  document.querySelector("#file2").click();
-};
-let files = [];
-let fileName = "";
-let blobList = [];
-const addMoreFiles = (addFiles) => {
-  handleFile(addFiles);
-};
-const onSubmit = (files) => {
-  blobList = [];
-  Promise.all(
-    files.map((item, index) => {
-      document.querySelector(
-        `#loader-${index}`
-      ).innerHTML = `<span class="processing">processing</span>
-            <div class="spinner-border" role="status"><span class="sr-only">Loading...</span></div>`;
-      return new Promise((resolve, reject) => {
-        batchConversion(item, index).then(([indexValue, blob, type]) => {
-          blobList.push({ blob: blob, fileName: item });
-          document.querySelector(
-            `#loader-${indexValue}`
-          ).innerHTML = `<span class="done">finished</span>`;
-          document.querySelector(`#download-${indexValue}`).style.display =
-            "inline-block";
-          resolve();
-        });
-      }).catch((error) => {
-        console.log(error);
-      });
-    })
-  ).then(() => {
-    document.querySelector(".bottom-section-container").style.display = "flex";
-    document.querySelector(".bottom-section-container").style.padding =
-      "20px .75rem";
-    document.querySelector("#download-zip").style.display = "block";
-    let zip = new JSZip();
-    let zipFiles = zip.folder(`safeimagekit-batch-images`);
-    blobList.map((item) => {
-      zipFiles.file(
-        `safeimagekit-batch-${item.fileName.name.split(".")[0]}.${
-          zipFileType ? zipFileType : "png"
-        }`,
-        getBase64String(item.blob),
-        { base64: true }
-      );
-    });
-
-    document.querySelector("#download-zip").addEventListener("click", () => {
-      zip.generateAsync({ type: "blob" }).then(function (content) {
-        saveAs(content, `safeimagekit-batch-conversion.zip`);
-        if (lang === "en") {
-          window.location.href = `/download?tool=${pageTool}`;
-        } else {
-          window.location.href = `/${lang}/download?tool=${pageTool}`;
-        }
-      });
-    });
-  });
-};
-let renderFileTypesHtml = ` <option value="png">png</option>
-<option value="jpg">jpg</option>
-<option value="jpeg">jpeg</option>
-<option value="webp">webp</option>
-`;
-
-const renderFiles = (files) => {
-  if (renderFileTypes !== null) {
-    renderFileTypesHtml = "";
-    renderFileTypes.map((i) => {
-      renderFileTypesHtml += `<option value="${i}">${i}</option>`;
-    });
-  }
-  files.map((file, index) => {
-    if (file) {
-      let filename = file.name;
-      if (file.name.split(".")[0].length > 10) {
-        let fName = file.name.split(".")[0];
-        let fExtention = file.name.split(".")[1];
-        filename =
-          fName.substr(0, 9) + "..." + fName.substr(-3) + "." + fExtention;
-      }
-      let loader = "Ready";
-      showProcessingFiles.innerHTML += `
-                        <tr>
-                        <th scope="row" class="file-icon-row">
-                            <img src="/assets/images/file.png" alt="file" class="file-icon">
-                        </th>
-                        <td class="fileName">${filename}</td>
-                        <td id=loader-${index} class="file-processing"><span class="ready">${loader}</span></td>
-                        <td>
-                        <div class="download-format ">
-        <select name="image-format" id="image-format">
-           ${renderFileTypesHtml}
-        </select>
-    </div>
-                        
-                        </td>
-                        <td class="file-download-button text-right">
-                            <button style="display:none;" id=download-${index} data-type="image" onclick="handleDownload(this)" class="btn download-file-btn">
-                            <svg class="download-icon" width="16px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
-                                        fill="currentColor">
-                                        <path
-                                            d="M18 20H5V15H6V19H17V15H18V20ZM12 4V15.19L14.3 13L15 13.6667L11.5 17L8 13.6667L8.7 13L11 15.19V4H12Z">
-                                        </path>
-                                    </svg> Download
-                            </button>
-                        </td>
-                    </tr>
-                        `;
-    }
-  });
-};
-
-const handleFile = (file) => {
-  showProcessingFiles.innerHTML = "";
-  if (file) {
-    for (let i = 0; i < file.length; i++) {
-      files.push(file[i]);
-      stopLoading();
-      workspace.style.display = "block";
-      document.querySelector("#file").style.display = "block";
-      let listItem = document.createElement("li");
-      listItem.style.listStyle = "none";
-      let getFileSize = formatBytes(file[i].size);
-      listItem.innerHTML = `${file[i].name} (${getFileSize})`;
-      // selectedFilesList.appendChild(listItem)
-    }
-  }
-  renderFiles(files);
-  submitButton.addEventListener("click", () => onSubmit(files));
-};
-const formatBytes = (bytes, decimals = 2) => {
-  if (bytes === 0) return "0 Bytes";
-
-  const k = 1024;
-  const dm = decimals < 0 ? 0 : decimals;
-  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
-
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
-};
-const handleDownload = (e) => {
-  let find = blobList[Number(e.id.replace(/^\D+/g, ""))].blob;
-  let fileName = blobList[Number(e.id.replace(/^\D+/g, ""))].fileName.name;
-
-  let format = document.querySelector("#image-format").value;
-
-  switch (e.dataset.type) {
-    case "image":
-      let a = document.createElement("a");
-      a.href = find;
-      a.download = `safeimagekit-batch-${fileName.split(".")[0]}.${format}`;
-      document.body.appendChild(a);
-      a.click();
-      break;
-    default:
-      break;
-  }
-};
-const showLoading = () => {
-  document.querySelector("#file-loader").style.display = "flex";
-  document.querySelector(".file-input").style.display = "none";
-};
-const stopLoading = () => {
-  fileDropBox.style.display = "none";
-};
-
-const getBase64String = (dataURL) => {
-  const idx = dataURL.indexOf("base64,") + "base64,".length;
-  return dataURL.substring(idx);
-};
-const dataURLtoBlob = (dataurl) => {
-  let arr = dataurl.split(","),
-    mime = arr[0].match(/:(.*?);/)[1],
-    bstr = atob(arr[1]),
-    n = bstr.length,
-    u8arr = new Uint8Array(n);
-  while (n--) {
-    u8arr[n] = bstr.charCodeAt(n);
-  }
-  return new Blob([u8arr], { type: mime });
-};