appscms-tools-theme 4.8.7 → 4.8.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: aabc9c46eb1411355e71b373f27b608db11551dbe65ad297a57648c85d9b57df
-  data.tar.gz: a91a0f5f1d3c5ab15d10afa58198a56a75d3a493e379d0125d125f386f833082
+  metadata.gz: 48bc92c7ce7ec3beab1dc7d1ffe850b8faad27713e3f3daca23a545093d90826
+  data.tar.gz: 8c24fe8f0cf6a300606598c5f1260364aee72f39c6e21634b31589224b47d742
 SHA512:
-  metadata.gz: e0836961e45a5be5322af0f45ba2cf10607edfcd95df25a11f189912e82a385a3d3da0fccc43905d1fbba4784b64644c9a19e281ee90fca31ec329d7dd09a388
-  data.tar.gz: 8eb5122ba27c67c525380175470bc4dda2644f4e13773249130df63cec32cfe8375b3f77b87d8261b8248a43be8be6560f50fb2c4cf91187c613a3120976967b
+  metadata.gz: e052c817906a54b2a29c2c633e819bed85db06b21e9cd693194781e271ddc73420c62c4e3512b279a15b92285c1ab304259c2e541ca28c37c350253be505b6c1
+  data.tar.gz: 1b422eb9dfb8d1e94860c6fddd1547b7eed0f91f0bb17c677ca40fcdeec94eac1fb6758493379691e4045490db512b9cc1dbf031b092b6c7caa194b3ec6607b7

data/_data/feature/en/compress-pdf.json

@@ -100,15 +100,19 @@
   "infographics": [
     {
       "image": "/uploads/8_5_2024_1722847835453_template.webp",
-      "description": "How to set alarm on wake me up at 4:45 am tool"
+      "description": "How to set alarm on wake me up at 4:45 am tool",
+      "alt": "infographics 1"
+      
     },
     {
       "image": "/uploads/info.png",
-      "description": "How to set alarm on wake me up at 4:45 am tool"
+      "description": "How to set alarm on wake me up at 4:45 am tool",
+      "alt": "infographics 2"
     },
     {
       "image": "/uploads/8_5_2024_1722848984955_template.webp",
-      "description": "Additional features of wake me up at 4:45 am tool"
+      "description": "Additional features of wake me up at 4:45 am tool",
+      "alt": "infographics 3"
     }
   ],
   "posts": [

data/_includes/appscms/infographics/infographics.html

@@ -1,6 +1,63 @@
 <style>
+
+  .modal-arrow-btn {
+    position: absolute;
+    top: 50%;
+    width: 50px;
+    height: 50px;
+    background: rgba(0, 0, 0, 0.5);
+    color: #fff;
+    border: none;
+    cursor: pointer;
+    font-size: 24px;
+    text-align: center;
+    line-height: 50px;
+    border-radius: 50%;
+    transform: translateY(-50%);
+  }
+  
+  .modal-arrow-btn.prev {
+    left: 10px;
+  }
+  
+  .modal-arrow-btn.next {
+    right: 10px;
+  }
+  @media (max-width: 768px) {
+    .modal-arrow-btn {
+      top: 30%;
+      width: 40px;
+      height: 40px;
+      font-size: 20px;
+      line-height: 40px;
+    }
+  
+    .modal-arrow-btn.prev {
+      left: 5px;
+    }
+  
+    .modal-arrow-btn.next {
+      right: 5px;
+    }
+  }
+  
+  @media (max-width: 480px) {
+    .modal-arrow-btn {
+      width: 30px;
+      height: 30px;
+      font-size: 16px;
+      line-height: 30px;
+    }
+  
+    .modal-arrow-btn.prev {
+      left: 3px;
+    }
+  
+    .modal-arrow-btn.next {
+      right: 3px;
+    }
+  }
   .modal1 {
-    display: none;
     position: fixed;
     z-index: 1000;
     left: 0;
@@ -9,120 +66,153 @@
     height: 100%;
     overflow: auto;
     background-color: rgba(59, 58, 58, 0.9);
+    opacity: 0;
+    visibility: hidden;
+    transform: scale(0.8);
+    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
+  }
+  
+  .modal1.show {
+    opacity: 1;
+    visibility: visible;
+    transform: scale(1);
+    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
   }
+  
   .modal1-content1 {
     margin: auto;
     display: block;
     width: 80%;
     max-width: 800px;
     margin-top: 20px;
+    opacity: 0;
+    transform: translateY(-20px);
+    transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
   }
-  .modal1-body img {
-    width: 100%;
-    height: auto;
-  }
-  .close1 {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    font-size: 24px;
-    color: #fff;
-    cursor: pointer;
-  }
-  .close1:hover {
-    color: #ccc;
+  
+  .modal1.show .modal1-content1 {
+    opacity: 1;
+    transform: translateY(0);
   }
-</style>
-<div class="inforgraphics_section">
-  <h3 class="text-center w-100 mb-5"><b>Other useful information</b></h3>
-  <div class="wrapper">
-    <img
-      class="infographics-arrow"
-      id="left"
-      src="/assets/images/arrow-left.svg"
-      alt=""
-    />
-    <div class="carousel">
-      <div class="carousel-inner">
-        {%- if pageData.infographics -%} {% for item in pageData.infographics %}
-        <div class="slide">
-          <img
-            loading="lazy"
-            src="{{ item.image }}"
-            alt="img"
-            draggable="false"
-            class="infographic-img"
-            onclick="openModal1('{{ item.image }}')"
-          />
-          <p class="infographic-desc">{{ item.description | capitalize }}</p>
+    .modal1-body img {
+      width: 100%;
+      height: auto;
+    }
+    .close1 {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      font-size: 24px;
+      color: #fff;
+      cursor: pointer;
+    }
+    .close1:hover {
+      color: #ccc;
+    }
+  </style>
+  <div class="inforgraphics_section">
+    <h3 class="text-center w-100 mb-5"><b>Other useful information</b></h3>
+    <div class="wrapper">
+      <i id="left" class="fas fa-angle-left"></i>
+      <div class="carousel">
+        <div class="carousel-inner">
+          {%- if pageData.infographics -%} {% for item in pageData.infographics %}
+          <div class="slide">
+            <img
+              loading="lazy"
+              src="{{ item.image }}"
+              alt="{{item.alt}}"
+              draggable="false"
+              class="infographic-img"
+              onclick="openModal1('{{ item.image }}')"
+            />
+            <p class="infographic-desc">{{ item.description | capitalize }}</p>
+          </div>
+          {% endfor %} {%- endif -%}
         </div>
-        {% endfor %} {%- endif -%}
       </div>
+      <i id="right" class="fas fa-angle-right"></i>
     </div>
-    <img
-      class="infographics-arrow"
-      id="right"
-      src="/assets/images/arrow-right.svg"
-      alt=""
-    />
   </div>
-</div>
-<div id="imageModal1" class="modal1" onclick="closeModal1()">
-  <span class="close1" onclick="closeModal1()">&times;</span>
-  <div class="modal1-content1">
-    <div class="modal1-body">
-      <img id="modal1Image" src="" alt="Image" />
+  <div id="imageModal1" class="modal1" onclick="closeModal1()">
+    <span class="close1" onclick="closeModal1()">&times;</span>
+    <button class="modal-arrow-btn prev">&#10094;</button>
+    <button class="modal-arrow-btn next">&#10095;</button>
+    <div class="modal1-content1">
+      <div class="modal1-body">
+        <img id="modal1Image" src="" alt="Image" />
+      </div>
     </div>
   </div>
-</div>
-<script>
-  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();
+  <script>
+  document.addEventListener("DOMContentLoaded", () => {
+    let modal_array_of_images = [];
+    let current_modal_img = 0;
+  
+    // Function to update the modal image
+    function updateModalImage() {
+      const modal1Img = document.getElementById("modal1Image");
+      if (modal_array_of_images.length > 0) {
+        modal1Img.src = modal_array_of_images[current_modal_img].src;
+      }
     }
-  });
-  const carousel = document.querySelector(".carousel-inner"),
-    firstImg = carousel.querySelectorAll("img")[0],
-    arrowIcons = document.querySelectorAll(".infographics-arrow");
-  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",
+  
+    // Function to prepare the array of images for the modal
+    function readyallimages() {
+      modal_array_of_images = Array.from(document.querySelectorAll('.infographic-img'));
+    }
+  
+    // Function to open the modal and set the current image
+    function openModal1(imageSrc) {
+      const modal1 = document.getElementById("imageModal1");
+      modal1.classList.add("show");
+      modal_array_of_images = Array.from(document.querySelectorAll('.infographic-img'));
+      current_modal_img = modal_array_of_images.findIndex(img => img.src === imageSrc);
+      updateModalImage();
+    }
+  
+    // Function to close the modal
+    function closeModal1() {
+      const modal1 = document.getElementById("imageModal1");
+      modal1.classList.remove("show");
+    }
+  
+    // Add click event listeners to each infographic image
+    document.querySelectorAll('.infographic-img').forEach(img => {
+      img.addEventListener('click', (event) => {
+        openModal1(event.target.src);
+      });
+    });
+  
+    // Event listeners for the modal arrow buttons
+    const modal_btns = document.querySelectorAll('.modal-arrow-btn');
+    modal_btns.forEach(modal_btn => {
+      modal_btn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        if (modal_btn.classList.contains('prev')) {
+          current_modal_img = (current_modal_img > 0) ? current_modal_img - 1 : modal_array_of_images.length - 1;
+        } else {
+          current_modal_img = (current_modal_img < modal_array_of_images.length - 1) ? current_modal_img + 1 : 0;
+        }
+        updateModalImage();
       });
-      setTimeout(() => showHideIcons(), 60); // calling showHideIcons after 60ms
     });
+  
+    // Event listener for the close button
+    document.querySelectorAll(".close1").forEach(element => {
+      element.addEventListener("click", closeModal1);
+    });
+  
+    // Event listener for closing the modal when clicking outside the image
+    document.getElementById("imageModal1").addEventListener("click", (event) => {
+      if (event.target === document.getElementById("imageModal1")) {
+        closeModal1();
+      }
+    });
+  
+    // Initialize modal images on page load
+    readyallimages();
   });
-</script>
+  
+  </script>
+  

data/_layouts/appscms-batch.html

@@ -5,11 +5,7 @@ layout: appscms-feature
 <div class="container-fluid mt-4">
   {%- assign boxColor =
   site.data[page.folderName][page.lang][page.fileName].color -%}
-  <div
-    class="custom-box"
-    style=" padding-top: 0px"
-    data-color="{{boxColor}}"
-  >
+  <div class="custom-box" style="padding-top: 0px" data-color="{{boxColor}}">
     <div style="display: none" id="file-loader">
       <img
         src="/assets/images/spinner.gif"
@@ -44,7 +40,6 @@ layout: appscms-feature
           />
           <span class="ml-1">CHOOSE FILES</span>
         </div>
-    
       </div>
       <p id="dropfile" class="text-dark">or drop your image here</p>
     </div>

data/_layouts/appscms-calculator.html

@@ -2,85 +2,104 @@
 layout: appscms-feature
 ---
 
+<style>
+  .calculator-workspace {
+    outline: none;
+    overflow: auto;
+    border-top-right-radius: 20px;
+    border-top-left-radius: 20px;
+    border-bottom-right-radius: 16px;
+    border-bottom-left-radius: 16px;
+    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.16);
+    position: relative;
+  }
+  .calculator-container {
+    background-color: #d9dcf7;
+    padding: 20px 12px;
+    border-radius: 7px;
+  }
+</style>
 {% assign file = page.fileName %} {% assign lang = page.lang %} {% assign folder
 = page.folderName %} {% assign calculatorData=
 site.data[folder][lang][file].calculatorData %}
 
 <div class="container">
   <div class="calculator-workspace">
-    <div class="row w-100 mx-auto">
-      <form id="calculator-form" class="w-100">
-        {%- for item in calculatorData.calculatorRow -%}
-        <div class="row" id="calculator-row-{{forloop.index}}">
-          {%- if item.labelName -%}
-          <div class="col-md-12">
-            <div class="d-flex">
-              <label for="{{item.labelId}}">{{item.labelName}}</label>
-              {%- if item.toolTip -%}
-              <span
-                class="calculator-tooltip"
-                data-toggle="tooltip"
-                data-placement="top"
-                title="{{item.toolTip}}"
-                ><i class="fas fa-info-circle"></i></span
-              >{%- endif -%}
+    <div class="calculator-container">
+      <div class="row w-100 mx-auto">
+        <form id="calculator-form" class="w-100">
+          {%- for item in calculatorData.calculatorRow -%}
+          <div class="row" id="calculator-row-{{forloop.index}}">
+            {%- if item.labelName -%}
+            <div class="col-md-12">
+              <div class="d-flex">
+                <label for="{{item.labelId}}">{{item.labelName}}</label>
+                {%- if item.toolTip -%}
+                <span
+                  class="calculator-tooltip"
+                  data-toggle="tooltip"
+                  data-placement="top"
+                  title="{{item.toolTip}}"
+                  ><i class="fas fa-info-circle"></i></span
+                >{%- endif -%}
+              </div>
             </div>
-          </div>
-          {%- endif -%} {%- if item.dropDown or item.inputBox or
-          item.dateTimePicker -%}
-          <div class="col-md-12">
-            <div class="d-flex calculator-inputs">
-              {%- if item.inputBox -%} {%- assign inputBoxType = "number" -%}
-              {%- if item.inputType -%} {%- assign inputBoxType = item.inputType
-              -%} {%- endif -%}
-              <input
-                class="form-control"
-                type="{{inputBoxType}}"
-                name="{{item.inputName}}"
-                id="{{item.inputId}}"
-              />
-              {%- endif -%} {%- if item.dropDown -%}
-              <select
-                class="form-control"
-                name="{{item.dropDownName}}"
-                id="{{item.dropDownId}}"
-              ></select>
-              {%- endif -%} {%- if item.dateTimePicker -%}
-              <input
-                class="form-control"
-                type="date"
-                name="{{item.dateTimePicker}}"
-                id="{{item.dateTimePickerId}}"
-              />
-              {%- endif -%} {%- if item.unit -%}
-              <div class="unit">{{item.unit}}</div>
-              {%- endif -%}
+            {%- endif -%} {%- if item.dropDown or item.inputBox or
+            item.dateTimePicker -%}
+            <div class="col-md-12">
+              <div class="d-flex calculator-inputs">
+                {%- if item.inputBox -%} {%- assign inputBoxType = "number" -%}
+                {%- if item.inputType -%} {%- assign inputBoxType =
+                item.inputType -%} {%- endif -%}
+                <input
+                  class="form-control"
+                  type="{{inputBoxType}}"
+                  name="{{item.inputName}}"
+                  id="{{item.inputId}}"
+                />
+                {%- endif -%} {%- if item.dropDown -%}
+                <select
+                  class="form-control"
+                  name="{{item.dropDownName}}"
+                  id="{{item.dropDownId}}"
+                ></select>
+                {%- endif -%} {%- if item.dateTimePicker -%}
+                <input
+                  class="form-control"
+                  type="date"
+                  name="{{item.dateTimePicker}}"
+                  id="{{item.dateTimePickerId}}"
+                />
+                {%- endif -%} {%- if item.unit -%}
+                <div class="unit">{{item.unit}}</div>
+                {%- endif -%}
+              </div>
             </div>
+            {%- endif -%}
+          </div>
+          {%- endfor -%}
+          <div id="dynamic-section"></div>
+        </form>
+      </div>
+      <div class="row w-100 mx-auto">
+        {%- if calculatorData.ButtonValue -%}
+        <div class="col-12 mt-4 px-0">
+          <div class="d-flex justify-content-end">
+            <button
+              class="submit-button"
+              type="{{calculatorData.ButtonType}}"
+              id="{{calculatorData.ButtonId}}"
+            >
+              {{calculatorData.ButtonValue}}
+            </button>
           </div>
-          {%- endif -%}
         </div>
-        {%- endfor -%}
-        <div id="dynamic-section"></div>
-      </form>
-    </div>
-    <div class="row w-100 mx-auto">
-      {%- if calculatorData.ButtonValue -%}
-      <div class="col-12 mt-4 px-0">
-        <div class="d-flex justify-content-end">
-          <button
-            class="submit-button"
-            type="{{calculatorData.ButtonType}}"
-            id="{{calculatorData.ButtonId}}"
-          >
-            {{calculatorData.ButtonValue}}
-          </button>
+        {%- endif -%} {%- if calculatorData.resultDiv -%}
+        <div class="col-12 mt-3">
+          <div class="result-section" id="result-section"></div>
         </div>
+        {%- endif -%}
       </div>
-      {%- endif -%} {%- if calculatorData.resultDiv -%}
-      <div class="col-12 mt-3">
-        <div class="result-section" id="result-section"></div>
-      </div>
-      {%- endif -%}
     </div>
   </div>
   {%- if calculatorData.calculatorWarning-%}