@kizmann/pico-js 1.0.13 → 2.0.0

package/src/dom/DomGlobal.js

@@ -0,0 +1,193 @@
+import { Run, Mix, Obj, Dom } from "#src/index.esm.js";
+
+/**
+ * @memberof PicoDom
+ */
+export class PicoDomGlobalStatic
+{
+    /**
+     * Get document ready state
+     *
+     * @example Dom.getDomState() // => "complete"
+     *
+     * @returns {string} State string
+     */
+    static getDomState()
+    {
+        return document.readyState;
+    }
+
+    /**
+     * Check if DOM is ready
+     *
+     * @example Dom.isDomReady() // => true
+     *
+     * @returns {boolean} True if ready
+     */
+    static isDomReady()
+    {
+        return Dom.getDomState() === 'complete';
+    }
+
+    /**
+     * Check if DOM is complete
+     *
+     * @example Dom.isDomComplete() // => true
+     *
+     * @returns {boolean} True if complete
+     */
+    static isDomComplete()
+    {
+        let state = Dom.getDomState();
+
+        if ( state === 'complete' ) {
+            return true;
+        }
+
+        return state === 'interactive';
+    }
+
+    /**
+     * Run callback when ready
+     *
+     * @example Dom.ready(cb)
+     *
+     * @param {function} cb Callback fn
+     * @param {number} [delay] Execution delay
+     * @param {number} [limit] Wait limit
+     * @returns {this} Static class
+     */
+    static ready(cb, delay = 0, limit = 6000)
+    {
+        let fn = () => {
+            Run.delay(cb, delay);
+        };
+
+        let [el, event] = [
+            Dom.find(document), 'DOMContentLoaded'
+        ];
+
+        let ready = Dom.isDomReady;
+
+        if ( ! ready() ) {
+            return (el.on(event, fn), this);
+        }
+
+        Run.wait(() => {
+            if ( ready() ) return (fn(), true);
+        }, 10, limit);
+
+        return this;
+    }
+
+    /**
+     * Run callback when complete
+     *
+     * @example Dom.complete(cb)
+     *
+     * @param {function} cb Callback fn
+     * @param {number} [delay] Execution delay
+     * @param {number} [limit] Wait limit
+     * @returns {this} Static class
+     */
+    static complete(cb, delay = 0, limit = 6000)
+    {
+        let fn = () => {
+            Run.delay(cb, delay);
+        };
+
+        let [el, event] = [
+            Dom.find(document), 'load'
+        ];
+
+        let ready = Dom.isDomComplete;
+
+        if ( ! ready() ) {
+            return (el.on(event, fn), this);
+        }
+
+        Run.wait(() => {
+            if ( ready() ) return (fn(), true);
+        }, 10, limit);
+
+        return this;
+    }
+
+}
+
+PicoDomGlobalStatic.required = () => {
+    console.error('Dom.required() is not implemented anymore.');
+}
+
+/**
+ * @memberof PicoDom
+ * @extends {PicoDom}
+ */
+export class PicoDomGlobalInstance
+{
+    /**
+     * Check if node is complete
+     *
+     * @example Dom.find("img").isNodeComplete() // => true
+     *
+     * @returns {boolean} True if complete
+     */
+    isNodeComplete()
+    {
+        if ( this.el == null ) {
+            return false;
+        }
+
+        if ( this.el.naturalWidth ) {
+            return true;
+        }
+
+        if ( this.el.naturalHeight ) {
+            return true;
+        }
+
+        return !! this.el.complete;
+    }
+
+    /**
+     * Run callback when loaded
+     *
+     * @example Dom.find("img").loaded(cb)
+     *
+     * @param {function} cb Callback fn
+     * @param {number} [limit] Wait limit
+     * @returns {this} Current instance
+     */
+    loaded(cb, limit = 6000)
+    {
+        if ( ! this.el ) {
+            return this;
+        }
+
+        let ready = this.isNodeComplete;
+
+        Run.wait(() => {
+            if ( ready.call(this) ) return (cb(), true);
+        }, 10, limit);
+
+        return this;
+    }
+}
+
+/**
+ * @returns {typeof import('#src/utils/Dom.js').PicoDom}
+ */
+export const PicoDomGlobalPlugin = function (self) {
+
+    Obj.each(Mix.class(PicoDomGlobalStatic), (fn, id) => {
+        self[id] = fn;
+    });
+
+    Obj.each(Mix.proto(PicoDomGlobalInstance), (fn, id) => {
+        self.prototype[id] = fn;
+    });
+
+    // self.init.push(PicoDomGlobalInstance.constructor);
+
+    return self;
+}

package/src/dom/DomInview.js

@@ -0,0 +1,332 @@
+import { Arr, Dom, Mix, Obj } from "#src/index.esm.js";
+
+/**
+ * @memberof PicoDom
+ */
+export class PicoDomInviewStatic
+{
+
+    /**
+     * Get first inview element Y
+     *
+     * @example Dom.inviewMaxY(".item")
+     *
+     * @param {any} options Find options
+     * @param {function} [cb] Success callback
+     * @returns {any} Found element
+     */
+    static inviewMaxY(options, cb = null)
+    {
+        let defaults = {
+            boundry: null, multiple: false, threshold: 0, mode: 'ratio'
+        };
+
+        if ( Mix.isString(options) ) {
+            options = { el: options };
+        }
+
+        options = {
+            ...defaults, ...options
+        };
+
+        if ( ! options.el ) {
+            throw new Error('Dom.inviewY() requires an element.');
+        }
+
+        let args = [
+            options.threshold, options.mode, options.boundry
+        ];
+
+        let fn = (el) => {
+            return Dom.find(el).isInviewY(...args);
+        };
+
+        let els = [];
+
+        Dom.find(options.el).each((el) => {
+            if ( fn(el) ) (cb ? cb(el) : null, els.push(el));
+        });
+
+        if ( options.multiple ) {
+            return els;
+        }
+
+        return Arr.first(els);
+    }
+
+    /**
+     * Get first inview element X
+     *
+     * @example Dom.inviewMaxX(".item")
+     *
+     * @param {any} options Find options
+     * @param {function} [cb] Success callback
+     * @returns {any} Found element
+     */
+    static inviewMaxX(options, cb = null)
+    {
+        let defaults = {
+            boundry: null, multiple: false, threshold: 0, mode: 'ratio'
+        };
+
+        if ( Mix.isString(options) ) {
+            options = { el: options };
+        }
+
+        options = {
+            ...defaults, ...options
+        };
+
+        if ( ! options.el ) {
+            throw new Error('Dom.inviewX() requires an element.');
+        }
+
+        let args = [
+            options.threshold, options.mode, options.boundry
+        ];
+
+        let fn = (el) => {
+            return Dom.find(el).isInviewX(...args);
+        };
+
+        let els = [];
+
+        Dom.find(options.el).each((el) => {
+            if ( fn(el) ) (cb ? cb(el) : null, els.push(el));
+        });
+
+        if ( options.multiple ) {
+            return els;
+        }
+
+        return Arr.first(els);
+    }
+
+}
+
+/**
+ * @memberof PicoDom
+ * @extends {PicoDom}
+ */
+export class PicoDomInviewInstance
+{
+    /**
+     * Get X view offset
+     *
+     * @example Dom.find("div").viewoffX()
+     *
+     * @returns {any} Offset object
+     */
+    viewoffX()
+    {
+        if ( this.el == null ) {
+            return { top: 0, bot: 0 };
+        }
+
+        let [viewport, width] = [
+            Dom.win().innerWidth, this.width()
+        ];
+
+        let [offset, scroll] = [
+            this.offset('left'), this.parent().scroll('left')
+        ];
+
+        let left = Math.max(...[
+            0, offset - scroll
+        ]);
+
+        let right = Math.max(...[
+            0, viewport - (offset + width - scroll)
+        ]);
+
+        return { left, right };
+    }
+
+    /**
+     * Get X inview pixels
+     *
+     * @example Dom.find("div").inviewX()
+     *
+     * @param {any} [boundry] View boundry
+     * @returns {number} Inview pixels
+     */
+    inviewX(boundry = null)
+    {
+        let { left, right } = Dom.find(boundry).viewoffY();
+
+        let [viewport, height] = [
+            Dom.win().innerHeight - right - left, this.height()
+        ];
+
+        let [offset, scroll] = [
+            this.offset('left') + left, this.scroll('left') + left
+        ];
+
+        let inview = Math.max(0, scroll + viewport - offset + left);
+
+        if ( inview > height ) {
+            inview = Math.min(height, viewport + height - inview);
+        }
+
+        return Math.max(0, inview);
+    }
+
+    /**
+     * Get X inview ratio
+     *
+     * @example Dom.find("div").inratioX()
+     *
+     * @param {any} [boundry] View boundry
+     * @returns {number} Inview ratio
+     */
+    inratioX(boundry = null)
+    {
+        return 1 / this.width() * this.inviewX(boundry);
+    }
+
+    /**
+     * Check if is inview X
+     *
+     * @example Dom.find("div").isInviewX(0.5)
+     *
+     * @param {number} [threshold] View threshold
+     * @param {string} [mode] View mode
+     * @param {any} [boundry] View boundry
+     * @returns {boolean} True if inview
+     */
+    isInviewX(threshold = 0.1, mode = 'ratio', boundry = null)
+    {
+        if ( mode === 'pixel' ) {
+            return this.inviewX(boundry) > threshold;
+        }
+
+        return this.inratioX(boundry) > threshold;
+    }
+
+    /**
+     * Get Y view offset
+     *
+     * @example Dom.find("div").viewoffY()
+     *
+     * @returns {any} Offset object
+     */
+    viewoffY()
+    {
+        if ( this.el == null ) {
+            return { top: 0, bottom: 0 };
+        }
+
+        let [viewport, height] = [
+            Dom.win().innerHeight, this.height()
+        ];
+
+        let [offset, scroll] = [
+            this.offset('top'), this.parent().scroll('top')
+        ];
+
+        let top = Math.max(...[
+            0, offset - scroll
+        ]);
+
+        let bottom = Math.max(...[
+            0, viewport - (offset + height - scroll)
+        ]);
+
+        return { top, bottom };
+    }
+
+    /**
+     * Get Y inview pixels
+     *
+     * @example Dom.find("div").inviewY()
+     *
+     * @param {any} [boundry] View boundry
+     * @returns {number} Inview pixels
+     */
+    inviewY(boundry = null)
+    {
+        let { top, bottom } = Dom.find(boundry).viewoffY();
+
+        let [viewport, height] = [
+            Dom.win().innerHeight - bottom - top, this.height()
+        ];
+
+        let [offset, scroll] = [
+            this.offset('top') + top, this.scroll('top') + top
+        ];
+
+        let inview = Math.max(0, scroll + viewport - offset + top);
+
+        if ( inview > height ) {
+            inview = Math.min(height, viewport + height - inview);
+        }
+
+        return Math.min(Math.max(0, inview), viewport);
+    }
+
+    /**
+     * Get Y inview ratio
+     *
+     * @example Dom.find("div").inratioY()
+     *
+     * @param {any} [boundry] View boundry
+     * @returns {number} Inview ratio
+     */
+    inratioY(boundry = null)
+    {
+        return 1 / this.height() * this.inviewY(boundry);
+    }
+
+    /**
+     * Check if is inview Y
+     *
+     * @example Dom.find("div").isInviewY(0.5)
+     *
+     * @param {number} [threshold] View threshold
+     * @param {string} [mode] View mode
+     * @param {any} [boundry] View boundry
+     * @returns {boolean} True if inview
+     */
+    isInviewY(threshold = 0.1, mode = 'ratio', boundry = null)
+    {
+        if ( mode === 'pixel' ) {
+            return this.inviewY(boundry) > threshold;
+        }
+
+        return this.inratioY(boundry) > threshold;
+    }
+}
+
+/**
+ * @see PicoDom.inviewY
+ */
+PicoDomInviewInstance.prototype.inviewHeight = function (...args) {
+    console.warn('Dom.inviewHeight() is deprecated, use Dom.inviewY() instead.');
+    return this.inviewY(...args);
+}
+
+/**
+ * @see PicoDom.inviewX
+ */
+PicoDomInviewInstance.prototype.inviewWidth = function (...args) {
+    console.warn('Dom.inviewWidth() is deprecated, use Dom.inviewX() instead.');
+    return this.inviewX(...args);
+}
+
+/**
+ * @returns {typeof import('#src/utils/Dom.js').PicoDom}
+ */
+export const PicoDomInviewPlugin = function (self) {
+
+    Obj.each(Mix.class(PicoDomInviewStatic), (fn, id) => {
+        self[id] = fn;
+    });
+
+    Obj.each(Mix.proto(PicoDomInviewInstance), (fn, id) => {
+        self.prototype[id] = fn;
+    });
+
+    // self.init.push(PicoDomInviewInstance.constructor);
+
+    return self;
+}

package/src/dom/DomMeta.js

@@ -0,0 +1,66 @@
+import { Arr, Mix, Obj, Dom, Locale } from "#src/index.esm.js";
+
+/**
+ * @memberof PicoDom
+ */
+export class PicoDomMetaStatic
+{
+    static $meta = {};
+
+    /**
+     * Set document title
+     *
+     * @example Dom.setMetaTitle("Home")
+     *
+     * @param {string} value New title
+     * @param {string} [glue] Title glue
+     * @returns {this} Static class
+     */
+    static setMetaTitle(value, glue = ':value - :title')
+    {
+        if ( ! this.$meta.title ) {
+            this.$meta.title = Dom.doc().title;
+        }
+
+        document.title = Locale.replace(glue, {
+            value, title: this.$meta.title
+        });
+
+        return this;
+    }
+}
+
+/**
+ * @see PicoDom.setMetaTitle
+ */
+PicoDomMetaStatic.title = (value) => {
+    console.warn('Dom.title() is deprecated, use Dom.setMetaTitle() instead.');
+    return Dom.setMetaTitle(value);
+};
+
+/**
+ * @memberof PicoDom
+ * @extends {PicoDom}
+ */
+export class PicoDomMetaInstance
+{
+
+}
+
+/**
+ * @returns {typeof import('#src/utils/Dom.js').PicoDom}
+ */
+export const PicoDomMetaPlugin = function (self) {
+
+    Obj.each(Mix.class(PicoDomMetaStatic), (fn, id) => {
+        self[id] = fn;
+    });
+
+    Obj.each(Mix.proto(PicoDomMetaInstance), (fn, id) => {
+        self.prototype[id] = fn;
+    });
+
+    // self.init.push(PicoDomMetaInstance.constructor);
+
+    return self;
+}

package/src/dom/DomObserver.js

@@ -0,0 +1,57 @@
+import { Arr, Mix, Obj, Dom } from "#src/index.esm.js";
+
+/**
+ * @memberof PicoDom
+ */
+export class PicoDomObserverStatic
+{
+
+}
+
+/**
+ * @memberof PicoDom
+ * @extends {PicoDom}
+ */
+export class PicoDomObserverInstance
+{
+
+    /**
+     * Get or set element value
+     *
+     * @example Dom.find("input").value("hello")
+     *
+     * @param {any} [value] New value
+     * @returns {any|this} Value or instance
+     */
+    value(value = undefined)
+    {
+        if ( value === undefined ) {
+            return this.el.value;
+        }
+
+        this.each((el) => {
+            el.value = value;
+        });
+
+        return this;
+    }
+
+}
+
+/**
+ * @returns {typeof import('#src/utils/Dom.js').PicoDom}
+ */
+export const PicoDomObserverPlugin = function (self) {
+
+    Obj.each(Mix.class(PicoDomObserverStatic), (fn, id) => {
+        self[id] = fn;
+    });
+
+    Obj.each(Mix.proto(PicoDomObserverInstance), (fn, id) => {
+        self.prototype[id] = fn;
+    });
+
+    // self.init.push(PicoDomObserverInstance.constructor);
+
+    return self;
+}