source: Dev/trunk/client/qed/model/widgets/QuestionEditorToolkit.js @ 441

Last change on this file since 441 was 441, checked in by hendrikvanantwerpen, 12 years ago

Big cleanup of the question content.

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