[483] | 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 | }); |
---|