tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

link-preview-card-onboarding.mjs (2999B)

      1 /**
      2 * This Source Code Form is subject to the terms of the Mozilla Public
      3 * License, v. 2.0. If a copy of the MPL was not distributed with this
      4 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
      5 */
      6 
      7 import { html } from "chrome://global/content/vendor/lit.all.mjs";
      8 import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
      9 
     10 window.MozXULElement.insertFTLIfNeeded("browser/genai.ftl");
     11 
     12 /**
     13 * Class representing a link preview onboarding card element.
     14 * This component is shown when onboarding state is true.
     15 *
     16 * @augments MozLitElement
     17 */
     18 class LinkPreviewCardOnboarding extends MozLitElement {
     19  static get properties() {
     20    return {
     21      onboardingType: { type: String },
     22    };
     23  }
     24 
     25  constructor() {
     26    super();
     27    this.onboardingType = "longPress";
     28  }
     29 
     30  /**
     31   * Handles click on the "Try it now" button.
     32   *
     33   * @param {MouseEvent} _event - The click event.
     34   */
     35  handleTryLinkPreview(_event) {
     36    this.dispatchEvent(new CustomEvent("LinkPreviewCard:onboardingComplete"));
     37  }
     38 
     39  /**
     40   * Handles click on the "Close" button.
     41   *
     42   * @param {MouseEvent} _event - The click event.
     43   */
     44  handleCloseOnboarding(_event) {
     45    this.dispatchEvent(new CustomEvent("LinkPreviewCard:onboardingClose"));
     46  }
     47 
     48  /**
     49   * Renders the link preview onboarding element.
     50   *
     51   * @returns {import('lit').TemplateResult} The rendered HTML template.
     52   */
     53  render() {
     54    const titleL10nId = "link-preview-onboarding-title-long-press";
     55    const descriptionL10nId = "link-preview-onboarding-description-long-press";
     56 
     57    const imageSrc =
     58      "chrome://browser/content/genai/assets/onboarding-link-preview-image-longpress.svg";
     59 
     60    return html`
     61      <link
     62        rel="stylesheet"
     63        href="chrome://browser/content/genai/content/link-preview-card.css"
     64      />
     65      <link
     66        rel="stylesheet"
     67        href="chrome://browser/content/genai/content/link-preview-card-onboarding.css"
     68      />
     69      <div class="og-card onboarding">
     70        <div class="og-card-content">
     71          <img class="og-card-img" src=${imageSrc} alt="" />
     72          <h2 class="og-card-title" data-l10n-id=${titleL10nId}></h2>
     73          <p class="og-card-description" data-l10n-id=${descriptionL10nId}></p>
     74          <div class="reading-time-settings-container">
     75            <moz-button-group class="onboarding-button-group">
     76              <moz-button
     77                size="default"
     78                id="onboarding-close-button"
     79                @click=${this.handleCloseOnboarding}
     80                data-l10n-id="link-preview-onboarding-close"
     81              >
     82              </moz-button>
     83              <moz-button
     84                type="primary"
     85                @click=${this.handleTryLinkPreview}
     86                data-l10n-id="link-preview-onboarding-button"
     87              >
     88              </moz-button>
     89            </moz-button-group>
     90          </div>
     91        </div>
     92      </div>
     93    `;
     94  }
     95 }
     96 
     97 customElements.define(
     98  "link-preview-card-onboarding",
     99  LinkPreviewCardOnboarding
    100 );