|
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.0b1 |
|
6 build: 1163 |
|
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 resizeFrame |
|
54 * @description Make the Proxy node assume the size of the original node. Default: true |
|
55 * @type Boolean |
|
56 */ |
|
57 resizeFrame: { |
|
58 value: TRUE |
|
59 }, |
|
60 /** |
|
61 * @attribute positionProxy |
|
62 * @description Make the Proxy node appear in the same place as the original node. Default: true |
|
63 * @type Boolean |
|
64 */ |
|
65 positionProxy: { |
|
66 value: TRUE |
|
67 }, |
|
68 /** |
|
69 * @attribute borderStyle |
|
70 * @description The default border style for the border of the proxy. Default: 1px solid #808080 |
|
71 * @type Boolean |
|
72 */ |
|
73 borderStyle: { |
|
74 value: '1px solid #808080' |
|
75 } |
|
76 }; |
|
77 |
|
78 var proto = { |
|
79 /** |
|
80 * @private |
|
81 * @property _hands |
|
82 * @description Holds the event handles for setting the proxy |
|
83 */ |
|
84 _hands: null, |
|
85 /** |
|
86 * @private |
|
87 * @method _init |
|
88 * @description Handler for the proxy config attribute |
|
89 */ |
|
90 _init: function() { |
|
91 if (!DDM._proxy) { |
|
92 Y.on('domready', Y.bind(this._init, this)); |
|
93 return; |
|
94 } |
|
95 if (!this._hands) { |
|
96 this._hands = []; |
|
97 } |
|
98 var i, h, h1, host = this.get(HOST), dnode = host.get(DRAG_NODE); |
|
99 if (dnode.compareTo(host.get(NODE))) { |
|
100 if (DDM._proxy) { |
|
101 host.set(DRAG_NODE, DDM._proxy); |
|
102 } |
|
103 } |
|
104 for (i in this._hands) { |
|
105 this._hands[i].detach(); |
|
106 } |
|
107 h = DDM.on('ddm:start', Y.bind(function() { |
|
108 if (DDM.activeDrag === host) { |
|
109 DDM._setFrame(host); |
|
110 } |
|
111 }, this)); |
|
112 h1 = DDM.on('ddm:end', Y.bind(function() { |
|
113 if (host.get('dragging')) { |
|
114 if (this.get('moveOnEnd')) { |
|
115 host.get(NODE).setXY(host.lastXY); |
|
116 } |
|
117 host.get(DRAG_NODE).setStyle('display', 'none'); |
|
118 } |
|
119 }, this)); |
|
120 this._hands = [h, h1]; |
|
121 }, |
|
122 initializer: function() { |
|
123 this._init(); |
|
124 }, |
|
125 destructor: function() { |
|
126 var host = this.get(HOST); |
|
127 for (var i in this._hands) { |
|
128 this._hands[i].detach(); |
|
129 } |
|
130 host.set(DRAG_NODE, host.get(NODE)); |
|
131 } |
|
132 }; |
|
133 |
|
134 Y.namespace('Plugin'); |
|
135 Y.extend(P, Y.Base, proto); |
|
136 Y.Plugin.DDProxy = P; |
|
137 |
|
138 //Add a couple of methods to the DDM |
|
139 Y.mix(DDM, { |
|
140 /** |
|
141 * @private |
|
142 * @for DDM |
|
143 * @namespace DD |
|
144 * @method _createFrame |
|
145 * @description Create the proxy element if it doesn't already exist and set the DD.DDM._proxy value |
|
146 */ |
|
147 _createFrame: function() { |
|
148 if (!DDM._proxy) { |
|
149 DDM._proxy = TRUE; |
|
150 |
|
151 var p = Y.Node.create('<div></div>'), |
|
152 b = Y.Node.get('body'); |
|
153 |
|
154 p.setStyles({ |
|
155 position: 'absolute', |
|
156 display: 'none', |
|
157 zIndex: '999', |
|
158 top: '-999px', |
|
159 left: '-999px' |
|
160 }); |
|
161 |
|
162 b.insertBefore(p, b.get('firstChild')); |
|
163 p.set('id', Y.stamp(p)); |
|
164 p.addClass(DDM.CSS_PREFIX + '-proxy'); |
|
165 DDM._proxy = p; |
|
166 } |
|
167 }, |
|
168 /** |
|
169 * @private |
|
170 * @for DDM |
|
171 * @namespace DD |
|
172 * @method _setFrame |
|
173 * @description If resizeProxy is set to true (default) it will resize the proxy element to match the size of the Drag Element. |
|
174 * If positionProxy is set to true (default) it will position the proxy element in the same location as the Drag Element. |
|
175 */ |
|
176 _setFrame: function(drag) { |
|
177 var n = drag.get(NODE), d = drag.get(DRAG_NODE), ah, cur = 'auto'; |
|
178 if (drag.proxy.get('resizeFrame')) { |
|
179 DDM._proxy.setStyles({ |
|
180 height: n.get('offsetHeight') + 'px', |
|
181 width: n.get('offsetWidth') + 'px' |
|
182 }); |
|
183 } |
|
184 |
|
185 ah = DDM.activeDrag.get('activeHandle'); |
|
186 if (ah) { |
|
187 cur = ah.getStyle('cursor'); |
|
188 } |
|
189 if (cur == 'auto') { |
|
190 cur = DDM.get('dragCursor'); |
|
191 } |
|
192 |
|
193 |
|
194 d.setStyles({ |
|
195 visibility: 'hidden', |
|
196 display: 'block', |
|
197 cursor: cur, |
|
198 border: drag.proxy.get('borderStyle') |
|
199 }); |
|
200 |
|
201 |
|
202 |
|
203 if (drag.proxy.get('positionProxy')) { |
|
204 d.setXY(drag.nodeXY); |
|
205 } |
|
206 d.setStyle('visibility', 'visible'); |
|
207 } |
|
208 }); |
|
209 |
|
210 //Create the frame when DOM is ready |
|
211 Y.on('domready', Y.bind(DDM._createFrame, DDM)); |
|
212 |
|
213 |
|
214 |
|
215 }, '3.0.0b1' ,{requires:['dd-ddm', 'dd-drag'], skinnable:false}); |