|
1 /* |
|
2 Copyright (c) 2009, Yahoo! Inc. All rights reserved. |
|
3 Code licensed under the BSD License: |
|
4 http://developer.yahoo.net/yui/license.txt |
|
5 version: 3.0.0 |
|
6 build: 1549 |
|
7 */ |
|
8 YUI.add('dd-proxy', function(Y) { |
|
9 |
|
10 |
|
11 /** |
|
12 * The Drag & Drop Utility allows you to create a draggable interface efficiently, buffering you from browser-level abnormalities and enabling you to focus on the interesting logic surrounding your particular implementation. This component enables you to create a variety of standard draggable objects with just a few lines of code and then, using its extensive API, add your own specific implementation logic. |
|
13 * @module dd |
|
14 * @submodule dd-proxy |
|
15 */ |
|
16 /** |
|
17 * This plugin for dd-drag is 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; |
|
28 |
|
29 var P = function(config) { |
|
30 P.superclass.constructor.apply(this, arguments); |
|
31 }; |
|
32 |
|
33 P.NAME = 'DDProxy'; |
|
34 /** |
|
35 * @property proxy |
|
36 * @description The Proxy instance will be placed on the Drag instance under the proxy namespace. |
|
37 * @type {String} |
|
38 */ |
|
39 P.NS = 'proxy'; |
|
40 |
|
41 P.ATTRS = { |
|
42 host: { |
|
43 }, |
|
44 /** |
|
45 * @attribute moveOnEnd |
|
46 * @description Move the original node at the end of the drag. Default: true |
|
47 * @type Boolean |
|
48 */ |
|
49 moveOnEnd: { |
|
50 value: TRUE |
|
51 }, |
|
52 /** |
|
53 * @attribute hideOnEnd |
|
54 * @description Hide the drag node at the end of the drag. Default: true |
|
55 * @type Boolean |
|
56 */ |
|
57 hideOnEnd: { |
|
58 value: TRUE |
|
59 }, |
|
60 /** |
|
61 * @attribute resizeFrame |
|
62 * @description Make the Proxy node assume the size of the original node. Default: true |
|
63 * @type Boolean |
|
64 */ |
|
65 resizeFrame: { |
|
66 value: TRUE |
|
67 }, |
|
68 /** |
|
69 * @attribute positionProxy |
|
70 * @description Make the Proxy node appear in the same place as the original node. Default: true |
|
71 * @type Boolean |
|
72 */ |
|
73 positionProxy: { |
|
74 value: TRUE |
|
75 }, |
|
76 /** |
|
77 * @attribute borderStyle |
|
78 * @description The default border style for the border of the proxy. Default: 1px solid #808080 |
|
79 * @type Boolean |
|
80 */ |
|
81 borderStyle: { |
|
82 value: '1px solid #808080' |
|
83 } |
|
84 }; |
|
85 |
|
86 var proto = { |
|
87 /** |
|
88 * @private |
|
89 * @property _hands |
|
90 * @description Holds the event handles for setting the proxy |
|
91 */ |
|
92 _hands: null, |
|
93 /** |
|
94 * @private |
|
95 * @method _init |
|
96 * @description Handler for the proxy config attribute |
|
97 */ |
|
98 _init: function() { |
|
99 if (!DDM._proxy) { |
|
100 Y.on('domready', Y.bind(this._init, this)); |
|
101 return; |
|
102 } |
|
103 if (!this._hands) { |
|
104 this._hands = []; |
|
105 } |
|
106 var i, h, h1, host = this.get(HOST), dnode = host.get(DRAG_NODE); |
|
107 if (dnode.compareTo(host.get(NODE))) { |
|
108 if (DDM._proxy) { |
|
109 host.set(DRAG_NODE, DDM._proxy); |
|
110 } |
|
111 } |
|
112 Y.each(this._hands, function(v) { |
|
113 v.detach(); |
|
114 }); |
|
115 h = DDM.on('ddm:start', Y.bind(function() { |
|
116 if (DDM.activeDrag === host) { |
|
117 DDM._setFrame(host); |
|
118 } |
|
119 }, this)); |
|
120 h1 = DDM.on('ddm:end', Y.bind(function() { |
|
121 if (host.get('dragging')) { |
|
122 if (this.get('moveOnEnd')) { |
|
123 host.get(NODE).setXY(host.lastXY); |
|
124 } |
|
125 if (this.get('hideOnEnd')) { |
|
126 host.get(DRAG_NODE).setStyle('display', 'none'); |
|
127 } |
|
128 } |
|
129 }, this)); |
|
130 this._hands = [h, h1]; |
|
131 }, |
|
132 initializer: function() { |
|
133 this._init(); |
|
134 }, |
|
135 destructor: function() { |
|
136 var host = this.get(HOST); |
|
137 Y.each(this._hands, function(v) { |
|
138 v.detach(); |
|
139 }); |
|
140 host.set(DRAG_NODE, host.get(NODE)); |
|
141 } |
|
142 }; |
|
143 |
|
144 Y.namespace('Plugin'); |
|
145 Y.extend(P, Y.Base, proto); |
|
146 Y.Plugin.DDProxy = P; |
|
147 |
|
148 //Add a couple of methods to the DDM |
|
149 Y.mix(DDM, { |
|
150 /** |
|
151 * @private |
|
152 * @for DDM |
|
153 * @namespace DD |
|
154 * @method _createFrame |
|
155 * @description Create the proxy element if it doesn't already exist and set the DD.DDM._proxy value |
|
156 */ |
|
157 _createFrame: function() { |
|
158 if (!DDM._proxy) { |
|
159 DDM._proxy = TRUE; |
|
160 |
|
161 var p = Y.Node.create('<div></div>'), |
|
162 b = Y.Node.get('body'); |
|
163 |
|
164 p.setStyles({ |
|
165 position: 'absolute', |
|
166 display: 'none', |
|
167 zIndex: '999', |
|
168 top: '-999px', |
|
169 left: '-999px' |
|
170 }); |
|
171 |
|
172 b.insertBefore(p, b.get('firstChild')); |
|
173 p.set('id', Y.stamp(p)); |
|
174 p.addClass(DDM.CSS_PREFIX + '-proxy'); |
|
175 DDM._proxy = p; |
|
176 } |
|
177 }, |
|
178 /** |
|
179 * @private |
|
180 * @for DDM |
|
181 * @namespace DD |
|
182 * @method _setFrame |
|
183 * @description If resizeProxy is set to true (default) it will resize the proxy element to match the size of the Drag Element. |
|
184 * If positionProxy is set to true (default) it will position the proxy element in the same location as the Drag Element. |
|
185 */ |
|
186 _setFrame: function(drag) { |
|
187 var n = drag.get(NODE), d = drag.get(DRAG_NODE), ah, cur = 'auto'; |
|
188 if (drag.proxy.get('resizeFrame')) { |
|
189 DDM._proxy.setStyles({ |
|
190 height: n.get('offsetHeight') + 'px', |
|
191 width: n.get('offsetWidth') + 'px' |
|
192 }); |
|
193 } |
|
194 |
|
195 ah = DDM.activeDrag.get('activeHandle'); |
|
196 if (ah) { |
|
197 cur = ah.getStyle('cursor'); |
|
198 } |
|
199 if (cur == 'auto') { |
|
200 cur = DDM.get('dragCursor'); |
|
201 } |
|
202 |
|
203 |
|
204 d.setStyles({ |
|
205 visibility: 'hidden', |
|
206 display: 'block', |
|
207 cursor: cur, |
|
208 border: drag.proxy.get('borderStyle') |
|
209 }); |
|
210 |
|
211 |
|
212 |
|
213 if (drag.proxy.get('positionProxy')) { |
|
214 d.setXY(drag.nodeXY); |
|
215 } |
|
216 d.setStyle('visibility', 'visible'); |
|
217 } |
|
218 }); |
|
219 |
|
220 //Create the frame when DOM is ready |
|
221 Y.on('domready', Y.bind(DDM._createFrame, DDM)); |
|
222 |
|
223 |
|
224 |
|
225 }, '3.0.0' ,{requires:['dd-ddm', 'dd-drag'], skinnable:false}); |