1 | define([ |
---|
2 | "../_base/array", "../_base/declare", "../_base/lang", |
---|
3 | "../dom", "../dom-class", "../Evented", "../on", "../topic", "../touch", "./common", "./Mover", "../_base/window" |
---|
4 | ], function(array, declare, lang, dom, domClass, Evented, on, topic, touch, dnd, Mover, win){ |
---|
5 | |
---|
6 | // module: |
---|
7 | // dojo/dnd/Moveable |
---|
8 | |
---|
9 | |
---|
10 | var Moveable = declare("dojo.dnd.Moveable", [Evented], { |
---|
11 | // summary: |
---|
12 | // an object, which makes a node movable |
---|
13 | |
---|
14 | // object attributes (for markup) |
---|
15 | handle: "", |
---|
16 | delay: 0, |
---|
17 | skip: false, |
---|
18 | |
---|
19 | constructor: function(node, params){ |
---|
20 | // node: Node |
---|
21 | // a node (or node's id) to be moved |
---|
22 | // params: Moveable.__MoveableArgs? |
---|
23 | // optional parameters |
---|
24 | this.node = dom.byId(node); |
---|
25 | if(!params){ params = {}; } |
---|
26 | this.handle = params.handle ? dom.byId(params.handle) : null; |
---|
27 | if(!this.handle){ this.handle = this.node; } |
---|
28 | this.delay = params.delay > 0 ? params.delay : 0; |
---|
29 | this.skip = params.skip; |
---|
30 | this.mover = params.mover ? params.mover : Mover; |
---|
31 | this.events = [ |
---|
32 | on(this.handle, touch.press, lang.hitch(this, "onMouseDown")), |
---|
33 | // cancel text selection and text dragging |
---|
34 | on(this.handle, "dragstart", lang.hitch(this, "onSelectStart")), |
---|
35 | on(this.handle, "selectstart", lang.hitch(this, "onSelectStart")) |
---|
36 | ]; |
---|
37 | }, |
---|
38 | |
---|
39 | // markup methods |
---|
40 | markupFactory: function(params, node, Ctor){ |
---|
41 | return new Ctor(node, params); |
---|
42 | }, |
---|
43 | |
---|
44 | // methods |
---|
45 | destroy: function(){ |
---|
46 | // summary: |
---|
47 | // stops watching for possible move, deletes all references, so the object can be garbage-collected |
---|
48 | array.forEach(this.events, function(handle){ handle.remove(); }); |
---|
49 | this.events = this.node = this.handle = null; |
---|
50 | }, |
---|
51 | |
---|
52 | // mouse event processors |
---|
53 | onMouseDown: function(e){ |
---|
54 | // summary: |
---|
55 | // event processor for onmousedown/ontouchstart, creates a Mover for the node |
---|
56 | // e: Event |
---|
57 | // mouse/touch event |
---|
58 | if(this.skip && dnd.isFormElement(e)){ return; } |
---|
59 | if(this.delay){ |
---|
60 | this.events.push( |
---|
61 | on(this.handle, touch.move, lang.hitch(this, "onMouseMove")), |
---|
62 | on(this.handle, touch.release, lang.hitch(this, "onMouseUp")) |
---|
63 | ); |
---|
64 | this._lastX = e.pageX; |
---|
65 | this._lastY = e.pageY; |
---|
66 | }else{ |
---|
67 | this.onDragDetected(e); |
---|
68 | } |
---|
69 | e.stopPropagation(); |
---|
70 | e.preventDefault(); |
---|
71 | }, |
---|
72 | onMouseMove: function(e){ |
---|
73 | // summary: |
---|
74 | // event processor for onmousemove/ontouchmove, used only for delayed drags |
---|
75 | // e: Event |
---|
76 | // mouse/touch event |
---|
77 | if(Math.abs(e.pageX - this._lastX) > this.delay || Math.abs(e.pageY - this._lastY) > this.delay){ |
---|
78 | this.onMouseUp(e); |
---|
79 | this.onDragDetected(e); |
---|
80 | } |
---|
81 | e.stopPropagation(); |
---|
82 | e.preventDefault(); |
---|
83 | }, |
---|
84 | onMouseUp: function(e){ |
---|
85 | // summary: |
---|
86 | // event processor for onmouseup, used only for delayed drags |
---|
87 | // e: Event |
---|
88 | // mouse event |
---|
89 | for(var i = 0; i < 2; ++i){ |
---|
90 | this.events.pop().remove(); |
---|
91 | } |
---|
92 | e.stopPropagation(); |
---|
93 | e.preventDefault(); |
---|
94 | }, |
---|
95 | onSelectStart: function(e){ |
---|
96 | // summary: |
---|
97 | // event processor for onselectevent and ondragevent |
---|
98 | // e: Event |
---|
99 | // mouse event |
---|
100 | if(!this.skip || !dnd.isFormElement(e)){ |
---|
101 | e.stopPropagation(); |
---|
102 | e.preventDefault(); |
---|
103 | } |
---|
104 | }, |
---|
105 | |
---|
106 | // local events |
---|
107 | onDragDetected: function(/*Event*/ e){ |
---|
108 | // summary: |
---|
109 | // called when the drag is detected; |
---|
110 | // responsible for creation of the mover |
---|
111 | new this.mover(this.node, e, this); |
---|
112 | }, |
---|
113 | onMoveStart: function(/*Mover*/ mover){ |
---|
114 | // summary: |
---|
115 | // called before every move operation |
---|
116 | topic.publish("/dnd/move/start", mover); |
---|
117 | domClass.add(win.body(), "dojoMove"); |
---|
118 | domClass.add(this.node, "dojoMoveItem"); |
---|
119 | }, |
---|
120 | onMoveStop: function(/*Mover*/ mover){ |
---|
121 | // summary: |
---|
122 | // called after every move operation |
---|
123 | topic.publish("/dnd/move/stop", mover); |
---|
124 | domClass.remove(win.body(), "dojoMove"); |
---|
125 | domClass.remove(this.node, "dojoMoveItem"); |
---|
126 | }, |
---|
127 | onFirstMove: function(/*===== mover, e =====*/){ |
---|
128 | // summary: |
---|
129 | // called during the very first move notification; |
---|
130 | // can be used to initialize coordinates, can be overwritten. |
---|
131 | // mover: Mover |
---|
132 | // e: Event |
---|
133 | |
---|
134 | // default implementation does nothing |
---|
135 | }, |
---|
136 | onMove: function(mover, leftTop /*=====, e =====*/){ |
---|
137 | // summary: |
---|
138 | // called during every move notification; |
---|
139 | // should actually move the node; can be overwritten. |
---|
140 | // mover: Mover |
---|
141 | // leftTop: Object |
---|
142 | // e: Event |
---|
143 | this.onMoving(mover, leftTop); |
---|
144 | var s = mover.node.style; |
---|
145 | s.left = leftTop.l + "px"; |
---|
146 | s.top = leftTop.t + "px"; |
---|
147 | this.onMoved(mover, leftTop); |
---|
148 | }, |
---|
149 | onMoving: function(/*===== mover, leftTop =====*/){ |
---|
150 | // summary: |
---|
151 | // called before every incremental move; can be overwritten. |
---|
152 | // mover: Mover |
---|
153 | // leftTop: Object |
---|
154 | |
---|
155 | // default implementation does nothing |
---|
156 | }, |
---|
157 | onMoved: function(/*===== mover, leftTop =====*/){ |
---|
158 | // summary: |
---|
159 | // called after every incremental move; can be overwritten. |
---|
160 | // mover: Mover |
---|
161 | // leftTop: Object |
---|
162 | |
---|
163 | // default implementation does nothing |
---|
164 | } |
---|
165 | }); |
---|
166 | |
---|
167 | /*===== |
---|
168 | Moveable.__MoveableArgs = declare([], { |
---|
169 | // handle: Node||String |
---|
170 | // A node (or node's id), which is used as a mouse handle. |
---|
171 | // If omitted, the node itself is used as a handle. |
---|
172 | handle: null, |
---|
173 | |
---|
174 | // delay: Number |
---|
175 | // delay move by this number of pixels |
---|
176 | delay: 0, |
---|
177 | |
---|
178 | // skip: Boolean |
---|
179 | // skip move of form elements |
---|
180 | skip: false, |
---|
181 | |
---|
182 | // mover: Object |
---|
183 | // a constructor of custom Mover |
---|
184 | mover: dnd.Mover |
---|
185 | }); |
---|
186 | =====*/ |
---|
187 | |
---|
188 | return Moveable; |
---|
189 | }); |
---|