source: Dev/branches/rest-dojo-ui/client/rft/ui/QuestionEditorToolkit.js @ 402

Last change on this file since 402 was 402, checked in by hendrikvanantwerpen, 13 years ago

Created widgets for several input types.
Work on multiplechoice widget, see if we can make OrderedList? work with
form items? Maybe make the item the widget iso a data item.

File size: 6.7 KB
Line 
1define([
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    '../store',
14    './lists/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], {
18
19            templateString: template,
20            _list: null,
21            _categorySelect: null,
22            _categoryStore: null,
23            _topicSelect: null,
24            _topicStore: null,
25            _categories : null,
26
27            _contentItems: [
28                { type: "Header" },
29                { type: "Text" },
30                { type: "Image" },
31                { type: "ExternalMedia" },
32                { type: "Divider" }
33            ],
34            _inputsItems: [
35                { type: "StringInput" },
36                { type: "TextInput" },
37                { type: "IntegerInput" },
38                { type: "ScaleInput" },
39                { type: "MultipleChoiceInput" }
40            ],
41            _labelMap: {
42                "Header": "Header",
43                "Text": "Text",
44                "Image": "Image",
45                "ExternalMedia": "External media",
46                "Divider": "Divider",
47                "StringInput": "Text line",
48                "TextInput": "Free text",
49                "IntegerInput": "Integer number",
50                "ScaleInput": "Scale",
51                "MultipleChoiceInput": "Multiple choice"
52            },
53            _iconMap: {
54                "Header": "Header",
55                "Text": "TextBox",
56                "Image": "Image",
57                "ExternalMedia": "External",
58                "Divider": "Divider",
59                "StringInput": "Text",
60                "TextInput": "Text",
61                "IntegerInput": "Integer",
62                "ScaleInput": "Scale",
63                "MultipleChoiceInput": "MultipleChoice"
64            },
65
66            postCreate: function(){
67                this.inherited(arguments);
68                var creator = lang.hitch(this,"_creator");
69                this.contentSource = new Source(this.ToolkitContentSourceNode, {
70                    accept: [],
71                    copyOnly: true,
72                    selfAccept: false,
73                    singular: true,
74                    creator: creator
75                });
76                this.inputsSource = new Source(this.ToolkitInputsSourceNode, {
77                    accept: [],
78                    copyOnly: true,
79                    selfAccept: false,
80                    singular: true,
81                    creator: creator
82                });
83                this.contentSource.insertNodes(false, this._contentItems);
84                this.inputsSource.insertNodes(false, this._inputsItems);
85            },
86            _setValueAttr: function(question) {
87                this.propertiesForm.set('value', question);
88                this._categories = question.categories || [];
89                this._setupListView();
90                this._setupCategories();
91                this._setupTopic(question.topic);
92            },
93            _getValueAttr: function() {
94                var value = this.propertiesForm.get('value');
95                value.categories = this._categories;
96                return value;
97            },
98            onCategoryAdd: function() {
99                this._addCategory(this._categorySelect.get('displayedValue'));
100                this._categorySelect.reset();
101            },
102            _creator: function(item, hint) {
103                var node;
104                if (hint == "avatar") {
105                    node = domConstruct.create('span',{
106                        innerHTML: this._labelMap[item.type] || item.type
107                    });
108                } else {
109                    var w = new Button({
110                        baseClass: "rftLargeButton",
111                        iconClass: "rftIcon rftIcon"+(this._iconMap[item.type]||"Unknown"),
112                        label: this._labelMap[item.type] || item.type,
113                        showLabel: true,
114                        'class': "newline"
115                    });
116                    node = w.domNode;
117                }
118                return {node: node, data: item, type: ["questionContent"]};
119            },
120            _setupListView: function() {
121                this._list = new CategoryListView( {
122                    removeCallback: lang.hitch(this, this._removeCategory)
123                }).placeAt(this.listNode);
124                this._list.startup();               
125                for (var category in this._categories) {
126                    this._list.appendItem(this._categories[category]);
127                }   
128            },
129            _setupCategories: function() {
130                this._categoryStore = new Memory({data: [] });
131                store.query("_design/default/_view/questions", {reduce:true, group:false, group_level:1})
132                .forPairs(lang.hitch(this, function(value, key) {
133                    this._categoryStore.put({ id: key[0] });
134                }));
135                this._categorySelect = new ComboBox( {
136                    name: "categories",
137                    store: this._categoryStore,
138                    searchAttr: "id"
139                }, this.categoriesBoxNode);
140                this._supportingWidgets.push(this._categorySelect);
141
142            },
143            _setupTopic: function(topic) {
144                this._topicStore = new Memory( {data: [] });
145                store.query("_design/default/_view/topics", {reduce:true, group:true})
146                .forPairs(lang.hitch(this, function(value, key) {
147                    this._topicStore.put({ id: key });
148                }));
149                this._topicSelect = new ComboBox( {
150                    name: "topic",
151                    store: this._topicStore,
152                    searchAttr: "id",
153                    value: topic
154                }, this.topicBoxNode);
155                this._supportingWidgets.push(this._topicSelect);
156            },
157            _addCategory: function(item) {
158                this._categories.push(item);
159                this._list.appendItem(item);
160            },
161            _removeCategory: function(item) {
162                this._categories.splice(this._categories.indexOf(item), 1);
163            }
164
165        });
166    });
Note: See TracBrowser for help on using the repository browser.