@natachah/vanilla-frontend 0.1.15 → 0.1.17

package/docs/pages/javascript/sortable.html

@@ -95,45 +95,27 @@
             </ul>
         </doc-code>
 
-        <h2>Manually move</h2>
-        <p>You can manually move the item by adding some button with <code>data-go="up"</code> or <code>data-go="down"</code> attribute</p>
-        <doc-demo>
-            <ul class="demo-sortable">
-                <li draggable="false">
-                    <button data-go="up">UP</button><button data-go="down">Down</button>
-                    Lorem, ipsum.
-                </li>
-                <li draggable="false">
-                    <button data-go="up">UP</button><button data-go="down">Down</button>
-                    Impedit, quod!
-                </li>
-                <li draggable="false">
-                    <button data-go="up">UP</button><button data-go="down">Down</button>
-                    Repudiandae, rerum.
-                </li>
-            </ul>
-        </doc-demo>
-
-        <doc-code>
-            <ul id="mySortableListWithBtn">
-                <li draggable="false">
-                    <button data-go="up">UP</button><button data-go="down">Down</button>
-                    Lorem, ipsum.
-                </li>
-                <li draggable="false">
-                    <button data-go="up">UP</button><button data-go="down">Down</button>
-                    Impedit, quod!
-                </li>
-                <li draggable="false">
-                    <button data-go="up">UP</button><button data-go="down">Down</button>
-                    Repudiandae, rerum.
-                </li>
-            </ul>
-        </doc-code>
-
-
         <h2 id="javascript">Javascript</h2>
         <p>To enable this component you need to import the javascript file and create a new Sortable 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 id="events">Events</h3>
         <table>
             <thead>

package/docs/src/js/demo.js

@@ -43,7 +43,6 @@ if (sliderFade) {
         autoplay: 4000
     })
     sliderFade.addEventListener('slider:changed', (ev) => {
-        console.log(ev)
         const src = mySliderObj._slides[ev.detail.previous].querySelector('img').getAttribute('src')
         sliderFade.style.backgroundImage = `url("${src}")`
     })

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.15
+                                0.1.17
                             </span>
                         </li>
                         <li>
@@ -36,7 +36,7 @@ class DocLayout extends HTMLElement {
                     </ul>
                 </nav>
             </header>
-            <aside id="sidebar" class="drawer" tabindex="0" hidden>
+            <aside id="sidebar" class="drawer" hidden>
                 <header>
                     <a href="/index.html">
                         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-rocket" viewBox="0 0 16 16">

package/js/_drawer.js

@@ -45,7 +45,7 @@ export default class Drawer extends BaseComponent {
 
         this._isOpen = !this._element.hidden
 
-        this._focus = this._element.querySelector('a,button') ?? null
+        this._focus = this._element.querySelector('[tabindex="0"]') ?? this._element.querySelector('a,button,input') ?? null
 
         this._cookie = this._options.cookie ? new Cookie(this._options.cookie) : null
 
@@ -73,7 +73,7 @@ export default class Drawer extends BaseComponent {
 
         // Window is smaller than breakpoint
         // -> Hide the drawer
-        if (window.innerWidth < this._options.breakpoint) this.toggle(false)
+        if (window.innerWidth <= this._options.breakpoint) this.toggle(false)
 
         // On window resize
         // -> Toggle the drawer
@@ -85,7 +85,7 @@ export default class Drawer extends BaseComponent {
                 if (window.innerWidth > this._options.breakpoint && (!this._isOpen && shouldBeOpen)) this.toggle(true)
 
                 // Smaller than breakpoint -> Invisible
-                if (window.innerWidth < this._options.breakpoint && this._isOpen) this.toggle(false)
+                if (window.innerWidth <= this._options.breakpoint && this._isOpen) this.toggle(false)
 
             }, 250)
         }
@@ -123,7 +123,12 @@ export default class Drawer extends BaseComponent {
         }
 
         // Add the focus if open
-        if (this._focus && this._isOpen) this._focus.focus()
+        // * Need to wait the transition before make it focused
+        if (this._focus && this._isOpen) {
+            this._element.addEventListener("transitionend", () => {
+                this._focus.focus()
+            }, { once: true })
+        }
 
     }
 

package/js/_dropdown.js

@@ -37,6 +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
 
         // Init the event listener
         this.#init()
@@ -88,8 +89,13 @@ export default class Dropdown extends BaseComponent {
         // Change visibility of the content
         this._content.hidden = !value
 
-        // Put the focus on the content
-        if (value) this._content.focus()
+        // Add the focus if open
+        // * Need to wait the transition before make it focused
+        if (this._focus && value) {
+            this._element.addEventListener("transitionend", () => {
+                this._focus.focus()
+            }, { once: true })
+        }
 
         // Emmit event
         this.emmitEvent('changed', { isOpen: !this._content.hidden })

package/js/_sortable.js

@@ -29,6 +29,13 @@ export default class Sortable extends BaseComponent {
         this._withHandle = this._element.querySelector('[data-handle=sortable]') ? true : false
         this._current = null
 
+        // Lier une seule fois les méthodes à `this`
+        this.handleMouseDown = this.handleMouseDown.bind(this)
+        this.handleMouseUp = this.handleMouseUp.bind(this)
+        this.drag = this.drag.bind(this)
+        this.dragging = this.dragging.bind(this)
+        this.drop = this.drop.bind(this)
+
         // Init the event listener
         this.#init()
 
@@ -44,41 +51,99 @@ export default class Sortable extends BaseComponent {
         // Prevent default animation at the drop
         this._element.addEventListener('dragover', (e) => e.preventDefault())
 
-        // Events directly on the items 
-        this.items.forEach((item) => {
+        // Init the events on the items
+        this.#initEvents()
+
+    }
 
-            // Toggle the [dragable] attribute
-            item.addEventListener('mousedown', (e) => { if (!this._withHandle || (e.target.hasAttribute('data-handle') && e.target.getAttribute('data-handle') === 'sortable')) item.draggable = true })
-            item.addEventListener('mouseup', () => item.draggable = false)
+    /**
+     * Get the list of the items
+     * This is used for the emmitEvent
+     * 
+     * @return {object}
+     */
+    get _items() {
+        return this._element.querySelectorAll('[draggable]')
+    }
 
-            // Drag and drop events
-            item.addEventListener('dragstart', () => this.#drag(item))
-            item.addEventListener('dragenter', () => this.#dragging(item))
-            item.addEventListener('dragend', () => this.#drop(item))
 
-            const btns = item.querySelectorAll('[data-go]')
-            if (btns) btns.forEach(btn => btn.addEventListener('click', () => this.#move(item, btn.getAttribute('data-go') == 'up')))
+    /**
+     * Init the items and the event listeners
+     * 
+     * @private
+     */
+    #initEvents() {
+
+        // Get the items
+        //this._items = this._element.querySelectorAll('[draggable]')
+
+        // Add the events
+        this._items.forEach(item => {
+            item.addEventListener('mousedown', this.handleMouseDown)
+            item.addEventListener('mouseup', this.handleMouseUp)
+            item.addEventListener('dragstart', this.drag)
+            item.addEventListener('dragenter', this.dragging)
+            item.addEventListener('dragend', this.drop)
+        })
+    }
 
+    /**
+     * Reset the event listeners
+     * 
+     * @private
+     */
+    resetEvents() {
+
+        // Remove the listeners
+        this._items.forEach((item) => {
+            item.removeEventListener('mousedown', this.handleMouseDown)
+            item.removeEventListener('mouseup', this.handleMouseUp)
+            item.removeEventListener('dragstart', this.drag)
+            item.removeEventListener('dragenter', this.dragging)
+            item.removeEventListener('dragend', this.drop)
         })
 
+        // Re-initialise the items
+        this.#initEvents()
     }
 
     /**
-     * Get the list of the items
+     * Handle the mousedown event
      * 
-     * @return {object}
+     * @private
      */
-    get items() {
-        return this._element.querySelectorAll('[draggable]')
+    handleMouseDown(e) {
+        // Avoid if not an element
+        if (!(e.target instanceof Element)) return
+        const target = e.target.closest('[draggable]')
+        if (!this._withHandle || (e.target.hasAttribute('data-handle') && e.target.getAttribute('data-handle') === 'sortable')) target.draggable = true
+    }
+
+    /**
+     * Handle the mouseup event
+     * 
+     * @private
+     */
+    handleMouseUp(e) {
+        // Avoid if not an element
+        if (!(e.target instanceof Element)) return
+        const target = e.target.closest('[draggable]')
+        target.draggable = false
     }
 
     /**
      * Drag an item
      * 
-     * @param {HTMLElement} item - The current item
      * @private
      */
-    #drag(item) {
+    drag(e) {
+
+        // Avoid if not an element
+        if (!(e.target instanceof Element)) return
+
+        // Get the item
+        // * Bug with event listeners reset if passing some data
+        const item = e.target.closest('[draggable]')
 
         // Check for errors
         if (!(item instanceof HTMLElement)) throw new Error(ErrorMessage.instanceOf('item', 'HTMLElement'))
@@ -93,17 +158,23 @@ 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 })
 
     }
 
     /**
      * When dragging an item, move it before or after an element
      * 
-     * @param {HTMLElement} item - The current item
      * @private
      */
-    #dragging(item) {
+    dragging(e) {
+
+        // Avoid if not an element
+        if (!(e.target instanceof Element)) return
+
+        // Get the item
+        // * Bug with event listeners reset if passing some data
+        const item = e.target.closest('[draggable]')
 
         // Check for errors
         if (!(item instanceof HTMLElement)) throw new Error(ErrorMessage.instanceOf('item', 'HTMLElement'))
@@ -120,10 +191,16 @@ export default class Sortable extends BaseComponent {
     /**
      * Drop an item
      * 
-     * @param {HTMLElement} item - The current item
      * @private
      */
-    #drop(item) {
+    drop(e) {
+
+        // Avoid if not an element
+        if (!(e.target instanceof Element)) return
+
+        // Get the item
+        // * Bug with event listeners reset if passing some data
+        const item = e.target.closest('[draggable]')
 
         // Check for errors
         if (!(item instanceof HTMLElement)) throw new Error(ErrorMessage.instanceOf('item', 'HTMLElement'))
@@ -141,30 +218,8 @@ 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 })
 
     }
 
-    /**
-     * Manually move up and down
-     * 
-     * @param {HTMLElement} item - The current item
-     * @private
-     */
-    #move(item, goUp = false) {
-
-        const sibling = goUp ? item.previousElementSibling : item.nextElementSibling
-
-        if (sibling) {
-            this._element.insertBefore(item, goUp ? sibling : sibling.nextElementSibling)
-        } else if (!goUp) {
-            this._element.appendChild(item)
-        }
-
-        // Run custom event
-        this.emmitEvent('moved', { items: this.items, current: item })
-
-    }
-
-
 }

package/js/tests/slider.test.js

@@ -102,7 +102,6 @@ describe('Structure of the class', () => {
     })
 
     test('Constructor: Return the correct properties', () => {
-        console.log(document.querySelectorAll('#slider [role=tabpanel]') == fakeSlider._slides)
         expect(fakeSlider).toHaveProperty('_element')
         expect(fakeSlider).toHaveProperty('_options')
         expect(fakeSlider).toHaveProperty('_slides')

package/js/tests/sortable.test.js

@@ -8,12 +8,10 @@
  * - Constructor: Return the correct properties
  * - Mousedown & Mouseup: Without handle toggle the [draggable] attribute
  * - Mousedown & Mouseup: With handle toggle the [draggable] attribute
- * - #Drag(): Add the [aria-grabbed] attribute
- * - #Drag(): Emmit the sortable:drag event
- * - #Drop(): Remove the [aria-grabbed] attribute
- * - #Drop(): Emmit the sortable:drop event
- * - #Move(): Go down on click and emmit the sortable:moved event
- * - #Move(): Go up on click and emmit the sortable:moved event
+ * - Drag(): Add the [aria-grabbed] attribute
+ * - Drag(): Emmit the sortable:drag event
+ * - Drop(): Remove the [aria-grabbed] attribute
+ * - Drop(): Emmit the sortable:drop event
  */
 
 import { describe, test, expect, beforeAll, vi } from "vitest"
@@ -31,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>' +
@@ -54,8 +52,8 @@ describe('Structure of the class', () => {
         expect(fakeListSortable._withHandle).toBeTypeOf('boolean')
         expect(fakeListSortable._withHandle).toBe(false)
         expect(fakeTableSortable._withHandle).toBe(true)
-        expect(fakeListSortable.items).toBeTypeOf('object')
-        expect(fakeListSortable.items).toStrictEqual(document.querySelectorAll('#fakeList li'))
+        expect(fakeListSortable._items).toBeTypeOf('object')
+        expect(fakeListSortable._items).toStrictEqual(document.querySelectorAll('#fakeList li'))
     })
 
 })
@@ -86,7 +84,7 @@ describe('Mousedown & Mouseup', () => {
 
 })
 
-describe('#Drag()', () => {
+describe('Drag()', () => {
 
     test('Add the [aria-grabbed] attribute', () => {
         expect(fakeListItem.hasAttribute('aria-grabbed')).toBeFalsy()
@@ -103,12 +101,12 @@ 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 })
     })
 
 })
 
-describe('#Drop()', () => {
+describe('Drop()', () => {
 
     test('Remove the [aria-grabbed] attribute', () => {
         expect(fakeListItem.hasAttribute('aria-grabbed')).toBeTruthy()
@@ -121,26 +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 })
-    })
-
-})
-
-describe('#Move()', () => {
-
-    test('Go down on click and emmit the sortable:moved event', () => {
-        const eventSpy = vi.spyOn(fakeListSortable, 'emmitEvent')
-        fireEvent(fakeListItem.querySelector('[data-go=down]'), new MouseEvent('click'))
-        expect(fakeListItem).toBe(document.getElementById('fakeList').children[1])
-        expect(eventSpy).toHaveBeenCalledWith('moved', { current: fakeListItem, items: fakeListSortable.items })
-    })
-
-    test('Go up on click and emmit the sortable:moved event', () => {
-        const eventSpy = vi.spyOn(fakeListSortable, 'emmitEvent')
-        expect(fakeListItem).toBe(document.getElementById('fakeList').children[1])
-        fireEvent(fakeListItem.querySelector('[data-go=up]'), new MouseEvent('click'))
-        expect(fakeListItem).toBe(document.getElementById('fakeList').children[0])
-        expect(eventSpy).toHaveBeenCalledWith('moved', { 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.15",
+    "version": "0.1.17",
     "description": "A vanilla frontend framework",
     "keywords": [
         "html5",