PageRenderTime 30ms CodeModel.GetById 18ms app.highlight 9ms RepoModel.GetById 1ms app.codeStats 0ms

/ext-4.1.0_b3/src/dd/DDProxy.js

https://bitbucket.org/srogerf/javascript
JavaScript | 202 lines | 91 code | 34 blank | 77 comment | 7 complexity | a192a7013f3fdb04c72fa3d841fadb7e MD5 | raw file
  1/*
  2 * This is a derivative of the similarly named class in the YUI Library.
  3 * The original license:
  4 * Copyright (c) 2006, Yahoo! Inc. All rights reserved.
  5 * Code licensed under the BSD License:
  6 * http://developer.yahoo.net/yui/license.txt
  7 */
  8
  9/**
 10 * A DragDrop implementation that inserts an empty, bordered div into
 11 * the document that follows the cursor during drag operations.  At the time of
 12 * the click, the frame div is resized to the dimensions of the linked html
 13 * element, and moved to the exact location of the linked element.
 14 *
 15 * References to the "frame" element refer to the single proxy element that
 16 * was created to be dragged in place of all DDProxy elements on the
 17 * page.
 18 */
 19Ext.define('Ext.dd.DDProxy', {
 20    extend: 'Ext.dd.DD',
 21
 22    statics: {
 23        /**
 24         * The default drag frame div id
 25         * @static
 26         */
 27        dragElId: "ygddfdiv"
 28    },
 29
 30    /**
 31     * Creates new DDProxy.
 32     * @param {String} id the id of the linked html element
 33     * @param {String} sGroup the group of related DragDrop objects
 34     * @param {Object} config an object containing configurable attributes.
 35     * Valid properties for DDProxy in addition to those in DragDrop:
 36     * 
 37     * - resizeFrame
 38     * - centerFrame
 39     * - dragElId
 40     */
 41    constructor: function(id, sGroup, config) {
 42        if (id) {
 43            this.init(id, sGroup, config);
 44            this.initFrame();
 45        }
 46    },
 47
 48    /**
 49     * @property {Boolean} resizeFrame
 50     * By default we resize the drag frame to be the same size as the element
 51     * we want to drag (this is to get the frame effect).  We can turn it off
 52     * if we want a different behavior.
 53     */
 54    resizeFrame: true,
 55
 56    /**
 57     * @property {Boolean} centerFrame
 58     * By default the frame is positioned exactly where the drag element is, so
 59     * we use the cursor offset provided by Ext.dd.DD.  Another option that works only if
 60     * you do not have constraints on the obj is to have the drag frame centered
 61     * around the cursor.  Set centerFrame to true for this effect.
 62     */
 63    centerFrame: false,
 64
 65    /**
 66     * Creates the proxy element if it does not yet exist
 67     */
 68    createFrame: function() {
 69        var self = this;
 70        var body = document.body;
 71
 72        if (!body || !body.firstChild) {
 73            setTimeout( function() { self.createFrame(); }, 50 );
 74            return;
 75        }
 76
 77        var div = this.getDragEl();
 78
 79        if (!div) {
 80            div    = document.createElement("div");
 81            div.id = this.dragElId;
 82            var s  = div.style;
 83
 84            s.position   = "absolute";
 85            s.visibility = "hidden";
 86            s.cursor     = "move";
 87            s.border     = "2px solid #aaa";
 88            s.zIndex     = 999;
 89
 90            // appendChild can blow up IE if invoked prior to the window load event
 91            // while rendering a table.  It is possible there are other scenarios
 92            // that would cause this to happen as well.
 93            body.insertBefore(div, body.firstChild);
 94        }
 95    },
 96
 97    /**
 98     * Initialization for the drag frame element.  Must be called in the
 99     * constructor of all subclasses
100     */
101    initFrame: function() {
102        this.createFrame();
103    },
104
105    applyConfig: function() {
106        this.callParent();
107
108        this.resizeFrame = (this.config.resizeFrame !== false);
109        this.centerFrame = (this.config.centerFrame);
110        this.setDragElId(this.config.dragElId || Ext.dd.DDProxy.dragElId);
111    },
112
113    /**
114     * Resizes the drag frame to the dimensions of the clicked object, positions
115     * it over the object, and finally displays it
116     * @param {Number} iPageX X click position
117     * @param {Number} iPageY Y click position
118     * @private
119     */
120    showFrame: function(iPageX, iPageY) {
121        var el = this.getEl();
122        var dragEl = this.getDragEl();
123        var s = dragEl.style;
124
125        this._resizeProxy();
126
127        if (this.centerFrame) {
128            this.setDelta( Math.round(parseInt(s.width,  10)/2),
129                           Math.round(parseInt(s.height, 10)/2) );
130        }
131
132        this.setDragElPos(iPageX, iPageY);
133
134        Ext.fly(dragEl).show();
135    },
136
137    /**
138     * The proxy is automatically resized to the dimensions of the linked
139     * element when a drag is initiated, unless resizeFrame is set to false
140     * @private
141     */
142    _resizeProxy: function() {
143        if (this.resizeFrame) {
144            var el = this.getEl();
145            Ext.fly(this.getDragEl()).setSize(el.offsetWidth, el.offsetHeight);
146        }
147    },
148
149    // overrides Ext.dd.DragDrop
150    b4MouseDown: function(e) {
151        var x = e.getPageX();
152        var y = e.getPageY();
153        this.autoOffset(x, y);
154        this.setDragElPos(x, y);
155    },
156
157    // overrides Ext.dd.DragDrop
158    b4StartDrag: function(x, y) {
159        // show the drag frame
160        this.showFrame(x, y);
161    },
162
163    // overrides Ext.dd.DragDrop
164    b4EndDrag: function(e) {
165        Ext.fly(this.getDragEl()).hide();
166    },
167
168    // overrides Ext.dd.DragDrop
169    // By default we try to move the element to the last location of the frame.
170    // This is so that the default behavior mirrors that of Ext.dd.DD.
171    endDrag: function(e) {
172
173        var lel = this.getEl();
174        var del = this.getDragEl();
175
176        // Show the drag frame briefly so we can get its position
177        del.style.visibility = "";
178
179        this.beforeMove();
180        // Hide the linked element before the move to get around a Safari
181        // rendering bug.
182        lel.style.visibility = "hidden";
183        Ext.dd.DDM.moveToEl(lel, del);
184        del.style.visibility = "hidden";
185        lel.style.visibility = "";
186
187        this.afterDrag();
188    },
189
190    beforeMove : function(){
191
192    },
193
194    afterDrag : function(){
195
196    },
197
198    toString: function() {
199        return ("DDProxy " + this.id);
200    }
201
202});