@natachah/vanilla-frontend 0.0.2

package/js/_autofill.js

@@ -0,0 +1,131 @@
+/**
+ * ------------------------------------------------------------------
+ * Auto fill
+ * ------------------------------------------------------------------
+ * This class enable the functionality to automatic filling some fields from another
+ * 
+ * @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 Autofill 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.tagName !== 'SELECT' && el.tagName !== 'INPUT') throw new Error(ErrorMessage.typeOf('el', 'input|select'))
+        if (!el.hasAttribute('aria-controls')) throw new Error(ErrorMessage.withAttribute('el', 'aria-controls'))
+        if (el.tagName === 'INPUT') {
+            if (el.type !== 'text' && el.type !== 'file') throw new Error(ErrorMessage.typeOf('type', 'text|file'))
+            if (el.type === 'text' && !el.hasAttribute('list')) throw new Error(ErrorMessage.withAttribute('input', 'list'))
+        }
+
+        // Define the properties
+        this._type = el.tagName === 'SELECT' ? 'select' : el.type === 'file' ? 'file' : 'datalist'
+
+        this._fields = el.hasAttribute('aria-controls') ? el.getAttribute('aria-controls').split(' ').filter(id => document.getElementById(id)).map(id => document.getElementById(id)) : []
+
+        // Init the event listener
+        this.#init()
+
+    }
+
+    /**
+     * Init the event listener
+     * 
+     * @private
+     */
+    #init() {
+
+        // CHANGE the element
+        this._element.addEventListener('change', () => {
+
+            switch (this._type) {
+                case 'select':
+                    this.#byOption(this._element.options[this._element.selectedIndex])
+                    break
+                case 'datalist':
+                    this.#byOption(document.querySelector(`#${this._element.getAttribute('list')} [value="${this._element.value}"]`))
+                    break
+                case 'file':
+                    this.#byFile(this._element.files[0])
+                    break
+            }
+
+        })
+
+    }
+
+    /**
+     * Set value from a <option>
+     * 
+     * @param {string} option - Current option selected
+     * @private
+     */
+    #byOption(option) {
+
+        this._fields.forEach(field => {
+            const attribute = `data-${field.getAttribute('data-autofill')}`
+            field.value = option && option.hasAttribute(attribute) ? option.getAttribute(attribute) : ''
+        })
+
+        // Emmit event
+        this.emmitEvent('changed', { current: option })
+
+    }
+
+    /**
+     * Set value from an uploaded file
+     * 
+     * @param {File} file - Current file selected
+     * @private
+     */
+    #byFile(file) {
+
+        // Clean data
+        const extension = file.name.split('.').pop()
+        const name = file.name.replace(`.${extension}`, '')
+
+        this._fields.forEach(field => {
+
+            // Define attribute
+            const attribute = field.getAttribute('data-autofill')
+
+            // Define the value
+            let value
+            switch (attribute) {
+                case 'filename':
+                    value = name
+                    break
+                case 'extension':
+                    value = extension
+                    break
+                default:
+                    value = file[attribute] ?? ''
+            }
+
+            // Set the value
+            field.value = value
+
+        })
+
+        // Emmit event
+        this.emmitEvent('changed', { current: file })
+
+    }
+
+}

package/js/_check-all.js

@@ -0,0 +1,77 @@
+/**
+ * ------------------------------------------------------------------
+ * Check all
+ * ------------------------------------------------------------------
+ * This class enable the functionality to un/check a list of checkboxes
+ * 
+ * @author Natacha Herth
+ * @version 0.0.1
+ * @copyright Natacha Herth, design & web development
+ */
+
+import BaseComponent from './utilities/_base-component'
+
+export default class CheckAll 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._checkboxes = document.querySelectorAll(`input[type="checkbox"][name="${this._element.value}"]`)
+
+        // Init the event listener
+        this.#init()
+
+    }
+
+    /**
+     * Init the event listener
+     * 
+     * @private
+     */
+    #init() {
+
+        // Check the "check all" checkbox by default is needed
+        this._element.checked = this.number.total === this.number.checked
+
+        // CLICK on "check all"
+        this._element.addEventListener('change', () => {
+            this._checkboxes.forEach((checkbox) => checkbox.checked = this._element.checked)
+        })
+
+        // CLICK on "checkboxes"
+        this._checkboxes.forEach(checkbox => {
+            checkbox.addEventListener('change', () => this._element.checked = this.number.total === this.number.checked)
+        })
+
+    }
+
+    /**
+     * Get the number of checkboxes as total, checked and unchecked
+     * 
+     * @returns {object}
+     */
+    get number() {
+
+        let checkboxes = {
+            total: this._checkboxes.length,
+            checked: 0,
+            unchecked: 0
+        }
+
+        this._checkboxes.forEach((checkbox) => checkbox.checked ? checkboxes.checked++ : checkboxes.unchecked++)
+
+        return checkboxes
+
+    }
+
+}

package/js/_comfort.js

@@ -0,0 +1,174 @@
+/**
+ * ------------------------------------------------------------------
+ * Comfort
+ * ------------------------------------------------------------------
+ * This class create and manage the cookies for saving theme and style changes for visual comfort
+ * 
+ * @author Natacha Herth
+ * @version 0.0.1
+ * @copyright Natacha Herth, design & web development
+ */
+
+import Cookie from "./utilities/_cookie"
+import ErrorMessage from "./utilities/_error"
+
+export default class Comfort extends Cookie {
+
+    /**
+     * Creates an instance
+     *
+     * @param {string} name - The name of the cookie
+     * @constructor
+     */
+    constructor(name = '_comfort') {
+
+        // Run the SUPER constructor from Cookie
+        super(name)
+
+        // Define the properties
+        this._buttons = {
+            theme: document.querySelectorAll('body [data-theme]'),
+            style: document.querySelectorAll('body [data-style]'),
+        }
+
+        // Init the cookie
+        this.#init()
+
+    }
+
+    /**
+     * Init the event listener
+     * 
+     * @private
+     */
+    #init() {
+
+        // If the cookie is NOT empty, toggle the attributes on <html> <body> and <button>
+        if (Object.keys(this.value).length !== 0) {
+            this.#toggleTheme()
+            this.#toggleStyle()
+        }
+
+        // CLICK on theme buttons
+        this._buttons.theme.forEach((button) => button.addEventListener('click', () => this.setTheme(button.value)))
+
+        // CLICK on style buttons
+        this._buttons.style.forEach((button) => button.addEventListener('click', () => this.setStyle(button.getAttribute('data-style'), button.value)))
+
+    }
+
+    /**
+     * Toggle the [data-theme] attribute on the <html>
+     * and the [aria-pressed] attribute on the <button>
+     * 
+     * @private
+     */
+    #toggleTheme() {
+
+        // Do nothing if there is no theme in the cookie
+        if (!this.has('theme')) return
+
+        // Set the [data-theme] attribute on the <html>
+        document.documentElement.setAttribute('data-theme', this.get('theme'))
+
+        // Set the [aria-pressed] attribute on the <button>
+        this._buttons.theme.forEach(button => button.setAttribute('aria-pressed', button.value === this.get('theme')))
+
+    }
+
+    /**
+     * Toggle the [style] attribute on the <body>
+     * and the [aria-pressed] attribute on the <button>
+     * 
+     * @private
+     */
+    #toggleStyle() {
+
+        // Get the style object stored in cookie
+        const style = this.get('style')
+
+        // Do nothing if there is no style in the cookie
+        if (!style || style.length === 0) return
+
+        // Set the [style] attribute on the <body>
+        const styleAsString = Object.entries(style).map(([k, v]) => `${k}:${v}`).join(';')
+        document.body.setAttribute('style', styleAsString)
+
+        // Set the [aria-pressed] attribute on the <button>
+        this._buttons.style.forEach(button => {
+            const attribute = button.getAttribute('data-style')
+            button.setAttribute('aria-pressed', style.hasOwnProperty(attribute) && style[attribute] === button.value)
+        })
+
+    }
+
+    /**
+     * Save the theme inside the cookie
+     * 
+     * @param {string} value - Name of the theme
+     */
+    setTheme(value) {
+
+        // Check for errors
+        if (typeof value !== 'string') throw new Error(ErrorMessage.typeOf('value', 'string'))
+
+        // Do nothing if it's already the current theme
+        if (this.get('theme') === value) return
+
+        // Save the cookie
+        this.set({ ...this.value, theme: value })
+
+        // Then toggle theme
+        this.#toggleTheme()
+
+    }
+
+    /**
+     * Save the style inside the cookie
+     * 
+     * @param {string} name - Name of the CSS property
+     * @param {string} value - Value of the CSS property
+     */
+    setStyle(name, value) {
+
+        // Check for errors
+        if (typeof name !== 'string') throw new Error(ErrorMessage.typeOf('name', 'string'))
+        if (typeof value !== 'string') throw new Error(ErrorMessage.typeOf('value', 'string'))
+
+        // Get the style inside the cookie
+        const style = this.get('style')
+
+        // Do nothing if it's already the current style
+        if (style && style.hasOwnProperty(name) && style[name] === value) return
+
+        // Save the cookie
+        this.set({
+            ...this.value,
+            style: { ...this.value.style, ...{ [name]: value } }
+        })
+
+        // Then toggle style
+        this.#toggleStyle()
+
+    }
+
+    /**
+     * Reset the comfort cookie
+     * 
+     */
+    reset() {
+
+        // Delete the cookie
+        this.delete()
+
+        // Remove the attributes on <html> <body> and <button>
+        document.documentElement.removeAttribute('data-theme')
+        document.body.removeAttribute('style');
+
+        [...this._buttons.theme, ...this._buttons.style].forEach(button => {
+            button.removeAttribute('aria-pressed')
+        })
+
+    }
+
+}

package/js/_consent.js

@@ -0,0 +1,84 @@
+/**
+ * ------------------------------------------------------------------
+ * Consent
+ * ------------------------------------------------------------------
+ * This class create and manage the cookies for saving the consent to comply the GDPR
+ * 
+ * @author Natacha Herth
+ * @version 0.0.1
+ * @copyright Natacha Herth, design & web development
+ */
+
+import Cookie from "./utilities/_cookie"
+import Dialog from "./_dialog"
+import ErrorMessage from "./utilities/_error"
+
+export default class Consent extends Cookie {
+
+    static DEFAULT = { necessary: true }
+
+    /**
+     * Creates an instance
+     *
+     * @param {string} name - The name of the cookie
+     * @param {string} dialogID - The id of the cookies dialog
+     * @constructor
+     */
+    constructor(name = '_consent', dialogID = 'cookies') {
+
+        // Check for errors
+        if (typeof dialogID !== 'string') throw new Error(ErrorMessage.typeOf('dialogID', 'string'))
+        if (!document.getElementById(dialogID)) throw new Error(ErrorMessage.existById('dialog', dialogID))
+
+        // Run the SUPER constructor from Cookie
+        super(name)
+
+        // Define the properties
+        this._dialog = new Dialog(document.getElementById(dialogID))
+
+        // Init the cookie
+        this.#init()
+
+    }
+
+    /**
+     * Init the event listener
+     * 
+     * @private
+     */
+    #init() {
+
+        // If the cookie is empty, open the dialog
+        if (Object.keys(this.value).length === 0) this._dialog.open()
+
+        // Set the cookie via the dialog:closed event
+        this._dialog._element.addEventListener('dialog:closed', () => this.set(Consent.DEFAULT))
+
+        // Set the cookie via the dialog:submiting event
+        this._dialog._element.addEventListener('dialog:submiting', (e) => this.#setByForm(e.detail.form))
+
+    }
+
+    /**
+     * Save the consent cookie via a form with input of type checkbox
+     * 
+     * @param {HTMLElement} form 
+     * @private
+     */
+    #setByForm(form) {
+
+        // Check for errors
+        if (!(form instanceof HTMLElement)) throw new Error('Whoops, the form parameter must be an HTML Element !')
+
+        // Get all the input of type checkbox with name cookies_consent[]
+        const fields = form.querySelectorAll('input[type="checkbox"][name="cookies_consent[]"]')
+
+        // If there is some fields, add each to the variable preferences and save it
+        if (fields.length) {
+            const preferences = [...fields].reduce((obj, field) => { return { ...obj, ...Consent.DEFAULT, [field.value]: field.checked } }, {})
+            this.set(preferences)
+        }
+
+    }
+
+}

package/js/_dialog.js

@@ -0,0 +1,164 @@
+/**
+ * ------------------------------------------------------------------
+ * Dialog
+ * ------------------------------------------------------------------
+ * This class enable the functionalities for open/close/submit an HTML dialog
+ * 
+ * @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 Dialog 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._isModal = Boolean(this._element.getAttribute('aria-modal'))
+
+        this._buttons = {
+            open: document.querySelectorAll(`[aria-controls=${this._element.id}]`) ?? [],
+            close: this._element.querySelectorAll('[data-dialog-close]') ?? [],
+            submit: this._element.querySelectorAll('[type=submit]') ?? [],
+        }
+
+        this._form = this._element.querySelector('form') ?? {}
+
+        // Init the event listener
+        this.#init()
+
+    }
+
+    /**
+     * Init the event listener
+     * 
+     * @private
+     */
+    #init() {
+
+        // OPEN
+        this._buttons.open.forEach((button) => button.addEventListener('click', () => this.open()))
+
+        // CLOSE
+        this._buttons.close.forEach((button) => button.addEventListener('click', () => this.close()))
+
+        // SUBMIT
+        this._buttons.submit.forEach((button) => {
+            button.addEventListener('click', (e) => {
+                e.preventDefault()
+                this.submit()
+            })
+        })
+
+    }
+
+    /**
+     * Remove the [inert] attribute from the body if the dialog a modal
+     *
+     * @private
+     */
+    #toggleBodyAttribute() {
+        if (!this._isModal) return
+        const numberOfDialogOpen = document.querySelectorAll('dialog[open][aria-modal=true]').length
+        numberOfDialogOpen ? document.body.setAttribute('inert', true) : document.body.removeAttribute('inert')
+    }
+
+    /**
+     * Open the dialog
+     *
+     */
+    open() {
+
+        // Run event before opening, and stop if e.preventDefault()
+        const callback = this.emmitEvent('opening')
+        if (callback.defaultPrevented) return
+
+        // Open the dialog (the methode changed if it's a modal)
+        this._isModal ? this._element.showModal() : this._element.show()
+
+        // Toggle the [inert] attribute on the body
+        this.#toggleBodyAttribute()
+
+        // Run event after opened
+        this.emmitEvent('opened')
+
+    }
+
+    /**
+     * Close the dialog
+     *
+     */
+    close() {
+
+        // Run event before closing, and stop if e.preventDefault()
+        const callback = this.emmitEvent('closing')
+        if (callback.defaultPrevented) return
+
+        // Close the dialog
+        this._element.close()
+
+        // Toggle the [inert] attribute on the body
+        this.#toggleBodyAttribute()
+
+        // Run event after closed
+        this.emmitEvent('closed')
+
+    }
+
+    /**
+     * Submit the form in the dialog as default
+     *
+     */
+    submit() {
+
+        // Check for errors
+        if (!this._form.length) throw new Error(ErrorMessage.exist('form'))
+
+        // Stop if the form is invalid (Default required fields)
+        if (!this._form.reportValidity()) return
+
+        // Add [aria-busy] attribute on each submit button
+        this._buttons.submit.forEach((button) => button.setAttribute('aria-busy', true))
+
+        // Run event before submitting, and stop if e.preventDefault()
+        const callback = this.emmitEvent('submiting', { form: this._form })
+        if (callback.defaultPrevented) return
+
+        // Define if the form is submited by Javascript or default
+        if (this._form.getAttribute('method') == 'dialog') {
+
+            // Remove [aria-busy] attribute on each submit button
+            this._buttons.submit.forEach((button) => button.removeAttribute('aria-busy', true))
+
+            // Close the dialog element
+            this._element.close()
+
+            // Toggle the [inert] attribute on the body
+            this.#toggleBodyAttribute()
+
+            // Run event after submited
+            this.emmitEvent('submited', { form: this._form })
+
+        } else {
+
+            // Default <form> submit
+            this._form.submit()
+
+        }
+
+    }
+
+}