Changeset 441 for Dev/trunk/client/qed/model/widgets/questions

Timestamp:

04/29/13 19:35:10 (12 years ago)

Author:

hendrikvanantwerpen

Message:

Big cleanup of the question content.

• Replaced old list implementations with a new one that behaves like a form widget.
• All question content is now in separate widgets, not in the factory itself.
• Added form and widget validation for question editing.

Location:

Dev/trunk/client/qed/model/widgets/questions

Files:

• . (added)
• Factory.js (moved) (moved from Dev/trunk/client/qed/model/widgets/QuestionWidgetFactory.js) (5 diffs)
• HeaderConfigWidget.js (added)
• HeaderWidget.js (added)
• MultipleChoiceInputConfigWidget.js (added)
• MultipleChoiceInputWidget.js (added)
• NumberInputConfigWidget.js (added)
• NumberInputWidget.js (added)
• ScaleInputConfigWidget.js (moved) (moved from Dev/trunk/client/qed/model/widgets/ScaleInputConfigWidget.js) (6 diffs)
• ScaleInputWidget.js (moved) (moved from Dev/trunk/client/qed/model/widgets/ScaleInputWidget.js) (4 diffs)
• StringInputConfigWidget.js (added)
• StringInputWidget.js (added)
• TextConfigWidget.js (added)
• TextInputConfigWidget.js (added)
• TextInputWidget.js (added)
• TextWidget.js (added)
• templates (added)
• templates/HeaderConfigWidget.html (added)
• templates/HeaderWidget.html (added)
• templates/MultipleChoiceInputConfigRowWidget.html (added)
• templates/MultipleChoiceInputConfigWidget.html (added)
• templates/MultipleChoiceInputWidget.html (added)
• templates/NumberInputConfigWidget.html (added)
• templates/NumberInputWidget.html (added)
• templates/ScaleInputConfigRowWidget.html (moved) (moved from Dev/trunk/client/qed/model/widgets/templates/ScaleInputConfigRowWidget.html)
• templates/ScaleInputConfigWidget.html (moved) (moved from Dev/trunk/client/qed/model/widgets/templates/ScaleInputConfigWidget.html) (1 diff)
• templates/ScaleInputWidget.html (moved) (moved from Dev/trunk/client/qed/model/widgets/templates/ScaleInputWidget.html)
• templates/StringInputConfigWidget.html (added)
• templates/StringInputWidget.html (added)
• templates/TextConfigWidget.html (added)
• templates/TextInputConfigWidget.html (added)
• templates/TextInputWidget.html (added)
• templates/TextWidget.html (added)

Dev/trunk/client/qed/model/widgets/questions/Factory.js

@@ -1 +1 @@
 define([
-    "../../widgets/list/OrderedList",
-    "../../widgets/list/_EditableListMixin",
+    "./HeaderConfigWidget",
+    "./HeaderWidget",
+    "./MultipleChoiceInputConfigWidget",
+    "./MultipleChoiceInputWidget",
+    "./NumberInputConfigWidget",
+    "./NumberInputWidget",
     "./ScaleInputConfigWidget",
     "./ScaleInputWidget",
-    "dijit/_Container",
-    "dijit/_TemplatedMixin",
+    "./StringInputConfigWidget",
+    "./StringInputWidget",
+    "./TextConfigWidget",
+    "./TextInputConfigWidget",
+    "./TextInputWidget",
+    "./TextWidget",
     "dijit/_WidgetBase",
-    "dijit/form/Button",
-    "dijit/form/CheckBox",
-    "dijit/form/Form",
-    "dijit/form/NumberSpinner",
-    "dijit/form/RadioButton",
-    "dijit/form/TextBox",
-    "dijit/form/Textarea",
-    "dojo/_base/array",
-    "dojo/_base/declare",
-    "dojo/_base/lang",
-    "dojo/dom-construct",
-    "dojox/layout/TableContainer"
-], function(OrderedList, _EditableListMixin, ScaleInputConfigWidget, ScaleInputWidget, _Container, _TemplatedMixin, _WidgetBase, Button, CheckBox, Form, NumberSpinner, RadioButton, TextBox, Textarea, array, declare, lang, domConstruct, TableContainer) {
+    "dojo/_base/declare"
+], function(HeaderConfigWidget, HeaderWidget, MultipleChoiceInputConfigWidget, MultipleChoiceInputWidget, NumberInputConfigWidget, NumberInputWidget, ScaleInputConfigWidget, ScaleInputWidget, StringInputConfigWidget, StringInputWidget, TextConfigWidget, TextInputConfigWidget, TextInputWidget, TextWidget, _WidgetBase, declare) {
     var factory = declare(null, {
         createViewWidget: function(/*Object*/options) {
@@ -31 +28 @@
         createEditWidget: function(/*Object*/options) {
             var fun = this['create'+options.type+'EditWidget'];
-            var view = fun !== undefined ? fun() : null;
-            if (view) {
-                view.set('value', options);
-            }
+            var view = fun !== undefined ? fun(options) : null;
             return view;
         },
 
-        createHeaderViewWidget: function(options) {
-            return new HeaderView({
-                options: options
+        createHeaderViewWidget: function(config) {
+            return new HeaderWidget(config);
+        },
+        createHeaderEditWidget: function(config) {
+            return new HeaderConfigWidget({
+                value: config
             });
         },
-        createHeaderEditWidget: function() {
-            return new HeaderEdit();
+
+        createTextViewWidget: function(config) {
+            return new TextWidget(config);
         },
-
-        createTextViewWidget: function(options) {
-            return new TextView({
-                options: options
+        createTextEditWidget: function(config) {
+            return new TextConfigWidget({
+                value: config
             });
-        },
-        createTextEditWidget: function() {
-            return new TextEdit();
         },
 
@@ -62 +56 @@
         },
 
-        createStringInputViewWidget: function(options) {
-            return new StringInputView({
-                options: options
+        createStringInputViewWidget: function(config) {
+            return new StringInputWidget(config);
+        },
+        createStringInputEditWidget: function(config) {
+            return new StringInputConfigWidget({
+                value: config
             });
         },
-        createStringInputEditWidget: function() {
-            return new StringInputEdit();
+
+        createTextInputViewWidget: function(config) {
+            return new TextInputWidget(config);
+        },
+        createTextInputEditWidget: function(config) {
+            return new TextInputConfigWidget({
+                value: config
+            });
         },
 
-        createTextInputViewWidget: function(options) {
-            return new TextInputView({
-                options: options
+        createNumberInputViewWidget: function(config) {
+            return new NumberInputWidget(config);
+        },
+        createNumberInputEditWidget: function(config) {
+            return new NumberInputConfigWidget({
+                value: config
             });
         },
-        createTextInputEditWidget: function() {
-            return new TextInputEdit();
+
+        createMultipleChoiceInputViewWidget: function(config) {
+            return new MultipleChoiceInputWidget(config);
         },
-
-        createIntegerInputViewWidget: function(options) {
-            return new IntegerInputView({
-                options: options
+        createMultipleChoiceInputEditWidget: function(config) {
+            return new MultipleChoiceInputConfigWidget({
+                value: config
             });
-        },
-        createIntegerInputEditWidget: function() {
-            return new IntegerInputEdit();
-        },
-
-        createMultipleChoiceInputViewWidget: function(options) {
-            return new MultipleChoiceInputView({
-                options: options
-            });
-        },
-        createMultipleChoiceInputEditWidget: function() {
-            return new MultipleChoiceInputEdit();
         },
 
@@ -108 +102 @@
     });
 
-    var DefaultEdit = declare([Form,_Container],{
-        type: null,
-        addChild: function(widget) {
-            domConstruct.create("label",{
-                innerHTML: widget.title || ''
-            },this.containerNode,'last');
-            this.inherited(arguments,[widget]);
-        },
-        _getValueAttr: function() {
-            var val = this.inherited(arguments);
-            val.type = this.type;
-            return val;
-        }
-    });
-
-    var HeaderView = declare([_WidgetBase], {
-        postCreate: function() {
-            this.domNode.innerHTML = "<h2>"+this.options.content+"</h2>";
-        }
-    });
-
-    var HeaderEdit = declare([DefaultEdit], {
-        type: 'Header',
-        postCreate: function() {
-            this.inherited(arguments);
-            this.addChild(new TextBox({
-                title: 'Content',
-                name: 'content'
-            }));
-        }
-    });
-
-    var TextView = declare([_WidgetBase], {
-        postCreate: function() {
-            this.domNode.innerHTML = "<p>"+this.options.content+"</p>";
-        }
-    });
-
-    var TextEdit = declare([DefaultEdit], {
-        type: 'Text',
-        postCreate: function() {
-            this.inherited(arguments);
-            this.addChild(new Textarea({
-                title: 'Content',
-                name: 'content'
-            }));
-        }
-    });
-
     var DividerView = declare([_WidgetBase], {
         postCreate: function() {
@@ -163 +108 @@
     });
 
-    var DefaultInputEdit = declare([DefaultEdit],{
-        postCreate: function() {
-            this.inherited(arguments);
-            this.addChild(new TextBox({
-                title: 'Text',
-                name: 'text'
-            }));
-        }
-    });
-
-    var StringInputView = declare([_WidgetBase, _Container],{
-        _textBox: null,
-        postCreate: function() {
-            this._textBox = new TextBox({
-                name: this.options.code || ''
-            });
-            this.addChild(this._textBox);
-            this._textBox.startup();
-        },
-        _setReadOnlyAttr: function(value) {
-            this._textBox.set('readOnly', value);
-        },
-        _getCodeAttr: function() {
-            return this.options.code;
-        },
-        _getValueAttr: function() {
-            return this._textBox.get('value') || "";
-        },
-        _setValueAttr: function(value) {
-            this._textBox.set('value',value || "");
-        }
-    });
-
-    var StringInputEdit = declare([DefaultInputEdit],{
-        type: 'StringInput'
-    });
-
-    var TextInputView = declare([_WidgetBase, _Container], {
-        _textArea: null,
-        postCreate: function() {
-            this._textArea = new Textarea({
-                name: this.options.code
-            });
-            this._textArea.set('maxLength', this.options.maxLength || 1000);
-            this._textArea.set('value', this.options.defaultValue || "");
-            this.addChild(this._textArea);
-            this._textArea.startup();
-        },
-        _getCodeAttr: function() {
-            return this.options.code;
-        },
-        _getValueAttr: function() {
-            return this._textArea.get('value');
-        },
-        _setReadOnlyAttr: function(value) {
-            this._textArea.set('readOnly', value);
-        }
-    });
-
-    var TextInputEdit = declare([DefaultInputEdit], {
-        type: 'TextInput',
-        postCreate: function() {
-            this.inherited(arguments);
-            this.addChild(new NumberSpinner({
-                name: 'maxLength',
-                title: "Maximum length",
-                constraints: {
-                    min: 0
-                }
-            }));
-        }
-    });
-
-    var IntegerInputView = declare([_WidgetBase, _Container], {
-        _numberInput: null,
-        postCreate: function() {
-            this._numberInput = new NumberSpinner({
-                name: this.options.code || '',
-                constraints: {
-                    min: this.options.min,
-                    max: this.options.max,
-                    smallDelta: this.options.step
-                }
-            });
-            this.addChild(this._numberInput);
-            this._numberInput.startup();
-        },
-        _getCodeAttr: function() {
-            return this.options.code;
-        },
-        _getValueAttr: function() {
-            return this._numberInput.get('value');
-        },
-        _setReadOnlyAttr: function(value) {
-            this._numberInput.set('readOnly', value);
-        }
-    });
-
-    var IntegerInputEdit = declare([DefaultInputEdit], {
-        type: 'IntegerInput',
-        postCreate: function() {
-            this.inherited(arguments);
-            this.addChild(new NumberSpinner({
-                title: "Minimum",
-                name: 'min'
-            }));
-            this.addChild(new NumberSpinner({
-                title: "Maximum",
-                name: 'max'
-            }));
-            this.addChild(new NumberSpinner({
-                title: "Step",
-                name: 'step'
-            }));
-        }
-    });
-
-    var MultipleChoiceInputView = declare([_WidgetBase, _Container], {
-        postCreate: function() {
-            var table = new TableContainer({ cols: 1, customClass: "labelsAndValues"} );
-
-            var Ctor = this.options.multiple === true ? CheckBox : RadioButton;
-            array.forEach(this.options.items || [], function(item){
-                table.addChild(new Ctor({
-                    name: this.options.code || '',
-                    title: item
-                }));
-            },this);
-
-            this.addChild(table);
-            table.startup();
-        },
-        _getCodeAttr: function() {
-            return this.options.code;
-        },
-        _getValueAttr: function() {
-            var checked = array.filter(this.getChildren(),function(child){
-                return child.get('checked');
-            });
-            if ( this.options.multiple ) {
-                return array.map(checked,function(child){
-                    return child.get('value');
-                });
-            } else {
-                return checked.length > 0 ? checked[0].get('value') : null;
-            }
-        },
-        _setReadOnlyAttr: function(value) {
-            array.forEach(this.getChildren(),function(child){
-                child.set('readOnly', value);
-            },this);
-        }
-    });
-
-    var MCOptionItem = declare([_WidgetBase,_TemplatedMixin,_Container],{
-        templateString: '<div><span class="dojoDndHandle">=</span></div>',
-        _textBox: null,
-        postCreate: function() {
-            this._textBox = new TextBox({});
-            this.addChild(this._textBox);
-            this._textBox.startup();
-
-            var del = new Button({
-                label: "X",
-                onClick: lang.hitch(this,'onDelete')
-            });
-            this.addChild(del);
-            del.startup();
-        },
-        _getValueAttr: function() {
-            return this._textBox.set('value');
-        },
-        _setValueAttr: function(value) {
-            this._textBox.set('value',value);
-        },
-        onDelete: function(){}
-    });
-
-    var MCOptionList = declare([OrderedList,_EditableListMixin],{
-        type: 'multipleChoiceOption',
-        withHandles: true,
-        _createAvatarNode: function(item){
-            return domConstruct.create("div",{
-                'class': 'dragAvatar',
-                innerHTML: item
-            });
-        },
-        _createListNode: function(item) {
-            var w = new MCOptionItem();
-            w.startup();
-            w.set('value',item);
-            w.on('delete',lang.hitch(this,'_onRemove',w,item));
-            return w.domNode;
-        },
-        _onRemove: function(w,item) {
-            w.destroyRecursive();
-            if ( this.removeCallback ) { this.removeCallback(item); }
-            this.source.sync();
-        }
-    });
-
-    var MultipleChoiceInputEdit = declare([_WidgetBase, _Container], {
-        _multipleInput: null,
-        postCreate: function() {
-            var table = new TableContainer({ cols: 1, customClass: "labelsAndValues"} );
-
-            this._multipleInput = new CheckBox({
-                title: "Allow multiple"
-            });
-            table.addChild(this._multipleInput);
-            this._multipleInput.startup();
-
-            var add = new Button({
-                label: "Add",
-                onClick: lang.hitch(this,'_addOption',"")
-            });
-            table.addChild(add);
-            add.startup();
-
-            this._optionsList = new MCOptionList();
-            table.addChild(this._optionsList);
-            this._optionsList.startup();
-
-            this.addChild(table);
-            table.startup();
-        },
-
-        _addOption: function() {
-            this._optionsList.appendItems([""]);
-        },
-
-        _setValueAttr: function(value) {
-            this._multipleInput.set('checked', value.multiple);
-            this._optionsList.deleteItems();
-            this._optionsList.appendItems(value.items || []);
-        },
-        _getValueAttr: function() {
-            return {
-                type: "MultipleChoiceInput",
-                multiple: this._multipleInput.get('checked'),
-                items: array.map(this._optionsList.getItems(),function(item){
-                    return item.get('value');
-                },this)
-            };
-        }
-    });
-
     return factory;
 });

Dev/trunk/client/qed/model/widgets/questions/ScaleInputConfigWidget.js

@@ -1 +1 @@
 define([
-    "dijit/_Container",
-    "dijit/_TemplatedMixin",
-    "dijit/_WidgetBase",
-    "dijit/_WidgetsInTemplateMixin",
+    "../../../widgets/ListWidget",
+    "../../../widgets/_ComplexValueWidget",
     "dijit/form/Button",
     "dijit/form/RadioButton",
     "dijit/form/TextBox",
     "dijit/form/ValidationTextBox",
-    "dijit/form/_FormMixin",
     "dojo/_base/array",
     "dojo/_base/declare",
@@ -20 +17 @@
     "dijit/form/NumberTextBox",
     "dijit/form/TextBox"
-], function(_Container, _TemplatedMixin, _WidgetBase, _WidgetsInTemplateMixin, Button, RadioButton, TextBox, ValidationTextBox, _FormMixin, array, declare, event, lang, domAttr, domConstruct, domStyle, rowTemplate, template) {
+], function(ListWidget, _ComplexValueWidget, Button, RadioButton, TextBox, ValidationTextBox, array, declare, event, lang, domAttr, domConstruct, domStyle, rowTemplate, template) {
 
-    var Row = declare([_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,_Container,_FormMixin],{
+    var Row = declare([_ComplexValueWidget],{
         templateString: rowTemplate,
         hasNA: true,
@@ -29 +26 @@
             this.inherited(arguments);
         },
-        onDestroy: function(e) {
-            this.destroyRecursive();
-            event.stop(e);
-            return false;
-        },
+        onDestroy: function(evt) {},
         _setHasNAAttr: function(value) {
             if ( value === true ) {
@@ -43 +36 @@
     });
     
-    return declare([_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,_Container,_FormMixin],{
+    return declare([_ComplexValueWidget],{
         templateString: template,
         baseClass: "qedScaleWidget",
-        value: null,
         _hasNA: false,
         constuctor: function() {
@@ -52 +44 @@
             this.value = {};
         },
-        onAddItem: function(e) {
-            this._addItem();
+        buildRendering: function() {
+            this.inherited(arguments);
+            this.itemsWidget = new ListWidget({
+                name: "items",
+                type: "ScaleItem",
+                delay: 5,
+                skipForm: true,
+                createListElement: lang.hitch(this, "_createRowWidget"),
+                createAvatar: lang.hitch(this, "_createAvatar")
+            }, this.itemsNode);
+        },
+        _createRowWidget: function(id, item) {
+            var widget = new Row({
+                value: item,
+                hasNA: this._hasNA,
+                id: id,
+                onDestroy: lang.hitch(this,function(evt){
+                    this.itemsWidget.removeItem(id);
+                    event.stop(evt);
+                    return false;
+                })
+            });
+            widget.startup();
+            return widget;
+        },
+        _createAvatar: function(id, item) {
+            return domConstruct.create("div", {
+                innerHTML: item.text || "(empty item)"
+            });
+        },
+        onAddNewItem: function(e) {
+            this.itemsWidget.appendItem({});
             event.stop(e);
             return false;
         },
-        _clearItems: function() {
-            domConstruct.empty(this.itemsNode);
-        },
-        _addItem: function(value) {
-            var item = new Row({
-                name: 'items',
-                value: value,
-                hasNA: this._hasNA
-            });
-            item.placeAt(this.itemsNode);
-            return item;
-        },
-        _setValueAttr: function(value) {
-            this.inherited(arguments);
-            this._clearItems();
-            array.forEach(value.items, function(value){
-                this._addItem(value);
-            }, this);
-        },
         _getValueAttr: function(){
             var value = this.inherited(arguments);
-            if ( value.items && !lang.isArray(value.items) ) {
-                value.items = [value.items];
-            }
             value.type = 'ScaleInput';
             return value;
@@ -89 +89 @@
         },
         _updateNA: function(value) {
-            array.forEach(this.getChildren(), function(child) {
+            array.forEach(this.itemsWidget.getChildren(), function(child) {
                 child.set('hasNA', this._hasNA);
             }, this);

Dev/trunk/client/qed/model/widgets/questions/ScaleInputWidget.js

@@ -1 +1 @@
 define([
-    "dijit/_Container",
-    "dijit/_TemplatedMixin",
-    "dijit/_WidgetBase",
+    "../../../widgets/_ComplexValueWidget",
     "dijit/form/RadioButton",
-    "dijit/form/_FormMixin",
     "dojo/_base/array",
     "dojo/_base/declare",
@@ -11 +8 @@
     "dojo/dom-construct",
     "dojo/text!./templates/ScaleInputWidget.html"
-], function(_Container, _TemplatedMixin, _WidgetBase, RadioButton, _FormMixin, array, declare, lang, domAttr, domConstruct, template) {
-    return declare([_WidgetBase,_TemplatedMixin,_Container,_FormMixin],{
+], function(_ComplexValueWidget, RadioButton, array, declare, lang, domAttr, domConstruct, template) {
+    return declare([_ComplexValueWidget],{
         templateString: template,
         baseClass: "qedScaleWidget",
@@ -41 +38 @@
                 domConstruct.create("th", {
                     innerHTML: i.toString()
-                }, this.minNode, "after");
+                }, this.maxNode, "before");
             }
         },
@@ -69 +66 @@
                     className: 'max'
                 }, tr);
-                if ( this.naLabel !== null ) {
+                if ( this.naLabel !== null && this.naLabel !== "" ) {
                     td = domConstruct.create("td", {}, tr);
                     radio = new RadioButton({

Dev/trunk/client/qed/model/widgets/questions/templates/ScaleInputConfigWidget.html

@@ -41 +41 @@
         <td class="item">
           <button data-dojo-type="dijit/form/Button"
-                  data-dojo-attach-event="onClick:onAddItem">Click to add item</button>
+                  data-dojo-attach-event="onClick:onAddNewItem">Click to add item</button>
         </td>
       </tr>