npm - @kizmann/pico-js - Versions diffs - 0.3.23 → 0.3.26 - Mend

@kizmann/pico-js 0.3.23 → 0.3.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/docs/element/ready.html CHANGED Viewed

@@ -14,7 +14,7 @@
     <script src="https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.append%2CElement.prototype.before%2CElement.prototype.classList%2CElement.prototype.closest%2CElement.prototype.matches%2CElement.prototype.prepend%2CElement.prototype.remove%2CNodeList.prototype.%40%40iterator%2CNodeList.prototype.forEach%2CNode.prototype.contains%2CMutationObserver%2CURL%2CElement%2CDocumentFragment%2CDocumentFragment.prototype.append%2CDocumentFragment.prototype.prepend%2CHTMLDocument%2Cdocument.querySelector%2Cdocument.getElementsByClassName%2Cdocument%2CgetComputedStyle%2CrequestAnimationFrame"></script>
     <![endif]-->
-    <script src="../../dist/pico-js.js"></script>
+    <script src="../../../dist/pico-js.js"></script>
 </head>
 <body>
@@ -23,33 +23,49 @@
     <div js-test="foo: 'bar';">
         <span>Hallo!</span>
     </div>
-    <div js-ready="duration: 200;">
+    <div js-test2="foo: 'bar';">
         <span>Hallo!</span>
     </div>
 </div>
 <script>
-    (function (Nano) {
+    (function (pi) {
         'use strict';
-        Nano.Dom.ready(function() {
+        pi.Dom.ready(function() {
-            Nano.Element.alias('test', function(el, options) {
-                console.log(el, options);
+            pi.Element.alias('test', function () {
+                return {
+                    bind: function(el, options) {
+                        console.log('bind', el, options);
+                    },
+                    unbind: function(el, options) {
+                        console.log('unbind', el, options);
+                    }
+                };
             });
-            Nano.Element.observe('test');
+            pi.Element.observe('test');
-            Nano.Any.delay(() => {
-                Nano.Element.bind('ready', '[js-custom]', { duration: 2500 });
-            }, 2500);
+            pi.Element.alias('test2', function (el, options) {
-        }, 1500);
+                console.log('bind', el, options);
+                this.unbind = function(el, options) {
+                    console.log('unbind', el, options);
+                };
+                return this;
+            });
+            pi.Element.observe('test2');
+        });
-    })(window.Nano);
+    })(window.pi);
 </script>
 </body>
 </html>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@kizmann/pico-js",
-    "version": "0.3.23",
+    "version": "0.3.26",
     "license": "MIT",
     "private": false,
     "author": "Eduard Kizmann <kizmann@protonmail.ch>",

package/src/library/element.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Str, Obj, Dom, Any } from "../index";
+import { Str, Obj, Dom, Any, Arr } from "../index";
 export class Element
 {
@@ -17,6 +17,11 @@ export class Element
      */
     static inis = {};
+    /**
+     * Runtime storage.
+     */
+    static runs = [];
     /**
      * Bind a class on selector.
      */
@@ -29,14 +34,13 @@ export class Element
     static bind(key, selector, options = {})
     {
-        let el = Dom.find(selector);
+        let el = Dom.find(selector), prefix = this.getPrefix(key);
         // Add mounted class
-        el.addClass(
-            this.getPrefix(key)
-        );
+        el.addClass(prefix);
-        let instance = Obj.get(this.inis, key, null);
+        let instance = Obj.get(this.inis,
+            key, null);
         if ( Any.isEmpty(instance) ) {
             return console.error(`Element "${key}" is not defined.`);
@@ -48,8 +52,14 @@ export class Element
                 el.get(0), options
             );
+            Element.runs.push({
+                el: el.get(0), prefix: prefix, deamon: cb
+            });
+            el.data(prefix, cb);
             return cb.bind !== undefined ?
-                cb.bind() : cb;
+                cb.bind(el.get(0), options) : cb;
         };
         // Bind option
@@ -58,34 +68,41 @@ export class Element
         return this;
     }
-    static unbind()
+    static unbind(key, selector, options = {})
     {
-        let el = Dom.find(selector);
-        // Add mounted class
-        el.removeClass(
-            this.getPrefix(key)
-        );
+        let el = Dom.find(selector), prefix = this.getPrefix(key);
-        let instance = Obj.get(this.inis, key, null);
+        let instance = Obj.get(this.inis,
+            key, null);
         if ( Any.isEmpty(instance) ) {
             return console.error(`Element "${key}" is not defined.`);
         }
-        let callback = (el, options) =>
-            new instance(el.get(0), options).unbind();
+        let callback = (el, options) => {
-        // Bind option
-        callback.call({}, el, {});
+            let cb = el.data(prefix);
+            if ( cb.unbind === undefined ) {
+                return;
+            }
+            return cb.unbind(el.get(0), options);
+        };
+        // Unbind option
+        callback.call({}, el, options);
+        Arr.remove(Element.runs, { el: el.get(0) });
         return this;
     }
     /**
      * Bind callback on selector.
      */
-    static observe(key)
+    static observe(key, plain = false)
     {
         let selector = this.getPrefix(key);
@@ -96,20 +113,49 @@ export class Element
             attributeFilter: [selector]
         };
-        Dom.find(document.body).observer(() => {
+        let callback = () => {
             let mounted = Element.getPrefix(key);
-            Dom.find('[' + selector + ']:not(.' + mounted + ')').each((el) => {
+            let deamons = Arr.filter(this.runs,
+                { prefix: selector });
+            Arr.each(deamons, ({ el }) => {
                 let options = Str.objectify(
                     Dom.find(el).attr(selector)
                 );
-                this.bind(key, el, options)
+                if ( plain && Any.isEmpty(options) ) {
+                    options = { _plain: Dom.find(el).attr(selector) };
+                }
+                if ( document.body.contains(el) ) {
+                    return;
+                }
+                return this.unbind(key, el, options)
             });
-        })(document.body, options);
+            Dom.find(`[${selector}]:not(.${mounted})`).each((el) => {
+                let options = Str.objectify(
+                    Dom.find(el).attr(selector)
+                );
+                if ( plain && Any.isEmpty(options) ) {
+                    options = { _plain: Dom.find(el).attr(selector) };
+                }
+                this.bind(key, el, options);
+            });
+        };
+        Dom.find(document.body).observer(callback)
+            (document.body, options);
+        Dom.find(document.body).on('dom.change', callback);
         return this;
     }

package/src/utility/dom.js CHANGED Viewed

@@ -10,6 +10,8 @@ export class Dom
     static events = [];
+    static datas = [];
     constructor(el)
     {
         if ( el instanceof NodeList ) {
@@ -726,8 +728,31 @@ export class Dom
         }
     }
-    value(val)
+    data(key = undefined, val = undefined, fallback = null)
     {
+        let match = Arr.find(Dom.datas, { el: this.get(0) },
+            { el: this.get(0) });
+        if ( key === undefined ) {
+            return match;
+        }
+        if ( val === undefined ) {
+            return Obj.get(match, key, fallback);
+        }
+        Arr.replace(Dom.datas, Obj.set(match, key, val),
+            { el: this.get(0) });
+        return this;
+    }
+    value(val = undefined)
+    {
+        if ( val === undefined ) {
+            return this.get(0).value;
+        }
         this.each((el) => el.value = val);
         return this;