cotomy 0.3.2 → 0.3.4

package/dist/browser/cotomy.js

@@ -174,7 +174,7 @@ module.exports = cuid;
 /***/ 826:
 /***/ (function(module) {
 
-!function(t,i){ true?module.exports=i():0}(this,(function(){"use strict";var t="minute",i=/[+-]\d\d(?::?\d\d)?/g,e=/([+-]|\d\d)/g;return function(s,f,n){var u=f.prototype;n.utc=function(t){var i={date:t,utc:!0,args:arguments};return new f(i)},u.utc=function(i){var e=n(this.toDate(),{locale:this.$L,utc:!0});return i?e.add(this.utcOffset(),t):e},u.local=function(){return n(this.toDate(),{locale:this.$L,utc:!1})};var r=u.parse;u.parse=function(t){t.utc&&(this.$u=!0),this.$utils().u(t.$offset)||(this.$offset=t.$offset),r.call(this,t)};var o=u.init;u.init=function(){if(this.$u){var t=this.$d;this.$y=t.getUTCFullYear(),this.$M=t.getUTCMonth(),this.$D=t.getUTCDate(),this.$W=t.getUTCDay(),this.$H=t.getUTCHours(),this.$m=t.getUTCMinutes(),this.$s=t.getUTCSeconds(),this.$ms=t.getUTCMilliseconds()}else o.call(this)};var a=u.utcOffset;u.utcOffset=function(s,f){var n=this.$utils().u;if(n(s))return this.$u?0:n(this.$offset)?a.call(this):this.$offset;if("string"==typeof s&&(s=function(t){void 0===t&&(t="");var s=t.match(i);if(!s)return null;var f=(""+s[0]).match(e)||["-",0,0],n=f[0],u=60*+f[1]+ +f[2];return 0===u?0:"+"===n?u:-u}(s),null===s))return this;var u=Math.abs(s)<=16?60*s:s;if(0===u)return this.utc(f);var r=this.clone();if(f)return r.$offset=u,r.$u=!1,r;var o=this.$u?this.toDate().getTimezoneOffset():-1*this.utcOffset();return(r=this.local().add(u+o,t)).$offset=u,r.$x.$localOffset=o,r};var h=u.format;u.format=function(t){var i=t||(this.$u?"YYYY-MM-DDTHH:mm:ss[Z]":"");return h.call(this,i)},u.valueOf=function(){var t=this.$utils().u(this.$offset)?0:this.$offset+(this.$x.$localOffset||this.$d.getTimezoneOffset());return this.$d.valueOf()-6e4*t},u.isUTC=function(){return!!this.$u},u.toISOString=function(){return this.toDate().toISOString()},u.toString=function(){return this.toDate().toUTCString()};var l=u.toDate;u.toDate=function(t){return"s"===t&&this.$offset?n(this.format("YYYY-MM-DD HH:mm:ss:SSS")).toDate():l.call(this)};var c=u.diff;u.diff=function(t,i,e){if(t&&this.$u===t.$u)return c.call(this,t,i,e);var s=this.local(),f=n(t).local();return c.call(s,f,i,e)}}}));
+!function(t,i){ true?module.exports=i():0}(this,(function(){"use strict";var t="minute",i=/[+-]\d\d(?::?\d\d)?/g,e=/([+-]|\d\d)/g;return function(s,f,n){var u=f.prototype;n.utc=function(t){var i={date:t,utc:!0,args:arguments};return new f(i)},u.utc=function(i){var e=n(this.toDate(),{locale:this.$L,utc:!0});return i?e.add(this.utcOffset(),t):e},u.local=function(){return n(this.toDate(),{locale:this.$L,utc:!1})};var o=u.parse;u.parse=function(t){t.utc&&(this.$u=!0),this.$utils().u(t.$offset)||(this.$offset=t.$offset),o.call(this,t)};var r=u.init;u.init=function(){if(this.$u){var t=this.$d;this.$y=t.getUTCFullYear(),this.$M=t.getUTCMonth(),this.$D=t.getUTCDate(),this.$W=t.getUTCDay(),this.$H=t.getUTCHours(),this.$m=t.getUTCMinutes(),this.$s=t.getUTCSeconds(),this.$ms=t.getUTCMilliseconds()}else r.call(this)};var a=u.utcOffset;u.utcOffset=function(s,f){var n=this.$utils().u;if(n(s))return this.$u?0:n(this.$offset)?a.call(this):this.$offset;if("string"==typeof s&&(s=function(t){void 0===t&&(t="");var s=t.match(i);if(!s)return null;var f=(""+s[0]).match(e)||["-",0,0],n=f[0],u=60*+f[1]+ +f[2];return 0===u?0:"+"===n?u:-u}(s),null===s))return this;var u=Math.abs(s)<=16?60*s:s,o=this;if(f)return o.$offset=u,o.$u=0===s,o;if(0!==s){var r=this.$u?this.toDate().getTimezoneOffset():-1*this.utcOffset();(o=this.local().add(u+r,t)).$offset=u,o.$x.$localOffset=r}else o=this.utc();return o};var h=u.format;u.format=function(t){var i=t||(this.$u?"YYYY-MM-DDTHH:mm:ss[Z]":"");return h.call(this,i)},u.valueOf=function(){var t=this.$utils().u(this.$offset)?0:this.$offset+(this.$x.$localOffset||this.$d.getTimezoneOffset());return this.$d.valueOf()-6e4*t},u.isUTC=function(){return!!this.$u},u.toISOString=function(){return this.toDate().toISOString()},u.toString=function(){return this.toDate().toUTCString()};var l=u.toDate;u.toDate=function(t){return"s"===t&&this.$offset?n(this.format("YYYY-MM-DD HH:mm:ss:SSS")).toDate():l.call(this)};var c=u.diff;u.diff=function(t,i,e){if(t&&this.$u===t.$u)return c.call(this,t,i,e);var s=this.local(),f=n(t).local();return c.call(s,f,i,e)}}}));
 
 /***/ })
 
@@ -943,10 +943,24 @@ class CotomyElement {
                 }
             }
         }
-        this.removed(() => {
-            this._element = CotomyElement.createHTMLElement(`<div data-cotomy-invalidated style="display: none;"></div>`);
-            EventRegistry.instance.clear(this);
-        });
+        if (!this.instanceId) {
+            this.attribute("data-cotomy-instance", `__cotomy_instance_${cuid_default()()}`);
+            this.removed(() => {
+                this._element = CotomyElement.createHTMLElement(`<div data-cotomy-invalidated style="display: none;"></div>`);
+                EventRegistry.instance.clear(this);
+            });
+            this.on("cotomy:transitstart", () => {
+                this.attribute("data-cotomy-moving", "");
+                this.find("[data-cotomy-instance]").forEach(e => e.attribute("data-cotomy-moving", ""));
+            });
+            this.on("cotomy:transitend", () => {
+                this.attribute("data-cotomy-moving", null);
+                this.find("[data-cotomy-instance]").forEach(e => e.attribute("data-cotomy-moving", null));
+            });
+        }
+    }
+    get instanceId() {
+        return this.attribute("data-cotomy-instance");
     }
     get scopeId() {
         if (!this._scopeId) {
@@ -1400,12 +1414,25 @@ class CotomyElement {
     contains(selector) {
         return this.find(selector).length > 0;
     }
+    static runWithMoveEvents(target, operation) {
+        target.trigger("cotomy:transitstart");
+        try {
+            operation();
+        }
+        finally {
+            target.trigger("cotomy:transitend");
+        }
+    }
     prepend(prepend) {
-        this._element.prepend(prepend.element);
+        CotomyElement.runWithMoveEvents(prepend, () => {
+            this.element.prepend(prepend.element);
+        });
         return this;
     }
     append(target) {
-        this.element.append(target.element);
+        CotomyElement.runWithMoveEvents(target, () => {
+            this.element.append(target.element);
+        });
         return this;
     }
     appendAll(targets) {
@@ -1413,19 +1440,27 @@ class CotomyElement {
         return this;
     }
     insertBefore(append) {
-        this.element.before(append.element);
+        CotomyElement.runWithMoveEvents(append, () => {
+            this.element.before(append.element);
+        });
         return this;
     }
     insertAfter(append) {
-        this.element.after(append.element);
+        CotomyElement.runWithMoveEvents(append, () => {
+            this.element.after(append.element);
+        });
         return this;
     }
     appendTo(target) {
-        target.element.append(this.element);
+        CotomyElement.runWithMoveEvents(this, () => {
+            target.element.append(this.element);
+        });
         return this;
     }
     prependTo(target) {
-        target.element.prepend(this.element);
+        CotomyElement.runWithMoveEvents(this, () => {
+            target.element.prepend(this.element);
+        });
         return this;
     }
     trigger(event, e) {
@@ -1433,8 +1468,11 @@ class CotomyElement {
         return this;
     }
     on(event, handle, options) {
-        const entry = new HandlerEntry(handle, undefined, options);
-        EventRegistry.instance.on(event, this, entry);
+        const events = Array.isArray(event) ? event : [event];
+        events.forEach(eventName => {
+            const entry = new HandlerEntry(handle, undefined, options);
+            EventRegistry.instance.on(eventName, this, entry);
+        });
         return this;
     }
     onSubTree(event, selector, handle, options) {
@@ -1444,25 +1482,34 @@ class CotomyElement {
                 return handle(e);
             }
         };
-        const entry = new HandlerEntry(handle, delegate, options);
-        EventRegistry.instance.on(event, this, entry);
+        const events = Array.isArray(event) ? event : [event];
+        events.forEach(eventName => {
+            const entry = new HandlerEntry(handle, delegate, options);
+            EventRegistry.instance.on(eventName, this, entry);
+        });
         return this;
     }
     once(event, handle, options) {
         const mergedOptions = { ...(options ?? {}), once: true };
-        const entry = new HandlerEntry(handle, undefined, mergedOptions);
         this.off(event, handle, mergedOptions);
-        EventRegistry.instance.on(event, this, entry);
+        const events = Array.isArray(event) ? event : [event];
+        events.forEach(eventName => {
+            const entry = new HandlerEntry(handle, undefined, mergedOptions);
+            EventRegistry.instance.on(eventName, this, entry);
+        });
         return this;
     }
     off(event, handle, options) {
-        if (handle) {
-            const entry = new HandlerEntry(handle, undefined, options);
-            EventRegistry.instance.off(event, this, entry);
-        }
-        else {
-            EventRegistry.instance.off(event, this);
-        }
+        const events = Array.isArray(event) ? event : [event];
+        events.forEach(eventName => {
+            if (handle) {
+                const entry = new HandlerEntry(handle, undefined, options);
+                EventRegistry.instance.off(eventName, this, entry);
+            }
+            else {
+                EventRegistry.instance.off(eventName, this);
+            }
+        });
         return this;
     }
     click(handle) {
@@ -1823,7 +1870,9 @@ class CotomyWindow {
                     mutation.removedNodes.forEach(node => {
                         if (typeof HTMLElement !== "undefined" && node instanceof HTMLElement) {
                             const element = new CotomyElement(node);
-                            element.trigger("removed");
+                            if (!element.hasAttribute("data-cotomy-moving") && !element.attached) {
+                                element.trigger("removed");
+                            }
                         }
                     });
                 });
@@ -1865,22 +1914,34 @@ class CotomyWindow {
         window.dispatchEvent(e ?? new Event(event, { bubbles: true }));
     }
     on(event, handle) {
-        if (!this._eventHandlers[event])
-            this._eventHandlers[event] = [];
-        this._eventHandlers[event].push(handle);
-        window.addEventListener(event, handle);
+        const events = Array.isArray(event) ? event : [event];
+        events.forEach(eventName => {
+            if (!this._eventHandlers[eventName])
+                this._eventHandlers[eventName] = [];
+            this._eventHandlers[eventName].push(handle);
+            window.addEventListener(eventName, handle);
+        });
     }
     off(event, handle) {
-        if (handle) {
-            window.removeEventListener(event, handle);
-            this._eventHandlers[event] = this._eventHandlers[event]?.filter(h => h !== handle) ?? [];
-        }
-        else {
-            for (const h of this._eventHandlers[event] ?? []) {
-                window.removeEventListener(event, h);
+        const events = Array.isArray(event) ? event : [event];
+        events.forEach(eventName => {
+            if (handle) {
+                window.removeEventListener(eventName, handle);
+                const handlers = this._eventHandlers[eventName]?.filter(h => h !== handle) ?? [];
+                if (handlers.length > 0) {
+                    this._eventHandlers[eventName] = handlers;
+                }
+                else {
+                    delete this._eventHandlers[eventName];
+                }
             }
-            delete this._eventHandlers[event];
-        }
+            else {
+                for (const h of this._eventHandlers[eventName] ?? []) {
+                    window.removeEventListener(eventName, h);
+                }
+                delete this._eventHandlers[eventName];
+            }
+        });
     }
     load(handle) {
         this.on("load", handle);
@@ -2659,7 +2720,7 @@ class CotomyEntityApiForm extends CotomyApiForm {
                 this.attribute("data-cotomy-entity-key", addedParts[0]);
             }
             else {
-                const msg = `Location does not contain a single entity key segment.
+                const msg = `Location does not contain a single entity key segment.
                 action="${baseAction}", location="${locPath}", added=["${addedParts.join('","')}"]`;
                 throw new Error(msg);
             }
@@ -2749,8 +2810,8 @@ class CotomyEntityFillApiForm extends CotomyEntityApiForm {
         }
     }
     applyValueToInputs(pname, value) {
-        this.find(`input[name="${pname}" i]:not([data-cotomy-fill="false"]):not([multiple]),
-                textarea[name="${pname}" i]:not([data-cotomy-fill="false"]), 
+        this.find(`input[name="${pname}" i]:not([data-cotomy-fill="false"]):not([multiple]),
+                textarea[name="${pname}" i]:not([data-cotomy-fill="false"]), 
                 select[name="${pname}" i]:not([data-cotomy-fill="false"]):not([multiple])`).forEach(input => {
             if (CotomyDebugSettings.isEnabled(CotomyDebugFeature.Fill)) {
                 console.debug(`Filling input[name="${pname}"] with value:`, value);