@newlogic-digital/ui 3.3.0 → 3.5.0

package/src/scripts/Libraries/Dialog.js

@@ -1,82 +1,47 @@
-import { loadStimulus } from './Stimulus.js'
-
-const LibDialog = {
-    show: async(content) => {
-        return new Promise(resolve => {
-            if (document.querySelector('.lib-dialog > [class^="c-dialog"]') !== null) {
-                document.querySelector('.lib-dialog > [class^="c-dialog"]').remove()
-            }
-
-            if (document.querySelector('.lib-dialog') === null) {
-                document.body.insertAdjacentHTML('beforeend', '<div class="lib-dialog" tabindex="0"></div>')
-            }
-
-            document.querySelector('.lib-dialog').insertAdjacentHTML('beforeend', content)
-            document.querySelector('.lib-dialog').style.display = 'flex'
-
-            function outerHeight(el) {
-                return el.offsetHeight + parseInt(getComputedStyle(el).marginTop) + parseInt(getComputedStyle(el).marginBottom)
-            }
-
-            if (outerHeight(document.querySelector('.lib-dialog > [class^="c-dialog"]')) > window.innerHeight) {
-                const offset = window.innerWidth - document.body.clientWidth
-
-                document.documentElement.style.paddingRight = `${offset}px`
-                document.documentElement.classList.add('overflow-hidden')
+import { Controller, LibStimulus, loadStimulus } from './Stimulus.js'
+import { insertDialog, closeDialog, fetchDialog, dialogSelector } from 'winduum/src/libraries/dialog.js'
+import { replaceScript } from '../Utils/Functions/+.js'
+
+LibStimulus.register('lib-dialog', class extends Controller {
+    static values = {
+        open: String,
+        url: String
+    }
 
-                if (document.querySelector('#l-header') !== null) {
-                    document.querySelector('#l-header').style.right = `${offset}px`
-                }
+    async connect () {
+        if (this.hasOpenValue) {
+            if (this.hasUrlValue) {
+                await fetchDialog({
+                    url: this.urlValue, insertOptions: { remove: true }
+                })
+            } else {
+                await insertDialog(document.querySelector(this.openValue).innerHTML, {
+                    remove: true
+                })
             }
 
-            loadStimulus(document.querySelector('.lib-dialog'))
-
-            document.querySelector('.lib-dialog').focus()
+            loadStimulus(dialogSelector('.lib-dialog'))
+        }
+    }
 
-            resolve()
+    async show ({ currentTarget, params }) {
+        currentTarget.classList.add('loading', 'cursor-wait')
 
-            document.querySelector('.lib-dialog').addEventListener('mousedown', e => {
-                if (e.target.classList.contains('lib-dialog')) {
-                    document.documentElement.addEventListener('mouseup', function e() {
-                        LibDialog.hide()
-                        document.documentElement.removeEventListener('mouseup', e)
-                    })
-                }
-            }, true)
-        })
-    },
-    hide: async() => {
-        return new Promise(resolve => {
-            if (document.querySelector('.lib-dialog') !== null) {
-                document.querySelector('.lib-dialog')._addDataValue('state', 'hiding')
+        await fetchDialog({
+            url: params.url,
+            insertOptions: {
+                remove: params.remove ?? true,
+                append: params.append ?? false
             }
-
-            setTimeout(() => {
-                if (document.querySelector('.lib-dialog') !== null) {
-                    document.querySelector('.lib-dialog').style.display = 'none'
-                    document.documentElement.classList.remove('overflow-hidden')
-
-                    if (document.querySelector('#l-header') !== null) {
-                        document.querySelector('#l-header').style.right = ''
-                    }
-
-                    document.querySelector('.lib-dialog').remove()
-                }
-
-                resolve()
-            }, 300)
+        }).then(() => {
+            loadStimulus(dialogSelector('.lib-dialog'))
+            replaceScript(dialogSelector('.lib-dialog'))
         })
-    },
-    action: async(element, url) => {
-        element._addDataValue('state', 'loading')
-        element.classList.add('cursor-wait')
 
-        fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } }).then(response => response.json()).then(({ dialog }) => {
-            LibDialog.show(dialog)
-            element._removeDataValue('state', 'loading')
-            element.classList.remove('cursor-wait')
-        })
+        currentTarget.classList.remove('loading', 'cursor-wait')
     }
-}
 
-export default LibDialog
+    async close ({ currentTarget, params }) {
+        await closeDialog(currentTarget.closest('dialog'), { remove: params.remove ?? false })
+    }
+})

package/src/scripts/Libraries/Drawer.js

@@ -1,40 +1,41 @@
 import { LibStimulus, Controller } from './Stimulus.js'
 
-LibStimulus.register('lib-drawer', class extends Controller {
-    static targets = ['nav']
-
-    init() {
-        setTimeout(() => this.navTarget.classList.add('is-transition'), 50)
-        this.navTarget.addEventListener('click', ({ target }) => {
-            if (target === this.navTarget) {
+LibStimulus.register('lib-drawer', class LibDrawer extends Controller {
+    connect () {
+        setTimeout(() => this.element.classList.add('is-transition'), 50)
+        this.element.addEventListener('click', ({ target }) => {
+            if (target === this.element) {
                 this.hide()
             }
         })
     }
 
-    show() {
-        this.navTarget.scrollLeft = 0
-        this.navTarget.style.setProperty('--lib-drawer-opacity', '1')
-        this.navTarget.classList.add('is-opacity')
-        this.navTarget._addDataValue('state', 'active')
+    show () {
+        this.element.scrollLeft = 0
+        this.element.style.setProperty('--lib-drawer-opacity', '1')
+        this.element.classList.add('is-opacity', 'active')
+        this.element.setAttribute('aria-hidden', 'false')
+        this.element.removeAttribute('inert')
         document.documentElement.classList.add('overflow-hidden')
     }
 
-    hide() {
-        this.navTarget._removeDataValue('state', 'active')
-        this.navTarget.classList.add('is-opacity')
-        this.navTarget.style.setProperty('--lib-drawer-opacity', '0')
+    hide () {
+        this.element.setAttribute('inert', '')
+        this.element.setAttribute('aria-hidden', 'true')
+        this.element.classList.remove('active')
+        this.element.classList.add('is-opacity')
+        this.element.style.setProperty('--lib-drawer-opacity', '0')
         document.documentElement.classList.remove('overflow-hidden')
     }
 
-    scroll({ target }) {
+    scroll ({ target }) {
         if (target.scrollLeft > 1) {
-            this.navTarget.classList.remove('is-opacity')
-            this.navTarget.style.setProperty('--lib-drawer-opacity', `${Math.abs((target.scrollLeft / this.navTarget.children[0].clientWidth) - 1)}`)
+            this.element.classList.remove('is-opacity')
+            this.element.style.setProperty('--lib-drawer-opacity', `${Math.abs((target.scrollLeft / this.element.children[0].clientWidth) - 1)}`)
         }
 
-        if (target.scrollLeft === this.navTarget.children[0].clientWidth) {
-            this.navTarget._removeDataValue('state', 'active')
+        if (target.scrollLeft === this.element.children[0].clientWidth) {
+            this.element.classList.remove('active')
             document.documentElement.classList.remove('overflow-hidden')
         }
     }

package/src/scripts/Libraries/Form.js

@@ -1,31 +1,26 @@
 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()
 
             this.element.querySelector(':invalid').scrollIntoView({ behavior: 'smooth', block: 'center' })
             this.element.querySelector(':invalid').focus()
+        } else {
+            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

@@ -0,0 +1,33 @@
+import naja from 'naja'
+import { Controller, LibStimulus, loadStimulus } from './Stimulus.js'
+
+LibStimulus.register('lib-naja', class extends Controller {
+    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 }))
+
+            if (element?.form && !element.form.reportValidity()) {
+                arguments[0].preventDefault()
+            }
+        })
+
+        naja.snippetHandler.addEventListener('afterUpdate', ({ detail }) => {
+            detail?.options.target.dispatchEvent(new CustomEvent('naja:afterUpdate', { bubbles: true, cancelable: true }))
+
+            loadStimulus(document.body, false)
+        })
+
+        naja.uiHandler.selector = '[data-naja]'
+        naja.initialize({
+            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

@@ -1,4 +1,5 @@
 import { LibStimulus, Controller } from './Stimulus.js'
+import naja from 'naja'
 import importScript from '../Utils/Functions/importScript.js'
 import cdn from '../Utils/cdn.js'
 
@@ -8,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 => {
@@ -23,10 +24,19 @@ LibStimulus.register('lib-recaptcha', class extends Controller {
         })
     }
 
-    async submit() {
+    async submit ({ params }) {
+        if (this.element.reportValidity() === false) {
+            return false
+        }
+
         arguments[0].preventDefault()
 
         await this.execute()
-        this.element.submit()
+
+        if (!params.naja) {
+            this.element.submit()
+        } else {
+            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,28 +1,50 @@
 import Swup from 'swup'
+import { closeDialog } from 'winduum/src/libraries/dialog.js'
+import { hideTippy } from './Tippy.js'
 import { getController, loadStimulus } from './Stimulus.js'
-import LibAnchor from './Anchor.js'
-import LibDialog from './Dialog.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) {
-        getController(document.body, 'lib-drawer').hide()
+    const LibDrawerSelector = document.querySelector('.lib-drawer.active')
+    const LibDialogSelector = document.querySelector('.lib-dialog')
+
+    hideTippy()
+
+    if (LibDrawerSelector) {
+        /** @type {LibDrawer} */
+        const LibDrawer = getController(LibDrawerSelector, 'lib-drawer')
+
+        LibDrawer.hide()
     }
 
-    if (document.querySelector('.lib-dialog') !== null) {
-        await LibDialog.hide()
+    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' })
     }
 })
 
@@ -30,47 +52,41 @@ LibSwup.on('animationOutDone', () => {
     document.documentElement.scroll({ top: 0, behavior: 'instant' })
 })
 
+/** @var {Array} dataLayer */
+/** @var {Function} rc */
+/** @var {Function} retargetingHit */
+/** @var {Function} conversionHit */
+/** @var {Object} retargetingConf */
+/** @var {Object} conversionConf */
+/** @var {Function} fbq */
 LibSwup.on('contentReplaced', () => {
     const content = new DOMParser().parseFromString(LibSwup.cache.getCurrentPage().originalContent, 'text/html')
 
     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))
     })
 
-    if (typeof window.fbq !== 'undefined') {
-        window.fbq('track', 'PageView')
-    }
-
-    if (typeof gtag !== 'undefined') {
-        const configs = []
-        window.dataLayer.forEach(function(config) {
-            if (config[0] === 'config') {
-                if (typeof config[1] !== 'undefined' && !configs.includes(config[1])) {
-                    configs.push(config[1])
-                    window.gtag('config', config[1], {
-                        page_title: document.title,
-                        page_path: window.location.pathname + window.location.search
-                    })
-                }
-            }
-        })
-    }
+    window.dataLayer && window.dataLayer.push({
+        event: 'page_view'
+    })
 
-    if (typeof window.dataLayer !== 'undefined') {
-        window.dataLayer.push({
-            event: 'VirtualPageview',
-            virtualPageURL: window.location.pathname + window.location.search,
-            virtualPageTitle: document.title
-        })
-    }
+    window.rc?.retargetingHit && window.rc.retargetingHit(window.retargetingConf)
+    window.rc?.conversionHit && window.rc.conversionHit(window.conversionConf)
 
-    if (typeof LibCookieConsent !== 'undefined') {
-        LibCookieConsent.init()
-    }
+    window.fbq && window.fbq('track', 'PageView')
 })
 
+LibSwup.options.cache && setInterval(() => {
+    LibSwup.cache.empty()
+}, 90 * 1000)
+
 export default LibSwup