@newlogic-digital/ui 3.4.2 → 3.5.0

package/src/scripts/Libraries/Form.js

@@ -1,13 +1,13 @@
 import { LibStimulus, Controller } from './Stimulus.js'
-import { checkValidity } from '../Utils/Functions/+.js'
+import { inputValidity } from '../Utils/Functions/+.js'
 
 LibStimulus.register('lib-form', class extends Controller {
-    connect() {
+    connect () {
         this.element.setAttribute('novalidate', '')
         this.element.addEventListener('submit', e => this.validation(e))
     }
 
-    validation(e) {
+    validation (e) {
         if (this.element.checkValidity() === false) {
             e.preventDefault()
             e.stopPropagation()
@@ -15,19 +15,12 @@ LibStimulus.register('lib-form', class extends Controller {
             this.element.querySelector(':invalid').scrollIntoView({ behavior: 'smooth', block: 'center' })
             this.element.querySelector(':invalid').focus()
         } else {
-            this.element.querySelector('[type="submit"]')._addDataValue('state', 'loading')
+            this.element.querySelector('[type="submit"]').classList.add('loading')
         }
 
-        this.element.querySelectorAll('.ui-input, [data-controller="ui-checkbox"], [data-controller="ui-radio"]').forEach(element => {
-            checkValidity(element, { message: true })
+        this.element.querySelectorAll('.ui-control, .ui-check, .ui-switch').forEach(element => {
+            console.log(element)
+            inputValidity(element, { message: true })
         })
-
-        this.element.querySelectorAll('.ui-select:not([data-state*="active"]) select[required]').forEach(select => {
-            checkValidity(select.closest('.ui-select'), { message: true })
-        })
-    }
-
-    submitForm({ currentTarget }) {
-        currentTarget.form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }))
     }
 })

package/src/scripts/Libraries/Naja.js

@@ -2,13 +2,13 @@ import naja from 'naja'
 import { Controller, LibStimulus, loadStimulus } from './Stimulus.js'
 
 LibStimulus.register('lib-naja', class extends Controller {
-    async connect() {
+    async connect () {
         naja.uiHandler.addEventListener('interaction', ({ detail }) => {
             const element = detail.element
 
             detail.options.target = element
 
-            element.dispatchEvent(new CustomEvent('naja-interaction', { bubbles: true, cancelable: true }))
+            element.dispatchEvent(new CustomEvent('naja:interaction', { bubbles: true, cancelable: true }))
 
             if (element?.form && !element.form.reportValidity()) {
                 arguments[0].preventDefault()
@@ -16,7 +16,7 @@ LibStimulus.register('lib-naja', class extends Controller {
         })
 
         naja.snippetHandler.addEventListener('afterUpdate', ({ detail }) => {
-            detail?.options.target.dispatchEvent(new CustomEvent('naja-afterUpdate', { bubbles: true, cancelable: true }))
+            detail?.options.target.dispatchEvent(new CustomEvent('naja:afterUpdate', { bubbles: true, cancelable: true }))
 
             loadStimulus(document.body, false)
         })
@@ -27,9 +27,7 @@ LibStimulus.register('lib-naja', class extends Controller {
         })
     }
 
-    async fetch({ currentTarget }) {
-        arguments[0].preventDefault()
-
-        await naja.makeRequest('GET', currentTarget.dataset.actionUrl, null, { history: false })
+    async get ({ params }) {
+        await naja.makeRequest('GET', params.url, params.data ? JSON.parse(params.data) : null, { history: params.history ?? false })
     }
 })

package/src/scripts/Libraries/ReCaptcha.js

@@ -9,11 +9,11 @@ LibStimulus.register('lib-recaptcha', class extends Controller {
         action: String
     }
 
-    connect() {
+    connect () {
         importScript(cdn.recaptcha.replace('{apikey}', this.apiValue))
     }
 
-    async execute() {
+    async execute () {
         return new Promise(resolve => {
             window.grecaptcha.enterprise.ready(() => {
                 window.grecaptcha.enterprise.execute(this.apiValue, { action: this.actionValue ?? 'form' }).then(token => {
@@ -24,7 +24,7 @@ LibStimulus.register('lib-recaptcha', class extends Controller {
         })
     }
 
-    async submit() {
+    async submit ({ params }) {
         if (this.element.reportValidity() === false) {
             return false
         }
@@ -32,16 +32,11 @@ LibStimulus.register('lib-recaptcha', class extends Controller {
         arguments[0].preventDefault()
 
         await this.execute()
-        this.element.submit()
-    }
 
-    async submitFetch() {
-        if (this.element.reportValidity() === false) {
-            return false
+        if (!params.naja) {
+            this.element.submit()
+        } else {
+            await naja.makeRequest(this.element.method, this.element.action, new FormData(this.element), { history: 'replace' })
         }
-
-        arguments[0].preventDefault()
-        await this.execute()
-        await naja.makeRequest(this.element.method, this.element.action, new FormData(this.element), { history: 'replace' })
     }
 })

package/src/scripts/Libraries/Ripple.js

@@ -1,24 +1,8 @@
-const LibRipple = ({ currentTarget, layerX, layerY }) => {
-    const container = currentTarget
+import { Controller, LibStimulus } from './Stimulus.js'
+import { showRipple } from 'winduum/src/libraries/ripple.js'
 
-    if (container.querySelector('.lib-ripple') === null) {
-        container.insertAdjacentHTML('beforeend', "<div class='lib-ripple'></div>")
+LibStimulus.register('lib-ripple', class extends Controller {
+    async show (e) {
+        showRipple(e)
     }
-
-    const ink = container.querySelector('.lib-ripple')
-
-    ink.classList.remove('animation')
-
-    if (ink.clientWidth === 0 && ink.clientHeight === 0) {
-        const d = Math.max(container.offsetWidth, container.offsetHeight)
-
-        ink.style.width = d + 'px'
-        ink.style.height = d + 'px'
-    }
-
-    ink.style.top = layerY - (ink.clientHeight / 2) + 'px'
-    ink.style.left = layerX - (ink.clientWidth / 2) + 'px'
-    ink.classList.add('animation')
-}
-
-export default LibRipple
+})

package/src/scripts/Libraries/Script.js

@@ -1,7 +1,7 @@
 import { LibStimulus, Controller } from './Stimulus.js'
 
 LibStimulus.register('lib-script', class extends Controller {
-    connect() {
+    connect () {
         const element = this.element
         const script = document.createElement('script')
 
@@ -12,7 +12,6 @@ LibStimulus.register('lib-script', class extends Controller {
         })
 
         script.innerHTML = element.innerHTML
-
         element.parentElement.appendChild(script)
         element.remove()
     }

package/src/scripts/Libraries/Slider.js

@@ -0,0 +1,160 @@
+const defaultOptions = {
+    behavior: 'smooth',
+    init: {
+        pauseSelector: [],
+        paginationSelector: null,
+        paginationItemClass: null,
+        progressSelector: null,
+        counterMinSelector: null,
+        counterMaxSelector: null,
+        autoplay: false
+    }
+}
+
+export const prevSlide = (selector) => {
+    selector.scroll({ left: selector.scrollLeft - selector.children[0].clientWidth, behavior: defaultOptions.behavior })
+}
+
+export const nextSlide = (selector) => {
+    selector.scroll({ left: selector.scrollLeft + selector.children[0].clientWidth, behavior: defaultOptions.behavior })
+}
+
+export const selectSlide = (selector, selected = 0) => {
+    const position = selector.scrollLeft / selector.children[0].clientWidth
+
+    if (position - selected <= 0) {
+        selector.scroll({ left: selector.scrollLeft + selector.children[0].clientWidth * (selected - 1 - position), behavior: defaultOptions.behavior })
+    } else {
+        selector.scroll({ left: selector.scrollLeft - selector.children[0].clientWidth * (position - selected + 1), behavior: defaultOptions.behavior })
+    }
+}
+
+export const initSlider = (selector, options = defaultOptions.init) => {
+    let isDown; let paused; let startX; let scrollLeft = null
+
+    function isElementInViewport (element) {
+        const rect = element.getBoundingClientRect()
+        const sliderRect = selector.getBoundingClientRect()
+
+        return (
+            rect.left >= sliderRect.left &&
+            rect.right <= sliderRect.right
+        )
+    }
+
+    function setProgressValue () {
+        if (options.progressSelector) {
+            options.progressSelector.value = ((selector.scrollLeft + selector.clientWidth) / selector.scrollWidth * 100).toFixed(2)
+        }
+    }
+
+    if (!selector.classList.contains('is-fade')) {
+        const grabbing = () => {
+            isDown = false
+            paused = false
+            selector.classList.remove('is-grabbing')
+            selector.scrollLeft = selector.scrollLeft - 1
+        }
+
+        selector.addEventListener('mouseleave', grabbing)
+
+        selector.addEventListener('mouseup', grabbing)
+
+        selector.addEventListener('mousedown', ({ pageX }) => {
+            isDown = true
+            paused = true
+            startX = pageX - selector.offsetLeft
+            scrollLeft = selector.scrollLeft
+        })
+
+        selector.addEventListener('mousemove', e => {
+            if (!isDown) return
+            e.preventDefault()
+            const x = e.pageX - selector.offsetLeft
+            const walk = (x - startX) * 1.25
+
+            selector.classList.add('is-grabbing')
+            selector.scrollLeft = scrollLeft - walk
+
+            selector.ondragstart = dragEvent => dragEvent.preventDefault()
+        })
+    }
+
+    const itemsCount = selector.clientWidth > selector.children[0].clientWidth
+        ? [...selector.children].reduce((item, children) =>
+            (selector.scrollWidth - selector.clientWidth > item.itemsWidth + children.clientWidth / 2)
+                ? { itemsWidth: item.itemsWidth + children.clientWidth, count: item.count + 1 }
+                : item, { itemsWidth: 0, count: 0 }).count + 1
+        : Math.ceil((selector.scrollWidth) / selector.children[0].clientWidth)
+
+    if (options.counterMinSelector) {
+        options.counterMinSelector.textContent = 1
+    }
+
+    if (options.counterMaxSelector) {
+        options.counterMaxSelector.textContent = itemsCount
+    }
+
+    if (options.paginationSelector) {
+        options.paginationSelector.insertAdjacentHTML('beforeend', [...Array(itemsCount)].map((_, i) => `
+            <div class="${options.paginationItemClass ?? ''}${i === 0 ? ' active' : ''}"></div>
+        `).join(''))
+
+        ;[...options.paginationSelector.children].forEach((children) => {
+            children.addEventListener('click', ({ currentTarget }) => {
+                selectSlide(selector, [...options.paginationSelector.children].indexOf(currentTarget) + 1)
+            })
+        })
+    }
+
+    setProgressValue()
+
+    selector.addEventListener('scroll', () => {
+        const activeSlide = parseInt((selector.scrollLeft / selector.children[0].clientWidth).toFixed(0))
+
+        for (const children of [...selector.children]) {
+            if (isElementInViewport(children)) {
+                children.classList.add('active')
+            } else {
+                children.classList.remove('active')
+            }
+        }
+
+        if (options.paginationSelector) {
+            [...options.paginationSelector.children].forEach(children => children.classList.remove('active'))
+
+            options.paginationSelector.children[activeSlide].classList.add('active')
+        }
+
+        setProgressValue()
+
+        if (options.counterMinSelector) {
+            options.counterMinSelector.textContent = activeSlide + 1
+        }
+    }, { passive: true })
+
+    if (options.progressSelector) {
+        options.progressSelector.addEventListener('click', ({ clientX, target }) => {
+            selector.scrollLeft = (selector.scrollWidth / 100) * (clientX - target.offsetLeft) / target.clientWidth * 100
+        })
+    }
+
+    ;[...options.pauseSelector, options.progressSelector, options.paginationSelector, selector].forEach(element => {
+        if (typeof element !== 'undefined' && element !== null) {
+            element.addEventListener('mouseenter', () => (paused = true))
+            element.addEventListener('mouseleave', () => (paused = false))
+        }
+    })
+
+    if (options.autoplay && !isNaN(options.autoplay)) {
+        setInterval(() => {
+            if (!paused) {
+                if (selector.scrollLeft < selector.children[0].clientWidth * (selector.children.length - 1)) {
+                    selector.scroll({ left: selector.scrollLeft + selector.children[0].clientWidth, behavior: self.behavior })
+                } else {
+                    selector.scroll({ left: 0, behavior: options.behavior })
+                }
+            }
+        }, options.autoplay)
+    }
+}

package/src/scripts/Libraries/Stimulus.js

@@ -2,7 +2,6 @@ import { Application, Controller } from '@hotwired/stimulus'
 import loadStimulus from '../Utils/Functions/loadStimulus.js'
 
 const LibStimulus = new Application(document.documentElement)
-
 const getController = (element, identifier) => LibStimulus.getControllerForElementAndIdentifier(element, identifier)
 
 LibStimulus.start().then(() => loadStimulus(document.body))

package/src/scripts/Libraries/Swup.js

@@ -1,30 +1,50 @@
 import Swup from 'swup'
-import { getController, loadStimulus } from './Stimulus.js'
 import { closeDialog } from 'winduum/src/libraries/dialog.js'
-import LibAnchor from './Anchor.js'
+import { hideTippy } from './Tippy.js'
+import { getController, loadStimulus } from './Stimulus.js'
 import LibCookieConsent from './CookieConsent.js'
-import replaceTag from '../Utils/Functions/replaceTag.js'
+import { replaceTag, replaceScript } from '../Utils/Functions/+.js'
+
+document.addEventListener('click', ({ target }) => {
+    const noSwup = target.closest('[data-no-swup]')
+
+    if (!noSwup) {
+        return
+    }
+
+    if (noSwup.classList.contains('ui-btn')) {
+        noSwup.classList.add('loading')
+    } else {
+        noSwup.classList.add('cursor-wait')
+    }
+})
 
 const LibSwup = new Swup({
     containers: ['#l-main', '#l-header'].filter(element => document.querySelector(element)),
     linkSelector: `:is(a[href^="${window.location.origin}"], a[href^="/"]):not([data-no-swup], [data-naja], [target="_blank"])`
 })
 
-LibSwup.on('clickLink', async({ target }) => {
+LibSwup.on('clickLink', async ({ target }) => {
     document.body.classList.remove('overflow-hidden')
 
-    if (document.querySelector('.lib-drawer[data-state~="active"]') !== null) {
+    const LibDrawerSelector = document.querySelector('.lib-drawer.active')
+    const LibDialogSelector = document.querySelector('.lib-dialog')
+
+    hideTippy()
+
+    if (LibDrawerSelector) {
         /** @type {LibDrawer} */
-        const LibDrawer = getController(document.body, 'lib-drawer')
+        const LibDrawer = getController(LibDrawerSelector, 'lib-drawer')
+
         LibDrawer.hide()
     }
 
-    if (document.querySelector('.lib-dialog') !== null) {
-        await closeDialog()
+    if (LibDialogSelector) {
+        await closeDialog(LibDialogSelector)
     }
 
     if (window.location.href === target.closest('a').href) {
-        document.documentElement.scroll({ top: 0 })
+        document.documentElement.scroll({ top: 0, behavior: 'smooth' })
     }
 })
 
@@ -44,11 +64,15 @@ LibSwup.on('contentReplaced', () => {
 
     replaceTag(content)
 
-    LibAnchor.init()
+    if (window.location.hash) {
+        document.documentElement.scroll({ top: document.querySelector(`${window.location.hash}`)?.offsetTop, behavior: 'smooth' })
+    }
+
     LibCookieConsent.init()
 
     LibSwup.options.containers.forEach(selector => {
         loadStimulus(document.querySelector(selector))
+        replaceScript(document.querySelector(selector))
     })
 
     window.dataLayer && window.dataLayer.push({
@@ -61,4 +85,8 @@ LibSwup.on('contentReplaced', () => {
     window.fbq && window.fbq('track', 'PageView')
 })
 
+LibSwup.options.cache && setInterval(() => {
+    LibSwup.cache.empty()
+}, 90 * 1000)
+
 export default LibSwup

package/src/scripts/Libraries/Tippy.js

@@ -2,7 +2,7 @@ import { loadStimulus, importStyle } from '../Utils/Functions/+.js'
 import cdn from '../Utils/cdn.js'
 
 export default class LibTippy {
-    async init(element, options, template) {
+    async init (element, options, template) {
         const tippy = (await import('tippy.js')).default
         const { roundArrow } = await import('tippy.js')
 
@@ -14,7 +14,6 @@ export default class LibTippy {
 
         if (this.type.includes('dropdown')) {
             this.options.placement = 'bottom-end'
-            this.options.arrow = false
             this.options.maxWidth = 'none'
         }
 
@@ -28,7 +27,7 @@ export default class LibTippy {
             } else {
                 options.content = `
                   <div class="c-dropdown">
-                    <div class="wrp_dropdown_body">
+                    <div class="c_dropdown_body">
                       ${element.getAttribute('aria-label')}
                     </div>
                   </div>
@@ -36,16 +35,16 @@ export default class LibTippy {
             }
         }
 
-        if (typeof element.dataset.libTippySlot !== 'undefined') {
+        if (element.dataset.libTippySlot) {
             for (const [key, value] of Object.entries(JSON.parse(element.dataset.libTippySlot))) {
-                options.content = options.content.replaceAll(`{${key}}`, value).replaceAll(`%7B${key}%7B`, value)
+                options.content = options.content.replaceAll(`{${key}}`, value.toString()).replaceAll(`%7B${key}%7B`, value.toString())
             }
         }
 
         tippy(element, options)
     }
 
-    constructor(element, attributes = ['tooltip', '']) {
+    constructor (element, attributes = ['tooltip', '']) {
         const self = this
 
         this.options = {
@@ -55,29 +54,22 @@ export default class LibTippy {
             interactive: true,
             appendTo: 'parent',
             arrow: false,
-            theme: 'light-border',
             animation: 'scale',
             inertia: true,
             allowHTML: true,
             onShow: (instance) => {
-                let name = this.template
-
                 if (this.type.includes('-full')) {
                     instance.popper.classList.add('is-full')
-                    document.documentElement.classList.add('m:is-body-overlay')
-                }
-
-                if (typeof name === 'undefined') {
-                    name = this.type
+                    document.documentElement.classList.add('max-md:is-body-overlay')
                 }
 
-                instance.popper.querySelector('.tippy-box').setAttribute('data-name', name)
+                instance.popper.querySelector('.tippy-box').setAttribute('data-name', this.template ?? this.type)
 
                 loadStimulus(instance.popper.querySelector('.tippy-content'))
             },
             onHide: () => {
                 if (this.type.includes('-full')) {
-                    setTimeout(() => document.documentElement.classList.remove('m:is-body-overlay'), 50)
+                    setTimeout(() => document.documentElement.classList.remove('max-md:is-body-overlay'), 50)
                 }
             }
         }
@@ -96,17 +88,18 @@ export default class LibTippy {
         this.options.showOnCreate = true
 
         this.options.trigger !== 'manual' && this.options.trigger.split(' ').forEach(event => {
-            element.addEventListener(event, async function e() {
+            element.addEventListener(event, async function e () {
                 if (self.template.startsWith('/') && self.options.content === '') {
                     element.style.cursor = 'wait'
-                    element._addDataValue('state', 'loading')
+                    element.classList.add('loading')
 
                     fetch(self.template, { headers: { 'X-Requested-With': 'XMLHttpRequest' } }).then(response => {
                         return response.json()
-                    }).then(async(data) => {
+                    }).then(async data => {
                         self.options.content = data.content
                         element.style.cursor = ''
-                        element._removeDataValue('state', 'loading')
+                        element.classList.remove('loading')
+
                         await self.init(element, self.options, self.template)
                         element.removeEventListener(event, e)
                     })
@@ -118,3 +111,7 @@ export default class LibTippy {
         })
     }
 }
+
+export function hideTippy () {
+    document.querySelectorAll('[data-controller~="lib-tippy"][aria-expanded="true"]').forEach(element => element?._tippy?.hide())
+}

package/src/scripts/Ui/+.js

@@ -1,4 +1,4 @@
-import './Checkbox.js'
-import './Input.js'
-import './Select.js'
+import './Check.js'
+import './Control.js'
+import './ControlSelect.js'
 import './Text.js'

package/src/scripts/Ui/Check.js

@@ -0,0 +1,8 @@
+import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
+import { inputValidity } from '../Utils/Functions/+.js'
+
+LibStimulus.register('ui-check', class extends Controller {
+    validity ({ currentTarget }) {
+        inputValidity(currentTarget)
+    }
+})