Changeset 288 for Dev/branches/rest-dojo-ui/client/rft/ui/QuestionWidget.js

Timestamp:

02/24/12 16:09:22 (13 years ago)

Author:

hendrikvanantwerpen

Message:

[Client] MultipleChoiceWidget? for editing multiple choice questions
[Client] Move templates to separate directories.
[Client] Created QuestionWidget? to edit complete questions.
[Client] Fixed startup race condition where parsing was started before all classes were loaded.

File:

• Dev/branches/rest-dojo-ui/client/rft/ui/QuestionWidget.js (modified) (1 diff)

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

@@ -1 @@
-require(['dojo/_base/declare','dijit/_WidgetBase','dijit/_TemplatedMixin','dijit/_WidgetsInTemplateMixin','dojo/text!rft/ui/QuestionWidget.html','dijit/form/TextBox'],
-    function(declare,_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,templateString,TextBox){
-        declare('rft.ui.QuestionWidget',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin],{
+define(['dojo/_base/declare','dojo/dom-construct','dijit/_WidgetBase',
+    'dijit/_TemplatedMixin','dijit/_WidgetsInTemplateMixin',
+    'dojo/text!./templates/QuestionWidget.html','dijit/form/TextBox',
+    'dijit/form/Textarea','./MultipleChoiceWidget'],
+    function(declare,domConstruct,_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,templateString,TextBox,Textarea,MultipleChoiceWidget){
+        return declare('rft.ui.QuestionWidget',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin],{
             templateString: templateString,
             mode: 'view', // view || edit
-            type: 'string',
-            _w: null,
+            name: '',
+            _type: null,
+            _widgetCache: null,
+            constructor: function() {
+                this.inherited(arguments);
+                this._widgetCache = {};
+            },
             postCreate: function() {
-                this._setType(this.type);
+                this.typeSelector.set('disabled', this.mode == 'edit');
             },
-            _setType: function(type) {
-                if ( !this._w || this.type != type ) {
-                    if ( this._w ) {
-                        this._w.destroy();
-                        this._w = null;
-                    }
-                    this.type = type;
-                    switch(type) {
-                        case 'string':
-                            this._getStringWidget().placeAt(this.typeDetails);
-                            break;
-                        case 'text':
-                            break;
-                        case 'multipleChoice':
-                            break;
-                    }
-                }
-            },
-            _getStringWidget: function() {
-                if ( !this._stringWidget ) {
-                    this._stringWidget = new TextBox({
-                        name: 'answers',
-                        disabled: this.mode == 'view'
-                    });
-                }
-                return this._stringWidget;
+            _setValueAttr: function(value) {
+                value.type && this._onTypeChange(value.type);
+                this.ourForm.set('value',value);
             },
             _getValueAttr: function() {
                 return this.ourForm.get('value');
             },
-            _setValueAttr: function(value) {
-                return this.ourForm.set('value',value);
+            _onTypeChange: function(type) {
+                if ( this._type == type ) return;
+                this._type = type;
+                domConstruct.empty(this.typeDetails);
+                var widget = this._getTypeWidget(type);
+                widget && widget.placeAt(this.typeDetails,'only');
+            },
+            _getTypeWidget: function(type) {
+                var widget = this._widgetCache[type];
+                if (!widget) {
+                    switch(type) {
+                        case 'string':
+                            widget = new TextBox({
+                                name: 'answers',
+                                disabled: this.mode == 'view'
+                            });
+                            break;
+                        case 'text':
+                            widget = new Textarea({
+                                name: 'answers',
+                                disabled: this.mode == 'view',
+                                style: 'min-height: 120px'
+                            });
+                            break;
+                        case 'singleChoice':
+                        case 'multipleChoice':
+                            widget = new MultipleChoiceWidget({
+                                name: 'answers',
+                                mode: this.mode,
+                                allowMultiple: type == 'multipleChoice'
+                            });
+                            break;
+                    }
+                    this._widgetCache[type] = widget;
+                }
+                return widget;
             }
         });