diff --git a/README.md b/README.md index 6a31319..90d2b39 100644 --- a/README.md +++ b/README.md @@ -43,9 +43,10 @@ Visit the [interactive playground](https://playcode.io/capture_eye_demo) for the | `nid` | Yes | The unique [Nid](https://docs.numbersprotocol.io/introduction/numbers-protocol/defining-web3-assets/numbers-id-nid) of the asset.
`` | | `layout` | No | Decides which layout to display. Default value is `original`. Additional option includes `curated`.
`` | | `visibility` | No | Visibility behavior. Default value is `hover`, showing Eye on mouse hover. Setting it to option `always` will make the Eye always shown. This attribute is `always` and cannot be customized on mobile devices.
`` | +| `color` | No | The widget color. Default value is #377dde (blue), and for mobile, the default value is #333333 (gray).
`` | | `cz-title` | No | Override the copyright zone title.
`` | -| eng-img | No | Sets the image for the engagement zone banner. Recommended dimensions: `320x120 px`. Supports multiple `eng-img` and `eng-link` pairs for rotating banners. If multiple pairs are provided by using comma to seperate each URL entry, the banner will rotate every 5 seconds. Ensure that the number of `eng-img` matches the number of `eng-link` entries. Use URL encoding to replace commas with `%2C` in the URLs.
`` | -| eng-link | No | Sets the URL for the engagement zone banner link. Each `eng-link` should correspond to an `eng-img` for proper pairing in rotating banners, following the same comma-separated rule.
`` | +| `eng-img` | No | Sets the image for the engagement zone banner. Recommended dimensions: `320x120 px`. Supports multiple `eng-img` and `eng-link` pairs for rotating banners. If multiple pairs are provided by using comma to seperate each URL entry, the banner will rotate every 5 seconds. Ensure that the number of `eng-img` matches the number of `eng-link` entries. Use URL encoding to replace commas with `%2C` in the URLs.
`` | +| `eng-link` | No | Sets the URL for the engagement zone banner link. Each `eng-link` should correspond to an `eng-img` for proper pairing in rotating banners, following the same comma-separated rule.
`` | | `action-button-text` | No | Override the default action button text (`View More`).
`` | | `action-button-link` | No | Override the default action button link to Capture website.
`` | diff --git a/assets/icons/capture-eye-close-gray.svg b/assets/icons/capture-eye-close-gray.svg deleted file mode 100644 index f8ee84b..0000000 --- a/assets/icons/capture-eye-close-gray.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/assets/icons/capture-eye-close-icon.png b/assets/icons/capture-eye-close-icon.png deleted file mode 100644 index e86afd2..0000000 Binary files a/assets/icons/capture-eye-close-icon.png and /dev/null differ diff --git a/assets/icons/capture-eye-gray.svg b/assets/icons/capture-eye-gray.svg deleted file mode 100644 index c16a328..0000000 --- a/assets/icons/capture-eye-gray.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - - - - - - - - - diff --git a/dev/index.html b/dev/index.html index 2cfd169..ef8a983 100644 --- a/dev/index.html +++ b/dev/index.html @@ -60,6 +60,7 @@
\ No newline at end of file +> diff --git a/src/capture-eye.ts b/src/capture-eye.ts index 10882de..def3ecf 100644 --- a/src/capture-eye.ts +++ b/src/capture-eye.ts @@ -1,4 +1,4 @@ -import { LitElement, html } from 'lit'; +import { LitElement, HTMLTemplateResult, html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import { Constant } from './constant.js'; import { getCaptureEyeStyles } from './capture-eye-styles.js'; @@ -32,6 +32,12 @@ export class CaptureEye extends LitElement { @property({ type: String }) visibility = Constant.visibility.hover; + /** + * Set color: default is #377dde, and for mobile, the default is #333333. + */ + @property({ type: String }) + color = ''; + /** * Customizable copyright zone title. */ @@ -91,25 +97,28 @@ export class CaptureEye extends LitElement { } private buttonTemplate() { + if (!this.nid) { + return html``; + } + const mobile = isMobile(); - return this.nid - ? html` -
- Capture Eye -
- ` - : null; + const color = this.color + ? this.color + : mobile + ? Constant.color.mobileEye + : Constant.color.defaultEye; + const size = mobile ? 24 : 32; + return html` +
+ ${this.generateCaptureEyeSvg(color, size)} +
+ `; } override render() { @@ -140,6 +149,7 @@ export class CaptureEye extends LitElement { const modalOptions = { nid: this.nid, layout: this.layout, + color: this.color, copyrightZoneTitle: this.copyrightZoneTitle, engagementZones: this.engagementZones, actionButtonText: this.actionButtonText, @@ -161,6 +171,90 @@ export class CaptureEye extends LitElement { } } + private generateCaptureEyeSvg( + color: string, size: number + ): HTMLTemplateResult { + return html` + + + + + + + + + + + + + + + + + `; + } + private getButtonElement(): HTMLElement { return this.shadowRoot?.querySelector('.capture-eye-button') as HTMLElement; } diff --git a/src/constant.ts b/src/constant.ts index 0a418f1..2786de4 100644 --- a/src/constant.ts +++ b/src/constant.ts @@ -8,10 +8,6 @@ interface Url { profile: string; showcase: string; collect: string; - captureEyeIcon: string; - captureEyeMobileIcon: string; - closeIcon: string; - mobileCloseIcon: string; fontFaceCssUrl: string; blockchainIcon: string; txIcon: string; @@ -32,17 +28,24 @@ interface ConstantType { text: Text; layout: Layout; visibility: Visibility; + color: Color; } interface Layout { original: string; curated: string; } + interface Visibility { hover: string; always: string; } +interface Color { + defaultEye: string; + mobileEye: string; +} + const numbersCdnUrl = 'https://static-cdn.numbersprotocol.io'; export const Constant: ConstantType = { @@ -56,10 +59,6 @@ export const Constant: ConstantType = { profile: 'https://asset.captureapp.xyz', showcase: 'https://dashboard.captureapp.xyz/showcase', collect: 'https://captureappiframe.numbersprotocol.io/checkout', - captureEyeIcon: `${numbersCdnUrl}/capture-eye-blue-32x32.png`, - captureEyeMobileIcon: `${numbersCdnUrl}/capture-eye/capture-eye-gray.svg`, - closeIcon: `${numbersCdnUrl}/capture-eye/capture-eye-close-icon.png`, - mobileCloseIcon: `${numbersCdnUrl}/capture-eye/capture-eye-close-gray.svg`, fontFaceCssUrl: `${numbersCdnUrl}/fonts/degular.css`, blockchainIcon: `${numbersCdnUrl}/capture-eye/capture-eye-blockchain-icon.svg`, txIcon: `${numbersCdnUrl}/capture-eye/capture-eye-tx-icon.svg`, @@ -81,4 +80,8 @@ export const Constant: ConstantType = { hover: 'hover', always: 'always', }, + color: { + defaultEye: '#377dde', + mobileEye: '#333333', + } }; diff --git a/src/modal/modal.ts b/src/modal/modal.ts index 9310811..0ca66f3 100644 --- a/src/modal/modal.ts +++ b/src/modal/modal.ts @@ -1,4 +1,4 @@ -import { LitElement, html } from 'lit'; +import { LitElement, HTMLTemplateResult, html } from 'lit'; import { customElement, property, state, query } from 'lit/decorators.js'; import { getModalStyles } from './modal-styles.js'; import { Constant } from '../constant.js'; @@ -15,6 +15,28 @@ export function formatTxHash(txHash: string): string { return `${firstPart}...${lastPart}`; } +export function generateCaptureEyeCloseSvg( + color: string, size: number +): HTMLTemplateResult { + return html` + + + + + `; +} + export interface EngagementZone { image: string; link: string; @@ -23,6 +45,7 @@ export interface EngagementZone { export interface ModalOptions { nid: string; layout?: string; + color?: string; copyrightZoneTitle?: string; engagementZones?: EngagementZone[]; actionButtonText?: string; @@ -38,6 +61,7 @@ export class CaptureEyeModal extends LitElement { @property({ type: String }) layout = Constant.layout.original; @property({ type: Boolean }) modalHidden = true; + @state() protected _color = ''; @state() protected _copyrightZoneTitle = ''; @state() protected _engagementZones: EngagementZone[] = []; @state() protected _engagementZoneIndex = 0; @@ -79,6 +103,7 @@ export class CaptureEyeModal extends LitElement { updateModalOptions(options: ModalOptions) { if (options.nid) this.nid = options.nid; if (options.layout) this.layout = options.layout; + if (options.color) this._color = options.color; if (options.copyrightZoneTitle) this._copyrightZoneTitle = options.copyrightZoneTitle; if ( @@ -107,6 +132,7 @@ export class CaptureEyeModal extends LitElement { this.stopEngagementZoneRotation(); this.nid = ''; this.layout = Constant.layout.original; + this._color = ''; this._copyrightZoneTitle = ''; this._engagementZones = []; this._engagementZoneIndex = 0; @@ -445,6 +471,13 @@ export class CaptureEyeModal extends LitElement { } override render() { + const mobile = isMobile() + const color = this._color + ? this._color + : mobile + ? Constant.color.mobileEye + : Constant.color.defaultEye; + const size = mobile ? 24 : 32; return html`
${this.renderEngagementZone()}
- Close + ${generateCaptureEyeCloseSvg(color, size)}
diff --git a/src/test/modal_test.ts b/src/test/modal_test.ts index 74188d3..9eeb75a 100644 --- a/src/test/modal_test.ts +++ b/src/test/modal_test.ts @@ -1,6 +1,6 @@ import { html } from 'lit'; import { fixture, assert, expect } from '@open-wc/testing'; -import { CaptureEyeModal, formatTxHash } from '../modal/modal'; +import { CaptureEyeModal, formatTxHash, generateCaptureEyeCloseSvg } from '../modal/modal'; import { AssetModel } from '../asset/asset-model'; import interactionTracker, { TrackerEvent } from '../modal/interaction-tracker'; import sinon from 'sinon'; @@ -75,7 +75,7 @@ suite('capture-eye-modal', () => {
- Close + ${generateCaptureEyeCloseSvg(Constant.color.defaultEye, 32).strings.join()}