@natachah/vanilla-frontend 0.1.10 → 0.1.12

package/docs/pages/components/drawer.html

@@ -65,8 +65,49 @@
 
         <h2>Javascript</h2>
         <p>This component is mostly in javascript, to use it you must import the javascript file and create a new Drawer object.</p>
-        <p>You can customize the breakpoint when initiate the component.</p>
-        <p>You can have a <b>Backdrop</b> if you want to make it more like a drawer opening on the front of the content.</p>
+        <p>You can have a <b>Backdrop</b> if you want to make it more like a drawer opening on the front of the content, you juste need a <code>#backdrop</code> somewhere on your page.</p>
+
+        <h3>Options</h3>
+
+        <table>
+            <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Description</th>
+                    <th>Value</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td data-label="Name">
+                        <p>breakpoint</p>
+                    </td>
+                    <td data-label="Description">
+                        <p>The breakpoint to open/close the drawer</p>
+                    </td>
+                    <td data-label="Value">
+                        <p><code>960</code> as an <code>int</code></p>
+                    </td>
+                </tr>
+                <tr>
+                    <td data-label="Name">
+                        <p>cookie</p>
+                    </td>
+                    <td data-label="Description">
+                        <p>The cookie name to save if you want to keep it open/close on refresh</p>
+                    </td>
+                    <td data-label="Value">
+                        <p><code>false</code> by default, or a <code>string</code></p>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+
+        <doc-code data-type="js">
+            import Drawer from '@natachah/vanilla-frontend/js/utilities/_drawer.js'
+            const drawer = document.getElementById('drawer')
+            if (drawer) new Drawer(drawer, { breakpoint : 960, cookkie: '_drawer-cookie' })
+        </doc-code>
 
         <blockquote>
             <p>Main use case are sidebar menu or main navigation menu.</p>

package/docs/pages/components/list.html

@@ -62,7 +62,8 @@
                 <li><button disabled>List B (button disabled)</button></li>
                 <li>List C</li>
                 <li><a role="button" href="#">List D (link)</a></li>
-                <li><a role="button">List E (link disabled)</a></li>
+                <li><span>List E</span><a role="button" href="#">Not only child (link)</a></li>
+                <li><a role="button">List F (link disabled)</a></li>
             </ul>
         </doc-demo>
 
@@ -126,7 +127,7 @@
             </doc-code>
             <doc-code id="scss" data-type="scss" role="tabpanel">
                 $outline-variations: (
-                    list
+                list
                 );
             </doc-code>
         </div>
@@ -161,7 +162,7 @@
             </doc-code>
             <doc-code id="scss" data-type="scss" role="tabpanel">
                 $color-variations: (
-                    list: (primary)
+                list: (primary)
                 );
             </doc-code>
         </div>

package/docs/pages/javascript/sortable.html

@@ -95,6 +95,43 @@
             </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 id="events">Events</h3>

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.10
+                                0.1.12
                             </span>
                         </li>
                         <li>

package/js/_drawer.js

@@ -12,11 +12,13 @@
 
 import BaseComponent from './utilities/_base-component'
 import ErrorMessage from "./utilities/_error"
+import Cookie from "./utilities/_cookie"
 
 export default class Drawer extends BaseComponent {
 
     static OPTIONS = {
         breakpoint: 960,
+        cookie: false
     }
 
     /**
@@ -44,6 +46,8 @@ export default class Drawer extends BaseComponent {
 
         this._focus = this._element.querySelector('a,button') ?? null
 
+        this._cookie = this._options.cookie ? new Cookie(this._options.cookie) : null
+
         // Init the event listener
         this.#init()
 
@@ -56,30 +60,50 @@ export default class Drawer extends BaseComponent {
      */
     #init() {
 
-        // On load check if need to open/close the drawer
-        if (window.innerWidth > this._options.breakpoint && !this._isOpen) this.toggle()
+        const isOpenValue = window.innerWidth > this._options.breakpoint && !this._isOpen
+
+        // Init the default cookie
+        if (this._cookie && !this._cookie.has('open')) this._cookie.set({ 'open': isOpenValue })
+
+        // Init the default open or close
+        if (!this._cookie || (this._cookie.get('open') && !this._isOpen)) this.toggle()
 
         // On resize check if need to open/close the drawer
         window.onresize = () => {
             clearTimeout(this._timeout)
             this._timeout = setTimeout(() => {
-                if ((window.innerWidth <= this._options.breakpoint && this._isOpen) || (window.innerWidth > this._options.breakpoint && !this._isOpen)) this.toggle()
+                if ((window.innerWidth > this._options.breakpoint && !this._isOpen) || (window.innerWidth < this._options.breakpoint && this._isOpen)) {
+                    this.toggle()
+                    this.#resetCookie()
+                }
             }, 250)
         }
 
         // On click on the button toggle the drawer
-        this._buttons.forEach((button) => button.addEventListener('click', () => this.toggle(true)))
+        this._buttons.forEach((button) => button.addEventListener('click', () => {
+            this.toggle()
+            if (window.innerWidth > this._options.breakpoint) this.#resetCookie()
+            if (this._focus && this._isOpen) this._focus.focus()
+        }))
 
         // On click on the backdrop, close the drawer
         if (this._backdrop) this._backdrop.addEventListener('click', () => this.toggle())
 
     }
 
+    /**
+     * Reset the cookie
+     * 
+     */
+    #resetCookie() {
+        if (this._cookie) this._cookie.set({ 'open': this._isOpen })
+    }
+
     /**
      * Toggle the drawer
      * 
      */
-    toggle(enableFocus = false) {
+    toggle() {
 
         // Change the state
         this._isOpen = !this._isOpen
@@ -93,9 +117,7 @@ export default class Drawer extends BaseComponent {
         // Change the [hidden] attribute on the drawer
         this._element.hidden = !this._isOpen
 
-        // Toggle the focus
-        if (enableFocus && this._focus && this._isOpen) this._focus.focus()
-
     }
 
+
 }

package/js/_sortable.js

@@ -53,9 +53,12 @@ export default class Sortable extends BaseComponent {
 
             // Drag and drop events
             item.addEventListener('dragstart', () => this.#drag(item))
-            item.addEventListener('dragenter', () => this.#move(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')))
+
         })
 
     }
@@ -100,7 +103,7 @@ export default class Sortable extends BaseComponent {
      * @param {HTMLElement} item - The current item
      * @private
      */
-    #move(item) {
+    #dragging(item) {
 
         // Check for errors
         if (!(item instanceof HTMLElement)) throw new Error(ErrorMessage.instanceOf('item', 'HTMLElement'))
@@ -142,4 +145,26 @@ export default class Sortable extends BaseComponent {
 
     }
 
+    /**
+     * 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/sortable.test.js

@@ -12,6 +12,8 @@
  * - #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
  */
 
 import { describe, test, expect, beforeAll, vi } from "vitest"
@@ -29,9 +31,9 @@ beforeAll(() => {
 
     document.body.innerHTML =
         '<ul id="fakeList">' +
-        '<li draggable="false">One</li>' +
-        '<li draggable="false">Two</li>' +
-        '<li draggable="false">Three</li>' +
+        '<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>' +
         '</ul>' +
         '<table id="fakeTable">' +
         '<tr draggable="false"><td data-handle="sortable">DRAG</td><td>One</td></tr>' +
@@ -41,7 +43,7 @@ beforeAll(() => {
 
     fakeListSortable = new Sortable(document.getElementById('fakeList'))
     fakeTableSortable = new Sortable(document.getElementById('fakeTable'))
-    fakeListItem = document.querySelector('#fakeList li')
+    fakeListItem = document.getElementById('first')
 
 })
 
@@ -122,4 +124,23 @@ describe('#Drop()', () => {
         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 })
+    })
+
 })

package/package.json

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

package/scss/abstracts/_mixins.scss

@@ -129,7 +129,7 @@
         margin: 0;
         text-align: var(--list-text-align, left);
 
-        &:has(a[role=button]:only-child, button:only-child) > * {
+        & > *:is(a[role=button]:only-child, button:only-child) {
             display: block;
             width: 100%;
             text-align: var(--list-text-align, left);