proxy.js revision ab81993d50dfd224ea410ef6e1edaa70e86d74d8
3853N/A
3853N/A /**
3853N/A * 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.
3853N/A * @module dd
3853N/A * @submodule dd-proxy
3853N/A */
3853N/A /**
3853N/A * This class extends dd-drag to allow for creating a proxy drag node, instead of dragging the original node.
3853N/A * @class Proxy
3853N/A * @extends Drag
3853N/A * @constructor
3853N/A */
3853N/A var DDM = Y.DD.DDM,
3853N/A NODE = 'node',
3853N/A DRAG_NODE = 'dragNode',
3853N/A PROXY = 'proxy',
3853N/A proto,
3853N/A
3853N/A Proxy = function() {
3853N/A Proxy.superclass.constructor.apply(this, arguments);
3853N/A
3853N/A };
3853N/A
3853N/A Proxy.NAME = 'dragProxy';
5035N/A
3853N/A Proxy.ATTRS = {
3853N/A /**
3853N/A * @attribute moveOnEnd
3853N/A * @description Move the original node at the end of the drag. Default: true
3853N/A * @type Boolean
4803N/A */
3853N/A moveOnEnd: {
3853N/A value: true
3853N/A },
4141N/A /**
3853N/A * @attribute resizeFrame
3853N/A * @description Make the Proxy node assume the size of the original node. Default: true
3853N/A * @type Boolean
3853N/A */
3853N/A resizeFrame: {
4141N/A value: true
3898N/A },
3898N/A /**
4920N/A * @attribute proxy
4518N/A * @description Make this Draggable instance a Proxy instance. Default: false
3853N/A * @type Boolean
3853N/A */
3853N/A proxy: {
3853N/A value: false,
4803N/A setter: function(v) {
3853N/A this._setProxy(v);
3853N/A return v;
3853N/A }
3853N/A },
3853N/A /**
3853N/A * @attribute positionProxy
3853N/A * @description Make the Proxy node appear in the same place as the original node. Default: true
3853N/A * @type Boolean
3853N/A */
3853N/A positionProxy: {
3853N/A value: true
3853N/A },
3853N/A /**
3853N/A * @attribute borderStyle
3853N/A * @description The default border style for the border of the proxy. Default: 1px solid #808080
4803N/A * @type Boolean
4803N/A */
3853N/A borderStyle: {
3853N/A value: '1px solid #808080'
3853N/A }
3853N/A };
3853N/A
3853N/A proto = {
3853N/A /**
3853N/A * @private
4141N/A * @method _setProxy
4141N/A * @description Handler for the proxy config attribute
4141N/A */
4141N/A _setProxy: function(v) {
4141N/A if (v) {
4141N/A if (this.get(DRAG_NODE).compareTo(this.get(NODE))) {
4141N/A this._createFrame();
4141N/A this.set(DRAG_NODE, DDM._proxy);
4141N/A }
4141N/A } else {
4518N/A this.set(DRAG_NODE, this.get(NODE));
4518N/A }
4141N/A },
4141N/A /**
3853N/A * @private
3853N/A * @method _createFrame
4920N/A * @description Create the proxy element if it doesn't already exist and set the DD.DDM._proxy value
3853N/A */
4500N/A _createFrame: function() {
4500N/A if (!DDM._proxy) {
4500N/A DDM._proxy = true;
4500N/A
3853N/A var p = Y.Node.create('<div></div>'),
3853N/A b = Y.Node.get('body');
3853N/A
3853N/A p.setStyles({
3853N/A position: 'absolute',
3853N/A display: 'none',
3853N/A zIndex: '999',
3853N/A top: '-999px',
3853N/A left: '-999px'
3853N/A });
3853N/A
3853N/A b.insertBefore(p, b.get('firstChild'));
3853N/A p.set('id', Y.stamp(p));
3853N/A p.addClass(DDM.CSS_PREFIX + '-proxy');
3853N/A DDM._proxy = p;
3853N/A }
3853N/A },
3853N/A /**
3853N/A * @private
3853N/A * @method _setFrame
3853N/A * @description If resizeProxy is set to true (default) it will resize the proxy element to match the size of the Drag Element.
3853N/A * If positionProxy is set to true (default) it will position the proxy element in the same location as the Drag Element.
3853N/A */
4500N/A _setFrame: function() {
4500N/A var n = this.get(NODE), ah, cur;
4500N/A if (this.get('resizeFrame')) {
4500N/A DDM._proxy.setStyles({
3853N/A height: n.get('offsetHeight') + 'px',
3853N/A width: n.get('offsetWidth') + 'px'
3853N/A });
3853N/A }
3853N/A
3853N/A ah = DDM.activeDrag.get('activeHandle');
3853N/A cur = ah.getStyle('cursor');
3853N/A if (cur == 'auto') {
3853N/A cur = DDM.get('dragCursor');
3853N/A }
3853N/A
3853N/A
3853N/A this.get(DRAG_NODE).setStyles({
3853N/A visibility: 'hidden',
3853N/A display: 'block',
3853N/A cursor: cur,
3853N/A border: this.get('borderStyle')
3853N/A });
3858N/A
3853N/A
3853N/A
3853N/A if (this.get('positionProxy')) {
3853N/A this.get(DRAG_NODE).setXY(this.nodeXY);
3853N/A }
3853N/A this.get(DRAG_NODE).setStyle('visibility', 'visible');
3853N/A },
3853N/A /**
3858N/A * @private
3853N/A * @method initializer
3853N/A * @description Lifecycle method
3853N/A */
3853N/A initializer: function() {
3853N/A if (this.get(PROXY)) {
3853N/A this._createFrame();
3853N/A }
3853N/A },
3853N/A /**
3853N/A * @method start
3853N/A * @description Starts the drag operation and sets the dragNode config option.
3853N/A */
3853N/A start: function() {
3853N/A if (!this.get('lock')) {
3853N/A /*
3853N/A if (this.get(PROXY)) {
3853N/A if (this.get(DRAG_NODE).compareTo(this.get(NODE))) {
3853N/A this.set(DRAG_NODE, DDM._proxy);
3853N/A }
3853N/A } else {
3853N/A this.set(DRAG_NODE, this.get(NODE));
3853N/A }
3853N/A */
4060N/A }
4060N/A Proxy.superclass.start.apply(this);
4060N/A if (this.get(PROXY)) {
4060N/A this._setFrame();
4060N/A }
4803N/A },
4060N/A /**
4060N/A * @method end
4060N/A * @description Ends the drag operation, if moveOnEnd is set it will position the Drag Element to the new location of the proxy.
4060N/A */
4060N/A end: function() {
4060N/A if (this.get(PROXY) && this.get('dragging')) {
4060N/A if (this.get('moveOnEnd')) {
4060N/A this.get(NODE).setXY(this.lastXY);
4060N/A }
4060N/A this.get(DRAG_NODE).setStyle('display', 'none');
4803N/A }
4060N/A Proxy.superclass.end.apply(this);
4060N/A }
4060N/A };
4060N/A //Extend DD.Drag
4060N/A Y.extend(Proxy, Y.DD.Drag, proto);
3853N/A //Set this new class as DD.Drag for other extensions
3853N/A Y.DD.Drag = Proxy;
3853N/A
4803N/A
3853N/A
3853N/A