Remove tabler.io JS (#254)

Only dropdowns and dismiss buttons were used, which are now replicated with pure CSS or minimal JavaScript. This eliminates the need for a heavy library. An added benefit is that dropdowns can function without JavaScript, however, a drawback is the loss of automatic dropdown placement.
marein · Dec 2, 2024 · 0f961ac · 0f961ac
1 parent bd8af0c
commit 0f961ac
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 25 deletions.
diff --git a/assets/css/app.css b/assets/css/app.css
@@ -31,6 +31,28 @@ html:has(.layout-fluid) {
     border-radius: var(--tblr-border-radius);
 }
 
+.gp-dropdown-toggle {
+    clip: rect(0 0 0 0);
+    position: absolute;
+}
+
+.gp-dropdown-toggle:focus-visible + label.nav-link {
+    outline: 0;
+    box-shadow: 0 0 0 .25rem rgba(var(--tblr-primary-rgb), .25);
+}
+
+.gp-dropdown-toggle:focus-visible + label.btn {
+    color: var(--tblr-btn-hover-color);
+    background-color: var(--tblr-btn-hover-bg);
+    border-color: var(--tblr-btn-hover-border-color);
+    outline: 0;
+    box-shadow: var(--tblr-btn-box-shadow),var(--tblr-btn-focus-box-shadow);
+}
+
+.gp-dropdown-toggle:checked + label + .dropdown-menu {
+    display: block;
+}
+
 .gp-page-progress {
     z-index: 10000;
     top: 0;

diff --git a/assets/js/Common/NotificationList.js b/assets/js/Common/NotificationList.js
@@ -22,7 +22,7 @@ customElements.define('notification-list', class extends HTMLElement {
                     </div>
                     <div>${message}</div>
                 </div>
-                <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
+                <button class="btn-close" @click="${e => this._scheduleRemoval(e.target.parentElement, 0)}"></button>
             </div>
         `;
 

diff --git a/assets/js/app.js b/assets/js/app.js
@@ -1,7 +1,6 @@
 import {client} from './Common/HttpClient.js'
 import './Common/NotificationList.js'
 import '@tabler/core/dist/css/tabler.min.css'
-import '@tabler/core/dist/js/tabler.min.js'
 import '../css/app.css'
 
 window.fetch = (fetch => async (resource, options = {}) => {
@@ -36,12 +35,7 @@ window.app = {
 client.onError = response => window.app.notifyUser(response.message, 'warning');
 
 window.app.peInit();
-window.addEventListener('pe:click', e => {
-    (
-        e.detail.a.hasAttribute('data-bs-toggle') ||
-        e.detail.a.closest('[data-no-turbolink]')
-    ) && e.preventDefault()
-});
+window.addEventListener('pe:click', e => e.detail.a.closest('[data-no-turbolink]') && e.preventDefault());
 window.addEventListener('pe:navigate', e => {
     e.detail.parsed.push(dom => window.app.loadElements(dom.body));
     e.detail.succeed.push(() => window.dispatchEvent(new CustomEvent('app:load')));
@@ -60,4 +54,19 @@ window.matchMedia("(prefers-color-scheme:dark)").addEventListener(
 
 await window.app.loadElements(document.body).finally(window.app.showProgress());
 
+document.addEventListener('change', e => {
+    if (!e.target.matches('.gp-dropdown-toggle[type="checkbox"]')) return;
+
+    const onClick = eClick => {
+        if (eClick.target === e.target) return;
+        if (eClick.target.closest(`label[for="${e.target.id}"]`)) return;
+
+        e.target.checked = e.target.parentElement.contains(eClick.target);
+
+        if (e.target.checked) document.addEventListener('click', onClick, {once: true});
+    }
+
+    if (e.target.checked) setTimeout(() => document.addEventListener('click', onClick, {once: true}), 0);
+})
+
 window.dispatchEvent(new CustomEvent('app:load'));
diff --git a/config/importmap.php b/config/importmap.php
@@ -22,8 +22,7 @@
         'event-source-status' => ['path' => 'js/Common/EventSourceStatus.js'],
         'confirmation-button' => ['path' => 'js/Common/ConfirmationButton.js'],
         'uhtml/node.js' => ['version' => '4.5.8'],
-        '@tabler/core/dist/css/tabler.min.css' => ['version' => '1.0.0-beta20', 'type' => 'css'],
-        '@tabler/core/dist/js/tabler.min.js' => ['version' => '1.0.0-beta20']
+        '@tabler/core/dist/css/tabler.min.css' => ['version' => '1.0.0-beta20', 'type' => 'css']
     ];
 
     foreach ($finder as $file) {

diff --git a/src/WebInterface/Presentation/Http/View/layout/condensed.html.twig b/src/WebInterface/Presentation/Http/View/layout/condensed.html.twig
@@ -18,24 +18,21 @@
                         <event-source-status title-open="Ready to Play!"
                                              title-closed="Connecting..."></event-source-status>
                     </div>
-                    {% if app.user ? app.user.isSignedUp %}
-                        <div class="nav-item dropdown">
-                            <a href="javascript:void(0)" class="nav-link d-flex lh-1 text-reset p-0"
-                               data-bs-toggle="dropdown">
+                    <div class="nav-item dropdown">
+                        <input type="checkbox" class="gp-dropdown-toggle" id="menu">
+                        {% if app.user ? app.user.isSignedUp %}
+                            <label for="menu" class="nav-link d-flex lh-1 text-reset p-0 cursor-pointer">
                                 <span class="avatar avatar-sm">{{ app.user.username|slice(0, 2) }}</span>
                                 <div class="d-none d-sm-block ps-2">
                                     <div class="small text-secondary">Hi!</div>
                                     <div class="mt-1">{{ app.user.username }}</div>
                                 </div>
-                            </a>
-                            <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
+                            </label>
+                            <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow" data-bs-popper>
                                 <a href="{{ path('_logout_main') }}" class="dropdown-item">Logout</a>
                             </div>
-                        </div>
-                    {% else %}
-                        <div class="nav-item dropdown">
-                            <a href="javascript:void(0)" class="nav-link d-flex lh-1 text-reset p-0"
-                               data-bs-toggle="dropdown">
+                        {% else %}
+                            <label for="menu" class="nav-link d-flex lh-1 text-reset p-0 cursor-pointer">
                                 <span class="avatar avatar-sm">
                                     <svg xmlns="http://www.w3.org/2000/svg" class="icon avatar-icon" width="24"
                                          height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
@@ -49,13 +46,13 @@
                                     <div class="small text-secondary">Hi!</div>
                                     <div class="mt-1">Login</div>
                                 </div>
-                            </a>
-                            <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
+                            </label>
+                            <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow" data-bs-popper>
                                 <a href="{{ path('signup') }}" class="dropdown-item">Sign up</a>
                                 <a href="{{ path('login') }}" class="dropdown-item">Sign in</a>
                             </div>
-                        </div>
-                    {% endif %}
+                        {% endif %}
+                    </div>
                 </div>
                 <div class="d-flex flex-column flex-md-row flex-fill align-items-stretch align-items-md-center">
                     <ul class="navbar-nav">
-Original file line number
+Diff line change
@@ Expand Up @@
                         </div>
                         <div>${message}</div>
                     </div>
-                    <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
+                    <button class="btn-close" @click="${e => this._scheduleRemoval(e.target.parentElement, 0)}"></button>
                 </div>
             `;
@@ Expand Down @@