appscms-tools-theme 4.5.0 → 4.5.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1e1c23f0315670bf11919d55743066c044d512fd60635e1c42ac90f58237aa1f
-  data.tar.gz: 8c6c8585a67016bb6583563f82ddc27b0659e83554dd741b75db54b121d51053
+  metadata.gz: 8dc13fbcf69eae0beb256ae4ef0a36a0576be9a45ccc757eee74fcd7ebb1ff12
+  data.tar.gz: '083c99999a98bded24b3891da0f3100edac4bd83dd3c95d9f7f43c34fd8de883'
 SHA512:
-  metadata.gz: 4243c50b36cb4c36aafaa5ee90b54aef4b02286231f2f4b5ce5d5e36f1fd068de10914bfcf8fae11cd8aca9d394a639e809584799efce5c06f7bced9b59527b9
-  data.tar.gz: b375918797d270fce6b76a1e43bdb57a7bcdbd858aa51426d71b11f69f378d4c4f73d25fe21a71bcca2df375baab8ed0f2e13244a6d30c7dad1bfbd3b4346cb5
+  metadata.gz: b2d0ccea15ef92e398ed67364bb51d284e983d3aa9d2d731283bd1224f02cc410dd7dff6a747e722c91979f72957223770e2f5b81d0289737f85f25c6828107d
+  data.tar.gz: 1f26fbbe0f7f3db4e4183e69c3eaab1e52f11902a45b347d10f4190a20e976af04599b53302343a9d89111066be00c0b50a27bd80e98f6b189a2cd842d1af29c

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

@@ -1972,4 +1972,31 @@ 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 */
 }

data/assets/js/appscms-theme.js

@@ -170,3 +170,25 @@ 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
+
+    });
+  }
+});

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.1
 platform: ruby
 authors:
 - vivek-appscms
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-04-12 00:00:00.000000000 Z
+date: 2024-04-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll