Changeset 376

Timestamp:

07/25/12 16:04:02 (13 years ago)

Author:

jkraaijeveld

Message:

Started the QuestionEditorPreview? bit - now works with headers and texts, fully stores and restores this in order properly.

Note: there must be a better way for this, but seeing as all content pieces can differ greatly I couldn't think of a way to make it properly generic. @Hendrik: need discussion about this.

Note2: Currently I don't use any internal events in the question editor. Not sure if it would be a lot better we would.

Location:

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

Files:

• pages/question.js (modified) (3 diffs)
• run.js (modified) (1 diff)
• ui/PreviewWidgets (added)
• ui/PreviewWidgets/HeaderItem.js (added)
• ui/PreviewWidgets/TextItem.js (added)
• ui/QuestionEditorPreview.js (modified) (3 diffs)
• ui/QuestionEditorPreviewItem.js (modified) (4 diffs)
• ui/QuestionEditorToolkit.js (modified) (2 diffs)
• ui/templates/QuestionEditorPreviewItem.html (modified) (2 diffs)

Dev/branches/rest-dojo-ui/client/rft/pages/question.js

@@ -39 +39 @@
             _refresh: function () {
                 this._toolkit.loadQuestion(this.question);
+                this._preview.insertObjects(this.question.content || []);
             },
             _onSave: function() {
                 lang.mixin(this.question, this._toolkit.propertiesForm.get('value'));
                 this.question.categories = this._toolkit._categories; 
+                this.question.content = this._preview.getContent();
                 store.put(this.question)
                 .then(function() {
@@ -50 +52 @@
             },
             _onDiscard: function() {
-                this._toolkit.propertiesForm.reset();
                 content.goTo('questions');
                 return false;
@@ -71 +72 @@
             },
             _setupEditor: function() {
-//                this.toolkit = new rft.ui.QuestionEditorToolkit( { question: this.question } );
                 this._toolkit = new rft.ui.QuestionEditorToolkit();
                 this._toolkit.placeAt("QuestionEditorToolkit");

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

@@ -42 +42 @@
     'rft/ui/Selector',
     'rft/ui/TitleGroup',
-    
+    'rft/ui/PreviewWidgets/HeaderItem',
+    'rft/ui/PreviewWidgets/TextItem',
     // pages -> load dynamically?
     'rft/pages/index',

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

@@ -45 +45 @@
                                                 item: item
                                         });
-                                        return {node: previewItem.domNode, data: item, type: "PreviewItem"};
+                                        return {node: previewItem.domNode, data: previewItem, type: item.type};
                                         break;                                  
                                 }                               
@@ -59 +59 @@
                                 return innerWidget;
                         },
-                        InsertObjects: function(/*Array*/objects) {
+                        insertObjects: function(/*Array*/objects) {
                                 // This takes an array of objects {data:{//props}, type:[//types]}. Node is NOT included!
                                 objects.forEach(function(item){
@@ -65 +65 @@
                                 }, this);
                         },
-                        RemoveObject: function(widget) {
+                        getContent: function() {
+                                content = [];
+                                var nodes = this.dndSource.getAllNodes();
+                                for (var i = 0; i < nodes.length; i++) {
+                                        content.push(this.dndSource.getItem(nodes[i].id).data.getContent());
+                                }
+                                return content;
                         },
-                        GetNodeList: function() {
+                        getNodeList: function() {
                                 return this.dndSource.getAllNodes();
                         },

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

@@ -9 +9 @@
         'dijit/_WidgetsInTemplateMixin',
         'dijit/form/TextBox',
+        'rft/ui/PreviewWidgets/HeaderItem',
+        'rft/ui/PreviewWidgets/TextItem',
         'dojo/text!./templates/QuestionEditorPreviewItem.html',
-        ], function(declare, fx, _WidgetBase, domClass, lang, on, _TemplatedMixin, _WidgetsInTemplateMixin, TextBox, templateFull) {
+        ], function(declare, fx, _WidgetBase, domClass, lang, on, _TemplatedMixin, _WidgetsInTemplateMixin, TextBox, HeaderItem, TextItem, templateFull) {
                 return declare("rft.ui.QuestionEditorPreviewItem", [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
 
@@ -20 +22 @@
                         foldDuration: [250, 250],
                         animation: null,
-                        
+                        _editing: false,
+
                         postCreate: function() {
                                 this.foldButtonNode.onClick = lang.hitch(this, this.toggleFold);
+                                this.removeButtonNode.onClick = lang.hitch(this, this.removeObject);
+                                this.editButtonNode.onClick = lang.hitch(this, this.toggleEdit);
                                 if (this.item) {
                                         this._createInnerWidget();
@@ -32 +37 @@
                                         this.titleNode.innerHTML = title;
                                 });
+                        },
+                        toggleEdit: function() {
+                                if(this._editing) {
+                                        this.editButtonNode.iconNode.className = this.editButtonNode.iconNode.className.replace("rftIconAccept", "rftIconEdit");
+                                        this.editButtonNode.set("label", "Edit");
+                                        this.innerWidget.save();
+                                }
+                                else {
+                                        this.editButtonNode.iconNode.className = this.editButtonNode.iconNode.className.replace("rftIconEdit", "rftIconAccept");
+                                        this.editButtonNode.set("label", "Save");
+                                        this.innerWidget.edit();
+                                }
+                                this._editing = !this._editing;
                         },
                         toggleFold: function() {
@@ -65 +83 @@
                                 }
                         },
+                        getContent: function() {
+                                return {        data: this.innerWidget.getContent(),
+                                                        type: this.item.type };
+                        },
+                        removeObject: function(widget) {
+                                this.destroyRecursive();
+                        },
                         _createInnerWidget: function() {
                                 // This always creates a textbox as innerwidget pending creation of actual innerWidgets.
                                 // Introduce a better way to create these widgets than a switch statement, based on item.widgetType? Perhaps "new eval(item.widgetType)({});" ?
+                                this.innerWidget = eval("new "+ this.item.type + "({ disabled: true });");
+                                this.innerWidget.setContent(this.item.data);
+                                this.titleNode.innerHTML = this.item.type;
+                                /*
                                 switch (this.item.widgetType) {
                                         default:
-                                        this.innerWidget = new TextBox();
+                                        this.innerWidget = new HeaderItem({ disabled: true });
+                                        this.titleNode.innerHTML = "Header";
                                         break;
-                                }
+                                }*/
                                 this.innerWidget.placeAt(this.containerNode);
                         }

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

@@ -134 +134 @@
                                         objectData: {
                                                 _id: null,
-                                                widgetType: "rft.surveyContent.HeaderDialog",
+                                                type: "HeaderItem",
                                                 widgetProps: {}
                                         },
@@ -143 +143 @@
                                         objectData: {
                                                 _id: null,
-                                                widgetType: "rft.surveyContent.TextDialog",
+                                                type: "TextItem",
                                                 widgetProps: {}
                                         },

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

@@ -4 +4 @@
                 <span class="floatRight">
                         <button class="blue" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftBlockButton', showLabel: false, iconClass: 'rftIcon rftIconHalfArrowUp'" data-dojo-attach-point="foldButtonNode">Fold</button>
-                        <button class="blue" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftBlockButton', showLabel: false, iconClass: 'rftIcon rftIconDelete'">Remove</button>
+                        <button class="blue" data-dojo-type="dijit.form.Button" data-dojo-attach-point="removeButtonNode" data-dojo-props="baseClass: 'rftBlockButton', showLabel: false, iconClass: 'rftIcon rftIconDelete'">Remove</button>
                 </span>
         </div>
@@ -15 +15 @@
         <div class="bottomBorder inheritBgColor light" data-dojo-attach-point="bottomBorderNode">
                 <span class="floatRight">
-                        <button class="trans" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftBlockButton', iconClass: 'rftIcon rftIconEdit'">Edit</button>
+                        <button class="trans" data-dojo-type="dijit.form.Button" data-dojo-attach-point="editButtonNode" data-dojo-props="baseClass: 'rftBlockButton', iconClass: 'rftIcon rftIconEdit'">Edit</button>
                 </span>
         </div>