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