@natachah/vanilla-frontend 0.0.2

package/js/_dropdown.js

@@ -0,0 +1,101 @@
+/**
+ * ------------------------------------------------------------------
+ * Dropdown
+ * ------------------------------------------------------------------
+ * This class enable the functionality to un/collapse some element by another
+ * This component is a simpler version of the Toggle
+ * 
+ * @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 Dropdown extends BaseComponent {
+
+    static OPTIONS = {
+        closable: true
+    }
+
+    /**
+     * Creates an instance
+     *
+     * @param {HTMLElement} el - The HTML element
+     * @param {object} options - The custom options
+     * @constructor
+     */
+    constructor(el, options = {}) {
+
+        // Check for errors
+        if (options.closable && typeof options.closable !== 'boolean') throw new Error(ErrorMessage.typeOf('options.closable', 'boolean'))
+
+        // Run the SUPER constructor from BaseComponent
+        super(el, options)
+
+        // Define the properties
+        this._button = this._element.querySelector('[aria-controls]')
+        this._content = document.getElementById(this._button.getAttribute('aria-controls'))
+
+        // Init the event listener
+        this.#init()
+
+    }
+
+    /**
+     * Init the event listener
+     * 
+     * @private
+     */
+    #init() {
+
+        // Toggle the content on click on the button
+        this._button.addEventListener('click', () => this.#toggle())
+
+        // Close the content is click outside
+        if (this._options.closable) {
+            this._content.addEventListener('blur', (e) => {
+                if (e.relatedTarget !== this._button) this.#toggle()
+            })
+        }
+
+    }
+
+    /**
+     * Define the value
+     * 
+     * @return {string}
+     * @private
+     */
+    get value() {
+        return this._button.getAttribute('aria-pressed') === 'true'
+    }
+
+    /**
+     * Toggle the [hidden] and [aria-expanded] attributes
+     * 
+     * @private
+     */
+    #toggle() {
+
+        // Define new value
+        const value = !this.value
+
+        // Change the [aria-pressed] and [aria-expanded] attribute on button
+        this._button.setAttribute('aria-pressed', value)
+        this._button.setAttribute('aria-expanded', value)
+
+        // Change visibility of the content
+        this._content.hidden = !value
+
+        // Put the focus on the content
+        if (value) this._content.focus()
+
+        // Emmit event
+        this.emmitEvent('changed', { isOpen: !this._content.hidden })
+
+    }
+
+}

package/js/_scroll.js

@@ -0,0 +1,184 @@
+/**
+ * ------------------------------------------------------------------
+ * Scroll
+ * ------------------------------------------------------------------
+ * This script enable an HTML element to scroll to a position and to spy some buttons
+ * 
+ * @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 Scroll extends BaseComponent {
+
+    static OPTIONS = {
+        behavior: 'smooth', // Can be auto, smooth or instant
+        navigation: null, // Id of the navigation
+        gaps: {
+            top: 100,
+            bottom: 100,
+            spy: 100
+        }
+    }
+
+    /**
+     * Creates an instance
+     *
+     * @param {HTMLElement} el - The HTML element
+     * @param {object} options - The custom options
+     * @constructor
+     */
+    constructor(el, options = {}) {
+
+        // Check for errors
+        if (options.gaps) {
+            if (!(options.gaps instanceof Object)) throw new Error(ErrorMessage.instanceOf('options.gaps', 'Object'))
+            if (options.gaps.top && typeof options.gaps.top !== 'number') throw new Error(ErrorMessage.typeOf('options.gaps.top', 'number'))
+            if (options.gaps.bottom && typeof options.gaps.bottom !== 'number') throw new Error(ErrorMessage.typeOf('options.gaps.bottom', 'number'))
+            if (options.gaps.spy && typeof options.gaps.spy !== 'number') throw new Error(ErrorMessage.typeOf('options.gaps.spy', 'number'))
+        }
+        if (options.behavior && !['auto', 'smooth', 'instant'].includes(options.behavior)) throw new Error(ErrorMessage.enumOf('options.behavior', 'auto|smooth|instant'))
+        if (options.navigation && !document.getElementById(options.navigation)) throw new Error(ErrorMessage.existById('element', options.navigation))
+
+        // Run the SUPER constructor from BaseComponent
+        super(el, options)
+
+        // Reduce animation
+        const isReduced = window.matchMedia(`(prefers-reduced-motion: reduce)`) === true || window.matchMedia(`(prefers-reduced-motion: reduce)`).matches === true
+        if (isReduced) this._options.behavior = 'instant'
+
+        // Define the properties
+        this._buttons = {
+            top: document.querySelector(`[data-scroll-top="${this._element.id}"]`) ?? null,
+            bottom: document.querySelector(`[data-scroll-bottom="${this._element.id}"]`) ?? null
+        }
+
+        const links = [...document.querySelectorAll(`#${this._options.navigation} a[href^="#"]`)].filter((a) => document.getElementById(a.getAttribute('href').substring(1)))
+        this._spy = {
+            enable: this._options.navigation && links.length ? true : false,
+            links: links,
+            targets: links.map(a => document.getElementById(a.getAttribute('href').substring(1))),
+            current: 0
+        }
+
+        // Init the event listener
+        this.#init()
+
+    }
+
+    /**
+     * Get the height of the element
+     * It's a get method because the height can change by screen size, CSS and more !
+     * 
+     * @returns {int}
+     */
+    get _height() {
+        return this._element.scrollHeight - this._element.clientHeight
+    }
+
+    /**
+     * Init the event listener
+     * 
+     * @private
+     */
+    #init() {
+
+        // SCROLL
+        if (this._element.nodeName === 'HTML') {
+            window.onscroll = () => this.#scroll()
+        } else {
+            this._element.onscroll = () => this.#scroll()
+        }
+
+        // CLICK on links
+        [...this._spy.links].forEach((link, index) => link.addEventListener('click', (e) => {
+            e.preventDefault()
+            this.goTo(this._spy.targets[index].offsetTop)
+        }))
+
+        // CLICK on buttons
+        if (this._buttons.top) this._buttons.top.addEventListener('click', () => this.scrollTop())
+        if (this._buttons.bottom) this._buttons.bottom.addEventListener('click', () => this.scrollBottom())
+
+    }
+
+    /**
+     * Define what to do on scroll
+     * 
+     * @private
+     */
+    #scroll() {
+
+        // If Spy, run the method #spy
+        if (this._spy.enable) this.#spy()
+
+        // Toggle the top button
+        if (this._buttons.top) this._buttons.top.hidden = this._element.scrollTop <= this._options.gaps.top
+
+        // Toggle the bottom button
+        if (this._buttons.bottom) this._buttons.bottom.hidden = this._element.scrollTop >= this._height - this._options.gaps.bottom
+
+    }
+
+    /**
+     * Spy if current section changed, and toggle the [aria-current] attribute on links
+     * 
+     * @private
+     */
+    #spy() {
+
+        const current = this._spy.targets.length - [...this._spy.targets].reverse().findIndex((target) => this._element.scrollTop >= target.offsetTop - this._options.gaps.spy) - 1
+
+        if (current !== this._spy.current) {
+
+            // Remove [aria-current] on each links
+            this._spy.links.forEach(link => link.removeAttribute('aria-current'))
+
+            // Define current section
+            this._spy.current = current
+
+            // Set [aria-current] on link
+            if (this._spy.links[this._spy.current]) this._spy.links[this._spy.current].setAttribute('aria-current', 'location')
+
+        }
+
+    }
+
+    /**
+     * Scroll to a certain distance
+     * 
+     * @param {number} distance 
+     */
+    goTo(distance) {
+
+        // Check for errors
+        if (typeof distance !== 'number') throw new Error(ErrorMessage.typeOf('distance', 'number'))
+
+        // Scroll to
+        this._element.scrollTo({
+            top: distance,
+            behavior: this._options.behavior
+        })
+
+    }
+
+    /**
+     * Scroll to the top
+     * 
+     */
+    scrollTop() {
+        this.goTo(0)
+    }
+
+    /**
+     * Scroll to the bottom
+     * 
+     */
+    scrollBottom() {
+        this.goTo(this._height)
+    }
+
+} 

package/js/_sidebar.js

@@ -0,0 +1,97 @@
+/**
+ * ------------------------------------------------------------------
+ * Sidebar
+ * ------------------------------------------------------------------
+ * 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 Sidebar extends BaseComponent {
+
+    static OPTIONS = {
+        breakpoint: 960,
+    }
+
+    /**
+     * Creates an instance
+     *
+     * @param {HTMLElement} el - The HTML element
+     * @param {object} options - The custom options
+     * @constructor
+     */
+    constructor(el, options = {}) {
+
+        if (options.breakpoint && typeof options.breakpoint !== 'number') throw new Error(ErrorMessage.typeOf('options.breakpoint', 'number'))
+
+        // Run the SUPER constructor from BaseComponent
+        super(el, options)
+
+        // Define the properties
+        this._buttons = document.querySelectorAll(`[aria-controls=${this._element.id}]`) ?? []
+
+        this._backdrop = document.getElementById('backdrop')
+
+        this._timeout = false
+
+        this._isOpen = !this._element.hidden
+
+        // Init the event listener
+        this.#init()
+
+    }
+
+    /**
+     * Init the event listener
+     * 
+     * @private
+     */
+    #init() {
+
+        // On load check if need to open/close the sidebar
+        if (window.innerWidth > this._options.breakpoint && !this._isOpen) this.#toggle()
+
+        // On resize check if need to open/close the sidebar
+        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()
+            }, 250)
+        }
+
+        // On click on the button toggle the sidebar
+        this._buttons.forEach((button) => button.addEventListener('click', () => this.#toggle()))
+
+        // On click on the backdrop, close the sidebar
+        this._backdrop.addEventListener('click', () => this.#toggle())
+
+    }
+
+    /**
+     * Toggle the sidebar
+     * 
+     * @private
+     */
+    #toggle() {
+
+        // Change the state
+        this._isOpen = !this._isOpen
+
+        // Change the [aria-pressed] & [aria-expanded] attribute on the <button>
+        this._buttons.forEach((button) => {
+            button.setAttribute('aria-pressed', this._isOpen)
+            button.setAttribute('aria-expanded', this._isOpen)
+        })
+
+        // Change the [hidden] attribute on the sidebar
+        this._element.hidden = !this._isOpen
+
+    }
+
+}

package/js/_slider.js

@@ -0,0 +1,249 @@
+/**
+ * ------------------------------------------------------------------
+ * Slider
+ * ------------------------------------------------------------------
+ * This class enable the functionality to make an element slider
+ * 
+ * @author Natacha Herth
+ * @version 0.0.1
+ * @copyright Natacha Herth, design & web development
+ * 
+ * * keep check on the scrollend event: https://caniuse.com/?search=scrollend
+ */
+
+import BaseComponent from './utilities/_base-component'
+import ErrorMessage from "./utilities/_error"
+
+export default class Slider extends BaseComponent {
+
+    static OPTIONS = {
+        behavior: 'smooth', // Can be auto, smooth or instant
+        loop: false,
+        autoplay: false
+    }
+
+    /**
+     * Creates an instance
+     *
+     * @param {HTMLElement} el - The HTML element
+     * @param {object} options - The custom options
+     * @constructor
+     */
+    constructor(el, options = {}) {
+
+        // Check for errors
+        if (options.behavior && !['auto', 'smooth', 'instant'].includes(options.behavior)) throw new Error(ErrorMessage.enumOf('options.behavior', 'auto|smooth|instant'))
+        if (options.loop && typeof options.loop !== 'boolean') throw new Error(ErrorMessage.typeOf('options.loop', 'boolean'))
+        if (options.autoplay && (typeof options.autoplay !== 'boolean' && typeof options.autoplay !== 'number')) throw new Error(ErrorMessage.typeOf('options.autoplay', 'boolean|number'))
+
+        // Run the SUPER constructor from BaseComponent
+        super(el, options)
+
+        // Reduce animation
+        const isReduced = window.matchMedia(`(prefers-reduced-motion: reduce)`) === true || window.matchMedia(`(prefers-reduced-motion: reduce)`).matches === true
+        if (isReduced) this._options.behavior = 'instant'
+
+        // If loop, clone first and last slides (needed in case or scrolling/grabbing and slide effect)
+        if (this._options.loop) {
+
+            const cloneFirst = this._element.firstElementChild.cloneNode(true)
+            const cloneLast = this._element.lastElementChild.cloneNode(true)
+
+            cloneFirst.removeAttribute('id')
+            cloneFirst.removeAttribute('aria-hidden')
+            cloneFirst.removeAttribute('role')
+            this._element.append(cloneFirst)
+
+            cloneLast.removeAttribute('id')
+            cloneLast.removeAttribute('aria-hidden')
+            cloneLast.removeAttribute('role')
+            this._element.prepend(cloneLast)
+
+        }
+
+        // Define the properties (don't use .children because of clones in loop)
+        this._slides = this._element.querySelectorAll('[role=tabpanel]')
+
+        this._buttons = {
+            prev: document.querySelector(`[aria-controls=${this._element.id}][data-slider-prev]`),
+            next: document.querySelector(`[aria-controls=${this._element.id}][data-slider-next]`),
+            tabs: document.querySelectorAll(`[aria-controls=${this._element.id}][role=tablist] [role=tab]`)
+        }
+
+        this._current = 0
+
+        this._interval = null
+
+        this.#init()
+
+    }
+
+    /**
+     * Init the event listener
+     * 
+     * @private
+     */
+    #init() {
+
+        // AUTOPLAY
+        if (this._options.autoplay) this._interval = setInterval(() => this.next(), this._options.autoplay)
+
+        // CLICK next
+        if (this._buttons.next) this._buttons.next.addEventListener('click', () => this.next())
+
+        // CLICK prev
+        if (this._buttons.prev) this._buttons.prev.addEventListener('click', () => this.prev())
+
+        // CLICK tabs
+        if (this._buttons.tabs.length) this._buttons.tabs.forEach((tab, index) => tab.addEventListener('click', () => this.goTo(index)))
+
+        // CLICK scroll
+        this._element.addEventListener('scroll', () => {
+
+            // Clear timeout to avoid multiple request
+            clearTimeout(this._element.scrollTimeout)
+
+            // Run event before changed
+            this.emmitEvent('changing', { current: this._current })
+
+            // Set the timeout
+            this._element.scrollTimeout = setTimeout(() => {
+
+                // Check loop on scrolling
+                if (this._options.loop) this.#loop()
+
+                // Toggle the attributes
+                this.#change()
+
+            }, 150)
+
+            // Make sure to reset the interval to keep the slide duration when manually change
+            if (this._options.autoplay) {
+                clearInterval(this._interval)
+                this._interval = setInterval(() => this.next(), this._options.autoplay)
+            }
+
+        })
+
+    }
+
+    /**
+     * Change the current slide and toggle the attributes
+     * 
+     * @private
+     */
+    #change() {
+
+        // Define the index
+        const index = this._slides.length - [...this._slides].reverse().findIndex((slide) => this._element.scrollLeft >= slide.offsetLeft) - 1
+
+        // Check if index change to avoid multiple call
+        if (index !== this._current) {
+
+            // Define the new current
+            this._current = index
+
+            // Change the [aria-selected] attribute on tabs
+            this._buttons.tabs.forEach((tab, index) => tab.setAttribute('aria-selected', index === this._current))
+
+            // Change the [aria-hidden] attribute on slide
+            this._slides.forEach((slide, index) => slide.setAttribute('aria-hidden', index !== this._current))
+
+            // Toggle [disabled]  attribute on the next button
+            if (this._buttons.next && !this._options.loop) this._buttons.next.disabled = this._current === this._slides.length - 1
+
+            // Toggle [disabled]  attribute on the prev button
+            if (this._buttons.prev && !this._options.loop) this._buttons.prev.disabled = this._current === 0
+
+            // Run event after changed
+            this.emmitEvent('changed', { current: this._current })
+
+        }
+
+    }
+
+    /**
+     * Loop scrolling when reach the start/end of the slide
+     * 
+     * @returns 
+     * @private
+     */
+    #loop() {
+
+        // Going to much left => go to the last slide 
+        if (this._element.scrollLeft <= this._element.offsetWidth) {
+            this._element.scrollTo(this._slides[this._slides.length - 1].offsetLeft, 0)
+            return
+        }
+
+        // Going to much right => go to the first slide
+        if (this._element.scrollWidth - this._element.scrollLeft <= this._element.offsetWidth) {
+            this._element.scrollTo(this._slides[0].offsetLeft, 0)
+            return
+        }
+
+    }
+
+    /**
+     * Go to a slide by index
+     * 
+     * @param {int} index - The index number of the slide
+     */
+    goTo(index) {
+
+        // Check for errors
+        if (typeof index !== 'number') throw new Error(ErrorMessage.typeOf('index', 'number'))
+
+        // Define the offset, if loop get the first or last slide offset
+        let offset
+
+        if (this._options.loop && (index < 0 || index > this._slides.length - 1)) {
+            offset = this._element.children[index + 1].offsetLeft
+        } else {
+            index = index < 0 ? this._slides.length - 1 : index % this._slides.length
+            offset = this._slides[index].offsetLeft
+        }
+
+        // Scroll to position
+        this._element.scrollTo({
+            left: offset,
+            behavior: this._options.behavior
+        })
+
+    }
+
+    /**
+     * Go to the next slide
+     * 
+     */
+    next() {
+
+        // Define the new _current
+        const index = this._current + 1
+
+        // If last item => return
+        if (!this._options.loop && !this._options.autoplay && index === this._slides.length) return
+
+        // Run method goTo()
+        this.goTo(index)
+
+    }
+
+    /**
+     * Go to the previous slide
+     * 
+     */
+    prev() {
+
+        // Define the new _current
+        const index = this._current - 1
+
+        // If first item => return
+        if (!this._options.loop && index < 0) return
+
+        // Run method goTo()
+        this.goTo(index)
+
+    }
+
+}