108 lines
3.3 KiB
JavaScript
108 lines
3.3 KiB
JavaScript
/**
|
|
* 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 } from "chrome://global/content/vendor/lit.all.mjs";
|
|
import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
|
|
|
|
window.MozXULElement.insertFTLIfNeeded("preview/linkPreview.ftl");
|
|
|
|
/**
|
|
* Class representing a link preview onboarding card element.
|
|
* This component is shown when onboarding state is true.
|
|
*
|
|
* @augments MozLitElement
|
|
*/
|
|
class LinkPreviewCardOnboarding extends MozLitElement {
|
|
static get properties() {
|
|
return {
|
|
onboardingType: { type: String },
|
|
};
|
|
}
|
|
|
|
constructor() {
|
|
super();
|
|
this.onboardingType = "shiftKey";
|
|
}
|
|
|
|
/**
|
|
* Handles click on the "Try it now" button.
|
|
*
|
|
* @param {MouseEvent} _event - The click event.
|
|
*/
|
|
handleTryLinkPreview(_event) {
|
|
this.dispatchEvent(new CustomEvent("LinkPreviewCard:onboardingComplete"));
|
|
}
|
|
|
|
/**
|
|
* Handles click on the "Close" button.
|
|
*
|
|
* @param {MouseEvent} _event - The click event.
|
|
*/
|
|
handleCloseOnboarding(_event) {
|
|
this.dispatchEvent(new CustomEvent("LinkPreviewCard:onboardingClose"));
|
|
}
|
|
|
|
/**
|
|
* Renders the link preview onboarding element.
|
|
*
|
|
* @returns {import('lit').TemplateResult} The rendered HTML template.
|
|
*/
|
|
render() {
|
|
const titleL10nId =
|
|
this.onboardingType === "longPress"
|
|
? "link-preview-onboarding-title-long-press"
|
|
: "link-preview-onboarding-title-shift";
|
|
const descriptionL10nId =
|
|
this.onboardingType === "longPress"
|
|
? "link-preview-onboarding-description-long-press"
|
|
: "link-preview-onboarding-description-shift";
|
|
|
|
const imageSrc =
|
|
this.onboardingType === "longPress"
|
|
? "chrome://browser/content/genai/assets/onboarding-link-preview-image-longpress.svg"
|
|
: "chrome://browser/content/genai/assets/onboarding-link-preview-image-shift.svg";
|
|
|
|
return html`
|
|
<link
|
|
rel="stylesheet"
|
|
href="chrome://browser/content/genai/content/link-preview-card.css"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="chrome://browser/content/genai/content/link-preview-card-onboarding.css"
|
|
/>
|
|
<div class="og-card onboarding">
|
|
<div class="og-card-content">
|
|
<img class="og-card-img" src=${imageSrc} alt="" />
|
|
<h2 class="og-card-title" data-l10n-id=${titleL10nId}></h2>
|
|
<p class="og-card-description" data-l10n-id=${descriptionL10nId}></p>
|
|
<div class="reading-time-settings-container">
|
|
<moz-button-group class="onboarding-button-group">
|
|
<moz-button
|
|
size="default"
|
|
id="onboarding-close-button"
|
|
@click=${this.handleCloseOnboarding}
|
|
data-l10n-id="link-preview-onboarding-close"
|
|
>
|
|
</moz-button>
|
|
<moz-button
|
|
type="primary"
|
|
@click=${this.handleTryLinkPreview}
|
|
data-l10n-id="link-preview-onboarding-button"
|
|
>
|
|
</moz-button>
|
|
</moz-button-group>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
customElements.define(
|
|
"link-preview-card-onboarding",
|
|
LinkPreviewCardOnboarding
|
|
);
|