dresscode-botex - npm Package Compare versions

Comparing version 0.0.13 to 0.0.14

lib/Botex/Tag.js

@@ -6,2 +6,3 @@ Botex.Tag = Bricks.inherit(Botex.Template, {
         attrs: {},
+        props: {},
         style: {},
@@ -14,2 +15,3 @@ content: ''
         attrs: 'object',
+        props: 'object',
         style: 'object'
@@ -24,3 +26,2 @@ },
         var attrs = Pony.Object.assign({}, $.attrs);
-        var clearAttrs = Pony.Object.assign({}, attrs);
         var cls = Bricks.String.trim($.className.join(' '));
@@ -65,4 +66,5 @@ if (cls) {
                 className: $.className,
-                style: style ? $.style : null,
-                attrs: clearAttrs,
+                style: $.style,
+                attrs: $.attrs,
+                props: $.props,
                 content: $.content
@@ -69,0 +71,0 @@ }

lib/Botex/Widget.js

@@ -217,3 +217,3 @@ Botex.Widget = Bricks.inherit(Botex.Tag, {
         var el = meta.attrs.xmlns ? this._doc.createElementNS(meta.attrs.xmlns, meta.tagName) : this._doc.createElement(meta.tagName);
-        var className = meta.className.map(function(cls) {
+        var className = this._joinClassNames(meta.className.map(function(cls) {
             if (cls instanceof Quantum.Quant) {
@@ -228,31 +228,40 @@ this._domEventsController.on(cls, 'change', this.$$_onMutableClassNameChange, {
             }
-        }, this).join(' ');
-        el.className += ' ' + className;
-        if (meta.style) {
-            Pony.Object.keys(meta.style).forEach(function(prop) {
-                var value = meta.style[prop];
-                if (value instanceof Quantum.Quant) {
-                    this._domEventsController.on(value, 'change', this.$$_onMutableStyleChange, {
-                        el: el,
-                        prop: prop
-                    });
-                    value = value.getValue();
-                }
-                Bricks.DOM.setStyleProperty(el, prop, value);
-            }, this);
-        }
+        }, this));
+        Bricks.DOM.setClassName(el, className);
+        Pony.Object.keys(meta.style).forEach(function(prop) {
+            var value = meta.style[prop];
+            if (value instanceof Quantum.Quant) {
+                this._domEventsController.on(value, 'change', this.$$_onMutableStyleChange, {
+                    el: el,
+                    prop: prop
+                });
+                value = value.getValue();
+            }
+            Bricks.DOM.setStyleProperty(el, prop, value);
+        }, this);
         Pony.Object.keys(meta.attrs).forEach(function(prop) {
-            if (meta.attrs[prop] instanceof Quantum.Quant) {
-                this._domEventsController.on(meta.attrs[prop], 'change', this.$$_onMutableAttrChange, {
+            var value = meta.attrs[prop];
+            if (value instanceof Quantum.Quant) {
+                this._domEventsController.on(value, 'change', this.$$_onMutableAttrChange, {
                     el: el,
                     attr: prop
                 });
-                el[prop] = meta.attrs[prop].getValue();
-            } else {
-                el[prop] = meta.attrs[prop];
+                value = value.getValue();
             }
+            el.setAttribute(prop, value);
         }, this);
+        Pony.Object.keys(meta.props).forEach(function(prop) {
+            var value = meta.props[prop];
+            if (value instanceof Quantum.Quant) {
+                this._domEventsController.on(value, 'change', this.$$_onMutablePropChange, {
+                    el: el,
+                    prop: prop
+                });
+                value = value.getValue();
+            }
+            el[prop] = value;
+        }, this);
         container.insertBefore(el, beforeEl);
         this._appendContent(el, null, meta.content);
-        this._splitClassNames(el.className).forEach(function(cls) {
+        this._splitClassNames(className).forEach(function(cls) {
             this._elemsStore.addElem(cls, el);
@@ -337,2 +346,12 @@ }, this);
 
+    _joinClassNames: function(cls) {
+        if (Pony.Array.isArray(cls)) {
+            return cls.map(this._joinClassNames, this).join(' ');
+        } else if (cls === null || cls === undefined) {
+            return '';
+        } else {
+            return String(cls);
+        }
+    },
+
     _splitClassNames: function(cls) {
@@ -355,4 +374,4 @@ return cls.split(/\s+/).filter(Boolean);
         // this не указывает на текущий экземпляр класса
-        var prevClassNames = this.that._splitClassNames(evt.prevValue);
-        var currClassNames = this.that._splitClassNames(evt.value);
+        var prevClassNames = this.that._splitClassNames(this.that._joinClassNames(evt.prevValue));
+        var currClassNames = this.that._splitClassNames(this.that._joinClassNames(evt.value));
         prevClassNames.forEach(function(cls) {
@@ -374,5 +393,10 @@ if (currClassNames.indexOf(cls) === -1) {
         // this не указывает на текущий экземпляр класса
-        this.el[this.attr] = evt.value;
+        this.el.setAttribute(this.attr, evt.value);
     },
 
+    $$_onMutablePropChange: function(evt) {
+        // this не указывает на текущий экземпляр класса
+        this.el[this.prop] = evt.value;
+    },
+
     $$_onMutableStyleChange: function(evt) {
@@ -379,0 +403,0 @@ // this не указывает на текущий экземпляр класса

package.json

 {
     "name": "dresscode-botex",
-    "version": "0.0.13",
+    "version": "0.0.14",
     "dependencies": {
@@ -5,0 +5,0 @@ "dresscode-bricks": "latest",

samples/index.js

@@ -23,1 +23,3 @@ new Samples.HelloWorld({
 });
+
+new Samples.SVG().mount(document.body);

No alert changes

Improved metrics

Total package byte prevSize

45421

increased by5.09%

Number of package files

31

increased by3.33%

Lines of code

1217

increased by5.92%

No dependency changes