Changeset 513

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.

Location:

Dev/trunk/src/client/qed-client

Files:

• css/qed.less (modified) (1 diff)
• css/widgets/MultipleChoiceWidget.less (deleted)
• model/widgets/QuestionEditorPreviewItem.js (modified) (3 diffs)
• model/widgets/SurveyRenderWidget.js (modified) (1 diff)
• model/widgets/SurveyRunWidget.js (modified) (1 diff)
• model/widgets/templates/QuestionEditorToolkit.html (modified) (1 diff)
• model/widgets/templates/SurveyRunWidget.html (modified) (1 diff)
• pages/templates/question.html (modified) (1 diff)
• widgets/ListWidget.js (modified) (8 diffs)
• widgets/MultipleChoiceWidget.js (deleted)
• widgets/ObjectBox.js (modified) (3 diffs)
• widgets/_ComplexValueMixin.js (modified) (5 diffs)
• widgets/templates/MultipleChoiceWidget.html (deleted)

Dev/trunk/src/client/qed-client/css/qed.less

@@ -23 +23 @@
 @import "ui/topbar.less";
 @import "ui/LoginDialog.less";
-@import "widgets/MultipleChoiceWidget.less";
 @import "widgets/lists/List.less";
 @import "widgets/Selector.less";

Dev/trunk/src/client/qed-client/model/widgets/QuestionEditorPreviewItem.js

@@ -44 +44 @@
             return false;
         },
-        _getValueAttr: function(value) {
+        _getValueAttr: function() {
             if ( this._editing === true ) {
-                this.value = this.innerWidget.get('value');
+                return this.innerWidget.get('value');
             }
             return this.value;
         },
-        _setValueAttr: function(value) {
-            this.value = value;
+        _setValueAttr: function(value,priorityChange) {
+            this._setValueInternal(value,priorityChange);
             if ( this._editing  === true ) {
                 this._showEditWidget();
@@ -97 +97 @@
             if ( this._editing === true ) {
                 if (!this.innerWidget.validate || this.innerWidget.validate() ) {
-                    this.value = this.innerWidget.get('value');
+                    this._setValueInternal(this.innerWidget.get('value'));
                     this._showViewWidget();
                 }
@@ -149 +149 @@
             if ( this.innerWidget !== null ) {
                 if ( this._editing === true ) {
-                    this.triggerOnChange();
+                    this._onChange();
+                    // how to force event on widget here?
                 }
                 this.removeChild(this.innerWidget);

Dev/trunk/src/client/qed-client/model/widgets/SurveyRenderWidget.js

@@ -38 +38 @@
                 lang.mixin(newValue,widget.get('value'));
             },this);
-            this.value = newValue;
-            return this.value;
+            return newValue;
         },
-        _setValueAttr: function(value) {
+        _setValueAttr: function(value,priorityChange) {
+            this._setValueInternal(value,priorityChange);
             array.forEach(this._getDescendantFormWidgets(),function(widget){
                 widget.set('value',value);
             },this);
-            this.value = value;
         }
     });

Dev/trunk/src/client/qed-client/model/widgets/SurveyRunWidget.js

@@ -14 +14 @@
             }));
         },
-        startup: function() {
-            this.inherited(arguments);
-        },
         _getValueAttr: function() {
             var value = this.inherited(arguments);

Dev/trunk/src/client/qed-client/model/widgets/templates/QuestionEditorToolkit.html

@@ -6 +6 @@
                 <label>Code:</label><input data-dojo-type="dijit/form/ValidationTextBox" required="required" name="code"/>
                 <label>Categories:</label>
-                <div data-dojo-attach-point="categoryListNode" class="rftLineListView"></div> 
+                <div data-dojo-attach-point="categoryListNode" class="rftLineListView"></div>
                 <div data-dojo-attach-point="categoryBoxNode"></div>
                 <button class="inheritBgColor" data-dojo-type="dijit/form/Button" data-dojo-attach-event="onClick:_onCategoryAdd" data-dojo-props="baseClass:'rftBlockButton', iconClass: 'rftIcon rftIconPlus'">Add</button><br/>

Dev/trunk/src/client/qed-client/model/widgets/templates/SurveyRunWidget.html

@@ -3 +3 @@
     <div>
         <label for="mode" class="qedLabel">Title</label>
-        <textarea name="title" class="qedField"
-                  data-dojo-props="required: true"
-                  data-dojo-type="dijit/form/ValidationTextBox"></textarea>
+        <div name="title" class="qedField"
+             data-dojo-props="required: true"
+             data-dojo-type="dijit/form/ValidationTextBox"></div>
     </div>
 
     <div>
         <label for="mode" class="qedLabel">Description</label>
-        <textarea name="description" class="qedField"
-                  data-dojo-type="dijit/form/Textarea"></textarea>
+        <div name="description" class="qedField"
+             data-dojo-type="dijit/form/Textarea"></div>
     </div>
 
     <div>
         <label for="startDate" class="qedLabel">Start date</label>
-        <input type="text" name="startDate" class="qedField"
-               data-dojo-type="dijit/form/DateTextBox"
-               data-dojo-attach-point="startDateBox" />
+        <div name="startDate" class="qedField"
+             data-dojo-type="dijit/form/DateTextBox"
+             data-dojo-attach-point="startDateBox"></div>
     </div>
 
     <div>
         <label for="endDate" class="qedLabel">End date</label>
-        <input type="text" name="endDate" class="qedField"
-               data-dojo-type="dijit/form/DateTextBox"
-               data-dojo-attach-point="endDateBox" />
+        <div name="endDate" class="qedField"
+             data-dojo-type="dijit/form/DateTextBox"
+             data-dojo-attach-point="endDateBox"></div>
     </div>
 
     <div>
         <label for="endDate" class="qedLabel">Allow respondents to delete their unsubmitted response</label>
-        <input type="text" name="respondentCanDeleteOwnResponse"
-               class="qedField"
-               data-dojo-type="dijit/form/CheckBox" />
+        <div type="text" name="respondentCanDeleteOwnResponse"
+             class="qedField"
+             data-dojo-type="dijit/form/CheckBox"></div>
     </div>
 
     <div>
         <label for="mode" class="qedLabel">Mode</label>
-        <select name="mode" class="qedField" data-dojo-type="dijit/form/Select">
+        <div name="mode" class="qedField" data-dojo-type="dijit/form/Select">
             <option value="open" selected="selected">Open</option>
             <option value="closed">Closed</option>
-        </select>
+        </div>
     </div>
 

Dev/trunk/src/client/qed-client/pages/templates/question.html

@@ -32 +32 @@
         </div>
     </div>
-    <div data-dojo-type="../model/widgets/QuestionEditorPreview"
-         data-dojo-attach-point="contentList"
-         data-dojo-props="name:'content',delay:5,region:'center'"></div>
+    <form data-dojo-type="../model/widgets/QuestionEditorPreview"
+          data-dojo-attach-point="contentList"
+          data-dojo-props="name:'content',delay:5,region:'center'"></form>
 </div>

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

@@ -1 +1 @@
 define([
-    "dijit/_Container",
+    "./_ComplexValueMixin",
     "dijit/_WidgetBase",
     "dijit/registry",
     "dojo/_base/array",
     "dojo/_base/declare",
+    "dojo/_base/event",
     "dojo/_base/lang",
     "dojo/dnd/Source",
     "dojo/dnd/common",
     "dojo/dom-construct",
-    "dojo/_base/event",
     "dojo/on"
-], function(_Container, _WidgetBase, registry, array, declare, lang, Source, dnd, domConstruct, event, on) {
-    return declare([_WidgetBase,_Container],{
-        name: "",
-        value: null,
-        disabled: false,
-        readOnly: false,
+], function(_ComplexValueMixin, _WidgetBase, registry, array, declare, event, lang, Source, dnd, domConstruct, on) {
+    return declare([_WidgetBase,_ComplexValueMixin],{
         multiple: true,
         type: "text",
@@ -65 +61 @@
             this.own(this.source.on('Drop',
                                     lang.hitch(this,'_handleDrop')));
-            this.own(on(this.domNode,'change',
-                        lang.hitch(this,'_handleChange')));
-        },
-        create: function() {
-            this.inherited(arguments);
-            this._onChangeActive = true;
         },
         creator: function(item, hint) {
@@ -83 +73 @@
             } else {
                 if ( this.createListElement ) {
-                    nodeOrWidget = this.createListElement(id,item,this._fromDrop);
+                    nodeOrWidget =
+                        this.createListElement(id,item,this._fromDrop);
                 } else {
                     return this.source.defaultCreator(item, hint);
                 }
             }
-            var node = nodeOrWidget.domNode ? nodeOrWidget.domNode : nodeOrWidget;
+            if ( nodeOrWidget.on ) {
+                this.connectChildsChanges(nodeOrWidget);
+            }
+            var node = nodeOrWidget.domNode ?
+                       nodeOrWidget.domNode :
+                       nodeOrWidget;
             if ( hint !== "avatar" && node.id !== id ) {
                 console.warn("Node id '%s' not equal to generated id '%s'. Is this intended?", node.id, id);
@@ -101 +97 @@
         createListElement: null, /* function(id,item,fromDrop){},*/
         _getValueAttr: function() {
-            this.value = array.map(this.source.getAllNodes(),function(node){
-                var widget = registry.byNode(node);
-                if ( widget && "value" in widget ) {
-                    return widget.get('value');
-                } else {
-                    return this.source.getItem(node.id).data;
-                }
-            },this);
-            return this.value;
+            return array.map(
+                this._getDescendantFormWidgets(),
+                function(child) { return child.get('value'); }
+                ,this);
         },
         _setValueAttr: function(value,priorityChange) {
             this.clear();
-            this.appendItems(value || []);
+            this._setValueInternal(value || [], priorityChange);
+            this.appendItems(this.value);
         },
-        _setDisabledAttr: function(value) {
-            this._set("disabled", value);
-            array.forEach(this.getChildren(), function(child){
-                child.set("disabled", value);
-            });
-            this._updateContainer();
+        _setReadOnlyAttr: function() {
+            this.inherited(arguments);
+            this._updateSource();
         },
-        _setReadOnlyAttr: function(value) {
-            this._set("readOnly", value);
-            array.forEach(this.getChildren(), function(child){
-                child.set("readOnly", value);
-            });
-            this._updateContainer();
+        _setDisabledAttr: function() {
+            this.inherited(arguments);
+            this._updateSource();
         },
-        _updateContainer: function() {
+        _updateSource: function() {
             if ( this.disabled || this.readOnly ) {
                 this.source.accept = [];
@@ -139 +125 @@
             }
         },
-        focus: function() {
-            var children = this.getChildren();
-            if ( children.length > 0 ) {
-                children[0].focus();
-            }
+        getChildren: function() {
+            return array.filter(
+                array.map(this.source.getAllNodes(), function(node){
+                    return registry.byNode(node);
+                }),
+                function(widget){ return widget !== null; });
         },
+        _getDescendantFormWidgets: function() {
+            return array.filter(
+                this.getChildren(),
+                function(child){ return 'value' in child; });
+        },
+
         appendItems: function(items,forceEvent) {
             this._fromDrop = false;
             this.source.insertNodes(false,items);
-            if ( forceEvent ) { this._handleDrop(); }
+            this._setValueInternal(
+                this.get('value'),
+                forceEvent === true ? true : null);
             this._fromDrop = true;
         },
@@ -154 +149 @@
             this._fromDrop = false;
             this.source.insertNodes(false,[item]);
-            if ( forceEvent ) { this._handleDrop(); }
+            this._setValueInternal(
+                this.get('value'),
+                forceEvent === true ? true : null);
             this._fromDrop = true;
         },
         removeItem: function(key,forceEvent) {
-            array.forEach(array.filter(this.source.getAllNodes(), function(node){
-                return node.id === key;
-            }), lang.hitch(this, "_destroyNodeOrWidget"));
+            array.forEach(
+                array.filter(this.source.getAllNodes(), function(node){
+                    return node.id === key;
+                }),
+                lang.hitch(this, "_destroyNodeOrWidget"));
             this.source.delItem(key);
-            if ( forceEvent ) { this._handleDrop(); }
-        },
-        getChildren: function() {
-            return array.filter(array.map(this.source.getAllNodes(), function(node){
-                return registry.byNode(node);
-            }),function(widget){ return widget !== null; });
+            this._setValueInternal(
+                this.get('value'),
+                forceEvent === true ? true : null);
         },
         clear: function(forceEvent) {
@@ -173 +169 @@
                           lang.hitch(this, "_destroyNodeOrWidget"));
             this.source.clearItems();
-            if ( forceEvent ) { this._handleDrop(); }
+            this._setValueInternal(
+                this.get('value'),
+                forceEvent === true ? true : null);
         },
         _destroyNodeOrWidget: function(node) {
@@ -183 +181 @@
             }
         },
-        validate: function() {
-            return array.every(array.map(this.source.getAllNodes(),function(node){
-                var widget = registry.byNode(node);
-                return !widget || widget.disabled || !widget.validate || widget.validate();
-            }), function(item){ return item; });
-        },
         destroy: function() {
             this.source.destroy();
             this.inherited(arguments);
         },
-        _handleChange: function(evt) {
-            if ( evt.target !== this.domNode ) {
-                this._onChange();
-                if ( evt ) { event.stop(evt); }
-                return false;
-            } else {
-                return evt;
-            }
-        },
-        _handleDrop: function(evt) {
-            this._onChange();
-        },
-        _onChange: function() {
-            if ( this._onChangeActive &&
-                 !(this.readOnly || this.disabled) ) {
-                if ( this._onChangeHandle ) {
-                    this._onChangeHandle.cancel();
-                }
-                this._onChangeHandle = this.defer(function(){
-                    this._onChangeHandle = null;
-                    on.emit(this.domNode,'change',{
-                        target: this.domNode,
-                        value: this.get('value'),
-                        bubbles: true,
-                        cancellable: true
-                    });
-                });
-            }
+        _handleDrop: function() {
+            this._setValueInternal(this.get('value'));
         }
     });

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

@@ -2 +2 @@
     "../lib/object",
     "./LineWithActionsWidget",
+    "./_ComplexValueWidget",
     "dijit/_TemplatedMixin",
     "dijit/_WidgetBase",
@@ -8 +9 @@
     "dojo/_base/lang",
     "dojo/text!./templates/ObjectBox.html"
-], function(objectFuns, LineWithActionsWidget, _TemplatedMixin, _WidgetBase, _WidgetsInTemplateMixin, declare, lang, template) {
-    return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
+], function(objectFuns, LineWithActionsWidget, _ComplexValueWidget, _TemplatedMixin, _WidgetBase, _WidgetsInTemplateMixin, declare, lang, template) {
+    return declare([_ComplexValueWidget], {
         baseClass: "rftObjectBox",
         templateString: template,
-        value: null,
         actions: null,
         startup: function() {
@@ -54 +54 @@
         },
         _showInfoBox: function() {},
-        _setValueAttr: function(value) {
-            this.value = value;
-            this._refresh();
-        },
-        _getValueAttr: function(value) {
-            this.value = value;
-        },
-        _refresh: function() {
-            if ( this.value !== null ) {
-                this.iconNode.className = "rftIcon typeIcon rftIcon"+(this.value.type || '');
-                this.line1.set('title', this.value.title || '');
-                this.line2.set('title', this.value.subTitle || '');
-                this.line3.set('title', this.value.lowerTitle || '');
+        onChange: function(value) {
+            if ( value ) {
+                this.iconNode.className = "rftIcon typeIcon rftIcon"+(value.type || '');
+                this.line1.set('title', value.title || '');
+                this.line2.set('title', value.subTitle || '');
+                this.line3.set('title', value.lowerTitle || '');
             }
         }

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() {}
     });
 });