@natachah/vanilla-frontend 0.1.16 → 0.1.18

package/docs/pages/javascript/tree.html

@@ -198,7 +198,25 @@
 
         <h2>Javascript</h2>
         <p>To enable this component you need to import the javascript file and create a new Tree object.</p>
-
+        <h3>Methods</h3>
+        <table>
+            <thead>
+                <tr>
+                    <th>Method</th>
+                    <th>Description</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td data-label="Method">
+                        <p>resetEvents()</p>
+                    </td>
+                    <td data-label="Description">
+                        <p>This method will reset the items and events</p>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
         <h3>Events</h3>
         <table>
             <thead>

package/docs/src/js/doc-layout.js

@@ -18,7 +18,7 @@ class DocLayout extends HTMLElement {
                                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pin-angle" viewBox="0 0 16 16">
                                 <path d="M9.828.722a.5.5 0 0 1 .354.146l4.95 4.95a.5.5 0 0 1 0 .707c-.48.48-1.072.588-1.503.588-.177 0-.335-.018-.46-.039l-3.134 3.134a6 6 0 0 1 .16 1.013c.046.702-.032 1.687-.72 2.375a.5.5 0 0 1-.707 0l-2.829-2.828-3.182 3.182c-.195.195-1.219.902-1.414.707s.512-1.22.707-1.414l3.182-3.182-2.828-2.829a.5.5 0 0 1 0-.707c.688-.688 1.673-.767 2.375-.72a6 6 0 0 1 1.013.16l3.134-3.133a3 3 0 0 1-.04-.461c0-.43.108-1.022.589-1.503a.5.5 0 0 1 .353-.146m.122 2.112v-.002zm0-.002v.002a.5.5 0 0 1-.122.51L6.293 6.878a.5.5 0 0 1-.511.12H5.78l-.014-.004a5 5 0 0 0-.288-.076 5 5 0 0 0-.765-.116c-.422-.028-.836.008-1.175.15l5.51 5.509c.141-.34.177-.753.149-1.175a5 5 0 0 0-.192-1.054l-.004-.013v-.001a.5.5 0 0 1 .12-.512l3.536-3.535a.5.5 0 0 1 .532-.115l.096.022c.087.017.208.034.344.034q.172.002.343-.04L9.927 2.028q-.042.172-.04.343a1.8 1.8 0 0 0 .062.46z"/>
                                 </svg>
-                                0.1.16
+                                0.1.18
                             </span>
                         </li>
                         <li>

package/js/_drawer.js

@@ -45,7 +45,7 @@ export default class Drawer extends BaseComponent {
 
         this._isOpen = !this._element.hidden
 
-        this._focus = this._element.querySelector('[tabindex="0"]') ?? this._element.querySelector('a,button,input') ?? null
+        this._focus = this._element.getAttribute('tabindex') === '0' ? this._element : this._element.querySelector('[tabindex="0"]') ?? this._element.querySelector('button, a, input')
 
         this._cookie = this._options.cookie ? new Cookie(this._options.cookie) : null
 

package/js/_dropdown.js

@@ -37,7 +37,7 @@ export default class Dropdown extends BaseComponent {
         // Define the properties
         this._button = this._element.querySelector('[aria-controls]')
         this._content = document.getElementById(this._button.getAttribute('aria-controls'))
-        this._focus = this._element.querySelector('[tabindex="0"]') ?? this._element.querySelector('a,button,input') ?? null
+        this._focus = this._content.getAttribute('tabindex') === '0' ? this._content : this._content.querySelector('[tabindex="0"]') ?? this._content.querySelector('button, a, input')
 
         // Init the event listener
         this.#init()

package/js/_sortable.js

@@ -26,11 +26,11 @@ export default class Sortable extends BaseComponent {
         super(el, options, 'sortable')
 
         // Define the properties
-        this._items = null
         this._withHandle = this._element.querySelector('[data-handle=sortable]') ? true : false
         this._current = null
 
-        // Lier une seule fois les méthodes à `this`
+        // Bind this only one time foreach methods
+        // * Because I add and remove events
         this.handleMouseDown = this.handleMouseDown.bind(this)
         this.handleMouseUp = this.handleMouseUp.bind(this)
         this.drag = this.drag.bind(this)
@@ -57,6 +57,17 @@ export default class Sortable extends BaseComponent {
 
     }
 
+    /**
+     * Get the list of the items
+     * This is used for the emmitEvent
+     * 
+     * @return {object}
+     */
+    get _items() {
+        return this._element.querySelectorAll('[draggable]')
+    }
+
+
     /**
      * Init the items and the event listeners
      * 
@@ -64,9 +75,6 @@ export default class Sortable extends BaseComponent {
      */
     #initEvents() {
 
-        // Get the items
-        this._items = this._element.querySelectorAll('[draggable]')
-
         // Add the events
         this._items.forEach(item => {
             item.addEventListener('mousedown', this.handleMouseDown)
@@ -148,7 +156,7 @@ export default class Sortable extends BaseComponent {
         item.setAttribute('aria-grabbed', true)
 
         // Run custom event
-        this.emmitEvent('drag', { items: this.items, current: item })
+        this.emmitEvent('drag', { items: this._items, current: item })
 
     }
 
@@ -208,7 +216,7 @@ export default class Sortable extends BaseComponent {
         item.draggable = false
 
         // Run custom event
-        this.emmitEvent('drop', { items: this.items, current: item })
+        this.emmitEvent('drop', { items: this._items, current: item })
 
     }
 

package/js/_toggle.js

@@ -103,7 +103,10 @@ export default class Toggle extends BaseComponent {
             // Toggle the [hidden] attribute
             toggable.hidden = this.value !== toggleValue && groupValue !== toggleValue
 
-            if (!toggable.hidden && toggable.hasAttribute('tabindex')) toggable.focus()
+            if (!toggable.hidden) {
+                const focus = toggable.getAttribute('tabindex') === '0' ? toggable : toggable.querySelector('[tabindex="0"]') ?? toggable.querySelector('button, a, input')
+                if (focus) focus.focus()
+            }
 
         })
 

package/js/_tree.js

@@ -29,7 +29,9 @@ export default class Tree extends BaseComponent {
 
         this._withHandle = this._type == 'grid' && this._element.querySelector('[data-handle=tree]') ? true : false
 
-        this._items = this._element.querySelectorAll('[aria-expanded]')
+        // Bind this only one time foreach methods
+        // * Because I add and remove events
+        this.toggle = this.toggle.bind(this)
 
         // Init the event listener
         this.#init()
@@ -43,12 +45,45 @@ export default class Tree extends BaseComponent {
      */
     #init() {
 
-        this._items.forEach(item => item.addEventListener('click', (e) => {
-            if (!this._withHandle || (e.target.hasAttribute('data-handle') && e.target.getAttribute('data-handle') === 'tree')) {
-                e.stopPropagation()
-                this.toggle(item)
-            }
-        }))
+        // Init the events on the items
+        this.#initEvents()
+
+    }
+
+    /**
+     * Get the list of the items
+     * 
+     * @return {object}
+     */
+    get _items() {
+        return this._element.querySelectorAll('[aria-expanded]')
+    }
+
+    /**
+     * Init the items and the event listeners
+     * 
+     * @private
+     */
+    #initEvents() {
+        this._items.forEach(item => {
+            item.addEventListener('click', this.toggle)
+        })
+    }
+
+    /**
+     * Reset the event listeners
+     * 
+     * @private
+     */
+    resetEvents() {
+
+        // Remove the listeners
+        this._items.forEach((item) => {
+            item.removeEventListener('click', this.toggle)
+        })
+
+        // Re-initialise the items
+        this.#initEvents()
 
     }
 
@@ -57,7 +92,21 @@ export default class Tree extends BaseComponent {
      * 
      * @param {HTMLElement} item - The current item
      */
-    toggle(item) {
+    toggle(e) {
+
+        let item
+
+        if (e instanceof Event) {
+            // If it's an event verify about the handle + if target is an HTML element
+            if (!(e.target instanceof Element)) return
+            if (this._withHandle && (!e.target.hasAttribute('data-handle') || e.target.getAttribute('data-handle') !== 'tree')) return
+            e.stopPropagation()
+            item = e.target.closest('[aria-expanded]')
+        } else {
+            // If it's NOT an event verify that it's an HTML element
+            if (!(e instanceof Element)) return
+            item = e
+        }
 
         // Check for errors
         if (!(item instanceof HTMLElement)) throw new Error(ErrorMessage.instanceOf('item', 'HTMLElement'))
@@ -74,8 +123,36 @@ export default class Tree extends BaseComponent {
 
         // Set the focus on the required child
         if (!isExpanded) {
-            const childToFocus = children.find(el => el.hasAttribute('tabindex')) ?? null
-            if (childToFocus) childToFocus.focus()
+
+            let childToFocus = null
+
+            const child = children.find(el => {
+
+                // Check if the child have a tabindex
+                if (el.getAttribute('tabindex') === '0') {
+                    childToFocus = el
+                    return el
+                }
+
+                // Otherwise if an element inside the child have the tabindex
+                const childWithTabIndex = el.querySelector('[tabindex="0"]')
+                if (childWithTabIndex) {
+                    childToFocus = childWithTabIndex
+                    return childWithTabIndex
+                }
+
+                // Otherwise get the first focusable element
+                childToFocus = el.querySelector('button, a, input')
+                return el
+
+            })
+
+            // Add the focus if open
+            // * Need to wait the transition before make it focused
+            if (child && childToFocus) {
+                childToFocus.focus()
+            }
+
         }
 
         // If type grid, collapse the subchildren

package/js/tests/drawer.test.js

@@ -26,7 +26,7 @@ beforeAll(() => {
     document.body.innerHTML =
         '<div id="backdrop"></div>' +
         '<button aria-expanded="false" aria-pressed="false" aria-controls="drawer"></button>' +
-        '<aside id="drawer" tabindex="0" hidden><button id="focus"></button></aside>'
+        '<aside id="drawer" hidden><button id="focus"></button></aside>'
 
     Object.defineProperty(window, 'innerWidth', { configurable: true, value: 1200 })
 

package/js/tests/sortable.test.js

@@ -29,9 +29,9 @@ beforeAll(() => {
 
     document.body.innerHTML =
         '<ul id="fakeList">' +
-        '<li id="first" draggable="false"><button data-go="up">UP</button><button data-go="down">Down</button>One</li>' +
-        '<li draggable="false"><button data-go="up">UP</button><button data-go="down">Down</button>Two</li>' +
-        '<li draggable="false"><button data-go="up">UP</button><button data-go="down">Down</button>Three</li>' +
+        '<li id="first" draggable="false">One</li>' +
+        '<li draggable="false">Two</li>' +
+        '<li draggable="false">Three</li>' +
         '</ul>' +
         '<table id="fakeTable">' +
         '<tr draggable="false"><td data-handle="sortable">DRAG</td><td>One</td></tr>' +
@@ -101,7 +101,7 @@ describe('Drag()', () => {
         expect(eventSpy).not.toHaveBeenCalled()
         fireEvent(fakeListItem, new MouseEvent('mousedown'))
         fireEvent(fakeListItem, new MouseEvent('dragstart'))
-        expect(eventSpy).toHaveBeenCalledWith('drag', { current: fakeListItem, items: fakeListSortable.items })
+        expect(eventSpy).toHaveBeenCalledWith('drag', { current: fakeListItem, items: fakeListSortable._items })
     })
 
 })
@@ -119,7 +119,7 @@ describe('Drop()', () => {
         fireEvent(fakeListItem, new MouseEvent('mousedown')) // First drag item
         fireEvent(fakeListItem, new MouseEvent('dragstart')) // First drag item
         fireEvent(fakeListItem, new MouseEvent('dragend'))
-        expect(eventSpy).toHaveBeenCalledWith('drop', { current: fakeListItem, items: fakeListSortable.items })
+        expect(eventSpy).toHaveBeenCalledWith('drop', { current: fakeListItem, items: fakeListSortable._items })
     })
 
 })

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@natachah/vanilla-frontend",
-    "version": "0.1.16",
+    "version": "0.1.18",
     "description": "A vanilla frontend framework",
     "keywords": [
         "html5",