appscms-tools-theme 4.5.0 → 4.5.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1e1c23f0315670bf11919d55743066c044d512fd60635e1c42ac90f58237aa1f
-  data.tar.gz: 8c6c8585a67016bb6583563f82ddc27b0659e83554dd741b75db54b121d51053
+  metadata.gz: e5ff36f832481cd021e7f9b6138568311994103c8f07b7526b4757b3c7538ef4
+  data.tar.gz: ba004bad2450a345a8681ba514961f9913b66ddfc298c3abb7969ba20d7c4b9f
 SHA512:
-  metadata.gz: 4243c50b36cb4c36aafaa5ee90b54aef4b02286231f2f4b5ce5d5e36f1fd068de10914bfcf8fae11cd8aca9d394a639e809584799efce5c06f7bced9b59527b9
-  data.tar.gz: b375918797d270fce6b76a1e43bdb57a7bcdbd858aa51426d71b11f69f378d4c4f73d25fe21a71bcca2df375baab8ed0f2e13244a6d30c7dad1bfbd3b4346cb5
+  metadata.gz: 3c422657817694e9309f258452675000c53f725010b35a485e40b5c4425ef650951bbf516c9d39baa3244ea5b137e5484b674370b70b485464ffce83a92f2b61
+  data.tar.gz: 6608b41ba57833c697d677c837eab665ef89f014f7e048a0da1c27d13261cdca5c9b5d453a20b6894d91cff44f873e5ef62741b11c248adf9777682214da0997

data/_layouts/appscms-download.html

@@ -24,7 +24,7 @@
                   </p>
                 </div>
                 <div class="go-back-block">
-                  <button onclick="history.back()"> Try processing another file</button>
+                  <button id="processing-btn">  <span class="button-loader"></span> Try processing another file</button>
                 </div>
               
               </div>

data/_layouts/appscms-imagekit.html

@@ -31,20 +31,19 @@ layout: appscms-feature
                 </div>
               </div>
               <div class="col-5">
+             
+
+
+             
                 <div class="d-flex align-items-center">
-                  <button
-                    id="download-button"
-                    style="background: var(--primary-color)"
-                  >
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 512 512"
-                    >
-                      <path
-                        d="M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM382.6 302.6l-103.1 103.1C270.7 414.6 260.9 416 256 416c-4.881 0-14.65-1.391-22.65-9.398L129.4 302.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 306.8V128c0-17.69 14.33-32 32-32s32 14.31 32 32v178.8l49.38-49.38c12.5-12.5 32.75-12.5 45.25 0S395.1 290.1 382.6 302.6z"
-                      /></svg
-                    >Download
+                  <button id="download-button" style="background: var(--primary-color)">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                      <path d="M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM382.6 302.6l-103.1 103.1C270.7 414.6 260.9 416 256 416c-4.881 0-14.65-1.391-22.65-9.398L129.4 302.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 306.8V128c0-17.69 14.33-32 32-32s32 14.31 32 32v178.8l49.38-49.38c12.5-12.5 32.75-12.5 45.25 0S395.1 290.1 382.6 302.6z"/>
+                    </svg>
+                    <span class="button-loader"></span>
+                    Download
                   </button>
+                  
                 </div>
               </div>
             </div>
@@ -57,20 +56,12 @@ layout: appscms-feature
         <div class="col-md-12 mx-auto mb-2">
           <div class="select-img-panel">
             <div id="saving-data" style="display: none">
-              <img
-                loading="lazy"
-                src="/assets/images/loader.gif"
-                alt="saving"
-                {%-
-                if
-                site.crossorigin
-                -%}
-                crossorigin
-                {%-
-                endif
-                -%}
-              />
-              <span class="ml-2">Saving your images...</span>
+              
+<div class="appscms-loader d-flex">
+    <div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
+</div>
+
+              <div class="text-center mt-4">Saving your files...</div>
             </div>
             <div id="canvas-box-panel"></div>
           </div>
@@ -80,20 +71,12 @@ layout: appscms-feature
         <div class="col-md-7 mx-auto mb-2">
           <div class="select-img-panel">
             <div id="saving-data" style="display: none">
-              <img
-                loading="lazy"
-                src="/assets/images/loader.gif"
-                alt="saving"
-                {%-
-                if
-                site.crossorigin
-                -%}
-                crossorigin
-                {%-
-                endif
-                -%}
-              />
-              <span class="ml-2">Saving your images...</span>
+              
+<div class="appscms-loader d-flex">
+    <div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
+</div>
+
+              <div class="mt-4 text-center">Saving your files...</div>
             </div>
             <div id="canvas-box-panel"></div>
           </div>

data/assets/css/appscms-imagekit.css

@@ -267,6 +267,7 @@
 }
 
 #download-button {
+  position: relative;
   cursor: pointer;
   display: inline-block;
   width: 130px;

data/assets/css/appscms-theme.css

@@ -949,7 +949,7 @@ body {
   color: var(--white-color);
   border: none;
   border-radius: 10px;
-  padding: 10px 15px;
+  padding: 10px 40px;
   font-size: 15px;
   height: 48px;
   min-width: 212px;
@@ -1972,4 +1972,37 @@ body {
 }
 .scroll-right svg{
   right: -10px;
+}
+<style>
+#download-button {
+position: relative;
+}
+
+.button-loader {
+position: absolute;
+top: 50%;
+left: 19%;
+transform: translate(-50%, -50%);
+border: 4px solid #ffffff;
+border-top: 4px solid var(--primary-color);
+border-radius: 50%;
+width: 24px;
+height: 24px;
+animation: spin 1s linear infinite;
+display: none;
+}
+
+@keyframes spin {
+0% { transform: translate(-50%, -50%) rotate(0deg); }
+100% { transform: translate(-50%, -50%) rotate(360deg); }
+}
+
+#download-button.loading .button-loader {
+display: block; /* Show the loader when button has loading class */
+}
+#processing-btn {
+  position: relative;
+}
+#processing-btn .button-loader {
+  left: 9%;
 }

data/assets/js/appscms-theme.js

@@ -170,3 +170,41 @@ if ("{{ site.removeBootstrapJs }}" === "true") {
 
 // // Initial button status update
 // updateButtonStatus(document.querySelector('.appscms-toolbar-list'));
+
+document.addEventListener("DOMContentLoaded", function() {
+  const downloadButton = document.getElementById("download-button");
+  
+  if (downloadButton) {
+    const loader =  downloadButton.querySelector(".button-loader");
+  const savingData = document.getElementById("saving-data");
+
+    downloadButton.addEventListener("click", function() {
+
+        loader.style.display = "block";
+      
+
+      // 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');
+if (processingBtn) {
+    // Add click event listener to the button
+    processingBtn.addEventListener('click', function() {
+        // Show loader
+        const buttonLoader = document.querySelector('.button-loader');
+        if (buttonLoader) {
+            buttonLoader.style.display = 'block';
+        }
+        // Go back in history
+        history.back();
+    });
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: appscms-tools-theme
 version: !ruby/object:Gem::Version
-  version: 4.5.0
+  version: 4.5.2
 platform: ruby
 authors:
 - vivek-appscms
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-04-12 00:00:00.000000000 Z
+date: 2024-04-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll