1 | define([ |
---|
2 | 'dojo/_base/declare', |
---|
3 | 'dojo/_base/array', |
---|
4 | 'dijit/registry', |
---|
5 | 'dojo/_base/lang', |
---|
6 | 'dojo/fx', |
---|
7 | 'dijit/_WidgetBase', |
---|
8 | 'dijit/_TemplatedMixin', |
---|
9 | 'dijit/_WidgetsInTemplateMixin', |
---|
10 | 'dijit/_Container', |
---|
11 | './LineWithActionsWidget', |
---|
12 | 'dojo/text!./templates/Selector.html', |
---|
13 | 'dojo/dom-class' |
---|
14 | ],function( |
---|
15 | declare, |
---|
16 | baseArray, |
---|
17 | registry, |
---|
18 | lang, |
---|
19 | fx, |
---|
20 | _WidgetBase, |
---|
21 | _TemplatedMixin, |
---|
22 | _WidgetsInTemplateMixin, |
---|
23 | _Container, |
---|
24 | LineWithActionsWidget, |
---|
25 | templateString, |
---|
26 | domClass |
---|
27 | ){ |
---|
28 | return declare('rft.ui.Selector',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,_Container],{ |
---|
29 | templateString: templateString, |
---|
30 | title: "ERROR: NULL_TOPIC", |
---|
31 | baseClass: 'rftSelector', |
---|
32 | modifiers: 'blue', |
---|
33 | currentlySelectedId: null, |
---|
34 | controller: null, // Use events/pubsub instead of a controller variable? Decoupling! |
---|
35 | |
---|
36 | postCreate: function() { |
---|
37 | domClass.add(this.domNode, this.modifiers); |
---|
38 | domClass.add(this.selectedColorNode, "pending"); |
---|
39 | this.domNode.dataset["topic"] = this.topic; |
---|
40 | |
---|
41 | new LineWithActionsWidget({ |
---|
42 | title: this.topic, |
---|
43 | modifiers: this.modifiers, |
---|
44 | actions: { |
---|
45 | "AddToSurvey" : { |
---|
46 | callback: lang.hitch(this, this.includeQuestion), |
---|
47 | properties: { |
---|
48 | blockButton: true, |
---|
49 | modifiers: this.modifiers, |
---|
50 | icon: "Accept", |
---|
51 | label: "Include" |
---|
52 | } |
---|
53 | } |
---|
54 | } |
---|
55 | },this.titleNode); |
---|
56 | |
---|
57 | this.selectorLine = new LineWithActionsWidget({ |
---|
58 | title: 'None', |
---|
59 | modifiers: this.modifiers, |
---|
60 | actions: { |
---|
61 | "ToggleDropdown" : { |
---|
62 | callback: lang.hitch(this, this._toggleDropdown()), |
---|
63 | properties: { |
---|
64 | blockButton: true, |
---|
65 | modifiers: this.modifiers, |
---|
66 | showLabel: false, |
---|
67 | icon: "HalfArrowDown" |
---|
68 | } |
---|
69 | } |
---|
70 | } |
---|
71 | },this.selectedItemNode); |
---|
72 | }, |
---|
73 | _toggleDropdown: function() { |
---|
74 | |
---|
75 | var node = this.optionsNode; |
---|
76 | var show = fx.wipeIn({ |
---|
77 | node: node |
---|
78 | }); |
---|
79 | var hide = fx.wipeOut({ |
---|
80 | node: node |
---|
81 | }); |
---|
82 | hide.play(); |
---|
83 | var folded = true; |
---|
84 | return function(e) { |
---|
85 | if ( folded ) { |
---|
86 | var downArrowIcon = dojo.query(".rftBlockButton .rftIconHalfArrowDown", this.selectorLine.buttonsNode)[0]; |
---|
87 | if (downArrowIcon){ |
---|
88 | domClass.replace(downArrowIcon, "rftIconHalfArrowUp", "rftIconHalfArrowDown"); |
---|
89 | } |
---|
90 | show.play(); |
---|
91 | folded = false; |
---|
92 | } else { |
---|
93 | var upArrowIcon = dojo.query(".rftBlockButton .rftIconHalfArrowUp", this.selectorLine.buttonsNode)[0]; |
---|
94 | if (upArrowIcon){ |
---|
95 | domClass.replace(upArrowIcon, "rftIconHalfArrowDown", "rftIconHalfArrowUp"); |
---|
96 | } |
---|
97 | hide.play(); |
---|
98 | folded = true; |
---|
99 | |
---|
100 | } |
---|
101 | e.preventDefault(); |
---|
102 | e.stopPropagation(); |
---|
103 | }; |
---|
104 | }, |
---|
105 | addQuestion: function(questionId) { |
---|
106 | var question = this.controller.GetQuestion(questionId); |
---|
107 | if (question) { |
---|
108 | var w = new LineWithActionsWidget({ |
---|
109 | title: question.title, |
---|
110 | questionId: questionId, |
---|
111 | actions: { |
---|
112 | "InfoHover" : { |
---|
113 | callback: dojo.partial(this.infoFunction, this), |
---|
114 | properties: { |
---|
115 | blockButton: false, |
---|
116 | showLabel: false, |
---|
117 | icon: "Inspect" |
---|
118 | } |
---|
119 | } |
---|
120 | } |
---|
121 | }); |
---|
122 | w.placeAt(this.optionsNode); |
---|
123 | w.on("Click", lang.hitch(this, function(){ |
---|
124 | this.selectQuestion(questionId); |
---|
125 | this._toggleDropdown(); |
---|
126 | }, questionId)); |
---|
127 | |
---|
128 | } |
---|
129 | }, |
---|
130 | infoFunction: function(selector) { |
---|
131 | var question = selector.controller.GetQuestion(this.questionId); |
---|
132 | console.log(question); |
---|
133 | alert("Some info here!"); |
---|
134 | }, |
---|
135 | includeQuestion: function() { |
---|
136 | if (this.currentlySelectedId) { |
---|
137 | this.controller.IncludeQuestion(this.currentlySelectedId) |
---|
138 | } else { |
---|
139 | return false; |
---|
140 | } |
---|
141 | }, |
---|
142 | selectQuestion: function(questionId) { |
---|
143 | /* TODO: TEST THOROUGHLY! */ |
---|
144 | var question = this.controller.GetQuestion(questionId); |
---|
145 | if (question) { |
---|
146 | this.currentlySelectedId = questionId; |
---|
147 | this.selectorLine.questionId = questionId; |
---|
148 | this.selectorLine.set("title", question.title); |
---|
149 | // Iterate through optionsNode, add "selected" class to currently selected node |
---|
150 | baseArray.forEach(this.optionsNode.childNodes, function(node, index){ |
---|
151 | var line = registry.byNode(node); |
---|
152 | if (line) { |
---|
153 | if (line.questionId == this.currentlySelectedId) { |
---|
154 | domClass.add(line.domNode, "inheritBgColor light"); |
---|
155 | } else { |
---|
156 | domClass.remove(line.domNode, "inheritBgColor light"); |
---|
157 | } |
---|
158 | } |
---|
159 | }, this); |
---|
160 | } |
---|
161 | } |
---|
162 | }); |
---|
163 | }); |
---|