hakumi_components 0.1.3.pre

data/app/javascript/hakumi_components/controllers/hakumi/notification_controller.js

@@ -0,0 +1,433 @@
+import RegistryController from "../base/registry_controller.js"
+import { Persistence } from "hakumi_components"
+
+const DEFAULT_DURATION = 4.5
+const NOTICE_ANIMATION_MS = 200
+const PLACEMENTS = new Set(["top", "topLeft", "topRight", "bottom", "bottomLeft", "bottomRight"])
+const STORAGE_KEY = "hakumi:notifications"
+
+export default class extends RegistryController {
+    static values = {
+        duration: Number,
+        maxCount: Number,
+        top: Number,
+        bottom: Number,
+        placement: String,
+        pauseOnHover: Boolean,
+        showProgress: Boolean,
+        stackThreshold: Number,
+        payload: String,
+    }
+
+    static mount() {
+        Persistence.bootstrap(STORAGE_KEY, ({ state }) => {
+            if (state?.notices?.length > 0) {
+                Persistence.ensureHost({
+                    id: "notification",
+                    controllerName: "hakumi--notification",
+                    display: "block"
+                })
+            }
+        })
+    }
+
+    setup() {
+        this.notices = new Map()
+        this.noticeOrder = []
+        this.timers = new Map()
+        this.timerMeta = new Map()
+        this._containers = new Map()
+
+        this._config = this.#initialConfig()
+        this.#applyConfigToHost()
+        this.#bootstrapPayload()
+        this.#restoreFromPersistence()
+    }
+
+    teardown() {
+        this.#clearAllTimers()
+    }
+
+    config(options = {}) {
+        this._config = { ...this._config, ...this.#normalizeConfig(options) }
+        this.#applyConfigToHost()
+        return this.getState()
+    }
+
+    open(options = {}) {
+        const payload = this.#normalizeNotice(options)
+        if (!payload.title) return null
+
+        const key = payload.key || this.#generateKey()
+        payload.key = key
+
+        if (this.notices.has(key)) {
+            this.#updateNotice(key, payload)
+            return key
+        }
+
+        const notice = this.#createNoticeElement(payload)
+        this.#appendNotice(key, notice, payload.placement)
+        this.#scheduleClose(key, payload.duration, payload.pauseOnHover)
+        this.#enforceMaxCount()
+        this.#applyStacking(payload.placement)
+
+        if (payload.duration === 0) {
+            this.#updatePersistence()
+        }
+
+        return key
+    }
+
+    success(title, options = {}) {
+        return this.open({ ...this.#toOptions(title, "success"), ...options })
+    }
+
+    info(title, options = {}) {
+        return this.open({ ...this.#toOptions(title, "info"), ...options })
+    }
+
+    warning(title, options = {}) {
+        return this.open({ ...this.#toOptions(title, "warning"), ...options })
+    }
+
+    error(title, options = {}) {
+        return this.open({ ...this.#toOptions(title, "error"), ...options })
+    }
+
+    close(key) {
+        const notice = this.notices.get(key)
+        if (notice) this.#removeNotice(key, notice)
+    }
+
+    destroy(key = null) {
+        if (key) {
+            this.close(key)
+            return
+        }
+        this.noticeOrder.forEach((k) => this.close(k))
+    }
+
+    getState() {
+        return {
+            count: this.noticeOrder.length,
+            config: { ...this._config },
+        }
+    }
+
+    #initialConfig() {
+        return this.#normalizeConfig({
+            duration: this.hasDurationValue ? this.durationValue : DEFAULT_DURATION,
+            maxCount: this.hasMaxCountValue ? this.maxCountValue : null,
+            top: this.hasTopValue ? this.topValue : 24,
+            bottom: this.hasBottomValue ? this.bottomValue : 24,
+            placement: this.hasPlacementValue ? this.placementValue : "topRight",
+            pauseOnHover: this.hasPauseOnHoverValue ? this.pauseOnHoverValue : true,
+            showProgress: this.hasShowProgressValue ? this.showProgressValue : false,
+            stackThreshold: this.hasStackThresholdValue ? this.stackThresholdValue : 3,
+        })
+    }
+
+    #normalizeConfig(options = {}) {
+        const next = { ...options }
+        if (next.placement && !PLACEMENTS.has(next.placement)) next.placement = "topRight"
+        return next
+    }
+
+    #toOptions(args, type) {
+        if (typeof args === "string") return { title: args, type }
+        return { ...args, type }
+    }
+
+    #bootstrapPayload() {
+        if (!this.hasPayloadValue) return
+        try {
+            const payload = JSON.parse(this.payloadValue)
+            if (payload) this.open(payload)
+        } catch { }
+    }
+
+    #restoreFromPersistence() {
+        const data = Persistence.load(STORAGE_KEY)
+        if (!data?.state?.notices) return
+
+        data.state.notices.forEach(notice => {
+            if (!this.notices.has(notice.key)) {
+                this.open({ ...notice, _fromPersistence: true })
+            }
+        })
+    }
+
+    #updatePersistence() {
+        const persistentNotices = Array.from(this.notices.keys())
+            .map(key => this.notices.get(key).__hakumi_payload)
+            .filter(p => p && p.duration === 0)
+
+        if (persistentNotices.length > 0) {
+            Persistence.save(STORAGE_KEY, { version: 1, state: { notices: persistentNotices } })
+        } else {
+            Persistence.storage.remove(STORAGE_KEY)
+        }
+    }
+
+    #normalizeNotice(options = {}) {
+        const cfg = this._config
+        const placement = options.placement || cfg.placement
+
+        return {
+            key: options.key,
+            type: options.type || null,
+            placement: PLACEMENTS.has(placement) ? placement : "topRight",
+            duration: options.duration !== undefined ? Number(options.duration) : cfg.duration,
+            pauseOnHover: options.pauseOnHover !== undefined ? !!options.pauseOnHover : cfg.pauseOnHover,
+            showProgress: options.showProgress !== undefined ? !!options.showProgress : cfg.showProgress,
+            title: options.title || options.message || null,
+            description: options.description || null,
+            icon: options.icon ?? null,
+            closeIcon: options.closeIcon,
+            showClose: options.closeIcon !== false,
+            btn: options.btn || null,
+            className: options.className || options.class || null,
+            _fromPersistence: !!options._fromPersistence,
+        }
+    }
+
+    #applyConfigToHost() {
+        this.element.style.setProperty("--hakumi-notification-top", `${this._config.top}px`)
+        this.element.style.setProperty("--hakumi-notification-bottom", `${this._config.bottom}px`)
+    }
+
+    #getContainer(placement) {
+        const key = placement || "topRight"
+        let el = this._containers.get(key)
+        if (!el || !el.isConnected) {
+            el = document.createElement("div")
+            el.className = `hakumi-notification-container hakumi-notification-${key}`
+            this.element.appendChild(el)
+            this._containers.set(key, el)
+        }
+        return el
+    }
+
+    #createNoticeElement(payload) {
+        const notice = document.createElement("div")
+        notice.className = `hakumi-notification-notice`
+
+        if (payload._fromPersistence) {
+            notice.classList.add("hakumi-notification-notice-enter-active")
+        } else {
+            notice.classList.add("hakumi-notification-notice-enter")
+        }
+
+        if (payload.type) notice.classList.add(`hakumi-notification-notice-${payload.type}`)
+        if (payload.className) notice.classList.add(payload.className)
+
+        notice.__hakumi_payload = payload
+
+        const iconMarkup = this.#resolveIconMarkup(payload.type, payload.icon)
+        if (iconMarkup) notice.classList.add("hakumi-notification-notice-with-icon")
+
+        const content = document.createElement("div")
+        content.className = "hakumi-notification-notice-content"
+
+        if (iconMarkup) {
+            const icon = document.createElement("div")
+            icon.className = "hakumi-notification-notice-icon"
+            icon.innerHTML = iconMarkup
+            notice.appendChild(icon)
+        }
+
+        const message = document.createElement("div")
+        message.className = "hakumi-notification-notice-message"
+        message.textContent = payload.title
+        content.appendChild(message)
+
+        if (payload.description) {
+            const desc = document.createElement("div")
+            desc.className = "hakumi-notification-notice-description"
+            desc.textContent = payload.description
+            content.appendChild(desc)
+        }
+
+        if (payload.btn) {
+            const btn = document.createElement("div")
+            btn.className = "hakumi-notification-notice-btn"
+            if (payload.btn instanceof Node) btn.appendChild(payload.btn)
+            else btn.innerHTML = payload.btn
+            content.appendChild(btn)
+        }
+
+        notice.appendChild(content)
+
+        if (payload.showClose) {
+            const close = document.createElement("button")
+            close.className = "hakumi-notification-notice-close"
+            close.innerHTML = this.#closeIconMarkup(payload.closeIcon)
+            close.onclick = (e) => {
+                e.stopPropagation()
+                this.close(payload.key)
+            }
+            notice.appendChild(close)
+        }
+
+        if (payload.showProgress && payload.duration > 0) {
+            const progress = document.createElement("div")
+            progress.className = "hakumi-notification-notice-progress"
+            progress.style.setProperty("--hakumi-notification-progress-duration-ms", `${payload.duration * 1000}ms`)
+            notice.appendChild(progress)
+        }
+
+        notice.onmouseenter = () => this.#pauseTimer(payload.key)
+        notice.onmouseleave = () => this.#resumeTimer(payload.key)
+
+        if (!payload._fromPersistence) {
+            requestAnimationFrame(() => {
+                notice.classList.add("hakumi-notification-notice-enter-active")
+                notice.classList.remove("hakumi-notification-notice-enter")
+            })
+        }
+
+        return notice
+    }
+
+    #appendNotice(key, notice, placement) {
+        this.#getContainer(placement).appendChild(notice)
+        this.notices.set(key, notice)
+        this.noticeOrder.push(key)
+    }
+
+    #updateNotice(key, payload) {
+        const oldNotice = this.notices.get(key)
+        if (oldNotice) {
+            oldNotice.remove()
+        }
+        this.notices.delete(key)
+        this.noticeOrder = this.noticeOrder.filter(k => k !== key)
+        this.open(payload)
+    }
+
+    #scheduleClose(key, duration, pauseOnHover) {
+        this.#clearTimer(key)
+        if (duration <= 0) return
+
+        const totalMs = duration * 1000
+        const startedAt = Date.now()
+        const timeout = setTimeout(() => this.close(key), totalMs)
+
+        this.timers.set(key, timeout)
+        this.timerMeta.set(key, { startedAt, totalMs, remainingMs: totalMs, paused: false, pauseOnHover })
+    }
+
+    #pauseTimer(key) {
+        const meta = this.timerMeta.get(key)
+        if (!meta || !meta.pauseOnHover || meta.paused) return
+        this.#clearTimer(key)
+        meta.remainingMs -= (Date.now() - meta.startedAt)
+        meta.paused = true
+        this.notices.get(key)?.classList.add("hakumi-notification-notice-paused")
+    }
+
+    #resumeTimer(key) {
+        const meta = this.timerMeta.get(key)
+        if (!meta || !meta.paused) return
+        meta.paused = false
+        meta.startedAt = Date.now()
+        const timeout = setTimeout(() => this.close(key), meta.remainingMs)
+        this.timers.set(key, timeout)
+        this.notices.get(key)?.classList.remove("hakumi-notification-notice-paused")
+    }
+
+    #removeNotice(key, notice) {
+        this.#clearTimer(key)
+        notice.classList.add("hakumi-notification-notice-leave-active")
+        setTimeout(() => {
+            const wasPersistent = notice.__hakumi_payload?.duration === 0
+            notice.remove()
+            this.notices.delete(key)
+            this.noticeOrder = this.noticeOrder.filter(k => k !== key)
+
+            if (wasPersistent) {
+                this.#updatePersistence()
+            }
+
+            if (this.noticeOrder.length === 0) this.#dispatchHidden()
+        }, NOTICE_ANIMATION_MS)
+    }
+
+    #enforceMaxCount() {
+        const max = this._config.maxCount
+        if (max && this.noticeOrder.length > max) {
+            this.close(this.noticeOrder[0])
+        }
+    }
+
+    #applyStacking(placement) {
+        const threshold = this._config.stackThreshold
+        if (!threshold) return
+        const container = this.#getContainer(placement)
+        const items = container.querySelectorAll(".hakumi-notification-notice")
+        container.classList.toggle("hakumi-notification-stack", items.length > threshold)
+    }
+
+    #clearTimer(key) {
+        if (this.timers.has(key)) {
+            clearTimeout(this.timers.get(key))
+            this.timers.delete(key)
+        }
+    }
+
+    #clearAllTimers() {
+        this.timers.forEach(t => clearTimeout(t))
+        this.timers.clear()
+    }
+
+    #generateKey() {
+        return `hakumi-notice-${Math.random().toString(36).slice(2, 9)}`
+    }
+
+    #dispatchHidden() {
+        this.element.dispatchEvent(new CustomEvent("hakumi-component:hidden", { bubbles: true }))
+    }
+
+    #resolveIconMarkup(type, custom) {
+        if (custom === false) return null
+        if (typeof custom === "string" && custom.startsWith("<")) return custom
+        const icons = {
+            success: '<span class="anticon anticon-check-circle"><svg viewBox="64 64 896 896" width="1em" height="1em" fill="currentColor"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg></span>',
+            info: '<span class="anticon anticon-info-circle"><svg viewBox="64 64 896 896" width="1em" height="1em" fill="currentColor"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span>',
+            warning: '<span class="anticon anticon-exclamation-circle"><svg viewBox="64 64 896 896" width="1em" height="1em" fill="currentColor"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span>',
+            error: '<span class="anticon anticon-close-circle"><svg viewBox="64 64 896 896" width="1em" height="1em" fill="currentColor"><path d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"></path></svg></span>',
+        }
+        return icons[custom || type] || null
+    }
+
+    #closeIconMarkup(custom) {
+        if (custom) return custom
+        return '<span class="anticon anticon-close"><svg viewBox="64 64 896 896" width="1em" height="1em" fill="currentColor"><path d="M563.8 512l262.5-312.9a8.7 8.7 0 00-1.4-12.2l-45.4-37.8a8.7 8.7 0 00-12.2 1.4L512 427.2 256.7 150.5a8.7 8.7 0 00-12.2-1.4l-45.4 37.8a8.7 8.7 0 00-1.4 12.2L460.2 512 197.7 824.9a8.7 8.7 0 001.4 12.2l45.4 37.8a8.7 8.7 0 0012.2-1.4L512 596.8l255.3 276.7a8.7 8.7 0 0012.2 1.4l45.4-37.8a8.7 8.7 0 001.4-12.2L563.8 512z"></path></svg></span>'
+    }
+
+    registerApi() {
+        const api = {
+            open: (opt) => this.open(opt),
+            success: (title, opt) => this.success(title, opt),
+            info: (title, opt) => this.info(title, opt),
+            warning: (title, opt) => this.warning(title, opt),
+            error: (title, opt) => this.error(title, opt),
+            close: (k) => this.close(k),
+            destroy: (k) => this.destroy(k),
+            config: (opt) => this.config(opt),
+            getState: () => this.getState(),
+        }
+
+        this.element.hakumiComponent = {
+            name: "notification",
+            version: 1,
+            singleton: true,
+            api,
+            apply: (p = {}) => {
+                if (Object.keys(p).length > 0) api.open(p)
+                return null
+            },
+        }
+    }
+}