| /* |
| * Copyright (c) 2010-2019 BSI Business Systems Integration AG. |
| * All rights reserved. This program and the accompanying materials |
| * are made available under the terms of the Eclipse Public License v1.0 |
| * which accompanies this distribution, and is available at |
| * http://www.eclipse.org/legal/epl-v10.html |
| * |
| * Contributors: |
| * BSI Business Systems Integration AG - initial API and implementation |
| */ |
| import {CalendarComponent, CalendarLayout, CalendarListComponent, DateRange, dates, GroupBox, HtmlComponent, KeyStrokeContext, menus, objects, scout, scrollbars, strings, Widget} from '../index'; |
| import $ from 'jquery'; |
| |
| export default class Calendar extends Widget { |
| |
| constructor() { |
| super(); |
| |
| this.monthViewNumberOfWeeks = 6; |
| this.numberOfHourDivisions = this.getConfiguredNumberOfHourDivisions(); |
| this.heightPerDivision = this.getConfiguredHeightPerDivision(); |
| this.startHour = this.getConfiguredStartHour(); |
| this.heightPerHour = this.numberOfHourDivisions * this.heightPerDivision; |
| this.heightPerDay = 24 * this.heightPerHour; |
| this.spaceBeforeScrollTop = 15; |
| this.workDayIndices = [1, 2, 3, 4, 5]; // Workdays: Mon-Fri (Week starts at Sun in JS) |
| this.components = []; |
| this.displayMode; |
| this.displayCondensed = false; |
| this.loadInProgress = false; |
| this.selectedDate = null; |
| this.showDisplayModeSelection = true; |
| this.title = null; |
| this.useOverflowCells = true; |
| this.viewRange = null; |
| this.calendarToggleListWidth = 270; |
| this.calendarToggleYearWidth = 215; |
| |
| // main elements |
| this.$container = null; |
| this.$header = null; |
| this.$range = null; |
| this.$commands = null; |
| this.$grids = null; |
| this.$grid = null; |
| this.$topGrid = null; |
| this.$list = null; |
| this.$progress = null; |
| |
| // additional modes; should be stored in model |
| this._showYearPanel = false; |
| this._showListPanel = false; |
| |
| /** |
| * The narrow view range is different from the regular view range. |
| * It contains only dates that exactly match the requested dates, |
| * the regular view range contains also dates from the first and |
| * next month. The exact range is not sent to the server. |
| */ |
| this._exactRange = null; |
| |
| /** |
| * When the list panel is shown, this list contains the scout.CalenderListComponent |
| * items visible on the list. |
| */ |
| this._listComponents = []; |
| this.menuInjectionTarget = null; |
| this._menuInjectionTargetMenusChangedHandler = null; |
| |
| this._addWidgetProperties(['components', 'menus', 'selectedComponent']); |
| } |
| |
| init(model, session, register) { |
| super.init(model, session, register); |
| } |
| |
| /** |
| * Enum providing display-modes for calender-like components like calendar and planner. |
| * @see ICalendarDisplayMode.java |
| */ |
| static DisplayMode = { |
| DAY: 1, |
| WEEK: 2, |
| MONTH: 3, |
| WORK_WEEK: 4 |
| }; |
| |
| /** |
| * Used as a multiplier in date calculations back- and forward (in time). |
| */ |
| static Direction = { |
| BACKWARD: -1, |
| FORWARD: 1 |
| }; |
| |
| getConfiguredNumberOfHourDivisions() { |
| return 2; |
| } |
| |
| getConfiguredHeightPerDivision() { |
| return 30; |
| } |
| |
| getConfiguredStartHour() { |
| return 6; |
| } |
| |
| _isDay() { |
| return this.displayMode === Calendar.DisplayMode.DAY; |
| } |
| |
| _isWeek() { |
| return this.displayMode === Calendar.DisplayMode.WEEK; |
| } |
| |
| _isMonth() { |
| return this.displayMode === Calendar.DisplayMode.MONTH; |
| } |
| |
| _isWorkWeek() { |
| return this.displayMode === Calendar.DisplayMode.WORK_WEEK; |
| } |
| |
| /** |
| * @override |
| */ |
| _createKeyStrokeContext() { |
| return new KeyStrokeContext(); |
| } |
| |
| _init(model) { |
| super._init(model); |
| this._yearPanel = scout.create('YearPanel', { |
| parent: this |
| }); |
| this._yearPanel.on('dateSelect', this._onYearPanelDateSelect.bind(this)); |
| this.modesMenu = scout.create('CalendarModesMenu', { |
| parent: this, |
| visible: false, |
| displayMode: this.displayMode |
| }); |
| this._setSelectedDate(model.selectedDate); |
| this._setDisplayMode(model.displayMode); |
| this._setMenuInjectionTarget(model.menuInjectionTarget); |
| this._exactRange = this._calcExactRange(); |
| this._yearPanel.setViewRange(this._exactRange); |
| this.viewRange = this._calcViewRange(); |
| } |
| |
| setSelectedDate(date) { |
| this.setProperty('selectedDate', date); |
| } |
| |
| _setSelectedDate(date) { |
| date = dates.ensure(date); |
| this._setProperty('selectedDate', date); |
| this._yearPanel.selectDate(this.selectedDate); |
| } |
| |
| setDisplayMode(displayMode) { |
| if (objects.equals(this.displayMode, displayMode)) { |
| return; |
| } |
| var oldDisplayMode = this.displayMode; |
| this._setDisplayMode(displayMode); |
| if (this.rendered) { |
| this._renderDisplayMode(oldDisplayMode); |
| } |
| } |
| |
| _setDisplayMode(displayMode) { |
| this._setProperty('displayMode', displayMode); |
| this._yearPanel.setDisplayMode(this.displayMode); |
| this.modesMenu.setDisplayMode(displayMode); |
| if (this._isWorkWeek()) { |
| // change date if selectedDate is on a weekend |
| var p = this._dateParts(this.selectedDate, true); |
| if (p.day > 4) { |
| this.setSelectedDate(new Date(p.year, p.month, p.date - p.day + 4)); |
| } |
| } |
| } |
| |
| _renderDisplayMode(oldDisplayMode) { |
| if (this.rendering) { |
| // only do it on property changes |
| return; |
| } |
| this._updateModel(false, true); |
| |
| // only render if components have another layout |
| if (oldDisplayMode === Calendar.DisplayMode.MONTH || this.displayMode === Calendar.DisplayMode.MONTH) { |
| this._renderComponents(); |
| this.needsScrollToStartHour = true; |
| } |
| } |
| |
| _setViewRange(viewRange) { |
| viewRange = DateRange.ensure(viewRange); |
| this._setProperty('viewRange', viewRange); |
| } |
| |
| _setMenus(menus) { |
| if (this._checkMenuInjectionTarget(this.menuInjectionTarget)) { |
| var originalMenus = this._removeInjectedMenus(this.menuInjectionTarget, this.menus); |
| this.menuInjectionTarget.setMenus(menus.concat(originalMenus)); |
| } |
| this._setProperty('menus', menus); |
| } |
| |
| _setMenuInjectionTarget(menuInjectionTarget) { |
| if (objects.isString(menuInjectionTarget)) { |
| menuInjectionTarget = scout.widget(menuInjectionTarget); |
| } |
| // Remove injected menus and installed listener from old injection target |
| if (this._checkMenuInjectionTarget(this.menuInjectionTarget)) { |
| menuInjectionTarget.off('propertyChange:menus', this._menuInjectionTargetMenusChangedHandler); |
| var originalMenus = this._removeInjectedMenus(this.menuInjectionTarget, this.menus); |
| this.menuInjectionTarget.setMenus(originalMenus); |
| } |
| if (this._checkMenuInjectionTarget(menuInjectionTarget)) { |
| menuInjectionTarget.setMenus(this.menus.concat(menuInjectionTarget.menus)); |
| // Listen for menu changes on the injection target. Re inject menus into target if the menus have been altered. |
| this._menuInjectionTargetMenusChangedHandler = menuInjectionTarget.on('propertyChange:menus', |
| function(evt) { |
| if (this.menuInjectionTarget.menus.some(function(element) { |
| return this.menus.includes(element); |
| }.bind(this))) { |
| // Menus have already been injected => Do nothing |
| return; |
| } |
| this.menuInjectionTarget.setMenus(this.menus.concat(this.menuInjectionTarget.menus)); |
| }.bind(this) |
| ); |
| } |
| this._setProperty('menuInjectionTarget', menuInjectionTarget); |
| } |
| |
| _checkMenuInjectionTarget(menuInjectionTarget) { |
| return menuInjectionTarget instanceof GroupBox; |
| } |
| |
| _removeInjectedMenus(menuInjectionTarget, injectedMenus) { |
| return menuInjectionTarget.menus.filter(function(element) { |
| return !injectedMenus.includes(element); |
| }); |
| } |
| |
| _render() { |
| this.$container = this.$parent.appendDiv('calendar'); |
| |
| var layout = new CalendarLayout(this); |
| this.htmlComp = HtmlComponent.install(this.$container, this.session); |
| this.htmlComp.setLayout(layout); |
| |
| // main elements |
| this.$header = this.$container.appendDiv('calendar-header'); |
| this.$headerRow1 = this.$header.appendDiv('calendar-header-row first'); |
| this.$headerRow2 = this.$header.appendDiv('calendar-header-row last'); |
| this._yearPanel.render(); |
| |
| this.$grids = this.$container.appendDiv('calendar-grids'); |
| this.$topGrid = this.$grids.appendDiv('calendar-top-grid'); |
| this.$grid = this.$grids.appendDiv('calendar-grid'); |
| |
| this.$list = this.$container.appendDiv('calendar-list-container').appendDiv('calendar-list'); |
| this.$listTitle = this.$list.appendDiv('calendar-list-title'); |
| |
| // header contains range, title and commands. On small screens title will be moved to headerRow2 |
| this.$range = this.$headerRow1.appendDiv('calendar-range'); |
| this.$range.appendDiv('calendar-previous').click(this._onPreviousClick.bind(this)); |
| this.$range.appendDiv('calendar-today', this.session.text('ui.CalendarToday')).click(this._onTodayClick.bind(this)); |
| this.$range.appendDiv('calendar-next').click(this._onNextClick.bind(this)); |
| |
| // title |
| this.$title = this.$headerRow1.appendDiv('calendar-title'); |
| this.$select = this.$title.appendDiv('calendar-select'); |
| this.$progress = this.$title.appendDiv('busyindicator-label'); |
| |
| // commands |
| this.$commands = this.$headerRow1.appendDiv('calendar-commands'); |
| this.$commands.appendDiv('calendar-mode first', this.session.text('ui.CalendarDay')).attr('data-mode', Calendar.DisplayMode.DAY).click(this._onDisplayModeClick.bind(this)); |
| this.$commands.appendDiv('calendar-mode', this.session.text('ui.CalendarWorkWeek')).attr('data-mode', Calendar.DisplayMode.WORK_WEEK).click(this._onDisplayModeClick.bind(this)); |
| this.$commands.appendDiv('calendar-mode', this.session.text('ui.CalendarWeek')).attr('data-mode', Calendar.DisplayMode.WEEK).click(this._onDisplayModeClick.bind(this)); |
| this.$commands.appendDiv('calendar-mode last', this.session.text('ui.CalendarMonth')).attr('data-mode', Calendar.DisplayMode.MONTH).click(this._onDisplayModeClick.bind(this)); |
| this.modesMenu.render(this.$commands); |
| this.$commands.appendDiv('calendar-toggle-year').click(this._onYearClick.bind(this)); |
| this.$commands.appendDiv('calendar-toggle-list').click(this._onListClick.bind(this)); |
| |
| // Append the top grid (day/week views) |
| var $weekHeader = this.$topGrid.appendDiv('calendar-week-header'); |
| $weekHeader.appendDiv('calendar-week-name'); |
| for (var dayTop = 0; dayTop < 7; dayTop++) { |
| $weekHeader.appendDiv('calendar-day-name') |
| .data('day', dayTop); |
| } |
| |
| this.$topGrid.appendDiv('calendar-week-task').attr('data-axis-name', this.session.text('ui.CalendarDay')); |
| var $weekTopGridDays = this.$topGrid.appendDiv('calendar-week-allday-container'); |
| $weekTopGridDays.appendDiv('calendar-week-name'); |
| |
| var dayContextMenuCallback = this._onDayContextMenu.bind(this); |
| for (var dayBottom = 0; dayBottom < 7; dayBottom++) { |
| $weekTopGridDays.appendDiv('calendar-day') |
| .addClass('calendar-scrollable-components') |
| .data('day', dayBottom) |
| .on('contextmenu', dayContextMenuCallback); |
| } |
| |
| for (var w = 1; w < 7; w++) { |
| var $w = this.$grid.appendDiv('calendar-week'); |
| for (var d = 0; d < 8; d++) { |
| var $d = $w.appendDiv(); |
| if (w > 0 && d === 0) { |
| $d.addClass('calendar-week-name'); |
| } else if (w > 0 && d > 0) { |
| $d.addClass('calendar-day') |
| .data('day', d) |
| .data('week', w) |
| .on('contextmenu', dayContextMenuCallback); |
| } |
| } |
| } |
| |
| // click event on all day and children elements |
| var mousedownCallbackWithTime = this._onDayMouseDown.bind(this, true); |
| this.$grid.find('.calendar-day').on('mousedown', mousedownCallbackWithTime); |
| var mousedownCallback = this._onDayMouseDown.bind(this, false); |
| this.$topGrid.find('.calendar-day').on('mousedown', mousedownCallback); |
| |
| this._updateScreen(false, false); |
| } |
| |
| _renderProperties() { |
| super._renderProperties(); |
| this._renderComponents(); |
| this._renderSelectedComponent(); |
| this._renderLoadInProgress(); |
| this._renderDisplayMode(); |
| } |
| |
| _renderComponents() { |
| this.components.sort(this._sortFromTo); |
| this.components.forEach(component => component.remove()); |
| this.components.forEach(component => component.render()); |
| this._arrangeComponents(); |
| this._updateListPanel(); |
| } |
| |
| _renderSelectedComponent() { |
| if (this.selectedComponent) { |
| this.selectedComponent.setSelected(true); |
| } |
| } |
| |
| _renderLoadInProgress() { |
| this.$progress.setVisible(this.loadInProgress); |
| } |
| |
| updateScrollPosition(animate) { |
| if (!this.rendered) { |
| // Execute delayed because table may be not layouted yet |
| this.session.layoutValidator.schedulePostValidateFunction(this._updateScrollPosition.bind(this, true, animate)); |
| } else { |
| this._updateScrollPosition(true, animate); |
| } |
| } |
| |
| _updateScrollPosition(scrollToInitialTime, animate) { |
| if (this._isMonth()) { |
| this._scrollToSelectedComponent(animate); |
| } else { |
| if (this.selectedComponent) { |
| if (this.selectedComponent.fullDay) { |
| this._scrollToSelectedComponent(animate); // scroll top-grid to selected component |
| if (scrollToInitialTime) { |
| this._scrollToInitialTime(animate); // scroll grid to initial time |
| } |
| } else { |
| var date = dates.parseJsonDate(this.selectedComponent.fromDate, this.selectedComponent); |
| var topPercent = this._dayPosition(date.getHours(), date.getMinutes()) / 100; |
| var topPos = this.heightPerDay * topPercent; |
| scrollbars.scrollTop(this.$grid, topPos - this.spaceBeforeScrollTop, { |
| animate: animate |
| }); |
| } |
| } else if (scrollToInitialTime) { |
| this._scrollToInitialTime(animate); |
| } |
| } |
| } |
| |
| _scrollToSelectedComponent(animate) { |
| if (this.selectedComponent && this.selectedComponent._$parts[0] && this.selectedComponent._$parts[0].parent() && this.selectedComponent._$parts[0].isVisible()) { |
| scrollbars.scrollTo(this.selectedComponent._$parts[0].parent(), this.selectedComponent._$parts[0], { |
| animate: animate |
| }); |
| } |
| } |
| |
| _scrollToInitialTime(animate) { |
| this.needsScrollToStartHour = false; |
| if (!this._isMonth()) { |
| if (this.selectedComponent && !this.selectedComponent.fullDay) { |
| var date = dates.parseJsonDate(this.selectedComponent.fromDate); |
| var topPercent = this._dayPosition(date.getHours(), date.getMinutes()) / 100; |
| var topPos = this.heightPerDay * topPercent; |
| scrollbars.scrollTop(this.$grid, topPos - this.spaceBeforeScrollTop, { |
| animate: animate |
| }); |
| } else { |
| var scrollTargetTop = this.heightPerHour * this.startHour; |
| scrollbars.scrollTop(this.$grid, scrollTargetTop - this.spaceBeforeScrollTop, { |
| animate: animate |
| }); |
| } |
| } |
| } |
| |
| /* -- basics, events -------------------------------------------- */ |
| |
| _onPreviousClick(event) { |
| this._navigateDate(Calendar.Direction.BACKWARD); |
| } |
| |
| _onNextClick(event) { |
| this._navigateDate(Calendar.Direction.FORWARD); |
| } |
| |
| _dateParts(date, modulo) { |
| var parts = { |
| year: date.getFullYear(), |
| month: date.getMonth(), |
| date: date.getDate(), |
| day: date.getDay() |
| }; |
| if (modulo) { |
| parts.day = (date.getDay() + 6) % 7; |
| } |
| return parts; |
| } |
| |
| _navigateDate(direction) { |
| this.selectedDate = this._calcSelectedDate(direction); |
| this._updateModel(true, false); |
| } |
| |
| _calcSelectedDate(direction) { |
| var p = this._dateParts(this.selectedDate), |
| dayOperand = direction, |
| weekOperand = direction * 7, |
| monthOperand = direction; |
| |
| if (this._isDay()) { |
| return new Date(p.year, p.month, p.date + dayOperand); |
| } else if (this._isWeek() || this._isWorkWeek()) { |
| return new Date(p.year, p.month, p.date + weekOperand); |
| } else if (this._isMonth()) { |
| return dates.shift(this.selectedDate, 0, monthOperand, 0); |
| } |
| } |
| |
| _updateModel(updateTopGrid, animate) { |
| this._exactRange = this._calcExactRange(); |
| this._yearPanel.setViewRange(this._exactRange); |
| this.viewRange = this._calcViewRange(); |
| this.trigger('modelChange'); |
| this._updateScreen(updateTopGrid, animate); |
| } |
| |
| /** |
| * Calculates exact date range of displayed components based on selected-date. |
| */ |
| _calcExactRange() { |
| var from, to, |
| p = this._dateParts(this.selectedDate, true); |
| |
| if (this._isDay()) { |
| from = new Date(p.year, p.month, p.date); |
| to = new Date(p.year, p.month, p.date + 1); |
| } else if (this._isWeek()) { |
| from = new Date(p.year, p.month, p.date - p.day); |
| to = new Date(p.year, p.month, p.date - p.day + 6); |
| } else if (this._isMonth()) { |
| from = new Date(p.year, p.month, 1); |
| to = new Date(p.year, p.month + 1, 0); |
| } else if (this._isWorkWeek()) { |
| from = new Date(p.year, p.month, p.date - p.day); |
| to = new Date(p.year, p.month, p.date - p.day + 4); |
| } else { |
| throw new Error('invalid value for displayMode'); |
| } |
| |
| return new DateRange(from, to); |
| } |
| |
| /** |
| * Calculates the view-range, which is what the user sees in the UI. |
| * The view-range is wider than the exact-range in the monthly mode, |
| * as it contains also dates from the previous and next month. |
| */ |
| _calcViewRange() { |
| var viewFrom = calcViewFromDate(this._exactRange.from), |
| viewTo = calcViewToDate(viewFrom); |
| return new DateRange(viewFrom, viewTo); |
| |
| function calcViewFromDate(fromDate) { |
| var i, tmpDate = new Date(fromDate.valueOf()); |
| for (i = 0; i < 42; i++) { |
| tmpDate.setDate(tmpDate.getDate() - 1); |
| if ((tmpDate.getDay() === 1) && tmpDate.getMonth() !== fromDate.getMonth()) { |
| return tmpDate; |
| } |
| } |
| throw new Error('failed to calc viewFrom date'); |
| } |
| |
| function calcViewToDate(fromDate) { |
| var i, tmpDate = new Date(fromDate.valueOf()); |
| for (i = 0; i < 42; i++) { |
| tmpDate.setDate(tmpDate.getDate() + 1); |
| } |
| return tmpDate; |
| } |
| } |
| |
| _onTodayClick(event) { |
| this.selectedDate = new Date(); |
| this._updateModel(true, false); |
| } |
| |
| _onDisplayModeClick(event) { |
| var displayMode = $(event.target).data('mode'); |
| this.setDisplayMode(displayMode); |
| } |
| |
| _onYearClick(event) { |
| this._showYearPanel = !this._showYearPanel; |
| this._updateScreen(true, true); |
| } |
| |
| _onListClick(event) { |
| this._showListPanel = !this._showListPanel; |
| this._updateScreen(false, true); |
| } |
| |
| _onDayMouseDown(withTime, event) { |
| var selectedDate = new Date($(event.delegateTarget).data('date')); |
| if (withTime && (this._isDay() || this._isWeek() || this._isWorkWeek())) { |
| var seconds = Math.floor(event.originalEvent.layerY / this.heightPerDivision) / this.numberOfHourDivisions * 60 * 60; |
| if (seconds < 60 * 60 * 24) { |
| selectedDate.setSeconds(seconds); |
| } |
| } |
| this._setSelection(selectedDate, null, false); |
| } |
| |
| /** |
| * @param selectedDate |
| * @param selectedComponent may be null when a day is selected |
| */ |
| _setSelection(selectedDate, selectedComponent, updateScrollPosition) { |
| var changed = false; |
| |
| // selected date |
| if (dates.compareDays(this.selectedDate, selectedDate) !== 0) { |
| changed = true; |
| $('.calendar-day', this.$container).each(function(index, element) { |
| var $day = $(element), |
| date = $day.data('date'); |
| if (!date || dates.compareDays(date, this.selectedDate) === 0) { |
| $day.select(false); // de-select old date |
| } else if (dates.compareDays(date, selectedDate) === 0) { |
| $day.select(true); // select new date |
| } |
| }.bind(this)); |
| this.selectedDate = selectedDate; |
| } |
| |
| // selected component / part (may be null) |
| if (this.selectedComponent !== selectedComponent) { |
| changed = true; |
| if (this.selectedComponent) { |
| this.selectedComponent.setSelected(false); |
| } |
| if (selectedComponent) { |
| selectedComponent.setSelected(true); |
| } |
| this.selectedComponent = selectedComponent; |
| } |
| |
| if (changed) { |
| this.trigger('selectionChange'); |
| this._updateListPanel(); |
| if (updateScrollPosition) { |
| this._updateScrollPosition(false, true); |
| } |
| } |
| |
| if (this._showYearPanel) { |
| this._yearPanel.selectDate(this.selectedDate); |
| } |
| } |
| |
| /* -- set display mode and range ------------------------------------- */ |
| |
| _updateScreen(updateTopGrid, animate) { |
| $.log.isInfoEnabled() && $.log.info('(Calendar#_updateScreen)'); |
| |
| // select mode |
| $('.calendar-mode', this.$commands).select(false); |
| $('[data-mode="' + this.displayMode + '"]', this.$commands).select(true); |
| |
| // remove selected day |
| $('.selected', this.$grid).select(false); |
| |
| // layout grid |
| this.layoutLabel(); |
| this.layoutSize(animate); |
| this.layoutAxis(); |
| |
| if (this._showYearPanel) { |
| this._yearPanel.selectDate(this.selectedDate); |
| } |
| |
| this._updateListPanel(); |
| this._updateScrollbars(this.$grid, animate); |
| if (updateTopGrid && !this._isMonth()) { |
| this._updateTopGrid(); |
| } |
| } |
| |
| layoutSize(animate) { |
| // reset animation sizes |
| $('div', this.$container).removeData(['new-width', 'new-height']); |
| |
| if (this._isMonth()) { |
| this.$topGrid.addClass('calendar-top-grid-short'); |
| this.$grid.removeClass('calendar-grid-short'); |
| } else { |
| this.$topGrid.removeClass('calendar-top-grid-short'); |
| this.$grid.addClass('calendar-grid-short'); |
| } |
| |
| // init vars (Selected: Day) |
| var $selected = $('.selected', this.$grid), |
| $topSelected = $('.selected', this.$topGrid), |
| containerW = this.$container.width(), |
| gridH = this.$grid.height(), |
| gridW = containerW - 20; // containerW - @root-group-box-padding-right |
| |
| // show or hide year |
| $('.calendar-toggle-year', this.$commands).select(this._showYearPanel); |
| if (this._showYearPanel) { |
| this._yearPanel.$container.data('new-width', this.calendarToggleYearWidth); |
| gridW -= this.calendarToggleYearWidth; |
| containerW -= this.calendarToggleYearWidth; |
| } else { |
| this._yearPanel.$container.data('new-width', 0); |
| } |
| |
| // show or hide work list |
| $('.calendar-toggle-list', this.$commands).select(this._showListPanel); |
| if (this._showListPanel) { |
| this.$list.parent().data('new-width', this.calendarToggleListWidth); |
| gridW -= this.calendarToggleListWidth; |
| containerW -= this.calendarToggleListWidth; |
| } else { |
| this.$list.parent().data('new-width', 0); |
| } |
| |
| // basic grid width |
| this.$grids.data('new-width', containerW); |
| |
| var $weeksToHide = $(); // Empty |
| var $allWeeks = $('.calendar-week', this.$grid); |
| // layout week |
| |
| if (this._isDay() || this._isWeek() || this._isWorkWeek()) { |
| $allWeeks.removeClass('calendar-week-noborder'); |
| // Parent of selected (Day) is a week |
| var selectedWeek = $selected.parent(); |
| $weeksToHide = $allWeeks.not(selectedWeek); // Hide all (other) weeks delayed, height will animate to zero |
| $weeksToHide.data('new-height', 0); |
| $weeksToHide.removeClass('invisible'); |
| selectedWeek.data('new-height', this.heightPerDay); |
| selectedWeek.addClass('calendar-week-noborder'); |
| selectedWeek.removeClass('hidden invisible'); // Current week must be shown |
| $('.calendar-day', selectedWeek).data('new-height', this.heightPerDay); |
| // Hide the week-number in the lower grid |
| $('.calendar-week-name', this.$grid).addClass('invisible'); // Keep the reserved space |
| $('.calendar-week-allday-container', this.$topGrid).removeClass('hidden'); |
| $('.calendar-week-task', this.$topGrid).removeClass('hidden'); |
| } else { |
| // Month |
| var newHeightMonth = gridH / this.monthViewNumberOfWeeks; |
| $allWeeks.removeClass('calendar-week-noborder invisible hidden'); |
| $allWeeks.eq(0).addClass('calendar-week-noborder'); |
| $allWeeks.data('new-height', newHeightMonth); |
| $('.calendar-day', this.$grid).data('new-height', newHeightMonth); |
| var $allDays = $('.calendar-week-name', this.$grid); |
| $allDays.removeClass('hidden invisible'); |
| $allDays.data('new-height', newHeightMonth); |
| $('.calendar-week-allday-container', this.$topGrid).addClass('hidden'); |
| $('.calendar-week-task', this.$topGrid).addClass('hidden'); |
| } |
| |
| // layout days |
| var contentW = gridW - 45; // gridW - @calendar-week-name-width |
| if (this._isDay()) { |
| $('.calendar-day-name, .calendar-day', this.$topGrid).data('new-width', 0); |
| $('.calendar-day', this.$grid).data('new-width', 0); |
| $('.calendar-day-name:nth-child(' + ($topSelected.index() + 1) + ')', this.$topGrid) |
| .data('new-width', contentW); |
| $('.calendar-day:nth-child(' + ($topSelected.index() + 1) + ')', this.$topGrid).data('new-width', contentW); |
| $('.calendar-day:nth-child(' + ($selected.index() + 1) + ')', this.$grid).data('new-width', contentW); |
| } else if (this._isWorkWeek()) { |
| this.$topGrid.find('.calendar-day-name').data('new-width', 0); |
| this.$grids.find('.calendar-day').data('new-width', 0); |
| var newWidthWorkWeek = Math.round(contentW / this.workDayIndices.length); |
| $('.calendar-day-name:nth-child(-n+6), ' + |
| '.calendar-day:nth-child(-n+6)', this.$topGrid) |
| .data('new-width', newWidthWorkWeek); |
| $('.calendar-day:nth-child(-n+6)', this.$grid) |
| .data('new-width', newWidthWorkWeek); |
| } else if (this._isMonth() || this._isWeek()) { |
| var newWidthMonthOrWeek = Math.round(contentW / 7); |
| this.$grids.find('.calendar-day').data('new-width', newWidthMonthOrWeek); |
| this.$topGrid.find('.calendar-day-name').data('new-width', newWidthMonthOrWeek); |
| } |
| |
| // layout components |
| if (this._isMonth()) { |
| $('.component-month', this.$grid).each(function() { |
| var $comp = $(this), |
| $day = $comp.closest('.calendar-day'); |
| $comp.toggleClass('compact', $day.data('new-width') < CalendarComponent.MONTH_COMPACT_THRESHOLD); |
| }); |
| } |
| |
| var afterLayoutCallback = this._afterLayout.bind(this); |
| |
| // animate old to new sizes |
| $('div', this.$container).each(function() { |
| var $e = $(this), |
| w = $e.data('new-width'), |
| h = $e.data('new-height'); |
| $e.stop(false, true); |
| |
| if (w !== undefined && w !== $e.outerWidth()) { |
| if (animate) { |
| $e.animateAVCSD('width', w, afterLayoutCallback.bind(this, $e, animate)); |
| } else { |
| $e.css('width', w); |
| afterLayoutCallback($e, animate); |
| } |
| } |
| if (h !== undefined && h !== $e.outerHeight()) { |
| if (h > 0) { |
| $e.removeClass('hidden'); |
| } |
| if (animate) { |
| $e.animateAVCSD('height', h, function() { |
| if (h === 0) { |
| $e.addClass('hidden'); |
| } |
| afterLayoutCallback($e, animate); |
| }); |
| } else { |
| $e.css('height', h); |
| if (h === 0) { |
| $e.addClass('hidden'); |
| } |
| afterLayoutCallback($e, animate); |
| } |
| } |
| }); |
| } |
| |
| _afterLayout($parent, animate) { |
| this._updateScrollbars($parent, animate); |
| this._updateWeekdayNames(); |
| } |
| |
| _updateWeekdayNames() { |
| // set day-name (based on width of shown column) |
| var weekdayWidth = this.$topGrid.width(), |
| weekdays; |
| |
| if (this._isDay()) { |
| weekdayWidth /= 1; |
| } else if (this._isWorkWeek()) { |
| weekdayWidth /= this.workDayIndices.length; |
| } else if (this._isWeek()) { |
| weekdayWidth /= 7; |
| } else if (this._isMonth()) { |
| weekdayWidth /= 7; |
| } |
| |
| if (weekdayWidth > 90) { |
| weekdays = this.session.locale.dateFormat.symbols.weekdaysOrdered; |
| } else { |
| weekdays = this.session.locale.dateFormat.symbols.weekdaysShortOrdered; |
| } |
| |
| $('.calendar-day-name', this.$topGrid).each(function(index) { |
| $(this).attr('data-day-name', weekdays[index]); |
| }); |
| } |
| |
| _updateScrollbars($parent, animate) { |
| var $scrollables = $('.calendar-scrollable-components', $parent); |
| $scrollables.each(function() { |
| var $scrollable = $(this); |
| scrollbars.update($scrollable, true); |
| }); |
| this.updateScrollPosition(animate); |
| } |
| |
| _updateTopGrid() { |
| $('.calendar-component', this.$topGrid).each((index, part) => { |
| let component = $(part).data('component'); |
| if (component) { |
| component.remove(); |
| } |
| }); |
| var allDayComponents = this.components.filter(component => component.fullDay); |
| // first remove all components and add them from scratch |
| allDayComponents.forEach(component => component.remove()); |
| allDayComponents.forEach(component => component.render()); |
| this._updateScrollbars(this.$topGrid, false); |
| } |
| |
| layoutYearPanel() { |
| if (this._showYearPanel) { |
| scrollbars.update(this._yearPanel.$yearList); |
| this._yearPanel._scrollYear(); |
| } |
| } |
| |
| layoutLabel() { |
| var text, $dates, $topGridDates, |
| exFrom = this._exactRange.from, |
| exTo = this._exactRange.to; |
| |
| // set range text |
| if (this._isDay()) { |
| text = this._format(exFrom, 'd. MMMM yyyy'); |
| } else if (this._isWorkWeek() || this._isWeek()) { |
| var toText = this.session.text('ui.to'); |
| if (exFrom.getMonth() === exTo.getMonth()) { |
| text = strings.join(' ', this._format(exFrom, 'd.'), toText, this._format(exTo, 'd. MMMM yyyy')); |
| } else if (exFrom.getFullYear() === exTo.getFullYear()) { |
| text = strings.join(' ', this._format(exFrom, 'd. MMMM'), toText, this._format(exTo, 'd. MMMM yyyy')); |
| } else { |
| text = strings.join(' ', this._format(exFrom, 'd. MMMM yyyy'), toText, this._format(exTo, 'd. MMMM yyyy')); |
| } |
| |
| } else if (this._isMonth()) { |
| text = this._format(exFrom, 'MMMM yyyy'); |
| } |
| this.$select.text(text); |
| |
| // prepare to set all day date and mark selected one |
| $dates = $('.calendar-day', this.$grid); |
| |
| var w, d, cssClass, |
| currentMonth = this._exactRange.from.getMonth(), |
| date = new Date(this.viewRange.from.valueOf()); |
| |
| // Main grid: loop all days and set value and class |
| for (w = 0; w < this.monthViewNumberOfWeeks; w++) { |
| for (d = 0; d < 7; d++) { |
| cssClass = ''; |
| if (this.workDayIndices.indexOf(date.getDay()) === -1) { |
| cssClass = date.getMonth() !== currentMonth ? ' weekend-out' : ' weekend'; |
| } else { |
| cssClass = date.getMonth() !== currentMonth ? ' out' : ''; |
| } |
| if (dates.isSameDay(date, new Date())) { |
| cssClass += ' now'; |
| } |
| if (dates.isSameDay(date, this.selectedDate)) { |
| cssClass += ' selected'; |
| } |
| if (!this._isMonth()) { |
| cssClass += ' calendar-no-label'; // If we're not in the month view, number is shown on top |
| } |
| |
| // adjust position for days between 10 and 19 (because "1" is narrower than "0" or "2") |
| if (date.getDate() > 9 && date.getDate() < 20) { |
| cssClass += ' center-nice'; |
| } |
| |
| text = this._format(date, 'dd'); |
| $dates.eq(w * 7 + d) |
| .removeClass('weekend-out weekend out selected now calendar-no-label') |
| .addClass(cssClass) |
| .attr('data-day-name', text) |
| .data('date', new Date(date.valueOf())); |
| date.setDate(date.getDate() + 1); |
| } |
| } |
| |
| // Top grid: loop days of one calendar week and set value and class |
| if (!this._isMonth()) { |
| $topGridDates = $('.calendar-day', this.$topGrid); |
| // From the view range, find the week we are in |
| var exactDate = new Date(this._exactRange.from.valueOf()); |
| |
| // Find first day of week. |
| date = dates.firstDayOfWeek(exactDate, 1); |
| |
| for (d = 0; d < 7; d++) { |
| cssClass = ''; |
| if (this.workDayIndices.indexOf(date.getDay()) === -1) { |
| cssClass = date.getMonth() !== currentMonth ? ' weekend-out' : ' weekend'; |
| } else { |
| cssClass = date.getMonth() !== currentMonth ? ' out' : ''; |
| } |
| if (dates.isSameDay(date, new Date())) { |
| cssClass += ' now'; |
| } |
| if (dates.isSameDay(date, this.selectedDate)) { |
| cssClass += ' selected'; |
| } |
| |
| text = this._format(date, 'dd'); |
| $topGridDates.eq(d) |
| .removeClass('weekend-out weekend out selected now') |
| .addClass(cssClass) |
| .attr('data-day-name', text) |
| .data('date', new Date(date.valueOf())); |
| |
| date.setDate(date.getDate() + 1); |
| } |
| } |
| |
| } |
| |
| layoutAxis() { |
| var $e; |
| |
| // remove old axis |
| $('.calendar-week-axis, .calendar-week-task', this.$grid).remove(); |
| |
| // set weekname |
| var session = this.session; |
| |
| $('.calendar-week-name', this.$container).each(function(index) { |
| if (index > 0) { |
| $e = $(this); |
| $e.text(session.text('ui.CW', dates.weekInYear($e.next().data('date')))); |
| } |
| }); |
| |
| // day schedule |
| if (!this._isMonth()) { |
| // Parent of selected day: Week |
| // var $parent = $selected.parent(); |
| var $parent = $('.calendar-week', this.$grid); |
| |
| for (var h = 0; h < 24; h++) { // Render lines for each hour |
| var paddedHour = ('00' + h).slice(-2); |
| var topPos = h * this.heightPerHour; |
| $parent.appendDiv('calendar-week-axis hour' + (h === 0 ? ' first' : '')).attr('data-axis-name', paddedHour + ':00').css('top', topPos + 'px'); |
| |
| for (var m = 1; m < this.numberOfHourDivisions; m++) { // First one rendered above. Start at the next |
| topPos += this.heightPerDivision; |
| $parent.appendDiv('calendar-week-axis').attr('data-axis-name', '').css('top', topPos + 'px'); |
| } |
| } |
| } |
| } |
| |
| /* -- year events ---------------------------------------- */ |
| |
| _onYearPanelDateSelect(event) { |
| this.selectedDate = event.date; |
| this._updateModel(true, false); |
| } |
| |
| _updateListPanel() { |
| if (this._showListPanel) { |
| |
| // remove old list-components |
| this._listComponents.forEach(function(listComponent) { |
| listComponent.remove(); |
| }); |
| |
| this._listComponents = []; |
| this._renderListPanel(); |
| } |
| } |
| |
| _remove() { |
| var $days = $('.calendar-day', this.$grid); |
| |
| // Ensure that scrollbars are unregistered |
| for (var k = 0; k < $days.length; k++) { |
| var $day = $days.eq(k); |
| var $scrollableContainer = $day.children('.calendar-scrollable-components'); |
| |
| if ($scrollableContainer.length > 0) { |
| scrollbars.uninstall($scrollableContainer, this.session); |
| $scrollableContainer.remove(); |
| } |
| } |
| |
| super._remove(); |
| } |
| |
| /** |
| * Renders the panel on the left, showing all components of the selected date. |
| */ |
| _renderListPanel() { |
| var listComponent, components = []; |
| |
| // set title |
| this.$listTitle.text(this._format(this.selectedDate, 'd. MMMM yyyy')); |
| |
| // find components to display on the list panel |
| this.components.forEach(function(component) { |
| if (belongsToSelectedDate.call(this, component)) { |
| components.push(component); |
| } |
| }.bind(this)); |
| |
| function belongsToSelectedDate(component) { |
| var selectedDate = dates.trunc(this.selectedDate); |
| return dates.compare(selectedDate, component.coveredDaysRange.from) >= 0 && |
| dates.compare(selectedDate, component.coveredDaysRange.to) <= 0; |
| } |
| |
| components.forEach(function(component) { |
| listComponent = new CalendarListComponent(this.selectedDate, component); |
| listComponent.render(this.$list); |
| this._listComponents.push(listComponent); |
| }.bind(this)); |
| } |
| |
| /* -- components, events-------------------------------------------- */ |
| |
| _selectedComponentChanged(component, partDay, updateScrollPosition) { |
| this._setSelection(partDay, component, updateScrollPosition); |
| } |
| |
| _onDayContextMenu(event) { |
| this._showContextMenu(event, 'Calendar.EmptySpace'); |
| } |
| |
| _showContextMenu(event, allowedType) { |
| event.preventDefault(); |
| event.stopPropagation(); |
| |
| var func = function func(event, allowedType) { |
| if (!this.rendered || !this.attached) { // check needed because function is called asynchronously |
| return; |
| } |
| var filteredMenus = menus.filter(this.menus, [allowedType], true), |
| $part = $(event.currentTarget); |
| if (filteredMenus.length === 0) { |
| return; |
| } |
| var popup = scout.create('ContextMenuPopup', { |
| parent: this, |
| menuItems: filteredMenus, |
| location: { |
| x: event.pageX, |
| y: event.pageY |
| }, |
| $anchor: $part |
| }); |
| popup.open(); |
| }.bind(this); |
| |
| this.session.onRequestsDone(func, event, allowedType); |
| } |
| |
| /* -- components, arrangement------------------------------------ */ |
| |
| _arrangeComponents() { |
| var k, j, $day, $allChildren, $children, $scrollableContainer, dayComponents, day; |
| |
| var $days = $('.calendar-day', this.$grid); |
| // Main (Bottom) grid: Iterate over days |
| for (k = 0; k < $days.length; k++) { |
| $day = $days.eq(k); |
| $children = $day.children('.calendar-component:not(.component-task)'); |
| $allChildren = $day.children('.calendar-component'); |
| day = $day.data('date'); |
| |
| // Remove old element containers |
| $scrollableContainer = $day.children('.calendar-scrollable-components'); |
| if ($scrollableContainer.length > 0) { |
| scrollbars.uninstall($scrollableContainer, this.session); |
| $scrollableContainer.remove(); |
| } |
| |
| if (this._isMonth() && $allChildren.length > 0) { |
| $scrollableContainer = $day.appendDiv('calendar-scrollable-components'); |
| |
| for (j = 0; j < $allChildren.length; j++) { |
| var $child = $allChildren.eq(j); |
| // non-tasks (communications) are distributed manually |
| // within the parent container in all views except the monthly view. |
| if (!this._isMonth() && !$child.hasClass('component-task')) { |
| continue; |
| } |
| $scrollableContainer.append($child); |
| } |
| |
| scrollbars.install($scrollableContainer, { |
| parent: this, |
| session: this.session, |
| axis: 'y' |
| }); |
| } |
| |
| if (this._isMonth() && $children.length > 2) { |
| $day.addClass('many-items'); |
| } else if (!this._isMonth() && $children.length > 1) { |
| // logical placement |
| dayComponents = this._getComponents($children); |
| this._arrange(dayComponents, day); |
| |
| // screen placement |
| this._arrangeComponentSetPlacement($children, day); |
| } |
| } |
| |
| if (this._isMonth()) { |
| this._uninstallScrollbars(); |
| this.$grid.removeClass('calendar-scrollable-components'); |
| } else { |
| this.$grid.addClass('calendar-scrollable-components'); |
| // If we're in the non-month views, the time can scroll. Add scrollbars |
| this._installScrollbars({ |
| parent: this, |
| session: this.session, |
| axis: 'y' |
| }); |
| |
| var $topDays = $('.calendar-scrollable-components', this.$topGrid); |
| for (k = 0; k < $topDays.length; k++) { |
| var $topDay = $topDays.eq(k); |
| scrollbars.install($topDay, { |
| parent: this, |
| session: this.session, |
| axis: 'y' |
| }); |
| } |
| } |
| } |
| |
| _getComponents($children) { |
| var i, $child; |
| var components = []; |
| for (i = 0; i < $children.length; i++) { |
| $child = $children.eq(i); |
| components.push($child.data('component')); |
| } |
| return components; |
| } |
| |
| _sort(components) { |
| components.sort(this._sortFromTo); |
| } |
| |
| /** |
| * Arrange components (stack width, stack index) per day |
| * */ |
| _arrange(components, day) { |
| var i, j, c, r, k, |
| columns = []; |
| |
| // ordered by from, to |
| this._sort(components); |
| |
| // clear existing placement |
| for (i = 0; i < components.length; i++) { |
| c = components[i]; |
| if (!c.stack) { |
| c.stack = {}; |
| } |
| c.stack[day] = {}; |
| } |
| |
| for (i = 0; i < components.length; i++) { |
| c = components[i]; |
| r = c.getPartDayPosition(day); // Range [from,to] |
| |
| // reduce number of columns, if all components end before this one |
| if (columns.length > 0 && this._allEndBefore(columns, r.from, day)) { |
| columns = []; |
| } |
| |
| // replace an component that ends before and can be replaced |
| k = this._findReplacableColumn(columns, r.from, day); |
| |
| // insert |
| if (k >= 0) { |
| columns[k] = c; |
| c.stack[day].x = k; |
| } else { |
| columns.push(c); |
| c.stack[day].x = columns.length - 1; |
| } |
| |
| // update stackW |
| for (j = 0; j < columns.length; j++) { |
| columns[j].stack[day].w = columns.length; |
| } |
| } |
| } |
| |
| _allEndBefore(columns, pos, day) { |
| var i; |
| for (i = 0; i < columns.length; i++) { |
| if (!this._endsBefore(columns[i], pos, day)) { |
| return false; |
| } |
| } |
| return true; |
| } |
| |
| _findReplacableColumn(columns, pos, day) { |
| var j; |
| for (j = 0; j < columns.length; j++) { |
| if (this._endsBefore(columns[j], pos, day)) { |
| return j; |
| } |
| } |
| return -1; |
| } |
| |
| _endsBefore(component, pos, day) { |
| return component.getPartDayPosition(day).to <= pos; |
| } |
| |
| _arrangeComponentSetPlacement($children, day) { |
| var i, $child, stack; |
| |
| // loop and place based on data |
| for (i = 0; i < $children.length; i++) { |
| $child = $children.eq(i); |
| stack = $child.data('component').stack[day]; |
| |
| // make last element smaller |
| $child |
| .css('width', 100 / stack.w + '%') |
| .css('left', stack.x * 100 / stack.w + '%'); |
| } |
| } |
| |
| get$Scrollable() { |
| return this.$grid; |
| } |
| |
| /* -- helper ---------------------------------------------------- */ |
| |
| _dayPosition(hour, minutes) { |
| // Height position in percent of total calendar |
| |
| var pos; |
| if (hour < 0) { |
| pos = 0; // All day event |
| } else { |
| pos = 100 / (24 * 60) * (hour * 60 + minutes); |
| } |
| return Math.round(pos * 100) / 100; |
| } |
| |
| _hourToNumber(hour) { |
| var splits = hour.split(':'); |
| return parseFloat(splits[0]) + parseFloat(splits[1]) / 60; |
| } |
| |
| _format(date, pattern) { |
| return dates.format(date, this.session.locale, pattern); |
| } |
| |
| _sortFromTo(c1, c2) { |
| var from1 = dates.parseJsonDate(c1.fromDate); |
| var from2 = dates.parseJsonDate(c2.fromDate); |
| var diffFrom = dates.compare(from1, from2); |
| if (diffFrom !== 0) { |
| return diffFrom; |
| } |
| var to1 = dates.parseJsonDate(c1.toDate); |
| var to2 = dates.parseJsonDate(c2.toDate); |
| var diffTo = dates.compare(to1, to2); |
| if (diffTo !== 0) { |
| return diffTo; |
| } |
| var s1 = c1.item && c1.item.subject ? c1.item.subject : ''; |
| var s2 = c2.item && c2.item.subject ? c2.item.subject : ''; |
| return s1.localeCompare(s2); |
| } |
| } |
