derafu-js 0.1.0 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "derafu-js",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Why use a JS framework if we can do all from scratch?",
   "main": "src/derafu.js",
   "files": [
@@ -28,11 +28,11 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/derafu/derafu-js.git"
+    "url": "git+https://github.com/derafu/js.git"
   },
-  "homepage": "https://github.com/derafu/derafu-js#readme",
+  "homepage": "https://github.com/derafu/js#readme",
   "bugs": {
-    "url": "https://github.com/derafu/derafu-js/issues"
+    "url": "https://github.com/derafu/js/issues"
   },
   "devDependencies": {
     "eslint": "^8.57.0",

package/src/derafu.js

@@ -134,6 +134,11 @@ if (typeof Form !== 'undefined') {
     }
 }
 
+// Make derafu available globally for browser usage.
+if (typeof window !== 'undefined') {
+    window.derafu = derafu;
+}
+
 // Export module for use in Node.js.
 if (typeof module === 'object' && module.exports) {
     module.exports = derafu;

package/src/tabs.js

@@ -29,7 +29,9 @@ Tabs.init = function () {
     'use strict';
 
     // Open the first tab by default.
-    const firstTabLink = document.querySelector('.nav-tabs a');
+    const firstTabLink = document.querySelector(
+        '.nav-tabs [data-bs-toggle="tab"]',
+    );
     if (firstTabLink) {
         new bootstrap.Tab(firstTabLink).show();
     }
@@ -38,13 +40,23 @@ Tabs.init = function () {
     Tabs.handleURLDeeplink();
 
     // Update URL when clicking on each tab.
-    const tabLinks = document.querySelectorAll('a[data-bs-toggle="tab"]');
+    const tabLinks = document.querySelectorAll('[data-bs-toggle="tab"]');
     tabLinks.forEach(tabLink => {
         tabLink.addEventListener('click', function () {
-            Tabs.deeplink(tabLink.getAttribute('aria-controls'));
+            const tabId =
+                tabLink.getAttribute('aria-controls') ||
+                (
+                    tabLink.getAttribute('data-bs-target') ||
+                    tabLink.getAttribute('href') ||
+                    ''
+                ).replace('#', '');
+            Tabs.deeplink(tabId);
         });
     });
 
+    // Inject animation styles for deeplink highlighting.
+    Tabs._injectStyles();
+
     // Add magic links, modal button actions, and form elements within tabs.
     for (const tabPane of document.querySelectorAll('div.tab-pane')) {
         if (tabPane.id) {
@@ -69,6 +81,58 @@ Tabs.init = function () {
     }, true);*/
 };
 
+/**
+ * Injects the CSS keyframe animation for deeplink highlighting once into the
+ * document head. Uses Bootstrap CSS variables so colors adapt to any theme.
+ *
+ * @returns {void}
+ */
+Tabs._injectStyles = function () {
+    'use strict';
+    if (document.getElementById('derafu-tabs-styles')) return;
+    const style = document.createElement('style');
+    style.id = 'derafu-tabs-styles';
+    style.textContent =
+        '@keyframes deeplink-pulse {' +
+        '0% { box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.5); }' +
+        '100% { box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0); }' +
+        '}' +
+        '.deeplink-highlight {' +
+        'animation: deeplink-pulse 2s ease-out forwards;' +
+        '}';
+    document.head.appendChild(style);
+};
+
+/**
+ * Highlights an element using a pulse animation. For cards the element itself
+ * is targeted; for form elements the nearest Bootstrap container is used
+ * (.input-group > .form-floating > parentElement) so that prepend/append
+ * addons and floating labels are included in the visual feedback.
+ * The highlight class is removed automatically when the animation ends.
+ *
+ * @param {HTMLElement} element - The element to highlight.
+ * @param {boolean} isCard - Whether the element is a card.
+ * @returns {void}
+ */
+Tabs._highlightElement = function (element, isCard) {
+    'use strict';
+    const target = isCard
+        ? element
+        : element.closest('.input-group') ||
+          element.closest('.form-floating') ||
+          element.parentElement;
+    if (!target) return;
+    if (isCard) target.classList.add('border-primary');
+    target.classList.add('deeplink-highlight');
+    target.addEventListener(
+        'animationend',
+        function () {
+            target.classList.remove('deeplink-highlight', 'border-primary');
+        },
+        { once: true },
+    );
+};
+
 /**
  * Handles opening tabs and focusing on specific elements based on URL.
  * @returns {void}
@@ -106,7 +170,7 @@ Tabs.handleTabDeeplink = function (tabElement, elementId) {
         `${tabElement_id}_${elementId}-card`,
     );
     if (cardElement) {
-        cardElement.classList.add('deeplink', 'border', 'border-danger');
+        Tabs._highlightElement(cardElement, true);
         typeof UI !== 'undefined'
             ? UI.scroll(cardElement)
             : cardElement.scrollIntoView({ behavior: 'smooth' });
@@ -124,21 +188,9 @@ Tabs.handleTabDeeplink = function (tabElement, elementId) {
             }
             modalInstance.show();
         }
-        // If it's a select (including select2), apply border and scroll.
-        else if (
-            element.tagName.toLowerCase() === 'select' &&
-            element.dataset.select2Id
-        ) {
-            element.parentElement
-                .querySelector('span.select2-selection')
-                .classList.add('deeplink', 'border', 'border-danger');
-            typeof UI !== 'undefined'
-                ? UI.scroll(element)
-                : element.scrollIntoView({ behavior: 'smooth' });
-        }
-        // If it's not a modal or select2, apply border and scroll.
+        // If it's a form element, highlight its container and scroll.
         else {
-            element.classList.add('deeplink', 'border', 'border-danger');
+            Tabs._highlightElement(element, false);
             typeof UI !== 'undefined'
                 ? UI.scroll(element)
                 : element.scrollIntoView({ behavior: 'smooth' });
@@ -249,12 +301,9 @@ Tabs.deeplink = function (deeplink) {
               history.replaceState(null, null, url);
           })();
 
-    // Clean the deeplink selection class in case they exist.
-    // This ensures that only one "marked" element exists at the same time.
-    for (const element of document.querySelectorAll(
-        '.deeplink.border.border-danger',
-    )) {
-        element.classList.remove('deeplink', 'border', 'border-danger');
+    // Cancel any in-progress highlight so only one marked element exists at a time.
+    for (const element of document.querySelectorAll('.deeplink-highlight')) {
+        element.classList.remove('deeplink-highlight', 'border-primary');
     }
 
     // Handle opening tabs based on URL.