dropping alpinejs support

tallstackui · Sep 16, 2024 · 1e0f1ca · 1e0f1ca
1 parent 8255042
commit 1e0f1ca
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 51 deletions.
diff --git a/config/envbar.php b/config/envbar.php
@@ -47,8 +47,8 @@
     |--------------------------------------------------------------------------
     |
     | Determines if the EnvBar will display the Tailwind CSS breaking points.
-    | It will only work if the AlpineJS was loaded on the page and also if the
-    | Tailwind CSS configuration file (tailwind.config.js) exists on the base path.
+    | It will only work if the Tailwind CSS configuration file (tailwind.config.js)
+    | exists on the base path and its value is set to true.
     |
     */
     'tailwind_breaking_points' => env('ENVBAR_TAILWIND_BREAKING_POINTS', true),
@@ -69,7 +69,6 @@
     | Closable Effect
     |--------------------------------------------------------------------------
     |
-    | Only work if the AlpineJS was loaded on the page.
     */
     'closable' => [
         /*
@@ -87,7 +86,7 @@
         | Timeout
         |--------------------------------------------------------------------------
         |
-        | When set, the EnvBar will wait the set seconds to appear again.
+        | When set, the EnvBar will wait the set minutes to appear again.
         |
         */
         'timeout' => env('ENVBAR_CLOSABLE_TIMEOUT'),

diff --git a/dist/app.js b/dist/app.js
diff --git a/resources/js/app.js b/resources/js/app.js
@@ -1,15 +1,3 @@
 import envbar from "./modules/envbar.js";
 
-window.addEventListener('load', function () {
-    if (typeof Alpine === 'undefined') {
-        let divs = document.querySelectorAll('div[id^="envbar"]');
-
-        divs = Array.from(divs).filter(envbar => envbar.id.includes('right-side'));
-
-        divs.forEach(envbar => envbar.style.display = 'none');
-    }
-});
-
-document.addEventListener('alpine:init', () => {
-    Alpine.data('envbar', envbar);
-});
+window.$envbar = envbar;
diff --git a/resources/js/modules/envbar.js b/resources/js/modules/envbar.js
@@ -1,11 +1,14 @@
 export default (configuration) => ({
-    show: true,
-    resolution: '',
     init() {
-        const closedAt = localStorage.getItem('envbar::closed')
+        const closedAt = localStorage.getItem('envbar::closed');
 
         if (closedAt && Date.now() < parseInt(closedAt)) {
-            this.show = false
+            this.element().style.display = 'none';
+        }
+
+        // We remove the storage item if the time has passed
+        if (closedAt && Date.now() > parseInt(closedAt)) {
+            localStorage.removeItem('envbar::closed');
         }
 
         if (Boolean(configuration.tailwind_breaking_points) === true) {
@@ -14,48 +17,55 @@ export default (configuration) => ({
             window.addEventListener('resize', () => this.breakpoint());
         }
     },
+
     close() {
         const timeout = configuration.closable.timeout ?? null;
 
-        this.show = false
+        this.element().style.display = 'none';
 
-        localStorage.removeItem('envbar::closed')
+        localStorage.removeItem('envbar::closed');
 
         if (!timeout) {
             return;
         }
 
-        localStorage.setItem('envbar::closed', String(Date.now() + (parseInt(timeout) * 1000)))
+        localStorage.setItem('envbar::closed', String(Date.now() + parseInt(timeout) * 60000));
     },
-    breakpoint() {
-        if (window.innerWidth < 640) {
-            this.resolution = 'SM';
 
-            return;
-        }
+    breakpoint () {
+        const width = window.innerWidth;
+        const span = this.element('resolution');
 
-        if (window.innerWidth >= 640 && window.innerWidth < 768) {
-            this.resolution = 'MD';
+        if (width < 640) {
+            return span.innerText = 'SM';
+        }
 
-            return;
+        if (width >= 640 && width < 768) {
+            return span.innerText = 'MD';
         }
 
-        if (window.innerWidth >= 768 && window.innerWidth < 1024) {
-            this.resolution = 'LG';
+        if (width >= 768 && width < 1024) {
+            return span.innerText = 'LG';
+        }
 
-            return;
+        if (width >= 1024 && width < 1280) {
+            return span.innerText = 'XL';
         }
-        if (window.innerWidth >= 1024 && window.innerWidth < 1280) {
-            this.resolution = 'XL';
 
-            return;
+        if (width >= 1280 && width < 1536) {
+            return span.innerText = '2XL';
         }
-        if (window.innerWidth >= 1280 && window.innerWidth < 1536) {
-            this.resolution = '2XL';
 
-            return;
+        return span.innerText = '> 2XL';
+    },
+
+    element (what = '') {
+        let id = `envbar`;
+
+        if (what) {
+            id += `-${what}`;
         }
 
-        this.resolution = '> 2XL';
-    }
+        return document.getElementById(id);
+    },
 })
diff --git a/resources/views/components/envbar.blade.php b/resources/views/components/envbar.blade.php
@@ -8,7 +8,7 @@
         'eb-p-5' => $configuration['size'] === 'xl',
         'eb-sticky' => $configuration['fixed'],
         $colors['background']
-    ]) x-data="envbar(@js($configuration))" x-show="show" id="envbar-{{ $id }}">
+    ]) id="envbar">
     <div class="eb-flex eb-flex-wrap eb-items-center eb-space-x-1 eb-gap-1">
         <div class="eb-inline-flex eb-items-center eb-gap-1">
             <x-envbar::icons.laravel @class($colors['icons']) />
@@ -40,17 +40,26 @@
             </div>
         @endif
         {{-- Right Side --}}
-        <div class="eb-flex eb-items-center eb-absolute eb-right-2" id="envbar-{{ $id }}-right-side">
+        <div class="eb-flex eb-items-center eb-absolute eb-right-2">
             @if ($configuration['tailwind_breaking_points'])
             <div class="eb-items-center eb-gap-1">
-                <x-envbar::badge :size="$configuration['size']"><span x-text="resolution"></span></x-envbar::badge>
+                <x-envbar::badge :size="$configuration['size']"><span id="envbar-resolution"></span></x-envbar::badge>
             </div>
             @endif
             @if ($configuration['closable']['enabled'])
-                <button type="button" x-on:click="close()" dusk="envbar_close_button">
+                <button onclick="window.hide()" dusk="envbar_close_button">
                     <x-envbar::icons.x class="eb-h-4 eb-w-4" />
                 </button>
             @endif
         </div>
     </div>
 </div>
+
+<script>
+    document.addEventListener('DOMContentLoaded', () => window.$envbar(@js($configuration)).init());
+    document.addEventListener('livewire:navigated', () => window.$envbar(@js($configuration)).init());
+
+    (function() {
+        window.hide = () => window.$envbar(@js($configuration)).close();
+    })();
+</script>
diff --git a/src/View/Components/Badge.php b/src/View/Components/Badge.php
@@ -23,9 +23,7 @@ public function __construct(
 
     public function blade(): View
     {
-        return view('envbar::components.badge', [
-            'color' => $this->colors()
-        ]);
+        return view('envbar::components.badge', ['color' => $this->colors()]);
     }
 
     /**