diff options
Diffstat (limited to '')
| -rw-r--r-- | comm/calendar/base/content/calendar-base-view.js | 647 |
1 files changed, 647 insertions, 0 deletions
diff --git a/comm/calendar/base/content/calendar-base-view.js b/comm/calendar/base/content/calendar-base-view.js new file mode 100644 index 0000000000..317770b984 --- /dev/null +++ b/comm/calendar/base/content/calendar-base-view.js @@ -0,0 +1,647 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* global cal, calendarNavigationBar, CalendarFilteredViewMixin, calFilterProperties, currentView, + gCurrentMode, MozElements, MozXULElement, Services, toggleOrientation */ + +"use strict"; + +// Wrap in a block to prevent leaking to window scope. +{ + const { XPCOMUtils } = ChromeUtils.importESModule("resource://gre/modules/XPCOMUtils.sys.mjs"); + + /** + * Calendar observer for calendar view elements. Used in CalendarBaseView class. + * + * @implements {calIObserver} + * @implements {calICompositeObserver} + * @implements {calIAlarmServiceObserver} + */ + class CalendarViewObserver { + /** + * Constructor for CalendarViewObserver. + * + * @param {CalendarBaseView} calendarView - A calendar view. + */ + constructor(calendarView) { + this.calView = calendarView.calICalendarView; + } + + QueryInterface = ChromeUtils.generateQI(["calIAlarmServiceObserver"]); + + // calIAlarmServiceObserver + + onAlarm(alarmItem) { + this.calView.flashAlarm(alarmItem, false); + } + + onNotification(item) {} + + onRemoveAlarmsByItem(item) { + // Stop the flashing for the item. + this.calView.flashAlarm(item, true); + } + + onRemoveAlarmsByCalendar(calendar) { + // Stop the flashing for all items of this calendar. + for (const key in this.calView.mFlashingEvents) { + const item = this.calView.mFlashingEvents[key]; + if (item.calendar.id == calendar.id) { + this.calView.flashAlarm(item, true); + } + } + } + + onAlarmsLoaded(calendar) {} + + // End calIAlarmServiceObserver + } + + /** + * Abstract base class for calendar view elements (day, week, multiweek, month). + * + * @implements {calICalendarView} + * @abstract + */ + class CalendarBaseView extends CalendarFilteredViewMixin(MozXULElement) { + /** + * Whether the view has been initialized. + * + * @type {boolean} + */ + #isInitialized = false; + + connectedCallback() { + if (this.delayConnectedCallback() || this.hasConnected) { + return; + } + this.hasConnected = true; + + // For some unknown reason, `console.createInstance` isn't available when + // `ensureInitialized` runs. + this.mLog = console.createInstance({ + prefix: `calendar.baseview (${this.constructor.name})`, + maxLogLevel: "Warn", + maxLogLevelPref: "calendar.baseview.loglevel", + }); + + this.mSelectedItems = []; + } + + ensureInitialized() { + if (this.#isInitialized) { + return; + } + this.#isInitialized = true; + + this.calICalendarView = this.getCustomInterfaceCallback(Ci.calICalendarView); + + this.addEventListener("move", event => { + this.moveView(event.detail); + }); + + this.addEventListener("keypress", event => { + switch (event.key) { + case "PageUp": + this.moveView(-1); + break; + case "PageDown": + this.moveView(1); + break; + } + }); + + this.addEventListener("wheel", event => { + const pixelThreshold = 150; + + if (event.shiftKey && Services.prefs.getBoolPref("calendar.view.mousescroll", true)) { + let deltaView = 0; + if (event.deltaMode == event.DOM_DELTA_LINE) { + if (event.deltaY != 0) { + deltaView = event.deltaY < 0 ? -1 : 1; + } + } else if (event.deltaMode == event.DOM_DELTA_PIXEL) { + this.mPixelScrollDelta += event.deltaY; + if (this.mPixelScrollDelta > pixelThreshold) { + deltaView = 1; + this.mPixelScrollDelta = 0; + } else if (this.mPixelScrollDelta < -pixelThreshold) { + deltaView = -1; + this.mPixelScrollDelta = 0; + } + } + + if (deltaView != 0) { + this.moveView(deltaView); + } + event.preventDefault(); + } + }); + + this.addEventListener("MozRotateGesture", event => { + // Threshold for the minimum and maximum angle we should accept + // rotation for. 90 degrees minimum is most logical, but 45 degrees + // allows you to rotate with one hand. + const MIN_ROTATE_ANGLE = 45; + const MAX_ROTATE_ANGLE = 180; + + const absval = Math.abs(event.delta); + if (this.supportsRotation && absval >= MIN_ROTATE_ANGLE && absval < MAX_ROTATE_ANGLE) { + toggleOrientation(); + event.preventDefault(); + } + }); + + this.addEventListener("MozMagnifyGestureStart", event => { + this.mMagnifyAmount = 0; + }); + + this.addEventListener("MozMagnifyGestureUpdate", event => { + // Threshold as to how much magnification causes the zoom to happen. + const THRESHOLD = 30; + + if (this.supportsZoom) { + this.mMagnifyAmount += event.delta; + + if (this.mMagnifyAmount > THRESHOLD) { + this.zoomOut(); + this.mMagnifyAmount = 0; + } else if (this.mMagnifyAmount < -THRESHOLD) { + this.zoomIn(); + this.mMagnifyAmount = 0; + } + event.preventDefault(); + } + }); + + this.addEventListener("MozSwipeGesture", event => { + if ( + (event.direction == SimpleGestureEvent.DIRECTION_UP && !this.rotated) || + (event.direction == SimpleGestureEvent.DIRECTION_LEFT && this.rotated) + ) { + this.moveView(-1); + } else if ( + (event.direction == SimpleGestureEvent.DIRECTION_DOWN && !this.rotated) || + (event.direction == SimpleGestureEvent.DIRECTION_RIGHT && this.rotated) + ) { + this.moveView(1); + } + }); + + this.mRangeStartDate = null; + this.mRangeEndDate = null; + + this.mWorkdaysOnly = false; + + this.mController = null; + + this.mStartDate = null; + this.mEndDate = null; + + this.mTasksInView = false; + this.mShowCompleted = false; + + this.mDisplayDaysOff = true; + this.mDaysOffArray = [0, 6]; + + this.mTimezone = null; + this.mFlashingEvents = {}; + + this.mDropShadowsLength = null; + + this.mShadowOffset = null; + this.mDropShadows = null; + + this.mMagnifyAmount = 0; + this.mPixelScrollDelta = 0; + + this.mViewStart = null; + this.mViewEnd = null; + + this.mToggleStatus = 0; + + this.mToggleStatusFlag = { + WorkdaysOnly: 1, + TasksInView: 2, + ShowCompleted: 4, + }; + + this.mTimezoneObserver = { + observe: () => { + this.timezone = cal.dtz.defaultTimezone; + this.refreshView(); + + this.updateTimeIndicatorPosition(); + }, + }; + + this.mPrefObserver = { + calView: this.calICalendarView, + + observe(subj, topic, pref) { + this.calView.handlePreference(subj, topic, pref); + }, + }; + + this.mObserver = new CalendarViewObserver(this); + + const isChecked = id => document.getElementById(id).getAttribute("checked") == "true"; + + this.workdaysOnly = isChecked("calendar_toggle_workdays_only_command"); + this.tasksInView = isChecked("calendar_toggle_tasks_in_view_command"); + this.rotated = isChecked("calendar_toggle_orientation_command"); + this.showCompleted = isChecked("calendar_toggle_show_completed_in_view_command"); + + this.mTimezone = cal.dtz.defaultTimezone; + const alarmService = Cc["@mozilla.org/calendar/alarm-service;1"].getService( + Ci.calIAlarmService + ); + + alarmService.addObserver(this.mObserver); + + this.setAttribute("type", this.type); + + window.addEventListener("viewresize", event => { + if (gCurrentMode == "calendar" && this.isVisible()) { + this.onResize(); + } + }); + + // Add a preference observer to monitor changes. + Services.prefs.addObserver("calendar.", this.mPrefObserver); + Services.obs.addObserver(this.mTimezoneObserver, "defaultTimezoneChanged"); + + this.updateDaysOffPrefs(); + this.updateTimeIndicatorPosition(); + + // Remove observers on window unload. + window.addEventListener( + "unload", + () => { + alarmService.removeObserver(this.mObserver); + + Services.prefs.removeObserver("calendar.", this.mPrefObserver); + Services.obs.removeObserver(this.mTimezoneObserver, "defaultTimezoneChanged"); + }, + { once: true } + ); + } + + /** + * Handle resizing by adjusting the view to the new size. + * + * @param {calICalendarView} [calViewElem] - A calendar view element. + */ + onResize() { + // Child classes should provide the implementation. + throw new Error(this.constructor.name + ".onResize not implemented"); + } + + /** + * Whether the view has been initialized. + * + * @returns {boolean} - True if the view has been initialized, otherwise + * false. + */ + get isInitialized() { + return this.#isInitialized; + } + + get type() { + const typelist = this.id.split("-"); + return typelist[0]; + } + + set rotated(rotated) { + this.setAttribute("orient", rotated ? "horizontal" : "vertical"); + this.toggleAttribute("rotated", rotated); + } + + get rotated() { + return this.getAttribute("orient") == "horizontal"; + } + + get supportsRotation() { + return false; + } + + set displayDaysOff(displayDaysOff) { + this.mDisplayDaysOff = displayDaysOff; + } + + get displayDaysOff() { + return this.mDisplayDaysOff; + } + + set controller(controller) { + this.mController = controller; + } + + get controller() { + return this.mController; + } + + set daysOffArray(daysOffArray) { + this.mDaysOffArray = daysOffArray; + } + + get daysOffArray() { + return this.mDaysOffArray; + } + + set tasksInView(tasksInView) { + this.mTasksInView = tasksInView; + this.updateItemType(); + } + + get tasksInView() { + return this.mTasksInView; + } + + set showCompleted(showCompleted) { + this.mShowCompleted = showCompleted; + this.updateItemType(); + } + + get showCompleted() { + return this.mShowCompleted; + } + + set timezone(timezone) { + this.mTimezone = timezone; + } + + get timezone() { + return this.mTimezone; + } + + set workdaysOnly(workdaysOnly) { + this.mWorkdaysOnly = workdaysOnly; + } + + get workdaysOnly() { + return this.mWorkdaysOnly; + } + + get supportsWorkdaysOnly() { + return true; + } + + get supportsZoom() { + return false; + } + + get selectionObserver() { + return this.mSelectionObserver; + } + + get startDay() { + return this.startDate; + } + + get endDay() { + return this.endDate; + } + + get supportDisjointDates() { + return false; + } + + get hasDisjointDates() { + return false; + } + + set rangeStartDate(startDate) { + this.mRangeStartDate = startDate; + } + + get rangeStartDate() { + return this.mRangeStartDate; + } + + set rangeEndDate(endDate) { + this.mRangeEndDate = endDate; + } + + get rangeEndDate() { + return this.mRangeEndDate; + } + + get observerID() { + return "base-view-observer"; + } + + // The end date that should be used for getItems and similar queries. + get queryEndDate() { + if (!this.endDate) { + return null; + } + const end = this.endDate.clone(); + end.day += 1; + end.isDate = true; + return end; + } + + /** + * Return a date object representing the current day. + * + * @returns {calIDateTime} A date object. + */ + today() { + const date = cal.dtz.jsDateToDateTime(new Date()).getInTimezone(this.mTimezone); + date.isDate = true; + return date; + } + + /** + * Return whether this view is currently active and visible in the UI. + * + * @returns {boolean} + */ + isVisible() { + return this == currentView(); + } + + /** + * Set the view's item type based on the `tasksInView` and `showCompleted` properties. + */ + updateItemType() { + if (!this.mTasksInView) { + this.itemType = Ci.calICalendar.ITEM_FILTER_TYPE_EVENT; + return; + } + + let type = Ci.calICalendar.ITEM_FILTER_TYPE_ALL; + type |= this.mShowCompleted + ? Ci.calICalendar.ITEM_FILTER_COMPLETED_ALL + : Ci.calICalendar.ITEM_FILTER_COMPLETED_NO; + this.itemType = type; + } + + // CalendarFilteredViewMixin implementation (clearItems and removeItemsFromCalendar + // are implemented in subclasses). + + addItems(items) { + for (let item of items) { + this.doAddItem(item); + } + } + + removeItems(items) { + for (let item of items) { + this.doRemoveItem(item); + } + } + + // End of CalendarFilteredViewMixin implementation. + + /** + * Create and fire an event. + * + * @param {string} eventName - Name of the event. + * @param {object} eventDetail - The details to add to the event. + */ + fireEvent(eventName, eventDetail) { + this.dispatchEvent( + new CustomEvent(eventName, { bubbles: true, cancelable: false, detail: eventDetail }) + ); + } + + /** + * A preference handler typically called by a preferences observer when a preference + * changes. Handles common preferences while other preferences are handled in subclasses. + * + * @param {object} subject - A subject, a prefs object. + * @param {string} topic - A topic. + * @param {string} preference - A preference that has changed. + */ + handleCommonPreference(subject, topic, preference) { + switch (preference) { + case "calendar.week.d0sundaysoff": + case "calendar.week.d1mondaysoff": + case "calendar.week.d2tuesdaysoff": + case "calendar.week.d3wednesdaysoff": + case "calendar.week.d4thursdaysoff": + case "calendar.week.d5fridaysoff": + case "calendar.week.d6saturdaysoff": + this.updateDaysOffPrefs(); + break; + case "calendar.alarms.indicator.show": + case "calendar.date.format": + case "calendar.view.showLocation": + // Break here to ensure the view is refreshed. + break; + default: + return; + } + this.refreshView(); + } + + /** + * Check preferences and update which days are days off. + */ + updateDaysOffPrefs() { + const prefix = "calendar.week."; + const daysOffPrefs = [ + [0, "d0sundaysoff", "true"], + [1, "d1mondaysoff", "false"], + [2, "d2tuesdaysoff", "false"], + [3, "d3wednesdaysoff", "false"], + [4, "d4thursdaysoff", "false"], + [5, "d5fridaysoff", "false"], + [6, "d6saturdaysoff", "true"], + ]; + const filterDaysOff = ([number, name, defaultValue]) => + Services.prefs.getBoolPref(prefix + name, defaultValue); + + this.daysOffArray = daysOffPrefs.filter(filterDaysOff).map(pref => pref[0]); + } + + /** + * Adjust the position of this view's indicator of the current time, if any. + */ + updateTimeIndicatorPosition() {} + + /** + * Refresh the view. + */ + refreshView() { + if (!this.startDay || !this.endDay) { + // Don't refresh if we're not initialized. + return; + } + this.goToDay(this.selectedDay); + } + + handlePreference(subject, topic, pref) { + // Do nothing by default. + } + + flashAlarm(alarmItem, stop) { + // Do nothing by default. + } + + // calICalendarView Methods + + /** + * @note This is overridden in each of the built-in calendar views. + * It's only left here in case some extension is relying on it. + */ + goToDay(date) { + this.showDate(date); + } + + getRangeDescription() { + return cal.dtz.formatter.formatInterval(this.rangeStartDate, this.rangeEndDate); + } + + removeDropShadows() { + this.querySelectorAll("[dropbox='true']").forEach(dbox => { + dbox.setAttribute("dropbox", "false"); + }); + } + + setDateRange(startDate, endDate) { + calendarNavigationBar.setDateRange(startDate, endDate); + } + + getSelectedItems() { + return this.mSelectedItems; + } + + setSelectedItems(items) { + this.mSelectedItems = items.concat([]); + return this.mSelectedItems; + } + + getDateList() { + const start = this.startDate.clone(); + const dateList = []; + while (start.compare(this.endDate) <= 0) { + dateList.push(start); + start.day++; + } + return dateList; + } + + zoomIn(level) {} + + zoomOut(level) {} + + zoomReset() {} + + // End calICalendarView Methods + } + + XPCOMUtils.defineLazyPreferenceGetter( + CalendarBaseView.prototype, + "weekStartOffset", + "calendar.week.start", + 0 + ); + + MozXULElement.implementCustomInterface(CalendarBaseView, [Ci.calICalendarView]); + + MozElements.CalendarBaseView = CalendarBaseView; +} |