appscms-tools-theme 5.2.0 → 5.2.1

data/assets/js/batch.js

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

data/assets/js/calculator-tooltip.js

@@ -0,0 +1,3 @@
+$(function () {
+  $('[data-toggle="tooltip"]').tooltip()
+})

data/assets/js/devtools.js

@@ -0,0 +1,82 @@
+let input_editor, output_editor, data;
+output_editor = ace.edit("output_editor");
+output_editor.setReadOnly(true)
+output_editor.session.setMode("ace/mode/json");
+input_editor = ace.edit("input_editor");
+input_editor.session.setMode("ace/mode/json");
+let upload_div_inner = document.getElementById("upload_div_inner")
+let file_upload = document.getElementById("file_upload")
+let format_btn = document.getElementById("format_btn")
+let inputcopyButton = document.querySelector("#inputcopy");
+let outputcopyButton = document.querySelector("#outputcopy");
+let deleteEditorInputTxt = document.querySelector(".input_editor_bar .cross_icon");
+let deleteEditorOuputTxt = document.querySelector(".output_editor_bar .cross_icon");
+const siteName = file_upload.dataset.sitename
+let selectedFile
+
+upload_div_inner.onclick = function () {
+    document.querySelector("#file_upload").click();
+};
+file_upload.onchange = function (e) {
+    var input = e.target.files[0];
+    selectedFile = input
+    input_editor = ace.edit("input_editor");
+    input_editor.session.setMode("ace/mode/json");
+    var reader = new FileReader();
+    reader.onload = function () {
+        input_editor.setValue(reader.result);
+    }
+    reader.readAsText(input);
+};
+document.querySelector("#input_editor_bar .save_icon").onclick = function () {
+    file_saving_decision(1);
+};
+editorActions();
+function editorActions() {
+    deleteEditorInputTxt.onclick = function () {
+        input_editor.setValue("");
+    }
+    deleteEditorOuputTxt.onclick = function () {
+        output_editor.setValue("");
+    }
+    inputcopyButton.addEventListener("click", (e) => {
+        const el = document.createElement("textarea");
+        el.value = input_editor.getValue();
+        document.body.appendChild(el);
+        el.select();
+        document.execCommand("copy");
+        e.target.setAttribute('data-original-title', 'Copied !')
+    })
+    outputcopyButton.addEventListener("click", (e) => {
+        const el = document.createElement("textarea");
+        el.value = output_editor.getValue();
+        document.body.appendChild(el);
+        el.select();
+        document.execCommand("copy");
+        e.target.setAttribute('data-original-title', 'Copied !')
+    })
+}
+function file_saving_decision(flag) {
+    if (flag == 1) {
+        if (input_editor.getValue == "" || input_editor.getValue == undefined) {
+            return false;
+        } else {
+            file_download(input_editor.getValue(), "application/json", "json");
+        }
+    } else if (flag == 0) {
+        if (output_editor.getValue == "" || output_editor.getValue == undefined) {
+            return false;
+        } else {
+            file_download(output_editor.getValue(), "text/plain", "txt");
+        }
+    }
+}
+function file_download(code, mimetype, extension) {
+    var a = document.createElement("a");
+    var data = new Blob([code], {
+        type: mimetype,
+    });
+    a.href = window.URL.createObjectURL(data);
+    a.download = `${siteName}.` + extension;
+    a.click();
+}