Changeset 404 for Dev/branches/rest-dojo-ui/client/rft/ui/content/ContentWidgetFactory.js

Timestamp:

09/03/12 13:37:01 (13 years ago)

Author:

hendrikvanantwerpen

Message:

Enable configuring multiple choice question items.

Allow widgets in ordered list by using mixin. Used this to create multiple
choice options. The options widget itself needs some styling.

Show code in question item preview and label to stop editing is 'Done'
to stop confusion about saving.

File:

• Dev/branches/rest-dojo-ui/client/rft/ui/content/ContentWidgetFactory.js (modified) (7 diffs)

Dev/branches/rest-dojo-ui/client/rft/ui/content/ContentWidgetFactory.js

@@ -4 +4 @@
     'dojo/_base/lang', 
     'dojo/dom-construct', 
+    'dijit/_TemplatedMixin',
     'dijit/_WidgetBase',
     'dijit/_Container',
@@ -13 +14 @@
     'dijit/form/TextBox',
     'dojox/layout/TableContainer',
+    './../lists/_EditableListMixin',
     './../lists/OrderedList'
-],function(array, declare, lang, domConstruct, _WidgetBase, _Container, Button, CheckBox, NumberSpinner, RadioButton, Textarea, TextBox, TableContainer, OrderedList) {
+],function(array, declare, lang, domConstruct, _TemplatedMixin, _WidgetBase, _Container, Button, CheckBox, NumberSpinner, RadioButton, Textarea, TextBox, TableContainer, _EditableListMixin, OrderedList) {
     var factory = declare('rft.ui.content.ContentWidgetFactory', [], {
         /* No default type, all should be valid */
@@ -331 +333 @@
 
             var ctor = this.options.multiple === true ? CheckBox : RadioButton;
-            array.forEach(this.options.items || ["Aap", "Noot"],function(item){
+            array.forEach(this.options.items ,function(item){
                 table.addChild(new ctor({
-                    title: item
+                        title: item
                 }));
             },this);
@@ -362 +364 @@
     });
 
-    var MCOptionItem = declare([_WidgetBase,_Container],{
+    var MCOptionItem = declare([_WidgetBase,_TemplatedMixin,_Container],{
+        templateString: '<div><span class="dojoDndHandle">=</span></div>',
         _textBox: null,
         postCreate: function() {
-            this.innerHTML = '<span class="dojoDndHandle">=</span>';
-
             this._textBox = new TextBox({});
             this.addChild(this._textBox);
@@ -387 +388 @@
     });
 
+    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));
+            return w.domNode;
+        },
+        _onRemove: function(w) {
+            w.destroyRecursive();
+            this.removeCallback && this.removeCallback(item);
+            this.source.sync();
+        }
+    });
+
     var MultipleChoiceInputEdit = declare([_WidgetBase, _Container], {
         _codeInput: null,
@@ -412 +436 @@
             add.startup();
 
-            this._optionsList = new OrderedList({
-                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,function(){
-                        this._optionsList.removeItem(w);
-                    }));
-                    return w.domNode;
-                }
-            });
+            this._optionsList = new MCOptionList();
             table.addChild(this._optionsList);
             this._optionsList.startup();
@@ -436 +442 @@
             this.addChild(table);
             table.startup();
+        },
+
+        _addOption: function() {
+            this._optionsList.appendItems([""]);
         },