Changeset 387


Ignore:
Timestamp:
07/30/12 00:19:37 (13 years ago)
Author:
hendrikvanantwerpen
Message:
Location:
Dev/branches/rest-dojo-ui/client/rft
Files:
7 edited
1 moved

Legend:

Unmodified
Added
Removed

  • Dev/branches/rest-dojo-ui/client/rft/css/layout.css

    r381 r387  
    278278
    279279.claro .newline {
    280     float: left;
    281     clear: both;
    282 }
    283 
     280    display: block;
     281}
    284282
    285283/* Question editor/Survey Advanced editor */

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

    r377 r387  
    1717                </div>
    1818                <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
    19                         <div id="QuestionEditorPreview">
    20                                
    21                         </div>
     19                        <div id="QuestionEditorPreview"></div>
    2220                </div>
    2321        </div>

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

    r377 r387  
    1 define(['dojo/_base/declare',
     1define([
     2    'dojo/_base/declare',
     3    'dojo/_base/Deferred',
    24    'dojo/_base/lang',
    3     'dojo/_base/event',
    4     'dojo/_base/Deferred',
    5     'rft/ui/LineWithActionsWidget',
     5    'dojo/behavior',
     6    'dijit/form/FilteringSelect',
    67    'rft/store',
     8    'rft/content',
    79    'rft/ui/_Page',
    8     'rft/api',
    9     'rft/content',
    10     'dijit/registry',
    11     'dojo/on',
    12     'dojo/behavior',
    13     'dojo/query',
    1410    'rft/ui/QuestionEditorPreview',
    15     'rft/ui/QuestionEditorToolkit',
    16     'dijit/form/FilteringSelect'],
    17     function(declare, lang, event, Deferred, LineWithActionsWidget, store, _Page, api, content, registry, on, behavior, query){
     11    'rft/ui/QuestionEditorToolkit'
     12    ],function(declare, Deferred, lang, behavior, FilteringSelect, store, content, _Page, QuestionEditorPreview, QuestionEditorToolkit){
    1813        return declare('rft.pages.question', [_Page], {
    1914            question: null,
    … …  
    7267            },
    7368            _setupEditor: function() {
    74                 this._toolkit = new rft.ui.QuestionEditorToolkit();
     69                this._toolkit = new QuestionEditorToolkit();
    7570                this._toolkit.placeAt("QuestionEditorToolkit");
     71                this._toolkit.startup();
    7672
    77                 this._preview = new rft.ui.QuestionEditorPreview();
     73                this._preview = new QuestionEditorPreview();
    7874                this._preview.placeAt("QuestionEditorPreview");
     75                this._preview.startup();
    7976                this._supportingWidgets.push(this._toolkit, this._preview);
    8077            }

  • Dev/branches/rest-dojo-ui/client/rft/ui/ContentWidgetFactory.js

    r385 r387  
    1 define( [
    2         'dojo',
    3         'dojo/_base/lang',
    4         'dijit',
    5         'dijit/layout/StackContainer',
    6         'dojox/form/CheckedMultiSelect',
    7         'dojox/layout/TableContainer',
    8         'rft/ui/MultipleChoiceListView'],
    9         function(dojo, lang, dijit, StackContainer, CheckedMultiSelect, TableContainer, ListView) {
    10                 dojo.provide('rft.ui.InnerWidgetFactory');
    11                 dojo.declare('rft.ui.InnerWidgetFactory', [],{
    12                         /* No default type, all should be valid */
    13                         createWidget: function(/*Object*/ options) {
    14                                 // options: Object
    15                                 //                      type: "header", "text", textinput, etc.
    16                                 //                      contents: "text"
    17                                 //                      disabled: bool
    18                                 return this['create'+options.widgetType+'Widget'](options);
    19                         },
    20                         createHeaderWidget: function(options) {
    21                                 var headerWidget = new rft.ui.HeaderItem();
    22                                 headerWidget.setObject(options);
    23                                 return headerWidget;
    24                         },
    25                         createTextWidget: function(options) {
    26                                 var textWidget = new rft.ui.TextItem();
    27                                 textWidget.setObject(options);
    28                                 return textWidget;
    29                         },
    30                         createFreeTextInputWidget: function(options) {
    31                                 return new rft.ui.FreeTextInput();
    32                         },
    33                         createIntegerInputWidget: function(options) {
    34                                 var integerWidget = new rft.ui.IntegerInput();
    35                                 integerWidget.setObject(options);
    36                                 return integerWidget;
    37                         },
    38                         createMultipleChoiceInputWidget: function(options) {
    39                                 var mcWidget = new rft.ui.MultipleChoiceInput();
    40                                 mcWidget.setObject(options);
    41                                 return mcWidget;
    42                         }
    43                 });
     1define([
     2    'dojo/_base/declare',
     3    'dojo/_base/lang',
     4    'dijit/form/NumberSpinner',
     5    'dijit/form/Textarea',
     6    'dijit/form/TextBox',
     7    'dijit/layout/StackContainer',
     8    'dojox/form/CheckedMultiSelect',
     9    'dojox/layout/TableContainer'
     10    ],function(declare, lang, NumberSpinner, Textarea, TextBox, StackContainer, CheckedMultiSelect, TableContainer) {
     11        var factory = declare('rft.ui.ContentWidgetFactory', [], {
     12            /* No default type, all should be valid */
     13            createWidget: function(/*Object*/ content) {
     14                // options: Object
     15                //            type: "header", "text", textinput, etc.
     16                //            contents: "text"
     17                //            disabled: bool
     18                return this['create'+content.type+'Widget'](content);
     19            },
     20            createHeaderWidget: function(options) {
     21                var headerWidget = new HeaderItem();
     22                headerWidget.setObject(options);
     23                return headerWidget;
     24            },
     25            createTextWidget: function(options) {
     26                var textWidget = new TextItem();
     27                textWidget.setObject(options);
     28                return textWidget;
     29            },
     30            createFreeTextInputWidget: function(options) {
     31                return new FreeTextInput();
     32            },
     33            createIntegerInputWidget: function(options) {
     34                var integerWidget = new IntegerInput();
     35                integerWidget.setObject(options);
     36                return integerWidget;
     37            },
     38            createMultipleChoiceInputWidget: function(options) {
     39                var mcWidget = new MultipleChoiceInput();
     40                mcWidget.setObject(options);
     41                return mcWidget;
     42            }
     43        });
    4444
    45                 /* Contents */
    46                 dojo.declare('rft.ui.HeaderItem', dijit.form.TextBox, {
    47                         getObject: function() {
    48                                 return { widgetType : 'Header',
    49                                                 contents: this.get('value'),
    50                                                 disabled: this.get('disabled')
    51                                 };
    52                         },
    53                         setObject: function(object) {
    54                                 this.set('value', object.contents);
    55                                 if (object.disabled) {
    56                                         this.set('disabled', true);
    57                                 }
    58                         }
    59                 });
     45        /* Contents */
     46        var HeaderItem = declare(TextBox, {
     47            getObject: function() {
     48                return { type : 'Header',
     49                        contents: this.get('value'),
     50                        disabled: this.get('disabled')
     51                };
     52            },
     53            setObject: function(object) {
     54                this.set('value', object.contents);
     55                if (object.disabled) {
     56                    this.set('disabled', true);
     57                }
     58            }
     59        });
    6060
    61                 dojo.declare('rft.ui.TextItem', dijit.form.Textarea, {
    62                         getObject: function() {
    63                                 return { widgetType : 'Text',
    64                                                 contents: this.get('value'),
    65                                                 disabled: this.get('disabled')
    66                                 };
    67                         },
    68                         setObject: function(object) {
    69                                 this.set('value', object.contents);
    70                                 if (object.disabled) {
    71                                         this.set('disabled', true);
    72                                 }
    73                         }       
    74                 });
     61        var TextItem = declare(Textarea, {
     62            getObject: function() {
     63                return { type: 'Text',
     64                        contents: this.get('value'),
     65                        disabled: this.get('disabled')
     66                };
     67            },
     68            setObject: function(object) {
     69                this.set('value', object.contents);
     70                if (object.disabled) {
     71                    this.set('disabled', true);
     72                }
     73            }   
     74        });
    7575
     76        /* Inputs */
     77        var FreeTextInput = declare(Textarea, {
     78            getObject: function() {
     79                return { type: 'FreeTextInput' };
     80            }
     81        });
    7682
     83        //Use CheckedMultiSelect
     84        var MultipleChoiceInput = declare(StackContainer, {
     85            _multiSelect: null,
     86            postCreate: function() {
     87                this.inherited(arguments);
     88                this._multiSelect = new CheckedMultiSelect();
     89                this._multiSelect.addOption({ label: "Hurr durr", value: 1 });
     90                this._multiSelect.addOption({ label: "This is a choice", value: 1 });
     91                this._multiSelect.addOption({ label: "This too", value: 1 });
     92                this._multiSelect.addOption({ label: "So because there are more", value: 1 });
     93                this._multiSelect.addOption({ label: "This must be multiple choice.", value: 1 });
     94                this.addChild(this._multiSelect);
     95            },
    7796
    78                 /* Inputs */
    79                 dojo.declare('rft.ui.FreeTextInput', dijit.form.Textarea, {
    80                         getObject: function() {
    81                                 return { widgetType: 'FreeTextInput' };
    82                         }
    83                 });
     97            setObject: function() {
     98                return;
     99            },
    84100
    85                 //Use CheckedMultiSelect
    86                 dojo.declare('rft.ui.MultipleChoiceInput',  StackContainer, {
    87                         _multiSelect: null,
    88                         postCreate: function() {
    89                                 this.inherited(arguments);
    90                                 this._multiSelect = new CheckedMultiSelect();
    91                                 this._multiSelect.addOption({ label: "Hurr durr", value: 1 });
    92                                 this._multiSelect.addOption({ label: "This is a choice", value: 1 });
    93                                 this._multiSelect.addOption({ label: "This too", value: 1 });
    94                                 this._multiSelect.addOption({ label: "So because there are more", value: 1 });
    95                                 this._multiSelect.addOption({ label: "This must be multiple choice.", value: 1 });
    96                                 this.addChild(this._multiSelect);
    97                         },
     101            edit: function() {
     102                return;
     103            }
    98104
    99                         setObject: function() {
    100                                 return;
    101                         },
     105        });
    102106
    103                         edit: function() {
    104                                 return;
    105                         }
     107        var IntegerInput = declare(StackContainer, {
     108            _numberSpinner:  null,
     109            _simpleTable: null,
     110            _editWidgets: null,
     111            _editTable: null,
     112            postCreate: function() {
     113                this.inherited(arguments);
     114                this._numberSpinner = new NumberSpinner( { title: "Answer", value: 0, constraints: { min: -100, max: 100 } });   
     115                this._simpleTable = new TableContainer({ cols: 1, customClass: "labelsAndValues", labelWidth : 150} );
     116                this._simpleTable.addChild(this._numberSpinner);
     117                this._editTable = new TableContainer({ cols: 1, customClass: "labelsAndValues"} );
     118                this._simpleTable.startup();
     119                this.addChild(this._simpleTable);
     120            },
     121            edit: function() {
     122                this.removeChild(this._simpleTable);
     123                this.addChild(this._editTable);
     124            },
     125            save: function () {
     126                for (var widget in this._editWidgets) {
     127                    var w = this._editWidgets[widget];
     128                    if (w.value) {
     129                        if (w.constraint)
     130                            this._numberSpinner.constraints[w.field] = w.value;
     131                        else
     132                            this._numberSpinner.set(w.field, w.value);
     133                    }
     134                }
     135                this.removeChild(this._editTable);
     136                this.addChild(this._simpleTable);
     137                this._simpleTable.layout();
     138            },
     139            setObject: function(object) {
     140                if(object.contents) {
     141                    lang.mixin(this._numberSpinner, object.contents);
     142                    this._setupEditWidgets(object.contents);
     143                }
     144                else {
     145                    //Create widgets with default values
     146                    this._setupEditWidgets(this.getObject().contents);
     147                }
     148            },
     149            _setupEditWidgets: function(contents) {
     150                //Set up widgets which should appear once edit is pressed.
     151                this._editWidgets = [];
     152                this._editWidgets.push(new NumberSpinner( { field: "value", title: "Default value" }))
     153                this._editWidgets.push(new NumberSpinner( { field: "smallDelta", title: "Increment size" }));
     154                this._editWidgets.push(new NumberSpinner( { constraint: true, field: "max", title: "Maximum value" }));
     155                this._editWidgets.push(new NumberSpinner( { constraint: true, field: "min", title: "Minimum value" }));
     156                this._editWidgets.push(new TextBox ( { field: "invalidMessage", title: "Invalid message" }));
     157                this._editWidgets.push(new TextBox ( { field: "title", title: "Label" }));
     158                for (var widget in this._editWidgets) {
     159                    var w = this._editWidgets[widget];
     160                    if (w.constraint)
     161                        w.set('value', contents.constraints[w.field]);
     162                    else
     163                        w.set('value', contents[w.field]);
     164                    this._editTable.addChild(w);
     165                }
     166                this._editTable.startup();
     167            },
     168            getObject: function() {
     169                return {
     170                    type: 'IntegerInput',
     171                    contents: {
     172                        value: this._numberSpinner.value,
     173                        smallDelta: this._numberSpinner.smallDelta,
     174                        constraints: this._numberSpinner.constraints,
     175                        invalidMessage: this._numberSpinner.invalidMessage,
     176                        title: this._numberSpinner.title
     177                    }
     178                };
     179            }
     180        });
    106181
    107                 });
    108 
    109                 dojo.declare('rft.ui.IntegerInput', StackContainer, {
    110                         _numberSpinner:  null,
    111                         _simpleTable: null,
    112                         _editWidgets: null,
    113                         _editTable: null,
    114                         postCreate: function() {
    115                                 this.inherited(arguments);
    116                                 this._numberSpinner = new dijit.form.NumberSpinner( { title: "Answer", value: 0, constraints: { min: -100, max: 100 } });       
    117                                 this._simpleTable = new TableContainer({ cols: 1, customClass: "labelsAndValues", labelWidth : 150} );
    118                                 this._simpleTable.addChild(this._numberSpinner);
    119                                 this._editTable = new TableContainer({ cols: 1, customClass: "labelsAndValues"} );
    120                                 this._simpleTable.startup();
    121                                 this.addChild(this._simpleTable);
    122                         },
    123                         edit: function() {
    124                                 this.removeChild(this._simpleTable);
    125                                 this.addChild(this._editTable);
    126                         },
    127                         save: function () {
    128                                 for (widget in this._editWidgets) {
    129                                         var w = this._editWidgets[widget];
    130                                         if (w.value) {
    131                                                 if (w.constraint)
    132                                                         this._numberSpinner.constraints[w.field] = w.value;
    133                                                 else
    134                                                         this._numberSpinner.set(w.field, w.value);
    135                                         }
    136                                 }
    137                                 this.removeChild(this._editTable);
    138                                 this.addChild(this._simpleTable);
    139                                 this._simpleTable.layout();
    140                         },
    141                         setObject: function(object) {
    142                                 if(object.contents) {
    143                                         lang.mixin(this._numberSpinner, object.contents);
    144                                         this._setupEditWidgets(object.contents);
    145                                 }
    146                                 else {
    147                                         //Create widgets with default values
    148                                         this._setupEditWidgets(this.getObject().contents);
    149                                 }
    150                         },
    151                         _setupEditWidgets: function(contents) {
    152                                 //Set up widgets which should appear once edit is pressed.
    153                                 this._editWidgets = [];
    154                                 this._editWidgets.push(new dijit.form.NumberSpinner( { field: "value", title: "Default value" }))
    155                                 this._editWidgets.push(new dijit.form.NumberSpinner( { field: "smallDelta", title: "Increment size" }));
    156                                 this._editWidgets.push(new dijit.form.NumberSpinner( { constraint: true, field: "max", title: "Maximum value" }));
    157                                 this._editWidgets.push(new dijit.form.NumberSpinner( { constraint: true, field: "min", title: "Minimum value" }));
    158                                 this._editWidgets.push(new dijit.form.TextBox ( { field: "invalidMessage", title: "Invalid message" }));
    159                                 this._editWidgets.push(new dijit.form.TextBox ( { field: "title", title: "Label" }));
    160                                 for (widget in this._editWidgets) {
    161                                         var w = this._editWidgets[widget];
    162                                         if (w.constraint)
    163                                                 w.set('value', contents.constraints[w.field]);
    164                                         else
    165                                                 w.set('value', contents[w.field]);
    166                                         this._editTable.addChild(w);
    167                                 }
    168                                 this._editTable.startup();
    169                         },
    170                         getObject: function() {
    171                                 return {
    172                                         widgetType: 'IntegerInput',
    173                                         contents: {
    174                                                 value: this._numberSpinner.value,
    175                                             smallDelta: this._numberSpinner.smallDelta,
    176                                                 constraints: this._numberSpinner.constraints,
    177                                                 invalidMessage: this._numberSpinner.invalidMessage,
    178                                                 title: this._numberSpinner.title
    179                                         }
    180                                 };
    181                         }
    182                 });
    183         }
    184 )
     182        return factory;
     183    });

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

    r384 r387  
    3636                this.source = new Source(this.sourceNode, {
    3737                    accept: [this.type],
    38                     horizontal: false,
    3938                    singular: true,
    4039                    creator: lang.hitch(this, this._createNode)

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

    r377 r387  
    11define([
    2         'dojo/_base/declare',
    3         'dojo/_base/lang',
    4         'dojo/_base/array',
    5         'dijit/_WidgetBase',
    6         'dijit/_Container',
    7         'dojo/dom-construct',
    8         'rft/ui/QuestionEditorPreviewItem',
    9         'dijit/_TemplatedMixin',
    10         'dijit/_WidgetsInTemplateMixin',
    11         'dojo/text!./templates/QuestionEditorPreview.html'
    12         ], function(declare, lang, baseArray, _WidgetBase, _Container, domConstruct, QuestionEditorPreviewItem, _TemplatedMixin, _WidgetsInTemplateMixin, template) {
    13                 return declare("rft.ui.QuestionEditorPreview", [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, _Container], {
     2    'dojo/_base/declare',
     3    'dojo/_base/lang',
     4    'dojo/dnd/Source',
     5    'dojo/dom-construct',
     6    'dijit/_Container',
     7    'dijit/_TemplatedMixin',
     8    'dijit/_WidgetBase',
     9    'dijit/_WidgetsInTemplateMixin',
     10    'rft/ui/QuestionEditorPreviewItem',
     11    'dojo/text!./templates/QuestionEditorPreview.html'
     12    ], function(declare, lang, Source, domConstruct, _Container, _TemplatedMixin, _WidgetBase, _WidgetsInTemplateMixin, QuestionEditorPreviewItem, template) {
     13        return declare("rft.ui.QuestionEditorPreview", [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, _Container], {
    1414
    15                         templateString: template,
    16                         dndSource: null,
     15            templateString: template,
     16            dndSource: null,
    1717
    18                         postCreate: function(){
    19                                 this.dndSource = new dojo.dnd.Source(this.dndSourceNode, {
    20                                         isSource: true,
    21                                         //accept: ["ToolkitItem", "PreviewItem"],
    22                                         horizontal: false,
    23                                         withHandles: false,
    24                                         copyOnly: false,
    25                                         selfCopy: false,
    26                                         selfAccept: true,
    27                                         delay: 0,
    28                                         skipForm: true,
    29                                         creator: lang.hitch(this, this._sourceCreatorMethod)
    30                                 });
    31                                 this.dndSource.startup();
    32                         },
    33                         _sourceCreatorMethod: function(item, hint){
    34                                 var node;
    35                                 switch(hint){
    36                                        
    37                                         case "avatar":
    38                                         node = document.createElement("span");
    39                                         node.innerHTML = item.item.data || "Dragging!!!";
    40                                         return {node: node, data: item, type: "PreviewItem"};
    41                                         break;
    42                                        
    43                                         default:
    44                                         var previewItem = new rft.ui.QuestionEditorPreviewItem({
    45                                                 item: item
    46                                         });
    47                                         return {node: previewItem.domNode, data: previewItem, type: item.type};
    48                                         break;                                 
    49                                 }                               
    50                         },
    51                         _createInnerWidget: function(item) {
    52                                 var innerWidget;
    53                                 switch (item.widgetType) {
    54                                         default:
    55                                         innerWidget = new dijit.form.Button({});
    56                                         break;
    57                                 }
     18            postCreate: function(){
     19                this.inherited(arguments);
     20                this.dndSource = new Source(this.dndSourceNode, {
     21                    accept: ["questionContent"],
     22                    skipForm: true,
     23                    creator: lang.hitch(this, this._sourceCreatorMethod)
     24                });
     25                this.dndSource.startup();
     26            },
     27            _sourceCreatorMethod: function(item, hint){
     28                var node;
     29                switch(hint){
     30                case "avatar":
     31                    node = domConstruct.create("span",{
     32                        innerHTML: item.type || "Dragging!!!"
     33                    });
     34                default:
     35                    var previewItem = new QuestionEditorPreviewItem({
     36                        item: item.content
     37                    });
     38                    node = previewItem.domNode;
     39                }               
     40                return {node: node, data: item, type: ["questionContent"]};
     41            },
     42            insertObjects: function(/*Array*/items) {
     43                this.dndSource.insertNodes(false, items);
     44            },
     45            getContent: function() {
     46                var content = [];
     47                var nodes = this.dndSource.getAllNodes();
     48                for (var i = 0; i < nodes.length; i++) {
     49                    content.push(this.dndSource.getItem(nodes[i].id).data.getContent());
     50                }
     51                return content;
     52            },
     53            getNodeList: function() {
     54                return this.dndSource.getAllNodes();
     55            },
     56            onDropInternal: function() {
     57                topic.publish("/QuestionEditor/Preview/MoveItem");
     58            },
     59            onDropExternal: function() {
     60                // This is fired when something from the Toolkit is dropped into the Preview -- add operation.
     61                topic.publish("/QuestionEditor/Preview/AddItem");
     62            }
    5863
    59                                 return innerWidget;
    60                         },
    61                         insertObjects: function(/*Array*/objects) {
    62                                 // This takes an array of objects {data:{//props}, type:[//types]}. Node is NOT included!
    63                                 objects.forEach(function(item){
    64                                         this.dndSource.insertNodes(false, [item]);
    65                                 }, this);
    66                         },
    67                         getContent: function() {
    68                                 content = [];
    69                                 var nodes = this.dndSource.getAllNodes();
    70                                 for (var i = 0; i < nodes.length; i++) {
    71                                         content.push(this.dndSource.getItem(nodes[i].id).data.getContent());
    72                                 }
    73                                 return content;
    74                         },
    75                         getNodeList: function() {
    76                                 return this.dndSource.getAllNodes();
    77                         },
    78                         onDropInternal: function() {
    79                                 topic.publish("/QuestionEditor/Preview/MoveItem");
    80                         },
    81                         onDropExternal: function() {
    82                                 // This is fired when something from the Toolkit is dropped into the Preview -- add operation.
    83                                 topic.publish("/QuestionEditor/Preview/AddItem");
    84                         }
    85 
    86                 });
    87 });
     64        });
     65    });

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

    r381 r387  
    11define([
    2         'dojo/_base/declare',
    3         'dojo/_base/fx',
    4         'dijit/_WidgetBase',
    5         'dojo/dom-class',
    6         'dojo/_base/lang',
    7         'dojo/on',
    8         'dijit/_TemplatedMixin',
    9         'dijit/_WidgetsInTemplateMixin',
    10         'dijit/form/TextBox',
    11         'rft/ui/InnerWidgetFactory',
    12         'dojo/text!./templates/QuestionEditorPreviewItem.html',
    13         ], function(declare, fx, _WidgetBase, domClass, lang, on, _TemplatedMixin, _WidgetsInTemplateMixin, TextBox, InnerWidgetFactory, templateFull) {
    14                 return declare("rft.ui.QuestionEditorPreviewItem", [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
     2    'dojo/_base/declare',
     3    'dojo/_base/fx',
     4    'dojo/_base/lang',
     5    'dojo/dom-class',
     6    'dojo/on',
     7    'dijit/_TemplatedMixin',
     8    'dijit/_WidgetBase',
     9    'dijit/_WidgetsInTemplateMixin',
     10    'rft/ui/ContentWidgetFactory',
     11    'dojo/text!./templates/QuestionEditorPreviewItem.html',
     12    ], function(declare, fx, lang, domClass, on, _TemplatedMixin, _WidgetBase, _WidgetsInTemplateMixin, ContentWidgetFactory, template) {
     13        return declare("rft.ui.QuestionEditorPreviewItem", [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
    1514
    16                         version: "full",
    17                         templateString: templateFull,
    18                         baseClass: "surveyEditorPreviewItem",
    19                         previousContentHeight: 200,
    20                         innerWidget: null,
    21                         foldDuration: [250, 250],
    22                         animation: null,
    23                         _editing: false,
     15            version: "full",
     16            templateString: template,
     17            baseClass: "surveyEditorPreviewItem",
     18            previousContentHeight: 200,
     19            innerWidget: null,
     20            foldDuration: [250, 250],
     21            animation: null,
     22            _editing: false,
    2423
    25                         postCreate: function() {
    26                                 this.foldButtonNode.onClick = lang.hitch(this, this.toggleFold);
    27                                 this.removeButtonNode.onClick = lang.hitch(this, this.removeObject);
    28                                 this.editButtonNode.onClick = lang.hitch(this, this.toggleEdit);
    29                                 if (this.item) {
    30                                         this._createInnerWidget();
    31                                 } else {
    32                                         throw "No data supplied to create an innerWidget off of!";
    33                                 }
     24            postCreate: function() {
     25                this.inherited(arguments);
     26                this.foldButtonNode.onClick = lang.hitch(this, this.toggleFold);
     27                this.removeButtonNode.onClick = lang.hitch(this, this.removeObject);
     28                this.editButtonNode.onClick = lang.hitch(this, this.toggleEdit);
     29                if (this.item) {
     30                    this._createInnerWidget();
     31                } else {
     32                    throw "No data supplied to create an innerWidget off of!";
     33                }
    3434
    35                                 on(this.innerWidget, "onSetTitle", function(title) {
    36                                         this.titleNode.innerHTML = title;
    37                                 });
    38                         },
    39                         toggleEdit: function() {
    40                                 if(this._editing) {
    41                                         this.editButtonNode.iconNode.className = this.editButtonNode.iconNode.className.replace("rftIconAccept", "rftIconEdit");
    42                                         this.editButtonNode.set("label", "Edit");
    43                                         this.innerWidget.save();
    44                                 }
    45                                 else {
    46                                         this.editButtonNode.iconNode.className = this.editButtonNode.iconNode.className.replace("rftIconEdit", "rftIconAccept");
    47                                         this.editButtonNode.set("label", "Save");
    48                                         this.innerWidget.edit();
    49                                 }
    50                                 this._editing = !this._editing;
    51                         },
    52                         toggleFold: function() {
    53                                 if (!this.animation) {
    54                                         if (!domClass.contains(this.domNode, "fold")) {
    55                                                 this.previousContentHeight = dojo.marginBox(this.innerNode).h;
    56                                                 this.animation = fx.animateProperty({
    57                                                         node: this.innerNode,
    58                                                         duration: this.foldDuration[0],
    59                                                         properties: {
    60                                                                 height: 1                                               
    61                                                         },
    62                                                         onEnd: lang.hitch(this, function(){
    63                                                                 domClass.add(this.domNode, "fold");
    64                                                                 this.animation = null;
    65                                                         })
    66                                                 }).play();
    67                                                 this.foldButtonNode.iconNode.className = this.foldButtonNode.iconNode.className.replace("rftIconHalfArrowUp", "rftIconHalfArrowDown");
    68                                         } else {
    69                                                 this.animation = fx.animateProperty({
    70                                                         node: this.innerNode,
    71                                                         duration: this.foldDuration[1],
    72                                                         properties: {
    73                                                                 height: this.previousContentHeight                             
    74                                                         },
    75                                                         onEnd: lang.hitch(this, function(){
    76                                                                 domClass.remove(this.domNode, "fold");
    77                                                                 this.animation = null;
    78                                                         })
    79                                                 }).play();
    80                                                 this.foldButtonNode.iconNode.className = this.foldButtonNode.iconNode.className.replace("rftIconHalfArrowDown", "rftIconHalfArrowUp");
    81                                         }
    82                                 }
    83                         },
    84                         getContent: function() {
    85                                 return this.innerWidget.getObject();
    86                         },
    87                         removeObject: function(widget) {
    88                                 this.destroyRecursive();
    89                         },
    90                         _createInnerWidget: function() {
    91                                 // This always creates a textbox as innerwidget pending creation of actual innerWidgets.
    92                                 // Introduce a better way to create these widgets than a switch statement, based on item.widgetType? Perhaps "new eval(item.widgetType)({});" ?
     35                on(this.innerWidget, "onSetTitle", function(title) {
     36                    this.titleNode.innerHTML = title;
     37                });
     38            },
     39            toggleEdit: function() {
     40                if(this._editing) {
     41                    this.editButtonNode.iconNode.className = this.editButtonNode.iconNode.className.replace("rftIconAccept", "rftIconEdit");
     42                    this.editButtonNode.set("label", "Edit");
     43                    this.innerWidget.save();
     44                }
     45                else {
     46                    this.editButtonNode.iconNode.className = this.editButtonNode.iconNode.className.replace("rftIconEdit", "rftIconAccept");
     47                    this.editButtonNode.set("label", "Save");
     48                    this.innerWidget.edit();
     49                }
     50                this._editing = !this._editing;
     51            },
     52            toggleFold: function() {
     53                if (!this.animation) {
     54                    if (!domClass.contains(this.domNode, "fold")) {
     55                        this.previousContentHeight = dojo.marginBox(this.innerNode).h;
     56                        this.animation = fx.animateProperty({
     57                            node: this.innerNode,
     58                            duration: this.foldDuration[0],
     59                            properties: {
     60                                height: 1                       
     61                            },
     62                            onEnd: lang.hitch(this, function(){
     63                                domClass.add(this.domNode, "fold");
     64                                this.animation = null;
     65                            })
     66                        }).play();
     67                        this.foldButtonNode.iconNode.className = this.foldButtonNode.iconNode.className.replace("rftIconHalfArrowUp", "rftIconHalfArrowDown");
     68                    } else {
     69                        this.animation = fx.animateProperty({
     70                            node: this.innerNode,
     71                            duration: this.foldDuration[1],
     72                            properties: {
     73                                height: this.previousContentHeight               
     74                            },
     75                            onEnd: lang.hitch(this, function(){
     76                                domClass.remove(this.domNode, "fold");
     77                                this.animation = null;
     78                            })
     79                        }).play();
     80                        this.foldButtonNode.iconNode.className = this.foldButtonNode.iconNode.className.replace("rftIconHalfArrowDown", "rftIconHalfArrowUp");
     81                    }
     82                }
     83            },
     84            getContent: function() {
     85                return this.innerWidget.getObject();
     86            },
     87            removeObject: function(evt) {
     88                this.destroyRecursive();
     89            },
     90            _createInnerWidget: function() {
     91                this.innerWidget = new ContentWidgetFactory().createWidget( this.item );
     92                this.innerWidget.placeAt(this.containerNode);
     93                this.innerWidget.startup();
     94            }
    9395
    94                                 this.innerWidget = new InnerWidgetFactory().createWidget( this.item );
    95                                 /*
    96                                 this.innerWidget = eval("new "+ this.item.type + "({ disabled: true });");
    97                                 this.innerWidget.setContent(this.item.data);
    98                                 this.titleNode.innerHTML = this.item.type;
    99                                 /*
    100                                 switch (this.item.widgetType) {
    101                                         default:
    102                                         this.innerWidget = new HeaderItem({ disabled: true });
    103                                         this.titleNode.innerHTML = "Header";
    104                                         break;
    105                                 }*/
    106                                 this.innerWidget.startup();
    107                                 this.innerWidget.placeAt(this.containerNode);
    108                         }
    109 
    110                 });
    111 });
     96        });
     97    });

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

    r384 r387  
    11define([
    2         'dojo/_base/declare',
    3         'dojo/_base/lang',
    4         'dojo/_base/array',
    5         'dijit/_WidgetBase',
    6         'dijit/_Container',
    7         'dojo/dom-construct',
    8         'rft/store',
    9         'rft/ui/QuestionEditorPreviewItem',
    10         'rft/ui/CategoryListView',
    11         'dijit/_TemplatedMixin',
    12         'dijit/_WidgetsInTemplateMixin',
    13         'dijit/form/ComboBox',
    14         'dojo/text!./templates/QuestionEditorToolkit.html'
    15         ], function(declare, lang, baseArray, _WidgetBase, _Container, domConstruct, store, QuestionEditorPreviewItem, CategoryListView, _TemplatedMixin, _WidgetsInTemplateMixin, ComboBox, template) {
    16                 return declare("rft.ui.QuestionEditorToolkit", [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, _Container], {
     2    'dojo/_base/declare',
     3    'dojo/_base/lang',
     4    'dojo/dnd/Source',
     5    'dojo/dom-construct',
     6    'dojo/store/Memory',
     7    'dijit/_Container',
     8    'dijit/_TemplatedMixin',
     9    'dijit/_WidgetBase',
     10    'dijit/_WidgetsInTemplateMixin',
     11    'dijit/form/Button',
     12    'dijit/form/ComboBox',
     13    'rft/store',
     14    'rft/ui/CategoryListView',
     15    'dojo/text!./templates/QuestionEditorToolkit.html'
     16    ], function(declare, lang, Source, domConstruct, Memory, _Container, _TemplatedMixin, _WidgetBase, _WidgetsInTemplateMixin, Button, ComboBox, store, CategoryListView, template) {
     17        return declare("rft.ui.QuestionEditorToolkit", [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, _Container], {
    1718
    18                         templateString: template,
    19                         _list: null,
    20                         _categorySelect: null,
    21                         _categoryStore: null,
    22                         _topicSelect: null,
    23                         _topicStore: null,
    24                         _categories : null,
     19            templateString: template,
     20            _list: null,
     21            _categorySelect: null,
     22            _categoryStore: null,
     23            _topicSelect: null,
     24            _topicStore: null,
     25            _categories : null,
    2526
    26 //                      constructor: function() {
    27 //                              lang.mixin(this, arguments);
    28 //                      },
     27            _contentItems: [{
     28                    label: "Header",
     29                    content: {
     30                        type: "Header"
     31                    },
     32                    icon: "Header"
     33                },{
     34                    label: "Text",
     35                    content: {
     36                        type: "Text"
     37                    },
     38                    icon: "TextBox"
     39                },{
     40                    label: "Image",
     41                    content: {
     42                        type: "Image"
     43                    },
     44                    icon: "Image"
     45                },{
     46                    label: "External media",
     47                    content: {
     48                        type: "ExternalMedia"
     49                    },
     50                    icon: "External"
     51                },{
     52                    label: "Divider",
     53                    content: {
     54                        type: "Divider"
     55                    },
     56                    icon: "Divider"
     57                }],
     58            _inputsItems: [{
     59                    label: "Free text",
     60                    content: {
     61                        type: "FreeTextInput"
     62                    },
     63                    icon: "Text"
     64                },{
     65                    label: "Integer",
     66                    content: {
     67                        type: "IntegerInput"
     68                    },
     69                    icon: "Integer"
     70                },{
     71                    label: "Scale",
     72                    content: {
     73                        type: "ScaleInput"
     74                    },
     75                    icon: "Scale"
     76                },{
     77                    label: "Cards",
     78                    content: {
     79                        type: "CardsInput"
     80                    },
     81                    icon: "Cards"
     82                },{
     83                    label: "Multiple Choice",
     84                    content: {
     85                        type: "MultipleChoiceInput"
     86                    },
     87                    icon: "MultipleChoice"
     88                }],
    2989
    30                         postCreate: function(){
    31                                 this.contentSource = new dojo.dnd.Source(this.ToolkitContentSourceNode, {
    32                                         accept: [],
    33                                         horizontal: false,
    34                                         withHandles: false,
    35                                         copyOnly: true,
    36                                         selfCopy: false,
    37                                         selfAccept: false,
    38                                         singular: true,
    39                                         creator: this._creator
    40                                 });
    41                                 this.inputsSource = new dojo.dnd.Source(this.ToolkitInputsSourceNode, {
    42                                         accept: [],
    43                                         horizontal: false,
    44                                         withHandles: false,
    45                                         copyOnly: true,
    46                                         selfCopy: false,
    47                                         selfAccept: false,
    48                                         singular: true,
    49                                         creator: this._creator
    50                                 });
    51                                 var contentItems = this._contentItems();
    52                                 var inputsItems = this._inputsItems();
    53                                 this.contentSource.insertNodes(false, contentItems);
    54                                 this.inputsSource.insertNodes(false, inputsItems);
    55                         },
    56                         loadQuestion: function(question) {
    57                                 this.propertiesForm.set('value', question);
    58                                 this._categories = question.categories;
    59                                 this._setupListView();
    60                                 this._setupCategories();
    61                                 this._setupTopic(question.topic);
    62                         },
    63                         onCategoryAdd: function() {
    64                                 this._addCategory(this._categorySelect.get('displayedValue'));
    65                                 this._categorySelect.reset();
    66                         },
    67                         _creator: function(item, hint) {
    68                                 var node;
    69                                 if (hint == "avatar") {
    70                                         node = document.createElement("span");
    71                                         node.innerHTML = item.widgetType;
    72                                         return {node: node, data: item, type: "ToolkitItem"};
    73                                 } else {
    74                                         var w = new dijit.form.Button({
    75                                                 baseClass: "rftLargeButton",
    76                                                 iconClass: "rftIcon rftIcon"+item.icon,
    77                                                 label: item.label,
    78                                                 showLabel: true,
    79                                                 class: "newline"
    80                                         });
    81                                         return {node: w.domNode, data: item.objectData, type: "ToolkitItem"};
    82                                 }
    83                         },
    84                         _setupListView: function() {
    85                                 this._list = new CategoryListView( {
    86                                         removeCallback: lang.hitch(this, this._removeCategory)
    87                                 }).placeAt(this.listNode);
    88                                 for (var category in this._categories) {
    89                                         this._list.appendItem(this._categories[category]);
    90                                 }       
    91                                 this._list.startup();
    92                         },
    93                         _setupCategories: function() {
    94                                 this._categoryStore = new dojo.store.Memory({data: [] });
    95                                 store.query("_design/default/_view/questions", {reduce:true, group:false, group_level:1})
    96                                         .forPairs(lang.hitch(this, function(value, key) {
    97                                                 this._categoryStore.put({ id: key[0] });
    98                                         }));
    99                                 this._categorySelect = new ComboBox( {
    100                                         id: "categoriesBox",
    101                                         name: "categories",
    102                                         store: this._categoryStore,
    103                                         searchAttr: "id"
    104                                 }, "categoriesBox");
    105                                 this._supportingWidgets.push(this._categorySelect);
     90            postCreate: function(){
     91                this.inherited(arguments);
     92                this.contentSource = new Source(this.ToolkitContentSourceNode, {
     93                    accept: [],
     94                    copyOnly: true,
     95                    selfAccept: false,
     96                    singular: true,
     97                    creator: this._creator
     98                });
     99                this.inputsSource = new Source(this.ToolkitInputsSourceNode, {
     100                    accept: [],
     101                    copyOnly: true,
     102                    selfAccept: false,
     103                    singular: true,
     104                    creator: this._creator
     105                });
     106                this.contentSource.insertNodes(false, this._contentItems);
     107                this.inputsSource.insertNodes(false, this._inputsItems);
     108            },
     109            loadQuestion: function(question) {
     110                this.propertiesForm.set('value', question);
     111                this._categories = question.categories;
     112                this._setupListView();
     113                this._setupCategories();
     114                this._setupTopic(question.topic);
     115            },
     116            onCategoryAdd: function() {
     117                this._addCategory(this._categorySelect.get('displayedValue'));
     118                this._categorySelect.reset();
     119            },
     120            _creator: function(item, hint) {
     121                var node;
     122                if (hint == "avatar") {
     123                    node = domConstruct.create('span',{
     124                        innerHTML: item.label
     125                    });
     126                } else {
     127                    var w = new Button({
     128                        baseClass: "rftLargeButton",
     129                        iconClass: "rftIcon rftIcon"+item.icon,
     130                        label: item.label,
     131                        showLabel: true,
     132                        'class': "newline"
     133                    });
     134                    node = w.domNode;
     135                }
     136                return {node: node, data: item, type: ["questionContent"]};
     137            },
     138            _setupListView: function() {
     139                this._list = new CategoryListView( {
     140                    removeCallback: lang.hitch(this, this._removeCategory)
     141                }).placeAt(this.listNode);
     142                for (var category in this._categories) {
     143                    this._list.appendItem(this._categories[category]);
     144                }   
     145                this._list.startup();
     146            },
     147            _setupCategories: function() {
     148                this._categoryStore = new Memory({data: [] });
     149                store.query("_design/default/_view/questions", {reduce:true, group:false, group_level:1})
     150                .forPairs(lang.hitch(this, function(value, key) {
     151                    this._categoryStore.put({ id: key[0] });
     152                }));
     153                this._categorySelect = new ComboBox( {
     154                    id: "categoriesBox",
     155                    name: "categories",
     156                    store: this._categoryStore,
     157                    searchAttr: "id"
     158                }, "categoriesBox");
     159                this._supportingWidgets.push(this._categorySelect);
    106160
    107161            },
    108162            _setupTopic: function(topic) {
    109                                 this._topicStore = new dojo.store.Memory( {data: [] });
    110                                 store.query("_design/default/_view/topics", {reduce:true, group:true})
    111                                         .forPairs(lang.hitch(this, function(value, key) {
    112                                                 this._topicStore.put({ id: key });
    113                                         }));
    114                                 this._topicSelect = new ComboBox( {
    115                                         id: "topicBox",
    116                                         name: "topic",
    117                                         store: this._topicStore,
    118                                         searchAttr: "id",
    119                                         value: topic
    120                                 }, "topicBox");
    121                                 this._supportingWidgets.push(this._topicSelect);
     163                this._topicStore = new Memory( {data: [] });
     164                store.query("_design/default/_view/topics", {reduce:true, group:true})
     165                .forPairs(lang.hitch(this, function(value, key) {
     166                    this._topicStore.put({ id: key });
     167                }));
     168                this._topicSelect = new ComboBox( {
     169                    id: "topicBox",
     170                    name: "topic",
     171                    store: this._topicStore,
     172                    searchAttr: "id",
     173                    value: topic
     174                }, "topicBox");
     175                this._supportingWidgets.push(this._topicSelect);
    122176            },
    123                         _addCategory: function(item) {
    124                                 this._categories.push(item);
    125                                 this._list.appendItem(item);
    126                         },
    127                         _removeCategory: function(item) {
    128                                 this._categories.splice(this._categories.indexOf(item), 1);
    129                         },
    130                         _contentItems: function() {
    131                                 // Returns an array of objects, from which to generate buttons to populate the ToolkitContentSource list.
    132                                 return [
    133                                 {
    134                                         label: "Header",
    135                                         objectData: {
    136                                                 widgetType: "Header",
    137                                         },
    138                                         icon: "Header"
    139                                 },
    140                                 {
    141                                         label: "Text",
    142                                         objectData: {
    143                                                 widgetType: "Text",
    144                                         },
    145                                         icon: "TextBox"
    146                                 },
    147                                 {
    148                                         label: "Image",
    149                                         objectData: {
    150                                                 widgetType: "Image",
    151                                         },
    152                                         icon: "Image"
    153                                 },
    154                                 {
    155                                         label: "External media",
    156                                         objectData: {
    157                                                 widgetType: "ExternalMedia",
    158                                         },
    159                                         icon: "External"
    160                                 },
    161                                 {
    162                                         label: "Divider",
    163                                         objectData: {
    164                                                 widgetType: "Divider",
    165                                         },
    166                                         icon: "Divider"
    167                                 }];
    168                         },
    169                         _inputsItems: function() {
    170                                 // Returns an array of objects, from which to generate buttons to populate the ToolkitInputsSource list.
    171                                 return [
    172                                 {
    173                                         label: "Free text",
    174                                         objectData: {
    175                                                 widgetType: "FreeTextInput",
    176                                         },
    177                                         icon: "Text"
    178                                 },
    179                                 {
    180                                         label: "Integer",
    181                                         objectData: {
    182                                                 _id: null,
    183                                                 widgetType: "IntegerInput",
    184                                                 widgetProps: {}
    185                                         },
    186                                         icon: "Integer"
    187                                 },
    188                                 {
    189                                         label: "Scale",
    190                                         objectData: {
    191                                                 _id: null,
    192                                                 widgetType: "ScaleInput",
    193                                                 widgetProps: {}
    194                                         },
    195                                         icon: "Scale"
    196                                 },
    197                                 {
    198                                         label: "Cards",
    199                                         objectData: {
    200                                                 _id: null,
    201                                                 widgetType: "CardsInput",
    202                                                 widgetProps: {}
    203                                         },
    204                                         icon: "Cards"
    205                                 },
    206                                 {
    207                                         label: "Multiple Choice",
    208                                         objectData: {
    209                                                 _id: null,
    210                                                 widgetType: "MultipleChoiceInput",
    211                                                 widgetProps: {}
    212                                         },
    213                                         icon: "MultipleChoice"
    214                                 }
    215                                 ];
    216                         }
     177            _addCategory: function(item) {
     178                this._categories.push(item);
     179                this._list.appendItem(item);
     180            },
     181            _removeCategory: function(item) {
     182                this._categories.splice(this._categories.indexOf(item), 1);
     183            }
    217184
    218                 });
    219 });
     185        });
     186    });
Note: See TracChangeset for help on using the changeset viewer.