|
1 YUI.add('dd-proxy', function (Y, NAME) { |
|
2 |
|
3 |
|
4 /** |
|
5 * Plugin for dd-drag for creating a proxy drag node, instead of dragging the original node. |
|
6 * @module dd |
|
7 * @submodule dd-proxy |
|
8 */ |
|
9 /** |
|
10 * Plugin for dd-drag for creating a proxy drag node, instead of dragging the original node. |
|
11 * @class DDProxy |
|
12 * @extends Base |
|
13 * @constructor |
|
14 * @namespace Plugin |
|
15 */ |
|
16 var DDM = Y.DD.DDM, |
|
17 NODE = 'node', |
|
18 DRAG_NODE = 'dragNode', |
|
19 HOST = 'host', |
|
20 TRUE = true, proto, |
|
21 P = function() { |
|
22 P.superclass.constructor.apply(this, arguments); |
|
23 }; |
|
24 |
|
25 P.NAME = 'DDProxy'; |
|
26 /** |
|
27 * The Proxy instance will be placed on the Drag instance under the proxy namespace. |
|
28 * @property NS |
|
29 * @default con |
|
30 * @readonly |
|
31 * @protected |
|
32 * @static |
|
33 * @type {String} |
|
34 */ |
|
35 P.NS = 'proxy'; |
|
36 |
|
37 P.ATTRS = { |
|
38 host: { |
|
39 }, |
|
40 /** |
|
41 * Move the original node at the end of the drag. Default: true |
|
42 * @attribute moveOnEnd |
|
43 * @type Boolean |
|
44 */ |
|
45 moveOnEnd: { |
|
46 value: TRUE |
|
47 }, |
|
48 /** |
|
49 * Hide the drag node at the end of the drag. Default: true |
|
50 * @attribute hideOnEnd |
|
51 * @type Boolean |
|
52 */ |
|
53 hideOnEnd: { |
|
54 value: TRUE |
|
55 }, |
|
56 /** |
|
57 * Make the Proxy node assume the size of the original node. Default: true |
|
58 * @attribute resizeFrame |
|
59 * @type Boolean |
|
60 */ |
|
61 resizeFrame: { |
|
62 value: TRUE |
|
63 }, |
|
64 /** |
|
65 * Make the Proxy node appear in the same place as the original node. Default: true |
|
66 * @attribute positionProxy |
|
67 * @type Boolean |
|
68 */ |
|
69 positionProxy: { |
|
70 value: TRUE |
|
71 }, |
|
72 /** |
|
73 * The default border style for the border of the proxy. Default: 1px solid #808080 |
|
74 * @attribute borderStyle |
|
75 * @type Boolean |
|
76 */ |
|
77 borderStyle: { |
|
78 value: '1px solid #808080' |
|
79 }, |
|
80 /** |
|
81 * Should the node be cloned into the proxy for you. Default: false |
|
82 * @attribute cloneNode |
|
83 * @type Boolean |
|
84 */ |
|
85 cloneNode: { |
|
86 value: false |
|
87 } |
|
88 }; |
|
89 |
|
90 proto = { |
|
91 /** |
|
92 * Holds the event handles for setting the proxy |
|
93 * @private |
|
94 * @property _hands |
|
95 */ |
|
96 _hands: null, |
|
97 /** |
|
98 * Handler for the proxy config attribute |
|
99 * @private |
|
100 * @method _init |
|
101 */ |
|
102 _init: function() { |
|
103 if (!DDM._proxy) { |
|
104 DDM._createFrame(); |
|
105 Y.on('domready', Y.bind(this._init, this)); |
|
106 return; |
|
107 } |
|
108 if (!this._hands) { |
|
109 this._hands = []; |
|
110 } |
|
111 var h, h1, host = this.get(HOST), dnode = host.get(DRAG_NODE); |
|
112 if (dnode.compareTo(host.get(NODE))) { |
|
113 if (DDM._proxy) { |
|
114 host.set(DRAG_NODE, DDM._proxy); |
|
115 } |
|
116 } |
|
117 Y.Array.each(this._hands, function(v) { |
|
118 v.detach(); |
|
119 }); |
|
120 h = DDM.on('ddm:start', Y.bind(function() { |
|
121 if (DDM.activeDrag === host) { |
|
122 DDM._setFrame(host); |
|
123 } |
|
124 }, this)); |
|
125 h1 = DDM.on('ddm:end', Y.bind(function() { |
|
126 if (host.get('dragging')) { |
|
127 if (this.get('moveOnEnd')) { |
|
128 host.get(NODE).setXY(host.lastXY); |
|
129 } |
|
130 if (this.get('hideOnEnd')) { |
|
131 host.get(DRAG_NODE).setStyle('display', 'none'); |
|
132 } |
|
133 if (this.get('cloneNode')) { |
|
134 host.get(DRAG_NODE).remove(); |
|
135 host.set(DRAG_NODE, DDM._proxy); |
|
136 } |
|
137 } |
|
138 }, this)); |
|
139 this._hands = [h, h1]; |
|
140 }, |
|
141 initializer: function() { |
|
142 this._init(); |
|
143 }, |
|
144 destructor: function() { |
|
145 var host = this.get(HOST); |
|
146 Y.Array.each(this._hands, function(v) { |
|
147 v.detach(); |
|
148 }); |
|
149 host.set(DRAG_NODE, host.get(NODE)); |
|
150 }, |
|
151 clone: function() { |
|
152 var host = this.get(HOST), |
|
153 n = host.get(NODE), |
|
154 c = n.cloneNode(true); |
|
155 |
|
156 delete c._yuid; |
|
157 c.setAttribute('id', Y.guid()); |
|
158 c.setStyle('position', 'absolute'); |
|
159 n.get('parentNode').appendChild(c); |
|
160 host.set(DRAG_NODE, c); |
|
161 return c; |
|
162 } |
|
163 }; |
|
164 |
|
165 Y.namespace('Plugin'); |
|
166 Y.extend(P, Y.Base, proto); |
|
167 Y.Plugin.DDProxy = P; |
|
168 |
|
169 //Add a couple of methods to the DDM |
|
170 Y.mix(DDM, { |
|
171 /** |
|
172 * Create the proxy element if it doesn't already exist and set the DD.DDM._proxy value |
|
173 * @private |
|
174 * @for DDM |
|
175 * @namespace DD |
|
176 * @method _createFrame |
|
177 */ |
|
178 _createFrame: function() { |
|
179 if (!DDM._proxy) { |
|
180 DDM._proxy = TRUE; |
|
181 |
|
182 var p = Y.Node.create('<div></div>'), |
|
183 b = Y.one('body'); |
|
184 |
|
185 p.setStyles({ |
|
186 position: 'absolute', |
|
187 display: 'none', |
|
188 zIndex: '999', |
|
189 top: '-999px', |
|
190 left: '-999px' |
|
191 }); |
|
192 |
|
193 b.prepend(p); |
|
194 p.set('id', Y.guid()); |
|
195 p.addClass(DDM.CSS_PREFIX + '-proxy'); |
|
196 DDM._proxy = p; |
|
197 } |
|
198 }, |
|
199 /** |
|
200 * If resizeProxy is set to true (default) it will resize the proxy element to match the size of the Drag Element. |
|
201 * If positionProxy is set to true (default) it will position the proxy element in the same location as the Drag Element. |
|
202 * @private |
|
203 * @for DDM |
|
204 * @namespace DD |
|
205 * @method _setFrame |
|
206 */ |
|
207 _setFrame: function(drag) { |
|
208 var n = drag.get(NODE), d = drag.get(DRAG_NODE), ah, cur = 'auto'; |
|
209 |
|
210 ah = DDM.activeDrag.get('activeHandle'); |
|
211 if (ah) { |
|
212 cur = ah.getStyle('cursor'); |
|
213 } |
|
214 if (cur === 'auto') { |
|
215 cur = DDM.get('dragCursor'); |
|
216 } |
|
217 |
|
218 d.setStyles({ |
|
219 visibility: 'hidden', |
|
220 display: 'block', |
|
221 cursor: cur, |
|
222 border: drag.proxy.get('borderStyle') |
|
223 }); |
|
224 |
|
225 if (drag.proxy.get('cloneNode')) { |
|
226 d = drag.proxy.clone(); |
|
227 } |
|
228 |
|
229 if (drag.proxy.get('resizeFrame')) { |
|
230 d.setStyles({ |
|
231 height: n.get('offsetHeight') + 'px', |
|
232 width: n.get('offsetWidth') + 'px' |
|
233 }); |
|
234 } |
|
235 |
|
236 if (drag.proxy.get('positionProxy')) { |
|
237 d.setXY(drag.nodeXY); |
|
238 } |
|
239 d.setStyle('visibility', 'visible'); |
|
240 } |
|
241 }); |
|
242 |
|
243 //Create the frame when DOM is ready |
|
244 //Y.on('domready', Y.bind(DDM._createFrame, DDM)); |
|
245 |
|
246 |
|
247 |
|
248 |
|
249 }, '@VERSION@', {"requires": ["dd-drag"]}); |