@natachah/vanilla-frontend 0.1.14 → 0.1.16

package/js/_slider.js

@@ -2,12 +2,12 @@
  * ------------------------------------------------------------------
  * Slider
  * ------------------------------------------------------------------
- * This class enable the functionality to make an element slider
+ * This class enables the functionality to make an element slider
  * 
  * @author Natacha Herth
  * @copyright Natacha Herth, design & web development
  * 
- * * keep check on the scrollend event: https://caniuse.com/?search=scrollend
+ * Keep check on the scrollend event: https://caniuse.com/?search=scrollend
  */
 
 import BaseComponent from './utilities/_base-component'
@@ -16,34 +16,52 @@ import ErrorMessage from "./utilities/_error"
 export default class Slider extends BaseComponent {
 
     static OPTIONS = {
-        behavior: 'smooth', // Can be auto, smooth or instant
+        behavior: 'smooth', // Can be auto, smooth, or instant
         loop: false,
         autoplay: false
     }
 
     /**
-     * Creates an instance
+     * Creates an instance of Slider.
      *
      * @param {HTMLElement} el - The HTML element
-     * @param {object} options - The custom options
+     * @param {object} options - 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'))
+        // Check for errors in the options
+        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, 'slider')
 
-        // Reduce animation
-        const isReduced = window.matchMedia(`(prefers-reduced-motion: reduce)`) === true || window.matchMedia(`(prefers-reduced-motion: reduce)`).matches === true
+        // Handle reduced motion preferences
+        const isReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches
         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) {
+        // Get slides and buttons
+        this._slides = Array.from(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
+
+        // Clone first and last slides if loop is enabled
+        if (this._options.loop && this._options.behavior == 'smooth') {
 
             const cloneFirst = this._element.firstElementChild.cloneNode(true)
             const cloneLast = this._element.lastElementChild.cloneNode(true)
@@ -60,189 +78,152 @@ export default class Slider extends BaseComponent {
 
         }
 
-        // 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
-
+        // Initialize event listeners and functionality
         this.#init()
-
     }
 
     /**
-     * Init the event listener
+     * Initialize event listeners and autoplay functionality.
      * 
      * @private
      */
     #init() {
 
-        // AUTOPLAY
-        if (this._options.autoplay) this._interval = setInterval(() => this.next(), this._options.autoplay)
+        // Handle autoplay
+        if (this._options.autoplay) {
+            this._interval = setInterval(() => this.next(), this._options.autoplay)
+        }
 
-        // CLICK next
+        // Add event listeners for next and prev buttons
         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)
+        // Add event listeners for tabs
+        if (this._buttons.tabs.length) {
+            this._buttons.tabs.forEach((tab, index) => tab.addEventListener('click', () => this.goTo(index)))
+        }
 
-            // Make sure to reset the interval to keep the slide duration when manually change
-            if (this._options.autoplay) {
+        // Handle autoplay reset after user interaction
+        if (this._options.autoplay) {
+            this._element.addEventListener('click', () => {
                 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
+        // Enable swipe functionality on touch devices.
+        if (!this._options.autoplay) {
+            let startX = 0
 
-            // Toggle [disabled]  attribute on the prev button
-            if (this._buttons.prev && !this._options.loop) this._buttons.prev.disabled = this._current === 0
+            const onTouchStart = (event) => {
+                startX = event.touches[0].clientX
+            }
 
-            // Run event after changed
-            this.emmitEvent('changed', { current: this._current })
+            const onTouchEnd = (event) => {
+                const endX = event.changedTouches[0].clientX
+                if (startX > endX + 50) {
+                    this.next()
+                } else if (startX < endX - 50) {
+                    this.prev()
+                }
+            }
 
+            this._element.addEventListener('touchstart', onTouchStart)
+            this._element.addEventListener('touchend', onTouchEnd)
         }
-
     }
 
     /**
-     * Loop scrolling when reach the start/end of the slide
+     * Go to a specific slide by index.
      * 
-     * @returns 
-     * @private
+     * @param {int} index - The index of the slide
      */
-    #loop() {
+    goTo(index) {
 
-        // 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
+        if (typeof index !== 'number') {
+            throw new Error(ErrorMessage.typeOf('index', 'number'))
         }
 
-        // 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
-        }
+        const previous = this._current
 
-    }
+        let clone
 
-    /**
-     * Go to a slide by index
-     * 
-     * @param {int} index - The index number of the slide
-     */
-    goTo(index) {
+        if (this._options.loop && (index < 0 || index >= this._slides.length)) {
 
-        // Check for errors
-        if (typeof index !== 'number') throw new Error(ErrorMessage.typeOf('index', 'number'))
+            // Go to the correct slide index
+            this._current = index < 0 ? this._slides.length - 1 : 0
 
-        // Define the offset, if loop get the first or last slide offset
-        let offset
+            // If scroll behavior go to the clone offset
+            if (this._options.behavior == 'smooth') {
+                clone = this._current == 0 ? this._element.lastElementChild : this._element.firstElementChild
+            }
 
-        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
+            // Otherwise go to the index
+            this._current = index
         }
 
-        // Scroll to position
+        // Define the offset
+        const offset = clone ? clone.offsetLeft : this._slides[this._current].offsetLeft
+
+        // Go to the slide
         this._element.scrollTo({
             left: offset,
             behavior: this._options.behavior
         })
 
+        // If clone offset, then go to the right slide instant
+        if (clone) {
+            setTimeout(() => {
+                this._element.scrollTo({
+                    left: this._slides[this._current].offsetLeft,
+                    behavior: 'instant'
+                })
+            }, 500)
+        }
+
+        // Update the [aria-selected] attribute on tabs
+        this._buttons.tabs.forEach((tab, idx) => tab.setAttribute('aria-selected', idx === this._current))
+
+        // Update the [aria-hidden] attribute on slides
+        this._slides.forEach((slide, idx) => slide.setAttribute('aria-hidden', idx !== this._current))
+
+        // Disable next and prev buttons if necessary
+        if (this._buttons.next && !this._options.loop) {
+            this._buttons.next.disabled = this._current === this._slides.length - 1
+        }
+        if (this._buttons.prev && !this._options.loop) {
+            this._buttons.prev.disabled = this._current === 0
+        }
+
+        // Emit "changed" event after the slide has changed
+        this.emmitEvent('changed', { current: this._current, previous: previous })
     }
 
     /**
-     * Go to the next slide
-     * 
+     * Go to the next slide.
      */
     next() {
+        const nextIndex = this._current + 1
 
-        // 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)
+        // Prevent scrolling if at the last slide and looping is disabled
+        if (!this._options.loop && nextIndex >= this._slides.length) return
 
+        // Move to the next slide
+        this.goTo(nextIndex)
     }
 
     /**
-     * Go to the previous slide
-     * 
+     * Go to the previous slide.
      */
     prev() {
+        const prevIndex = this._current - 1
 
-        // 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)
+        // Prevent scrolling if at the first slide and looping is disabled
+        if (!this._options.loop && prevIndex < 0) return
 
+        // Move to the previous slide
+        this.goTo(prevIndex)
     }
 
-}
+}

package/js/_sortable.js

@@ -26,9 +26,17 @@ export default class Sortable extends BaseComponent {
         super(el, options, 'sortable')
 
         // Define the properties
+        this._items = null
         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 +52,88 @@ 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) => {
-
-            // 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)
+        // Init the events on the items
+        this.#initEvents()
 
-            // 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()
+    }
+
+    /**
+     * Handle the mousedown event
+     * 
+     * @private
+     */
+    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
     }
 
     /**
-     * Get the list of the items
+     * Handle the mouseup event
      * 
-     * @return {object}
+     * @private
      */
-    get items() {
-        return this._element.querySelectorAll('[draggable]')
+    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'))
@@ -100,10 +155,16 @@ export default class Sortable extends BaseComponent {
     /**
      * 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 +181,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'))
@@ -145,26 +212,4 @@ 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 })
-
-    }
-
-
 }