@progress/kendo-ui/js/kendo.scheduler.yearview.js

This package is part of the [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) suite.

Object.defineProperties(exports, {
	__esModule: { value: true },
	[Symbol.toStringTag]: { value: "Module" }
});
require("./kendo.multiviewcalendar.js");
require("./kendo.scheduler.view.js");
require("./kendo.popover.js");
//#region ../src/kendo.scheduler.yearview.js
const __meta__ = {
	id: "scheduler.yearview",
	name: "Scheduler Year View",
	category: "web",
	description: "The Scheduler Year View",
	depends: [
		"scheduler.view",
		"multiviewcalendar",
		"popover"
	],
	hidden: true
};
(function($, undefined) {
	var kendo = window.kendo, ui = kendo.ui, encode = kendo.htmlEncode, SchedulerView = ui.SchedulerView, extend = $.extend, template = kendo.template, firstDayOfYear = kendo.date.firstDayOfYear, firstDayOfMonth = kendo.date.firstDayOfMonth, lastDayOfMonth = kendo.date.lastDayOfMonth, DAY = "day", NAVIGATE = "navigate", KEYDOWN = "keydown", ACTIVATE = "activate", CLICK = "click", FOCUS = "focus", DOT = ".", NS = ".kendoYearView";
	var YearViewStyles = {
		layout: "k-scheduler-layout k-scheduler-layout-flex k-scheduler-yearview",
		body: "k-scheduler-body",
		popover: "k-scheduler-popover",
		indicator: "k-day-indicator",
		event: "k-popover-event",
		hidden: "k-hidden",
		calendarView: "k-calendar-view",
		scheduler: "k-scheduler"
	};
	var POPOVER_TEMPLATE = template(({ date, events, messages }) => `<div class='k-popover-header'><div class='k-month'>${encode(kendo.format("{0:MMM}", date))}</div><div tabindex='0' class='k-link k-day'>${encode(kendo.format("{0:dd}", date))}</div></div><div class='k-popover-body'>` + (events.length ? "<div class='k-popover-events' role='list' aria-label='Events'>" + events.map((event) => `<div class="k-popover-event k-event" role="listitem" title="${encode(event.title)}" ${event.resources[0] ? `${kendo.attr("style-background-color")}="${encode(event.resources[0].color)}" ${kendo.attr("style-border-color")}="${encode(event.resources[0].color)}"` : ""}><div class='k-event-title'>${encode(event.title)}</div><span class='k-event-time'>${encode(kendo.format("{0:t}", event.start))}</span></div>`).join("") + "</div>" : `<span class='k-no-data'>${encode(messages.noData)}</span>`) + "</div>");
	extend(true, ui, { YearView: SchedulerView.extend({
		init: function(element, options) {
			var that = this;
			SchedulerView.fn.init.call(that, element, options);
			that._yearRange();
			that._templates();
			that._layout();
			that._initCalendar();
			that._initPopover();
			SchedulerView.fn.endInit.call(that);
		},
		options: {
			title: "Year",
			name: "year",
			months: 12,
			startDate: null,
			messages: { noData: "No events on this date." },
			selectedDateFormat: "{0:yyyy}",
			selectedShortDateFormat: "{0:yyyy}",
			selectedMobileDateFormat: "{0:yyyy}",
			tooltipTemplate: POPOVER_TEMPLATE
		},
		name: "year",
		events: [NAVIGATE],
		_yearRange: function() {
			var that = this, options = that.options, tempEnd;
			that._startDate = options.startDate ? firstDayOfMonth(options.startDate) : firstDayOfYear(options.date);
			that._startDate.setFullYear(options.date.getFullYear());
			tempEnd = new Date(that._startDate);
			tempEnd.setMonth(tempEnd.getMonth() + options.months);
			that._endDate = tempEnd;
		},
		_templates: function() {
			var options = this.options, settings = extend({}, kendo.Template, options.templateSettings);
			this.popoverTemplate = kendo.template(options.tooltipTemplate, settings);
		},
		_layout: function() {
			var that = this, styles = YearViewStyles;
			that.content = $("<div/>").addClass(styles.layout);
			that.element.append(that.content);
			that.body = $("<div/>").addClass(styles.body);
			that.content.append(that.body);
		},
		_initCalendar: function() {
			var that = this, options = that.options, calendarElement = $("<div/>"), calendar, calEl;
			that.body.append(calendarElement);
			that.calendar = calendar = new ui.MultiViewCalendar(calendarElement, {
				views: options.months,
				value: that.startDate(),
				showViewHeader: true,
				footer: false
			});
			calEl = calendar.element;
			if (!options.selectable) that._disableCalendarSelection();
			calendar.value(null);
			calendar.header.toggleClass(YearViewStyles.hidden);
			calEl.on(CLICK + NS, "td[role='gridcell']", that._calendarCellClick.bind(that));
			calEl.on(KEYDOWN + NS, DOT + YearViewStyles.calendarView, that._calendarKeydown.bind(that));
			calendar.bind(NAVIGATE, that._calendarNavigate.bind(that));
		},
		_calendarCellClick: function(ev) {
			var that = this, target = that.calendar.selectable.value().first();
			ev.preventDefault();
			ev.stopPropagation();
			that._displayPopover(target);
		},
		_calendarKeydown: function(ev) {
			var that = this, keys = kendo.keys, keyCode = ev.keyCode;
			if (keyCode == keys.ENTER || keyCode == keys.SPACEBAR) {
				ev.preventDefault();
				that._displayPopover(that.calendar.selectable.value().first());
			}
		},
		_calendarNavigate: function(ev) {
			var that = this, navigationDate = ev.sender._firstViewValue < that.startDate() ? that.previousDate() : that.nextDate();
			that.trigger(NAVIGATE, {
				view: "year",
				date: navigationDate
			});
			that._focusCellOnNavigate();
		},
		_focusCellOnNavigate: function() {
			var that = this, calendar = that.calendar || that.element.find(".k-calendar").getKendoMultiViewCalendar(), isPrevious, focusDate;
			if (!calendar) return;
			isPrevious = calendar._firstViewValue < that.startDate();
			focusDate = isPrevious ? that.lastDateInRange() : that.nextDate();
			calendar._focusCell(calendar._cellByDate(focusDate), true);
		},
		_disableCalendarSelection: function() {
			var that = this;
			if (!that.calendar) return;
			that.calendar.value(null);
			that.calendar.element.off(KEYDOWN, that.calendar._move);
		},
		_initPopover: function() {
			var that = this, popoverElement = that.content, popoverTemplate = that._buildPopoverTemplate.bind(that);
			that.popover = popoverElement.kendoPopover({
				filter: ".k-calendar td[role='gridcell']",
				showOn: CLICK,
				toggleOnClick: false,
				position: "right",
				callout: true,
				template: popoverTemplate,
				width: 220,
				show: that._popoverShow.bind(that),
				hide: that._popoverHide.bind(that)
			}).data("kendoPopover");
			that.popover.element.removeAttr("data-role");
			that._initPopoverPopup();
		},
		_initPopoverPopup: function() {
			var that = this, popover = that.popover;
			if (!that.popover) return;
			popover._initPopup();
			popover.wrapper.addClass(YearViewStyles.popover).attr("role", "dialog");
			popover.wrapper.on(CLICK + NS, ".k-popover-header > .k-day", that._popoverTitleClick.bind(that));
			popover.wrapper.on(KEYDOWN + NS, ".k-day", that._popoverKeydown.bind(that));
		},
		_buildPopoverTemplate: function() {
			var that = this, date = kendo.parseDate(that.calendar.current()), data = that.eventsByDate || [];
			data = data.filter(function(dateData) {
				return kendo.toString(new Date(dateData.value), "d") == kendo.toString(date, "d");
			});
			if (data && data[0]) data[0].items.map(function(event) {
				event.resources = that.eventResources(event) || [];
			});
			return that.popoverTemplate({
				date,
				events: data[0] ? data[0].items : [],
				messages: that.options.messages
			});
		},
		_inversePopoverEventsColor: function() {
			var that = this;
			$.each(that.popover.popup.element.find(DOT + YearViewStyles.event), function() {
				that._inverseEventColor($(this));
			});
		},
		_popoverShow: function(ev) {
			var that = this, popover = ev.sender, container = popover.popup.wrapper;
			container.css("visibility", "hidden");
			popover.wrapper.addClass(YearViewStyles.popover).attr("role", "dialog");
			popover.popup.position();
			popover._offset(popover.options.position, popover.options.offset, 28);
			popover._positionCallout();
			container.css("visibility", "");
			kendo.applyStylesFromKendoAttributes(popover.popup.element, ["background-color", "border-color"]);
			that._inversePopoverEventsColor();
			popover.wrapper.find(".k-day").trigger(FOCUS);
		},
		_popoverHide: function() {
			var calendar = this.calendar;
			if (!calendar) return;
			calendar.focus();
		},
		_popoverTitleClick: function() {
			this._navigateToDayView();
		},
		_popoverKeydown: function(ev) {
			var that = this, target = $(ev.target), keys = kendo.keys, keyCode = ev.keyCode;
			if (target.is(".k-day") && (keyCode == keys.ENTER || keyCode == keys.SPACEBAR)) {
				ev.preventDefault();
				that._navigateToDayView();
			}
		},
		_navigateToDayView: function() {
			if ($.grep(this.options.views, function(view) {
				return $.isPlainObject(view) && view.type == "kendo.ui.DayView" || view === DAY;
			}).length) this.trigger(NAVIGATE, {
				view: DAY,
				date: this.calendar.current()
			});
		},
		_displayPopover: function(target) {
			var that = this;
			if (!target.length) return;
			if (!that.options.selectable) target.removeClass("k-selected");
			setTimeout(function() {
				that.popover.show(target);
			}, 50);
		},
		_renderEventIndicators: function() {
			var that = this, calendar = that.calendar, current, cell;
			calendar.element.find("." + YearViewStyles.indicator).remove();
			that.eventsByDate.forEach(function(date) {
				current = calendar._currentView.toDateString(new Date(date.value));
				cell = calendar.element[0].querySelector("[data-value='" + current + "']");
				if (date.items.length) $("<span/>").addClass(YearViewStyles.indicator).appendTo(cell);
			});
		},
		_groupEventsByDate: function(events) {
			var eventsByDate = [], eventsFormatted;
			if (!events.length) return [];
			eventsFormatted = events.map(function(event) {
				event.formattedDate = event.start.toDateString();
				return event;
			});
			eventsByDate = new kendo.data.Query(eventsFormatted).sort([{
				field: "start",
				dir: "asc"
			}, {
				field: "end",
				dir: "desc"
			}]).group({ field: "formattedDate" }).toArray();
			return eventsByDate;
		},
		_resourceBySlot: function() {
			return {};
		},
		lastDateInRange: function() {
			var end = new Date(this.previousDate());
			end.setMonth(end.getMonth() - 1 + this.options.months);
			return lastDayOfMonth(end);
		},
		nextDate: function() {
			return kendo.date.nextYear(this._startDate);
		},
		previousDate: function() {
			return kendo.date.previousYear(this._startDate);
		},
		startDate: function() {
			return this._startDate;
		},
		endDate: function() {
			return this._endDate;
		},
		moveToEvent: function() {
			return false;
		},
		constrainSelection: function() {
			return false;
		},
		inRange: function() {
			return true;
		},
		select: function(selection) {
			this.clearSelection();
			if (selection.start >= this.startDate() && selection.start < this.endDate()) this.calendar.value(selection.start);
			else {
				this.calendar.value(this.calendar._firstViewValue);
				selection.start = selection.end = this.calendar.value();
			}
			this.current(this.calendar.selectable.value()[0]);
		},
		selectionByElement: function(cell) {
			if (!cell.length) return;
			cell = $(cell);
			return {
				index: this.calendar._index,
				start: kendo.calendar.toDateObject(cell),
				end: kendo.calendar.toDateObject(cell),
				isAllDay: false,
				uid: 0
			};
		},
		current: function(candidate) {
			if (candidate !== undefined) this._current = candidate;
			else return this._current;
		},
		render: function(events) {
			var that = this;
			that._cachedEvents = events;
			that.eventsByDate = that._groupEventsByDate(events) || [];
			that._renderEventIndicators();
			that.trigger(ACTIVATE);
		},
		destroy: function() {
			var that = this;
			if (that.popover) {
				that.popover.destroy();
				that.popover = null;
			}
			if (that.calendar) {
				that.calendar.destroy();
				that.calendar = null;
			}
			if (that.element) {
				that.content.remove();
				that.element.off(NS);
			}
			SchedulerView.fn.destroy.call(this);
		}
	}) });
})(window.kendo.jQuery);
var kendo_scheduler_yearview_default = kendo;
//#endregion
exports.__meta__ = __meta__;
exports.default = kendo_scheduler_yearview_default;