Changeset 441 for Dev/trunk/client/qed/model/widgets/QuestionEditorPreviewItem.js

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.

File:

• Dev/trunk/client/qed/model/widgets/QuestionEditorPreviewItem.js (modified) (7 diffs)

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

@@ -1 +1 @@
 define([
-    "./QuestionWidgetFactory",
+    "./questions/Factory",
     "dijit/_Container",
     "dijit/_TemplatedMixin",
@@ -6 +6 @@
     "dijit/_WidgetsInTemplateMixin",
     "dojo/_base/declare",
+    "dojo/_base/event",
     "dojo/_base/fx",
     "dojo/_base/lang",
@@ -13 +14 @@
     "dojo/on",
     "dojo/text!./templates/QuestionEditorPreviewItem.html"
-], function(QuestionWidgetFactory, _Container, _TemplatedMixin, _WidgetBase, _WidgetsInTemplateMixin, declare, fx, lang, domClass, domGeom, domStyle, on, template) {
+], function(QuestionWidgetFactory, _Container, _TemplatedMixin, _WidgetBase, _WidgetsInTemplateMixin, declare, event, fx, lang, domClass, domGeom, domStyle, on, template) {
     return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, _Container], {
         templateString: template,
@@ -31 +32 @@
                         lang.hitch(this, 'onToggleFold')));
             this.own(this.removeButton.on('click',
-                        lang.hitch(this, 'onClose')));
+                        lang.hitch(this, 'onDestroy')));
             this.own(this.editButton.on('click',
                         lang.hitch(this, 'onToggleEdit')));
-            if (this.value) {
-                this._showEditWidget();
-            } else {
-                throw "No data supplied to create an innerWidget!";
+            this.showEdit();
+        },
+        onDestroy: function() {},
+        _getValueAttr: function(value) {
+            if ( this._editing ) {
+                this.value = this.innerWidget.get('value');
             }
-        },
-        onClose: function() {},
-        _getValueAttr: function(value) {
             return this.value;
         },
         _setValueAttr: function(value) {
             this.value = value;
-            this._destroyInnerWidget();
             if ( this._editing ) {
                 this._showEditWidget();
@@ -53 +52 @@
             }
         },
-        onToggleEdit: function() {
-            if (this._editing) {
-                if ( this.innerWidget !== null ) {
-                    if (!this.innerWidget.validate ||
-                        this.innerWidget.validate() ) {
-                        this.value = this.innerWidget.get('value');
-                        this._showViewWidget();
-                    }
-                } else {
+        validate: function() {
+            return !this._editing || this.innerWidget.validate();
+        },
+        showView: function() {
+            if ( this._editing ) {
+                if (!this.innerWidget.validate || this.innerWidget.validate() ) {
+                    this.value = this.innerWidget.get('value');
                     this._showViewWidget();
                 }
-            } else {
+            }
+        },
+        showEdit: function() {
+            if (!this._editing) {
                 this._showEditWidget();
             }
         },
+        onToggleEdit: function(evt) {
+            if (this._editing) {
+                this.showView();
+            } else {
+                this.showEdit();
+            }
+            evt && event.stop(evt);
+            return false;
+        },
         _showViewWidget: function() {
-            this._destroyInnerWidget();
-            this.innerWidget = this._factory.createViewWidget( this.value );
-            if ( this.innerWidget !== null ) {
+            var newWidget = this._factory.createViewWidget( this.value );
+            if ( newWidget !== null ) {
+                this._destroyInnerWidget();
+                this.innerWidget = newWidget;
                 this.innerWidget.placeAt(this.containerNode);
                 this.innerWidget.startup();
                 this.innerWidget.set('readOnly',true);
+                this.titleNode.innerHTML = this.value.type+" [preview]";
+                domClass.replace(this.editButton.iconNode, "rftIconEdit", "rftIconAccept");
+                this.editButton.set("label", "Edit");
+                this._editing = false;
             }
-            this.titleNode.innerHTML = this.value.type+" [preview]";
-            domClass.replace(this.editButton.iconNode, "rftIconEdit", "rftIconAccept");
-            this.editButton.set("label", "Edit");
-            this._editing = false;
         },
         _showEditWidget: function() {
-            this._destroyInnerWidget();
-            this.innerWidget = this._factory.createEditWidget( this.value );
-            if ( this.innerWidget !== null ) {
+            var newWidget = this._factory.createEditWidget( this.value );
+            if ( newWidget !== null ) {
+                this._destroyInnerWidget();
+                this.innerWidget = newWidget;
                 this.innerWidget.placeAt(this.containerNode);
                 this.innerWidget.startup();
+                this.titleNode.innerHTML = this.value.type+" [editing]";
+                domClass.replace(this.editButton.iconNode, "rftIconAccept", "rftIconEdit");
+                this.editButton.set("label", "Done");
+                this._editing = true;
             }
-            this.titleNode.innerHTML = this.value.type+" [editing]";
-            domClass.replace(this.editButton.iconNode, "rftIconAccept", "rftIconEdit");
-            this.editButton.set("label", "Done");
-            this._editing = true;
         },
         _destroyInnerWidget: function() {
@@ -98 +109 @@
             }
         },
-        onToggleFold: function() {
+        onToggleFold: function(evt) {
             if (!this.animation) {
                 if (!domClass.contains(this.domNode, "fold")) {
@@ -130 +141 @@
                 }
             }
+            evt && event.stop(evt);
+            return false;
         }