Changeset 513 for Dev/trunk/src/client/qed-client/widgets/_ComplexValueMixin.js

Timestamp:

03/13/14 22:21:55 (11 years ago)

Author:

hendrikvanantwerpen

Message:

• Another shot at getting change events right for _ComplexValueMixin. Our previous approach made it impossible to detect if a change was cause during startup. Now we work purely with widget 'change' events. Children are connected during postCreate, addChild. If you add children otherwise you need to call connectChildsChanges yourself. Also to make sure events are generated, use _setValueInternal if you really need to set the value attribute yourself.
• Removed unused widget.

File:

• Dev/trunk/src/client/qed-client/widgets/_ComplexValueMixin.js (modified) (5 diffs)

Dev/trunk/src/client/qed-client/widgets/_ComplexValueMixin.js

@@ -20 +20 @@
         },
         buildRendering: function() {
-            // capture child change events
+            // capture child events
             this.inherited(arguments);
-            this.own(on(this.domNode,'change',
-                        lang.hitch(this,'_handleChange')));
+            if ( this.domNode.tagName.toLowerCase() !== "form" ) {
+                console.warn("Not scoping a _ComplexValueMixin in a form element can cause name clashes. E.g. radio buttons might stop working correctly. It is recommended to use <form> as the root element in your template for", this.declaredClass);
+            }
+            this.own(on(this.domNode,'submit',
+                        lang.hitch(this,'_handleSubmit')));
         },
         create: function() {
@@ -30 +33 @@
         },
         postCreate: function() {
-            this.inherited(arguments);
-            if ( this.domNode.tagName.toLowerCase() !== "form" ) {
-                console.warn("Not scoping a _ComplexValueMixin in a form element can cause name clashes. E.g. radio buttons might stop working correctly. It is recommended to use <form> as the root element in your template for", this.declaredClass);
-            }
-            this.own(on(this.domNode, 'submit', lang.hitch(this,'_handleSubmit')));
+            array.forEach(this._getDescendantFormWidgets(),
+                          this.connectChildsChanges,
+                          this);
         },
-        startup: function() {
-            if (this._started) { return; }
-            this.inherited(arguments);
-        },
-        _setDisabledAttr: function(value) {
-            this._set("disabled", value);
-            array.forEach(this._getDescendantFormWidgets(), function(child) {
-                child.set("disabled", value);
-            });
-        },
-        _getValueAttr: function() {
-            this.value = this.inherited(arguments);
-            return this.value;
+        connectChildsChanges: function(child) {
+            this.own(child.on('change',
+                              lang.hitch(this,'_handleChildChange')));
         },
         // Yuk, _setValueAttr is taken directly from _FromMixin only
         // to add the priorityChange parameter
                 _setValueAttr: function(obj, priorityChange) {
-            this.value = obj;
+            this._setValueInternal(obj, priorityChange);
 
                         var map = { };
@@ -84 +75 @@
                                 }
                         }
+            
+            if ( priorityChange !== null ) {
+                this._handleOnChange(this.value);
+            }
                 },
-        _setReadOnlyAttr: function(value) {
-            this._set("readOnly", value);
-            array.forEach(this._getDescendantFormWidgets(), function(child) {
-                child.set("readOnly", value);
-            });
+        // use _setValueInternal instead of 'this.value = ?' or
+        // 'this._set('value',?)' so proper events will be generated.
+        _setValueInternal: function(value,priorityChange) {
+            this._set('value',value);
+            if ( priorityChange !== null ){
+                this._handleOnChange(this.value);
+            }
         },
+        _setDisabledAttr: function(disabled) {
+            this.inherited(arguments);
+            array.forEach(
+                this._getDescendantFormWidgets(),
+                function(child) {
+                    child.set('disabled', disabled);
+                },this);
+        },
+        _setReadOnlyAttr: function(readOnly) {
+            this.inherited(arguments);
+            array.forEach(
+                this._getDescendantFormWidgets(),
+                function(child) {
+                    child.set('readOnly', readOnly);
+                },this);
+        },
+
         focus: function() {
             /*var children = this._getDescendantFormWidgets();
@@ -97 +111 @@
             }*/
         },
-        _handleChange: function(evt) {
-            if ( evt.target !== this.domNode ) {
-                this.triggerOnChange();
-                if ( evt ) { event.stop(evt); }
-                return false;
-            } else {
-                return evt;
-            }
+        addChild: function(child) {
+            this.inherited(arguments);
+            this.connectChildsChanges(child);
         },
+
         _handleSubmit: function(evt) {
-            var node = this.domNode;
-            var widget;
-            while ( node ) {
-                node = node.parentNode;
-                widget = registry.byNode(node);
-                if ( widget && typeof widget._onSubmit === "function" ) {
-                    widget._onSubmit(evt);
-                    break;
+            if ( this._started ) {
+                var node = this.domNode;
+                var widget;
+                while ( node ) {
+                    node = node.parentNode;
+                    widget = registry.byNode(node);
+                    if ( widget &&
+                         typeof widget._onSubmit === "function" ) {
+                        widget._onSubmit(evt);
+                        break;
+                    }
                 }
             }
@@ -120 +133 @@
             return false;
         },
-        triggerOnChange: function() {
+        _handleChildChange: function() {
+            this._setValueInternal(this.get('value'));
+            return false;
+        },
+        _handleOnChange: function(value) {
             if ( this._onChangeActive &&
                  !(this.readOnly || this.disabled) ) {
                 if ( this._onChangeHandle ) {
-                    this._onChangeHandle.cancel();
+                    this._onChangeHandle.remove();
                 }
                 this._onChangeHandle = this.defer(function(){
                     this._onChangeHandle = null;
-                    on.emit(this.domNode,'change',{
-                        target: this.domNode,
-                        value: this.get('value'),
-                        bubbles: true,
-                        cancellable: true
-                    });
+                    this.onChange(value);
                 });
             }
-        }
+        },
+        onChange: function() {}
     });
 });