Animate banner show/hide

aricooperdavis · Oct 15, 2022 · 949f646 · 949f646
1 parent 7810ddb
commit 949f646
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,9 @@
+# v1.0.13
+## 15/10/2022
+
+1. [](#improved)
+    * Animate banner show/hide
+
 # v1.0.12
 ## 14/10/2022
 

diff --git a/blueprints.yaml b/blueprints.yaml
@@ -1,7 +1,7 @@
 name: Custom Banner
 slug: custom-banner
 type: plugin
-version: 1.0.12
+version: 1.0.13
 description: Add a custom banner to your Grav site
 icon: bookmark
 author:

diff --git a/css/custom-banner.css b/css/custom-banner.css
@@ -3,6 +3,21 @@ div.custom-banner-container {
   position: fixed;
   width: 100%;
   z-index: 10000;
+
+  /* Animate show/hide */
+  -webkit-transition: all 0.2s ease-in-out 0s;
+  -moz-transition: all 0.2s ease-in-out 0s;
+  -ms-transition: all 0.2s ease-in-out 0s;
+  transition: all 0.2s ease-in-out 0s;
+
+  /* Hidden by default */
+  opacity: 0;
+  visibility: hidden;
+}
+
+div.custom-banner-container.shown {
+  opacity: 1;
+  visibility: visible;
 }
 
 div.custom-banner-body {

diff --git a/custom-banner.php b/custom-banner.php
@@ -121,7 +121,7 @@ public function onOutputGenerated(): void
         // Generate banner HTML
         // Content
         $content = $config['content'];
-        $hidden = ($config['cdn-fix'] ? 'none' : 'block');
+        $hidden = ($config['cdn-fix'] ? '' : 'shown');
         $button_text = $config['button-text'];
         $button_url = $config['button-url'];
         $dismiss_text = $config['dismiss-text'];
@@ -134,7 +134,7 @@ public function onOutputGenerated(): void
         $box_shadow = ($config['box-shadow'] ? '5px 5px 0.75rem gray' : 'none');
 
         $banner = <<<EOD
-        <div class="custom-banner-container" style="$position: 1rem; display: $hidden;">
+        <div class="custom-banner-container $hidden" style="$position: 1rem;">
             <div class="custom-banner-body" style="box-shadow: $box_shadow; background-color: $bg_colour;">
                 <div class="custom-banner-content" style="color: $fg_colour;">$content</div>
                 <div class="custom-banner-actions">

diff --git a/js/custom-banner.js b/js/custom-banner.js
@@ -1,10 +1,10 @@
 function custom_button_dismiss() {
     document.cookie = 'custom-banner-dismiss=true; max-age=1800; SameSite=Strict';
-    document.getElementsByClassName('custom-banner-container')[0].style.display = 'none';
+    document.getElementsByClassName('custom-banner-container')[0].classList.remove('shown');
 }
 
 function custom_button_show() {
-    document.getElementsByClassName('custom-banner-container')[0].style.display = 'block';
+    document.getElementsByClassName('custom-banner-container')[0].classList.add('shown');
 }
 
 let hidden = document.cookie