@newlogic-digital/ui 3.5.0 → 4.0.0

package/src/scripts/Components/CookieConsent.js

@@ -1,78 +0,0 @@
-import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
-import LibCookieConsent from '../Libraries/CookieConsent.js'
-
-LibStimulus.register('c-cookieconsent', class extends Controller {
-    connect () {
-        const selector = this.element
-
-        if (document.querySelector('.c-form-cookieconsent') !== null) {
-            return
-        }
-
-        if (LibCookieConsent.getItem('lib-cookieconsent') === null || parseInt(LibCookieConsent.getItem('lib-cookieconsent-expire')) < Date.now()) {
-            setTimeout(() => {
-                selector.classList.add('active', 'is-animate')
-            }, 1500)
-        }
-    }
-
-    approve () {
-        this.hide(['performance', 'marketing'])
-    }
-
-    decline () {
-        this.hide([])
-    }
-
-    hide (type) {
-        LibCookieConsent.set(type)
-        this.element.classList.remove('is-animate')
-
-        setTimeout(() => {
-            this.element.classList.remove('active')
-            this.element.remove()
-        }, 500)
-    }
-})
-LibStimulus.register('c-form-cookieconsent', class extends Controller {
-    connect () {
-        const selector = this.element
-        const type = LibCookieConsent.getItem('lib-cookieconsent')
-        const modal = document.querySelector('.c-cookieconsent')
-
-        if (modal) {
-            modal.classList.remove('is-animate', 'active')
-        }
-
-        if (type !== null) {
-            this.element.querySelectorAll('input:not([disabled])').forEach(input => {
-                input.checked = false
-            })
-
-            JSON.parse(type).forEach(type => {
-                if (selector.querySelector(`input[value="${type}"]`) !== null) {
-                    selector.querySelector(`input[value="${type}"]`).checked = true
-                }
-            })
-        }
-    }
-
-    update () {
-        const type = []
-
-        this.element.querySelectorAll('input:not([disabled])').forEach(input => {
-            input.checked && type.push(input.value)
-        })
-
-        LibCookieConsent.set(type)
-        location.reload()
-    }
-
-    disconnect () {
-        const modal = document.querySelector('.c-cookieconsent')
-
-        if (modal && (LibCookieConsent.getItem('lib-cookieconsent') === null || parseInt(LibCookieConsent.getItem('lib-cookieconsent-expire')) < Date.now())) {
-            modal.classList.add('active', 'is-animate')
-        }
-    }
-})

package/src/scripts/Layout/+.js

@@ -1,2 +0,0 @@
-import './Header.js'
-import './Main.js'

package/src/scripts/Layout/Header.js

@@ -1,32 +0,0 @@
-import { LibStimulus, Controller, getController } from '../Libraries/Stimulus.js'
-
-LibStimulus.register('l-header',
-    /** @property {LibDrawer} libDrawerOutlet */
-    class extends Controller {
-        connect () {
-            if (document.querySelector('#l-nav') === null) {
-                this.element.insertAdjacentHTML('afterend', `
-                    <div id="l-nav" class="lib-drawer" data-controller="lib-drawer" data-action="scroll->lib-drawer#scroll" inert>
-                        <div class="l_nav">
-                            <div class="l_nav_head"></div>
-                            <div class="l_nav_body"></div>
-                        </div>
-                    </div>
-                `)
-
-                const layoutNav = document.querySelector('#l-nav')
-                const logo = this.element.querySelector('.l_header_logo').outerHTML
-                const nav = this.element.querySelector('.l_header_nav').outerHTML
-
-                layoutNav.querySelector('.l_nav_head').insertAdjacentHTML('beforeend', logo)
-                layoutNav.querySelector('.l_nav_body').insertAdjacentHTML('beforeend', nav)
-            }
-        }
-
-        showDrawer () {
-            /** @type {LibDrawer} */
-            const LibDrawer = getController(document.querySelector('[data-controller~="lib-drawer"]'), 'lib-drawer')
-            LibDrawer.show()
-        }
-    }
-)

package/src/scripts/Layout/Main.js

@@ -1,50 +0,0 @@
-import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
-import LibTippy from '../Libraries/Tippy.js'
-import { initSlider, nextSlide, prevSlide, selectSlide } from '../Libraries/Slider.js'
-
-LibStimulus.register('lib', class extends Controller {
-    darkMode () {
-        if (document.documentElement.classList.contains('dark')) {
-            localStorage.theme = 'light'
-            document.documentElement.classList.remove('dark')
-        } else {
-            localStorage.theme = 'dark'
-            document.documentElement.classList.add('dark')
-        }
-    }
-})
-
-LibStimulus.register('lib-tippy', class extends Controller {
-    connect () {
-        const attributes = this.element.dataset.libTippy
-
-        new LibTippy(this.element, attributes?.replace(/\s/g, '')?.split(','))
-    }
-})
-
-LibStimulus.register('lib-slider', class extends Controller {
-    static targets = ['slider', 'dots', 'progress', 'counterMin', 'counterMax']
-
-    connect () {
-        initSlider(this.sliderTarget, {
-            paginationSelector: this.hasDotsTarget ? this.dotsTarget : null,
-            paginationItemClass: 'ui-dot',
-            progressSelector: this.hasProgressTarget ? this.progressTarget : null,
-            counterMinSelector: this.hasCounterMinTarget ? this.counterMinTarget : null,
-            counterMaxSelector: this.hasCounterMaxTarget ? this.counterMaxTarget : null,
-            pauseSelector: this.element.querySelectorAll('[data-action*="lib-slider"]')
-        })
-    }
-
-    next () {
-        nextSlide(this.sliderTarget)
-    }
-
-    prev () {
-        prevSlide(this.sliderTarget)
-    }
-
-    select () {
-        selectSlide(this.sliderTarget)
-    }
-})

package/src/scripts/Libraries/+.js

@@ -1,12 +0,0 @@
-export { default as CookieConsent } from './CookieConsent.js'
-import './Dialog.js'
-import './Drawer.js'
-import './Form.js'
-import './Naja.js'
-import './ReCaptcha.js'
-import './Ripple.js'
-import './Script.js'
-import './Slider.js'
-import './Stimulus.js'
-export { default as Swup } from './Swup.js'
-export { default as Tippy } from './Tippy.js'

package/src/scripts/Libraries/CookieConsent.js

@@ -1,67 +0,0 @@
-const LibCookieConsent = {
-    setItem: (key, value) => {
-        localStorage.setItem(key, value)
-    },
-    getItem: (key) => {
-        return localStorage.getItem(key)
-    },
-    init: () => {
-        const type = LibCookieConsent.getItem('lib-cookieconsent')
-
-        if (type !== null) {
-            JSON.parse(type).forEach(type => LibCookieConsent.append(type))
-        }
-    },
-    set: (type) => {
-        LibCookieConsent.setItem('lib-cookieconsent', JSON.stringify(type))
-        LibCookieConsent.setItem('lib-cookieconsent-expire', (Date.now() + 31556926 * 1000).toString())
-
-        if (type.length > 0) {
-            type.forEach(type => LibCookieConsent.append(type))
-        } else {
-            LibCookieConsent.setItem('lib-cookieconsent', JSON.stringify([]))
-            LibCookieConsent.remove()
-        }
-    },
-    remove: () => {
-        document.cookie.split(';').forEach(c => {
-            document.cookie = c.replace(/^ +/, '').replace(/=.*/, '=;expires=' + new Date().toUTCString() + ';path=/')
-        })
-    },
-    append: (type) => {
-        document.querySelectorAll('[data-lib-cookieconsent]').forEach(elm => {
-            if (type === 'all' || elm.getAttribute('data-lib-cookieconsent') === type) {
-                const script = document.createElement('script')
-                let delay = 0
-
-                ;[...elm.attributes].forEach((attribute) => {
-                    if (attribute.specified) {
-                        if (attribute.name.indexOf('data-lib-cookieconsent') === -1 && attribute.name.indexOf('type') === -1) {
-                            script.setAttribute(attribute.name, attribute.value)
-                        }
-                    }
-                })
-
-                script.innerHTML = elm.innerHTML
-
-                if (elm.getAttribute('data-lib-cookieconsent-delay')) {
-                    delay = parseInt(elm.getAttribute('data-lib-cookieconsent-delay'))
-                }
-
-                setTimeout(() => {
-                    if (elm.closest('body') !== null) {
-                        document.body.appendChild(script)
-                    } else if (elm.closest('head') !== null) {
-                        document.head.appendChild(script)
-                    }
-
-                    elm.remove()
-                }, delay)
-            }
-        })
-    }
-}
-
-LibCookieConsent.init()
-
-export default LibCookieConsent

package/src/scripts/Libraries/Dialog.js

@@ -1,47 +0,0 @@
-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
-    }
-
-    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(dialogSelector('.lib-dialog'))
-        }
-    }
-
-    async show ({ currentTarget, params }) {
-        currentTarget.classList.add('loading', 'cursor-wait')
-
-        await fetchDialog({
-            url: params.url,
-            insertOptions: {
-                remove: params.remove ?? true,
-                append: params.append ?? false
-            }
-        }).then(() => {
-            loadStimulus(dialogSelector('.lib-dialog'))
-            replaceScript(dialogSelector('.lib-dialog'))
-        })
-
-        currentTarget.classList.remove('loading', 'cursor-wait')
-    }
-
-    async close ({ currentTarget, params }) {
-        await closeDialog(currentTarget.closest('dialog'), { remove: params.remove ?? false })
-    }
-})

package/src/scripts/Libraries/Drawer.js

@@ -1,42 +0,0 @@
-import { LibStimulus, Controller } from './Stimulus.js'
-
-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.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.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 }) {
-        if (target.scrollLeft > 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.element.children[0].clientWidth) {
-            this.element.classList.remove('active')
-            document.documentElement.classList.remove('overflow-hidden')
-        }
-    }
-})

package/src/scripts/Libraries/Form.js

@@ -1,26 +0,0 @@
-import { LibStimulus, Controller } from './Stimulus.js'
-import { inputValidity } from '../Utils/Functions/+.js'
-
-LibStimulus.register('lib-form', class extends Controller {
-    connect () {
-        this.element.setAttribute('novalidate', '')
-        this.element.addEventListener('submit', e => this.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-control, .ui-check, .ui-switch').forEach(element => {
-            console.log(element)
-            inputValidity(element, { message: true })
-        })
-    }
-})

package/src/scripts/Libraries/Naja.js

@@ -1,33 +0,0 @@
-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,42 +0,0 @@
-import { LibStimulus, Controller } from './Stimulus.js'
-import naja from 'naja'
-import importScript from '../Utils/Functions/importScript.js'
-import cdn from '../Utils/cdn.js'
-
-LibStimulus.register('lib-recaptcha', class extends Controller {
-    static values = {
-        api: String,
-        action: String
-    }
-
-    connect () {
-        importScript(cdn.recaptcha.replace('{apikey}', this.apiValue))
-    }
-
-    async execute () {
-        return new Promise(resolve => {
-            window.grecaptcha.enterprise.ready(() => {
-                window.grecaptcha.enterprise.execute(this.apiValue, { action: this.actionValue ?? 'form' }).then(token => {
-                    this.element.querySelector('[name="gtoken"]').value = token
-                    resolve()
-                })
-            })
-        })
-    }
-
-    async submit ({ params }) {
-        if (this.element.reportValidity() === false) {
-            return false
-        }
-
-        arguments[0].preventDefault()
-
-        await this.execute()
-
-        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,8 +0,0 @@
-import { Controller, LibStimulus } from './Stimulus.js'
-import { showRipple } from 'winduum/src/libraries/ripple.js'
-
-LibStimulus.register('lib-ripple', class extends Controller {
-    async show (e) {
-        showRipple(e)
-    }
-})

package/src/scripts/Libraries/Script.js

@@ -1,18 +0,0 @@
-import { LibStimulus, Controller } from './Stimulus.js'
-
-LibStimulus.register('lib-script', class extends Controller {
-    connect () {
-        const element = this.element
-        const script = document.createElement('script')
-
-        ;[...element.attributes].forEach(attribute => {
-            if (attribute.specified && !attribute.name.includes('type') && !attribute.name.includes('data-controller')) {
-                script.setAttribute(attribute.name, attribute.value)
-            }
-        })
-
-        script.innerHTML = element.innerHTML
-        element.parentElement.appendChild(script)
-        element.remove()
-    }
-})

package/src/scripts/Libraries/Slider.js

@@ -1,160 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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))
-
-window.LibStimulus = { default: LibStimulus, Controller, loadStimulus }
-
-export { LibStimulus, Controller, loadStimulus, getController }