native-document 1.0.75 → 1.0.77

package/dist/native-document.dev.js

@@ -1287,6 +1287,20 @@ var NativeDocument = (function (exports) {
         setInterval(() => MemoryManager.cleanObservables(threshold), interval);
     };
 
+    ObservableItem.prototype.bindNdClass = function(element, className) {
+        element.classes.toggle(className, this.val());
+        this.subscribe(toggleElementClass.bind(null, element, className));
+    };
+
+    ObservableWhen.prototype.bindNdClass = function(element, className) {
+        element.classes.toggle(className, this.isMath());
+        this.subscribe(toggleElementClass.bind(null, element, className));
+    };
+
+    TemplateBinding.prototype.bindNdClass = function(element, className) {
+        this.$hydrate(element, className);
+    };
+
     function toggleElementClass(element, className, shouldAdd) {
         element.classes.toggle(className, shouldAdd);
     }
@@ -1319,18 +1333,8 @@ var NativeDocument = (function (exports) {
     function bindClassAttribute(element, data) {
         for(let className in data) {
             const value = data[className];
-            if(Validator.isObservable(value)) {
-                element.classes.toggle(className, value.val());
-                value.subscribe(toggleElementClass.bind(null, element, className));
-                continue;
-            }
-            if(Validator.isObservableWhenResult(value)) {
-                element.classes.toggle(className, value.isMath());
-                value.subscribe(toggleElementClass.bind(null, element, className));
-                continue;
-            }
-            if(value.$hydrate) {
-                value.$hydrate(element, className);
+            if(value?.bindNdClass) {
+                value.bindNdClass(element, className);
                 continue;
             }
             element.classes.toggle(className, value);
@@ -1423,14 +1427,30 @@ var NativeDocument = (function (exports) {
                 value.handleNdAttribute(element, attributeName, value);
                 continue;
             }
+            if(Validator.isString(value)) {
+                element.setAttribute(attributeName, value);
+                return;
+            }
+            if(attributeName === 'class' && Validator.isObject(value)) {
+                bindClassAttribute(element, value);
+                continue;
+            }
+            if(attributeName === 'style' && Validator.isObject(value)) {
+                bindStyleAttribute(element, value);
+                continue;
+            }
             if(BOOLEAN_ATTRIBUTES.includes(attributeName)) {
                 bindBooleanAttribute(element, attributeName, value);
-                return;
+                continue;
             }
             if(Validator.isObservable(value)) {
                 bindAttributeWithObservable(element, attributeName, value);
                 continue;
             }
+            if(value.$hydrate) {
+                value.$hydrate(element, attributeName);
+                continue;
+            }
 
             element.setAttribute(attributeName, value);
 
@@ -1490,37 +1510,16 @@ var NativeDocument = (function (exports) {
         return ElementCreator.createHydratableNode(null, this);
     };
 
-    Object.prototype.handleNdAttribute = function(element, attributeName) {
-        if(attributeName === 'class') {
-            bindClassAttribute(element, this);
-            return;
-        }
-        if(attributeName === 'style') {
-            bindStyleAttribute(element, this);
-
-        }
-    };
-
     String.prototype.handleNdAttribute = function(element, attributeName) {
-        let value = this.resolveObservableTemplate ? this.resolveObservableTemplate() : this;
-        if(Validator.isString(value)) {
-            element.setAttribute(attributeName, value);
-            return;
-        }
-        const observables = value.filter(item => Validator.isObservable(item));
-        value = Observable.computed(() => {
-            return value.map(item => Validator.isObservable(item) ? item.val() : item).join(' ') || ' ';
-        }, observables);
+        element.setAttribute(attributeName, this);
+    };
 
+    ObservableItem.prototype.handleNdAttribute = function(element, attributeName) {
         if(BOOLEAN_ATTRIBUTES.includes(attributeName)) {
-            bindBooleanAttribute(element, attributeName, value);
+            bindBooleanAttribute(element, attributeName, this);
             return;
         }
 
-        bindAttributeWithObservable(element, attributeName, value);
-    };
-
-    ObservableItem.prototype.handleNdAttribute = function(element, attributeName) {
         bindAttributeWithObservable(element, attributeName, this);
     };
 
@@ -1615,6 +1614,9 @@ var NativeDocument = (function (exports) {
                     if(Validator.isElement(child)) {
                         return child;
                     }
+                    if(child == null) {
+                        return null;
+                    }
                 } while (child.toNdElement);
             }
 
@@ -1725,22 +1727,85 @@ var NativeDocument = (function (exports) {
       "ContextMenu"
     ];
 
-    let createNdElementInstance = (target) => {
-        attachEventPrototypes && attachEventPrototypes();
-        attachEventPrototypes = null;
-        createNdElementInstance = (target) => new NDElement(target);
-        return  new NDElement(target);
-    };
+    const EVENTS_WITH_PREVENT = [
+      "Click",
+      "DblClick",
+      "MouseDown",
+      "MouseUp",
+      "Wheel",
+      "KeyDown",
+      "KeyPress",
+      "Invalid",
+      "Reset",
+      "Submit",
+      "DragOver",
+      "Drop",
+      "BeforeUnload",
+      "TouchCancel",
+      "TouchEnd",
+      "TouchMove",
+      "TouchStart",
+      "Copy",
+      "Cut",
+      "Paste",
+      "ContextMenu"
+    ];
+
+    const EVENTS_WITH_STOP =  [
+      "Click",
+      "DblClick",
+      "MouseDown",
+      "MouseMove",
+      "MouseOut",
+      "MouseOver",
+      "MouseUp",
+      "Wheel",
+      "KeyDown",
+      "KeyPress",
+      "KeyUp",
+      "Change",
+      "Input",
+      "Invalid",
+      "Reset",
+      "Search",
+      "Select",
+      "Submit",
+      "Drag",
+      "DragEnd",
+      "DragEnter",
+      "DragLeave",
+      "DragOver",
+      "DragStart",
+      "Drop",
+      "BeforeUnload",
+      "HashChange",
+      "TouchCancel",
+      "TouchEnd",
+      "TouchMove",
+      "TouchStart",
+      "AnimationEnd",
+      "AnimationIteration",
+      "AnimationStart",
+      "TransitionEnd",
+      "Copy",
+      "Cut",
+      "Paste",
+      "FocusIn",
+      "FocusOut",
+      "ContextMenu"
+    ];
+
     const property = {
         configurable: true,
         get() {
-            return createNdElementInstance(this);
+            return new NDElement(this);
         }
     };
 
     Object.defineProperty(HTMLElement.prototype, 'nd', property);
 
     Object.defineProperty(DocumentFragment.prototype, 'nd', property);
+
     Object.defineProperty(NDElement.prototype, 'nd', {
         configurable: true,
         get: function() {
@@ -1753,31 +1818,29 @@ var NativeDocument = (function (exports) {
     // ----------------------------------------------------------------
     // Events helpers
     // ----------------------------------------------------------------
+    EVENTS.forEach(eventSourceName => {
+        const eventName = eventSourceName.toLowerCase();
+        NDElement.prototype['on'+eventSourceName] = function(callback = null) {
+            this.$element.addEventListener(eventName, callback);
+            return this;
+        };
+    });
 
-    let attachEventPrototypes = () => {
-        EVENTS.forEach(eventSourceName => {
-            const eventName = eventSourceName.toLowerCase();
-            NDElement.prototype['on'+eventSourceName] = function(callback) {
-                this.$element.addEventListener(eventName, callback);
-                return this;
-            };
-
-            NDElement.prototype['onPrevent'+eventSourceName] = function(callback) {
-                _prevent(this.$element, eventName, callback);
-                return this;
-            };
-
-            NDElement.prototype['onStop'+eventSourceName] = function(callback) {
-                _stop(this.$element, eventName, callback);
-                return this;
-            };
+    EVENTS_WITH_STOP.forEach(eventSourceName => {
+        const eventName = eventSourceName.toLowerCase();
+        NDElement.prototype['onStop'+eventSourceName] = function(callback = null) {
+            _stop(this.$element, eventName, callback);
+            return this;
+        };
+    });
 
-            NDElement.prototype['onPreventStop'+eventSourceName] = function(callback) {
-                _preventStop(this.$element, eventName, callback);
-                return this;
-            };
-        });
-    };
+    EVENTS_WITH_PREVENT.forEach(eventSourceName => {
+        const eventName = eventSourceName.toLowerCase();
+        NDElement.prototype['onPrevent'+eventSourceName] = function(callback = null) {
+            _prevent(this.$element, eventName, callback);
+            return this;
+        };
+    });
 
     NDElement.prototype.on = function(name, callback, options) {
         this.$element.addEventListener(name.toLowerCase(), callback, options);
@@ -1802,16 +1865,6 @@ var NativeDocument = (function (exports) {
         return this;
     };
 
-    const _preventStop = function(element, eventName, callback) {
-        const handler = (event) => {
-            event.stopPropagation();
-            event.preventDefault();
-            callback && callback.call(element, event);
-        };
-        element.addEventListener(eventName, handler);
-        return this;
-    };
-
 
 
     // ----------------------------------------------------------------
@@ -2760,6 +2813,13 @@ var NativeDocument = (function (exports) {
     ObservableArray.prototype.constructor = ObservableArray;
     ObservableArray.prototype.__$isObservableArray = true;
 
+
+    Object.defineProperty(ObservableArray.prototype, 'length', {
+        get() {
+            return this.$currentValue.length;
+        }
+    });
+
     mutationMethods.forEach((method) => {
         ObservableArray.prototype[method] = function(...values) {
             const result = this.$currentValue[method](...values);
@@ -2804,10 +2864,6 @@ var NativeDocument = (function (exports) {
         return count;
     };
 
-    ObservableArray.prototype.length = function() {
-        return this.$currentValue.length;
-    };
-
     ObservableArray.prototype.swap = function(indexA, indexB) {
         const value = this.$currentValue;
         const length = value.length;