Revision control
Copy as Markdown
Other Tools
/* 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 "./calendar-dialog-row.mjs"; // eslint-disable-line import/no-unassigned-import
import "./calendar-dialog-attendee.mjs"; // eslint-disable-line import/no-unassigned-import
/**
* Template ID: #calendarAttendeesRowTemplate
*
* @tagname calendar-dialog-attendees-row
* @attribute {string} [type] - If type is full, attendees is expanded with
* a browser, otherwise it is truncated.
*/
class CalendarDialogAttendeesRow extends HTMLElement {
/**
* The attendee summary element
*
* @type {HTMLElement}
*/
#summary = null;
/**
* The attendee list element
*
* @type {HTMLElement}
*/
#list = null;
/**
* If the attendees view is a full subview or in the flow
*
* @type {boolean}
*/
#isFullAttendees = null;
connectedCallback() {
if (this.hasConnected) {
return;
}
this.hasConnected = true;
const template = document
.getElementById("calendarDialogAttendeesRowTemplate")
.content.cloneNode(true);
const style = document.createElement("link");
style.rel = "stylesheet";
style.href = "chrome://messenger/skin/calendar/calendarDialogAttendees.css";
this.append(style, template);
const row = this.querySelector("calendar-dialog-row");
this.#isFullAttendees = this.getAttribute("type") === "full";
row
.querySelector('[slot="content"]')
.classList.toggle("truncated-content", !this.#isFullAttendees);
row.toggleAttribute("expanded", this.#isFullAttendees);
row.toggleAttribute("expanding", !this.#isFullAttendees);
this.#summary = this.querySelector(".attendees-summary");
this.#list = this.querySelector(".attendees-list");
}
/**
* Set the attendee information from an array of attendee objects.
*
* @param {calIAttendee[]} attendees - An array of event attendees.
*/
setAttendees(attendees) {
this.#list.innerHTML = "";
document.l10n.setAttributes(
this.querySelector("#attendeesCount"),
"calendar-dialog-attendee-count",
{ count: attendees.length }
);
if (!this.#isFullAttendees) {
this.dispatchEvent(
new CustomEvent("toggleRowVisibility", {
bubbles: true,
detail: {
isHidden: attendees.length === 0,
},
})
);
}
if (this.#isFullAttendees && attendees.length > 50) {
this.#list.hidden = true;
this.#summary.hidden = false;
document.l10n.setAttributes(
this.#summary,
"calendar-dialog-attendees-too-many-guests"
);
return;
}
if (!this.#isFullAttendees) {
this.querySelector("calendar-dialog-row").toggleAttribute(
"expanding",
attendees.length > 3
);
}
const showSummary = attendees.length > 3 && !this.#isFullAttendees;
this.#list.hidden = showSummary;
this.#summary.hidden = !showSummary;
if (showSummary) {
const counts = Object.groupBy(
attendees,
attendee => attendee.participationStatus
);
document.l10n.setAttributes(
this.#summary,
"calendar-dialog-attendee-summary",
{
going: counts.ACCEPTED?.length || 0,
maybe: counts.TENTATIVE?.length || 0,
declined: counts.DECLINED?.length || 0,
pending: counts["NEEDS-ACTION"]?.length || 0,
}
);
} else {
this.#list.replaceChildren(
...attendees.map(attendee => {
const attendeeElement = document.createElement("li", {
is: "calendar-dialog-attendee",
});
attendeeElement.setAttendee(attendee);
return attendeeElement;
})
);
}
}
}
customElements.define(
"calendar-dialog-attendees-row",
CalendarDialogAttendeesRow
);