#2 overlay widget implemented

1stthomas · May 28, 2021 · 8534a11 · 8534a11
1 parent 1504635
commit 8534a11
Show file tree

Hide file tree

Showing 5 changed files with 125 additions and 0 deletions.
diff --git a/controller.php b/controller.php
@@ -113,6 +113,28 @@ private function registerAssets()
                 ['version' => '0.0.1', 'minify' => true, 'combine' => true],
                 $this
         );
+        $al->register(
+                'css',
+                'ht7-widgets/body-overlay',
+                'css/ht7.widgets.bodyoverlay.css',
+                ['version' => '0.0.1', 'minify' => true, 'combine' => true],
+                $this
+        );
+        $al->register(
+                'javascript',
+                'ht7-widgets/body-overlay',
+                'js/ht7.widgets.bodyoverlay.js',
+                ['version' => '0.0.1', 'minify' => true, 'combine' => true],
+                $this
+        );
+
+        $al->registerGroup(
+                'ht7-widgets/body-overlay',
+                [
+                    ['css', 'ht7-widgets/body-overlay'],
+                    ['javascript', 'ht7-widgets/body-overlay']
+                ]
+        );
     }
 
     /**

diff --git a/css/ht7.widgets.bodyoverlay.css b/css/ht7.widgets.bodyoverlay.css
@@ -0,0 +1,37 @@
+@keyframes ht7-spin-loader {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.ht7-body-overlay {
+  bottom: 0;
+  display: none;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 2000;
+}
+.ht7-body-overlay.raised {
+  z-index: 2100;
+}
+.ht7-body-overlay.visible {
+  display: block;
+}
+.ht7-body-overlay .overlay-bg {
+  background-color: #333;
+  height: 100%;
+  opacity: 0.3;
+  position: absolute;
+  width: 100%;
+}
+.ht7-body-overlay .overlay-loader {
+  font-size: 52px;
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.ht7-body-overlay .overlay-loader > i {
+  animation: ht7-spin-loader 4s linear infinite;
+}
diff --git a/elements/widgets/body_overlay.php b/elements/widgets/body_overlay.php
@@ -0,0 +1,9 @@
+<?php
+defined('C5_EXECUTE') or die('Access Denied.');
+?>
+<div class="ht7-body-overlay">
+    <div class="overlay-bg"></div>
+    <div class="overlay-loader">
+        <i class="fa fa-refresh"></i>
+    </div>
+</div>
diff --git a/js/ht7.widgets.bodyoverlay.js b/js/ht7.widgets.bodyoverlay.js
@@ -0,0 +1,20 @@
+var ht7 = ht7 || {};
+ht7.widgets = ht7.widgets || {};
+
+ht7.widgets.bodyoverlay = {
+    helpers: function() {
+
+    },
+    hide: function() {
+        $(this.parameters.selector.type + this.parameters.selector.name).hide();
+    },
+    parameters: {
+        selector: {
+            name: 'ht7-body-overlay',
+            type: '.'
+        }
+    },
+    show: function() {
+        $(this.parameters.selector.type + this.parameters.selector.name).show();
+    }
+};
diff --git a/less/ht7.widgets.bodyoverlay.less b/less/ht7.widgets.bodyoverlay.less
@@ -0,0 +1,37 @@
+@keyframes ht7-spin-loader {
+    100% {
+        transform: rotate(360deg); transform: rotate(360deg);
+    }
+}
+.ht7-body-overlay {
+    bottom: 0;
+    display: none;
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 2000;
+    &.raised {
+        z-index: 2100;
+    }
+    &.visible {
+        display: block;
+    }
+    .overlay-bg {
+        background-color: #333;
+        height: 100%;
+        opacity: 0.3;
+        position: absolute;
+        width: 100%;
+    }
+    .overlay-loader {
+        font-size: 52px;
+        left: 50%;
+        position: absolute;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        > i {
+            animation: ht7-spin-loader 4s linear infinite;
+        }
+    }
+}