diff options
Diffstat (limited to '')
14 files changed, 7612 insertions, 0 deletions
diff --git a/comm/calendar/base/content/widgets/calendar-alarm-widget.js b/comm/calendar/base/content/widgets/calendar-alarm-widget.js new file mode 100644 index 0000000000..58300255bd --- /dev/null +++ b/comm/calendar/base/content/widgets/calendar-alarm-widget.js @@ -0,0 +1,402 @@ +/* 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/. */ + +"use strict"; + +/* global Cr MozElements MozXULElement PluralForm Services */ + +// Wrap in a block to prevent leaking to window scope. +{ + var { cal } = ChromeUtils.import("resource:///modules/calendar/calUtils.jsm"); + /** + * Represents an alarm in the alarms dialog. It appears there when an alarm is fired, and + * allows the alarm to be snoozed, dismissed, etc. + * + * @augments MozElements.MozRichlistitem + */ + class MozCalendarAlarmWidgetRichlistitem extends MozElements.MozRichlistitem { + connectedCallback() { + if (this.delayConnectedCallback() || this.hasConnected) { + return; + } + this.hasConnected = true; + this.appendChild( + MozXULElement.parseXULToFragment( + ` + <vbox pack="start"> + <html:img class="alarm-calendar-image" + src="chrome://calendar/skin/shared/icons/icon32.svg" + alt="" /> + </vbox> + <vbox class="alarm-calendar-event"> + <label class="alarm-title-label" crop="end"/> + <vbox class="additional-information-box"> + <label class="alarm-date-label"/> + <description class="alarm-location-description" + crop="end" + flex="1"/> + <hbox pack="start"> + <label class="text-link alarm-details-label" + value="&calendar.alarm.details.label;" + onclick="showDetails(event)" + onkeypress="showDetails(event)"/> + </hbox> + </vbox> + </vbox> + <spacer flex="1"/> + <label class="alarm-relative-date-label"/> + <vbox class="alarm-action-buttons" pack="center"> + <button class="alarm-snooze-button" + type="menu" + label="&calendar.alarm.snoozefor.label;"> + <menupopup is="calendar-snooze-popup" ignorekeys="true"/> + </button> + <button class="alarm-dismiss-button" + label="&calendar.alarm.dismiss.label;" + oncommand="dismissAlarm()"/> + </vbox> + `, + ["chrome://calendar/locale/global.dtd", "chrome://calendar/locale/calendar.dtd"] + ) + ); + this.mItem = null; + this.mAlarm = null; + this.setAttribute("is", "calendar-alarm-widget-richlistitem"); + } + + set item(val) { + this.mItem = val; + this.updateLabels(); + } + + get item() { + return this.mItem; + } + + set alarm(val) { + this.mAlarm = val; + this.updateLabels(); + } + + get alarm() { + return this.mAlarm; + } + + /** + * Refresh UI text (dates, titles, locations) when the data has changed. + */ + updateLabels() { + if (!this.mItem || !this.mAlarm) { + // Setup not complete, do nothing for now. + return; + } + const formatter = cal.dtz.formatter; + let titleLabel = this.querySelector(".alarm-title-label"); + let locationDescription = this.querySelector(".alarm-location-description"); + let dateLabel = this.querySelector(".alarm-date-label"); + + // Dates + if (this.mItem.isEvent()) { + dateLabel.value = formatter.formatItemInterval(this.mItem); + } else if (this.mItem.isTodo()) { + let startDate = this.mItem.entryDate || this.mItem.dueDate; + if (startDate) { + // A task with a start or due date, show with label. + startDate = startDate.getInTimezone(cal.dtz.defaultTimezone); + dateLabel.value = cal.l10n.getCalString("alarmStarts", [ + formatter.formatDateTime(startDate), + ]); + } else { + // If the task has no start date, then format the alarm date. + dateLabel.value = formatter.formatDateTime(this.mAlarm.alarmDate); + } + } else { + throw Components.Exception("", Cr.NS_ERROR_ILLEGAL_VALUE); + } + + // Relative Date + this.updateRelativeDateLabel(); + + // Title, Location + titleLabel.value = this.mItem.title || ""; + locationDescription.value = this.mItem.getProperty("LOCATION") || ""; + if (locationDescription.value.length) { + let urlMatch = locationDescription.value.match(/(https?:\/\/[^ ]*)/); + let url = urlMatch && urlMatch[1]; + if (url) { + locationDescription.setAttribute("link", url); + locationDescription.setAttribute( + "onclick", + "launchBrowser(this.getAttribute('link'), event)" + ); + locationDescription.setAttribute( + "oncommand", + "launchBrowser(this.getAttribute('link'), event)" + ); + locationDescription.classList.add("text-link", "alarm-details-label"); + } + } else { + locationDescription.hidden = true; + } + // Hide snooze button if read-only. + let snoozeButton = this.querySelector(".alarm-snooze-button"); + if ( + !cal.acl.isCalendarWritable(this.mItem.calendar) || + !cal.acl.userCanModifyItem(this.mItem) + ) { + let tooltip = "reminderDisabledSnoozeButtonTooltip"; + snoozeButton.disabled = true; + snoozeButton.setAttribute("tooltiptext", cal.l10n.getString("calendar-alarms", tooltip)); + } else { + snoozeButton.disabled = false; + snoozeButton.removeAttribute("tooltiptext"); + } + } + + /** + * Refresh UI text for relative date when the data has changed. + */ + updateRelativeDateLabel() { + const formatter = cal.dtz.formatter; + const item = this.mItem; + let relativeDateLabel = this.querySelector(".alarm-relative-date-label"); + let relativeDateString; + let startDate = item[cal.dtz.startDateProp(item)] || item[cal.dtz.endDateProp(item)]; + + if (startDate) { + startDate = startDate.getInTimezone(cal.dtz.defaultTimezone); + let currentDate = cal.dtz.now(); + + const sinceDayStart = currentDate.hour * 3600 + currentDate.minute * 60; + + currentDate.second = 0; + startDate.second = 0; + + const sinceAlarm = currentDate.subtractDate(startDate).inSeconds; + + this.mAlarmToday = sinceAlarm < sinceDayStart && sinceAlarm > sinceDayStart - 86400; + + if (this.mAlarmToday) { + // The alarm is today. + relativeDateString = cal.l10n.getCalString("alarmTodayAt", [ + formatter.formatTime(startDate), + ]); + } else if (sinceAlarm <= sinceDayStart - 86400 && sinceAlarm > sinceDayStart - 172800) { + // The alarm is tomorrow. + relativeDateString = cal.l10n.getCalString("alarmTomorrowAt", [ + formatter.formatTime(startDate), + ]); + } else if (sinceAlarm < sinceDayStart + 86400 && sinceAlarm > sinceDayStart) { + // The alarm is yesterday. + relativeDateString = cal.l10n.getCalString("alarmYesterdayAt", [ + formatter.formatTime(startDate), + ]); + } else { + // The alarm is way back. + relativeDateString = [formatter.formatDateTime(startDate)]; + } + } else { + // No start or end date, therefore the alarm must be absolute + // and have an alarm date. + relativeDateString = [formatter.formatDateTime(this.mAlarm.alarmDate)]; + } + + relativeDateLabel.value = relativeDateString; + } + + /** + * Click/keypress handler for "Details" link. Dispatches an event to open an item dialog. + * + * @param event {Event} The click or keypress event. + */ + showDetails(event) { + if (event.type == "click" || (event.type == "keypress" && event.key == "Enter")) { + const detailsEvent = new Event("itemdetails", { bubbles: true, cancelable: false }); + this.dispatchEvent(detailsEvent); + } + } + + /** + * Click handler for "Dismiss" button. Dispatches an event to dismiss the alarm. + */ + dismissAlarm() { + const dismissEvent = new Event("dismiss", { bubbles: true, cancelable: false }); + this.dispatchEvent(dismissEvent); + } + } + + customElements.define("calendar-alarm-widget-richlistitem", MozCalendarAlarmWidgetRichlistitem, { + extends: "richlistitem", + }); + + /** + * A popup panel for selecting how long to snooze alarms/reminders. + * It appears when a snooze button is clicked. + * + * @augments MozElements.MozMenuPopup + */ + class MozCalendarSnoozePopup extends MozElements.MozMenuPopup { + connectedCallback() { + if (this.delayConnectedCallback() || this.hasConnected) { + return; + } + this.hasConnected = true; + this.appendChild( + MozXULElement.parseXULToFragment( + ` + <menuitem label="&calendar.alarm.snooze.5minutes.label;" + value="5" + oncommand="snoozeItem(event)"/> + <menuitem label="&calendar.alarm.snooze.10minutes.label;" + value="10" + oncommand="snoozeItem(event)"/> + <menuitem label="&calendar.alarm.snooze.15minutes.label;" + value="15" + oncommand="snoozeItem(event)"/> + <menuitem label="&calendar.alarm.snooze.30minutes.label;" + value="30" + oncommand="snoozeItem(event)"/> + <menuitem label="&calendar.alarm.snooze.45minutes.label;" + value="45" + oncommand="snoozeItem(event)"/> + <menuitem label="&calendar.alarm.snooze.1hour.label;" + value="60" + oncommand="snoozeItem(event)"/> + <menuitem label="&calendar.alarm.snooze.2hours.label;" + value="120" + oncommand="snoozeItem(event)"/> + <menuitem label="&calendar.alarm.snooze.1day.label;" + value="1440" + oncommand="snoozeItem(event)"/> + <menuseparator/> + <hbox class="snooze-options-box"> + <html:input type="number" + class="size3 snooze-value-textbox" + oninput="updateUIText()" + onselect="updateUIText()"/> + <menulist class="snooze-unit-menulist" allowevents="true"> + <menupopup class="snooze-unit-menupopup menulist-menupopup" + position="after_start" + ignorekeys="true"> + <menuitem closemenu="single" class="unit-menuitem" value="1"></menuitem> + <menuitem closemenu="single" class="unit-menuitem" value="60"></menuitem> + <menuitem closemenu="single" class="unit-menuitem" value="1440"></menuitem> + </menupopup> + </menulist> + <toolbarbutton class="snooze-popup-button snooze-popup-ok-button" + oncommand="snoozeOk()"/> + <toolbarbutton class="snooze-popup-button snooze-popup-cancel-button" + aria-label="&calendar.alarm.snooze.cancel;" + oncommand="snoozeCancel()"/> + </hbox> + `, + ["chrome://calendar/locale/global.dtd", "chrome://calendar/locale/calendar.dtd"] + ) + ); + const defaultSnoozeLength = Services.prefs.getIntPref( + "calendar.alarms.defaultsnoozelength", + 0 + ); + const snoozeLength = defaultSnoozeLength <= 0 ? 5 : defaultSnoozeLength; + + let unitList = this.querySelector(".snooze-unit-menulist"); + let unitValue = this.querySelector(".snooze-value-textbox"); + + if ((snoozeLength / 60) % 24 == 0) { + // Days + unitValue.value = snoozeLength / 60 / 24; + unitList.selectedIndex = 2; + } else if (snoozeLength % 60 == 0) { + // Hours + unitValue.value = snoozeLength / 60; + unitList.selectedIndex = 1; + } else { + // Minutes + unitValue.value = snoozeLength; + unitList.selectedIndex = 0; + } + + this.updateUIText(); + } + + /** + * Dispatch a snooze event when an alarm is snoozed. + * + * @param minutes {number|string} The number of minutes to snooze for. + */ + snoozeAlarm(minutes) { + let snoozeEvent = new Event("snooze", { bubbles: true, cancelable: false }); + snoozeEvent.detail = minutes; + + // For single alarms the event.target has to be the calendar-alarm-widget element, + // (so call dispatchEvent on that). For snoozing all alarms the event.target is not + // relevant but the snooze all popup is not inside a calendar-alarm-widget (so call + // dispatchEvent on 'this'). + const eventTarget = this.id == "alarm-snooze-all-popup" ? this : this.closest("richlistitem"); + eventTarget.dispatchEvent(snoozeEvent); + } + + /** + * Click handler for snooze popup menu items (like "5 Minutes", "1 Hour", etc.). + * + * @param event {Event} The click event. + */ + snoozeItem(event) { + this.snoozeAlarm(event.target.value); + } + + /** + * Click handler for the "OK" (checkmark) button when snoozing for a custom amount of time. + */ + snoozeOk() { + const unitList = this.querySelector(".snooze-unit-menulist"); + const unitValue = this.querySelector(".snooze-value-textbox"); + const minutes = (unitList.value || 1) * unitValue.value; + this.snoozeAlarm(minutes); + } + + /** + * Click handler for the "cancel" ("X") button for not snoozing a custom amount of time. + */ + snoozeCancel() { + this.hidePopup(); + } + + /** + * Initializes and updates the dynamic UI text. This text can change depending on + * input, like for plurals, when you change from "[1] [minute]" to "[2] [minutes]". + */ + updateUIText() { + const unitList = this.querySelector(".snooze-unit-menulist"); + const unitPopup = this.querySelector(".snooze-unit-menupopup"); + const unitValue = this.querySelector(".snooze-value-textbox"); + let okButton = this.querySelector(".snooze-popup-ok-button"); + + function unitName(list) { + return { 1: "unitMinutes", 60: "unitHours", 1440: "unitDays" }[list.value] || "unitMinutes"; + } + + let pluralString = cal.l10n.getCalString(unitName(unitList)); + + const unitPlural = PluralForm.get(unitValue.value, pluralString).replace( + "#1", + unitValue.value + ); + + let okButtonAriaLabel = cal.l10n.getString("calendar-alarms", "reminderSnoozeOkA11y", [ + unitPlural, + ]); + okButton.setAttribute("aria-label", okButtonAriaLabel); + + const items = unitPopup.getElementsByTagName("menuitem"); + for (let menuItem of items) { + pluralString = cal.l10n.getCalString(unitName(menuItem)); + + menuItem.label = PluralForm.get(unitValue.value, pluralString).replace("#1", "").trim(); + } + } + } + + customElements.define("calendar-snooze-popup", MozCalendarSnoozePopup, { extends: "menupopup" }); +} diff --git a/comm/calendar/base/content/widgets/calendar-dnd-widgets.js b/comm/calendar/base/content/widgets/calendar-dnd-widgets.js new file mode 100644 index 0000000000..f0d75745b6 --- /dev/null +++ b/comm/calendar/base/content/widgets/calendar-dnd-widgets.js @@ -0,0 +1,192 @@ +/* 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/. */ + +/* globals currentView MozElements MozXULElement */ + +"use strict"; + +// Wrap in a block to prevent leaking to window scope. +{ + var { cal } = ChromeUtils.import("resource:///modules/calendar/calUtils.jsm"); + + /** + * An abstract class to handle drag on drop for calendar. + * + * @abstract + */ + class CalendarDnDContainer extends MozXULElement { + constructor() { + super(); + this.addEventListener("dragstart", this.onDragStart); + this.addEventListener("dragover", this.onDragOver); + this.addEventListener("dragenter", this.onDragEnter); + this.addEventListener("drop", this.onDrop); + this.addEventListener("dragend", this.onDragEnd); + this.mCalendarView = null; + } + + connectedCallback() { + if (this.delayConnectedCallback()) { + return; + } + this.hasConnected = true; + } + + /** + * The ViewController that supports the interface 'calICalendarView'. + * + * @returns {calICalendarView} + */ + get calendarView() { + return this.mCalendarView; + } + + set calendarView(val) { + this.mCalendarView = val; + } + + /** + * Method to add individual code e.g to set up the new item during 'ondrop'. + */ + onDropItem(aItem) { + // method that may be overridden by derived bindings... + } + + /** + * Adds the dropshadows to the children of the binding. + * The dropshadows are added at the first position of the children. + */ + addDropShadows() { + let offset = this.calendarView.mShadowOffset; + let shadowStartDate = this.date.clone(); + shadowStartDate.addDuration(offset); + this.calendarView.mDropShadows = []; + for (let i = 0; i < this.calendarView.mDropShadowsLength; i++) { + let box = this.calendarView.findDayBoxForDate(shadowStartDate); + if (box) { + box.setDropShadow(true); + this.calendarView.mDropShadows.push(box); + } + shadowStartDate.day += 1; + } + } + + /** + * Removes all dropShadows from the binding. + * Dropshadows are recognized as such by carrying an attribute "dropshadow". + */ + removeDropShadows() { + // method that may be overwritten by derived bindings... + if (this.calendarView.mDropShadows) { + for (let box of this.calendarView.mDropShadows) { + box.setDropShadow(false); + } + } + this.calendarView.mDropShadows = null; + } + + /** + * By setting the attribute "dropbox" to "true" or "false" the + * dropshadows are added or removed. + */ + setAttribute(aAttr, aVal) { + if (aAttr == "dropbox") { + let session = cal.dragService.getCurrentSession(); + if (session) { + session.canDrop = true; + // no shadows when dragging in the initial position + if (aVal == "true" && !this.contains(session.sourceNode)) { + this.addDropShadows(); + } else { + this.removeDropShadows(); + } + } + } + return XULElement.prototype.setAttribute.call(this, aAttr, aVal); + } + + onDragStart(event) { + let draggedDOMNode = document.monthDragEvent || event.target; + if (!draggedDOMNode?.occurrence || !this.contains(draggedDOMNode)) { + return; + } + let item = draggedDOMNode.occurrence.clone(); + let beginMoveDate = draggedDOMNode.mParentBox.date; + let itemStartDate = (item.startDate || item.entryDate || item.dueDate).getInTimezone( + this.calendarView.mTimezone + ); + let itemEndDate = (item.endDate || item.dueDate || item.entryDate).getInTimezone( + this.calendarView.mTimezone + ); + let oneMoreDay = itemEndDate.hour > 0 || itemEndDate.minute > 0; + itemStartDate.isDate = true; + itemEndDate.isDate = true; + let offsetDuration = itemStartDate.subtractDate(beginMoveDate); + let lenDuration = itemEndDate.subtractDate(itemStartDate); + let len = lenDuration.weeks * 7 + lenDuration.days; + + this.calendarView.mShadowOffset = offsetDuration; + this.calendarView.mDropShadowsLength = oneMoreDay ? len + 1 : len; + } + + onDragOver(event) { + let session = cal.dragService.getCurrentSession(); + if (!session?.sourceNode?.sourceObject) { + // No source item? Then this is not for us. + return; + } + + // We handled the event. + event.preventDefault(); + } + + onDragEnter(event) { + let session = cal.dragService.getCurrentSession(); + if (!session?.sourceNode?.sourceObject) { + // No source item? Then this is not for us. + return; + } + + // We can drop now, tell the drag service. + event.preventDefault(); + + if (!this.hasAttribute("dropbox") || this.getAttribute("dropbox") == "false") { + // As it turned out it was not possible to remove the remaining dropshadows + // at the "dragleave" event, majorly because it was not reliably + // fired. + // So we have to remove them at the currentView(). The restriction of course is + // that these containers so far may not be used for drag and drop from/to e.g. + // the today-pane. + currentView().removeDropShadows(); + } + this.setAttribute("dropbox", "true"); + } + + onDrop(event) { + let session = cal.dragService.getCurrentSession(); + let item = session?.sourceNode?.sourceObject; + if (!item) { + // No source node? Not our drag. + return; + } + this.setAttribute("dropbox", "false"); + let newItem = this.onDropItem(item).clone(); + let newStart = newItem.startDate || newItem.entryDate || newItem.dueDate; + let newEnd = newItem.endDate || newItem.dueDate || newItem.entryDate; + let offset = this.calendarView.mShadowOffset; + newStart.addDuration(offset); + newEnd.addDuration(offset); + this.calendarView.controller.modifyOccurrence(item, newStart, newEnd); + + // We handled the event. + event.stopPropagation(); + } + + onDragEnd(event) { + currentView().removeDropShadows(); + } + } + + MozElements.CalendarDnDContainer = CalendarDnDContainer; +} diff --git a/comm/calendar/base/content/widgets/calendar-filter-tree-view.js b/comm/calendar/base/content/widgets/calendar-filter-tree-view.js new file mode 100644 index 0000000000..8c2804baf0 --- /dev/null +++ b/comm/calendar/base/content/widgets/calendar-filter-tree-view.js @@ -0,0 +1,371 @@ +/* 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/. */ + +/* globals cal, getEventStatusString, CalendarFilteredViewMixin, PROTO_TREE_VIEW */ + +class CalendarFilteredTreeView extends CalendarFilteredViewMixin(PROTO_TREE_VIEW) { + /** + * A function to, given a calendar item, determine whether it matches some + * condition, and should therefore be displayed. + * + * @callback filterFunction + * @param {calIItemBase} item The item to compute filter for + * @returns {boolean} Whether the item matches the filter + */ + + #collator = new Intl.Collator(undefined, { numeric: true }); + #sortColumn = "startDate"; + #sortDirection = "ascending"; + + /** @type {filterFunction?} */ + #filterFunction = null; + + /** @type {CalendarFilteredTreeViewRow[]} */ + #allRows = []; + + /** + * Set the function used to filter displayed rows and update the current view. + * + * @param {filterFunction} filterFunction The function to use as a filter + */ + setFilterFunction(filterFunction) { + this.#filterFunction = filterFunction; + + this._tree?.beginUpdateBatch(); + + if (this.#filterFunction) { + this._rowMap = this.#allRows.filter(row => this.#filterFunction(row.item)); + } else { + // With no filter function, all rows should be displayed. + this._rowMap = Array.from(this.#allRows); + } + + this._tree?.endUpdateBatch(); + + // Ensure that no items remain selected after filter change. + this.selection.clearSelection(); + } + + /** + * Clear the filter on the current view. + */ + clearFilter() { + this.setFilterFunction(null); + } + + /** + * Given a calendar item, determine whether it matches the current filter. + * + * @param {calIItemBase} item The item to compute filter for + * @returns {boolean} Whether the item matches the filter, or true if filter + * is unset + */ + #itemMatchesFilterIfAny(item) { + return !this.#filterFunction || this.#filterFunction(item); + } + + /** + * Save currently selected rows so that they can be restored after + * modifications to the tree. + */ + #saveSelection() { + const selection = this.selection; + if (selection) { + // Mark rows which are selected. + for (let i = 0; i < this._rowMap.length; i++) { + this._rowMap[i].wasSelected = selection.isSelected(i); + this._rowMap[i].wasCurrent = selection.currentIndex == i; + } + } + } + + /** + * Reselect rows which were selected before modifications were made to the + * tree. + */ + #restoreSelection() { + const selection = this.selection; + if (selection) { + selection.selectEventsSuppressed = true; + + let newCurrent; + for (let i = 0; i < this._rowMap.length; i++) { + if (this._rowMap[i].wasSelected != selection.isSelected(i)) { + selection.toggleSelect(i); + } + + if (this._rowMap[i].wasCurrent) { + newCurrent = i; + } + } + + selection.currentIndex = newCurrent; + + this.selectionChanged(); + selection.selectEventsSuppressed = false; + } + } + + // CalendarFilteredViewMixin implementation + + clearItems() { + this.#allRows.length = 0; + + this._tree?.beginUpdateBatch(); + this._rowMap.length = 0; + this._tree?.endUpdateBatch(); + } + + addItems(items) { + let anyItemsMatchedFilter = false; + + for (const item of items) { + const row = new CalendarFilteredTreeViewRow(item); + + const sortValue = row.getValue(this.#sortColumn); + + let addIndex = null; + for (let i = 0; addIndex === null && i < this.#allRows.length; i++) { + const comparison = this.#collator.compare( + sortValue, + this.#allRows[i].getValue(this.#sortColumn) + ); + if ( + (comparison < 0 && this.#sortDirection == "ascending") || + (comparison >= 0 && this.#sortDirection == "descending") + ) { + addIndex = i; + } + } + + if (addIndex === null) { + addIndex = this.#allRows.length; + } + this.#allRows.splice(addIndex, 0, row); + + if (this.#itemMatchesFilterIfAny(item)) { + anyItemsMatchedFilter = true; + } + } + + if (anyItemsMatchedFilter) { + this.#saveSelection(); + + this._tree?.beginUpdateBatch(); + this._rowMap = this.#allRows.filter(row => this.#itemMatchesFilterIfAny(row.item)); + this._tree?.endUpdateBatch(); + + this.#restoreSelection(); + } + } + + removeItems(items) { + const hashIDsToRemove = items.map(i => i.hashId); + for (let i = this.#allRows.length - 1; i >= 0; i--) { + if (hashIDsToRemove.includes(this.#allRows[i].item.hashId)) { + this.#allRows.splice(i, 1); + } + } + + this.#saveSelection(); + + this._tree?.beginUpdateBatch(); + for (let i = this._rowMap.length - 1; i >= 0; i--) { + if (hashIDsToRemove.includes(this._rowMap[i].item.hashId)) { + this._rowMap.splice(i, 1); + } + } + this._tree?.endUpdateBatch(); + + this.#restoreSelection(); + } + + removeItemsFromCalendar(calendarId) { + const itemsToRemove = this.#allRows + .filter(row => row.calendar.id == calendarId) + .map(row => row.item); + this.removeItems(itemsToRemove); + } + + // nsITreeView implementation + + isSorted() { + return true; + } + + cycleHeader(column) { + let direction = "ascending"; + if (column.id == this.#sortColumn && this.#sortDirection == "ascending") { + direction = "descending"; + } + + this.#sortBy(column.id, direction); + } + + #sortBy(sortColumn, sortDirection) { + // Sort underlying array of rows first. + if (sortColumn == this.#sortColumn) { + if (sortDirection == this.#sortDirection) { + // Sort order hasn't changed; do nothing. + return; + } + + this.#allRows.reverse(); + } else { + this.#allRows.sort((a, b) => { + const aValue = a.getValue(sortColumn); + const bValue = b.getValue(sortColumn); + + if (sortDirection == "descending") { + return this.#collator.compare(bValue, aValue); + } + + return this.#collator.compare(aValue, bValue); + }); + } + + this.#saveSelection(); + + // Refilter displayed rows from newly-sorted underlying array. + this._tree?.beginUpdateBatch(); + this._rowMap = this.#allRows.filter(row => this.#itemMatchesFilterIfAny(row.item)); + this._tree?.endUpdateBatch(); + + this.#restoreSelection(); + + this.#sortColumn = sortColumn; + this.#sortDirection = sortDirection; + } +} + +class CalendarFilteredTreeViewRow { + static listFormatter = new Services.intl.ListFormat( + Services.appinfo.name == "xpcshell" ? "en-US" : Services.locale.appLocalesAsBCP47, + { type: "unit" } + ); + + #columnTextCache = {}; + #columnValueCache = {}; + #item = null; + #calendar = null; + wasSelected = false; + wasCurrent = false; + + constructor(item) { + this.#item = item; + this.#calendar = item.calendar; + } + + #getTextByColumnID(columnID) { + switch (columnID) { + case "calendarName": + case "unifinder-search-results-tree-col-calendarname": + return this.#calendar.name; + case "categories": + case "unifinder-search-results-tree-col-categories": + return CalendarFilteredTreeViewRow.listFormatter.format(this.#item.getCategories()); + case "color": + case "unifinder-search-results-tree-col-color": + return cal.view.formatStringForCSSRule(this.#calendar.id); + case "endDate": + case "unifinder-search-results-tree-col-enddate": { + const endDate = this.#item.endDate.getInTimezone(cal.dtz.defaultTimezone); + if (endDate.isDate) { + endDate.day--; + } + + return cal.dtz.formatter.formatDateTime(endDate); + } + case "location": + case "unifinder-search-results-tree-col-location": + return this.#item.getProperty("LOCATION"); + case "startDate": + case "unifinder-search-results-tree-col-startdate": + return cal.dtz.formatter.formatDateTime( + this.#item.startDate.getInTimezone(cal.dtz.defaultTimezone) + ); + case "status": + case "unifinder-search-results-tree-col-status": + return getEventStatusString(this.#item); + case "title": + case "unifinder-search-results-tree-col-title": + return this.#item.title?.replace(/\n/g, " ") || ""; + } + + return ""; + } + + getText(columnID) { + if (!(columnID in this.#columnTextCache)) { + this.#columnTextCache[columnID] = this.#getTextByColumnID(columnID); + } + + return this.#columnTextCache[columnID]; + } + + #getValueByColumnID(columnID) { + switch (columnID) { + case "startDate": + case "unifinder-search-results-tree-col-startdate": + return this.#item.startDate.icalString; + case "endDate": + case "unifinder-search-results-tree-col-enddate": + return this.#item.endDate.icalString; + } + + return this.getText(columnID); + } + + getValue(columnID) { + if (!(columnID in this.#columnValueCache)) { + this.#columnValueCache[columnID] = this.#getValueByColumnID(columnID); + } + + return this.#columnValueCache[columnID]; + } + + getProperties() { + let properties = []; + if (this.#item.priority > 0 && this.#item.priority < 5) { + properties.push("highpriority"); + } else if (this.#item.priority > 5 && this.#item.priority < 10) { + properties.push("lowpriority"); + } + + properties.push("calendar-" + cal.view.formatStringForCSSRule(this.#calendar.name)); + + if (this.#item.status) { + properties.push("status-" + this.#item.status.toLowerCase()); + } + + if (this.#item.getAlarms().length) { + properties.push("alarm"); + } + + properties = properties.concat(this.#item.getCategories().map(cal.view.formatStringForCSSRule)); + return properties.join(" "); + } + + /** @type {calIItemBase} */ + get item() { + return this.#item; + } + + /** @type {calICalendar} */ + get calendar() { + return this.#calendar; + } + + get open() { + return false; + } + + get level() { + return 0; + } + + get children() { + return []; + } +} diff --git a/comm/calendar/base/content/widgets/calendar-filter.js b/comm/calendar/base/content/widgets/calendar-filter.js new file mode 100644 index 0000000000..d49ea0fe76 --- /dev/null +++ b/comm/calendar/base/content/widgets/calendar-filter.js @@ -0,0 +1,1365 @@ +/* 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/. */ + +/* import-globals-from ../calendar-views-utils.js */ + +/* exported CalendarFilteredViewMixin */ + +var { PromiseUtils } = ChromeUtils.importESModule("resource://gre/modules/PromiseUtils.sys.mjs"); +var { cal } = ChromeUtils.import("resource:///modules/calendar/calUtils.jsm"); +var { CalReadableStreamFactory } = ChromeUtils.import( + "resource:///modules/CalReadableStreamFactory.jsm" +); + +/** + * Object that contains a set of filter properties that may be used by a calFilter object + * to filter a set of items. + * Supported filter properties: + * start, end: Specifies the relative date range to use when calculating the filter date + * range. The relative date range may relative to the current date and time, the + * currently selected date, or the dates range of the current view. The actual + * date range used to filter items will be calculated by the calFilter object + * by using the updateFilterDates function, which may be called multiple times + * to reflect changes in the current date and time, and changes to the view. + * + * + * The properties may be set to one of the following values: + * - FILTER_DATE_ALL: An unbound date range. + * - FILTER_DATE_XXX: One of the defined relative date ranges. + * - A string that may be converted to a calIDuration object that will be used + * as an offset to the current date and time. + * + * The start and end properties may have values representing different relative + * date ranges, in which case the filter start date will be calculated as the start + * of the relative range specified by the start property, while the filter end date + * will be calculated as the end of the relative range specified by the end + * property. + * + * due: Specifies the filter property for the due date of tasks. This filter has no + * effect when filtering events. + * + * The property has a bit field value, with the FILTER_DUE_XXX bit flags set + * to indicate that tasks with the corresponding due property value should match + * the filter. + * + * If the value is set to null the due date will not be considered when filtering. + * + * status: Specifies the filter property for the status of tasks. This filter has no + * effect when filtering events. + * + * The property has a bit field value, with the FILTER_STATUS_XXX bit flags set + * to indicate that tasks with the corresponding status property value should match + * the filter. + * + * If the value is set to null the status will not be considered when filtering. + * + * category: Specifies the filter property for the item category. + * + * The property may be set to one of the following values: + * - null: The item category will not be considered when filtering. + * - A string: The item will match the filter if any of it's categories match the + * category specified by the property. + * - An array: The item will match the filter if any of it's categories match any + * of the categories contained in the Array specified by the property. + * + * occurrences: Specifies the filter property for returning occurrences of repeating items. + * + * The property may be set to one of the following values: + * - null, FILTER_OCCURRENCES_BOUND: The default occurrence handling. Occurrences + * will be returned only for date ranges with a bound end date. + * - FILTER_OCCURRENCES_NONE: Only the parent items will be returned. + * - FILTER_OCCURRENCES_PAST_AND_NEXT: Returns past occurrences and the next future + * matching occurrence if one is found. + * + * onfilter: A callback function that may be used to apply additional custom filter + * constraints. If specified, the callback function will be called after any other + * specified filter properties are tested. + * + * The callback function will be called with the following parameters: + * - function(aItem, aResults, aFilterProperties, aFilter) + * + * @param aItem The item being tested. + * @param aResults The results of the test of the other specified + * filter properties. + * @param aFilterProperties The current filter properties being tested. + * @param aFilter The calFilter object performing the filter test. + * + * If specified, the callback function is responsible for returning a value that + * can be converted to true if the item should match the filter, or a value that + * can be converted to false otherwise. The return value will override the results + * of the testing of any other specified filter properties. + */ +function calFilterProperties() { + this.wrappedJSObject = this; +} + +calFilterProperties.prototype = { + FILTER_DATE_ALL: 0, + FILTER_DATE_VIEW: 1, + FILTER_DATE_SELECTED: 2, + FILTER_DATE_SELECTED_OR_NOW: 3, + FILTER_DATE_NOW: 4, + FILTER_DATE_TODAY: 5, + FILTER_DATE_CURRENT_WEEK: 6, + FILTER_DATE_CURRENT_MONTH: 7, + FILTER_DATE_CURRENT_YEAR: 8, + + FILTER_STATUS_INCOMPLETE: 1, + FILTER_STATUS_IN_PROGRESS: 2, + FILTER_STATUS_COMPLETED_TODAY: 4, + FILTER_STATUS_COMPLETED_BEFORE: 8, + FILTER_STATUS_ALL: 15, + + FILTER_DUE_PAST: 1, + FILTER_DUE_TODAY: 2, + FILTER_DUE_FUTURE: 4, + FILTER_DUE_NONE: 8, + FILTER_DUE_ALL: 15, + + FILTER_OCCURRENCES_BOUND: 0, + FILTER_OCCURRENCES_NONE: 1, + FILTER_OCCURRENCES_PAST_AND_NEXT: 2, + + start: null, + end: null, + due: null, + status: null, + category: null, + occurrences: null, + + onfilter: null, + + equals(aFilterProps) { + if (!(aFilterProps instanceof calFilterProperties)) { + return false; + } + let props = ["start", "end", "due", "status", "category", "occurrences", "onfilter"]; + return props.every(function (prop) { + return this[prop] == aFilterProps[prop]; + }, this); + }, + + clone() { + let cloned = new calFilterProperties(); + let props = ["start", "end", "due", "status", "category", "occurrences", "onfilter"]; + props.forEach(function (prop) { + cloned[prop] = this[prop]; + }, this); + + return cloned; + }, + + LOG(aString) { + cal.LOG( + "[calFilterProperties] " + + (aString || "") + + " start=" + + this.start + + " end=" + + this.end + + " status=" + + this.status + + " due=" + + this.due + + " category=" + + this.category + ); + }, +}; + +/** + * Object that allows filtering of a set of items using a set of filter properties. A set + * of property filters may be defined by a filter name, which may then be used to apply + * the defined filter properties. A set of commonly used property filters are predefined. + */ +function calFilter() { + this.wrappedJSObject = this; + this.mFilterProperties = new calFilterProperties(); + this.initDefinedFilters(); + this.mMaxIterations = Services.prefs.getIntPref("calendar.filter.maxiterations", 50); +} + +calFilter.prototype = { + mStartDate: null, + mEndDate: null, + mItemType: Ci.calICalendar.ITEM_FILTER_TYPE_ALL, + mSelectedDate: null, + mFilterText: "", + mDefinedFilters: {}, + mFilterProperties: null, + mToday: null, + mTomorrow: null, + mMaxIterations: 50, + + /** + * Initializes the predefined filters. + */ + initDefinedFilters() { + let filters = [ + "all", + "notstarted", + "overdue", + "open", + "completed", + "throughcurrent", + "throughtoday", + "throughsevendays", + "today", + "thisCalendarMonth", + "future", + "current", + "currentview", + ]; + filters.forEach(function (filter) { + if (!(filter in this.mDefinedFilters)) { + this.defineFilter(filter, this.getPreDefinedFilterProperties(filter)); + } + }, this); + }, + + /** + * Gets the filter properties for a predefined filter. + * + * @param aFilter The name of the filter to retrieve the filter properties for. + * @result The filter properties for the specified filter, or null if the filter + * not predefined. + */ + getPreDefinedFilterProperties(aFilter) { + let props = new calFilterProperties(); + + if (!aFilter) { + return props; + } + + switch (aFilter) { + // Predefined Task filters + case "notstarted": + props.status = props.FILTER_STATUS_INCOMPLETE; + props.due = props.FILTER_DUE_ALL; + props.start = props.FILTER_DATE_ALL; + props.end = props.FILTER_DATE_SELECTED_OR_NOW; + break; + case "overdue": + props.status = props.FILTER_STATUS_INCOMPLETE | props.FILTER_STATUS_IN_PROGRESS; + props.due = props.FILTER_DUE_PAST; + props.start = props.FILTER_DATE_ALL; + props.end = props.FILTER_DATE_SELECTED_OR_NOW; + break; + case "open": + props.status = props.FILTER_STATUS_INCOMPLETE | props.FILTER_STATUS_IN_PROGRESS; + props.due = props.FILTER_DUE_ALL; + props.start = props.FILTER_DATE_ALL; + props.end = props.FILTER_DATE_ALL; + props.occurrences = props.FILTER_OCCURRENCES_PAST_AND_NEXT; + break; + case "completed": + props.status = props.FILTER_STATUS_COMPLETED_TODAY | props.FILTER_STATUS_COMPLETED_BEFORE; + props.due = props.FILTER_DUE_ALL; + props.start = props.FILTER_DATE_ALL; + props.end = props.FILTER_DATE_SELECTED_OR_NOW; + break; + case "throughcurrent": + props.status = + props.FILTER_STATUS_INCOMPLETE | + props.FILTER_STATUS_IN_PROGRESS | + props.FILTER_STATUS_COMPLETED_TODAY; + props.due = props.FILTER_DUE_ALL; + props.start = props.FILTER_DATE_ALL; + props.end = props.FILTER_DATE_SELECTED_OR_NOW; + break; + case "throughtoday": + props.status = + props.FILTER_STATUS_INCOMPLETE | + props.FILTER_STATUS_IN_PROGRESS | + props.FILTER_STATUS_COMPLETED_TODAY; + props.due = props.FILTER_DUE_ALL; + props.start = props.FILTER_DATE_ALL; + props.end = props.FILTER_DATE_TODAY; + break; + case "throughsevendays": + props.status = + props.FILTER_STATUS_INCOMPLETE | + props.FILTER_STATUS_IN_PROGRESS | + props.FILTER_STATUS_COMPLETED_TODAY; + props.due = props.FILTER_DUE_ALL; + props.start = props.FILTER_DATE_ALL; + props.end = "P7D"; + break; + + // Predefined Event filters + case "today": + props.start = props.FILTER_DATE_TODAY; + props.end = props.FILTER_DATE_TODAY; + break; + case "thisCalendarMonth": + props.start = props.FILTER_DATE_CURRENT_MONTH; + props.end = props.FILTER_DATE_CURRENT_MONTH; + break; + case "future": + props.start = props.FILTER_DATE_NOW; + props.end = props.FILTER_DATE_ALL; + break; + case "current": + props.start = props.FILTER_DATE_SELECTED; + props.end = props.FILTER_DATE_SELECTED; + break; + case "currentview": + props.start = props.FILTER_DATE_VIEW; + props.end = props.FILTER_DATE_VIEW; + break; + + case "all": + default: + props.status = props.FILTER_STATUS_ALL; + props.due = props.FILTER_DUE_ALL; + props.start = props.FILTER_DATE_ALL; + props.end = props.FILTER_DATE_ALL; + } + + return props; + }, + + /** + * Defines a set of filter properties so that they may be applied by the filter name. If + * the specified filter name is already defined, it's associated filter properties will be + * replaced. + * + * @param aFilterName The name to define the filter properties as. + * @param aFilterProperties The filter properties to define. + */ + defineFilter(aFilterName, aFilterProperties) { + if (!(aFilterProperties instanceof calFilterProperties)) { + return; + } + + this.mDefinedFilters[aFilterName] = aFilterProperties; + }, + + /** + * Returns the set of filter properties that were previously defined by a filter name. + * + * @param aFilter The filter name of the defined filter properties. + * @returns The properties defined by the filter name, or null if + * the filter name was not previously defined. + */ + getDefinedFilterProperties(aFilter) { + if (aFilter in this.mDefinedFilters) { + return this.mDefinedFilters[aFilter].clone(); + } + return null; + }, + + /** + * Returns the filter name that a set of filter properties were previously defined as. + * + * @param aFilterProperties The filter properties previously defined. + * @returns The name of the first filter name that the properties + * were defined as, or null if the filter properties were + * not previously defined. + */ + getDefinedFilterName(aFilterProperties) { + for (let filter in this.mDefinedFilters) { + if (this.mDefinedFilters[filter].equals(aFilterProperties)) { + return filter; + } + } + return null; + }, + + /** + * Checks if the item matches the current filter text + * + * @param aItem The item to check. + * @returns Returns true if the item matches the filter text or no + * filter text has been set, false otherwise. + */ + textFilter(aItem) { + if (!this.mFilterText) { + return true; + } + + let searchText = this.mFilterText.toLowerCase(); + + if (!searchText.length || searchText.match(/^\s*$/)) { + return true; + } + + // TODO: Support specifying which fields to search on + for (let field of ["SUMMARY", "DESCRIPTION", "LOCATION", "URL"]) { + let val = aItem.getProperty(field); + if (val && val.toLowerCase().includes(searchText)) { + return true; + } + } + + return aItem.getCategories().some(cat => cat.toLowerCase().includes(searchText)); + }, + + /** + * Checks if the item matches the current filter date range. + * + * @param aItem The item to check. + * @returns Returns true if the item falls within the date range + * specified by mStartDate and mEndDate, false otherwise. + */ + dateRangeFilter(aItem) { + return !!cal.item.checkIfInRange(aItem, this.mStartDate, this.mEndDate); + }, + + /** + * Checks if the item matches the currently applied filter properties. Filter properties + * with a value of null or that are not applicable to the item's type are not tested. + * + * @param aItem The item to check. + * @returns Returns true if the item matches the filter properties + * currently applied, false otherwise. + */ + propertyFilter(aItem) { + let result; + let props = this.mFilterProperties; + if (!props) { + return false; + } + + // the today and tomorrow properties are precalculated in the updateFilterDates function + // for better performance when filtering batches of items. + let today = this.mToday; + if (!today) { + today = cal.dtz.now(); + today.isDate = true; + } + + let tomorrow = this.mTomorrow; + if (!tomorrow) { + tomorrow = today.clone(); + tomorrow.day++; + } + + // test the date range of the applied filter. + result = this.dateRangeFilter(aItem); + + // test the category property. If the property value is an array, only one category must + // match. + if (result && props.category) { + let cats = []; + + if (typeof props.category == "string") { + cats.push(props.category); + } else if (Array.isArray(props.category)) { + cats = props.category; + } + result = cats.some(cat => aItem.getCategories().includes(cat)); + } + + // test the status property. Only applies to tasks. + if (result && props.status != null && aItem.isTodo()) { + let completed = aItem.isCompleted; + let current = !aItem.completedDate || today.compare(aItem.completedDate) <= 0; + let percent = aItem.percentComplete || 0; + + result = + (props.status & props.FILTER_STATUS_INCOMPLETE || !(!completed && percent == 0)) && + (props.status & props.FILTER_STATUS_IN_PROGRESS || !(!completed && percent > 0)) && + (props.status & props.FILTER_STATUS_COMPLETED_TODAY || !(completed && current)) && + (props.status & props.FILTER_STATUS_COMPLETED_BEFORE || !(completed && !current)); + } + + // test the due property. Only applies to tasks. + if (result && props.due != null && aItem.isTodo()) { + let due = aItem.dueDate; + let now = cal.dtz.now(); + + result = + (props.due & props.FILTER_DUE_PAST || !(due && due.compare(now) < 0)) && + (props.due & props.FILTER_DUE_TODAY || + !(due && due.compare(now) >= 0 && due.compare(tomorrow) < 0)) && + (props.due & props.FILTER_DUE_FUTURE || !(due && due.compare(tomorrow) >= 0)) && + (props.due & props.FILTER_DUE_NONE || !(due == null)); + } + + // Call the filter properties onfilter callback if set. The return value of the + // callback function will override the result of this function. + if (props.onfilter && typeof props.onfilter == "function") { + return props.onfilter(aItem, result, props, this); + } + + return result; + }, + + /** + * Checks if the item matches the expected item type. + * + * @param {calIItemBase} aItem - The item to check. + * @returns {boolean} - True if the item matches the item type, false otherwise. + */ + itemTypeFilter(aItem) { + if (aItem.isTodo() && this.mItemType & Ci.calICalendar.ITEM_FILTER_TYPE_TODO) { + // If `mItemType` doesn't specify a completion status, the item passes. + if ((this.mItemType & Ci.calICalendar.ITEM_FILTER_COMPLETED_ALL) == 0) { + return true; + } + + // Otherwise, check it matches the completion status(es). + if (aItem.isCompleted) { + return (this.mItemType & Ci.calICalendar.ITEM_FILTER_COMPLETED_YES) != 0; + } + return (this.mItemType & Ci.calICalendar.ITEM_FILTER_COMPLETED_NO) != 0; + } + if (aItem.isEvent() && this.mItemType & Ci.calICalendar.ITEM_FILTER_TYPE_EVENT) { + return true; + } + return false; + }, + + /** + * Calculates the date from a date filter property. + * + * @param prop The value of the date filter property to calculate for. May + * be a constant specifying a relative date range, or a string + * representing a duration offset from the current date time. + * @param start If true, the function will return the date value for the + * start of the relative date range, otherwise it will return the + * date value for the end of the date range. + * @returns The calculated date for the property. + */ + getDateForProperty(prop, start) { + let props = this.mFilterProperties || new calFilterProperties(); + let result = null; + let selectedDate = this.mSelectedDate || currentView().selectedDay || cal.dtz.now(); + let nowDate = cal.dtz.now(); + + if (typeof prop == "string") { + let duration = cal.createDuration(prop); + if (duration) { + result = nowDate; + result.addDuration(duration); + } + } else { + switch (prop) { + case props.FILTER_DATE_ALL: + result = null; + break; + case props.FILTER_DATE_VIEW: + result = start ? currentView().startDay.clone() : currentView().endDay.clone(); + break; + case props.FILTER_DATE_SELECTED: + result = selectedDate.clone(); + result.isDate = true; + break; + case props.FILTER_DATE_SELECTED_OR_NOW: { + result = selectedDate.clone(); + let resultJSDate = cal.dtz.dateTimeToJsDate(result); + let nowJSDate = cal.dtz.dateTimeToJsDate(nowDate); + if ((start && resultJSDate > nowJSDate) || (!start && resultJSDate < nowJSDate)) { + result = nowDate; + } + result.isDate = true; + break; + } + case props.FILTER_DATE_NOW: + result = nowDate; + break; + case props.FILTER_DATE_TODAY: + result = nowDate; + result.isDate = true; + break; + case props.FILTER_DATE_CURRENT_WEEK: + result = start ? nowDate.startOfWeek : nowDate.endOfWeek; + break; + case props.FILTER_DATE_CURRENT_MONTH: + result = start ? nowDate.startOfMonth : nowDate.endOfMonth; + break; + case props.FILTER_DATE_CURRENT_YEAR: + result = start ? nowDate.startOfYear : nowDate.endOfYear; + break; + } + + // date ranges are inclusive, so we need to include the day for the end date + if (!start && result && prop != props.FILTER_DATE_NOW) { + result.day++; + } + } + + return result; + }, + + /** + * Calculates the current start and end dates for the currently applied filter. + * + * @returns The current [startDate, endDate] for the applied filter. + */ + getDatesForFilter() { + let startDate = null; + let endDate = null; + + if (this.mFilterProperties) { + startDate = this.getDateForProperty(this.mFilterProperties.start, true); + endDate = this.getDateForProperty(this.mFilterProperties.end, false); + + // swap the start and end dates if necessary + if (startDate && endDate && startDate.compare(endDate) > 0) { + let swap = startDate; + endDate = startDate; + startDate = swap; + } + } + + return [startDate, endDate]; + }, + + /** + * Gets the start date for the current filter date range. + * + * @return: The start date of the current filter date range, or null if + * the date range has an unbound start date. + */ + get startDate() { + return this.mStartDate; + }, + + /** + * Sets the start date for the current filter date range. This will override the date range + * calculated from the filter properties by the getDatesForFilter function. + */ + set startDate(aStartDate) { + this.mStartDate = aStartDate; + }, + + /** + * Gets the end date for the current filter date range. + * + * @return: The end date of the current filter date range, or null if + * the date range has an unbound end date. + */ + get endDate() { + return this.mEndDate; + }, + + /** + * Sets the end date for the current filter date range. This will override the date range + * calculated from the filter properties by the getDatesForFilter function. + */ + set endDate(aEndDate) { + this.mEndDate = aEndDate; + }, + + /** + * Gets the current item type filter. + */ + get itemType() { + return this.mItemType; + }, + + /** + * One of the calICalendar.ITEM_FILTER_TYPE constants, optionally bitwise-OR-ed with a + * calICalendar.ITEM_FILTER_COMPLETED value. Only items of this type will pass the filter. + * + * If an ITEM_FILTER_COMPLETED bit is set it will will take priority over applyFilter. + */ + set itemType(aItemType) { + this.mItemType = aItemType; + }, + + /** + * Gets the value used to perform the text filter. + */ + get filterText() { + return this.mFilterText; + }, + + /** + * Sets the value used to perform the text filter. + * + * @param aValue The string value to use for the text filter. + */ + set filterText(aValue) { + this.mFilterText = aValue; + }, + + /** + * Gets the selected date used by the getDatesForFilter function to calculate date ranges + * that are relative to the selected date. + */ + get selectedDate() { + return this.mSelectedDate; + }, + + /** + * Sets the selected date used by the getDatesForFilter function to calculate date ranges + * that are relative to the selected date. + */ + set selectedDate(aSelectedDate) { + this.mSelectedDate = aSelectedDate; + }, + + /** + * Gets the currently applied filter properties. + * + * @returns The currently applied filter properties. + */ + get filterProperties() { + return this.mFilterProperties ? this.mFilterProperties.clone() : null; + }, + + /** + * Gets the name of the currently applied filter. + * + * @returns The current defined name of the currently applied filter + * properties, or null if the current properties were not + * previously defined. + */ + get filterName() { + if (!this.mFilterProperties) { + return null; + } + + return this.getDefinedFilterName(this.mFilterProperties); + }, + + /** + * Applies the specified filter. + * + * @param aFilter The filter to apply. May be one of the following types: + * - a calFilterProperties object specifying the filter properties + * - a String representing a previously defined filter name + * - a String representing a duration offset from now + * - a Function to use for the onfilter callback for a custom filter + */ + applyFilter(aFilter) { + this.mFilterProperties = null; + + if (typeof aFilter == "string") { + if (aFilter in this.mDefinedFilters) { + this.mFilterProperties = this.getDefinedFilterProperties(aFilter); + } else { + let dur = cal.createDuration(aFilter); + if (dur.inSeconds > 0) { + this.mFilterProperties = new calFilterProperties(); + this.mFilterProperties.start = this.mFilterProperties.FILTER_DATE_NOW; + this.mFilterProperties.end = aFilter; + } + } + } else if (typeof aFilter == "object" && aFilter instanceof calFilterProperties) { + this.mFilterProperties = aFilter; + } else if (typeof aFilter == "function") { + this.mFilterProperties = new calFilterProperties(); + this.mFilterProperties.onfilter = aFilter; + } else { + this.mFilterProperties = new calFilterProperties(); + } + + if (this.mFilterProperties) { + this.updateFilterDates(); + // this.mFilterProperties.LOG("Applying filter:"); + } else { + cal.WARN("[calFilter] Unable to apply filter " + aFilter); + } + }, + + /** + * Calculates the current start and end dates for the currently applied filter, and updates + * the current filter start and end dates. This function can be used to update the date range + * for date range filters that are relative to the selected date or current date and time. + * + * @returns The current [startDate, endDate] for the applied filter. + */ + updateFilterDates() { + let [startDate, endDate] = this.getDatesForFilter(); + this.mStartDate = startDate; + this.mEndDate = endDate; + + // the today and tomorrow properties are precalculated here + // for better performance when filtering batches of items. + this.mToday = cal.dtz.now(); + this.mToday.isDate = true; + + this.mTomorrow = this.mToday.clone(); + this.mTomorrow.day++; + + return [startDate, endDate]; + }, + + /** + * Filters an array of items, returning a new array containing the items that match + * the currently applied filter properties and text filter. + * + * @param aItems The array of items to check. + * @param aCallback An optional callback function to be called with each item and + * the result of it's filter test. + * @returns A new array containing the items that match the filters, or + * null if no filter has been applied. + */ + filterItems(aItems, aCallback) { + if (!this.mFilterProperties) { + return null; + } + + return aItems.filter(function (aItem) { + let result = this.isItemInFilters(aItem); + + if (aCallback && typeof aCallback == "function") { + aCallback(aItem, result, this.mFilterProperties, this); + } + + return result; + }, this); + }, + + /** + * Checks if the item matches the currently applied filter properties and text filter. + * + * @param aItem The item to check. + * @returns Returns true if the item matches the filters, + * false otherwise. + */ + isItemInFilters(aItem) { + return this.itemTypeFilter(aItem) && this.propertyFilter(aItem) && this.textFilter(aItem); + }, + + /** + * Finds the next occurrence of a repeating item that matches the currently applied + * filter properties. + * + * @param aItem The parent item to find the next occurrence of. + * @returns Returns the next occurrence that matches the filters, + * or null if no match is found. + */ + getNextOccurrence(aItem) { + if (!aItem.recurrenceInfo) { + return this.isItemInFilters(aItem) ? aItem : null; + } + + let count = 0; + let start = cal.dtz.now(); + + // If the base item matches the filter, we need to check each future occurrence. + // Otherwise, we only need to check the exceptions. + if (this.isItemInFilters(aItem)) { + while (count++ < this.mMaxIterations) { + let next = aItem.recurrenceInfo.getNextOccurrence(start); + if (!next) { + // there are no more occurrences + return null; + } + + if (this.isItemInFilters(next)) { + return next; + } + start = next.startDate || next.entryDate; + } + + // we've hit the maximum number of iterations without finding a match + cal.WARN("[calFilter] getNextOccurrence: reached maximum iterations for " + aItem.title); + return null; + } + // the parent item doesn't match the filter, we can return the first future exception + // that matches the filter + let exMatch = null; + aItem.recurrenceInfo.getExceptionIds().forEach(function (rID) { + let ex = aItem.recurrenceInfo.getExceptionFor(rID); + if ( + ex && + cal.dtz.now().compare(ex.startDate || ex.entryDate) < 0 && + this.isItemInFilters(ex) + ) { + exMatch = ex; + } + }, this); + return exMatch; + }, + + /** + * Gets the occurrences of a repeating item that match the currently applied + * filter properties and date range. + * + * @param aItem The parent item to find occurrence of. + * @returns Returns an array containing the occurrences that + * match the filters, an empty array if there are no + * matches, or null if the filter is not initialized. + */ + getOccurrences(aItem) { + if (!this.mFilterProperties) { + return null; + } + let props = this.mFilterProperties; + let occs; + + if ( + !aItem.recurrenceInfo || + (!props.occurrences && !this.mEndDate) || + props.occurrences == props.FILTER_OCCURRENCES_NONE + ) { + // either this isn't a repeating item, the occurrence filter specifies that + // we don't want occurrences, or we have a default occurrence filter with an + // unbound date range, so we return just the unexpanded item. + occs = [aItem]; + } else { + occs = aItem.getOccurrencesBetween( + this.mStartDate || cal.createDateTime(), + this.mEndDate || cal.dtz.now() + ); + if (props.occurrences == props.FILTER_OCCURRENCES_PAST_AND_NEXT && !this.mEndDate) { + // we have an unbound date range and the occurrence filter specifies + // that we also want the next matching occurrence if available. + let next = this.getNextOccurrence(aItem); + if (next) { + occs.push(next); + } + } + } + + return this.filterItems(occs); + }, + + /** + * Gets the items matching the currently applied filter properties from a calendar. + * + * @param {calICalendar} aCalendar - The calendar to get items from. + * @returns {ReadableStream<calIItemBase>} A stream of returned values. + */ + getItems(aCalendar) { + if (!this.mFilterProperties) { + return CalReadableStreamFactory.createEmptyReadableStream(); + } + let props = this.mFilterProperties; + + // Build the filter argument for calICalendar.getItems() from the filter properties. + let filter = this.mItemType; + + // For tasks, if `mItemType` doesn't specify a completion status, add one. + if ( + filter & Ci.calICalendar.ITEM_FILTER_TYPE_TODO && + (filter & Ci.calICalendar.ITEM_FILTER_COMPLETED_ALL) == 0 + ) { + if ( + !props.status || + props.status & (props.FILTER_STATUS_COMPLETED_TODAY | props.FILTER_STATUS_COMPLETED_BEFORE) + ) { + filter |= Ci.calICalendar.ITEM_FILTER_COMPLETED_YES; + } + if ( + !props.status || + props.status & (props.FILTER_STATUS_INCOMPLETE | props.FILTER_STATUS_IN_PROGRESS) + ) { + filter |= Ci.calICalendar.ITEM_FILTER_COMPLETED_NO; + } + } + + if (!filter) { + return CalReadableStreamFactory.createEmptyReadableStream(); + } + + let startDate = this.startDate; + let endDate = this.endDate; + + // We only want occurrences returned from calICalendar.getItems() with a default + // occurrence filter property and a bound date range, otherwise the local listener + // will handle occurrence expansion. + if (!props.occurrences && this.endDate) { + filter |= Ci.calICalendar.ITEM_FILTER_CLASS_OCCURRENCES; + startDate = startDate || cal.createDateTime(); + endDate = endDate || cal.dtz.now(); + } + + // We use a local ReadableStream for the calICalendar.getItems() call, and use it + // to handle occurrence expansion and filter the results before forwarding them + // upstream. + return CalReadableStreamFactory.createMappedReadableStream( + aCalendar.getItems(filter, 0, startDate, endDate), + chunk => { + let items; + if (props.occurrences == props.FILTER_OCCURRENCES_PAST_AND_NEXT) { + // with the FILTER_OCCURRENCES_PAST_AND_NEXT occurrence filter we will + // get parent items returned here, so we need to let the getOccurrences + // function handle occurrence expansion. + items = []; + for (let item of chunk) { + items = items.concat(this.getOccurrences(item)); + } + } else { + // with other occurrence filters the calICalendar.getItems() function will + // return expanded occurrences appropriately, we only need to filter them. + items = this.filterItems(chunk); + } + return items; + } + ); + }, +}; + +/** + * A mixin to use as a base class for calendar widgets. + * + * With startDate, endDate, and itemType set this mixin will inform the widget + * of any calendar item within the range that needs to be added to, or removed + * from, the UI. Widgets should implement clearItems, addItems, removeItems, + * and removeItemsFromCalendar to receive this information. + * + * To update the display (e.g. if the user wants to display a different month), + * just set the new date values and call refreshItems(). + * + * This mixin handles disabled and/or hidden calendars, so you don't have to. + * + * @note Instances must have an `id` for logging purposes. + */ +let CalendarFilteredViewMixin = Base => + class extends Base { + /** + * The filter responsible for collecting items when this view is refreshed, + * and checking new items as they appear. + * + * @type {calFilter} + */ + #filter = null; + + /** + * An object representing the most recent refresh job. + * This is used to check if a job that completes is still the most recent. + * + * @type {?object} + */ + #currentRefresh = null; + + /** + * The current PromiseUtils.jsm `Deferred` object (containing a Promise + * and methods to resolve/reject it). + * + * @type {object} + */ + #deferred = PromiseUtils.defer(); + + /** + * Any async iterator currently reading from a calendar. + * + * @type {Set<CalReadableStreamIterator>} + */ + #iterators = new Set(); + + constructor(...args) { + super(...args); + + this.#filter = new calFilter(); + this.#filter.itemType = 0; + } + + /** + * A Promise that resolves when the next refreshing of items is complete, + * or instantly if refreshing is already complete and still valid. + * + * Changes to the startDate, endDate, or itemType properties, or a call to + * refreshItems with the force argument, will delay this Promise until the + * refresh settles for the new values. + * + * @type {Promise} + */ + get ready() { + return this.#deferred.promise; + } + + /** + * The start of the filter range. Can be either a date or a datetime. + * + * @type {calIDateTime} + */ + get startDate() { + return this.#filter.startDate; + } + + set startDate(value) { + if ( + this.startDate?.compare(value) == 0 && + this.startDate.timezone.tzid == value.timezone.tzid + ) { + return; + } + + this.#filter.startDate = value.clone(); + this.#filter.startDate.makeImmutable(); + this.#invalidate(); + } + + /** + * The end of the filter range. Can be either a date or a datetime. + * If it is a date, the filter won't include items on that date, so use the + * day after the last day to be displayed. + * + * @type {calIDateTime} + */ + get endDate() { + return this.#filter.endDate; + } + + set endDate(value) { + if (this.endDate?.compare(value) == 0 && this.endDate.timezone.tzid == value.timezone.tzid) { + return; + } + + this.#filter.endDate = value.clone(); + this.#filter.endDate.makeImmutable(); + this.#invalidate(); + } + + /** + * One of the calICalendar.ITEM_FILTER_TYPE constants. + * This must be set to a non-zero value in order to display any items. + * + * @type {number} + */ + get itemType() { + return this.#filter.itemType; + } + + set itemType(value) { + if (this.itemType == value) { + return; + } + + this.#filter.itemType = value; + this.#invalidate(); + } + + #isActive = false; + + /** + * Whether the view is active. + * + * Whilst the view is active, it will listen for item changes. Otherwise, + * if the view is set to be inactive, it will stop listening for changes. + * + * @type {boolean} + */ + get isActive() { + return this.#isActive; + } + + /** + * Activate the view, refreshing items and listening for changes. + * + * @returns {Promise} a promise which resolves when refresh is complete + */ + activate() { + if (this.#isActive) { + return Promise.resolve(); + } + + this.#isActive = true; + this.#calendarObserver.self = this; + + cal.manager.addCalendarObserver(this.#calendarObserver); + return this.refreshItems(); + } + + /** + * Deactivate the view, cancelling any in-progress refresh and causing it to + * no longer listen for changes. + */ + deactivate() { + if (!this.#isActive) { + return; + } + + this.#isActive = false; + this.#calendarObserver.self = this; + + cal.manager.removeCalendarObserver(this.#calendarObserver); + this.#invalidate(); + } + + /** + * Clears the display and adds items that match the filter from all enabled + * and visible calendars. + * + * @param {boolean} force - Start refreshing again, even if a refresh is already in progress. + * @returns {Promise} A Promise resolved when all calendars have refreshed. This is the same + * Promise as returned from the `ready` getter. + */ + refreshItems(force = false) { + if (!this.#isActive) { + // If we're inactive, calling #refreshCalendar() will do nothing, but we + // will have created a refresh job with no effect and subsequent refresh + // attempts will fail. + return Promise.resolve(); + } else if (force) { + // Refresh, even if already refreshing or refreshed. + this.#invalidate(); + } else if (this.#currentRefresh) { + // We already have an ongoing refresh job, or one that has already completed. + return this.#deferred.promise; + } + + // Create a new refresh job. + let refresh = (this.#currentRefresh = { completed: false }); + + // Collect items from all of the calendars. + this.clearItems(); + let promises = []; + for (let calendar of cal.manager.getCalendars()) { + promises.push(this.#refreshCalendar(calendar)); + } + + Promise.all(promises).then(() => { + refresh.completed = true; + // Resolve the Promise if the current job is still the most recent one. + // In other words, if nothing has called `#invalidate` since `currentRefresh` was created. + if (this.#currentRefresh == refresh) { + this.#deferred.resolve(); + } + }); + + return this.#deferred.promise; + } + + /** + * Cancels any refresh in progress. + */ + #invalidate() { + for (let iterator of this.#iterators) { + iterator.cancel(); + } + this.#iterators.clear(); + if (this.#currentRefresh?.completed) { + // If a previous refresh completed, start a new Promise that resolves when the next refresh + // completes. Otherwise, continue with the current Promise. + // If #currentRefresh is completed, #deferred is already resolved, so we can safely discard it. + this.#deferred = PromiseUtils.defer(); + } + this.#currentRefresh = null; + } + + /** + * Checks if the given calendar is both enabled and visible. + * + * @param {calICalendar} calendar + * @returns {boolean} True if both enabled and visible. + */ + #isCalendarVisible(calendar) { + if (!calendar) { + // If this happens then something's wrong, but it's not our problem so just ignore it. + return false; + } + + return ( + !calendar.getProperty("disabled") && calendar.getProperty("calendar-main-in-composite") + ); + } + + /** + * Adds items that match the filter from a specific calendar. Does NOT + * remove existing items first, use removeItemsFromCalendar for that. + * + * @param {calICalendar} calendar + * @returns {Promise} A promise resolved when this calendar has refreshed. + */ + async #refreshCalendar(calendar) { + if (!this.#isActive || !this.itemType || !this.#isCalendarVisible(calendar)) { + return; + } + let iterator = cal.iterate.streamValues(this.#filter.getItems(calendar)); + this.#iterators.add(iterator); + for await (let chunk of iterator) { + this.addItems(chunk); + } + this.#iterators.delete(iterator); + } + + /** + * Implement this method to remove all items from the UI. + */ + clearItems() {} + + /** + * Implement this method to add items to the UI. + * + * @param {calIItemBase[]} items + */ + addItems(items) {} + + /** + * Implement this method to remove items from the UI. + * + * @param {calIItemBase[]} items + */ + removeItems(items) {} + + /** + * Implement this method to remove all items from a specific calendar from + * the UI. + * + * @param {string} calendarId + */ + removeItemsFromCalendar(calendarId) {} + + /** + * @implements {calIObserver} + */ + #calendarObserver = { + QueryInterface: ChromeUtils.generateQI(["calIObserver"]), + + onStartBatch(calendar) {}, + onEndBatch(calendar) {}, + onLoad(calendar) { + if (calendar.type == "ics") { + // ICS doesn't bother telling us about events that disappeared when + // sync'ing, so just throw them all out and reload. This should get + // fixed somehow, and this hack removed. + this.self.removeItemsFromCalendar(calendar.id); + this.self.#refreshCalendar(calendar); + } + }, + onAddItem(item) { + if (!this.self.#isCalendarVisible(item.calendar)) { + return; + } + + let occurrences = this.self.#filter.getOccurrences(item); + if (occurrences.length) { + this.self.addItems(occurrences); + } + }, + onModifyItem(newItem, oldItem) { + if (!this.self.#isCalendarVisible(newItem.calendar)) { + return; + } + + // Ideally we'd calculate the intersection between oldOccurrences and + // newOccurrences, then call a modifyItems function, but it proved + // unreliable in some situations, so instead we remove and replace + // the occurrences. + + let oldOccurrences = this.self.#filter.getOccurrences(oldItem); + if (oldOccurrences.length) { + this.self.removeItems(oldOccurrences); + } + + let newOccurrences = this.self.#filter.getOccurrences(newItem); + if (newOccurrences.length) { + this.self.addItems(newOccurrences); + } + }, + onDeleteItem(deletedItem) { + if (!this.self.#isCalendarVisible(deletedItem.calendar)) { + return; + } + + this.self.removeItems(this.self.#filter.getOccurrences(deletedItem)); + }, + onError(calendar, errNo, message) {}, + onPropertyChanged(calendar, name, newValue, oldValue) { + if (!["calendar-main-in-composite", "disabled"].includes(name)) { + return; + } + + if ( + (name == "disabled" && newValue) || + (name == "calendar-main-in-composite" && !newValue) + ) { + this.self.removeItemsFromCalendar(calendar.id); + return; + } + + this.self.#refreshCalendar(calendar); + }, + onPropertyDeleting(calendar, name) {}, + }; + }; diff --git a/comm/calendar/base/content/widgets/calendar-invitation-panel.js b/comm/calendar/base/content/widgets/calendar-invitation-panel.js new file mode 100644 index 0000000000..aa2be5e29f --- /dev/null +++ b/comm/calendar/base/content/widgets/calendar-invitation-panel.js @@ -0,0 +1,799 @@ +/* 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/. */ + +/* globals cal, openLinkExternally, MozXULElement, MozElements */ + +"use strict"; + +// Wrap in a block to prevent leaking to window scope. +{ + var { recurrenceRule2String } = ChromeUtils.import( + "resource:///modules/calendar/calRecurrenceUtils.jsm" + ); + + // calendar-invitation-panel.ftl is not globally loaded until now. + MozXULElement.insertFTLIfNeeded("calendar/calendar-invitation-panel.ftl"); + + const PROPERTY_REMOVED = -1; + const PROPERTY_UNCHANGED = 0; + const PROPERTY_ADDED = 1; + const PROPERTY_MODIFIED = 2; + + /** + * InvitationPanel displays the details of an iTIP event invitation in an + * interactive panel. + */ + class InvitationPanel extends HTMLElement { + static MODE_NEW = "New"; + static MODE_ALREADY_PROCESSED = "Processed"; + static MODE_UPDATE_MAJOR = "UpdateMajor"; + static MODE_UPDATE_MINOR = "UpdateMinor"; + static MODE_CANCELLED = "Cancelled"; + static MODE_CANCELLED_NOT_FOUND = "CancelledNotFound"; + + /** + * Used to retrieve a property value from an event. + * + * @callback GetValue + * @param {calIEvent} event + * @returns {string} + */ + + /** + * A function used to make a property value visible in to the user. + * + * @callback PropertyShow + * @param {HTMLElement} node - The element responsible for displaying the + * value. + * @param {string} value - The value of property to display. + * @param {string} oldValue - The previous value of the property if the + * there is a prior copy of the event. + * @param {calIEvent} item - The event item the property belongs to. + * @param {string} oldItem - The prior version of the event if there is one. + */ + + /** + * @typedef {Object} InvitationPropertyDescriptor + * @property {string} id - The id of the HTMLElement that displays + * the property. + * @property {GetValue} getValue - Function used to retrieve the displayed + * value of the property from the item. + * @property {boolean?} isList - Indicates the value of the property is a + * list. + * @property {PropertyShow?} show - Function to use to display the property + * value if it is not a list. + */ + + /** + * A static list of objects used in determining how to display each of the + * properties. + * + * @type {PropertyDescriptor[]} + */ + static propertyDescriptors = [ + { + id: "when", + getValue(item) { + let tz = cal.dtz.defaultTimezone; + let startDate = item.startDate?.getInTimezone(tz) ?? null; + let endDate = item.endDate?.getInTimezone(tz) ?? null; + return `${startDate.icalString}-${endDate?.icalString}`; + }, + show(intervalNode, newValue, oldValue, item) { + intervalNode.item = item; + }, + }, + { + id: "recurrence", + getValue(item) { + let parent = item.parentItem; + if (!parent.recurrenceInfo) { + return null; + } + return recurrenceRule2String(parent.recurrenceInfo, parent.recurrenceStartDate); + }, + show(recurrence, value) { + recurrence.appendChild(document.createTextNode(value)); + }, + }, + { + id: "location", + getValue(item) { + return item.getProperty("LOCATION"); + }, + show(location, value) { + location.appendChild(cal.view.textToHtmlDocumentFragment(value, document)); + }, + }, + { + id: "summary", + getValue(item) { + return item.getAttendees(); + }, + show(summary, value) { + summary.attendees = value; + }, + }, + { + id: "attendees", + isList: true, + getValue(item) { + return item.getAttendees(); + }, + }, + { + id: "attachments", + isList: true, + getValue(item) { + return item.getAttachments(); + }, + }, + { + id: "description", + getValue(item) { + return item.descriptionText; + }, + show(description, value) { + description.appendChild(cal.view.textToHtmlDocumentFragment(value, document)); + }, + }, + ]; + + /** + * mode determines how the UI should display the received invitation. It + * must be set to one of the MODE_* constants, defaults to MODE_NEW. + * + * @type {string} + */ + mode = InvitationPanel.MODE_NEW; + + /** + * A previous copy of the event item if found on an existing calendar. + * + * @type {calIEvent?} + */ + foundItem; + + /** + * The event item to be displayed. + * + * @type {calIEvent?} + */ + item; + + constructor(id) { + super(); + this.attachShadow({ mode: "open" }); + document.l10n.connectRoot(this.shadowRoot); + + let link = document.createElement("link"); + link.rel = "stylesheet"; + link.href = "chrome://calendar/skin/shared/widgets/calendar-invitation-panel.css"; + this.shadowRoot.appendChild(link); + } + + /** + * Compares two like property values, an old and a new one, to determine + * what type of change has been made (if any). + * + * @param {any} oldValue + * @param {any} newValue + * @returns {number} - One of the PROPERTY_* constants. + */ + compare(oldValue, newValue) { + if (!oldValue && newValue) { + return PROPERTY_ADDED; + } + if (oldValue && !newValue) { + return PROPERTY_REMOVED; + } + return oldValue != newValue ? PROPERTY_MODIFIED : PROPERTY_UNCHANGED; + } + + connectedCallback() { + if (this.item && this.mode) { + let template = document.getElementById(`calendarInvitationPanel`); + this.shadowRoot.appendChild(template.content.cloneNode(true)); + + if (this.foundItem && this.foundItem.title != this.item.title) { + let indicator = this.shadowRoot.getElementById("titleChangeIndicator"); + indicator.status = PROPERTY_MODIFIED; + indicator.hidden = false; + } + this.shadowRoot.getElementById("title").textContent = this.item.title; + + let statusBar = this.shadowRoot.querySelector("calendar-invitation-panel-status-bar"); + statusBar.status = this.mode; + + this.shadowRoot.querySelector("calendar-minidate").date = this.item.startDate; + + for (let prop of InvitationPanel.propertyDescriptors) { + let el = this.shadowRoot.getElementById(prop.id); + let value = prop.getValue(this.item); + let result = PROPERTY_UNCHANGED; + + if (prop.isList) { + let oldValue = this.foundItem ? prop.getValue(this.foundItem) : []; + if (value.length || oldValue.length) { + el.oldValue = oldValue; + el.value = value; + el.closest(".calendar-invitation-row").hidden = false; + } + continue; + } + + let oldValue = this.foundItem ? prop.getValue(this.foundItem) : null; + if (this.foundItem) { + result = this.compare(oldValue, value); + if (result) { + let indicator = this.shadowRoot.getElementById(`${prop.id}ChangeIndicator`); + if (indicator) { + indicator.type = result; + indicator.hidden = false; + } + } + } + if (value || oldValue) { + prop.show(el, value, oldValue, this.item, this.foundItem, result); + el.closest(".calendar-invitation-row").hidden = false; + } + } + + if ( + this.mode == InvitationPanel.MODE_NEW || + this.mode == InvitationPanel.MODE_UPDATE_MAJOR + ) { + for (let button of this.shadowRoot.querySelectorAll("#actionButtons > button")) { + button.addEventListener("click", e => + this.dispatchEvent( + new CustomEvent("calendar-invitation-panel-action", { + detail: { type: button.dataset.action }, + }) + ) + ); + } + this.shadowRoot.getElementById("footer").hidden = false; + } + } + } + } + customElements.define("calendar-invitation-panel", InvitationPanel); + + /** + * Object used to describe relevant arguments to MozElements.NotificationBox. + * appendNotification(). + * @type {Object} InvitationStatusBarDescriptor + * @property {string} label - An l10n id used used to generate the notification + * bar text. + * @property {number} priority - One of the notification box constants that + * indicate the priority of a notification. + * @property {object[]} buttons - An array of objects corresponding to the + * "buttons" argument of MozElements.NotificationBox.appendNotification(). + * See that method for details. + */ + + /** + * InvitationStatusBar generates a notification bar that informs the user about + * the status of the received invitation and possible actions they may take. + */ + class InvitationPanelStatusBar extends HTMLElement { + /** + * @type {NotificationBox} + */ + get notificationBox() { + if (!this._notificationBox) { + this._notificationBox = new MozElements.NotificationBox(element => { + this.append(element); + }); + } + return this._notificationBox; + } + + /** + * Map-like object where each key is an InvitationPanel mode and the values + * are descriptors used to generate the notification bar for that mode. + * + * @type {Object.<string, InvitationStatusBarDescriptor> + */ + notices = { + [InvitationPanel.MODE_NEW]: { + label: "calendar-invitation-panel-status-new", + buttons: [ + { + "l10n-id": "calendar-invitation-panel-more-button", + callback: (notification, opts, button, event) => + this._showMoreMenu(event, [ + { + l10nId: "calendar-invitation-panel-menu-item-save-copy", + name: "save", + command: e => + this.dispatchEvent( + new CustomEvent("calendar-invitation-panel-action", { + details: { type: "x-savecopy" }, + bubbles: true, + composed: true, + }) + ), + }, + ]), + }, + ], + }, + [InvitationPanel.MODE_ALREADY_PROCESSED]: { + label: "calendar-invitation-panel-status-processed", + buttons: [ + { + "l10n-id": "calendar-invitation-panel-view-button", + callback: () => { + this.dispatchEvent( + new CustomEvent("calendar-invitation-panel-action", { + detail: { type: "x-showdetails" }, + bubbles: true, + composed: true, + }) + ); + return true; + }, + }, + ], + }, + [InvitationPanel.MODE_UPDATE_MINOR]: { + label: "calendar-invitation-panel-status-updateminor", + priority: this.notificationBox.PRIORITY_WARNING_LOW, + buttons: [ + { + "l10n-id": "calendar-invitation-panel-update-button", + callback: () => { + this.dispatchEvent( + new CustomEvent("calendar-invitation-panel-action", { + detail: { type: "update" }, + bubbles: true, + composed: true, + }) + ); + return true; + }, + }, + ], + }, + [InvitationPanel.MODE_UPDATE_MAJOR]: { + label: "calendar-invitation-panel-status-updatemajor", + priority: this.notificationBox.PRIORITY_WARNING_LOW, + }, + [InvitationPanel.MODE_CANCELLED]: { + label: "calendar-invitation-panel-status-cancelled", + buttons: [{ "l10n-id": "calendar-invitation-panel-delete-button" }], + priority: this.notificationBox.PRIORITY_CRITICAL_LOW, + }, + [InvitationPanel.MODE_CANCELLED_NOT_FOUND]: { + label: "calendar-invitation-panel-status-cancelled-notfound", + priority: this.notificationBox.PRIORITY_CRITICAL_LOW, + }, + }; + + /** + * status corresponds to one of the MODE_* constants and will trigger + * rendering of the notification box. + * + * @type {string} status + */ + set status(value) { + let opts = this.notices[value]; + let priority = opts.priority || this.notificationBox.PRIORITY_INFO_LOW; + let buttons = opts.buttons || []; + let notification = this.notificationBox.appendNotification( + "invitationStatus", + { + label: { "l10n-id": opts.label }, + priority, + }, + buttons + ); + notification.removeAttribute("dismissable"); + } + + _showMoreMenu(event, menuitems) { + let menu = document.getElementById("calendarInvitationPanelMoreMenu"); + menu.replaceChildren(); + for (let { type, l10nId, name, command } of menuitems) { + let menuitem = document.createXULElement("menuitem"); + if (type) { + menuitem.type = type; + } + if (name) { + menuitem.name = name; + } + if (command) { + menuitem.addEventListener("command", command); + } + document.l10n.setAttributes(menuitem, l10nId); + menu.appendChild(menuitem); + } + menu.openPopup(event.originalTarget, "after_start", 0, 0, false, false, event); + return true; + } + } + customElements.define("calendar-invitation-panel-status-bar", InvitationPanelStatusBar); + + /** + * InvitationInterval displays the formatted interval of the event. Formatting + * relies on cal.dtz.formatter.formatIntervalParts(). + */ + class InvitationInterval extends HTMLElement { + /** + * The item whose interval to show. + * + * @type {calIEvent} + */ + set item(value) { + let [startDate, endDate] = cal.dtz.formatter.getItemDates(value); + let timezone = startDate.timezone.displayName; + let parts = cal.dtz.formatter.formatIntervalParts(startDate, endDate); + document.l10n.setAttributes(this, `calendar-invitation-interval-${parts.type}`, { + ...parts, + timezone, + }); + } + } + customElements.define("calendar-invitation-interval", InvitationInterval); + + const partStatOrder = ["ACCEPTED", "DECLINED", "TENTATIVE", "NEEDS-ACTION"]; + + /** + * InvitationPartStatSummary generates text indicating the aggregated + * participation status of each attendee in the event's attendees list. + */ + class InvitationPartStatSummary extends HTMLElement { + constructor() { + super(); + this.appendChild( + document.getElementById("calendarInvitationPartStatSummary").content.cloneNode(true) + ); + } + + /** + * Setting this property will trigger an update of the text displayed. + * + * @type {calIAttendee[]} + */ + set attendees(attendees) { + let counts = { + ACCEPTED: 0, + DECLINED: 0, + TENTATIVE: 0, + "NEEDS-ACTION": 0, + TOTAL: attendees.length, + OTHER: 0, + }; + + for (let { participationStatus } of attendees) { + if (counts.hasOwnProperty(participationStatus)) { + counts[participationStatus]++; + } else { + counts.OTHER++; + } + } + document.l10n.setAttributes( + this.querySelector("#partStatTotal"), + "calendar-invitation-panel-partstat-total", + { count: counts.TOTAL } + ); + + let shownPartStats = partStatOrder.filter(partStat => counts[partStat]); + let breakdown = this.querySelector("#partStatBreakdown"); + for (let partStat of shownPartStats) { + let span = document.createElement("span"); + span.setAttribute("class", "calendar-invitation-panel-partstat-summary"); + + // calendar-invitation-panel-partstat-accepted + // calendar-invitation-panel-partstat-declined + // calendar-invitation-panel-partstat-tentative + // calendar-invitation-panel-partstat-needs-action + document.l10n.setAttributes( + span, + `calendar-invitation-panel-partstat-${partStat.toLowerCase()}`, + { + count: counts[partStat], + } + ); + breakdown.appendChild(span); + } + } + } + customElements.define("calendar-invitation-partstat-summary", InvitationPartStatSummary); + + /** + * BaseInvitationChangeList is a <ul> element that can visually show changes + * between elements of a list value. + * + * @template T + */ + class BaseInvitationChangeList extends HTMLUListElement { + /** + * An array containing the old values to be compared against for changes. + * + * @type {T[]} + */ + oldValue = []; + + /** + * String indicating the type of list items to create. This is passed + * directly to the "is" argument of document.createElement(). + * + * @abstract + */ + listItem; + + _createListItem(value, status) { + let li = document.createElement("li", { is: this.listItem }); + li.changeStatus = status; + li.value = value; + return li; + } + + /** + * Setting this property will trigger rendering of the list. If no prior + * values are detected, change indicators are not touched. + * + * @type {T[]} + */ + set value(list) { + if (!this.oldValue.length) { + for (let value of list) { + this.append(this._createListItem(value)); + } + return; + } + for (let [value, status] of this.getChanges(this.oldValue, list)) { + this.appendChild(this._createListItem(value, status)); + } + } + + /** + * Implemented by sub-classes to generate a list of changes for each element + * of the new list. + * + * @param {T[]} oldValue + * @param {T[]} newValue + * @return {[T, number][]} + */ + getChanges(oldValue, newValue) { + throw Components.Exception("", Cr.NS_ERROR_NOT_IMPLEMENTED); + } + } + + /** + * BaseInvitationChangeListItem is the <li> element used for change lists. + * + * @template {T} + */ + class BaseInvitationChangeListItem extends HTMLLIElement { + /** + * Indicates whether the item value has changed and should be displayed as + * such. Its value is one of the PROPERTY_* constants. + * + * @type {number} + */ + changeStatus = PROPERTY_UNCHANGED; + + /** + * Settings this property will render the list item including a change + * indicator if the changeStatus property != PROPERTY_UNCHANGED. + * + * @type {T} + */ + set value(itemValue) { + this.build(itemValue); + if (this.changeStatus) { + let changeIndicator = document.createElement("calendar-invitation-change-indicator"); + changeIndicator.type = this.changeStatus; + this.append(changeIndicator); + } + } + + /** + * Implemented by sub-classes to build the <li> inner DOM structure. + * + * @param {T} value + * @abstract + */ + build(value) { + throw Components.Exception("", Cr.NS_ERROR_NOT_IMPLEMENTED); + } + } + + /** + * InvitationAttendeeList displays a list of all the attendees on an event's + * attendee list. + */ + class InvitationAttendeeList extends BaseInvitationChangeList { + listItem = "calendar-invitation-panel-attendee-list-item"; + + getChanges(oldValue, newValue) { + let diff = []; + for (let att of newValue) { + let oldAtt = oldValue.find(oldAtt => oldAtt.id == att.id); + if (!oldAtt) { + diff.push([att, PROPERTY_ADDED]); // New attendee. + } else if (oldAtt.participationStatus != att.participationStatus) { + diff.push([att, PROPERTY_MODIFIED]); // Participation status changed. + } else { + diff.push([att, PROPERTY_UNCHANGED]); // No change. + } + } + + // Insert removed attendees into the diff. + for (let [idx, att] of oldValue.entries()) { + let found = newValue.find(newAtt => newAtt.id == att.id); + if (!found) { + diff.splice(idx, 0, [att, PROPERTY_REMOVED]); + } + } + return diff; + } + } + customElements.define("calendar-invitation-panel-attendee-list", InvitationAttendeeList, { + extends: "ul", + }); + + /** + * InvitationAttendeeListItem displays a single attendee from the attendee + * list. + */ + class InvitationAttendeeListItem extends BaseInvitationChangeListItem { + build(value) { + let span = document.createElement("span"); + if (this.changeStatus == PROPERTY_REMOVED) { + span.setAttribute("class", "removed"); + } + span.textContent = value; + this.appendChild(span); + } + } + customElements.define( + "calendar-invitation-panel-attendee-list-item", + InvitationAttendeeListItem, + { + extends: "li", + } + ); + + /** + * InvitationAttachmentList displays a list of all attachments in the invitation + * that have URIs. Binary attachments are not supported. + */ + class InvitationAttachmentList extends BaseInvitationChangeList { + listItem = "calendar-invitation-panel-attachment-list-item"; + + getChanges(oldValue, newValue) { + let diff = []; + for (let attch of newValue) { + if (!attch.uri) { + continue; + } + let oldAttch = oldValue.find( + oldAttch => oldAttch.uri && oldAttch.uri.spec == attch.uri.spec + ); + + if (!oldAttch) { + // New attachment. + diff.push([attch, PROPERTY_ADDED]); + continue; + } + if ( + attch.hashId != oldAttch.hashId || + attch.getParameter("FILENAME") != oldAttch.getParameter("FILENAME") + ) { + // Contents changed or renamed. + diff.push([attch, PROPERTY_MODIFIED]); + continue; + } + // No change. + diff.push([attch, PROPERTY_UNCHANGED]); + } + + // Insert removed attachments into the diff. + for (let [idx, attch] of oldValue.entries()) { + if (!attch.uri) { + continue; + } + let found = newValue.find(newAtt => newAtt.uri && newAtt.uri.spec == attch.uri.spec); + if (!found) { + diff.splice(idx, 0, [attch, PROPERTY_REMOVED]); + } + } + return diff; + } + } + customElements.define("calendar-invitation-panel-attachment-list", InvitationAttachmentList, { + extends: "ul", + }); + + /** + * InvitationAttachmentListItem displays a link to an attachment attached to the + * event. + */ + class InvitationAttachmentListItem extends BaseInvitationChangeListItem { + /** + * Indicates whether the attachment has changed and should be displayed as + * such. Its value is one of the PROPERTY_* constants. + * + * @type {number} + */ + changeStatus = PROPERTY_UNCHANGED; + + /** + * Sets up the attachment to be displayed as a link with appropriate icon. + * Links are opened externally. + * + * @param {calIAttachment} + */ + build(value) { + let icon = document.createElement("img"); + let iconSrc = value.uri.spec.length ? value.uri.spec : "dummy.html"; + if (!value.uri.schemeIs("file")) { + // Using an uri directly, with e.g. a http scheme, wouldn't render any icon. + if (value.formatType) { + iconSrc = "goat?contentType=" + value.formatType; + } else { + // Let's try to auto-detect. + let parts = iconSrc.substr(value.uri.scheme.length + 2).split("/"); + if (parts.length) { + iconSrc = parts[parts.length - 1]; + } + } + } + icon.setAttribute("src", "moz-icon://" + iconSrc); + this.append(icon); + + let title = value.getParameter("FILENAME") || value.uri.spec; + if (this.changeStatus == PROPERTY_REMOVED) { + let span = document.createElement("span"); + span.setAttribute("class", "removed"); + span.textContent = title; + this.append(span); + } else { + let link = document.createElement("a"); + link.textContent = title; + link.setAttribute("href", value.uri.spec); + link.addEventListener("click", event => { + event.preventDefault(); + openLinkExternally(event.target.href); + }); + this.append(link); + } + } + } + customElements.define( + "calendar-invitation-panel-attachment-list-item", + InvitationAttachmentListItem, + { + extends: "li", + } + ); + + /** + * InvitationChangeIndicator is a visual indicator for indicating some piece + * of data has changed. + */ + class InvitationChangeIndicator extends HTMLElement { + _typeMap = { + [PROPERTY_REMOVED]: "removed", + [PROPERTY_ADDED]: "added", + [PROPERTY_MODIFIED]: "modified", + }; + + /** + * One of the PROPERTY_* constants that indicates what kind of change we + * are indicating (add/modify/delete) etc. + * + * @type {number} + */ + set type(value) { + let key = this._typeMap[value]; + document.l10n.setAttributes(this, `calendar-invitation-change-indicator-${key}`); + } + } + customElements.define("calendar-invitation-change-indicator", InvitationChangeIndicator); +} diff --git a/comm/calendar/base/content/widgets/calendar-invitation-panel.xhtml b/comm/calendar/base/content/widgets/calendar-invitation-panel.xhtml new file mode 100644 index 0000000000..aaca3c1a17 --- /dev/null +++ b/comm/calendar/base/content/widgets/calendar-invitation-panel.xhtml @@ -0,0 +1,96 @@ +# 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/. + +<!-- Template for <calendar-invitation-panel/> --> +<template id="calendarInvitationPanel" xmlns="http://www.w3.org/1999/xhtml"> + <calendar-invitation-panel-status-bar/> + <div class="calendar-invitation-panel-wrapper"> + <div class="calendar-invitation-panel-preview"> + <calendar-minidate/> + </div> + <div class="calendar-invitation-panel-details"> + <div class="calendar-invitation-panel-title"> + <calendar-invitation-change-indicator id="titleChangeIndicator" + hidden="hidden"/> + <h1 class="calendar-invitation-panel-title" id="title"></h1> + </div> + <table id="props" class="calendar-invitation-panel-props"> + <tbody> + <tr class="calendar-invitation-row"> + <th data-l10n-id="calendar-invitation-panel-prop-title-when"></th> + <td class="calendar-invitation-when"> + <calendar-invitation-change-indicator id="intervalChangeIndicator" + hidden="hidden"/> + <calendar-invitation-interval id="when"/> + </td> + </tr> + <tr hidden="hidden" class="calendar-invitation-row"> + <th data-l10n-id="calendar-invitation-panel-prop-title-recurrence"></th> + <td id="recurrence" class="calendar-invitation-recurrence"> + <calendar-invitation-change-indicator id="recurrenceChangeIndicator" + hidden="hidden"/> + </td> + </tr> + <tr hidden="hidden" class="calendar-invitation-row"> + <th data-l10n-id="calendar-invitation-panel-prop-title-location"></th> + <td id="location" class="content"> + <calendar-invitation-change-indicator id="locationChangeIndicator" + hidden="hidden"/> + </td> + </tr> + <tr hidden="hidden" class="calendar-invitation-row"> + <th data-l10n-id="calendar-invitation-panel-prop-title-attendees"></th> + <td> + <calendar-invitation-partstat-summary id="summary"/> + <ul id="attendees" + is="calendar-invitation-panel-attendee-list" + class="calendar-invitation-panel-list"></ul> + </td> + </tr> + <tr hidden="hidden" class="calendar-invitation-row"> + <th data-l10n-id="calendar-invitation-panel-prop-title-description"></th> + <td id="description" class="content"> + <calendar-invitation-change-indicator id="descriptionChangeIndicator" + hidden="hidden"/> + </td> + </tr> + <tr hidden="hidden" class="calendar-invitation-row"> + <th data-l10n-id="calendar-invitation-panel-prop-title-attachments"></th> + <td class="content"> + <ul id="attachments" + is="calendar-invitation-panel-attachment-list" + class="calendar-invitation-panel-list"></ul> + </td> + </tr> + </tbody> + </table> + </div> + </div> + <div id="footer" class="calendar-invitation-panel-details-footer" hidden="hidden"> + <div id="actionButtons" class="calendar-invitation-panel-response-buttons"> + <button id="acceptButton" + data-action="accepted" + class="primary" + data-l10n-id="calendar-invitation-panel-accept-button"></button> + <button id="declineButton" + data-action="declined" + data-l10n-id="calendar-invitation-panel-decline-button"></button> + <button id="tentativeButton" + data-action="tentative" + data-l10n-id="calendar-invitation-panel-tentative-button"></button> + </div> + </div> +</template> + +<!-- Template for <calendar-invitation-partstat-summary/> --> +<template id="calendarInvitationPartStatSummary" xmlns="http://www.w3.org/1999/xhtml"> + <div class="calendar-invitation-attendees-summary"> + <span id="partStatTotal" + class="calendar-invitation-panel-partstat-summary-total"></span> + <span id="partStatBreakdown" class="calendar-invitation-panel-partstat-breakdown"></span> + </div> +</template> + +<!-- Menu for the "More" button in the invitation panel. Populated via JavaScript.--> +<menupopup id="calendarInvitationPanelMoreMenu"></menupopup> diff --git a/comm/calendar/base/content/widgets/calendar-item-summary.js b/comm/calendar/base/content/widgets/calendar-item-summary.js new file mode 100644 index 0000000000..747c5e1d5d --- /dev/null +++ b/comm/calendar/base/content/widgets/calendar-item-summary.js @@ -0,0 +1,761 @@ +/* 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/. */ + +"use strict"; + +/* global MozElements MozXULElement */ + +/* import-globals-from ../../src/calApplicationUtils.js */ +/* import-globals-from ../dialogs/calendar-summary-dialog.js */ + +// Wrap in a block to prevent leaking to window scope. +{ + var { cal } = ChromeUtils.import("resource:///modules/calendar/calUtils.jsm"); + var { recurrenceStringFromItem } = ChromeUtils.import( + "resource:///modules/calendar/calRecurrenceUtils.jsm" + ); + + /** + * Represents a mostly read-only summary of a calendar item. Used in places + * like the calendar summary dialog and calendar import dialog. All instances + * should have an ID attribute. + */ + class CalendarItemSummary extends MozXULElement { + static get markup() { + return `<vbox class="item-summary-box" flex="1"> + <!-- General --> + <hbox class="calendar-caption" align="center"> + <label value="&read.only.general.label;" class="header"/> + <separator class="groove" flex="1"/> + </hbox> + <html:table class="calendar-summary-table"> + <html:tr> + <html:th> + &read.only.title.label; + </html:th> + <html:td class="item-title"> + </html:td> + </html:tr> + <html:tr class="calendar-row" hidden="hidden"> + <html:th> + &read.only.calendar.label; + </html:th> + <html:td class="item-calendar"> + </html:td> + </html:tr> + <html:tr class="item-date-row"> + <html:th class="item-start-row-label" + taskStartLabel="&read.only.task.start.label;" + eventStartLabel="&read.only.event.start.label;"> + </html:th> + <html:td class="item-date-row-start-date"> + </html:td> + </html:tr> + <html:tr class="item-date-row"> + <html:th class="item-due-row-label" + taskDueLabel="&read.only.task.due.label;" + eventEndLabel="&read.only.event.end.label;"> + </html:th> + <html:td class="item-date-row-end-date"> + </html:td> + </html:tr> + <html:tr class="repeat-row" hidden="hidden"> + <html:th> + &read.only.repeat.label; + </html:th> + <html:td class="repeat-details"> + </html:td> + </html:tr> + <html:tr class="location-row" hidden="hidden"> + <html:th> + &read.only.location.label; + </html:th> + <html:td class="item-location"> + </html:td> + </html:tr> + <html:tr class="category-row" hidden="hidden"> + <html:th> + &read.only.category.label; + </html:th> + <html:td class="item-category"> + </html:td> + </html:tr> + <html:tr class="item-organizer-row" hidden="hidden"> + <html:th> + &read.only.organizer.label; + </html:th> + <html:td class="item-organizer-cell"> + </html:td> + </html:tr> + <html:tr class="status-row" hidden="hidden"> + <html:th> + &task.status.label; + </html:th> + <html:td class="status-row-td"> + <html:div hidden="true" status="TENTATIVE">&newevent.status.tentative.label;</html:div> + <html:div hidden="true" status="CONFIRMED">&newevent.status.confirmed.label;</html:div> + <html:div hidden="true" status="CANCELLED">&newevent.eventStatus.cancelled.label;</html:div> + <html:div hidden="true" status="CANCELLED">&newevent.todoStatus.cancelled.label;</html:div> + <html:div hidden="true" status="NEEDS-ACTION">&newevent.status.needsaction.label;</html:div> + <html:div hidden="true" status="IN-PROCESS">&newevent.status.inprogress.label;</html:div> + <html:div hidden="true" status="COMPLETED">&newevent.status.completed.label;</html:div> + </html:td> + </html:tr> + <separator class="groove" flex="1" hidden="true"/> + <html:tr class="reminder-row" hidden="hidden"> + <html:th class="reminder-label"> + &read.only.reminder.label; + </html:th> + <html:td class="reminder-details"> + </html:td> + </html:tr> + <html:tr class="attachments-row item-attachments-row" hidden="hidden" > + <html:th class="attachments-label"> + &read.only.attachments.label; + </html:th> + <html:td> + <vbox class="item-attachment-cell"> + <!-- attachment box template --> + <hbox class="attachment-template" + hidden="true" + align="center" + disable-on-readonly="true"> + <html:img class="attachment-icon invisible-on-broken" + alt="" /> + <label class="text-link item-attachment-cell-label" + crop="end" + flex="1" /> + </hbox> + </vbox> + </html:td> + </html:tr> + </html:table> + <!-- Attendees --> + <box class="item-attendees-description"> + <box class="item-attendees" orient="vertical" hidden="true"> + <spacer class="default-spacer"/> + <hbox class="calendar-caption" align="center"> + <label value="&read.only.attendees.label;" + class="header"/> + <separator class="groove" flex="1"/> + </hbox> + <vbox class="item-attendees-list-container" + flex="1" + context="attendee-popup" + oncontextmenu="onAttendeeContextMenu(event)"> + </vbox> + </box> + + <splitter id="attendeeDescriptionSplitter" + class="item-summary-splitter" + collapse="after" + orient="vertical" + state="open"/> + + <!-- Description --> + <box class="item-description-box" hidden="true" orient="vertical"> + <hbox class="calendar-caption" align="center"> + <label value="&read.only.description.label;" + class="header"/> + <separator class="groove" flex="1"/> + </hbox> + <iframe class="item-description" + type="content" + flex="1" + oncontextmenu="openDescriptionContextMenu(event);"> + </iframe> + </box> + </box> + + <!-- URL link --> + <box class="event-grid-link-row" hidden="true" orient="vertical"> + <spacer class="default-spacer"/> + <hbox class="calendar-caption" align="center"> + <label value="&read.only.link.label;" + class="header"/> + <separator class="groove" flex="1"/> + </hbox> + <label class="url-link text-link default-indent" + crop="end"/> + </box> + </vbox>`; + } + + static get entities() { + return [ + "chrome://calendar/locale/global.dtd", + "chrome://calendar/locale/calendar.dtd", + "chrome://calendar/locale/calendar-event-dialog.dtd", + "chrome://branding/locale/brand.dtd", + ]; + } + + static get alarmMenulistFragment() { + let frag = document.importNode( + MozXULElement.parseXULToFragment( + `<hbox align="center"> + <menulist class="item-alarm" + disable-on-readonly="true"> + <menupopup> + <menuitem label="&event.reminder.none.label;" + selected="true" + value="none"/> + <menuseparator/> + <menuitem label="&event.reminder.0minutes.before.label;" + length="0" + origin="before" + relation="START" + unit="minutes"/> + <menuitem label="&event.reminder.5minutes.before.label;" + length="5" + origin="before" + relation="START" + unit="minutes"/> + <menuitem label="&event.reminder.15minutes.before.label;" + length="15" + origin="before" + relation="START" + unit="minutes"/> + <menuitem label="&event.reminder.30minutes.before.label;" + length="30" + origin="before" + relation="START" + unit="minutes"/> + <menuseparator/> + <menuitem label="&event.reminder.1hour.before.label;" + length="1" + origin="before" + relation="START" + unit="hours"/> + <menuitem label="&event.reminder.2hours.before.label;" + length="2" + origin="before" + relation="START" + unit="hours"/> + <menuitem label="&event.reminder.12hours.before.label;" + length="12" + origin="before" + relation="START" + unit="hours"/> + <menuseparator/> + <menuitem label="&event.reminder.1day.before.label;" + length="1" + origin="before" + relation="START" + unit="days"/> + <menuitem label="&event.reminder.2days.before.label;" + length="2" + origin="before" + relation="START" + unit="days"/> + <menuitem label="&event.reminder.1week.before.label;" + length="7" + origin="before" + relation="START" + unit="days"/> + <menuseparator/> + <menuitem class="reminder-custom-menuitem" + label="&event.reminder.custom.label;" + value="custom"/> + </menupopup> + </menulist> + <hbox class="reminder-details"> + <hbox class="alarm-icons-box" align="center"/> + <!-- TODO oncommand? onkeypress? --> + <label class="reminder-multiple-alarms-label text-link" + hidden="true" + value="&event.reminder.multiple.label;" + disable-on-readonly="true" + flex="1" + hyperlink="true"/> + <label class="reminder-single-alarms-label text-link" + hidden="true" + disable-on-readonly="true" + flex="1" + hyperlink="true"/> + </hbox> + </hbox>`, + CalendarItemSummary.entities + ), + true + ); + Object.defineProperty(this, "alarmMenulistFragment", { value: frag }); + return frag; + } + + connectedCallback() { + if (this.delayConnectedCallback() || this.hasConnected) { + return; + } + this.hasConnected = true; + + this.appendChild(this.constructor.fragment); + + this.mItem = null; + this.mCalendar = null; + this.mReadOnly = true; + this.mIsInvitation = false; + + this.mIsToDoItem = null; + + let urlLink = this.querySelector(".url-link"); + urlLink.addEventListener("click", event => { + launchBrowser(urlLink.getAttribute("href"), event); + }); + urlLink.addEventListener("command", event => { + launchBrowser(urlLink.getAttribute("href"), event); + }); + } + + set item(item) { + this.mItem = item; + this.mIsToDoItem = item.isTodo(); + + // When used in places like the import dialog, there is no calendar (yet). + if (item.calendar) { + this.mCalendar = item.calendar; + + this.mIsInvitation = + item.calendar.supportsScheduling && + item.calendar.getSchedulingSupport()?.isInvitation(item); + + this.mReadOnly = !( + cal.acl.isCalendarWritable(this.mCalendar) && + (cal.acl.userCanModifyItem(item) || + (this.mIsInvitation && cal.acl.userCanRespondToInvitation(item))) + ); + } + + if (!item.descriptionHTML || !item.getAttendees().length) { + // Hide the splitter when there is no description or attendees. + document.getElementById("attendeeDescriptionSplitter").setAttribute("hidden", "true"); + } + } + + get item() { + return this.mItem; + } + + get calendar() { + return this.mCalendar; + } + + get readOnly() { + return this.mReadOnly; + } + + get isInvitation() { + return this.mIsInvitation; + } + + /** + * Update the item details in the UI. To be called when this element is + * first rendered and when the item changes. + */ + updateItemDetails() { + if (!this.item) { + // Setup not complete, do nothing for now. + return; + } + let item = this.item; + let isToDoItem = this.mIsToDoItem; + + this.querySelector(".item-title").textContent = item.title; + + if (this.calendar) { + this.querySelector(".calendar-row").removeAttribute("hidden"); + this.querySelector(".item-calendar").textContent = this.calendar.name; + } + + // Show start date. + let itemStartDate = item[cal.dtz.startDateProp(item)]; + + let itemStartRowLabel = this.querySelector(".item-start-row-label"); + let itemDateRowStartDate = this.querySelector(".item-date-row-start-date"); + + itemStartRowLabel.style.visibility = itemStartDate ? "visible" : "collapse"; + itemDateRowStartDate.style.visibility = itemStartDate ? "visible" : "collapse"; + + if (itemStartDate) { + itemStartRowLabel.textContent = itemStartRowLabel.getAttribute( + isToDoItem ? "taskStartLabel" : "eventStartLabel" + ); + itemDateRowStartDate.textContent = cal.dtz.getStringForDateTime(itemStartDate); + } + + // Show due date / end date. + let itemDueDate = item[cal.dtz.endDateProp(item)]; + + let itemDueRowLabel = this.querySelector(".item-due-row-label"); + let itemDateRowEndDate = this.querySelector(".item-date-row-end-date"); + + itemDueRowLabel.style.visibility = itemDueDate ? "visible" : "collapse"; + itemDateRowEndDate.style.visibility = itemDueDate ? "visible" : "collapse"; + + if (itemDueDate) { + // For all-day events, display the last day, not the finish time. + if (itemDueDate.isDate) { + itemDueDate = itemDueDate.clone(); + itemDueDate.day--; + } + itemDueRowLabel.textContent = itemDueRowLabel.getAttribute( + isToDoItem ? "taskDueLabel" : "eventEndLabel" + ); + itemDateRowEndDate.textContent = cal.dtz.getStringForDateTime(itemDueDate); + } + + let alarms = item.getAlarms(); + let hasAlarms = alarms && alarms.length; + let canShowReadOnlyReminders = hasAlarms && item.calendar; + let shouldShowReminderMenu = + !this.readOnly && + this.isInvitation && + item.calendar && + item.calendar.getProperty("capabilities.alarms.oninvitations.supported") !== false; + + // For invitations where the reminders can be edited, show a menu to + // allow setting the reminder, because you can't edit an invitation in + // the edit item dialog. For all other cases, show a plain text + // representation of the reminders but only if there are any. + if (shouldShowReminderMenu) { + if (!this.mAlarmsMenu) { + // Attempt to vertically align the label. It's not perfect but it's the best we've got. + let reminderLabel = this.querySelector(".reminder-label"); + reminderLabel.style.verticalAlign = "middle"; + let reminderCell = this.querySelector(".reminder-details"); + while (reminderCell.lastChild) { + reminderCell.lastChild.remove(); + } + + // Add the menulist dynamically only if it's going to be used. This removes a + // significant performance penalty in most use cases. + reminderCell.append(this.constructor.alarmMenulistFragment.cloneNode(true)); + this.mAlarmsMenu = this.querySelector(".item-alarm"); + this.mLastAlarmSelection = 0; + + this.mAlarmsMenu.addEventListener("command", () => { + this.updateReminder(); + }); + + this.querySelector(".reminder-multiple-alarms-label").addEventListener("click", () => { + this.updateReminder(); + }); + + this.querySelector(".reminder-single-alarms-label").addEventListener("click", () => { + this.updateReminder(); + }); + } + + if (hasAlarms) { + this.mLastAlarmSelection = loadReminders(alarms, this.mAlarmsMenu, this.mItem.calendar); + } + this.updateReminder(); + } else if (canShowReadOnlyReminders) { + this.updateReminderReadOnly(alarms); + } + + if (shouldShowReminderMenu || canShowReadOnlyReminders) { + this.querySelector(".reminder-row").removeAttribute("hidden"); + } + + let recurrenceDetails = recurrenceStringFromItem( + item, + "calendar-event-dialog", + "ruleTooComplexSummary" + ); + this.updateRecurrenceDetails(recurrenceDetails); + this.updateAttendees(item); + + let url = item.getProperty("URL")?.trim() || ""; + + let link = this.querySelector(".url-link"); + link.setAttribute("href", url); + link.setAttribute("value", url); + // Hide the row if there is no url. + this.querySelector(".event-grid-link-row").hidden = !url; + + let location = item.getProperty("LOCATION"); + if (location) { + this.updateLocation(location); + } + + let categories = item.getCategories(); + if (categories.length > 0) { + this.querySelector(".category-row").removeAttribute("hidden"); + // TODO: this join is unfriendly for l10n (categories.join(", ")). + this.querySelector(".item-category").textContent = categories.join(", "); + } + + if (item.organizer && item.organizer.id) { + this.updateOrganizer(item); + } + + let status = item.getProperty("STATUS"); + if (status && status.length) { + this.updateStatus(status, isToDoItem); + } + + let descriptionText = item.descriptionText?.trim(); + if (descriptionText) { + this.updateDescription(descriptionText, item.descriptionHTML); + } + + let attachments = item.getAttachments(); + if (attachments.length) { + this.updateAttachments(attachments); + } + } + + /** + * Updates the reminder, called when a reminder has been selected in the + * menulist. + */ + updateReminder() { + this.mLastAlarmSelection = commonUpdateReminder( + this.mAlarmsMenu, + this.mItem, + this.mLastAlarmSelection, + this.mItem.calendar, + this.querySelector(".reminder-details"), + null, + false + ); + } + + /** + * Updates the reminder to display the set reminders as read-only text. + * Depends on updateReminder() to get the text to display. + */ + updateReminderReadOnly(alarms) { + let reminderLabel = this.querySelector(".reminder-label"); + reminderLabel.style.verticalAlign = null; + let reminderCell = this.querySelector(".reminder-details"); + while (reminderCell.lastChild) { + reminderCell.lastChild.remove(); + } + delete this.mAlarmsMenu; + + switch (alarms.length) { + case 0: + reminderCell.textContent = ""; + break; + case 1: + reminderCell.textContent = alarms[0].toString(this.item); + break; + default: + for (let a of alarms) { + reminderCell.appendChild(document.createTextNode(a.toString(this.item))); + reminderCell.appendChild(document.createElement("br")); + } + break; + } + } + + /** + * Updates the item's recurrence details, i.e. shows text describing them, + * or hides the recurrence row if the item does not recur. + * + * @param {string | null} details - Recurrence details as a string or null. + * Passing null hides the recurrence row. + */ + updateRecurrenceDetails(details) { + let repeatRow = this.querySelector(".repeat-row"); + let repeatDetails = repeatRow.querySelector(".repeat-details"); + + repeatRow.toggleAttribute("hidden", !details); + repeatDetails.textContent = details ? details.replace(/\n/g, " ") : ""; + } + + /** + * Updates the attendee listbox, displaying all attendees invited to the item. + */ + updateAttendees(item) { + let attendees = item.getAttendees(); + if (attendees && attendees.length) { + this.querySelector(".item-attendees").removeAttribute("hidden"); + this.querySelector(".item-attendees-list-container").appendChild( + cal.invitation.createAttendeesList(document, attendees) + ); + } + } + + /** + * Updates the location, creating a link if the value is a URL. + * + * @param {string} location - The value of the location property. + */ + updateLocation(location) { + this.querySelector(".location-row").removeAttribute("hidden"); + let urlMatch = location.match(/(https?:\/\/[^ ]*)/); + let url = urlMatch && urlMatch[1]; + let itemLocation = this.querySelector(".item-location"); + if (url) { + let link = document.createElementNS("http://www.w3.org/1999/xhtml", "a"); + link.setAttribute("class", "item-location-link text-link"); + link.setAttribute("href", url); + link.title = url; + link.setAttribute("onclick", "launchBrowser(this.getAttribute('href'), event)"); + link.setAttribute("oncommand", "launchBrowser(this.getAttribute('href'), event)"); + + let label = document.createXULElement("label"); + label.setAttribute("context", "location-link-context-menu"); + label.textContent = location; + link.appendChild(label); + + itemLocation.replaceChildren(link); + } else { + itemLocation.textContent = location; + } + } + + /** + * Update the organizer part of the UI. + * + * @param {calIItemBase} item - The calendar item. + */ + updateOrganizer(item) { + this.querySelector(".item-organizer-row").removeAttribute("hidden"); + let organizerLabel = cal.invitation.createAttendeeLabel( + document, + item.organizer, + item.getAttendees() + ); + let organizerName = organizerLabel.querySelector(".attendee-name"); + organizerName.classList.add("text-link"); + organizerName.addEventListener("click", () => sendMailToOrganizer(this.mItem)); + this.querySelector(".item-organizer-cell").appendChild(organizerLabel); + } + + /** + * Update the status part of the UI. + * + * @param {string} status - The status of the calendar item. + * @param {boolean} isToDoItem - True if the calendar item is a todo, false if an event. + */ + updateStatus(status, isToDoItem) { + let statusRow = this.querySelector(".status-row"); + let statusRowData = this.querySelector(".status-row-td"); + + for (let i = 0; i < statusRowData.children.length; i++) { + if (statusRowData.children[i].getAttribute("status") == status) { + statusRow.removeAttribute("hidden"); + + if (status == "CANCELLED" && isToDoItem) { + // There are two status elements for CANCELLED, the second one is for + // todo items. Increment the counter here. + i++; + } + statusRowData.children[i].removeAttribute("hidden"); + break; + } + } + } + + /** + * Update the description part of the UI. + * + * @param {string} descriptionText - The value of the DESCRIPTION property. + * @param {string} descriptionHTML - HTML description if available. + */ + async updateDescription(descriptionText, descriptionHTML) { + this.querySelector(".item-description-box").removeAttribute("hidden"); + let itemDescription = this.querySelector(".item-description"); + if (itemDescription.contentDocument.readyState != "complete") { + // The iframe's document hasn't loaded yet. If we add to it now, what we add will be + // overwritten. Wait for the initial document to load. + await new Promise(resolve => { + itemDescription._listener = { + QueryInterface: ChromeUtils.generateQI([ + "nsIWebProgressListener", + "nsISupportsWeakReference", + ]), + onStateChange(webProgress, request, stateFlags, status) { + if (stateFlags & Ci.nsIWebProgressListener.STATE_STOP) { + itemDescription.browsingContext.webProgress.removeProgressListener(this); + delete itemDescription._listener; + resolve(); + } + }, + }; + itemDescription.browsingContext.webProgress.addProgressListener( + itemDescription._listener, + Ci.nsIWebProgress.NOTIFY_STATE_ALL + ); + }); + } + let docFragment = cal.view.textToHtmlDocumentFragment( + descriptionText, + itemDescription.contentDocument, + descriptionHTML + ); + + // Make any links open in the user's default browser, not in Thunderbird. + for (let anchor of docFragment.querySelectorAll("a")) { + anchor.addEventListener("click", function (event) { + event.preventDefault(); + if (event.isTrusted) { + launchBrowser(anchor.getAttribute("href"), event); + } + }); + } + + itemDescription.contentDocument.body.appendChild(docFragment); + + const link = itemDescription.contentDocument.createElement("link"); + link.rel = "stylesheet"; + link.href = "chrome://messenger/skin/shared/editorContent.css"; + itemDescription.contentDocument.head.appendChild(link); + } + + /** + * Update the attachments part of the UI. + * + * @param {calIAttachment[]} attachments - Array of attachment objects. + */ + updateAttachments(attachments) { + // We only want to display URI type attachments and no ones received inline with the + // invitation message (having a CID: prefix results in about:blank) here. + let attCounter = 0; + attachments.forEach(aAttachment => { + if (aAttachment.uri && aAttachment.uri.spec != "about:blank") { + let attachment = this.querySelector(".attachment-template").cloneNode(true); + attachment.removeAttribute("id"); + attachment.removeAttribute("hidden"); + + let label = attachment.querySelector("label"); + label.setAttribute("value", aAttachment.uri.spec); + + label.addEventListener("click", () => { + openAttachmentFromItemSummary(aAttachment.hashId, this.mItem); + }); + + let icon = attachment.querySelector("img"); + let iconSrc = aAttachment.uri.spec.length ? aAttachment.uri.spec : "dummy.html"; + if (aAttachment.uri && !aAttachment.uri.schemeIs("file")) { + // Using an uri directly, with e.g. a http scheme, wouldn't render any icon. + if (aAttachment.formatType) { + iconSrc = "goat?contentType=" + aAttachment.formatType; + } else { + // Let's try to auto-detect. + let parts = iconSrc.substr(aAttachment.uri.scheme.length + 2).split("/"); + if (parts.length) { + iconSrc = parts[parts.length - 1]; + } + } + } + icon.setAttribute("src", "moz-icon://" + iconSrc); + + this.querySelector(".item-attachment-cell").appendChild(attachment); + attCounter++; + } + }); + + if (attCounter > 0) { + this.querySelector(".attachments-row").removeAttribute("hidden"); + } + } + } + + customElements.define("calendar-item-summary", CalendarItemSummary); +} diff --git a/comm/calendar/base/content/widgets/calendar-minidate.js b/comm/calendar/base/content/widgets/calendar-minidate.js new file mode 100644 index 0000000000..ebc270bd5b --- /dev/null +++ b/comm/calendar/base/content/widgets/calendar-minidate.js @@ -0,0 +1,83 @@ +/* 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/. */ + +/* globals cal */ + +"use strict"; + +// Wrap in a block to prevent leaking to window scope. +{ + const format = new Intl.DateTimeFormat(undefined, { + month: "short", + day: "2-digit", + year: "numeric", + }); + + const parts = ["month", "day", "year"]; + + function getParts(date) { + return format.formatToParts(date).reduce((prev, curr) => { + if (parts.includes(curr.type)) { + prev[curr.type] = curr.value; + } + return prev; + }, {}); + } + + /** + * CalendarMinidate displays a date in a visually appealing box meant to be + * glanced at quickly to figure out the date of an event. + */ + class CalendarMinidate extends HTMLElement { + /** + * @type {HTMLElement} + */ + _monthSpan; + + /** + * @type {HTMLElement} + */ + _daySpan; + + /** + * @type {HTMLElement} + */ + _yearSpan; + + constructor() { + super(); + this.attachShadow({ mode: "open" }); + document.l10n.connectRoot(this.shadowRoot); + this.shadowRoot.appendChild( + document.getElementById("calendarMinidate").content.cloneNode(true) + ); + this._monthSpan = this.shadowRoot.querySelector(".calendar-minidate-month"); + this._daySpan = this.shadowRoot.querySelector(".calendar-minidate-day"); + this._yearSpan = this.shadowRoot.querySelector(".calendar-minidate-year"); + } + + /** + * Setting the date property will trigger the rendering of this widget. + * + * @type {calIDateTime} + */ + set date(value) { + let { month, day, year } = getParts(cal.dtz.dateTimeToJsDate(value)); + this._monthSpan.textContent = month; + this._daySpan.textContent = day; + this._yearSpan.textContent = year; + } + + /** + * Provides the displayed date as a string in the format + * "month day year". + * + * @type {string} + */ + get fullDate() { + return `${this._monthSpan.textContent} ${this._daySpan.textContent} ${this._yearSpan.textContent}`; + } + } + customElements.define("calendar-minidate", CalendarMinidate); +} diff --git a/comm/calendar/base/content/widgets/calendar-minidate.xhtml b/comm/calendar/base/content/widgets/calendar-minidate.xhtml new file mode 100644 index 0000000000..ab8f4ecba2 --- /dev/null +++ b/comm/calendar/base/content/widgets/calendar-minidate.xhtml @@ -0,0 +1,17 @@ +# 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/. + +<!-- Template for <calendar-minidate /> --> +<template id="calendarMinidate" xmlns="http://www.w3.org/1999/xhtml"> + <div class="calendar-minidate-wrapper"> + <link rel="stylesheet" href="chrome://calendar/skin/shared/widgets/calendar-minidate.css"/> + <div class="calendar-minidate-header"> + <span class="calendar-minidate-month"></span> + </div> + <div class="calendar-minidate-body"> + <span class="calendar-minidate-day"></span> + <span class="calendar-minidate-year"></span> + </div> + </div> +</template> diff --git a/comm/calendar/base/content/widgets/calendar-minimonth.js b/comm/calendar/base/content/widgets/calendar-minimonth.js new file mode 100644 index 0000000000..403841e69c --- /dev/null +++ b/comm/calendar/base/content/widgets/calendar-minimonth.js @@ -0,0 +1,1055 @@ +/* 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/. */ + +/* globals cal MozXULElement */ + +"use strict"; + +// Wrap in a block to prevent leaking to window scope. +{ + const { XPCOMUtils } = ChromeUtils.importESModule("resource://gre/modules/XPCOMUtils.sys.mjs"); + + const lazy = {}; + ChromeUtils.defineModuleGetter(lazy, "CalDateTime", "resource:///modules/CalDateTime.jsm"); + + let dayFormatter = new Services.intl.DateTimeFormat(undefined, { day: "numeric" }); + let dateFormatter = new Services.intl.DateTimeFormat(undefined, { dateStyle: "long" }); + + /** + * MiniMonth Calendar: day-of-month grid component. + * Displays month name and year above grid of days of month by week rows. + * Arrows move forward or back a month or a year. + * Clicking on a day cell selects that day. + * At site, can provide id, and code to run when value changed by picker. + * <calendar-minimonth id="my-date-picker" onchange="myDatePick( this );"/> + * + * May get/set value in javascript with + * document.querySelector("#my-date-picker").value = new Date(); + * + * @implements {calIObserver} + * @implements {calICompositeObserver} + */ + class CalendarMinimonth extends MozXULElement { + constructor() { + super(); + // Set up custom interfaces. + this.calIObserver = this.getCustomInterfaceCallback(Ci.calIObserver); + this.calICompositeObserver = this.getCustomInterfaceCallback(Ci.calICompositeObserver); + + let onPreferenceChanged = () => { + this.dayBoxes.clear(); // Days have moved, force a refresh of the grid. + this.refreshDisplay(); + }; + + XPCOMUtils.defineLazyPreferenceGetter( + this, + "weekStart", + "calendar.week.start", + 0, + onPreferenceChanged + ); + XPCOMUtils.defineLazyPreferenceGetter( + this, + "showWeekNumber", + "calendar.view-minimonth.showWeekNumber", + true, + onPreferenceChanged + ); + } + + static get inheritedAttributes() { + return { + ".minimonth-header": "readonly,month,year", + ".minimonth-year-name": "value=year", + }; + } + + connectedCallback() { + if (this.delayConnectedCallback() || this.hasChildNodes()) { + return; + } + + MozXULElement.insertFTLIfNeeded("calendar/calendar-widgets.ftl"); + + const minimonthHeader = ` + <html:div class="minimonth-header minimonth-month-box" + xmlns="http://www.w3.org/1999/xhtml"> + <div class="minimonth-nav-section"> + <button class="button icon-button icon-only minimonth-nav-btn today-button" + data-l10n-id="calendar-today-button-tooltip" + type="button" + dir="0"> + </button> + </div> + <div class="minimonth-nav-section"> + <button class="button icon-button icon-only minimonth-nav-btn months-back-button" + data-l10n-id="calendar-nav-button-prev-tooltip-month" + type="button" + dir="-1"> + </button> + <div class="minimonth-nav-item"> + <input class="minimonth-month-name" tabindex="-1" readonly="true" disabled="disabled" /> + </div> + <button class="button icon-button icon-only minimonth-nav-btn months-forward-button" + data-l10n-id="calendar-nav-button-next-tooltip-month" + type="button" + dir="1"> + </button> + </div> + <div class="minimonth-nav-section"> + <button class="button icon-button icon-only minimonth-nav-btn years-back-button" + data-l10n-id="calendar-nav-button-prev-tooltip-year" + type="button" + dir="-1"> + </button> + <div class="minimonth-nav-item"> + <input class="yearcell minimonth-year-name" tabindex="-1" readonly="true" disabled="disabled" /> + </div> + <button class="button icon-button icon-only minimonth-nav-btn years-forward-button" + data-l10n-id="calendar-nav-button-next-tooltip-year" + type="button" + dir="1"> + </button> + </div> + </html:div> + `; + + const minimonthWeekRow = ` + <html:tr class="minimonth-row-body"> + <html:th class="minimonth-week" scope="row"></html:th> + <html:td class="minimonth-day" tabindex="-1"></html:td> + <html:td class="minimonth-day" tabindex="-1"></html:td> + <html:td class="minimonth-day" tabindex="-1"></html:td> + <html:td class="minimonth-day" tabindex="-1"></html:td> + <html:td class="minimonth-day" tabindex="-1"></html:td> + <html:td class="minimonth-day" tabindex="-1"></html:td> + <html:td class="minimonth-day" tabindex="-1"></html:td> + </html:tr> + `; + + this.appendChild( + MozXULElement.parseXULToFragment( + ` + ${minimonthHeader} + <html:div class="minimonth-readonly-header minimonth-month-box"></html:div> + <html:table class="minimonth-calendar minimonth-cal-box"> + <html:tr class="minimonth-row-head"> + <html:th class="minimonth-row-header-week" scope="col"></html:th> + <html:th class="minimonth-row-header" scope="col"></html:th> + <html:th class="minimonth-row-header" scope="col"></html:th> + <html:th class="minimonth-row-header" scope="col"></html:th> + <html:th class="minimonth-row-header" scope="col"></html:th> + <html:th class="minimonth-row-header" scope="col"></html:th> + <html:th class="minimonth-row-header" scope="col"></html:th> + <html:th class="minimonth-row-header" scope="col"></html:th> + </html:tr> + ${minimonthWeekRow} + ${minimonthWeekRow} + ${minimonthWeekRow} + ${minimonthWeekRow} + ${minimonthWeekRow} + ${minimonthWeekRow} + </html:table> + `, + ["chrome://calendar/locale/global.dtd"] + ) + ); + this.initializeAttributeInheritance(); + this.setAttribute("orient", "vertical"); + + // Set up header buttons. + this.querySelector(".months-back-button").addEventListener("click", () => + this.advanceMonth(-1) + ); + this.querySelector(".months-forward-button").addEventListener("click", () => + this.advanceMonth(1) + ); + this.querySelector(".years-back-button").addEventListener("click", () => + this.advanceYear(-1) + ); + this.querySelector(".years-forward-button").addEventListener("click", () => + this.advanceYear(1) + ); + this.querySelector(".today-button").addEventListener("click", () => { + this.value = new Date(); + }); + + this.dayBoxes = new Map(); + this.mValue = null; + this.mEditorDate = null; + this.mExtraDate = null; + this.mPixelScrollDelta = 0; + this.mObservesComposite = false; + this.mToday = null; + this.mSelected = null; + this.mExtra = null; + this.mValue = new Date(); // Default to "today". + this.mFocused = null; + + let width = 0; + // Start loop from 1 as it is needed to get the first month name string + // and avoid extra computation of adding one. + for (let i = 1; i <= 12; i++) { + let dateString = cal.l10n.getDateFmtString(`month.${i}.name`); + width = Math.max(dateString.length, width); + } + this.querySelector(".minimonth-month-name").style.width = `${width + 1}ch`; + + this.refreshDisplay(); + if (this.hasAttribute("freebusy")) { + this._setFreeBusy(this.getAttribute("freebusy") == "true"); + } + + // Add event listeners. + this.addEventListener("click", event => { + if (event.button == 0 && event.target.classList.contains("minimonth-day")) { + this.onDayActivate(event); + } + }); + + this.addEventListener("keypress", event => { + if (event.target.classList.contains("minimonth-day")) { + if (event.altKey || event.metaKey) { + return; + } + switch (event.keyCode) { + case KeyEvent.DOM_VK_LEFT: + this.onDayMovement(event, 0, 0, -1); + break; + case KeyEvent.DOM_VK_RIGHT: + this.onDayMovement(event, 0, 0, 1); + break; + case KeyEvent.DOM_VK_UP: + this.onDayMovement(event, 0, 0, -7); + break; + case KeyEvent.DOM_VK_DOWN: + this.onDayMovement(event, 0, 0, 7); + break; + case KeyEvent.DOM_VK_PAGE_UP: + if (event.shiftKey) { + this.onDayMovement(event, -1, 0, 0); + } else { + this.onDayMovement(event, 0, -1, 0); + } + break; + case KeyEvent.DOM_VK_PAGE_DOWN: + if (event.shiftKey) { + this.onDayMovement(event, 1, 0, 0); + } else { + this.onDayMovement(event, 0, 1, 0); + } + break; + case KeyEvent.DOM_VK_ESCAPE: + this.focusDate(this.mValue || this.mExtraDate); + event.stopPropagation(); + event.preventDefault(); + break; + case KeyEvent.DOM_VK_HOME: { + const today = new Date(); + this.update(today); + this.focusDate(today); + event.stopPropagation(); + event.preventDefault(); + break; + } + case KeyEvent.DOM_VK_RETURN: + this.onDayActivate(event); + break; + } + } + }); + + this.addEventListener("wheel", event => { + const pixelThreshold = 150; + let deltaView = 0; + if (this.getAttribute("readonly") == "true") { + // No scrolling on readonly months. + return; + } + if (event.deltaMode == event.DOM_DELTA_LINE || event.deltaMode == event.DOM_DELTA_PAGE) { + 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) { + const classList = event.target.classList; + + if ( + classList.contains("years-forward-button") || + classList.contains("yearcell") || + classList.contains("years-back-button") + ) { + this.advanceYear(deltaView); + } else if (!classList.contains("today-button")) { + this.advanceMonth(deltaView); + } + } + + event.stopPropagation(); + event.preventDefault(); + }); + } + + set value(val) { + this.update(val); + } + + get value() { + return this.mValue; + } + + set extra(val) { + this.mExtraDate = val; + } + + get extra() { + return this.mExtraDate; + } + + /** + * Returns the first (inclusive) date of the minimonth as a calIDateTime object. + */ + get firstDate() { + let date = this._getCalBoxNode(1, 1).date; + return cal.dtz.jsDateToDateTime(date); + } + + /** + * Returns the last (exclusive) date of the minimonth as a calIDateTime object. + */ + get lastDate() { + let date = this._getCalBoxNode(6, 7).date; + let lastDateTime = cal.dtz.jsDateToDateTime(date); + lastDateTime.day = lastDateTime.day + 1; + return lastDateTime; + } + + get mReadOnlyHeader() { + return this.querySelector(".minimonth-readonly-header"); + } + + setBusyDaysForItem(aItem, aState) { + let items = aItem.recurrenceInfo + ? aItem.getOccurrencesBetween(this.firstDate, this.lastDate) + : [aItem]; + items.forEach(item => this.setBusyDaysForOccurrence(item, aState)); + } + + parseBoxBusy(aBox) { + let boxBusy = {}; + + let busyStr = aBox.getAttribute("busy"); + if (busyStr && busyStr.length > 0) { + let calChunks = busyStr.split("\u001A"); + for (let chunk of calChunks) { + let expr = chunk.split("="); + boxBusy[expr[0]] = parseInt(expr[1], 10); + } + } + + return boxBusy; + } + + updateBoxBusy(aBox, aBoxBusy) { + let calChunks = []; + + for (let calId in aBoxBusy) { + if (aBoxBusy[calId]) { + calChunks.push(calId + "=" + aBoxBusy[calId]); + } + } + + if (calChunks.length > 0) { + let busyStr = calChunks.join("\u001A"); + aBox.setAttribute("busy", busyStr); + } else { + aBox.removeAttribute("busy"); + } + } + + removeCalendarFromBoxBusy(aBox, aCalendar) { + let boxBusy = this.parseBoxBusy(aBox); + if (boxBusy[aCalendar.id]) { + delete boxBusy[aCalendar.id]; + } + this.updateBoxBusy(aBox, boxBusy); + } + + setBusyDaysForOccurrence(aOccurrence, aState) { + if (aOccurrence.getProperty("TRANSP") == "TRANSPARENT") { + // Skip transparent events. + return; + } + let start = aOccurrence[cal.dtz.startDateProp(aOccurrence)] || aOccurrence.dueDate; + let end = aOccurrence[cal.dtz.endDateProp(aOccurrence)] || start; + if (!start) { + return; + } + + if (start.compare(this.firstDate) < 0) { + start = this.firstDate.clone(); + } + + if (end.compare(this.lastDate) > 0) { + end = this.lastDate.clone(); + end.day++; + } + + // We need to compare with midnight of the current day, so reset the + // time here. + let current = start.clone().getInTimezone(cal.dtz.defaultTimezone); + current.hour = 0; + current.minute = 0; + current.second = 0; + + // Cache the result so the compare isn't called in each iteration. + let compareResult = start.compare(end) == 0 ? 1 : 0; + + // Setup the busy days. + while (current.compare(end) < compareResult) { + let box = this.getBoxForDate(current); + if (box) { + let busyCalendars = this.parseBoxBusy(box); + if (!busyCalendars[aOccurrence.calendar.id]) { + busyCalendars[aOccurrence.calendar.id] = 0; + } + busyCalendars[aOccurrence.calendar.id] += aState ? 1 : -1; + this.updateBoxBusy(box, busyCalendars); + } + current.day++; + } + } + + // calIObserver methods. + calendarsInBatch = new Set(); + + onStartBatch(aCalendar) { + this.calendarsInBatch.add(aCalendar); + } + + onEndBatch(aCalendar) { + this.calendarsInBatch.delete(aCalendar); + } + + onLoad(aCalendar) { + this.getItems(aCalendar); + } + + onAddItem(aItem) { + if (this.calendarsInBatch.has(aItem.calendar)) { + return; + } + + this.setBusyDaysForItem(aItem, true); + } + + onDeleteItem(aItem) { + this.setBusyDaysForItem(aItem, false); + } + + onModifyItem(aNewItem, aOldItem) { + if (this.calendarsInBatch.has(aNewItem.calendar)) { + return; + } + + this.setBusyDaysForItem(aOldItem, false); + this.setBusyDaysForItem(aNewItem, true); + } + + onError(aCalendar, aErrNo, aMessage) {} + + onPropertyChanged(aCalendar, aName, aValue, aOldValue) { + switch (aName) { + case "disabled": + this.resetAttributesForDate(); + this.getItems(); + break; + } + } + + onPropertyDeleting(aCalendar, aName) { + this.onPropertyChanged(aCalendar, aName, null, null); + } + + // End of calIObserver methods. + // calICompositeObserver methods. + + onCalendarAdded(aCalendar) { + if (!aCalendar.getProperty("disabled")) { + this.getItems(aCalendar); + } + } + + onCalendarRemoved(aCalendar) { + if (!aCalendar.getProperty("disabled")) { + for (let box of this.dayBoxes.values()) { + this.removeCalendarFromBoxBusy(box, aCalendar); + } + } + } + + onDefaultCalendarChanged(aCalendar) {} + + // End calICompositeObserver methods. + + refreshDisplay() { + if (!this.mValue) { + this.mValue = new Date(); + } + this.setHeader(); + this.showMonth(this.mValue); + this.updateAccessibleLabel(); + } + + _getCalBoxNode(aRow, aCol) { + if (!this.mCalBox) { + this.mCalBox = this.querySelector(".minimonth-calendar"); + } + return this.mCalBox.children[aRow].children[aCol]; + } + + setHeader() { + // Reset the headers. + let dayList = new Array(7); + let longDayList = new Array(7); + let tempDate = new Date(); + let i, j; + let useOSFormat; + tempDate.setDate(tempDate.getDate() - (tempDate.getDay() - this.weekStart)); + for (i = 0; i < 7; i++) { + // If available, use UILocale days, else operating system format. + try { + dayList[i] = cal.l10n.getDateFmtString(`day.${tempDate.getDay() + 1}.short`); + } catch (e) { + dayList[i] = tempDate.toLocaleDateString(undefined, { weekday: "short" }); + useOSFormat = true; + } + longDayList[i] = tempDate.toLocaleDateString(undefined, { weekday: "long" }); + tempDate.setDate(tempDate.getDate() + 1); + } + + if (useOSFormat) { + // To keep datepicker popup compact, shrink localized weekday + // abbreviations down to 1 or 2 chars so each column of week can + // be as narrow as 2 digits. + // + // 1. Compute the minLength of the day name abbreviations. + let minLength = dayList.map(name => name.length).reduce((min, len) => Math.min(min, len)); + + // 2. If some day name abbrev. is longer than 2 chars (not Catalan), + // and ALL localized day names share same prefix (as in Chinese), + // then trim shared "day-" prefix. + if (dayList.some(dayAbbr => dayAbbr.length > 2)) { + for (let endPrefix = 0; endPrefix < minLength; endPrefix++) { + let suffix = dayList[0][endPrefix]; + if (dayList.some(dayAbbr => dayAbbr[endPrefix] != suffix)) { + if (endPrefix > 0) { + for (i = 0; i < dayList.length; i++) { + // trim prefix chars. + dayList[i] = dayList[i].substring(endPrefix); + } + } + break; + } + } + } + // 3. Trim each day abbreviation to 1 char if unique, else 2 chars. + for (i = 0; i < dayList.length; i++) { + let foundMatch = 1; + for (j = 0; j < dayList.length; j++) { + if (i != j) { + if (dayList[i].substring(0, 1) == dayList[j].substring(0, 1)) { + foundMatch = 2; + break; + } + } + } + dayList[i] = dayList[i].substring(0, foundMatch); + } + } + + this._getCalBoxNode(0, 0).hidden = !this.showWeekNumber; + for (let column = 1; column < 8; column++) { + let node = this._getCalBoxNode(0, column); + node.textContent = dayList[column - 1]; + node.setAttribute("aria-label", longDayList[column - 1]); + } + } + + showMonth(aDate) { + // Use mExtraDate if aDate is null. + aDate = new Date(aDate || this.mExtraDate); + + aDate.setDate(1); + // We set the hour and minute to something highly unlikely to be the + // exact change point of DST, so timezones like America/Sao Paulo + // don't display some days twice. + aDate.setHours(12); + aDate.setMinutes(34); + aDate.setSeconds(0); + aDate.setMilliseconds(0); + // Don't fire onmonthchange event upon initialization + let monthChanged = this.mEditorDate && this.mEditorDate.valueOf() != aDate.valueOf(); + this.mEditorDate = aDate; // Only place mEditorDate is set. + + if (this.mSelected) { + this.mSelected.removeAttribute("selected"); + this.mSelected = null; + } + + // Get today's date. + let today = new Date(); + + if (!monthChanged && this.dayBoxes.size > 0) { + this.mSelected = this.getBoxForDate(this.value); + if (this.mSelected) { + this.mSelected.setAttribute("selected", "true"); + } + + let todayBox = this.getBoxForDate(today); + if (this.mToday != todayBox) { + if (this.mToday) { + this.mToday.removeAttribute("today"); + } + this.mToday = todayBox; + if (this.mToday) { + this.mToday.setAttribute("today", "true"); + } + } + return; + } + + if (this.mToday) { + this.mToday.removeAttribute("today"); + this.mToday = null; + } + + if (this.mExtra) { + this.mExtra.removeAttribute("extra"); + this.mExtra = null; + } + + // Update the month and year title. + this.setAttribute("year", aDate.getFullYear()); + this.setAttribute("month", aDate.getMonth()); + + let miniMonthName = this.querySelector(".minimonth-month-name"); + let dateString = cal.l10n.getDateFmtString(`month.${aDate.getMonth() + 1}.name`); + miniMonthName.setAttribute("value", dateString); + miniMonthName.setAttribute("monthIndex", aDate.getMonth()); + this.mReadOnlyHeader.textContent = dateString + " " + aDate.getFullYear(); + + // Update the calendar. + let calbox = this.querySelector(".minimonth-calendar"); + let date = this._getStartDate(aDate); + + if (aDate.getFullYear() == (this.mValue || this.mExtraDate).getFullYear()) { + calbox.setAttribute("aria-label", dateString); + } else { + let monthName = cal.l10n.formatMonth(aDate.getMonth() + 1, "calendar", "monthInYear"); + let label = cal.l10n.getCalString("monthInYear", [monthName, aDate.getFullYear()]); + calbox.setAttribute("aria-label", label); + } + + this.dayBoxes.clear(); + let defaultTz = cal.dtz.defaultTimezone; + for (let k = 1; k < 7; k++) { + // Set the week number. + let firstElement = this._getCalBoxNode(k, 0); + firstElement.hidden = !this.showWeekNumber; + if (this.showWeekNumber) { + let weekNumber = cal.weekInfoService.getWeekTitle( + cal.dtz.jsDateToDateTime(date, defaultTz) + ); + let weekTitle = cal.l10n.getCalString("WeekTitle", [weekNumber]); + firstElement.textContent = weekNumber; + firstElement.setAttribute("aria-label", weekTitle); + } + + for (let i = 1; i < 8; i++) { + let day = this._getCalBoxNode(k, i); + this.setBoxForDate(date, day); + + if (this.getAttribute("readonly") != "true") { + day.setAttribute("interactive", "true"); + } + + if (aDate.getMonth() == date.getMonth()) { + day.removeAttribute("othermonth"); + } else { + day.setAttribute("othermonth", "true"); + } + + // Highlight today. + if (this._sameDay(today, date)) { + this.mToday = day; + day.setAttribute("today", "true"); + } + + // Highlight the current date. + let val = this.value; + if (this._sameDay(val, date)) { + this.mSelected = day; + day.setAttribute("selected", "true"); + } + + // Highlight the extra date. + if (this._sameDay(this.mExtraDate, date)) { + this.mExtra = day; + day.setAttribute("extra", "true"); + } + + if (aDate.getMonth() == date.getMonth() && aDate.getFullYear() == date.getFullYear()) { + day.setAttribute("aria-label", dayFormatter.format(date)); + } else { + day.setAttribute("aria-label", dateFormatter.format(date)); + } + + day.removeAttribute("busy"); + + day.date = new Date(date); + day.textContent = date.getDate(); + date.setDate(date.getDate() + 1); + + this.resetAttributesForBox(day); + } + } + + if (!this.mFocused) { + this.setFocusedDate(this.mValue || this.mExtraDate); + } + + this.fireEvent("monthchange"); + + if (this.getAttribute("freebusy") == "true") { + this.getItems(); + } + } + + /** + * Attention - duplicate!!!! + */ + fireEvent(aEventName) { + this.dispatchEvent(new CustomEvent(aEventName, { bubbles: true })); + } + + _boxKeyForDate(aDate) { + if (aDate instanceof lazy.CalDateTime || aDate instanceof Ci.calIDateTime) { + return aDate.getInTimezone(cal.dtz.defaultTimezone).toString().substring(0, 10); + } + return [ + aDate.getFullYear(), + (aDate.getMonth() + 1).toString().padStart(2, "0"), + aDate.getDate().toString().padStart(2, "0"), + ].join("-"); + } + + /** + * Fetches the table cell for the given date, or null if the date isn't displayed. + * + * @param {calIDateTime|Date} aDate + * @returns {HTMLTableCellElement|null} + */ + getBoxForDate(aDate) { + return this.dayBoxes.get(this._boxKeyForDate(aDate)) ?? null; + } + + /** + * Stores the table cell for the given date. + * + * @param {Date} aDate + * @param {HTMLTableCellElement} aBox + */ + setBoxForDate(aDate, aBox) { + this.dayBoxes.set(this._boxKeyForDate(aDate), aBox); + } + + /** + * Remove attributes that may have been added to a table cell. + * + * @param {HTMLTableCellElement} aBox + */ + resetAttributesForBox(aBox) { + let allowedAttributes = 0; + while (aBox.attributes.length > allowedAttributes) { + switch (aBox.attributes[allowedAttributes].nodeName) { + case "selected": + case "othermonth": + case "today": + case "extra": + case "interactive": + case "class": + case "tabindex": + case "role": + case "aria-label": + allowedAttributes++; + break; + default: + aBox.removeAttribute(aBox.attributes[allowedAttributes].nodeName); + break; + } + } + } + + /** + * Remove attributes that may have been added to a table cell, or all table cells. + * + * @param {Date} [aDate] - If specified, the date of the cell to reset, + * otherwise all date cells will be reset. + */ + resetAttributesForDate(aDate) { + if (aDate) { + let box = this.getBoxForDate(aDate); + if (box) { + this.resetAttributesForBox(box); + } + } else { + for (let k = 1; k < 7; k++) { + for (let i = 1; i < 8; i++) { + this.resetAttributesForBox(this._getCalBoxNode(k, i)); + } + } + } + } + + _setFreeBusy(aFreeBusy) { + if (aFreeBusy) { + if (!this.mObservesComposite) { + cal.view.getCompositeCalendar(window).addObserver(this.calICompositeObserver); + this.mObservesComposite = true; + this.getItems(); + } + } else if (this.mObservesComposite) { + cal.view.getCompositeCalendar(window).removeObserver(this.calICompositeObserver); + this.mObservesComposite = false; + } + } + + removeAttribute(aAttr) { + if (aAttr == "freebusy") { + this._setFreeBusy(false); + } + return super.removeAttribute(aAttr); + } + + setAttribute(aAttr, aVal) { + if (aAttr == "freebusy") { + this._setFreeBusy(aVal == "true"); + } + return super.setAttribute(aAttr, aVal); + } + + async getItems(aCalendar) { + // The minimonth automatically clears extra styles on a month change. + // Therefore we only need to fill the minimonth with new info. + + let calendar = aCalendar || cal.view.getCompositeCalendar(window); + let filter = + calendar.ITEM_FILTER_COMPLETED_ALL | + calendar.ITEM_FILTER_CLASS_OCCURRENCES | + calendar.ITEM_FILTER_ALL_ITEMS; + + // Get new info. + for await (let items of cal.iterate.streamValues( + calendar.getItems(filter, 0, this.firstDate, this.lastDate) + )) { + items.forEach(item => this.setBusyDaysForOccurrence(item, true)); + } + } + + updateAccessibleLabel() { + let label; + if (this.mValue) { + label = dateFormatter.format(this.mValue); + } else { + label = cal.l10n.getCalString("minimonthNoSelectedDate"); + } + this.setAttribute("aria-label", label); + } + + update(aValue) { + let changed = + this.mValue && + aValue && + (this.mValue.getFullYear() != aValue.getFullYear() || + this.mValue.getMonth() != aValue.getMonth() || + this.mValue.getDate() != aValue.getDate()); + + this.mValue = aValue; + if (changed) { + this.fireEvent("change"); + } + this.showMonth(aValue); + if (aValue) { + this.setFocusedDate(aValue); + } + this.updateAccessibleLabel(); + } + + setFocusedDate(aDate, aForceFocus) { + let newFocused = this.getBoxForDate(aDate); + if (!newFocused) { + return; + } + if (this.mFocused) { + this.mFocused.setAttribute("tabindex", "-1"); + } + this.mFocused = newFocused; + this.mFocused.setAttribute("tabindex", "0"); + // Only actually move the focus if it is already in the calendar box. + if (!aForceFocus) { + let calbox = this.querySelector(".minimonth-calendar"); + aForceFocus = calbox.contains(document.commandDispatcher.focusedElement); + } + if (aForceFocus) { + this.mFocused.focus(); + } + } + + focusDate(aDate) { + this.showMonth(aDate); + this.setFocusedDate(aDate); + } + + switchMonth(aMonth) { + let newMonth = new Date(this.mEditorDate); + newMonth.setMonth(aMonth); + this.showMonth(newMonth); + } + + switchYear(aYear) { + let newMonth = new Date(this.mEditorDate); + newMonth.setFullYear(aYear); + this.showMonth(newMonth); + } + + selectDate(aDate, aMainDate) { + if ( + !aMainDate || + aDate < this._getStartDate(aMainDate) || + aDate > this._getEndDate(aMainDate) + ) { + aMainDate = new Date(aDate); + aMainDate.setDate(1); + } + // Note that aMainDate and this.mEditorDate refer to the first day + // of the corresponding month. + let sameMonth = this._sameDay(aMainDate, this.mEditorDate); + let sameDate = this._sameDay(aDate, this.mValue); + if (!sameMonth && !sameDate) { + // Change month and select day. + this.mValue = aDate; + this.showMonth(aMainDate); + } else if (!sameMonth) { + // Change month only. + this.showMonth(aMainDate); + } else if (!sameDate) { + // Select day only. + let day = this.getBoxForDate(aDate); + if (this.mSelected) { + this.mSelected.removeAttribute("selected"); + } + this.mSelected = day; + day.setAttribute("selected", "true"); + this.mValue = aDate; + this.setFocusedDate(aDate); + } + } + + _getStartDate(aMainDate) { + let date = new Date(aMainDate); + let firstWeekday = (7 + aMainDate.getDay() - this.weekStart) % 7; + date.setDate(date.getDate() - firstWeekday); + return date; + } + + _getEndDate(aMainDate) { + let date = this._getStartDate(aMainDate); + let calbox = this.querySelector(".minimonth-calendar"); + let days = (calbox.children.length - 1) * 7; + date.setDate(date.getDate() + days - 1); + return date; + } + + _sameDay(aDate1, aDate2) { + if ( + aDate1 && + aDate2 && + aDate1.getDate() == aDate2.getDate() && + aDate1.getMonth() == aDate2.getMonth() && + aDate1.getFullYear() == aDate2.getFullYear() + ) { + return true; + } + return false; + } + + advanceMonth(aDir) { + let advEditorDate = new Date(this.mEditorDate); // At 1st of month. + let advMonth = this.mEditorDate.getMonth() + aDir; + advEditorDate.setMonth(advMonth); + this.showMonth(advEditorDate); + } + + advanceYear(aDir) { + let advEditorDate = new Date(this.mEditorDate); // At 1st of month. + let advYear = this.mEditorDate.getFullYear() + aDir; + advEditorDate.setFullYear(advYear); + this.showMonth(advEditorDate); + } + + moveDateByOffset(aYears, aMonths, aDays) { + const date = new Date( + this.mFocused.date.getFullYear() + aYears, + this.mFocused.date.getMonth() + aMonths, + this.mFocused.date.getDate() + aDays + ); + this.focusDate(date); + } + + focusCalendar() { + this.mFocused.focus(); + } + + onDayActivate(aEvent) { + // The associated date might change when setting this.value if month changes. + const date = aEvent.target.date; + if (this.getAttribute("readonly") != "true") { + this.value = date; + this.fireEvent("select"); + } + this.setFocusedDate(date, true); + aEvent.stopPropagation(); + aEvent.preventDefault(); + } + + onDayMovement(event, years, months, days) { + this.moveDateByOffset(years, months, days); + event.stopPropagation(); + event.preventDefault(); + } + + disconnectedCallback() { + if (this.mObservesComposite) { + cal.view.getCompositeCalendar(window).removeObserver(this.calICompositeObserver); + } + } + } + + MozXULElement.implementCustomInterface(CalendarMinimonth, [ + Ci.calIObserver, + Ci.calICompositeObserver, + ]); + customElements.define("calendar-minimonth", CalendarMinimonth); +} diff --git a/comm/calendar/base/content/widgets/calendar-modebox.js b/comm/calendar/base/content/widgets/calendar-modebox.js new file mode 100644 index 0000000000..417c790e34 --- /dev/null +++ b/comm/calendar/base/content/widgets/calendar-modebox.js @@ -0,0 +1,244 @@ +/* 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/. */ + +"use strict"; + +/* globals MozXULElement */ + +// Wrap in a block to prevent leaking to window scope. +{ + /** + * A calendar-modebox directly extends to a xul:box element with extra functionality. Like a + * xul:hbox it has a horizontal orientation. It is designed to be displayed only: + * 1) in given application modes (e.g "task" mode, "calendar" mode) and + * 2) only in relation to the "checked" attribute of a control (e.g. a command or checkbox). + * + * - The attribute "mode" denotes a comma-separated list of all modes that the modebox should + * not be collapsed in, e.g. `mode="calendar,task"`. + * - The attribute "current" denotes the current viewing mode. + * - The attribute "refcontrol" points to a control, either a "command", "checkbox" or other + * elements that support a "checked" attribute, that is often used to denote whether a + * modebox should be displayed or not. If "refcontrol" is set to the id of a command you + * can there set the oncommand attribute like: + * `oncommand='document.getElementById('my-mode-pane').togglePane(event)`. + * In case it is a checkbox element or derived checkbox element this is done automatically + * by listening to the event "CheckboxChange". So if the current application mode is one of + * the modes listed in the "mode" attribute it is additionally verified whether the element + * denoted by "refcontrol" is checked or not. + * - The attribute "collapsedinmodes" is a comma-separated list of the modes the modebox + * should be collapsed in (e.g. "mail,calendar"). For example, if the user collapses a + * modebox when in a given mode, that mode would be added to "collapsedinmodes". This + * attribute is made persistent across restarts. + * + * @augments {MozXULElement} + */ + class CalendarModebox extends MozXULElement { + static get observedAttributes() { + return ["current"]; + } + + connectedCallback() { + if (this.delayConnectedCallback()) { + return; + } + + this.mRefControl = null; + + if (this.hasAttribute("refcontrol")) { + this.mRefControl = document.getElementById(this.getAttribute("refcontrol")); + if (this.mRefControl && this.mRefControl.localName == "checkbox") { + this.mRefControl.addEventListener("CheckboxStateChange", this, true); + } + } + } + + attributeChangedCallback(name, oldValue, newValue) { + if (name == "current" && oldValue != newValue) { + let display = this.isVisibleInMode(newValue); + this.setVisible(display, false, true); + } + } + + get currentMode() { + return this.getAttribute("current"); + } + + /** + * The event handler for various events relevant to CalendarModebox. + * + * @param {Event} event - The event. + */ + handleEvent(event) { + if (event.type == "CheckboxStateChange") { + this.onCheckboxStateChange(event); + } + } + + /** + * A "mode attribute" contains comma-separated lists of values, for example: + * `modewidths="200,200,200"`. Each of these values corresponds to one of the modes in + * the "mode" attribute: `mode="mail,calendar,task"`. This function sets a new value for + * a given mode in a given "mode attribute". + * + * @param {string} attributeName - A "mode attribute" in which to set a new value. + * @param {string} value - A new value to set. + * @param {string} [mode=this.currentMode] - Set the value for this mode. + */ + setModeAttribute(attributeName, value, mode = this.currentMode) { + if (!this.hasAttribute(attributeName)) { + return; + } + let attributeValues = this.getAttribute(attributeName).split(","); + let modes = this.getAttribute("mode").split(","); + attributeValues[modes.indexOf(mode)] = value; + this.setAttribute(attributeName, attributeValues.join(",")); + } + + /** + * A "mode attribute" contains comma-separated lists of values, for example: + * `modewidths="200,200,200"`. Each of these values corresponds to one of the modes in + * the "mode" attribute: `mode="mail,calendar,task"`. This function returns the value + * for a given mode in a given "mode attribute". + * + * @param {string} attributeName - A "mode attribute" to get a value from. + * @param {string} [mode=this.currentMode] - Get the value for this mode. + * @returns {string} The value found in the mode attribute or an empty string. + */ + getModeAttribute(attributeName, mode = this.currentMode) { + if (!this.hasAttribute(attributeName)) { + return ""; + } + let attributeValues = this.getAttribute(attributeName).split(","); + let modes = this.getAttribute("mode").split(","); + return attributeValues[modes.indexOf(mode)]; + } + + /** + * Sets the visibility (collapsed state) of this modebox and (optionally) updates the + * `collapsedinmode` attribute and (optionally) notifies the `refcontrol`. + * + * @param {boolean} visible - Whether the modebox should become visible or not. + * @param {boolean} [toPushModeCollapsedAttribute=true] - Whether to push the current mode + * to `collapsedinmodes` attribute. + * @param {boolean} [toNotifyRefControl=true] - Whether to notify the `refcontrol`. + */ + setVisible(visible, toPushModeCollapsedAttribute = true, toNotifyRefControl = true) { + let pushModeCollapsedAttribute = toPushModeCollapsedAttribute === true; + let notifyRefControl = toNotifyRefControl === true; + + let collapsedModes = []; + let modeIndex = -1; + let collapsedInMode = false; + + if (this.hasAttribute("collapsedinmodes")) { + collapsedModes = this.getAttribute("collapsedinmodes").split(","); + modeIndex = collapsedModes.indexOf(this.currentMode); + collapsedInMode = modeIndex > -1; + } + + let display = visible; + if (display && !pushModeCollapsedAttribute) { + display = !collapsedInMode; + } + + this.collapsed = !display || !this.isVisibleInMode(); + + if (pushModeCollapsedAttribute) { + if (!display) { + if (modeIndex == -1) { + collapsedModes.push(this.currentMode); + if (this.getAttribute("collapsedinmodes") == ",") { + collapsedModes.splice(0, 2); + } + } + } else if (modeIndex > -1) { + collapsedModes.splice(modeIndex, 1); + if (collapsedModes.join(",") == "") { + collapsedModes[0] = ","; + } + } + this.setAttribute("collapsedinmodes", collapsedModes.join(",")); + + Services.xulStore.persist(this, "collapsedinmodes"); + } + + if (notifyRefControl && this.hasAttribute("refcontrol")) { + let command = document.getElementById(this.getAttribute("refcontrol")); + if (command) { + command.setAttribute("checked", display); + command.disabled = !this.isVisibleInMode(); + } + } + } + + /** + * Return whether this modebox is visible for a given mode, according to both its + * `mode` and `collapsedinmodes` attributes. + * + * @param {string} [mode=this.currentMode] - Is the modebox visible for this mode? + * @returns {boolean} Whether this modebox is visible for the given mode. + */ + isVisible(mode = this.currentMode) { + if (!this.isVisibleInMode(mode)) { + return false; + } + let collapsedModes = this.getAttribute("collapsedinmodes").split(","); + return !collapsedModes.includes(mode); + } + + /** + * Returns whether this modebox is visible for a given mode, according to its + * `mode` attribute. + * + * @param {string} [mode=this.currentMode] - Is the modebox visible for this mode? + * @returns {boolean} Whether this modebox is visible for the given mode. + */ + isVisibleInMode(mode = this.currentMode) { + return this.hasAttribute("mode") ? this.getAttribute("mode").split(",").includes(mode) : true; + } + + /** + * Used to toggle the checked state of a command connected to this modebox, and set the + * visibility of this modebox accordingly. + * + * @param {Event} event - An event with a command (with a checked attribute) as its target. + */ + togglePane(event) { + let command = event.target; + let newValue = command.getAttribute("checked") == "true" ? "false" : "true"; + command.setAttribute("checked", newValue); + this.setVisible(newValue == "true", true, true); + } + + /** + * Handles a change in a checkbox state, by making this modebox visible or not. + * + * @param {Event} event - An event with a target that has a `checked` attribute. + */ + onCheckboxStateChange(event) { + let newValue = event.target.checked; + this.setVisible(newValue, true, true); + } + } + + customElements.define("calendar-modebox", CalendarModebox); + + /** + * A `calendar-modebox` but with a vertical orientation like a `vbox`. (Different Custom + * Elements cannot be defined using the same class, thus we need this subclass.) + * + * @augments {CalendarModebox} + */ + class CalendarModevbox extends CalendarModebox { + connectedCallback() { + if (this.delayConnectedCallback()) { + return; + } + super.connectedCallback(); + this.setAttribute("orient", "vertical"); + } + } + + customElements.define("calendar-modevbox", CalendarModevbox); +} diff --git a/comm/calendar/base/content/widgets/calendar-notifications-setting.js b/comm/calendar/base/content/widgets/calendar-notifications-setting.js new file mode 100644 index 0000000000..1f772992c7 --- /dev/null +++ b/comm/calendar/base/content/widgets/calendar-notifications-setting.js @@ -0,0 +1,259 @@ +/* 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/. */ + +"use strict"; + +/* globals MozXULElement */ + +// Wrap in a block to prevent leaking to window scope. +{ + var { cal } = ChromeUtils.import("resource:///modules/calendar/calUtils.jsm"); + var { PluralForm } = ChromeUtils.importESModule("resource://gre/modules/PluralForm.sys.mjs"); + + /** + * A calendar-notifications-setting provides controls to config notifications + * times of a calendar. + * + * @augments {MozXULElement} + */ + class CalendarNotificationsSetting extends MozXULElement { + connectedCallback() { + MozXULElement.insertFTLIfNeeded("calendar/calendar-widgets.ftl"); + } + + /** + * @type {string} A string in the form of "PT5M PT0M" to represent the notifications times. + */ + get value() { + return [...this._elList.children] + .map(row => { + let count = row.querySelector("input").value; + let unit = row.querySelector(".unit-menu").value; + let [relation, tag] = row.querySelector(".relation-menu").value.split("-"); + + tag = tag == "END" ? "END:" : ""; + relation = relation == "before" ? "-" : ""; + let durTag = unit == "D" ? "P" : "PT"; + return `${tag}${relation}${durTag}${count}${unit}`; + }) + .join(","); + } + + set value(value) { + // An array of notifications times, each item is in the form of [5, "M", + // "before-start"], i.e. a triple of time, unit and relation. + let items = []; + let durations = value?.split(",") || []; + for (let dur of durations) { + dur = dur.trim(); + if (!dur) { + continue; + } + let [relation, value] = dur.split(":"); + if (!value) { + value = relation; + relation = "START"; + } + if (value.startsWith("-")) { + relation = `before-${relation}`; + value = value.slice(1); + } else { + relation = `after-${relation}`; + } + let prefix = value.slice(0, 2); + if (prefix != "PT") { + prefix = value[0]; + } + let unit = value.slice(-1); + if ((prefix == "P" && unit != "D") || (prefix == "PT" && !["M", "H"].includes(unit))) { + continue; + } + value = value.slice(prefix.length, -1); + items.push([value, unit, relation]); + } + this._render(items); + } + + /** + * @type {boolean} If true, all form controls should be disabled. + */ + set disabled(disabled) { + this._disabled = disabled; + this._updateDisabled(); + } + + /** + * Update the disabled attributes of all form controls to this._disabled. + */ + _updateDisabled() { + for (let el of this.querySelectorAll("label, input, button, menulist")) { + el.disabled = this._disabled; + } + } + + /** + * Because form controls can be dynamically added/removed, we bind events to + * _elButtonAdd and _elList. + */ + _bindEvents() { + this._elButtonAdd.addEventListener("click", e => { + // Add a notification time row. + this._addNewRow(0, "M", "before-START"); + this._emit(); + }); + + this._elList.addEventListener("change", e => { + if (!HTMLInputElement.isInstance(e.target)) { + // We only care about change event of input elements. + return; + } + // We don't want this to interfere with the 'change' event emitted by + // calendar-notifications-setting itself. + e.stopPropagation(); + this._updateMenuLists(); + this._emit(); + }); + + this._elList.addEventListener("command", e => { + let el = e.target; + if (el.tagName == "menuitem") { + this._emit(); + } else if (el.tagName == "button") { + // Remove a notification time row. + el.closest("hbox").remove(); + this._updateAddButton(); + this._emit(); + } + }); + } + + /** + * Render the layout and the add button, then bind events. This is delayed + * until the first `set value` call, so that l10n works correctly. + */ + _renderLayout() { + this.appendChild( + MozXULElement.parseXULToFragment(` + <hbox align="center"> + <label data-l10n-id="calendar-notifications-label"></label> + <spacer flex="1"></spacer> + <button class="add-button" + data-l10n-id="calendar-add-notification-button"/> + </hbox> + <separator class="thin"/> + <vbox class="calendar-notifications-list indent"></vbox> + `) + ); + this._elList = this.querySelector(".calendar-notifications-list"); + this._elButtonAdd = this.querySelector("button"); + this._bindEvents(); + } + + /** + * Render this_items to a list of rows. + * + * @param {Array<[number, string, string]>} items - An array of count, unit and relation. + */ + _render(items) { + this._renderLayout(); + + // Render a row for each item in this._items. + items.forEach(([value, unit, relation]) => { + this._addNewRow(value, unit, relation); + }); + if (items.length) { + this._updateMenuLists(); + this._updateDisabled(); + } + } + + /** + * Render a notification entry to a row. Each row contains a time input, a + * unit menulist, a relation menulist and a remove button. + */ + _addNewRow(value, unit, relation) { + let fragment = MozXULElement.parseXULToFragment(` + <hbox class="calendar-notifications-row" align="center"> + <html:input class="size3" value="${value}" type="number" min="0"/> + <menulist class="unit-menu" crop="none" value="${unit}"> + <menupopup> + <menuitem value="M"/> + <menuitem value="H"/> + <menuitem value="D"/> + </menupopup> + </menulist> + <menulist class="relation-menu" crop="none" value="${relation}"> + <menupopup class="reminder-relation-origin-menupopup"> + <menuitem data-id="reminderCustomOriginBeginBeforeEvent" + value="before-START"/> + <menuitem data-id="reminderCustomOriginBeginAfterEvent" + value="after-START"/> + <menuitem data-id="reminderCustomOriginEndBeforeEvent" + value="before-END"/> + <menuitem data-id="reminderCustomOriginEndAfterEvent" + value="after-END"/> + </menupopup> + </menulist> + <button class="remove-button"></button> + </hbox> + `); + this._elList.appendChild(fragment); + this._updateMenuLists(); + this._updateAddButton(); + } + + /** + * To prevent a too crowded UI, hide the add button if already have 5 rows. + */ + _updateAddButton() { + if (this._elList.childElementCount >= 5) { + this._elButtonAdd.hidden = true; + } else { + this._elButtonAdd.hidden = false; + } + } + + /** + * Iterate all rows, update the plurality of menulist (unit) to the input + * value (time). + */ + _updateMenuLists() { + for (let row of this._elList.children) { + let input = row.querySelector("input"); + let menulist = row.querySelector(".unit-menu"); + this._updateMenuList(input.value, menulist); + for (let menuItem of row.querySelectorAll(".relation-menu menuitem")) { + menuItem.label = cal.l10n.getString("calendar-alarms", menuItem.dataset.id); + } + } + } + + /** + * Update the plurality of a menulist (unit) options to the input value (time). + */ + _updateMenuList(length, menu) { + let getUnitEntry = unit => + ({ + M: "unitMinutes", + H: "unitHours", + D: "unitDays", + }[unit] || "unitMinutes"); + + for (let menuItem of menu.getElementsByTagName("menuitem")) { + menuItem.label = PluralForm.get(length, cal.l10n.getCalString(getUnitEntry(menuItem.value))) + .replace("#1", "") + .trim(); + } + } + + /** + * Emit a change event. + */ + _emit() { + this.dispatchEvent(new CustomEvent("change", { detail: this.value })); + } + } + + customElements.define("calendar-notifications-setting", CalendarNotificationsSetting); +} diff --git a/comm/calendar/base/content/widgets/datetimepickers.js b/comm/calendar/base/content/widgets/datetimepickers.js new file mode 100644 index 0000000000..ae2c87caf8 --- /dev/null +++ b/comm/calendar/base/content/widgets/datetimepickers.js @@ -0,0 +1,1529 @@ +/* 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 MozElements, MozXULElement */ + +// Wrap in a block to prevent leaking to window scope. +{ + const { cal } = ChromeUtils.import("resource:///modules/calendar/calUtils.jsm"); + + // Leave these first arguments as `undefined`, to use the OS style if + // intl.regional_prefs.use_os_locales is true or the app language matches the OS language. + // Otherwise, the app language is used. + let dateFormatter = new Services.intl.DateTimeFormat(undefined, { dateStyle: "short" }); + let timeFormatter = new Services.intl.DateTimeFormat(undefined, { timeStyle: "short" }); + + let probeSucceeded; + let alphaMonths; + let yearIndex, monthIndex, dayIndex; + let ampmIndex, amRegExp, pmRegExp; + let parseTimeRegExp, parseShortDateRegex; + + class MozTimepickerMinute extends MozXULElement { + static get observedAttributes() { + return ["label", "selected"]; + } + + constructor() { + super(); + + this.addEventListener("wheel", event => { + const pixelThreshold = 50; + let deltaView = 0; + + if (event.deltaMode == event.DOM_DELTA_PAGE || event.deltaMode == event.DOM_DELTA_LINE) { + // Line/Page scrolling is usually vertical + if (event.deltaY) { + deltaView = event.deltaY < 0 ? -1 : 1; + } + } else if (event.deltaMode == event.DOM_DELTA_PIXEL) { + // The natural direction for pixel scrolling is left/right + this.pixelScrollDelta += event.deltaX; + if (this.pixelScrollDelta > pixelThreshold) { + deltaView = 1; + this.pixelScrollDelta = 0; + } else if (this.pixelScrollDelta < -pixelThreshold) { + deltaView = -1; + this.pixelScrollDelta = 0; + } + } + + if (deltaView != 0) { + this.moveMinutes(deltaView); + } + + event.stopPropagation(); + event.preventDefault(); + }); + + this.clickMinute = (minuteItem, minuteNumber) => { + this.closest("timepicker-grids").clickMinute(minuteItem, minuteNumber); + }; + this.moveMinutes = number => { + this.closest("timepicker-grids").moveMinutes(number); + }; + } + + connectedCallback() { + if (this.hasChildNodes()) { + return; + } + + const spacer = document.createXULElement("spacer"); + spacer.setAttribute("flex", "1"); + + const minutebox = document.createXULElement("vbox"); + minutebox.addEventListener("click", () => { + this.clickMinute(this, this.getAttribute("value")); + }); + + const box = document.createXULElement("box"); + + this.label = document.createXULElement("label"); + this.label.classList.add("time-picker-minute-label"); + + box.appendChild(this.label); + minutebox.appendChild(box); + + this.appendChild(spacer.cloneNode()); + this.appendChild(minutebox); + this.appendChild(spacer); + + this.pixelScrollDelta = 0; + + this._updateAttributes(); + } + + attributeChangedCallback() { + this._updateAttributes(); + } + + _updateAttributes() { + if (!this.label) { + return; + } + + if (this.hasAttribute("label")) { + this.label.setAttribute("value", this.getAttribute("label")); + } else { + this.label.removeAttribute("value"); + } + + if (this.hasAttribute("selected")) { + this.label.setAttribute("selected", this.getAttribute("selected")); + } else { + this.label.removeAttribute("selected"); + } + } + } + + class MozTimepickerHour extends MozXULElement { + static get observedAttributes() { + return ["label", "selected"]; + } + + constructor() { + super(); + + this.addEventListener("wheel", event => { + const pixelThreshold = 50; + let deltaView = 0; + + if (event.deltaMode == event.DOM_DELTA_PAGE || event.deltaMode == event.DOM_DELTA_LINE) { + // Line/Page scrolling is usually vertical + if (event.deltaY) { + deltaView = event.deltaY < 0 ? -1 : 1; + } + } else if (event.deltaMode == event.DOM_DELTA_PIXEL) { + // The natural direction for pixel scrolling is left/right + this.pixelScrollDelta += event.deltaX; + if (this.pixelScrollDelta > pixelThreshold) { + deltaView = 1; + this.pixelScrollDelta = 0; + } else if (this.pixelScrollDelta < -pixelThreshold) { + deltaView = -1; + this.pixelScrollDelta = 0; + } + } + + if (deltaView != 0) { + this.moveHours(deltaView); + } + + event.stopPropagation(); + event.preventDefault(); + }); + + this.clickHour = (hourItem, hourNumber) => { + this.closest("timepicker-grids").clickHour(hourItem, hourNumber); + }; + this.moveHours = number => { + this.closest("timepicker-grids").moveHours(number); + }; + this.doubleClickHour = (hourItem, hourNumber) => { + this.closest("timepicker-grids").doubleClickHour(hourItem, hourNumber); + }; + } + + connectedCallback() { + if (this.hasChildNodes()) { + return; + } + + const spacer = document.createXULElement("spacer"); + spacer.setAttribute("flex", "1"); + + const hourbox = document.createXULElement("vbox"); + hourbox.addEventListener("click", () => { + this.clickHour(this, this.getAttribute("value")); + }); + hourbox.addEventListener("dblclick", () => { + this.doubleClickHour(this, this.getAttribute("value")); + }); + + const box = document.createXULElement("box"); + + this.label = document.createXULElement("label"); + this.label.classList.add("time-picker-hour-label"); + + box.appendChild(this.label); + hourbox.appendChild(box); + hourbox.appendChild(spacer.cloneNode()); + + this.appendChild(spacer.cloneNode()); + this.appendChild(hourbox); + this.appendChild(spacer); + + this._updateAttributes(); + } + + attributeChangedCallback() { + this._updateAttributes(); + } + + _updateAttributes() { + if (!this.label) { + return; + } + + if (this.hasAttribute("label")) { + this.label.setAttribute("value", this.getAttribute("label")); + } else { + this.label.removeAttribute("value"); + } + + if (this.hasAttribute("selected")) { + this.label.setAttribute("selected", this.getAttribute("selected")); + } else { + this.label.removeAttribute("selected"); + } + } + } + + /** + * The MozTimepickerGrids widget displays the grid of times to select, e.g. for an event. + * Typically it represents the popup content that let's the user select a time, in a + * <timepicker> widget. + * + * @augments MozXULElement + */ + class MozTimepickerGrids extends MozXULElement { + constructor() { + super(); + + this.content = MozXULElement.parseXULToFragment(` + <vbox class="time-picker-grids"> + <vbox class="time-picker-hour-grid" format12hours="false"> + <hbox flex="1" class="timepicker-topRow-hour-class"> + <timepicker-hour class="time-picker-hour-box-class" value="0" label="0"></timepicker-hour> + <timepicker-hour class="time-picker-hour-box-class" value="1" label="1"></timepicker-hour> + <timepicker-hour class="time-picker-hour-box-class" value="2" label="2"></timepicker-hour> + <timepicker-hour class="time-picker-hour-box-class" value="3" label="3"></timepicker-hour> + <timepicker-hour class="time-picker-hour-box-class" value="4" label="4"></timepicker-hour> + <timepicker-hour class="time-picker-hour-box-class" value="5" label="5"></timepicker-hour> + <timepicker-hour class="time-picker-hour-box-class" value="6" label="6"></timepicker-hour> + <timepicker-hour class="time-picker-hour-box-class" value="7" label="7"></timepicker-hour> + <timepicker-hour class="time-picker-hour-box-class" value="8" label="8"></timepicker-hour> + <timepicker-hour class="time-picker-hour-box-class" value="9" label="9"></timepicker-hour> + <timepicker-hour class="time-picker-hour-box-class" value="10" label="10"></timepicker-hour> + <timepicker-hour class="time-picker-hour-box-class" value="11" label="11"></timepicker-hour> + <hbox class="timepicker-amLabelBox-class amLabelBox" hidden="true"> + <label></label> + </hbox> + </hbox> + <hbox flex="1" class="timepicker-bottomRow-hour-class"> + <timepicker-hour class="time-picker-hour-box-class" value="12" label="12"></timepicker-hour> + <timepicker-hour class="time-picker-hour-box-class" value="13" label="13"></timepicker-hour> + <timepicker-hour class="time-picker-hour-box-class" value="14" label="14"></timepicker-hour> + <timepicker-hour class="time-picker-hour-box-class" value="15" label="15"></timepicker-hour> + <timepicker-hour class="time-picker-hour-box-class" value="16" label="16"></timepicker-hour> + <timepicker-hour class="time-picker-hour-box-class" value="17" label="17"></timepicker-hour> + <timepicker-hour class="time-picker-hour-box-class" value="18" label="18"></timepicker-hour> + <timepicker-hour class="time-picker-hour-box-class" value="19" label="19"></timepicker-hour> + <timepicker-hour class="time-picker-hour-box-class" value="20" label="20"></timepicker-hour> + <timepicker-hour class="time-picker-hour-box-class" value="21" label="21"></timepicker-hour> + <timepicker-hour class="time-picker-hour-box-class" value="22" label="22"></timepicker-hour> + <timepicker-hour class="time-picker-hour-box-class" value="23" label="23"></timepicker-hour> + <hbox class="pmLabelBox timepicker-pmLabelBox-class" hidden="true"> + <label></label> + </hbox> + </hbox> + </vbox> + <vbox class="time-picker-five-minute-grid-box"> + <vbox class="time-picker-five-minute-grid"> + <hbox flex="1"> + <timepicker-minute class="time-picker-five-minute-class" value="0" label=":00" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-five-minute-class" value="5" label=":05" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-five-minute-class" value="10" label=":10" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-five-minute-class" value="15" label=":15" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-five-minute-class" value="20" label=":20" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-five-minute-class" value="25" label=":25" flex="1"></timepicker-minute> + </hbox> + <hbox flex="1"> + <timepicker-minute class="time-picker-five-minute-class" value="30" label=":30" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-five-minute-class" value="35" label=":35" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-five-minute-class" value="40" label=":40" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-five-minute-class" value="45" label=":45" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-five-minute-class" value="50" label=":50" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-five-minute-class" value="55" label=":55" flex="1"></timepicker-minute> + </hbox> + </vbox> + <hbox class="time-picker-minutes-bottom"> + <spacer flex="1"></spacer> + <label class="time-picker-more-control-label" value="»" onclick="clickMore()"></label> + </hbox> + </vbox> + <vbox class="time-picker-one-minute-grid-box" flex="1" hidden="true"> + <vbox class="time-picker-one-minute-grid" flex="1"> + <hbox flex="1"> + <timepicker-minute class="time-picker-one-minute-class" value="0" label=":00" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="1" label=":01" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="2" label=":02" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="3" label=":03" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="4" label=":04" flex="1"></timepicker-minute> + </hbox> + <hbox flex="1"> + <timepicker-minute class="time-picker-one-minute-class" value="5" label=":05" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="6" label=":06" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="7" label=":07" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="8" label=":08" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="9" label=":09" flex="1"></timepicker-minute> + </hbox> + <hbox flex="1"> + <timepicker-minute class="time-picker-one-minute-class" value="10" label=":10" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="11" label=":11" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="12" label=":12" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="13" label=":13" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="14" label=":14" flex="1"></timepicker-minute> + </hbox> + <hbox flex="1"> + <timepicker-minute class="time-picker-one-minute-class" value="15" label=":15" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="16" label=":16" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="17" label=":17" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="18" label=":18" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="19" label=":19" flex="1"></timepicker-minute> + </hbox> + <hbox flex="1"> + <timepicker-minute class="time-picker-one-minute-class" value="20" label=":20" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="21" label=":21" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="22" label=":22" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="23" label=":23" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="24" label=":24" flex="1"></timepicker-minute> + </hbox> + <hbox flex="1"> + <timepicker-minute class="time-picker-one-minute-class" value="25" label=":25" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="26" label=":26" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="27" label=":27" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="28" label=":28" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="29" label=":29" flex="1"></timepicker-minute> + </hbox> + <hbox flex="1"> + <timepicker-minute class="time-picker-one-minute-class" value="30" label=":30" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="31" label=":31" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="32" label=":32" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="33" label=":33" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="34" label=":34" flex="1"></timepicker-minute> + </hbox> + <hbox flex="1"> + <timepicker-minute class="time-picker-one-minute-class" value="35" label=":35" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="36" label=":36" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="37" label=":37" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="38" label=":38" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="39" label=":39" flex="1"></timepicker-minute> + </hbox> + <hbox flex="1"> + <timepicker-minute class="time-picker-one-minute-class" value="40" label=":40" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="41" label=":41" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="42" label=":42" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="43" label=":43" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="44" label=":44" flex="1"></timepicker-minute> + </hbox> + <hbox flex="1"> + <timepicker-minute class="time-picker-one-minute-class" value="45" label=":45" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="46" label=":46" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="47" label=":47" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="48" label=":48" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="49" label=":49" flex="1"></timepicker-minute> + </hbox> + <hbox flex="1"> + <timepicker-minute class="time-picker-one-minute-class" value="50" label=":50" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="51" label=":51" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="52" label=":52" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="53" label=":53" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="54" label=":54" flex="1"></timepicker-minute> + </hbox> + <hbox flex="1"> + <timepicker-minute class="time-picker-one-minute-class" value="55" label=":55" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="56" label=":56" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="57" label=":57" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="58" label=":58" flex="1"></timepicker-minute> + <timepicker-minute class="time-picker-one-minute-class" value="59" label=":59" flex="1"></timepicker-minute> + </hbox> + </vbox> + <hbox class="time-picker-minutes-bottom"> + <spacer flex="1"></spacer> + <label class="time-picker-more-control-label" value="«" onclick="clickLess()"></label> + </hbox> + </vbox> + </vbox> + `); + } + + connectedCallback() { + if (!this.hasChildNodes()) { + this.appendChild(document.importNode(this.content, true)); + } + + // set by onPopupShowing + this.mPicker = null; + + // The currently selected time + this.mSelectedTime = new Date(); + // The selected hour and selected minute items + this.mSelectedHourItem = null; + this.mSelectedMinuteItem = null; + // constants use to specify one and five minute view + this.kMINUTE_VIEW_FIVE = 5; + this.kMINUTE_VIEW_ONE = 1; + } + + /** + * Sets new mSelectedTime. + * + * @param {string | Array} val new mSelectedTime value + */ + set value(val) { + if (typeof val == "string") { + val = parseTime(val); + } else if (Array.isArray(val)) { + let [hours, minutes] = val; + val = new Date(); + val.setHours(hours); + val.setMinutes(minutes); + } + this.mSelectedTime = val; + } + + /** + * @returns {Array} An array containing mSelectedTime hours and mSelectedTime minutes + */ + get value() { + return [this.mSelectedTime.getHours(), this.mSelectedTime.getMinutes()]; + } + + /** + * Set up the picker, called when the popup pops. + */ + onPopupShowing() { + // select the hour item + let hours24 = this.mSelectedTime.getHours(); + let hourItem = this.querySelector(`.time-picker-hour-box-class[value="${hours24}"]`); + this.selectHourItem(hourItem); + + // Show the five minute view if we are an even five minutes, + // otherwise one minute view + let minutesByFive = this.calcNearestFiveMinutes(this.mSelectedTime); + + if (minutesByFive == this.mSelectedTime.getMinutes()) { + this.clickLess(); + } else { + this.clickMore(); + } + } + + /** + * Switches popup to minute view and selects the selected minute item. + */ + clickMore() { + // switch to one minute view + this.switchMinuteView(this.kMINUTE_VIEW_ONE); + + // select minute box corresponding to the time + let minutes = this.mSelectedTime.getMinutes(); + let oneMinuteItem = this.querySelector(`.time-picker-one-minute-class[value="${minutes}"]`); + this.selectMinuteItem(oneMinuteItem); + } + + /** + * Switches popup to five-minute view and selects the five-minute item nearest to selected + * minute item. + */ + clickLess() { + // switch to five minute view + this.switchMinuteView(this.kMINUTE_VIEW_FIVE); + + // select closest five minute box, + // BUT leave the selected time at what may NOT be an even five minutes + // So that If they click more again the proper non-even-five minute + // box will be selected + let minutesByFive = this.calcNearestFiveMinutes(this.mSelectedTime); + let fiveMinuteItem = this.querySelector( + `.time-picker-five-minute-class[value="${minutesByFive}"]` + ); + this.selectMinuteItem(fiveMinuteItem); + } + + /** + * Selects the hour item which was clicked. + * + * @param {Node} hourItem - Hour item which was clicked + * @param {number} hourNumber - Hour value of the clicked hour item + */ + clickHour(hourItem, hourNumber) { + // select the item + this.selectHourItem(hourItem); + + // Change the hour in the selected time. + this.mSelectedTime.setHours(hourNumber); + + this.hasChanged = true; + } + + /** + * Called when one of the hour boxes is double clicked. + * Sets the time to the selected hour, on the hour, and closes the popup. + * + * @param {Node} hourItem - Hour item which was clicked + * @param {number} hourNumber - Hour value of the clicked hour item + */ + doubleClickHour(hourItem, hourNumber) { + // set the minutes to :00 + this.mSelectedTime.setMinutes(0); + + this.dispatchEvent(new CustomEvent("select")); + } + + /** + * Changes selectedTime's minute, calls the client's onchange and closes + * the popup. + * + * @param {Node} minuteItem - Minute item which was clicked + * @param {number} minuteNumber - Minute value of the clicked minute item + */ + clickMinute(minuteItem, minuteNumber) { + // set the minutes in the selected time + this.mSelectedTime.setMinutes(minuteNumber); + this.selectMinuteItem(minuteItem); + this.hasChanged = true; + + this.dispatchEvent(new CustomEvent("select")); + } + + /** + * Helper function to switch between "one" and "five" minute views. + * + * @param {number} view - Number representing minute view + */ + switchMinuteView(view) { + let fiveMinuteBox = this.querySelector(".time-picker-five-minute-grid-box"); + let oneMinuteBox = this.querySelector(".time-picker-one-minute-grid-box"); + + if (view == this.kMINUTE_VIEW_ONE) { + fiveMinuteBox.setAttribute("hidden", true); + oneMinuteBox.setAttribute("hidden", false); + } else { + fiveMinuteBox.setAttribute("hidden", false); + oneMinuteBox.setAttribute("hidden", true); + } + } + + /** + * Selects an hour item. + * + * @param {Node} hourItem - Hour item node to be selected + */ + selectHourItem(hourItem) { + // clear old selection, if there is one + if (this.mSelectedHourItem != null) { + this.mSelectedHourItem.removeAttribute("selected"); + } + // set selected attribute, to cause the selected style to apply + hourItem.setAttribute("selected", "true"); + // remember the selected item so we can deselect it + this.mSelectedHourItem = hourItem; + } + + /** + * Selects a minute item. + * + * @param {Node} minuteItem - Minute item node to be selected + */ + selectMinuteItem(minuteItem) { + // clear old selection, if there is one + if (this.mSelectedMinuteItem != null) { + this.mSelectedMinuteItem.removeAttribute("selected"); + } + // set selected attribute, to cause the selected style to apply + minuteItem.setAttribute("selected", "true"); + // remember the selected item so we can deselect it + this.mSelectedMinuteItem = minuteItem; + } + + /** + * Moves minute by the number passed and handle rollover cases where the minutes gets + * greater than 59 or less than 60. + * + * @param {number} number - Moves minute by the number 'number' + */ + moveMinutes(number) { + if (!this.mSelectedTime) { + return; + } + + let idPrefix = ".time-picker-one-minute-class"; + + // Everything above assumes that we are showing the one-minute-grid, + // If not, we need to do these corrections; + let fiveMinuteBox = this.querySelector(".time-picker-five-minute-grid-box"); + + if (!fiveMinuteBox.hidden) { + number *= 5; + idPrefix = ".time-picker-five-minute-class"; + + // If the detailed view was shown before, then mSelectedTime.getMinutes + // might not be a multiple of 5. + this.mSelectedTime.setMinutes(this.calcNearestFiveMinutes(this.mSelectedTime)); + } + + let newMinutes = this.mSelectedTime.getMinutes() + number; + + // Handle rollover cases + if (newMinutes < 0) { + newMinutes += 60; + } + if (newMinutes > 59) { + newMinutes -= 60; + } + + this.mSelectedTime.setMinutes(newMinutes); + + let minuteItemId = `${idPrefix}[value="${this.mSelectedTime.getMinutes()}"]`; + let minuteItem = this.querySelector(minuteItemId); + + this.selectMinuteItem(minuteItem); + this.mPicker.kTextBox.value = this.mPicker.formatTime(this.mSelectedTime); + this.hasChanged = true; + } + + /** + * Moves hours by the number passed and handle rollover cases where the hours gets greater + * than 23 or less than 0. + * + * @param {number} number - Moves hours by the number 'number' + */ + moveHours(number) { + if (!this.mSelectedTime) { + return; + } + + let newHours = this.mSelectedTime.getHours() + number; + + // Handle rollover cases + if (newHours < 0) { + newHours += 24; + } + if (newHours > 23) { + newHours -= 24; + } + + this.mSelectedTime.setHours(newHours); + + let hourItemId = `.time-picker-hour-box-class[value="${this.mSelectedTime.getHours()}"]`; + let hourItem = this.querySelector(hourItemId); + + this.selectHourItem(hourItem); + this.mPicker.kTextBox.value = this.mPicker.formatTime(this.mSelectedTime); + this.hasChanged = true; + } + + /** + * Calculates the nearest even five minutes. + * + * @param {calDateTime} time - Time near to which nearest five minutes have to be found + */ + calcNearestFiveMinutes(time) { + let minutes = time.getMinutes(); + let minutesByFive = Math.round(minutes / 5) * 5; + + if (minutesByFive > 59) { + minutesByFive = 55; + } + return minutesByFive; + } + + /** + * Changes to 12 hours format by showing am/pm label. + * + * @param {string} amLabel - amLabelBox value + * @param {string} pmLabel - pmLabelBox value + */ + changeTo12HoursFormat(amLabel, pmLabel) { + if (!this.firstElementChild) { + this.appendChild(document.importNode(this.content, true)); + } + + let amLabelBox = this.querySelector(".amLabelBox"); + amLabelBox.removeAttribute("hidden"); + amLabelBox.firstElementChild.setAttribute("value", amLabel); + let pmLabelBox = this.querySelector(".pmLabelBox"); + pmLabelBox.removeAttribute("hidden"); + pmLabelBox.firstElementChild.setAttribute("value", pmLabel); + this.querySelector(".time-picker-hour-box-class[value='0']").setAttribute("label", "12"); + for (let i = 13; i < 24; i++) { + this.querySelector(`.time-picker-hour-box-class[value="${i}"]`).setAttribute( + "label", + i - 12 + ); + } + this.querySelector(".time-picker-hour-grid").setAttribute("format12hours", "true"); + } + } + + class CalendarDatePicker extends MozXULElement { + connectedCallback() { + if (this.delayConnectedCallback()) { + return; + } + + this.prepend(CalendarDatePicker.fragment.cloneNode(true)); + this._menulist = this.querySelector(".datepicker-menulist"); + this._inputField = this._menulist._inputField; + this._popup = this._menulist.menupopup; + this._minimonth = this.querySelector("calendar-minimonth"); + + if (this.getAttribute("type") == "forever") { + this._valueIsForever = false; + this._foreverString = cal.l10n.getString( + "calendar-event-dialog", + "eventRecurrenceForeverLabel" + ); + + this._foreverItem = document.createXULElement("button"); + this._foreverItem.setAttribute("label", this._foreverString); + this._popup.appendChild(document.createXULElement("menuseparator")); + this._popup.appendChild(this._foreverItem); + + this._foreverItem.addEventListener("command", () => { + this.value = "forever"; + this._popup.hidePopup(); + }); + } + + this.value = this.getAttribute("value") || new Date(); + + // Other attributes handled in inheritedAttributes. + this._handleMutation = mutations => { + this.value = this.getAttribute("value"); + }; + this._attributeObserver = new MutationObserver(this._handleMutation); + this._attributeObserver.observe(this, { + attributes: true, + attributeFilter: ["value"], + }); + + this.initializeAttributeInheritance(); + + this.addEventListener("keydown", event => { + if (event.key == "Escape") { + this._popup.hidePopup(); + } + }); + this._menulist.addEventListener("change", event => { + event.stopPropagation(); + + let value = parseDateTime(this._inputBoxValue); + if (!value) { + this._inputBoxValue = this._minimonthValue; + return; + } + this._inputBoxValue = this._minimonthValue = value; + this._valueIsForever = false; + + this.dispatchEvent(new CustomEvent("change", { bubbles: true })); + }); + this._popup.addEventListener("popupshown", () => { + this._minimonth.focusDate(this._minimonthValue); + const calendar = this._minimonth.querySelector(".minimonth-calendar"); + calendar.querySelector("td[selected]").focus(); + }); + this._minimonth.addEventListener("change", event => { + event.stopPropagation(); + }); + this._minimonth.addEventListener("select", () => { + this._inputBoxValue = this._minimonthValue; + this._valueIsForever = false; + this._popup.hidePopup(); + + this.dispatchEvent(new CustomEvent("change", { bubbles: true })); + }); + } + + disconnectedCallback() { + super.disconnectedCallback(); + + this._attributeObserver.disconnect(); + + if (this._menulist) { + this._menulist.remove(); + this._menulist = null; + this._inputField = null; + this._popup = null; + this._minimonth = null; + this._foreverItem = null; + } + } + + static get fragment() { + // Accessibility information of these nodes will be + // presented on XULComboboxAccessible generated from <menulist>; + // hide these nodes from the accessibility tree. + let frag = document.importNode( + MozXULElement.parseXULToFragment(` + <menulist is="menulist-editable" class="datepicker-menulist" editable="true" sizetopopup="false"> + <menupopup ignorekeys="true" popupanchor="bottomright" popupalign="topright"> + <calendar-minimonth tabindex="0"/> + </menupopup> + </menulist> + `), + true + ); + + Object.defineProperty(this, "fragment", { value: frag }); + return frag; + } + + static get inheritedAttributes() { + return { ".datepicker-menulist": "disabled" }; + } + + set value(val) { + let wasForever = this._valueIsForever; + if (this.getAttribute("type") == "forever" && val == "forever") { + this._valueIsForever = true; + this._inputBoxValue = val; + if (!wasForever) { + this.dispatchEvent(new CustomEvent("change", { bubbles: true })); + } + return; + } else if (typeof val == "string") { + val = parseDateTime(val); + } + + let existingValue = this._minimonthValue; + this._valueIsForever = false; + this._inputBoxValue = this._minimonthValue = val; + + if ( + wasForever || + existingValue.getFullYear() != val.getFullYear() || + existingValue.getMonth() != val.getMonth() || + existingValue.getDate() != val.getDate() + ) { + this.dispatchEvent(new CustomEvent("change", { bubbles: true })); + } + } + + get value() { + if (this._valueIsForever) { + return "forever"; + } + return this._minimonth.value; + } + + focus() { + this._menulist.focus(); + } + + set _inputBoxValue(val) { + if (val == "forever") { + this._inputField.value = this._foreverString; + return; + } + this._inputField.value = formatDate(val); + } + + get _inputBoxValue() { + return this._inputField.value; + } + + set _minimonthValue(val) { + if (val == "forever") { + return; + } + this._minimonth.value = val; + } + + get _minimonthValue() { + return this._minimonth.value; + } + } + + const MenuBaseControl = MozElements.BaseControlMixin(MozElements.MozElementMixin(XULMenuElement)); + MenuBaseControl.implementCustomInterface(CalendarDatePicker, [ + Ci.nsIDOMXULMenuListElement, + Ci.nsIDOMXULSelectControlElement, + ]); + + class CalendarTimePicker extends MozXULElement { + connectedCallback() { + if (this.delayConnectedCallback()) { + return; + } + + this.prepend(CalendarTimePicker.fragment.cloneNode(true)); + this._menulist = this.firstElementChild; + this._inputField = this._menulist._inputField; + this._popup = this._menulist.menupopup; + this._grid = this._popup.firstElementChild; + + this.value = this.getAttribute("value") || new Date(); + + // Change the grids in the timepicker-grids for 12-hours time format. + if (ampmIndex) { + // Find the locale strings for the AM/PM prefix/suffix. + let amTime = new Date(2000, 0, 1, 6, 12, 34); + let pmTime = new Date(2000, 0, 1, 18, 12, 34); + amTime = timeFormatter.format(amTime); + pmTime = timeFormatter.format(pmTime); + let amLabel = parseTimeRegExp.exec(amTime)[ampmIndex] || "AM"; + let pmLabel = parseTimeRegExp.exec(pmTime)[ampmIndex] || "PM"; + + this._grid.changeTo12HoursFormat(amLabel, pmLabel); + } + + // Other attributes handled in inheritedAttributes. + this._handleMutation = mutations => { + this.value = this.getAttribute("value"); + }; + this._attributeObserver = new MutationObserver(this._handleMutation); + this._attributeObserver.observe(this, { + attributes: true, + attributeFilter: ["value"], + }); + + this.initializeAttributeInheritance(); + + this._inputField.addEventListener("change", event => { + event.stopPropagation(); + + let value = parseTime(this._inputBoxValue); + if (!value) { + this._inputBoxValue = this._gridValue; + return; + } + this.value = value; + }); + this._menulist.menupopup.addEventListener("popupshowing", () => { + this._grid.onPopupShowing(); + }); + this._menulist.menupopup.addEventListener("popuphiding", () => { + this.value = this._gridValue; + }); + this._grid.addEventListener("select", event => { + event.stopPropagation(); + + this.value = this._gridValue; + this._popup.hidePopup(); + }); + } + + disconnectedCallback() { + super.disconnectedCallback(); + + this._attributeObserver.disconnect(); + + if (this._menulist) { + this._menulist.remove(); + this._menulist = null; + this._inputField = null; + this._popup = null; + this._grid = null; + } + } + + static get fragment() { + // Accessibility information of these nodes will be + // presented on XULComboboxAccessible generated from <menulist>; + // hide these nodes from the accessibility tree. + let frag = document.importNode( + MozXULElement.parseXULToFragment(` + <menulist is="menulist-editable" class="timepicker-menulist" editable="true" sizetopopup="false"> + <menupopup popupanchor="bottomright" popupalign="topright"> + <timepicker-grids/> + </menupopup> + </menulist> + `), + true + ); + + Object.defineProperty(this, "fragment", { value: frag }); + return frag; + } + + static get inheritedAttributes() { + return { ".timepicker-menulist": "disabled" }; + } + + set value(val) { + if (typeof val == "string") { + val = parseTime(val); + } else if (Array.isArray(val)) { + let [hours, minutes] = val; + val = new Date(); + val.setHours(hours); + val.setMinutes(minutes); + } + if (val.getHours() != this._hours || val.getMinutes() != this._minutes) { + let settingInitalValue = this._hours === undefined; + + this._inputBoxValue = this._gridValue = val; + [this._hours, this._minutes] = this._gridValue; + + if (!settingInitalValue) { + this.dispatchEvent(new CustomEvent("change", { bubbles: true })); + } + } + } + + get value() { + return [this._hours, this._minutes]; + } + + focus() { + this._menulist.focus(); + } + + set _inputBoxValue(val) { + if (typeof val == "string") { + val = parseTime(val); + } else if (Array.isArray(val)) { + let [hours, minutes] = val; + val = new Date(); + val.setHours(hours); + val.setMinutes(minutes); + } + this._inputField.value = formatTime(val); + } + + get _inputBoxValue() { + return this._inputField.value; + } + + set _gridValue(val) { + this._grid.value = val; + } + + get _gridValue() { + return this._grid.value; + } + } + + MenuBaseControl.implementCustomInterface(CalendarTimePicker, [ + Ci.nsIDOMXULMenuListElement, + Ci.nsIDOMXULSelectControlElement, + ]); + + class CalendarDateTimePicker extends MozXULElement { + connectedCallback() { + if (this.delayConnectedCallback()) { + return; + } + + this._datepicker = document.createXULElement("datepicker"); + this._datepicker.classList.add("datetimepicker-datepicker"); + this._datepicker.setAttribute("anonid", "datepicker"); + this._timepicker = document.createXULElement("timepicker"); + this._timepicker.classList.add("datetimepicker-timepicker"); + this._timepicker.setAttribute("anonid", "timepicker"); + this.appendChild(this._datepicker); + this.appendChild(this._timepicker); + + if (this.getAttribute("value")) { + this._datepicker.value = this.getAttribute("value"); + this._timepicker.value = this.getAttribute("value"); + } + + this.initializeAttributeInheritance(); + + this._datepicker.addEventListener("change", event => { + event.stopPropagation(); + this.dispatchEvent(new CustomEvent("change", { bubbles: true })); + }); + this._timepicker.addEventListener("change", event => { + event.stopPropagation(); + this.dispatchEvent(new CustomEvent("change", { bubbles: true })); + }); + } + + disconnectedCallback() { + super.disconnectedCallback(); + + if (this._datepicker) { + this._datepicker.remove(); + } + if (this._timepicker) { + this._timepicker.remove(); + } + } + + static get inheritedAttributes() { + return { + ".datetimepicker-datepicker": "value,disabled,disabled=datepickerdisabled", + ".datetimepicker-timepicker": "value,disabled,disabled=timepickerdisabled", + }; + } + + set value(val) { + this._datepicker.value = this._timepicker.value = val; + } + + get value() { + let dateValue = this._datepicker.value; + let [hours, minutes] = this._timepicker.value; + dateValue.setHours(hours); + dateValue.setMinutes(minutes); + dateValue.setSeconds(0); + dateValue.setMilliseconds(0); + return dateValue; + } + + focus() { + this._datepicker.focus(); + } + } + + initDateFormat(); + initTimeFormat(); + customElements.define("timepicker-minute", MozTimepickerMinute); + customElements.define("timepicker-hour", MozTimepickerHour); + customElements.define("timepicker-grids", MozTimepickerGrids); + customElements.whenDefined("menulist-editable").then(() => { + customElements.define("datepicker", CalendarDatePicker); + customElements.define("timepicker", CalendarTimePicker); + customElements.define("datetimepicker", CalendarDateTimePicker); + }); + + /** + * Parameter aValue may be a date or a date time. Dates are + * read according to locale/OS setting (d-m-y or m-d-y or ...). + * (see initDateFormat). Uses parseTime() for times. + */ + function parseDateTime(aValue) { + let tempDate = null; + if (!probeSucceeded) { + return null; // avoid errors accessing uninitialized data. + } + + let year = Number.MIN_VALUE; + let month = -1; + let day = -1; + let timeString = null; + + if (alphaMonths == null) { + // SHORT NUMERIC DATE, such as 2002-03-04, 4/3/2002, or CE2002Y03M04D. + // Made of digits & nonDigits. (Nondigits may be unicode letters + // which do not match \w, esp. in CJK locales.) + // (.*)? binds to null if no suffix. + let parseNumShortDateRegex = /^\D*(\d+)\D+(\d+)\D+(\d+)(.*)?$/; + let dateNumbersArray = parseNumShortDateRegex.exec(aValue); + if (dateNumbersArray != null) { + year = Number(dateNumbersArray[yearIndex]); + month = Number(dateNumbersArray[monthIndex]) - 1; // 0-based + day = Number(dateNumbersArray[dayIndex]); + timeString = dateNumbersArray[4]; + } + } else { + // SHORT DATE WITH ALPHABETIC MONTH, such as "dd MMM yy" or "MMMM dd, yyyy" + // (\d+|[^\d\W]) is digits or letters, not both together. + // Allows 31dec1999 (no delimiters between parts) if OS does (w2k does not). + // Allows Dec 31, 1999 (comma and space between parts) + // (Only accepts ASCII month names; JavaScript RegExp does not have an + // easy way to describe unicode letters short of a HUGE character range + // regexp derived from the Alphabetic ranges in + // http://www.unicode.org/Public/UNIDATA/DerivedCoreProperties.txt) + // (.*)? binds to null if no suffix. + let parseAlphShortDateRegex = + /^\s*(\d+|[^\d\W]+)\W{0,2}(\d+|[^\d\W]+)\W{0,2}(\d+|[^\d\W]+)(.*)?$/; + let datePartsArray = parseAlphShortDateRegex.exec(aValue); + if (datePartsArray != null) { + year = Number(datePartsArray[yearIndex]); + let monthString = datePartsArray[monthIndex].toUpperCase(); + for (let monthIdx = 0; monthIdx < alphaMonths.length; monthIdx++) { + if (monthString == alphaMonths[monthIdx]) { + month = monthIdx; + break; + } + } + day = Number(datePartsArray[dayIndex]); + timeString = datePartsArray[4]; + } + } + if (year != Number.MIN_VALUE && month != -1 && day != -1) { + // year, month, day successfully parsed + if (year >= 0 && year < 100) { + // If 0 <= year < 100, treat as 2-digit year (like formatDate): + // parse year as up to 30 years in future or 69 years in past. + // (Covers 30-year mortgage and most working people's birthdate.) + // otherwise will be treated as four digit year. + let currentYear = new Date().getFullYear(); + let currentCentury = currentYear - (currentYear % 100); + year = currentCentury + year; + if (year < currentYear - 69) { + year += 100; + } + if (year > currentYear + 30) { + year -= 100; + } + } + // if time is also present, parse it + let hours = 0; + let minutes = 0; + let seconds = 0; + if (timeString != null) { + let time = parseTime(timeString); + if (time != null) { + hours = time.getHours(); + minutes = time.getMinutes(); + seconds = time.getSeconds(); + } + } + tempDate = new Date(year, month, day, hours, minutes, seconds, 0); + } // else did not match regex, not a valid date + return tempDate; + } + + /** + * Parse a variety of time formats so that cut and paste is likely to work. + * separator: ':' '.' ' ' symbol none + * "12:34:56" "12.34.56" "12 34 56" "12h34m56s" "123456" + * seconds optional: "02:34" "02.34" "02 34" "02h34m" "0234" + * minutes optional: "12" "12" "12" "12h" "12" + * 1st hr digit optional:"9:34" " 9.34" "9 34" "9H34M" "934am" + * skip nondigit prefix " 12:34" "t12.34" " 12 34" "T12H34M" "T0234" + * am/pm optional "02:34 a.m.""02.34pm" "02 34 A M" "02H34M P.M." "0234pm" + * am/pm prefix "a.m. 02:34""pm02.34" "A M 02 34" "P.M. 02H34M" "pm0234" + * am/pm cyrillic "02:34\u0430.\u043c." "02 34 \u0420 \u041c" + * am/pm arabic "\u063502:34" (RTL 02:34a) "\u0645 02.34" (RTL 02.34 p) + * above/below noon "\u4e0a\u534802:34" "\u4e0b\u5348 02 34" + * noon before/after "\u5348\u524d02:34" "\u5348\u5f8c 02 34" + */ + function parseTime(aValue) { + let now = new Date(); + + let noon = cal.l10n.getDateFmtString("noon"); + if (aValue.toLowerCase() == noon.toLowerCase()) { + return new Date(now.getFullYear(), now.getMonth(), now.getDate(), 12, 0, 0, 0); + } + + let midnight = cal.l10n.getDateFmtString("midnight"); + if (aValue.toLowerCase() == midnight.toLowerCase()) { + return new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0, 0); + } + + let time = null; + let timePartsArray = parseTimeRegExp.exec(aValue); + const PRE_INDEX = 1, + HR_INDEX = 2, + MIN_INDEX = 4, + SEC_INDEX = 6, + POST_INDEX = 8; + + if (timePartsArray != null) { + let hoursString = timePartsArray[HR_INDEX]; + let hours = Number(hoursString); + if (!(hours >= 0 && hours < 24)) { + return null; + } + + let minutesString = timePartsArray[MIN_INDEX]; + let minutes = minutesString == null ? 0 : Number(minutesString); + if (!(minutes >= 0 && minutes < 60)) { + return null; + } + + let secondsString = timePartsArray[SEC_INDEX]; + let seconds = secondsString == null ? 0 : Number(secondsString); + if (!(seconds >= 0 && seconds < 60)) { + return null; + } + + let ampmCode = null; + if (timePartsArray[PRE_INDEX] || timePartsArray[POST_INDEX]) { + if (ampmIndex && timePartsArray[ampmIndex]) { + // try current format order first + let ampmString = timePartsArray[ampmIndex]; + if (amRegExp.test(ampmString)) { + ampmCode = "AM"; + } else if (pmRegExp.test(ampmString)) { + ampmCode = "PM"; + } + } + if (ampmCode == null) { + // not yet found + // try any format order + let preString = timePartsArray[PRE_INDEX]; + let postString = timePartsArray[POST_INDEX]; + if ( + (preString && amRegExp.test(preString)) || + (postString && amRegExp.test(postString)) + ) { + ampmCode = "AM"; + } else if ( + (preString && pmRegExp.test(preString)) || + (postString && pmRegExp.test(postString)) + ) { + ampmCode = "PM"; + } // else no match, ignore and treat as 24hour time. + } + } + if (ampmCode == "AM") { + if (hours == 12) { + hours = 0; + } + } else if (ampmCode == "PM") { + if (hours < 12) { + hours += 12; + } + } + time = new Date(now.getFullYear(), now.getMonth(), now.getDate(), hours, minutes, seconds, 0); + } // else did not match regex, not valid time + return time; + } + + function initDateFormat() { + // probe the dateformat + yearIndex = -1; + monthIndex = -1; + dayIndex = -1; + alphaMonths = null; + probeSucceeded = false; + + // SHORT NUMERIC DATE, such as 2002-03-04, 4/3/2002, or CE2002Y03M04D. + // Made of digits & nonDigits. (Nondigits may be unicode letters + // which do not match \w, esp. in CJK locales.) + parseShortDateRegex = /^\D*(\d+)\D+(\d+)\D+(\d+)\D?$/; + // Make sure to use UTC date and timezone here to avoid the pattern + // detection to fail if the probe date output would have an timezone + // offset due to our lack of support of historic timezone definitions. + let probeDate = new Date(Date.UTC(2002, 3, 6)); // month is 0-based + let probeString = formatDate(probeDate, cal.dtz.UTC); + let probeArray = parseShortDateRegex.exec(probeString); + if (probeArray) { + // Numeric month format + for (let i = 1; i <= 3; i++) { + switch (Number(probeArray[i])) { + case 2: // falls through + case 2002: + yearIndex = i; + break; + case 4: + monthIndex = i; + break; + case 5: // falls through for OS timezones western to GMT + case 6: + dayIndex = i; + break; + } + } + // All three indexes are set (not -1) at this point. + probeSucceeded = true; + } else { + // SHORT DATE WITH ALPHABETIC MONTH, such as "dd MMM yy" or "MMMM dd, yyyy" + // (\d+|[^\d\W]) is digits or letters, not both together. + // Allows 31dec1999 (no delimiters between parts) if OS does (w2k does not). + // Allows Dec 31, 1999 (comma and space between parts) + // (Only accepts ASCII month names; JavaScript RegExp does not have an + // easy way to describe unicode letters short of a HUGE character range + // regexp derived from the Alphabetic ranges in + // http://www.unicode.org/Public/UNIDATA/DerivedCoreProperties.txt) + parseShortDateRegex = /^\s*(\d+|[^\d\W]+)\W{0,2}(\d+|[^\d\W]+)\W{0,2}(\d+|[^\d\W]+)\s*$/; + probeArray = parseShortDateRegex.exec(probeString); + if (probeArray != null) { + for (let j = 1; j <= 3; j++) { + switch (Number(probeArray[j])) { + case 2: // falls through + case 2002: + yearIndex = j; + break; + case 5: // falls through for OS timezones western to GMT + case 6: + dayIndex = j; + break; + default: + monthIndex = j; + break; + } + } + if (yearIndex != -1 && dayIndex != -1 && monthIndex != -1) { + probeSucceeded = true; + // Fill alphaMonths with month names. + alphaMonths = new Array(12); + for (let monthIdx = 0; monthIdx < 12; monthIdx++) { + probeDate.setMonth(monthIdx); + probeString = formatDate(probeDate); + probeArray = parseShortDateRegex.exec(probeString); + if (probeArray) { + alphaMonths[monthIdx] = probeArray[monthIndex].toUpperCase(); + } else { + probeSucceeded = false; + } + } + } + } + } + if (!probeSucceeded) { + dump("\nOperating system short date format is not recognized: " + probeString + "\n"); + } + } + + /** + * Time format in 24-hour format or 12-hour format with am/pm string. + * Should match formats + * HH:mm, H:mm, HH:mm:ss, H:mm:ss + * hh:mm tt, h:mm tt, hh:mm:ss tt, h:mm:ss tt + * tt hh:mm, tt h:mm, tt hh:mm:ss, tt h:mm:ss + * where + * HH is 24 hour digits, with leading 0. H is 24 hour digits, no leading 0. + * hh is 12 hour digits, with leading 0. h is 12 hour digits, no leading 0. + * mm and ss are is minutes and seconds digits, with leading 0. + * tt is localized AM or PM string. + * ':' may be ':' or a units marker such as 'h', 'm', or 's' in 15h12m00s + * or may be omitted as in 151200. + */ + function initTimeFormat() { + // probe the Time format + ampmIndex = null; + // Digits HR sep MIN sep SEC sep + // Index: 2 3 4 5 6 7 + // prettier-ignore + let digitsExpr = "(\\d?\\d)\\s?(\\D)?\\s?(?:(\\d\\d)\\s?(\\D)?\\s?(?:(\\d\\d)\\s?(\\D)?\\s?)?)?"; + // digitsExpr has 6 captures, so index of first ampmExpr is 1, of last is 8. + let probeTimeRegExp = new RegExp("^\\s*(\\D*)\\s?" + digitsExpr + "\\s?(\\D*)\\s*$"); + const PRE_INDEX = 1, + HR_INDEX = 2, + // eslint-disable-next-line no-unused-vars + MIN_INDEX = 4, + SEC_INDEX = 6, + POST_INDEX = 8; + let amProbeTime = new Date(2000, 0, 1, 6, 12, 34); + let pmProbeTime = new Date(2000, 0, 1, 18, 12, 34); + let amProbeString = timeFormatter.format(amProbeTime); + let pmProbeString = timeFormatter.format(pmProbeTime); + let amFormatExpr = null, + pmFormatExpr = null; + if (amProbeString != pmProbeString) { + let amProbeArray = probeTimeRegExp.exec(amProbeString); + let pmProbeArray = probeTimeRegExp.exec(pmProbeString); + if (amProbeArray != null && pmProbeArray != null) { + if ( + amProbeArray[PRE_INDEX] && + pmProbeArray[PRE_INDEX] && + amProbeArray[PRE_INDEX] != pmProbeArray[PRE_INDEX] + ) { + ampmIndex = PRE_INDEX; + } else if (amProbeArray[POST_INDEX] && pmProbeArray[POST_INDEX]) { + if (amProbeArray[POST_INDEX] == pmProbeArray[POST_INDEX]) { + // check if need to append previous character, + // captured by the optional separator pattern after seconds digits, + // or after minutes if no seconds, or after hours if no minutes. + for (let k = SEC_INDEX; k >= HR_INDEX; k -= 2) { + let nextSepI = k + 1; + let nextDigitsI = k + 2; + if ( + (k == SEC_INDEX || (!amProbeArray[nextDigitsI] && !pmProbeArray[nextDigitsI])) && + amProbeArray[nextSepI] && + pmProbeArray[nextSepI] && + amProbeArray[nextSepI] != pmProbeArray[nextSepI] + ) { + amProbeArray[POST_INDEX] = amProbeArray[nextSepI] + amProbeArray[POST_INDEX]; + pmProbeArray[POST_INDEX] = pmProbeArray[nextSepI] + pmProbeArray[POST_INDEX]; + ampmIndex = POST_INDEX; + break; + } + } + } else { + ampmIndex = POST_INDEX; + } + } + if (ampmIndex) { + let makeFormatRegExp = function (string) { + // make expr to accept either as provided, lowercased, or uppercased + let regExp = string.replace(/(\W)/g, "[$1]"); // escape punctuation + let lowercased = string.toLowerCase(); + if (string != lowercased) { + regExp += "|" + lowercased; + } + let uppercased = string.toUpperCase(); + if (string != uppercased) { + regExp += "|" + uppercased; + } + return regExp; + }; + amFormatExpr = makeFormatRegExp(amProbeArray[ampmIndex]); + pmFormatExpr = makeFormatRegExp(pmProbeArray[ampmIndex]); + } + } + } + // International formats ([roman, cyrillic]|arabic|chinese/kanji characters) + // covering languages of U.N. (en,fr,sp,ru,ar,zh) and G8 (en,fr,de,it,ru,ja). + // See examples at parseTimeOfDay. + let amExpr = "[Aa\u0410\u0430][. ]?[Mm\u041c\u043c][. ]?|\u0635|\u4e0a\u5348|\u5348\u524d"; + let pmExpr = "[Pp\u0420\u0440][. ]?[Mm\u041c\u043c][. ]?|\u0645|\u4e0b\u5348|\u5348\u5f8c"; + if (ampmIndex) { + amExpr = amFormatExpr + "|" + amExpr; + pmExpr = pmFormatExpr + "|" + pmExpr; + } + let ampmExpr = amExpr + "|" + pmExpr; + // Must build am/pm formats into parse time regexp so that it can + // match them without mistaking the initial char for an optional divider. + // (For example, want to be able to parse both "12:34pm" and + // "12H34M56Spm" for any characters H,M,S and any language's "pm". + // The character between the last digit and the "pm" is optional. + // Must recognize "pm" directly, otherwise in "12:34pm" the "S" pattern + // matches the "p" character so only "m" is matched as ampm suffix.) + // + // digitsExpr has 6 captures, so index of first ampmExpr is 1, of last is 8. + parseTimeRegExp = new RegExp( + "(" + ampmExpr + ")?\\s?" + digitsExpr + "(" + ampmExpr + ")?\\s*$" + ); + amRegExp = new RegExp("^(?:" + amExpr + ")$"); + pmRegExp = new RegExp("^(?:" + pmExpr + ")$"); + } + + function formatDate(aDate, aTimezone) { + // Usually, floating is ok here, so no need to pass aTimezone - we just need to pass + // it in if we need to make sure formatting happens without a timezone conversion. + let formatter = aTimezone + ? new Services.intl.DateTimeFormat(undefined, { + dateStyle: "short", + timeZone: aTimezone.tzid, + }) + : dateFormatter; + return formatter.format(aDate); + } + + function formatTime(aValue) { + return timeFormatter.format(aValue); + } +} diff --git a/comm/calendar/base/content/widgets/mouseoverPreviews.js b/comm/calendar/base/content/widgets/mouseoverPreviews.js new file mode 100644 index 0000000000..38e5c1e24f --- /dev/null +++ b/comm/calendar/base/content/widgets/mouseoverPreviews.js @@ -0,0 +1,439 @@ +/* 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/. */ + +/** + * Code which generates event and task (todo) preview tooltips/titletips + * when the mouse hovers over either the event list, the task list, or + * an event or task box in one of the grid views. + * + * (Portions of this code were previously in calendar.js and unifinder.js, + * some of it duplicated.) + */ + +/* exported onMouseOverItem, showToolTip, getPreviewForItem, + getEventStatusString, getToDoStatusString */ + +/* import-globals-from ../calendar-ui-utils.js */ + +/** + * PUBLIC: This changes the mouseover preview based on the start and end dates + * of an occurrence of a (one-time or recurring) calEvent or calToDo. + * Used by all grid views. + */ + +var { cal } = ChromeUtils.import("resource:///modules/calendar/calUtils.jsm"); + +/** + * PUBLIC: Displays a tooltip with details when hovering over an item in the views + * + * @param {DOMEvent} occurrenceBoxMouseEvent the triggering event + * @returns {boolean} true, if the tooltip is displayed + */ +function onMouseOverItem(occurrenceBoxMouseEvent) { + if ("occurrence" in occurrenceBoxMouseEvent.currentTarget) { + // occurrence of repeating event or todo + let occurrence = occurrenceBoxMouseEvent.currentTarget.occurrence; + const toolTip = document.getElementById("itemTooltip"); + return showToolTip(toolTip, occurrence); + } + return false; +} + +/** + * PUBLIC: Displays a tooltip for a given item + * + * @param {Node} aTooltip the node to hold the tooltip + * @param {CalIEvent|calIToDo} aItem the item to create the tooltip for + * @returns {boolean} true, if the tooltip is displayed + */ +function showToolTip(aToolTip, aItem) { + if (aItem) { + let holderBox = getPreviewForItem(aItem); + if (holderBox) { + while (aToolTip.lastChild) { + aToolTip.lastChild.remove(); + } + aToolTip.appendChild(holderBox); + return true; + } + } + return false; +} + +/** + * PUBLIC: Called when a user hovers over a todo element and the text for the + * mouse over is changed. + * + * @param {calIToDo} toDoItem - the item to create the preview for + * @param {boolean} aIsTooltip enabled if used for tooltip composition (default) + */ +function getPreviewForItem(aItem, aIsTooltip = true) { + if (aItem.isEvent()) { + return getPreviewForEvent(aItem, aIsTooltip); + } else if (aItem.isTodo()) { + return getPreviewForTask(aItem, aIsTooltip); + } + return null; +} + +/** + * PUBLIC: Returns the string for status (none), Tentative, Confirmed, or + * Cancelled for a given event + * + * @param {calIEvent} aEvent The event + * @returns {string} The string for the status property of the event + */ +function getEventStatusString(aEvent) { + switch (aEvent.status) { + // Event status value keywords are specified in RFC2445sec4.8.1.11 + case "TENTATIVE": + return cal.l10n.getCalString("statusTentative"); + case "CONFIRMED": + return cal.l10n.getCalString("statusConfirmed"); + case "CANCELLED": + return cal.l10n.getCalString("eventStatusCancelled"); + default: + return ""; + } +} + +/** + * PUBLIC: Returns the string for status (none), NeedsAction, InProcess, + * Cancelled, orCompleted for a given ToDo + * + * @param {calIToDo} aToDo The ToDo + * @returns {string} The string for the status property of the event + */ +function getToDoStatusString(aToDo) { + switch (aToDo.status) { + // Todo status keywords are specified in RFC2445sec4.8.1.11 + case "NEEDS-ACTION": + return cal.l10n.getCalString("statusNeedsAction"); + case "IN-PROCESS": + return cal.l10n.getCalString("statusInProcess"); + case "CANCELLED": + return cal.l10n.getCalString("todoStatusCancelled"); + case "COMPLETED": + return cal.l10n.getCalString("statusCompleted"); + default: + return ""; + } +} + +/** + * PRIVATE: Called when a user hovers over a todo element and the text for the + * mouse overis changed. + * + * @param {calIToDo} toDoItem - the item to create the preview for + * @param {boolean} aIsTooltip enabled if used for tooltip composition (default) + */ +function getPreviewForTask(toDoItem, aIsTooltip = true) { + if (toDoItem) { + const vbox = document.createXULElement("vbox"); + vbox.setAttribute("class", "tooltipBox"); + if (aIsTooltip) { + // tooltip appears above or below pointer, so may have as little as + // one half the screen height available (avoid top going off screen). + vbox.style.maxHeight = Math.floor(screen.height / 2); + } else { + vbox.setAttribute("flex", "1"); + } + boxInitializeHeaderTable(vbox); + + let hasHeader = false; + + if (toDoItem.title) { + boxAppendLabeledText(vbox, "tooltipTitle", toDoItem.title); + hasHeader = true; + } + + let location = toDoItem.getProperty("LOCATION"); + if (location) { + boxAppendLabeledText(vbox, "tooltipLocation", location); + hasHeader = true; + } + + // First try to get calendar name appearing in tooltip + if (toDoItem.calendar.name) { + let calendarNameString = toDoItem.calendar.name; + boxAppendLabeledText(vbox, "tooltipCalName", calendarNameString); + } + + if (toDoItem.entryDate && toDoItem.entryDate.isValid) { + boxAppendLabeledDateTime(vbox, "tooltipStart", toDoItem.entryDate); + hasHeader = true; + } + + if (toDoItem.dueDate && toDoItem.dueDate.isValid) { + boxAppendLabeledDateTime(vbox, "tooltipDue", toDoItem.dueDate); + hasHeader = true; + } + + if (toDoItem.priority && toDoItem.priority != 0) { + let priorityInteger = parseInt(toDoItem.priority, 10); + let priorityString; + + // These cut-offs should match calendar-event-dialog.js + if (priorityInteger >= 1 && priorityInteger <= 4) { + priorityString = cal.l10n.getCalString("highPriority"); + } else if (priorityInteger == 5) { + priorityString = cal.l10n.getCalString("normalPriority"); + } else { + priorityString = cal.l10n.getCalString("lowPriority"); + } + boxAppendLabeledText(vbox, "tooltipPriority", priorityString); + hasHeader = true; + } + + if (toDoItem.status && toDoItem.status != "NONE") { + let status = getToDoStatusString(toDoItem); + boxAppendLabeledText(vbox, "tooltipStatus", status); + hasHeader = true; + } + + if ( + toDoItem.status != null && + toDoItem.percentComplete != 0 && + toDoItem.percentComplete != 100 + ) { + boxAppendLabeledText(vbox, "tooltipPercent", String(toDoItem.percentComplete) + "%"); + hasHeader = true; + } else if (toDoItem.percentComplete == 100) { + if (toDoItem.completedDate == null) { + boxAppendLabeledText(vbox, "tooltipPercent", "100%"); + } else { + boxAppendLabeledDateTime(vbox, "tooltipCompleted", toDoItem.completedDate); + } + hasHeader = true; + } + + let description = toDoItem.descriptionText; + if (description) { + // display wrapped description lines like body of message below headers + if (hasHeader) { + boxAppendBodySeparator(vbox); + } + boxAppendBody(vbox, description, aIsTooltip); + } + + return vbox; + } + return null; +} + +/** + * PRIVATE: Called when mouse moves over a different, or when mouse moves over + * event in event list. The instStartDate is date of instance displayed at event + * box (recurring or multiday events may be displayed by more than one event box + * for different days), or null if should compute next instance from now. + * + * @param {calIEvent} aEvent - the item to create the preview for + * @param {boolean} aIsTooltip enabled if used for tooltip composition (default) + */ +function getPreviewForEvent(aEvent, aIsTooltip = true) { + let event = aEvent; + const vbox = document.createXULElement("vbox"); + vbox.setAttribute("class", "tooltipBox"); + if (aIsTooltip) { + // tooltip appears above or below pointer, so may have as little as + // one half the screen height available (avoid top going off screen). + vbox.maxHeight = Math.floor(screen.height / 2); + } else { + vbox.setAttribute("flex", "1"); + } + boxInitializeHeaderTable(vbox); + + if (event) { + if (event.title) { + boxAppendLabeledText(vbox, "tooltipTitle", aEvent.title); + } + + let location = event.getProperty("LOCATION"); + if (location) { + boxAppendLabeledText(vbox, "tooltipLocation", location); + } + if (!(event.startDate && event.endDate)) { + // Event may be recurrent event. If no displayed instance specified, + // use next instance, or previous instance if no next instance. + event = getCurrentNextOrPreviousRecurrence(event); + } + boxAppendLabeledDateTimeInterval(vbox, "tooltipDate", event); + + // First try to get calendar name appearing in tooltip + if (event.calendar.name) { + let calendarNameString = event.calendar.name; + boxAppendLabeledText(vbox, "tooltipCalName", calendarNameString); + } + + if (event.status && event.status != "NONE") { + let statusString = getEventStatusString(event); + boxAppendLabeledText(vbox, "tooltipStatus", statusString); + } + + if (event.organizer && event.getAttendees().length > 0) { + let organizer = event.organizer; + boxAppendLabeledText(vbox, "tooltipOrganizer", organizer); + } + + let description = event.descriptionText; + if (description) { + boxAppendBodySeparator(vbox); + // display wrapped description lines, like body of message below headers + boxAppendBody(vbox, description, aIsTooltip); + } + return vbox; + } + return null; +} + +/** + * PRIVATE: Append a separator, a thin space between header and body. + * + * @param {Node} vbox box to which to append separator. + */ +function boxAppendBodySeparator(vbox) { + const separator = document.createXULElement("separator"); + separator.setAttribute("class", "tooltipBodySeparator"); + vbox.appendChild(separator); +} + +/** + * PRIVATE: Append description to box for body text. Rendered as HTML. + * Indentation and line breaks are preserved. + * + * @param {Node} box - Box to which to append the body. + * @param {string} textString - Text of the body. + * @param {boolean} aIsTooltip - True for "tooltip" and false for "conflict-dialog" case. + */ +function boxAppendBody(box, textString, aIsTooltip) { + let type = aIsTooltip ? "description" : "vbox"; + let xulDescription = document.createXULElement(type); + xulDescription.setAttribute("class", "tooltipBody"); + if (!aIsTooltip) { + xulDescription.setAttribute("flex", "1"); + } + let docFragment = cal.view.textToHtmlDocumentFragment(textString, document); + xulDescription.appendChild(docFragment); + box.appendChild(xulDescription); +} + +/** + * PRIVATE: Use dateFormatter to format date and time, + * and to header table append a row containing localized Label: date. + * + * @param {Node} box The node to add the date label to + * @param {string} labelProperty The label + * @param {calIDateTime} date - The datetime object to format and add + */ +function boxAppendLabeledDateTime(box, labelProperty, date) { + date = date.getInTimezone(cal.dtz.defaultTimezone); + let formattedDateTime = cal.dtz.formatter.formatDateTime(date); + boxAppendLabeledText(box, labelProperty, formattedDateTime); +} + +/** + * PRIVATE: Use dateFormatter to format date and time interval, + * and to header table append a row containing localized Label: interval. + * + * @param box contains header table. + * @param labelProperty name of property for localized field label. + * @param item the event or task + */ +function boxAppendLabeledDateTimeInterval(box, labelProperty, item) { + let dateString = cal.dtz.formatter.formatItemInterval(item); + boxAppendLabeledText(box, labelProperty, dateString); +} + +/** + * PRIVATE: create empty 2-column table for header fields, and append it to box. + * + * @param {Node} box The node to create a column table for + */ +function boxInitializeHeaderTable(box) { + let table = document.createElementNS("http://www.w3.org/1999/xhtml", "table"); + table.setAttribute("class", "tooltipHeaderTable"); + box.appendChild(table); +} + +/** + * PRIVATE: To headers table, append a row containing Label: value, where label + * is localized text for labelProperty. + * + * @param box box containing headers table + * @param labelProperty name of property for localized name of header + * @param textString value of header field. + */ +function boxAppendLabeledText(box, labelProperty, textString) { + let labelText = cal.l10n.getCalString(labelProperty); + let table = box.querySelector("table"); + let row = document.createElementNS("http://www.w3.org/1999/xhtml", "tr"); + + row.appendChild(createTooltipHeaderLabel(labelText)); + row.appendChild(createTooltipHeaderDescription(textString)); + + table.appendChild(row); +} + +/** + * PRIVATE: Creates an element for field label (for header table) + * + * @param {string} text The text to display in the node + * @returns {Node} The node + */ +function createTooltipHeaderLabel(text) { + let labelCell = document.createElementNS("http://www.w3.org/1999/xhtml", "th"); + labelCell.setAttribute("class", "tooltipHeaderLabel"); + labelCell.textContent = text; + return labelCell; +} + +/** + * PRIVATE: Creates an element for field value (for header table) + * + * @param {string} text The text to display in the node + * @returns {Node} The node + */ +function createTooltipHeaderDescription(text) { + let descriptionCell = document.createElementNS("http://www.w3.org/1999/xhtml", "td"); + descriptionCell.setAttribute("class", "tooltipHeaderDescription"); + descriptionCell.textContent = text; + return descriptionCell; +} + +/** + * PRIVATE: If now is during an occurrence, return the occurrence. If now is + * before an occurrence, return the next occurrence or otherwise the previous + * occurrence. + * + * @param {calIEvent} calendarEvent The text to display in the node + * @returns {mixed} Returns a calIDateTime for the detected + * occurrence or calIEvent, if this is a + * non-recurring event + */ +function getCurrentNextOrPreviousRecurrence(calendarEvent) { + if (!calendarEvent.recurrenceInfo) { + return calendarEvent; + } + + let dur = calendarEvent.duration.clone(); + dur.isNegative = true; + + // To find current event when now is during event, look for occurrence + // starting duration ago. + let probeTime = cal.dtz.now(); + probeTime.addDuration(dur); + + let occ = calendarEvent.recurrenceInfo.getNextOccurrence(probeTime); + + if (!occ) { + let occs = calendarEvent.recurrenceInfo.getOccurrences( + calendarEvent.startDate, + probeTime, + 0, + {} + ); + occ = occs[occs.length - 1]; + } + return occ; +} |