@natachah/vanilla-frontend 0.0.2

package/js/_sortable.js

@@ -0,0 +1,143 @@
+/**
+ * ------------------------------------------------------------------
+ * Sortable
+ * ------------------------------------------------------------------
+ * This class enable the functionality to sort a list or a table
+ * 
+ * @author Natacha Herth
+ * @version 0.0.1
+ * @copyright Natacha Herth, design & web development
+ */
+
+import BaseComponent from './utilities/_base-component'
+import ErrorMessage from './utilities/_error'
+
+export default class Sortable extends BaseComponent {
+
+    /**
+     * Creates an instance
+     *
+     * @param {HTMLElement} el - The HTML element
+     * @param {object} options - The custom options
+     * @constructor
+     */
+    constructor(el, options = {}) {
+
+        // Run the SUPER constructor from BaseComponent
+        super(el, options)
+
+        // Define the properties
+        this._withHandle = this._element.querySelector('[data-handle]') ? true : false
+        this._current = null
+
+        // Init the event listener
+        this.#init()
+
+    }
+
+    /**
+     * Init the event listener
+     * 
+     * @private
+     */
+    #init() {
+
+        // Prevent default animation at the drop
+        this._element.addEventListener('dragover', (e) => e.preventDefault())
+
+        // Events directly on the items 
+        this.items.forEach((item) => {
+
+            // Toggle the [dragable] attribute
+            item.addEventListener('mousedown', (e) => { if (!this._withHandle || e.target.hasAttribute('data-handle')) item.draggable = true })
+            item.addEventListener('mouseup', () => item.draggable = false)
+
+            // Drag and drop events
+            item.addEventListener('dragstart', () => this.#drag(item))
+            item.addEventListener('dragenter', () => this.#move(item))
+            item.addEventListener('dragend', () => this.#drop(item))
+
+        })
+
+    }
+
+    /**
+     * Get the list of the items
+     * 
+     * @return {object}
+     */
+    get items() {
+        return this._element.querySelectorAll('[draggable]')
+    }
+
+    /**
+     * Drag an item
+     * 
+     * @param {HTMLElement} item - The current item
+     * @private
+     */
+    #drag(item) {
+
+        // Check for errors
+        if (!(item instanceof HTMLElement)) throw new Error(ErrorMessage.instanceOf('item', 'HTMLElement'))
+
+        // Prevent drag on text selection
+        if (!item.draggable) return
+
+        // Set the current property
+        this._current = item
+
+        // Add the attribute on the current
+        item.setAttribute('aria-grabbed', true)
+
+        // Run custom event
+        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
+     */
+    #move(item) {
+
+        // Check for errors
+        if (!(item instanceof HTMLElement)) throw new Error(ErrorMessage.instanceOf('item', 'HTMLElement'))
+
+        // Do nothing if there is NO current
+        if (!this._current) return
+
+        // Move the item
+        const position = item === this._element.firstElementChild ? 'beforebegin' : 'afterend'
+        item.insertAdjacentElement(position, this._current)
+
+    }
+
+    /**
+     * Drop an item
+     * 
+     * @param {HTMLElement} item - The current item
+     * @private
+     */
+    #drop(item) {
+
+        // Check for errors
+        if (!(item instanceof HTMLElement)) throw new Error(ErrorMessage.instanceOf('item', 'HTMLElement'))
+
+        // Reset the current property
+        this._current = null
+
+        // Remove the attribute on the current
+        item.removeAttribute('aria-grabbed', true)
+
+        // Reset draggable attribute
+        item.draggable = false
+
+        // Run custom event
+        this.emmitEvent('drop', { items: this.items, current: item })
+
+    }
+
+}

package/js/_tabpanel.js

@@ -0,0 +1,88 @@
+/**
+ * ------------------------------------------------------------------
+ * Tabpanel
+ * ------------------------------------------------------------------
+ * This class enable the functionality to toggles multiple tabpanel
+ * 
+ * @author Natacha Herth
+ * @version 0.0.1
+ * @copyright Natacha Herth, design & web development
+ * 
+ */
+
+import BaseComponent from './utilities/_base-component'
+import ErrorMessage from "./utilities/_error"
+
+export default class Tabpanel extends BaseComponent {
+
+    /**
+     * Creates an instance
+     *
+     * @param {HTMLElement} el - The HTML element
+     * @param {object} options - The custom options
+     * @constructor
+     */
+    constructor(el, options = {}) {
+
+        // Run the SUPER constructor from BaseComponent
+        super(el, options)
+
+        // Check for errors
+        if (!el.querySelector('[role="tab"]')) throw new Error(ErrorMessage.exist('button [role="tab"]'))
+        if (!el.querySelector('[role="tabpanel"]')) throw new Error(ErrorMessage.exist('div [role="tabpanel"]'))
+
+        // Define the properties
+        this._tabs = this._element.querySelectorAll('[role="tab"]')
+        this._panels = this._element.querySelectorAll('[role="tabpanel"]')
+        this._current = null
+
+        // Init the event listener
+        this.#init()
+
+    }
+
+    /**
+     * Init the event listener
+     * 
+     * @private
+     */
+    #init() {
+
+        // Init first
+        if (!this._current) this.#change(this._element.querySelector('[role="tab"][aria-selected="true"]') ?? this._tabs[0])
+
+        // CLICK tabs
+        this._tabs.forEach(tab => tab.addEventListener('click', () => this.#change(tab)))
+
+    }
+
+    /**
+     * Change the tabpanel
+     * @param {HTMLElement} button - A <button> element
+     * 
+     * @private
+     */
+    #change(button) {
+
+        // Stop here if the tab is already the current one
+        if (button === this._current) return
+
+        // Get the [aria-controls] atribute
+        const arialist = button.hasAttribute('aria-controls') ? button.getAttribute('aria-controls') : null
+        if (!arialist) return
+
+        // Change the current current
+        this._current = button
+
+        // Change the [aria-selected] attribute on tabs
+        this._tabs.forEach((tab) => tab.setAttribute('aria-selected', tab === this._current))
+
+        // Change the [hidden] attribute on tabpanels
+        this._panels.forEach((panel) => panel.hidden = panel.id !== arialist)
+
+        // Run event after changed
+        this.emmitEvent('changed', { current: this._current })
+
+    }
+
+}

package/js/_toggle.js

@@ -0,0 +1,123 @@
+/**
+ * ------------------------------------------------------------------
+ * Toggle
+ * ------------------------------------------------------------------
+ * This class enable the functionality to un/collapse some element by another
+ * 
+ * @author Natacha Herth
+ * @version 0.0.1
+ * @copyright Natacha Herth, design & web development
+ * 
+ * * NOTE: Check availability of the ariaControlsElements to select the #ids
+ */
+
+import BaseComponent from './utilities/_base-component'
+
+export default class Toggle extends BaseComponent {
+
+    /**
+     * Creates an instance
+     *
+     * @param {HTMLElement} el - The HTML element
+     * @param {object} options - The custom options
+     * @constructor
+     */
+    constructor(el, options = {}) {
+
+        // Run the SUPER constructor from BaseComponent
+        super(el, options)
+
+        // Define the properties
+        this._type = this._element.tagName == 'SELECT' ? 'select' : this._element.getAttribute('type') ?? 'button'
+
+        const arialist = this._element.hasAttribute('aria-controls') ? this._element.getAttribute('aria-controls').split(' ').filter(id => document.getElementById(id)) : []
+        this._toggables = arialist.map(id => document.getElementById(id))
+
+        // Init the event listener
+        this.#init()
+
+    }
+
+    /**
+     * Init the event listener
+     * 
+     * @private
+     */
+    #init() {
+
+        // On first load run method #toggle()
+        this.#toggle()
+
+        if (this._type === 'button') {
+
+            // CLICK for <button> and change the [aria-pressed] attribute
+            this._element.addEventListener('click', () => {
+                this._element.setAttribute('aria-pressed', this.value === 'false')
+                this.#toggle()
+            })
+
+        } else {
+
+            // CHANGE for <checkbox> <radio> <select>
+            this._element.addEventListener('change', () => this.#toggle())
+
+        }
+
+    }
+
+    /**
+     * Define the value: <checkbox> and <radio> = :checked, <button> = [aria-pressed], <else> = value
+     * 
+     * @return {string}
+     * @private
+     */
+    get value() {
+
+        switch (this._type) {
+            case 'button':
+                return (this._element.getAttribute('aria-pressed') === 'true').toString()
+
+            case 'checkbox':
+            case 'radio':
+                return this._element.checked.toString()
+
+            default:
+                return this._element.value
+        }
+
+    }
+
+    /**
+     * Toggle the [hidden] and [aria-expanded] attributes
+     * 
+     * @private
+     */
+    #toggle() {
+
+        // Define the group value for <select>
+        const groupValue = this._type === 'select' && this._element.querySelector('option:checked') ? this._element.querySelector('option:checked').parentElement.label ?? null : null
+
+        // Check for each toggables elements
+        this._toggables.forEach(toggable => {
+
+            // Define if there is a [data-toggle-when] attribute, otherwise check on the true value
+            const toggleValue = toggable.getAttribute('data-toggle-when') ?? 'true'
+
+            // Toggle the [hidden] attribute
+            toggable.hidden = this.value !== toggleValue && groupValue !== toggleValue
+
+        })
+
+        // Update the [aria-expanded] attribute if there is any toggables visible
+        const areAllHidden = this._toggables.every(el => el.hidden)
+        this._element.setAttribute('aria-expanded', !areAllHidden)
+
+        // If the _element is <radio>, emmit event 'change' on <radio> with same [name]
+        if (this._type === 'radio' && this._element.checked) document.querySelectorAll(`input[name="${this._element.name}"]:not(:checked)`).forEach(radio => radio.dispatchEvent(new Event('change')))
+
+        // Emmit event
+        this.emmitEvent('changed')
+
+    }
+
+}

package/js/_tree.js

@@ -0,0 +1,85 @@
+/**
+ * ------------------------------------------------------------------
+ * Tree
+ * ------------------------------------------------------------------
+ * This class enable the functionality to expand/contract element as a tree
+ * 
+ * @author Natacha Herth
+ * @version 0.0.1
+ * @copyright Natacha Herth, design & web development
+ */
+
+import BaseComponent from './utilities/_base-component'
+
+export default class Tree extends BaseComponent {
+
+    /**
+     * Creates an instance
+     *
+     * @param {HTMLElement} el - The HTML element
+     * @param {object} options - The custom options
+     * @constructor
+     */
+    constructor(el, options = {}) {
+
+        // Run the SUPER constructor from BaseComponent
+        super(el, options)
+
+        // Define the properties
+        this._type = this._element.role == 'tree' ? 'list' : 'grid'
+
+        this._withHandle = this._element.querySelector('[data-handle]') ? true : false
+
+        this._items = this._element.querySelectorAll('[aria-expanded]')
+
+        // Init the event listener
+        this.#init()
+
+    }
+
+    /**
+     * Init the event listener
+     * 
+     * @private
+     */
+    #init() {
+
+        this._items.forEach(item => item.addEventListener('click', (e) => {
+            if (!this._withHandle || e.target.hasAttribute('data-handle')) {
+                e.stopPropagation()
+                this.#toggle(item)
+            }
+        }))
+
+    }
+
+    /**
+     * Toggle the [hidden] and [aria-expanded] attributes
+     * 
+     * @param {HTMLElement} item - The current item
+     * @private
+     */
+    #toggle(item) {
+
+        // Check for errors
+        if (!(item instanceof HTMLElement)) throw new Error(ErrorMessage.instanceOf('item', 'HTMLElement'))
+
+        // Update the [aria-expanded]
+        const isExpanded = item.getAttribute('aria-expanded') === 'true'
+        item.setAttribute('aria-expanded', !isExpanded)
+
+        // Get children to toggle
+        const children = item.hasAttribute('aria-owns') ? item.getAttribute('aria-owns').split(' ').filter(id => document.getElementById(id)).map(id => document.getElementById(id)) : []
+
+        // Toggle the [hidden] attribute on the children
+        children.forEach(child => child.hidden = isExpanded)
+
+        // If type grid, collapse the subchildren
+        if (this._type === 'grid' && isExpanded) children.filter(child => child.hasAttribute('aria-expanded') && child.getAttribute('aria-expanded') === 'true').forEach(child => this.#toggle(child))
+
+        // Emmit event
+        this.emmitEvent('changed', { isOpen: !isExpanded })
+
+    }
+
+}

package/js/tests/autofill.test.js

@@ -0,0 +1,157 @@
+/**
+ * ------------------------------------------------------------------
+ * TEST for the _autofill.js
+ * ------------------------------------------------------------------
+ * The test will take care of:
+ * - Constructor: Passing the correct parameters 
+ * - Constructor: Return the correct properties
+ * - #Init(): Change <select> will set a value in another input
+ * - #Init(): Change <input> will set a value in another input
+ * - #Init(): Change <input type="file"> will set a value in another input
+ * - #ByOption(): Emmit the autofill:changed event
+ * - #byFile(): Emmit the autofill:changed event
+ */
+
+import { describe, test, expect, beforeAll, vi } from "vitest"
+import { fireEvent } from "@testing-library/dom"
+import Autofill from "../_autofill"
+import ErrorMessage from "../utilities/_error"
+
+let fakeSelect, fakeList, fakeFile, fakeAutofillSelect, fakeAutofillList, fakeAutofillFile
+/**
+ * Before all tests
+ * 
+ */
+
+beforeAll(() => {
+
+    document.body.innerHTML =
+        '<select id="fakeSelect" aria-controls="fakeSelectInput">' +
+        '<option value="null">--</option>' +
+        '<option value="cat" data-id="1">Cat</option>' +
+        '</select>' +
+        '<input id="fakeSelectInput" type="text" data-autofill="id">' +
+
+        '<input id="fakeList" list="fakeDataList" aria-controls="fakeListInput">' +
+        '<datalist id="fakeDataList">' +
+        '<option data-id="1" value="cat">' +
+        '<option data-id="2" value="dog">' +
+        '</datalist>' +
+        '<input id="fakeListInput" type="text" data-autofill="id">' +
+
+        '<input id="fakeFile" type="file" aria-controls="fakeFileInput fakeFileName fakeFileExt">' +
+        '<input id="fakeFileInput" type="text" data-autofill="name" >' +
+        '<input id="fakeFileName" type="text" data-autofill="filename">' +
+        '<input id="fakeFileExt" type="text" data-autofill="extension">'
+
+    fakeSelect = document.getElementById('fakeSelect')
+    fakeList = document.getElementById('fakeList')
+    fakeFile = document.getElementById('fakeFile')
+
+    fakeAutofillSelect = new Autofill(fakeSelect)
+    fakeAutofillList = new Autofill(fakeList)
+    fakeAutofillFile = new Autofill(fakeFile)
+
+})
+
+describe('Structure of the class', () => {
+
+    test('Constructor: Passing the correct parameters', () => {
+        expect(() => new Autofill('make-error')).toThrowError(ErrorMessage.instanceOf('el', 'HTMLElement'))
+        expect(() => new Autofill(document.createElement('button'))).toThrowError(ErrorMessage.typeOf('el', 'input|select'))
+        expect(() => new Autofill(document.createElement('select'))).toThrowError(ErrorMessage.withAttribute('el', 'aria-controls'))
+        const fakeWrongInput = document.createElement('input')
+        fakeWrongInput.setAttribute('aria-controls', 'something')
+        fakeWrongInput.type = 'checkbox'
+        expect(() => new Autofill(fakeWrongInput)).toThrowError(ErrorMessage.typeOf('type', 'text|file'))
+        fakeWrongInput.type = 'text'
+        expect(() => new Autofill(fakeWrongInput)).toThrowError(ErrorMessage.withAttribute('input', 'list'))
+    })
+
+    test('Constructor: Return the correct properties', () => {
+        expect(fakeAutofillSelect).toHaveProperty('_fields')
+        expect(fakeAutofillSelect).toHaveProperty('_type')
+        expect(fakeAutofillSelect._fields).toBeTypeOf('object')
+        expect(fakeAutofillSelect._fields).toStrictEqual([...document.querySelectorAll('#fakeSelectInput')])
+        expect(fakeAutofillSelect._type).toBe('select')
+        expect(fakeAutofillList._fields).toBeTypeOf('object')
+        expect(fakeAutofillList._fields).toStrictEqual([...document.querySelectorAll('#fakeListInput')])
+        expect(fakeAutofillList._type).toBe('datalist')
+        expect(fakeAutofillFile._fields).toBeTypeOf('object')
+        expect(fakeAutofillFile._fields).toStrictEqual([...document.querySelectorAll('#fakeFileInput,#fakeFileName,#fakeFileExt')])
+        expect(fakeAutofillFile._type).toBe('file')
+    })
+
+})
+
+describe('#Init()', () => {
+
+    test('Change <select> will set a value in another input', () => {
+        const fakeInput = document.getElementById('fakeSelectInput')
+        expect(fakeSelect.value).toBe('null')
+        expect(fakeInput.value).toBe('')
+        fireEvent.change(fakeSelect, { target: { value: 'cat' } })
+        expect(fakeSelect.value).toBe('cat')
+        expect(fakeInput.value).toBe('1')
+        fireEvent.change(fakeSelect, { target: { value: 'null' } })
+        expect(fakeSelect.value).toBe('null')
+        expect(fakeInput.value).toBe('')
+    })
+
+    test('Change <input> will set a value in another input', () => {
+        const fakeInput = document.getElementById('fakeListInput')
+        expect(fakeList.value).toBe('')
+        expect(fakeInput.value).toBe('')
+        fireEvent.change(fakeList, { target: { value: 'dog' } })
+        expect(fakeList.value).toBe('dog')
+        expect(fakeInput.value).toBe('2')
+        fireEvent.change(fakeList, { target: { value: 'cat' } })
+        expect(fakeList.value).toBe('cat')
+        expect(fakeInput.value).toBe('1')
+        fireEvent.change(fakeList, { target: { value: '' } })
+        expect(fakeList.value).toBe('')
+        expect(fakeInput.value).toBe('')
+    })
+
+    test('Change <input type="file"> will set a value in another input', () => {
+        const fakeFileInput = document.getElementById('fakeFileInput')
+        const fakeFileName = document.getElementById('fakeFileName')
+        const fakeFileExt = document.getElementById('fakeFileExt')
+        const fakeImage = new File(["my testing file"], "my-file.jpg", {
+            type: "image/jpeg",
+        })
+        expect(fakeFileInput.value).toBe('')
+        expect(fakeFileName.value).toBe('')
+        expect(fakeFileExt.value).toBe('')
+        fireEvent.change(fakeFile, { target: { files: [fakeImage] } })
+        expect(fakeFileInput.value).toBe('my-file.jpg')
+        expect(fakeFileName.value).toBe('my-file')
+        expect(fakeFileExt.value).toBe('jpg')
+    })
+
+})
+
+describe('#ByOption()', () => {
+
+    test('Emmit the autofill:changed event', () => {
+        const eventSpy = vi.spyOn(fakeAutofillSelect, 'emmitEvent')
+        expect(eventSpy).not.toHaveBeenCalled()
+        fireEvent.change(fakeSelect, { target: { value: 'cat' } })
+        expect(eventSpy).toHaveBeenCalledWith('changed', { current: document.querySelector('option[value="cat"]') })
+    })
+
+})
+
+describe('#ByFile()', () => {
+
+    test('Emmit the autofill:changed event', () => {
+        const fakeImage = new File(["my testing file"], "my-file.jpg", {
+            type: "image/jpeg",
+        })
+        const eventSpy = vi.spyOn(fakeAutofillFile, 'emmitEvent')
+        expect(eventSpy).not.toHaveBeenCalled()
+        fireEvent.change(fakeFile, { target: { files: [fakeImage] } })
+        expect(eventSpy).toHaveBeenCalledWith('changed', { current: fakeImage })
+    })
+
+})