Changeset 388

Timestamp:

07/30/12 01:19:12 (13 years ago)

Author:

hendrikvanantwerpen

Message:

Made QuestionEditorPreview? a ContentPane? that scales with the layout
correctly, no preset height in CSS needed anymore.
ISSUE: scrolling also starts a DnD event, Dojo bug?

Location:

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

Files:

• css/surveyEditor.css (modified) (1 diff)
• pages/question.html (modified) (1 diff)
• pages/question.js (modified) (3 diffs)
• ui/QuestionEditorPreview.js (modified) (1 diff)
• ui/templates/QuestionEditorPreview.html (modified) (1 diff)

Dev/branches/rest-dojo-ui/client/rft/css/surveyEditor.css

@@ -1 @@
-.claro .surveyEditorPreviewSource {
-        overflow: auto;
-        height: 350px;
-}
-
 .claro .surveyEditorPreview .surveyEditorPreviewItem {
         margin: 8px;

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

@@ -1 +1 @@
 <div data-dojo-type="rft.pages.question" class="orange">
-        <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'" style="height: 500px;">
-                <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
-                        <h2>
-                                <span class="rftIcon rftIconSurvey"></span>
-                                <span class="headerText">Question 123 [Editing]</span>
-                        </h2>
-                </div>
-                <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'left', design:'headline'" style="width: 300px;">
-                        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
-                                <div id="QuestionEditorToolkit"></div>
-                        </div>
-                        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
-                                <button id="btnDiscard" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconCancel'">Discard</button>
-                                <button id="btnSave" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconAccept'">Save and exit</button>
-                        </div>
-                </div>
-                <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
-                        <div id="QuestionEditorPreview"></div>
-                </div>
-        </div>
+    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'" style="height: 500px;">
+        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
+            <h2>
+                <span class="rftIcon rftIconSurvey"></span>
+                <span class="headerText">Question 123 [Editing]</span>
+            </h2>
+        </div>
+        <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'left', design:'headline'" style="width: 300px;">
+            <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
+                <div data-rft-attach-point="QuestionEditorToolkitNode"></div>
+            </div>
+            <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
+                <button id="btnDiscard" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconCancel'">Discard</button>
+                <button id="btnSave" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconAccept'">Save and exit</button>
+            </div>
+        </div>
+        <div data-rft-attach-point="QuestionEditorPreviewNode"></div>
+    </div>
 </div>

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

@@ -4 +4 @@
     'dojo/_base/lang',
     'dojo/behavior',
-    'dijit/form/FilteringSelect',
     'rft/store',
     'rft/content',
@@ -10 +9 @@
     'rft/ui/QuestionEditorPreview',
     'rft/ui/QuestionEditorToolkit'
-    ],function(declare, Deferred, lang, behavior, FilteringSelect, store, content, _Page, QuestionEditorPreview, QuestionEditorToolkit){
+    ],function(declare, Deferred, lang, behavior, store, content, _Page, QuestionEditorPreview, QuestionEditorToolkit){
         return declare('rft.pages.question', [_Page], {
             question: null,
@@ -67 +66 @@
             },
             _setupEditor: function() {
-                this._toolkit = new QuestionEditorToolkit();
-                this._toolkit.placeAt("QuestionEditorToolkit");
+                this._toolkit = new QuestionEditorToolkit({
+                },this.QuestionEditorToolkitNode);
                 this._toolkit.startup();
 
-                this._preview = new QuestionEditorPreview();
-                this._preview.placeAt("QuestionEditorPreview");
+                this._preview = new QuestionEditorPreview({ 
+                    region: 'center'
+                },this.QuestionEditorPreviewNode);
                 this._preview.startup();
                 this._supportingWidgets.push(this._toolkit, this._preview);

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

@@ -4 +4 @@
     'dojo/dnd/Source',
     'dojo/dom-construct',
-    'dijit/_Container',
-    'dijit/_TemplatedMixin',
-    'dijit/_WidgetBase',
-    'dijit/_WidgetsInTemplateMixin',
+    'dijit/layout/ContentPane',
     'rft/ui/QuestionEditorPreviewItem',
     'dojo/text!./templates/QuestionEditorPreview.html'
-    ], function(declare, lang, Source, domConstruct, _Container, _TemplatedMixin, _WidgetBase, _WidgetsInTemplateMixin, QuestionEditorPreviewItem, template) {
-        return declare("rft.ui.QuestionEditorPreview", [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, _Container], {
+    ], function(declare, lang, Source, domConstruct, ContentPane, QuestionEditorPreviewItem, template) {
+        return declare("rft.ui.QuestionEditorPreview", [ContentPane], {
 
             templateString: template,
+            'class': 'surveyEditorPreview',
             dndSource: null,
 
-            postCreate: function(){
+            startup: function(){
                 this.inherited(arguments);
-                this.dndSource = new Source(this.dndSourceNode, {
+                this.dndSource = new Source(this.domNode, {
                     accept: ["questionContent"],
                     skipForm: true,

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

@@ -1 @@
-<div>
-        <div data-dojo-attach-point="windowNode" class="surveyEditorPreview">
-                <div data-dojo-attach-point="dndSourceNode" class="surveyEditorPreviewSource">
-                </div>
-        </div>
+<div class="surveyEditorPreview">
 </div>