summaryrefslogtreecommitdiffstats
path: root/browser/components/firefoxview/card-container.mjs
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 19:33:14 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 19:33:14 +0000
commit36d22d82aa202bb199967e9512281e9a53db42c9 (patch)
tree105e8c98ddea1c1e4784a60a5a6410fa416be2de /browser/components/firefoxview/card-container.mjs
parentInitial commit. (diff)
downloadfirefox-esr-upstream.tar.xz
firefox-esr-upstream.zip
Adding upstream version 115.7.0esr.upstream/115.7.0esrupstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'browser/components/firefoxview/card-container.mjs')
-rw-r--r--browser/components/firefoxview/card-container.mjs93
1 files changed, 93 insertions, 0 deletions
diff --git a/browser/components/firefoxview/card-container.mjs b/browser/components/firefoxview/card-container.mjs
new file mode 100644
index 0000000000..6d2fa0c600
--- /dev/null
+++ b/browser/components/firefoxview/card-container.mjs
@@ -0,0 +1,93 @@
+/* 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 { html, ifDefined } from "chrome://global/content/vendor/lit.all.mjs";
+import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
+
+/**
+ * A collapsible card container to be used throughout Firefox View
+ *
+ * @property {string} sectionLabel - The aria-label used for the section landmark if the header is hidden with hideHeader
+ * @property {boolean} hideHeader - Optional property given if the card container should not display a header
+ * @property {boolean} preserveCollapseState - Whether or not the expanded/collapsed state should persist
+ * @property {string} viewAllPage - The location hash for the 'View all' header link to navigate to
+ */
+class CardContainer extends MozLitElement {
+ constructor() {
+ super();
+ this.isExpanded = true;
+ }
+
+ static properties = {
+ sectionLabel: { type: String },
+ hideHeader: { type: Boolean },
+ preserveCollapseState: { type: Boolean },
+ viewAllPage: { type: String },
+ };
+
+ static queries = {
+ detailsEl: "details",
+ summaryEl: "summary",
+ viewAllLink: ".view-all-link",
+ };
+
+ get detailsExpanded() {
+ return this.detailsEl.hasAttribute("open");
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+ if (this.preserveCollapseState && this.viewAllPage) {
+ this.openStatePref = `browser.tabs.firefox-view.ui-state.${this.viewAllPage}.open`;
+ this.isExpanded = Services.prefs.getBoolPref(this.openStatePref, true);
+ }
+ }
+
+ disconnectedCallback() {}
+
+ onToggleContainer() {
+ this.isExpanded = this.detailsExpanded;
+ if (this.preserveCollapseState && this.viewAllPage) {
+ Services.prefs.setBoolPref(this.openStatePref, this.isExpanded);
+ }
+ }
+
+ render() {
+ return html`
+ <link
+ rel="stylesheet"
+ href="chrome://browser/content/firefoxview/card-container.css"
+ />
+ <section
+ aria-labelledby="header"
+ aria-label=${ifDefined(this.sectionLabel)}
+ >
+ <details
+ class="card-container"
+ ?open=${this.isExpanded}
+ @toggle=${this.onToggleContainer}
+ >
+ <summary
+ id="header"
+ class="card-container-header"
+ ?hidden=${ifDefined(this.hideHeader)}
+ ?withViewAll=${ifDefined(this.viewAllPage)}
+ >
+ <span class="icon chevron-icon" aria-role="presentation"></span>
+ <slot name="header"></slot>
+ </summary>
+ <a
+ href="about:firefoxview-next#${this.viewAllPage}"
+ class="view-all-link"
+ data-l10n-id="firefoxview-view-all-link"
+ ?hidden=${!this.viewAllPage}
+ ></a>
+ <slot name="main"></slot>
+ <slot name="footer" class="card-container-footer"></slot>
+ </details>
+ </section>
+ `;
+ }
+}
+customElements.define("card-container", CardContainer);