add extjs 6.0.1 sources

[extjs.git] / extjs / build / examples / classic / calendar / src / view / DayBody.js

/**S\r
 * @class Ext.calendar.view.DayBody\r
 * @extends Ext.calendar.view.AbstractCalendar\r
 * <p>This is the scrolling container within the day and week views where non-all-day events are displayed.\r
 * Normally you should not need to use this class directly -- instead you should use {@link Ext.calendar.DayView DayView}\r
 * which aggregates this class and the {@link Ext.calendar.DayHeaderView DayHeaderView} into the single unified view\r
 * presented by {@link Ext.calendar.CalendarPanel CalendarPanel}.</p>\r
 * @constructor\r
 * @param {Object} config The config object\r
 */\r
Ext.define('Ext.calendar.view.DayBody', {\r
    extend: 'Ext.calendar.view.AbstractCalendar',\r
    alias: 'widget.daybodyview',\r
\r
    requires: [\r
        'Ext.XTemplate',\r
        'Ext.calendar.template.DayBody',\r
        'Ext.calendar.data.EventMappings',\r
        'Ext.calendar.dd.DayDragZone',\r
        'Ext.calendar.dd.DayDropZone'\r
    ],\r
    \r
    //private\r
    dayColumnElIdDelimiter: '-day-col-',\r
\r
    /**\r
     * @event eventresize\r
     * Fires after the user drags the resize handle of an event to resize it\r
     * @param {Ext.calendar.view.DayBody} this\r
     * @param {Ext.calendar.EventRecord} rec The {@link Ext.calendar.EventRecord record} for the event that was resized\r
     * containing the updated start and end dates\r
     */\r
\r
    /**\r
     * @event dayclick\r
     * Fires after the user clicks within the day view container and not on an event element\r
     * @param {Ext.calendar.view.DayBody} this\r
     * @param {Date} dt The date/time that was clicked on\r
     * @param {Boolean} allday True if the day clicked on represents an all-day box, else false. Clicks within the \r
     * DayBodyView always return false for this param.\r
     * @param {Ext.core.Element} el The Element that was clicked on\r
     */\r
\r
    //private\r
    initDD: function() {\r
        var cfg = {\r
            createText: this.ddCreateEventText,\r
            moveText: this.ddMoveEventText,\r
            resizeText: this.ddResizeEventText\r
        };\r
\r
        this.el.ddScrollConfig = {\r
            // scrolling is buggy in IE/Opera for some reason.  A larger vthresh\r
            // makes it at least functional if not perfect\r
            vthresh: Ext.isIE || Ext.isOpera ? 100: 40,\r
            hthresh: -1,\r
            frequency: 50,\r
            increment: 100,\r
            ddGroup: 'DayViewDD'\r
        };\r
        this.dragZone = new Ext.calendar.dd.DayDragZone(this.el, Ext.apply({\r
            view: this,\r
            containerScroll: true\r
        },\r
        cfg));\r
\r
        this.dropZone = new Ext.calendar.dd.DayDropZone(this.el, Ext.apply({\r
            view: this\r
        },\r
        cfg));\r
    },\r
\r
    //private\r
    refresh: function() {\r
        var top = this.el.getScroll().top;\r
        this.prepareData();\r
        this.renderTemplate();\r
        this.renderItems();\r
\r
        // skip this if the initial render scroll position has not yet been set.\r
        // necessary since IE/Opera must be deferred, so the first refresh will\r
        // override the initial position by default and always set it to 0.\r
        if (this.scrollReady) {\r
            this.scrollTo(top);\r
        }\r
    },\r
\r
    /**\r
     * Scrolls the container to the specified vertical position. If the view is large enough that\r
     * there is no scroll overflow then this method will have no effect.\r
     * @param {Number} y The new vertical scroll position in pixels \r
     * @param {Boolean} defer (optional) <p>True to slightly defer the call, false to execute immediately.</p> \r
     * <p>This method will automatically defer itself for IE and Opera (even if you pass false) otherwise\r
     * the scroll position will not update in those browsers. You can optionally pass true, however, to\r
     * force the defer in all browsers, or use your own custom conditions to determine whether this is needed.</p>\r
     * <p>Note that this method should not generally need to be called directly as scroll position is managed internally.</p>\r
     */\r
    scrollTo: function(y, defer) {\r
        defer = defer || (Ext.isIE || Ext.isOpera);\r
        if (defer) {\r
            Ext.defer(function() {\r
                this.el.scrollTo('top', y, true);\r
                this.scrollReady = true;\r
            }, 10, this);\r
        }\r
        else {\r
            this.el.scrollTo('top', y, true);\r
            this.scrollReady = true;\r
        }\r
    },\r
\r
    // private\r
    afterRender: function() {\r
        if (!this.tpl) {\r
            this.tpl = new Ext.calendar.template.DayBody({\r
                id: this.id,\r
                dayCount: this.dayCount,\r
                showTodayText: this.showTodayText,\r
                todayText: this.todayText,\r
                showTime: this.showTime\r
            });\r
        }\r
        this.tpl.compile();\r
\r
        this.addCls('ext-cal-body-ct');\r
\r
        this.callParent(arguments);\r
\r
        // default scroll position to 7am:\r
        this.scrollTo(7 * 42);\r
    },\r
\r
    // private\r
    forceSize: Ext.emptyFn,\r
\r
    // private\r
    onEventResize: function(rec, data) {\r
        var D = Ext.calendar.util.Date,\r
        start = Ext.calendar.data.EventMappings.StartDate.name,\r
        end = Ext.calendar.data.EventMappings.EndDate.name;\r
\r
        if (D.compare(rec.data[start], data.StartDate) === 0 &&\r
        D.compare(rec.data[end], data.EndDate) === 0) {\r
            // no changes\r
            return;\r
        }\r
        rec.set(start, data.StartDate);\r
        rec.set(end, data.EndDate);\r
\r
        this.fireEvent('eventresize', this, rec);\r
    },\r
\r
    // inherited docs\r
    getEventBodyMarkup: function() {\r
        if (!this.eventBodyMarkup) {\r
            this.eventBodyMarkup = ['{Title}',\r
            '<tpl if="_isReminder">',\r
            '<i class="ext-cal-ic ext-cal-ic-rem">&#160;</i>',\r
            '</tpl>',\r
            '<tpl if="_isRecurring">',\r
            '<i class="ext-cal-ic ext-cal-ic-rcr">&#160;</i>',\r
            '</tpl>'\r
            //                '<tpl if="spanLeft">',\r
            //                    '<i class="ext-cal-spl">&#160;</i>',\r
            //                '</tpl>',\r
            //                '<tpl if="spanRight">',\r
            //                    '<i class="ext-cal-spr">&#160;</i>',\r
            //                '</tpl>'\r
            ].join('');\r
        }\r
        return this.eventBodyMarkup;\r
    },\r
\r
    // inherited docs\r
    getEventTemplate: function() {\r
        if (!this.eventTpl) {\r
            this.eventTpl = !(Ext.isIE || Ext.isOpera) ?\r
            new Ext.XTemplate(\r
                '<div id="{_elId}" class="{_selectorCls} {_colorCls} ext-cal-evt ext-cal-evr" style="left: {_left}%; width: {_width}%; top: {_top}px; height: {_height}px;">',\r
                '<div class="ext-evt-bd">', this.getEventBodyMarkup(), '</div>',\r
                '<div class="ext-evt-rsz"><div class="ext-evt-rsz-h">&#160;</div></div>',\r
                '</div>'\r
            )\r
            : new Ext.XTemplate(\r
                '<div id="{_elId}" class="ext-cal-evt {_selectorCls} {_colorCls}-x" style="left: {_left}%; width: {_width}%; top: {_top}px;">',\r
                '<div class="ext-cal-evb">&#160;</div>',\r
                '<dl style="height: {_height}px;" class="ext-cal-evdm">',\r
                '<dd class="ext-evt-bd">',\r
                this.getEventBodyMarkup(),\r
                '</dd>',\r
                '<div class="ext-evt-rsz"><div class="ext-evt-rsz-h">&#160;</div></div>',\r
                '</dl>',\r
                '<div class="ext-cal-evb">&#160;</div>',\r
                '</div>'\r
            );\r
            this.eventTpl.compile();\r
        }\r
        return this.eventTpl;\r
    },\r
\r
    /**\r
     * <p>Returns the XTemplate that is bound to the calendar's event store (it expects records of type\r
     * {@link Ext.calendar.EventRecord}) to populate the calendar views with <strong>all-day</strong> events. \r
     * Internally this method by default generates different markup for browsers that support CSS border radius \r
     * and those that don't. This method can be overridden as needed to customize the markup generated.</p>\r
     * <p>Note that this method calls {@link #getEventBodyMarkup} to retrieve the body markup for events separately\r
     * from the surrounding container markup.  This provdes the flexibility to customize what's in the body without\r
     * having to override the entire XTemplate. If you do override this method, you should make sure that your \r
     * overridden version also does the same.</p>\r
     * @return {Ext.XTemplate} The event XTemplate\r
     */\r
    getEventAllDayTemplate: function() {\r
        if (!this.eventAllDayTpl) {\r
            var tpl,\r
            body = this.getEventBodyMarkup();\r
\r
            tpl = !(Ext.isIE || Ext.isOpera) ?\r
            new Ext.XTemplate(\r
                '<div id="{_elId}" class="{_selectorCls} {_colorCls} {spanCls} ext-cal-evt ext-cal-evr" style="left: {_left}%; width: {_width}%; top: {_top}px; height: {_height}px;">',\r
                body,\r
                '</div>'\r
            )\r
            : new Ext.XTemplate(\r
                '<div id="{_elId}" class="ext-cal-evt" style="left: {_left}%; width: {_width}%; top: {_top}px; height: {_height}px;">',\r
                '<div class="{_selectorCls} {spanCls} {_colorCls} ext-cal-evo">',\r
                '<div class="ext-cal-evm">',\r
                '<div class="ext-cal-evi">',\r
                body,\r
                '</div>',\r
                '</div>',\r
                '</div></div>'\r
            );\r
            tpl.compile();\r
            this.eventAllDayTpl = tpl;\r
        }\r
        return this.eventAllDayTpl;\r
    },\r
\r
    // private\r
    getTemplateEventData: function(evt) {\r
        var selector = this.getEventSelectorCls(evt[Ext.calendar.data.EventMappings.EventId.name]),\r
            data = {},\r
            M = Ext.calendar.data.EventMappings;\r
\r
        this.getTemplateEventBox(evt);\r
\r
        data._selectorCls = selector;\r
        data._colorCls = 'ext-color-' + (evt[M.CalendarId.name] || '0') + (evt._renderAsAllDay ? '-ad': '');\r
        data._elId = selector + (evt._weekIndex ? '-' + evt._weekIndex: '');\r
        data._isRecurring = evt.Recurrence && evt.Recurrence != '';\r
        data._isReminder = evt[M.Reminder.name] && evt[M.Reminder.name] != '';\r
        var title = evt[M.Title.name];\r
        data.Title = (evt[M.IsAllDay.name] ? '': Ext.Date.format(evt[M.StartDate.name], 'g:ia ')) + (!title || title.length == 0 ? '(No title)': title);\r
\r
        return Ext.applyIf(data, evt);\r
    },\r
\r
    // private\r
    getTemplateEventBox: function(evt) {\r
        var heightFactor = 0.7,\r
            start = evt[Ext.calendar.data.EventMappings.StartDate.name],\r
            end = evt[Ext.calendar.data.EventMappings.EndDate.name],\r
            startMins = start.getHours() * 60 + start.getMinutes(),\r
            endMins = end.getHours() * 60 + end.getMinutes(),\r
            diffMins = endMins - startMins;\r
\r
        evt._left = 0;\r
        evt._width = 100;\r
        evt._top = Math.round(startMins * heightFactor);\r
        evt._height = Math.max((diffMins * heightFactor), 15);\r
    },\r
\r
    // private\r
    renderItems: function() {\r
        var day = 0,\r
            evts = [],\r
            ev,\r
            d,\r
            ct,\r
            item,\r
            i,\r
            j,\r
            l,\r
            emptyCells, skipped,\r
            evt,\r
            evt2,\r
            overlapCols,\r
            prevCol,\r
            colWidth,\r
            evtWidth,\r
            markup,\r
            target;\r
        for (; day < this.dayCount; day++) {\r
            ev = emptyCells = skipped = 0;\r
            d = this.eventGrid[0][day];\r
            ct = d ? d.length: 0;\r
\r
            for (; ev < ct; ev++) {\r
                evt = d[ev];\r
                if (!evt) {\r
                    continue;\r
                }\r
                item = evt.data || evt.event.data;\r
                if (item._renderAsAllDay) {\r
                    continue;\r
                }\r
                Ext.apply(item, {\r
                    cls: 'ext-cal-ev',\r
                    _positioned: true\r
                });\r
                evts.push({\r
                    data: this.getTemplateEventData(item),\r
                    date: Ext.calendar.util.Date.add(this.viewStart, {days: day})\r
                });\r
            }\r
        }\r
\r
        // overlapping event pre-processing loop\r
        i = j = overlapCols = prevCol = 0;\r
        l = evts.length;\r
        for (; i < l; i++) {\r
            evt = evts[i].data;\r
            evt2 = null;\r
            prevCol = overlapCols;\r
            for (j = 0; j < l; j++) {\r
                if (i == j) {\r
                    continue;\r
                }\r
                evt2 = evts[j].data;\r
                if (this.isOverlapping(evt, evt2)) {\r
                    evt._overlap = evt._overlap == undefined ? 1: evt._overlap + 1;\r
                    if (i < j) {\r
                        if (evt._overcol === undefined) {\r
                            evt._overcol = 0;\r
                        }\r
                        evt2._overcol = evt._overcol + 1;\r
                        overlapCols = Math.max(overlapCols, evt2._overcol);\r
                    }\r
                }\r
            }\r
        }\r
\r
        // rendering loop\r
        for (i = 0; i < l; i++) {\r
            evt = evts[i].data;\r
            if (evt._overlap !== undefined) {\r
                colWidth = 100 / (overlapCols + 1);\r
                evtWidth = 100 - (colWidth * evt._overlap);\r
\r
                evt._width = colWidth;\r
                evt._left = colWidth * evt._overcol;\r
            }\r
            markup = this.getEventTemplate().apply(evt);\r
            target = this.id + '-day-col-' + Ext.Date.format(evts[i].date, 'Ymd');\r
            Ext.get(target).select('*').destroy();\r
\r
            Ext.core.DomHelper.append(target, markup);\r
        }\r
\r
        this.fireEvent('eventsrendered', this);\r
    },\r
\r
    // private\r
    getDayEl: function(dt) {\r
        return Ext.get(this.getDayId(dt));\r
    },\r
\r
    // private\r
    getDayId: function(dt) {\r
        if (Ext.isDate(dt)) {\r
            dt = Ext.Date.format(dt, 'Ymd');\r
        }\r
        return this.id + this.dayColumnElIdDelimiter + dt;\r
    },\r
\r
    // private\r
    getDaySize: function() {\r
        var box = this.el.down('.ext-cal-day-col-inner').getBox();\r
        return {\r
            height: box.height,\r
            width: box.width\r
        };\r
    },\r
\r
    // private\r
    getDayAt: function(x, y) {\r
        var xoffset = this.el.down('.ext-cal-day-times').getWidth(),\r
            viewBox = this.el.getBox(),\r
            daySize = this.getDaySize(false),\r
            relX = x - viewBox.x - xoffset,\r
            dayIndex = Math.floor(relX / daySize.width),\r
            // clicked col index\r
            scroll = this.el.getScroll(),\r
            row = this.el.down('.ext-cal-bg-row'),\r
            // first avail row, just to calc size\r
            rowH = row.getHeight() / 2,\r
            // 30 minute increment since a row is 60 minutes\r
            relY = y - viewBox.y - rowH + scroll.top,\r
            rowIndex = Math.max(0, Math.ceil(relY / rowH)),\r
            mins = rowIndex * 30,\r
            dt = Ext.calendar.util.Date.add(this.viewStart, {days: dayIndex, minutes: mins}),\r
            el = this.getDayEl(dt),\r
            timeX = x;\r
\r
        if (el) {\r
            timeX = el.getX();\r
        }\r
\r
        return {\r
            date: dt,\r
            el: el,\r
            // this is the box for the specific time block in the day that was clicked on:\r
            timeBox: {\r
                x: timeX,\r
                y: (rowIndex * 21) + viewBox.y - scroll.top,\r
                width: daySize.width,\r
                height: rowH\r
            }\r
        };\r
    },\r
\r
    // private\r
    onClick: function(e, t) {\r
        if (this.dragPending || Ext.calendar.view.DayBody.superclass.onClick.apply(this, arguments)) {\r
            // The superclass handled the click already so exit\r
            return;\r
        }\r
        if (e.getTarget('.ext-cal-day-times', 3) !== null) {\r
            // ignore clicks on the times-of-day gutter\r
            return;\r
        }\r
        var el = e.getTarget('td', 3);\r
        if (el) {\r
            if (el.id && el.id.indexOf(this.dayElIdDelimiter) > -1) {\r
                var dt = this.getDateFromId(el.id, this.dayElIdDelimiter);\r
                this.fireEvent('dayclick', this, Ext.Date.parseDate(dt, 'Ymd'), true, Ext.get(this.getDayId(dt, true)));\r
                return;\r
            }\r
        }\r
        var day = this.getDayAt(e.getX(), e.getY());\r
        if (day && day.date) {\r
            this.fireEvent('dayclick', this, day.date, false, null);\r
        }\r
    }\r
});\r