"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.default = void 0; require("../../../../src/components/VCalendar/mixins/calendar-with-events.sass"); var _calendarBase = _interopRequireDefault(require("./calendar-base")); var _props = _interopRequireDefault(require("../util/props")); var _timestamp = require("../util/timestamp"); var _events = require("../util/events"); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } /* @vue/component */ var _default = _calendarBase.default.extend({ name: 'calendar-with-events', props: _props.default.events, computed: { noEvents: function noEvents() { return this.events.length === 0; }, parsedEvents: function parsedEvents() { var _this = this; return this.events.map(function (input, index) { return (0, _events.parseEvent)(input, index, _this.eventStart, _this.eventEnd); }); }, eventColorFunction: function eventColorFunction() { var _this2 = this; return typeof this.eventColor === 'function' ? this.eventColor : function () { return _this2.eventColor; }; }, eventTextColorFunction: function eventTextColorFunction() { var _this3 = this; return typeof this.eventTextColor === 'function' ? this.eventTextColor : function () { return _this3.eventTextColor; }; }, eventNameFunction: function eventNameFunction() { var _this4 = this; return typeof this.eventName === 'function' ? this.eventName : function (event, timedEvent) { var name = event.input[_this4.eventName]; if (event.start.hasTime) { if (timedEvent) { var showStart = event.start.hour < 12 && event.end.hour >= 12; var start = _this4.formatTime(event.start, showStart); var end = _this4.formatTime(event.end, true); return "".concat(name, "
").concat(start, " - ").concat(end); } else { var time = _this4.formatTime(event.start, true); return "".concat(time, " ").concat(name); } } return name; }; } }, methods: { formatTime: function formatTime(withTime, ampm) { var suffix = ampm ? withTime.hour < 12 ? 'a' : 'p' : ''; var hour = withTime.hour % 12 || 12; var minute = withTime.minute; return minute > 0 ? minute < 10 ? "".concat(hour, ":0").concat(minute).concat(suffix) : "".concat(hour, ":").concat(minute).concat(suffix) : "".concat(hour).concat(suffix); }, updateEventVisibility: function updateEventVisibility() { if (this.noEvents || !this.eventMore) { return; } var eventHeight = this.eventHeight; var eventsMap = this.getEventsMap(); for (var date in eventsMap) { var _eventsMap$date = eventsMap[date], parent = _eventsMap$date.parent, events = _eventsMap$date.events, more = _eventsMap$date.more; if (!more) { break; } var parentBounds = parent.getBoundingClientRect(); var last = events.length - 1; var hide = false; var hidden = 0; for (var i = 0; i <= last; i++) { if (!hide) { var eventBounds = events[i].getBoundingClientRect(); hide = eventBounds.bottom + eventHeight > parentBounds.bottom && i !== last; } if (hide) { var id = events[i].getAttribute('data-event'); this.hideEvents(id); hidden++; } } if (hide) { more.style.display = ''; more.innerHTML = this.$vuetify.lang.t(this.eventMoreText, hidden); } else { more.style.display = 'none'; } } }, hideEvents: function hideEvents(id) { var elements = this.$refs.events; elements.forEach(function (el) { if (el.getAttribute('data-event') === id) { el.style.display = 'none'; } }); }, getEventsMap: function getEventsMap() { var eventsMap = {}; var elements = this.$refs.events; if (!elements || !elements.forEach) { return eventsMap; } elements.forEach(function (el) { var date = el.getAttribute('data-date'); if (el.parentElement && date) { if (!(date in eventsMap)) { eventsMap[date] = { parent: el.parentElement, more: null, events: [] }; } if (el.getAttribute('data-more')) { eventsMap[date].more = el; } else { eventsMap[date].events.push(el); el.style.display = ''; } } }); return eventsMap; }, genDayEvent: function genDayEvent(_ref, index, day) { var offset = _ref.offset, event = _ref.event; var eventHeight = this.eventHeight; var eventMarginBottom = this.eventMarginBottom; var relativeOffset = (offset - index) * (eventHeight + eventMarginBottom); // 1 = margin bottom var dayIdentifier = (0, _timestamp.getDayIdentifier)(day); var start = dayIdentifier === event.startIdentifier; var end = dayIdentifier === event.endIdentifier; var scope = { event: event.input, day: day, outside: day.outside, start: start, end: end, timed: false }; return this.genEvent(event, scope, start || day.index === 0, false, { staticClass: 'v-event', class: { 'v-event-start': start, 'v-event-end': end }, style: { height: "".concat(eventHeight, "px"), top: "".concat(relativeOffset, "px"), 'margin-bottom': "".concat(eventMarginBottom, "px") }, attrs: { 'data-date': day.date, 'data-event': event.index }, key: event.index, ref: 'events', refInFor: true }); }, genTimedEvent: function genTimedEvent(_ref2, index, day) { var offset = _ref2.offset, event = _ref2.event, columnCount = _ref2.columnCount, column = _ref2.column; var dayIdentifier = (0, _timestamp.getDayIdentifier)(day); var start = event.startIdentifier >= dayIdentifier; var end = event.endIdentifier > dayIdentifier; var top = start ? day.timeToY(event.start) : 0; var bottom = end ? day.timeToY(1440) : day.timeToY(event.end); var height = Math.max(this.eventHeight, bottom - top); var left = columnCount === -1 ? offset * 5 : column * 100 / columnCount; var right = columnCount === -1 ? 0 : Math.max(0, (columnCount - column - 2) * 100 / columnCount + 10); var scope = { event: event.input, day: day, outside: day.outside, start: start, end: end, timed: true }; return this.genEvent(event, scope, true, true, { staticClass: 'v-event-timed', style: { top: "".concat(top, "px"), height: "".concat(height, "px"), left: "".concat(left, "%"), right: "".concat(right, "%") } }); }, genEvent: function genEvent(event, scope, showName, timedEvent, data) { var slot = this.$scopedSlots.event; var text = this.eventTextColorFunction(event.input); var background = this.eventColorFunction(event.input); return this.$createElement('div', this.setTextColor(text, this.setBackgroundColor(background, _objectSpread({ on: this.getDefaultMouseEventHandlers(':event', function (nativeEvent) { return _objectSpread({}, scope, { nativeEvent: nativeEvent }); }), directives: [{ name: 'ripple', value: this.eventRipple != null ? this.eventRipple : true }] }, data))), slot ? slot(scope) : showName ? [this.genName(event, timedEvent)] : undefined); }, genName: function genName(event, timedEvent) { return this.$createElement('div', { staticClass: 'pl-1', domProps: { innerHTML: this.eventNameFunction(event, timedEvent) } }); }, genMore: function genMore(day) { var _this5 = this; return this.$createElement('div', { staticClass: 'v-event-more pl-1', attrs: { 'data-date': day.date, 'data-more': 1 }, directives: [{ name: 'ripple', value: this.eventRipple != null ? this.eventRipple : true }], on: { click: function click() { return _this5.$emit('click:more', day); } }, style: { display: 'none' }, ref: 'events', refInFor: true }); }, getEventsForDay: function getEventsForDay(day) { var identifier = (0, _timestamp.getDayIdentifier)(day); return this.parsedEvents.filter(function (event) { return (0, _events.isEventOn)(event, identifier); }); }, getEventsForDayAll: function getEventsForDayAll(day) { var identifier = (0, _timestamp.getDayIdentifier)(day); return this.parsedEvents.filter(function (event) { return event.allDay && (0, _events.isEventOn)(event, identifier); }); }, getEventsForDayTimed: function getEventsForDayTimed(day) { var identifier = (0, _timestamp.getDayIdentifier)(day); return this.parsedEvents.filter(function (event) { return !event.allDay && (0, _events.isEventOn)(event, identifier); }); }, isSameColumn: function isSameColumn(a, b) { var astart = (0, _timestamp.parseTime)(a.event.start); var bstart = (0, _timestamp.parseTime)(b.event.start); var diff = astart - bstart; var abs = diff < 0 ? -diff : diff; return abs < this.eventOverlapThreshold; }, isOverlapping: function isOverlapping(a, b) { var astart = (0, _timestamp.parseTime)(a.event.start); var bstart = (0, _timestamp.parseTime)(b.event.start); if (a.offset < b.offset && bstart < astart) { var aend = astart + this.eventOverlapThreshold; var bend = (0, _timestamp.parseTime)(b.event.end); return !(astart >= bend || aend <= bstart); } return false; }, getScopedSlots: function getScopedSlots() { var _this6 = this; if (this.noEvents) { return this.$scopedSlots; } /** * Over the span of a week (for example) we want to maintain an event in the same row (for weekly and monthly views). * We keep track of those rows by indexToOffset. If the value in that array is -1, then we can place an event at that spot. * For a daily view with timed events we arrange them based on columns and offsets. If two or more events start at around the * same time (eventOverlapThreshold) they go into columns. If one event starts inside another it is indented the appropriate amount. * If one event overlaps another after those adjustments are made those events are placed in columns together instead of any defined * indents. */ var parsedEvents = this.parsedEvents; var indexToOffset = parsedEvents.map(function (event) { return -1; }); var resetOnWeekday = this.weekdays[0]; var checkReset = function checkReset(day) { if (day.weekday === resetOnWeekday) { for (var i = 0; i < indexToOffset.length; i++) { indexToOffset[i] = -1; } } }; var getOffset = function getOffset(visual, visuals) { var offset = indexToOffset[visual.event.index]; if (offset === -1) { var min = Number.MAX_SAFE_INTEGER; var max = -1; visuals.forEach(function (other) { var otherOffset = indexToOffset[other.event.index]; if (otherOffset !== -1) { min = Math.min(min, otherOffset); max = Math.max(max, otherOffset); } }); offset = min > 0 && max !== -1 ? min - 1 : max + 1; indexToOffset[visual.event.index] = offset; } return offset; }; var getVisuals = function getVisuals(events, timed) { var visuals = events.map(function (event) { return { event: event, offset: 0, columnCount: -1, column: -1 }; }); // sort events by start date/time visuals.sort(function (a, b) { return a.event.startTimestampIdentifier - b.event.startTimestampIdentifier; }); if (timed) { // timed events can be organized into columns visuals.forEach(function (visual) { if (visual.columnCount !== -1) { return; } var columns = []; visuals.forEach(function (other) { if (other.columnCount === -1 && _this6.isSameColumn(visual, other)) { columns.push(other); } }); if (columns.length > 1) { columns.forEach(function (visual, visualIndex) { visual.column = visualIndex; visual.columnCount = columns.length; }); } }); // for any not organized into columns, if they overlap another event // not in a column they are offset visuals.forEach(function (visual) { if (visual.columnCount === -1) { visuals.forEach(function (other) { var otherOffset = indexToOffset[other.event.index]; if (otherOffset !== -1 && other.event.endTimestampIdentifier <= visual.event.startTimestampIdentifier) { indexToOffset[other.event.index] = -1; } }); visual.offset = getOffset(visual, visuals); } }); // for any not organized into columns, if a previous event overlaps this event // join them into the columns visuals.forEach(function (visual) { if (visual.columnCount === -1) { var columns = [visual]; visuals.forEach(function (other) { if (other !== visual && other.columnCount === -1 && _this6.isOverlapping(visual, other)) { columns.push(other); } }); if (columns.length > 1) { columns.forEach(function (visual, visualIndex) { visual.column = visualIndex; visual.columnCount = columns.length; }); } } }); } else { visuals.forEach(function (visual) { visual.offset = getOffset(visual, visuals); }); } visuals.sort(function (a, b) { return a.column - b.column || a.offset - b.offset; }); return visuals; }; var getSlotChildren = function getSlotChildren(day, getter, mapper, timed) { checkReset(day); var events = getter(day); return events.length === 0 ? undefined : getVisuals(events, timed).map(function (visual, index) { return mapper(visual, index, day); }); }; return _objectSpread({}, this.$scopedSlots, { day: function day(_day) { var children = getSlotChildren(_day, _this6.getEventsForDay, _this6.genDayEvent, false); if (children && children.length > 0 && _this6.eventMore) { children.push(_this6.genMore(_day)); } return children; }, 'day-header': function dayHeader(day) { return getSlotChildren(day, _this6.getEventsForDayAll, _this6.genDayEvent, false); }, 'day-body': function dayBody(day) { return [_this6.$createElement('div', { staticClass: 'v-event-timed-container' }, getSlotChildren(day, _this6.getEventsForDayTimed, _this6.genTimedEvent, true))]; } }); } } }); exports.default = _default; //# sourceMappingURL=calendar-with-events.js.map