add extjs 6.0.1 sources

[extjs.git] / extjs / modern / modern / src / util / Droppable.js

/**\r
 *\r
 */\r
Ext.define('Ext.util.Droppable', {\r
    mixins: {\r
        observable: 'Ext.mixin.Observable'\r
    },\r
\r
    config: {\r
        /**\r
         * The base CSS class to apply to this component's element.\r
         * This will also be prepended to other elements within this component.\r
         */\r
        baseCls: Ext.baseCSSPrefix + 'droppable'\r
    },\r
\r
    /**\r
     * @cfg {String} activeCls\r
     * The CSS added to a Droppable when a Draggable in the same group is being\r
     * dragged.\r
     */\r
    activeCls: Ext.baseCSSPrefix + 'drop-active',\r
\r
    /**\r
     * @cfg {String} invalidCls\r
     * The CSS class to add to the droppable when dragging a draggable that is\r
     * not in the same group.\r
     */\r
    invalidCls: Ext.baseCSSPrefix + 'drop-invalid',\r
\r
    /**\r
     * @cfg {String} hoverCls\r
     * The CSS class to add to the droppable when hovering over a valid drop.\r
     */\r
    hoverCls: Ext.baseCSSPrefix + 'drop-hover',\r
\r
    /**\r
     * @cfg {String} validDropMode\r
     * Determines when a drop is considered 'valid' whether it simply need to\r
     * intersect the region or if it needs to be contained within the region.\r
     * Valid values are: 'intersects' or 'contains'\r
     */\r
    validDropMode: 'intersect',\r
\r
    /**\r
     * @cfg {Boolean} disabled\r
     */\r
    disabled: false,\r
\r
    /**\r
     * @cfg {String} group\r
     * Draggable and Droppable objects can participate in a group which are\r
     * capable of interacting.\r
     */\r
    group: 'base',\r
\r
    // not yet implemented\r
    tolerance: null,\r
\r
    /**\r
     * @private\r
     */\r
    monitoring: false,\r
\r
    /**\r
     * Creates new Droppable.\r
     * @param {Mixed} el String, HtmlElement or Ext.Element representing an\r
     * element on the page.\r
     * @param {Object} config Configuration options for this class.\r
     */\r
    constructor: function(el, config) {\r
        var me = this;\r
\r
        config = config || {};\r
        Ext.apply(me, config);\r
\r
        /**\r
         * @event dropactivate\r
         * @param {Ext.util.Droppable} this\r
         * @param {Ext.util.Draggable} draggable\r
         * @param {Ext.event.Event} e\r
         */\r
\r
        /**\r
         * @event dropdeactivate\r
         * @param {Ext.util.Droppable} this\r
         * @param {Ext.util.Draggable} draggable\r
         * @param {Ext.event.Event} e\r
         */\r
\r
        /**\r
         * @event dropenter\r
         * @param {Ext.util.Droppable} this\r
         * @param {Ext.util.Draggable} draggable\r
         * @param {Ext.event.Event} e\r
         */\r
\r
        /**\r
         * @event dropleave\r
         * @param {Ext.util.Droppable} this\r
         * @param {Ext.util.Draggable} draggable\r
         * @param {Ext.event.Event} e\r
         */\r
\r
        /**\r
         * @event drop\r
         * @param {Ext.util.Droppable} this\r
         * @param {Ext.util.Draggable} draggable\r
         * @param {Ext.event.Event} e\r
         */\r
\r
        me.el = Ext.get(el);\r
        me.callParent();\r
\r
        me.mixins.observable.constructor.call(me);\r
\r
        if (!me.disabled) {\r
            me.enable();\r
        }\r
\r
        me.el.addCls(me.baseCls);\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    onDragStart: function(draggable, e) {\r
        if (draggable.group === this.group) {\r
            this.monitoring = true;\r
            this.el.addCls(this.activeCls);\r
            this.region = this.el.getBox(true);\r
\r
            draggable.on({\r
                drag: this.onDrag,\r
                beforedragend: this.onBeforeDragEnd,\r
                dragend: this.onDragEnd,\r
                scope: this\r
            });\r
\r
            if (this.isDragOver(draggable)) {\r
                this.setCanDrop(true, draggable, e);\r
            }\r
\r
            this.fireEvent('dropactivate', this, draggable, e);\r
        }\r
        else {\r
            draggable.on({\r
                dragend: function() {\r
                    this.el.removeCls(this.invalidCls);\r
                },\r
                scope: this,\r
                single: true\r
            });\r
            this.el.addCls(this.invalidCls);\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    isDragOver: function(draggable, region) {\r
        return this.region[this.validDropMode](draggable.region);\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    onDrag: function(draggable, e) {\r
        this.setCanDrop(this.isDragOver(draggable), draggable, e);\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    setCanDrop: function(canDrop, draggable, e) {\r
        if (canDrop && !this.canDrop) {\r
            this.canDrop = true;\r
            this.el.addCls(this.hoverCls);\r
            this.fireEvent('dropenter', this, draggable, e);\r
        }\r
        else if (!canDrop && this.canDrop) {\r
            this.canDrop = false;\r
            this.el.removeCls(this.hoverCls);\r
            this.fireEvent('dropleave', this, draggable, e);\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    onBeforeDragEnd: function(draggable, e) {\r
        draggable.cancelRevert = this.canDrop;\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    onDragEnd: function(draggable, e) {\r
        this.monitoring = false;\r
        this.el.removeCls(this.activeCls);\r
\r
        draggable.un({\r
            drag: this.onDrag,\r
            beforedragend: this.onBeforeDragEnd,\r
            dragend: this.onDragEnd,\r
            scope: this\r
        });\r
\r
\r
        if (this.canDrop) {\r
            this.canDrop = false;\r
            this.el.removeCls(this.hoverCls);\r
            this.fireEvent('drop', this, draggable, e);\r
        }\r
\r
        this.fireEvent('dropdeactivate', this, draggable, e);\r
    },\r
\r
    /**\r
     * Enable the Droppable target.\r
     * This is invoked immediately after constructing a Droppable if the\r
     * disabled parameter is NOT set to true.\r
     */\r
    enable: function() {\r
        if (!this.mgr) {\r
            this.mgr = Ext.util.Observable.observe(Ext.util.Draggable);\r
        }\r
        this.mgr.on({\r
            dragstart: this.onDragStart,\r
            scope: this\r
        });\r
        this.disabled = false;\r
    },\r
\r
    /**\r
     * Disable the Droppable target.\r
     */\r
    disable: function() {\r
        this.mgr.un({\r
            dragstart: this.onDragStart,\r
            scope: this\r
        });\r
        this.disabled = true;\r
    },\r
\r
    /**\r
     * Method to determine whether this Component is currently disabled.\r
     * @return {Boolean} the disabled state of this Component.\r
     */\r
    isDisabled: function() {\r
        return this.disabled;\r
    },\r
\r
    /**\r
     * Method to determine whether this Droppable is currently monitoring drag operations of Draggables.\r
     * @return {Boolean} the monitoring state of this Droppable\r
     */\r
    isMonitoring: function() {\r
        return this.monitoring;\r
    }\r
});\r