add extjs 6.0.1 sources

[extjs.git] / extjs / examples / classic / calendar / src / dd / DropZone.js

/*\r
 * Internal drop zone implementation for the calendar components. This provides base functionality\r
 * and is primarily for the month view -- DayViewDD adds day/week view-specific functionality.\r
 */\r
Ext.define('Ext.calendar.dd.DropZone', {\r
    extend: 'Ext.dd.DropZone',\r
    \r
    requires: [\r
        'Ext.calendar.util.Date',\r
        'Ext.calendar.data.EventMappings'\r
    ],\r
\r
    ddGroup: 'CalendarDD',\r
    eventSelector: '.ext-cal-evt',\r
\r
    // private\r
    shims: [],\r
\r
    getTargetFromEvent: function(e) {\r
        var dragOffset = this.dragOffset || 0,\r
        y = e.getY() - dragOffset,\r
        d = this.view.getDayAt(e.getX(), y);\r
\r
        return d.el ? d: null;\r
    },\r
\r
    onNodeOver: function(n, dd, e, data) {\r
        var D = Ext.calendar.util.Date,\r
        start = data.type == 'eventdrag' ? n.date: D.min(data.start, n.date),\r
        end = data.type == 'eventdrag' ? D.add(n.date, {days: D.diffDays(data.eventStart, data.eventEnd)}) :\r
        D.max(data.start, n.date);\r
\r
        if (!this.dragStartDate || !this.dragEndDate || (D.diffDays(start, this.dragStartDate) != 0) || (D.diffDays(end, this.dragEndDate) != 0)) {\r
            this.dragStartDate = start;\r
            this.dragEndDate = D.add(end, {days: 1, millis: -1, clearTime: true});\r
            this.shim(start, end);\r
\r
            var range = Ext.Date.format(start, 'n/j');\r
            if (D.diffDays(start, end) > 0) {\r
                range += '-' + Ext.Date.format(end, 'n/j');\r
            }\r
            var msg = Ext.util.Format.format(data.type == 'eventdrag' ? this.moveText: this.createText, range);\r
            data.proxy.updateMsg(msg);\r
        }\r
        return this.dropAllowed;\r
    },\r
\r
    shim: function(start, end) {\r
        this.currWeek = -1;\r
        this.DDMInstance.notifyOccluded = true;\r
        var dt = Ext.Date.clone(start),\r
            i = 0,\r
            shim,\r
            box,\r
            D = Ext.calendar.util.Date,\r
            cnt = D.diffDays(dt, end) + 1;\r
\r
        Ext.each(this.shims,\r
            function(shim) {\r
                if (shim) {\r
                    shim.isActive = false;\r
                }\r
            }\r
        );\r
\r
        while (i++<cnt) {\r
            var dayEl = this.view.getDayEl(dt);\r
\r
            // if the date is not in the current view ignore it (this\r
            // can happen when an event is dragged to the end of the\r
            // month so that it ends outside the view)\r
            if (dayEl) {\r
                var wk = this.view.getWeekIndex(dt);\r
                shim = this.shims[wk];\r
\r
                if (!shim) {\r
                    shim = this.createShim();\r
                    this.shims[wk] = shim;\r
                }\r
                if (wk != this.currWeek) {\r
                    shim.boxInfo = dayEl.getBox();\r
                    this.currWeek = wk;\r
                }\r
                else {\r
                    box = dayEl.getBox();\r
                    shim.boxInfo.right = box.right;\r
                    shim.boxInfo.width = box.right - shim.boxInfo.x;\r
                }\r
                shim.isActive = true;\r
            }\r
            dt = D.add(dt, {days: 1});\r
        }\r
\r
        Ext.each(this.shims, function(shim) {\r
            if (shim) {\r
                if (shim.isActive) {\r
                    shim.show();\r
                    shim.setBox(shim.boxInfo);\r
                }\r
                else if (shim.isVisible()) {\r
                    shim.hide();\r
                }\r
            }\r
        });\r
    },\r
\r
    createShim: function() {\r
        if (!this.shimCt) {\r
            this.shimCt = Ext.get('ext-dd-shim-ct');\r
            if (!this.shimCt) {\r
                this.shimCt = document.createElement('div');\r
                this.shimCt.id = 'ext-dd-shim-ct';\r
                Ext.getBody().appendChild(this.shimCt);\r
            }\r
        }\r
        var el = document.createElement('div');\r
        el.className = 'ext-dd-shim';\r
        this.shimCt.appendChild(el);\r
\r
        el = Ext.get(el);\r
\r
        el.setVisibilityMode(2);\r
\r
        return el;\r
    },\r
\r
    clearShims: function() {\r
        Ext.each(this.shims,\r
        function(shim) {\r
            if (shim) {\r
                shim.hide();\r
            }\r
        });\r
        this.DDMInstance.notifyOccluded = false;\r
    },\r
\r
    onContainerOver: function(dd, e, data) {\r
        return this.dropAllowed;\r
    },\r
\r
    onCalendarDragComplete: function() {\r
        delete this.dragStartDate;\r
        delete this.dragEndDate;\r
        this.clearShims();\r
    },\r
\r
    onNodeDrop: function(n, dd, e, data) {\r
        if (n && data) {\r
            if (data.type == 'eventdrag') {\r
                var rec = this.view.getEventRecordFromEl(data.ddel),\r
                dt = Ext.calendar.util.Date.copyTime(rec.data[Ext.calendar.data.EventMappings.StartDate.name], n.date);\r
\r
                this.view.onEventDrop(rec, dt);\r
                this.onCalendarDragComplete();\r
                return true;\r
            }\r
            if (data.type == 'caldrag') {\r
                this.view.onCalendarEndDrag(this.dragStartDate, this.dragEndDate,\r
                Ext.bind(this.onCalendarDragComplete, this));\r
                //shims are NOT cleared here -- they stay visible until the handling\r
                //code calls the onCalendarDragComplete callback which hides them.\r
                return true;\r
            }\r
        }\r
        this.onCalendarDragComplete();\r
        return false;\r
    },\r
\r
    onContainerDrop: function(dd, e, data) {\r
        this.onCalendarDragComplete();\r
        return false;\r
    }\r
});\r