Changeset 404 for Dev/branches/rest-dojo-ui/client/rft

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.

Location:

Dev/branches/rest-dojo-ui/client/rft/ui

Files:

• QuestionEditorPreviewItem.js (modified) (3 diffs)
• content/ContentWidgetFactory.js (modified) (7 diffs)
• lists/List.js (modified) (1 diff)
• lists/OrderedList.js (modified) (2 diffs)
• lists/_EditableListMixin.js (added)
• templates/QuestionEditorToolkit.html (modified) (1 diff)

Dev/branches/rest-dojo-ui/client/rft/ui/QuestionEditorPreviewItem.js

@@ -47 +47 @@
                     this.innerWidget.set('readOnly',true);
                 }
-                this.titleNode.innerHTML = this.item.type+" [preview]";
+                this.titleNode.innerHTML = (this.item.code||"(no node)")+" : "+this.item.type+" [preview]";
             },
             _showEditWidget: function() {
@@ -56 +56 @@
                     this.innerWidget.startup();
                 }
-                this.titleNode.innerHTML = this.item.type+" [editing]";
+                this.titleNode.innerHTML = (this.item.code||"(no node)")+" : "+this.item.type+" [editing]";
             },
             onClose: function() {},
@@ -84 +84 @@
                     this._showEditWidget();
                     this.editButtonNode.iconNode.className = this.editButtonNode.iconNode.className.replace("rftIconEdit", "rftIconAccept");
-                    this.editButtonNode.set("label", "Save");
+                    this.editButtonNode.set("label", "Done");
                 }
                 this._editing = !this._editing;

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([""]);
         },
 

Dev/branches/rest-dojo-ui/client/rft/ui/lists/List.js

@@ -9 +9 @@
     'dijit/layout/BorderContainer',
     'dojo/text!./templates/List.html'
-    ],function(
-        declare,
-        lang,
-        Source,
-        _TemplatedMixin,
-        _WidgetBase,
-        _WidgetsInTemplateMixin,
-        registry,
-        BorderContainer,
-        templateString
-        ){
-        return declare('rft.ui.lists.List',[BorderContainer,_TemplatedMixin,_WidgetsInTemplateMixin],{
-            templateString: templateString,
-            baseClass: 'rftList',
-            removeCallback: null,
-            type: 'text',
-            withHandles: false,
-            source: null,
+],function(
+    declare,
+    lang,
+    Source,
+    _TemplatedMixin,
+    _WidgetBase,
+    _WidgetsInTemplateMixin,
+    registry,
+    BorderContainer,
+    templateString){
+    return declare('rft.ui.lists.List',[BorderContainer,_TemplatedMixin,_WidgetsInTemplateMixin],{
+        templateString: templateString,
+        baseClass: 'rftList',
+        removeCallback: null,
+        type: 'text',
+        withHandles: false,
+        source: null,
 
-            startup: function() {
-                this.inherited(arguments);
+        startup: function() {
+            this.inherited(arguments);
 
-                if (this.title) {
-                    this.titleNode.innerHTML = this.title;
-                }
-
-                this.source = new Source(this.sourceNode.domNode, {
-                    accept: [this.type],
-                    singular: true,
-                    withHandles: this.withHandles,
-                    creator: lang.hitch(this, this._createNode)
-                });
-            },
-
-            _createNode: function(item, hint) {
-                var node = hint === "avatar" ?
-                        this._createAvatarNode(item) : this._createListNode(item);
-                return node && {
-                    node: node,
-                    data: item,
-                    type: this.type
-                };
-            },
-            _createListNode: function(item) {},
-            _createAvatarNode: function(item) {},
-
-            appendItem: function(item) {
-                this.source.insertNodes(false,[item]);
-            },
-            appendItems: function(items) {
-                this.source.insertNodes(false,items);
-            },
-
-            getItems: function() {
-                return this.source.getAllNodes()
-                .map(function(node){
-                    return this.source.getItem(node.id).data;
-                },this);
-            },
-
-            deleteItems: function() {
-                this.source.getAllNodes()
-                .forEach(function(node){
-                    registry.byNode(node).destroyRecursive();
-                });
-                this.source.sync();
-            },
-
-            removeItem: function(item){
-                this.source.getAllNodes()
-                .filter(lang.hitch(this,function(node){
-                    return this.source.getItem(node.id).data === item;
-                }))
-                .forEach(lang.hitch(this,function(node){
-                    registry.byNode(node).destroyRecursive();
-                    this.removeCallback && this.removeCallback(item);
-                }));
-                this.source.sync();
+            if (this.title) {
+                this.titleNode.innerHTML = this.title;
             }
 
-        });
+            this.source = new Source(this.sourceNode.domNode, {
+                accept: [this.type],
+                singular: true,
+                withHandles: this.withHandles,
+                creator: lang.hitch(this, this._createNode)
+            });
+        },
+
+        _createNode: function(item, hint) {
+            var node = hint === "avatar" ?
+                    this._createAvatarNode(item) : this._createListNode(item);
+            return node && {
+                node: node,
+                data: item,
+                type: this.type
+            };
+        },
+        _createListNode: function(item) {},
+        _createAvatarNode: function(item) {},
+
+        appendItem: function(item) {
+            this.source.insertNodes(false,[item]);
+        },
+        appendItems: function(items) {
+            this.source.insertNodes(false,items);
+        },
+
+        getItems: function() {
+            return this.source.getAllNodes()
+            .map(function(node){
+                return this.source.getItem(node.id).data;
+            },this);
+        },
+
+        deleteItems: function() {
+            this.source.getAllNodes()
+            .forEach(function(node){
+                registry.byNode(node).destroyRecursive();
+            });
+            this.source.sync();
+        },
+
+        removeItem: function(item){
+            this.source.getAllNodes()
+            .filter(lang.hitch(this,function(node){
+                return this.source.getItem(node.id).data === item;
+            }))
+            .forEach(lang.hitch(this,function(node){
+                registry.byNode(node).destroyRecursive();
+                this.removeCallback && this.removeCallback(item);
+            }));
+            this.source.sync();
+        }
+
     });
+});

Dev/branches/rest-dojo-ui/client/rft/ui/lists/OrderedList.js

@@ -45 +45 @@
                 var node = this.source.getSelectedNodes()[0];
                 if (node) {
-                    if (dir == "up") {
+                    if (dir === "up") {
                         if (node.previousSibling) {
                             return node.parentNode.insertBefore(node, node.previousSibling);
@@ -52 +52 @@
                         }
 
-                    } else if (dir == "down") {
+                    } else if (dir === "down") {
                         if (node.nextSibling) {
                             return node.parentNode.insertBefore(node.nextSibling, node);

Dev/branches/rest-dojo-ui/client/rft/ui/templates/QuestionEditorToolkit.html

@@ -5 +5 @@
                                 <fieldset class="align">
                                         <label>Title:</label><input data-dojo-type="dijit.form.TextBox" name="title"/>
-                                        <label>Code:</label><input data-dojo-type="dijit.form.TextBox" name= "_id"/>
+                                        <label>Code:</label><input data-dojo-type="dijit.form.TextBox" name= "code"/>
                                         <label>Categories:</label>
                                         <div data-dojo-attach-point="listNode" class="rftLineListView"></div>