appscms-tools-theme 4.8.3 → 4.8.4

data/assets/images/search-icon.svg

@@ -1,3 +1,3 @@
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M4 11C4 7.13401 7.13401 4 11 4C14.866 4 18 7.13401 18 11C18 14.866 14.866 18 11 18C7.13401 18 4 14.866 4 11ZM11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C13.125 20 15.078 19.2635 16.6177 18.0319L20.2929 21.7071C20.6834 22.0976 21.3166 22.0976 21.7071 21.7071C22.0976 21.3166 22.0976 20.6834 21.7071 20.2929L18.0319 16.6177C19.2635 15.078 20 13.125 20 11C20 6.02944 15.9706 2 11 2Z" fill="#000000"/>
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M4 11C4 7.13401 7.13401 4 11 4C14.866 4 18 7.13401 18 11C18 14.866 14.866 18 11 18C7.13401 18 4 14.866 4 11ZM11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C13.125 20 15.078 19.2635 16.6177 18.0319L20.2929 21.7071C20.6834 22.0976 21.3166 22.0976 21.7071 21.7071C22.0976 21.3166 22.0976 20.6834 21.7071 20.2929L18.0319 16.6177C19.2635 15.078 20 13.125 20 11C20 6.02944 15.9706 2 11 2Z" fill="#000000"/>
 </svg>

data/assets/js/appscms-infographics.js

@@ -1,49 +1,49 @@
-function openModal1(imageSrc) {
-  var modal1 = document.getElementById("imageModal1");
-  var modal1Img = document.getElementById("modal1Image");
-  modal1.style.display = "block";
-  modal1Img.src = imageSrc;
-}
-function closeModal1() {
-  var modal1 = document.getElementById("imageModal1");
-  modal1.style.display = "none";
-}
-document.addEventListener("click", function (event) {
-  var modal1 = document.getElementById("imageModal1");
-  if (event.target === modal1) {
-    closeModal1();
-  }
-});
-const carousel = document.querySelector(".carousel-inner"),
-  firstImg = carousel.querySelectorAll("img")[0],
-  arrowIcons = document.querySelectorAll(".wrapper i");
-const numImages = carousel.querySelectorAll("img").length;
-const isMobile = window.matchMedia("(max-width: 767px)").matches; // Check if screen width is less than or equal to 767px
-if (numImages > 3) {
-  arrowIcons[1].style.display = "block";
-} else {
-  arrowIcons[0].style.display = "none";
-  arrowIcons[1].style.display = "none";
-}
-let isDragStart = false,
-  isDragging = false,
-  prevPageX,
-  prevScrollLeft,
-  positionDiff;
-const showHideIcons = () => {
-  let scrollWidth = carousel.scrollWidth - carousel.clientWidth; // getting max scrollable width
-  arrowIcons[0].style.display = carousel.scrollLeft == 0 ? "none" : "block";
-  arrowIcons[1].style.display =
-    carousel.scrollLeft == scrollWidth ? "none" : "block";
-};
-arrowIcons.forEach((icon) => {
-  icon.addEventListener("click", () => {
-    let firstImgWidth = firstImg.clientWidth + 40;
-    const scrollAmount = icon.id === "left" ? -firstImgWidth : firstImgWidth;
-    carousel.scrollBy({
-      left: scrollAmount,
-      behavior: "smooth",
-    });
-    setTimeout(() => showHideIcons(), 60); // calling showHideIcons after 60ms
-  });
-});
+function openModal1(imageSrc) {
+  var modal1 = document.getElementById("imageModal1");
+  var modal1Img = document.getElementById("modal1Image");
+  modal1.style.display = "block";
+  modal1Img.src = imageSrc;
+}
+function closeModal1() {
+  var modal1 = document.getElementById("imageModal1");
+  modal1.style.display = "none";
+}
+document.addEventListener("click", function (event) {
+  var modal1 = document.getElementById("imageModal1");
+  if (event.target === modal1) {
+    closeModal1();
+  }
+});
+const carousel = document.querySelector(".carousel-inner"),
+  firstImg = carousel.querySelectorAll("img")[0],
+  arrowIcons = document.querySelectorAll(".wrapper i");
+const numImages = carousel.querySelectorAll("img").length;
+const isMobile = window.matchMedia("(max-width: 767px)").matches; // Check if screen width is less than or equal to 767px
+if (numImages > 3) {
+  arrowIcons[1].style.display = "block";
+} else {
+  arrowIcons[0].style.display = "none";
+  arrowIcons[1].style.display = "none";
+}
+let isDragStart = false,
+  isDragging = false,
+  prevPageX,
+  prevScrollLeft,
+  positionDiff;
+const showHideIcons = () => {
+  let scrollWidth = carousel.scrollWidth - carousel.clientWidth; // getting max scrollable width
+  arrowIcons[0].style.display = carousel.scrollLeft == 0 ? "none" : "block";
+  arrowIcons[1].style.display =
+    carousel.scrollLeft == scrollWidth ? "none" : "block";
+};
+arrowIcons.forEach((icon) => {
+  icon.addEventListener("click", () => {
+    let firstImgWidth = firstImg.clientWidth + 40;
+    const scrollAmount = icon.id === "left" ? -firstImgWidth : firstImgWidth;
+    carousel.scrollBy({
+      left: scrollAmount,
+      behavior: "smooth",
+    });
+    setTimeout(() => showHideIcons(), 60); // calling showHideIcons after 60ms
+  });
+});

data/assets/js/batch.js

@@ -1,219 +1,219 @@
-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 });
-};
+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 });
+};