@kizmann/nano-ui 1.1.0 → 1.1.2

package/src/popover/index.scss

@@ -1 +1 @@
-@import "./src/popover/popover";
+@forward "./src/popover/popover";

package/src/popover/src/popover/popover-element.mjs

@@ -0,0 +1,578 @@
+import { Any, Dom, Arr, Obj, UUID } from "@kizmann/pico-js";
+import { PopoverHelper } from "./popover-helper.mjs";
+import PopoverHandler from "./popover-handler.mjs";
+
+
+export class PopoverElement
+{
+    static alias = 'Popover';
+
+    visible = false;
+
+    options = {
+        parent: null,
+        target: null,
+        listen: false,
+        trigger: 'hover',
+        toggle: false,
+        position: 'bottom-center',
+        width: -1,
+        scrollClose: true,
+        multiClose: true,
+    };
+
+    client = {
+        x: 0, y: 0
+    };
+
+    events = {};
+
+    constructor(el, options = {})
+    {
+        this.options = Obj.assign(this.options, options, {
+            el
+        });
+
+        if ( ! options.uid ) {
+            options.uid = UUID()
+        }
+
+        this.bind();
+    }
+
+    bind()
+    {
+        let { uid, trigger } = this.options;
+
+        if ( trigger === 'hover' ) {
+            Dom.find(document.body).on(PopoverHelper.getHoverEvent(),
+                Any.framerate((e) => this.onHover(e), 30), { uid });
+        }
+
+        if ( trigger === 'click' ) {
+            Dom.find(document.body).on(PopoverHelper.getClickEvent(),
+                Any.throttle((e) => this.onClick(e), 30), { uid });
+        }
+
+        if ( trigger === 'context' ) {
+            Dom.find(document.body).on(PopoverHelper.getContextEvent(),
+                Any.throttle((e) => this.onContext(e), 30), { uid });
+        }
+    }
+
+    unbind()
+    {
+        let { uid, trigger } = this.options;
+
+        if ( trigger === 'hover' ) {
+            Dom.find(document).off(PopoverHelper.getHoverEvent(),
+                null, { uid });
+        }
+
+        if ( trigger === 'click' ) {
+            Dom.find(document).off(PopoverHelper.getClickEvent(),
+                null, { uid });
+        }
+
+        if ( trigger === 'context' ) {
+            Dom.find(document).off(PopoverHelper.getContextEvent(),
+                null, { uid });
+        }
+    }
+
+    parents()
+    {
+        let { parent } = this.options;
+
+        if ( Any.isEmpty(parent) ) {
+            return [];
+        }
+
+        return Arr.merge(parent.parents(), [
+            parent.options.uid
+        ]);
+    }
+
+    currentChange(parents)
+    {
+        let { uid, multiClose } = this.options;
+
+        if ( ! multiClose || Arr.has(parents, uid) ) {
+            return;
+        }
+
+        this.hide('multi')
+    }
+
+    on(event, cb)
+    {
+        this.events[event] = cb;
+    }
+
+    off(event)
+    {
+        delete this.events[event];
+    }
+
+    show(event = 'default')
+    {
+        if ( this.interval ) {
+            clearInterval(this.interval);
+        }
+
+        this.interval = setTimeout(() => {
+            this.showQueue(event);
+        }, 100);
+    }
+
+    showQueue(event = 'default')
+    {
+        if ( this.visible ) {
+            return this.updatePosition();
+        }
+
+        let { el } = this.options;
+
+        Dom.find(el).attr('data-ready', 'true');
+
+        if ( Any.isFunction(this.events['open']) ) {
+            this.events['open'].apply({}, [event]);
+        }
+
+        requestAnimationFrame(() => {
+            this.updatePosition();
+        });
+
+        requestAnimationFrame(() => {
+            this.bindResizeObserver();
+        });
+
+        this.visible = true;
+
+        PopoverHandler.setCurrent(this);
+    }
+
+    hide(event = 'default')
+    {
+        if ( this.interval ) {
+            clearInterval(this.interval);
+        }
+
+        this.interval = setTimeout(() => {
+            this.hideQueue(event);
+        }, 50);
+    }
+
+    hideQueue(event = 'default')
+    {
+        let { el } = this.options;
+
+        Dom.find(el).attr('data-ready', null);
+
+        if ( Any.isFunction(this.events['close']) ) {
+            this.events['close'].apply({}, [event]);
+        }
+
+        this.unbindResizeObserver();
+
+        this.visible = false;
+
+        PopoverHandler.unsetCurrent(this);
+    }
+
+    onHover(event)
+    {
+        let { el, target } = this.options;
+
+        let tgt = Dom.find(event.target).closest(target),
+            src = Dom.find(event.target).closest(el);
+
+        let result = (!! tgt || !! src);
+
+        if ( this.visible === result ) {
+            return;
+        }
+
+        if ( ! result ) {
+            return this.hideQueue('hover');
+        }
+
+        this.showQueue('hover');
+    }
+
+    onClick(event)
+    {
+        let { el, target } = this.options;
+
+        let keyCode = event.which === 1 || event.which === 0;
+
+        if ( ! keyCode ) {
+            return;
+        }
+
+        let tgt = Dom.find(event.target).closest(target),
+            src = Dom.find(event.target).closest(el);
+
+        if ( this.visible ) {
+            return this.options.toggle && tgt && this.hideQueue('click');
+        }
+
+        let result = (!! tgt || !! src);
+
+        if ( this.visible === result ) {
+            return;
+        }
+
+        this.showQueue('click');
+    }
+
+    onContext(event)
+    {
+        let { el, target } = this.options;
+
+        let keyCode = event.which === 3;
+
+        if ( !keyCode ) {
+            return;
+        }
+
+        let tgt = Dom.find(event.target).closest(target),
+            src = Dom.find(event.target).closest(el);
+
+        this.client.x = event.clientX;
+        this.client.y = event.clientY;
+
+        let result = (!! tgt || !! src);
+
+        if ( result ) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+
+        if ( ! result ) {
+            return;
+        }
+
+        this.showQueue('context');
+    }
+
+    bindResizeObserver()
+    {
+        let { el } = this.options;
+
+        this.observer = new ResizeObserver(() => {
+            this.updatePosition();
+        });
+
+        this.observer.observe(el);
+    }
+
+    unbindResizeObserver()
+    {
+        if ( this.observer ) {
+            this.observer.disconnect();
+        }
+    }
+
+    updatePosition()
+    {
+        let { el, target, width } = this.options;
+
+        let [offset, scroll] = [
+            this.getTargetOffset(), Dom.find(document.body).scroll()
+        ];
+
+        Dom.find(el).attr('data-position', offset.position);
+
+        if ( ! window.zIndex ) {
+            window.zIndex = 9000;
+        }
+
+        let style = Obj.assign(Dom.find(el).css(), {
+            'z-index':  window.zIndex++,
+            'top':      Math.round(offset.y + scroll.top) + 'px',
+            'left':     Math.round(offset.x + scroll.left) + 'px',
+        });
+
+        let rect = target.getBoundingClientRect();
+
+        if ( width === -1 ) {
+            style.width = Math.round(rect.width) + 'px';
+        }
+
+        Dom.find(el).css(style);
+
+        if ( ! style['--n-parent-width'] ) {
+            style['--n-parent-width'] = `${rect.width}px`;
+        }
+
+        if ( ! style['--n-node-width'] && Dom.find(el).innerWidth() ) {
+            style['--n-node-width'] = `${el.clientWidth}px`;
+        }
+
+        if ( ! style['--n-parent-height'] ) {
+            style['--n-parent-height'] = `${rect.height}px`;
+        }
+
+        if ( ! style['--n-node-height'] && Dom.find(el).innerHeight() ) {
+            style['--n-node-height'] = `${el.clientHeight}px`;
+        }
+
+        Dom.find(el).css(style);
+    }
+
+    getTargetHorizontal(position, fallback = null)
+    {
+        let { el, target, trigger, width, scrollClose } = this.options;
+
+        let targetRect = target.getBoundingClientRect();
+
+        if ( trigger === 'context' ) {
+            targetRect = {
+                top: this.client.y, left: this.client.x, width: 2, height: 2
+            };
+        }
+
+        let windowRect = el.getBoundingClientRect();
+
+        if ( width === -1 ) {
+            windowRect.width = targetRect.width;
+        }
+
+        let posY = {
+
+            // Set above the tagret element
+            start: targetRect.top - windowRect.height,
+
+            // Set at bottom of target element
+            end: targetRect.top + targetRect.height,
+
+        };
+
+        let posX = {
+
+            // Set on the left of target element
+            start: targetRect.left,
+
+            // Set into the center of the target element
+            center: targetRect.left + (targetRect.width * 0.5) -
+                (windowRect.width * 0.5),
+
+            // Set on the right of the target element
+            end: targetRect.left + targetRect.width -
+                windowRect.width,
+
+        };
+
+        let offset = { x: 0, y: 0 };
+
+        if ( position === 'top-start' ) {
+            offset = { x: posX.start, y: posY.start };
+        }
+
+        if ( position === 'top-center' ) {
+            offset = { x: posX.center, y: posY.start };
+        }
+
+        if ( position === 'top-end' ) {
+            offset = { x: posX.end, y: posY.start };
+        }
+
+        if ( position === 'bottom-start' ) {
+            offset = { x: posX.start, y: posY.end };
+        }
+
+        if ( position === 'bottom-center' ) {
+            offset = { x: posX.center, y: posY.end };
+        }
+
+        if ( position === 'bottom-end' ) {
+            offset = { x: posX.end, y: posY.end };
+        }
+
+        let inverse = position;
+
+        if ( position.match(/^(top)\-/) ) {
+            inverse = inverse.replace(/^(top)\-/, 'bottom-');
+        }
+
+        if ( position.match(/^(bottom)\-/) ) {
+            inverse = inverse.replace(/^(bottom)\-/, 'top-');
+        }
+
+        let broken = offset.y + windowRect.height >
+            window.innerHeight || offset.y < 0;
+
+        if ( scrollClose && broken && ! fallback ) {
+            return this.getTargetHorizontal(inverse, offset);
+        }
+
+        if ( fallback && broken ) {
+            offset = fallback;
+        }
+
+        if ( offset.y < 0 ) {
+            offset.y = 0;
+        }
+
+        if ( offset.y + windowRect.height > window.innerHeight ) {
+            offset.y = window.innerHeight - windowRect.height;
+        }
+
+        if ( offset.x < 0 ) {
+            offset.x = 0;
+        }
+
+        if ( offset.x + windowRect.width > window.innerWidth ) {
+            offset.x = window.innerWidth - windowRect.width -
+                (window.innerWidth - document.body.clientWidth);
+        }
+
+        if ( broken ) {
+            position = 'auto';
+        }
+
+        return Obj.assign(offset, { position });
+    }
+
+    getTargetVertical(position, fallback = null)
+    {
+        let { el, target, trigger, width, scrollClose } = this.options;
+
+        let targetRect = target.getBoundingClientRect();
+
+        if ( trigger === 'context' ) {
+            targetRect = {
+                top: this.client.y, left: this.client.x, width: 2, height: 2
+            };
+        }
+
+        let windowRect = el.getBoundingClientRect();
+
+        if ( width === -1 ) {
+            windowRect.width = targetRect.width;
+        }
+
+        let posY = {
+
+            // Set at top edge of the target element
+            start: targetRect.top,
+
+            // Set at the middle of the target element
+            center: targetRect.top + (targetRect.height * 0.5) -
+                (windowRect.height * 0.5),
+
+            // Ste at the bottom of the target elemnent
+            end: targetRect.top + targetRect.height -
+                windowRect.height,
+
+        };
+
+        let posX = {
+
+            // Set to the left of the target element
+            start: targetRect.left - windowRect.width,
+
+            // Set to the right of the target element
+            end: targetRect.left + targetRect.width,
+
+        };
+
+        let offset = { x: 0, y: 0 };
+
+        if ( position === 'left-start' ) {
+            offset = { x: posX.start, y: posY.start };
+        }
+
+        if ( position === 'left-center' ) {
+            offset = { x: posX.start, y: posY.center };
+        }
+
+        if ( position === 'left-end' ) {
+            offset = { x: posX.start, y: posY.end };
+        }
+
+        if ( position === 'right-start' ) {
+            offset = { x: posX.end, y: posY.start };
+        }
+
+        if ( position === 'right-center' ) {
+            offset = { x: posX.end, y: posY.center };
+        }
+
+        if ( position === 'right-end' ) {
+            offset = { x: posX.end, y: posY.end };
+        }
+
+        let inverse = position;
+
+        if ( position.match(/^(left)\-/) ) {
+            inverse = inverse.replace(/^(left)\-/, 'right-');
+        }
+
+        if ( position.match(/^(right)\-/) ) {
+            inverse = inverse.replace(/^(right)\-/, 'left-');
+        }
+
+        let broken = offset.x + windowRect.width >
+            window.innerWidth || offset.x < 0;
+
+        if ( scrollClose && broken && ! fallback ) {
+            return this.getTargetVertical(inverse, offset);
+        }
+
+        if ( fallback && broken ) {
+            offset = fallback;
+        }
+
+        if ( offset.y < 0 ) {
+            offset.y = 0;
+        }
+
+        if ( offset.y + windowRect.height >  window.innerHeight ) {
+            offset.y = window.innerHeight - windowRect.height;
+        }
+
+        if ( offset.x < 0 ) {
+            offset.x = 0;
+        }
+
+        if ( offset.x + windowRect.width > window.innerWidth ) {
+            offset.x = window.innerWidth - windowRect.width -
+                (window.innerWidth - document.body.clientWidth);
+        }
+
+        if ( broken ) {
+            position = 'auto';
+        }
+
+        return Obj.assign(offset, { position });
+    }
+
+    getTargetOffset()
+    {
+        let { el, width, position } = this.options;
+
+
+        if ( width > 0 ) {
+            Dom.find(el).css({ width: `${width}px`});
+        }
+
+        if ( position.match(/^(top|bottom)\-/) ) {
+            return this.getTargetHorizontal(position);
+        }
+
+        if ( position.match(/^(left|right)\-/) ) {
+            return this.getTargetVertical(position);
+        }
+
+        console.error(`Popover position "${position}" does not exist`);
+    }
+
+}
+
+if ( ! window[PopoverElement.alias] ) {
+    window[PopoverElement.alias] = PopoverElement;
+}
+
+export default PopoverElement;

package/src/popover/src/popover/popover-handler.mjs

@@ -0,0 +1,116 @@
+import { UUID, Str, Obj, Dom, Any, Arr } from "@kizmann/pico-js";
+import PopoverElement from "./popover-element.mjs";
+import PopoverHelper from "./popover-helper.mjs";
+
+window.PopoverBag = {};
+
+export class PopoverHandler
+{
+    static alias = 'Popover';
+
+    static current = [];
+
+    static mount()
+    {
+        Dom.find(window).on(PopoverHelper.getMouseDownEvent(), Any.throttle((e) => {
+            this.detectFadeOnCurrent(e);
+        }, 30));
+
+        Dom.find(window).on(PopoverHelper.getScrollEvent(), Any.throttle((e) => {
+            this.detectScrollOnCurrent(e);
+        }, 30));
+
+        return this;
+    }
+
+    static append(el, item)
+    {
+        if ( ! window.PopoverBag[item.uid] ) {
+            window.PopoverBag[item.uid] = new PopoverElement(el, item);
+        }
+
+        return window.PopoverBag[item.uid];
+    }
+
+    static remove(item)
+    {
+        if ( window.PopoverBag[item.uid] ) {
+            window.PopoverBag[item.uid].unbind();
+        }
+
+        delete window.PopoverBag[item.uid];
+    }
+
+    static setCurrent(el)
+    {
+        if ( Arr.has(this.current, el) ) {
+            return;
+        }
+
+        let cascade = el.parents();
+
+        Arr.each(this.current, (current) => {
+            current.currentChange(cascade);
+        });
+
+        Arr.add(this.current, el);
+    }
+
+    static getCurrent()
+    {
+        return Arr.last(this.current);
+    }
+
+    static unsetCurrent(el)
+    {
+        return Arr.remove(this.current, el);
+    }
+
+    static detectFadeOnCurrent(event)
+    {
+        let current = Arr.last(this.current);
+
+        if ( Any.isEmpty(current) ) {
+            return;
+        }
+
+        let { el, target, trigger } = current.options;
+
+        let tgt = Dom.find(event.target).closest(target),
+            src = Dom.find(event.target).closest(el);
+
+        let result = (!! tgt || !! src);
+
+        if ( current.visible === result ) {
+            return;
+        }
+
+        if ( trigger !== 'context' && !! tgt ) {
+            return;
+        }
+
+        current.hide('exit');
+    }
+
+    static detectScrollOnCurrent(event)
+    {
+        let currents = Arr.filter(this.current, {
+            scrollClose: true
+        });
+
+        Arr.each(currents, (current) => {
+            current.hide('scroll');
+        });
+    }
+
+}
+
+if ( ! window[PopoverHandler.alias] ) {
+    window[PopoverHandler.alias] = PopoverHandler;
+}
+
+Dom.ready(() => {
+   PopoverHandler.mount();
+});
+
+export default PopoverHandler;