1 | define([ |
---|
2 | "../_base/array", "../_base/declare", "../_base/kernel", "../_base/lang", |
---|
3 | "../dom", "../dom-construct", "../mouse", "../_base/NodeList", "../on", "../touch", "./common", "./Container" |
---|
4 | ], function(array, declare, kernel, lang, dom, domConstruct, mouse, NodeList, on, touch, dnd, Container){ |
---|
5 | |
---|
6 | // module: |
---|
7 | // dojo/dnd/Selector |
---|
8 | |
---|
9 | /* |
---|
10 | Container item states: |
---|
11 | "" - an item is not selected |
---|
12 | "Selected" - an item is selected |
---|
13 | "Anchor" - an item is selected, and is an anchor for a "shift" selection |
---|
14 | */ |
---|
15 | |
---|
16 | /*===== |
---|
17 | var __SelectorArgs = declare([Container.__ContainerArgs], { |
---|
18 | // singular: Boolean |
---|
19 | // allows selection of only one element, if true |
---|
20 | singular: false, |
---|
21 | |
---|
22 | // autoSync: Boolean |
---|
23 | // autosynchronizes the source with its list of DnD nodes, |
---|
24 | autoSync: false |
---|
25 | }); |
---|
26 | =====*/ |
---|
27 | |
---|
28 | var Selector = declare("dojo.dnd.Selector", Container, { |
---|
29 | // summary: |
---|
30 | // a Selector object, which knows how to select its children |
---|
31 | |
---|
32 | /*===== |
---|
33 | // selection: Set<String> |
---|
34 | // The set of id's that are currently selected, such that this.selection[id] == 1 |
---|
35 | // if the node w/that id is selected. Can iterate over selected node's id's like: |
---|
36 | // | for(var id in this.selection) |
---|
37 | selection: {}, |
---|
38 | =====*/ |
---|
39 | |
---|
40 | constructor: function(node, params){ |
---|
41 | // summary: |
---|
42 | // constructor of the Selector |
---|
43 | // node: Node||String |
---|
44 | // node or node's id to build the selector on |
---|
45 | // params: __SelectorArgs? |
---|
46 | // a dictionary of parameters |
---|
47 | if(!params){ params = {}; } |
---|
48 | this.singular = params.singular; |
---|
49 | this.autoSync = params.autoSync; |
---|
50 | // class-specific variables |
---|
51 | this.selection = {}; |
---|
52 | this.anchor = null; |
---|
53 | this.simpleSelection = false; |
---|
54 | // set up events |
---|
55 | this.events.push( |
---|
56 | on(this.node, touch.press, lang.hitch(this, "onMouseDown")), |
---|
57 | on(this.node, touch.release, lang.hitch(this, "onMouseUp")) |
---|
58 | ); |
---|
59 | }, |
---|
60 | |
---|
61 | // object attributes (for markup) |
---|
62 | singular: false, // is singular property |
---|
63 | |
---|
64 | // methods |
---|
65 | getSelectedNodes: function(){ |
---|
66 | // summary: |
---|
67 | // returns a list (an array) of selected nodes |
---|
68 | var t = new NodeList(); |
---|
69 | var e = dnd._empty; |
---|
70 | for(var i in this.selection){ |
---|
71 | if(i in e){ continue; } |
---|
72 | t.push(dom.byId(i)); |
---|
73 | } |
---|
74 | return t; // NodeList |
---|
75 | }, |
---|
76 | selectNone: function(){ |
---|
77 | // summary: |
---|
78 | // unselects all items |
---|
79 | return this._removeSelection()._removeAnchor(); // self |
---|
80 | }, |
---|
81 | selectAll: function(){ |
---|
82 | // summary: |
---|
83 | // selects all items |
---|
84 | this.forInItems(function(data, id){ |
---|
85 | this._addItemClass(dom.byId(id), "Selected"); |
---|
86 | this.selection[id] = 1; |
---|
87 | }, this); |
---|
88 | return this._removeAnchor(); // self |
---|
89 | }, |
---|
90 | deleteSelectedNodes: function(){ |
---|
91 | // summary: |
---|
92 | // deletes all selected items |
---|
93 | var e = dnd._empty; |
---|
94 | for(var i in this.selection){ |
---|
95 | if(i in e){ continue; } |
---|
96 | var n = dom.byId(i); |
---|
97 | this.delItem(i); |
---|
98 | domConstruct.destroy(n); |
---|
99 | } |
---|
100 | this.anchor = null; |
---|
101 | this.selection = {}; |
---|
102 | return this; // self |
---|
103 | }, |
---|
104 | forInSelectedItems: function(/*Function*/ f, /*Object?*/ o){ |
---|
105 | // summary: |
---|
106 | // iterates over selected items; |
---|
107 | // see `dojo/dnd/Container.forInItems()` for details |
---|
108 | o = o || kernel.global; |
---|
109 | var s = this.selection, e = dnd._empty; |
---|
110 | for(var i in s){ |
---|
111 | if(i in e){ continue; } |
---|
112 | f.call(o, this.getItem(i), i, this); |
---|
113 | } |
---|
114 | }, |
---|
115 | sync: function(){ |
---|
116 | // summary: |
---|
117 | // sync up the node list with the data map |
---|
118 | |
---|
119 | Selector.superclass.sync.call(this); |
---|
120 | |
---|
121 | // fix the anchor |
---|
122 | if(this.anchor){ |
---|
123 | if(!this.getItem(this.anchor.id)){ |
---|
124 | this.anchor = null; |
---|
125 | } |
---|
126 | } |
---|
127 | |
---|
128 | // fix the selection |
---|
129 | var t = [], e = dnd._empty; |
---|
130 | for(var i in this.selection){ |
---|
131 | if(i in e){ continue; } |
---|
132 | if(!this.getItem(i)){ |
---|
133 | t.push(i); |
---|
134 | } |
---|
135 | } |
---|
136 | array.forEach(t, function(i){ |
---|
137 | delete this.selection[i]; |
---|
138 | }, this); |
---|
139 | |
---|
140 | return this; // self |
---|
141 | }, |
---|
142 | insertNodes: function(addSelected, data, before, anchor){ |
---|
143 | // summary: |
---|
144 | // inserts new data items (see `dojo/dnd/Container.insertNodes()` method for details) |
---|
145 | // addSelected: Boolean |
---|
146 | // all new nodes will be added to selected items, if true, no selection change otherwise |
---|
147 | // data: Array |
---|
148 | // a list of data items, which should be processed by the creator function |
---|
149 | // before: Boolean |
---|
150 | // insert before the anchor, if true, and after the anchor otherwise |
---|
151 | // anchor: Node |
---|
152 | // the anchor node to be used as a point of insertion |
---|
153 | var oldCreator = this._normalizedCreator; |
---|
154 | this._normalizedCreator = function(item, hint){ |
---|
155 | var t = oldCreator.call(this, item, hint); |
---|
156 | if(addSelected){ |
---|
157 | if(!this.anchor){ |
---|
158 | this.anchor = t.node; |
---|
159 | this._removeItemClass(t.node, "Selected"); |
---|
160 | this._addItemClass(this.anchor, "Anchor"); |
---|
161 | }else if(this.anchor != t.node){ |
---|
162 | this._removeItemClass(t.node, "Anchor"); |
---|
163 | this._addItemClass(t.node, "Selected"); |
---|
164 | } |
---|
165 | this.selection[t.node.id] = 1; |
---|
166 | }else{ |
---|
167 | this._removeItemClass(t.node, "Selected"); |
---|
168 | this._removeItemClass(t.node, "Anchor"); |
---|
169 | } |
---|
170 | return t; |
---|
171 | }; |
---|
172 | Selector.superclass.insertNodes.call(this, data, before, anchor); |
---|
173 | this._normalizedCreator = oldCreator; |
---|
174 | return this; // self |
---|
175 | }, |
---|
176 | destroy: function(){ |
---|
177 | // summary: |
---|
178 | // prepares the object to be garbage-collected |
---|
179 | Selector.superclass.destroy.call(this); |
---|
180 | this.selection = this.anchor = null; |
---|
181 | }, |
---|
182 | |
---|
183 | // mouse events |
---|
184 | onMouseDown: function(e){ |
---|
185 | // summary: |
---|
186 | // event processor for onmousedown |
---|
187 | // e: Event |
---|
188 | // mouse event |
---|
189 | if(this.autoSync){ this.sync(); } |
---|
190 | if(!this.current){ return; } |
---|
191 | if(!this.singular && !dnd.getCopyKeyState(e) && !e.shiftKey && (this.current.id in this.selection)){ |
---|
192 | this.simpleSelection = true; |
---|
193 | if(mouse.isLeft(e)){ |
---|
194 | // Accept the left button and stop the event. Stopping the event prevents text selection while |
---|
195 | // dragging. However, don't stop the event on mobile because that prevents a click event, |
---|
196 | // and also prevents scroll (see #15838). |
---|
197 | // For IE we don't stop event when multiple buttons are pressed. |
---|
198 | e.stopPropagation(); |
---|
199 | e.preventDefault(); |
---|
200 | } |
---|
201 | return; |
---|
202 | } |
---|
203 | if(!this.singular && e.shiftKey){ |
---|
204 | if(!dnd.getCopyKeyState(e)){ |
---|
205 | this._removeSelection(); |
---|
206 | } |
---|
207 | var c = this.getAllNodes(); |
---|
208 | if(c.length){ |
---|
209 | if(!this.anchor){ |
---|
210 | this.anchor = c[0]; |
---|
211 | this._addItemClass(this.anchor, "Anchor"); |
---|
212 | } |
---|
213 | this.selection[this.anchor.id] = 1; |
---|
214 | if(this.anchor != this.current){ |
---|
215 | var i = 0, node; |
---|
216 | for(; i < c.length; ++i){ |
---|
217 | node = c[i]; |
---|
218 | if(node == this.anchor || node == this.current){ break; } |
---|
219 | } |
---|
220 | for(++i; i < c.length; ++i){ |
---|
221 | node = c[i]; |
---|
222 | if(node == this.anchor || node == this.current){ break; } |
---|
223 | this._addItemClass(node, "Selected"); |
---|
224 | this.selection[node.id] = 1; |
---|
225 | } |
---|
226 | this._addItemClass(this.current, "Selected"); |
---|
227 | this.selection[this.current.id] = 1; |
---|
228 | } |
---|
229 | } |
---|
230 | }else{ |
---|
231 | if(this.singular){ |
---|
232 | if(this.anchor == this.current){ |
---|
233 | if(dnd.getCopyKeyState(e)){ |
---|
234 | this.selectNone(); |
---|
235 | } |
---|
236 | }else{ |
---|
237 | this.selectNone(); |
---|
238 | this.anchor = this.current; |
---|
239 | this._addItemClass(this.anchor, "Anchor"); |
---|
240 | this.selection[this.current.id] = 1; |
---|
241 | } |
---|
242 | }else{ |
---|
243 | if(dnd.getCopyKeyState(e)){ |
---|
244 | if(this.anchor == this.current){ |
---|
245 | delete this.selection[this.anchor.id]; |
---|
246 | this._removeAnchor(); |
---|
247 | }else{ |
---|
248 | if(this.current.id in this.selection){ |
---|
249 | this._removeItemClass(this.current, "Selected"); |
---|
250 | delete this.selection[this.current.id]; |
---|
251 | }else{ |
---|
252 | if(this.anchor){ |
---|
253 | this._removeItemClass(this.anchor, "Anchor"); |
---|
254 | this._addItemClass(this.anchor, "Selected"); |
---|
255 | } |
---|
256 | this.anchor = this.current; |
---|
257 | this._addItemClass(this.current, "Anchor"); |
---|
258 | this.selection[this.current.id] = 1; |
---|
259 | } |
---|
260 | } |
---|
261 | }else{ |
---|
262 | if(!(this.current.id in this.selection)){ |
---|
263 | this.selectNone(); |
---|
264 | this.anchor = this.current; |
---|
265 | this._addItemClass(this.current, "Anchor"); |
---|
266 | this.selection[this.current.id] = 1; |
---|
267 | } |
---|
268 | } |
---|
269 | } |
---|
270 | } |
---|
271 | e.stopPropagation(); |
---|
272 | e.preventDefault(); |
---|
273 | }, |
---|
274 | onMouseUp: function(/*===== e =====*/){ |
---|
275 | // summary: |
---|
276 | // event processor for onmouseup |
---|
277 | // e: Event |
---|
278 | // mouse event |
---|
279 | if(!this.simpleSelection){ return; } |
---|
280 | this.simpleSelection = false; |
---|
281 | this.selectNone(); |
---|
282 | if(this.current){ |
---|
283 | this.anchor = this.current; |
---|
284 | this._addItemClass(this.anchor, "Anchor"); |
---|
285 | this.selection[this.current.id] = 1; |
---|
286 | } |
---|
287 | }, |
---|
288 | onMouseMove: function(/*===== e =====*/){ |
---|
289 | // summary: |
---|
290 | // event processor for onmousemove |
---|
291 | // e: Event |
---|
292 | // mouse event |
---|
293 | this.simpleSelection = false; |
---|
294 | }, |
---|
295 | |
---|
296 | // utilities |
---|
297 | onOverEvent: function(){ |
---|
298 | // summary: |
---|
299 | // this function is called once, when mouse is over our container |
---|
300 | this.onmousemoveEvent = on(this.node, touch.move, lang.hitch(this, "onMouseMove")); |
---|
301 | }, |
---|
302 | onOutEvent: function(){ |
---|
303 | // summary: |
---|
304 | // this function is called once, when mouse is out of our container |
---|
305 | if(this.onmousemoveEvent){ |
---|
306 | this.onmousemoveEvent.remove(); |
---|
307 | delete this.onmousemoveEvent; |
---|
308 | } |
---|
309 | }, |
---|
310 | _removeSelection: function(){ |
---|
311 | // summary: |
---|
312 | // unselects all items |
---|
313 | var e = dnd._empty; |
---|
314 | for(var i in this.selection){ |
---|
315 | if(i in e){ continue; } |
---|
316 | var node = dom.byId(i); |
---|
317 | if(node){ this._removeItemClass(node, "Selected"); } |
---|
318 | } |
---|
319 | this.selection = {}; |
---|
320 | return this; // self |
---|
321 | }, |
---|
322 | _removeAnchor: function(){ |
---|
323 | if(this.anchor){ |
---|
324 | this._removeItemClass(this.anchor, "Anchor"); |
---|
325 | this.anchor = null; |
---|
326 | } |
---|
327 | return this; // self |
---|
328 | } |
---|
329 | }); |
---|
330 | |
---|
331 | return Selector; |
---|
332 | |
---|
333 | }); |
---|