feat(src): customize the position of the Eye

Allow the user to customize the position of the Eye. The popup will transform to the media center, and if the popup is at risk of overriding the page edge, it will adjust and transform in the reverse direction.
numbersprotocol · Nov 8, 2024 · c3d22f2 · c3d22f2
1 parent 2f714eb
commit c3d22f2
Show file tree

Hide file tree

Showing 9 changed files with 183 additions and 49 deletions.
diff --git a/README.md b/README.md
@@ -43,7 +43,8 @@ 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. <br> `<capture-eye nid="bafybeief3yriouin54tzub5otnzka6muacrsu32tl2vxnaexgffizdxxqy"></capture-eye>` |
 | `layout` | No | Decides which layout to display. Default value is `original`. Additional option includes `curated`. <br> `<capture-eye nid="..." layout="curated"></capture-eye>` |
 | `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. <br> `<capture-eye nid="..." visibility="always"></capture-eye>` |
-| `color` | No | The widget color. Default value is #377dde (blue), and for mobile, the default value is #333333 (gray). <br> `<capture-eye nid="..." color="#c04240"></capture-eye>` |
+| `position` | No | The widget position. Default value is `top left`. Additional option includes `top right`, `bottom left`, and `bottom right`. <br> `<capture-eye nid="..." position="bottom right"></capture-eye>` |
+| `color` | No | The widget color. Default value is `#377dde` (blue), and for mobile, the default value is `#333333` (gray). <br> `<capture-eye nid="..." color="#c04240"></capture-eye>` |
 | `cz-title` | No | Override the copyright zone title. <br> `<capture-eye nid="..." cz-title="collected by"></capture-eye>` |
 | `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. <br> `<capture-eye nid="..." eng-img="https://my.image.url/image1.png, https://my.image.url/image2.png"></capture-eye>` |
 | `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.  <br> `<capture-eye nid="..." eng-link="https://my.website.url1, https://my.website.url2"></capture-eye>` |

diff --git a/dev/index.html b/dev/index.html
@@ -66,6 +66,7 @@
         eng-link="https://captureapp.xyz, https://defiance.media/"
         action-button-text="View docs"
         action-button-link="https://docs.captureapp.xyz"
+        position="bottom right"
       >
         <media-viewer
           src="https://ipfs-pin.numbersprotocol.io/ipfs/bafybeifksqe7orsgtfnly5j3okltqi3iyt3k2pptnlfyre62jpfzxftsju"
@@ -84,6 +85,7 @@
 
       <capture-eye
         nid="bafybeiclalewdmcdj2lwj2wtsxyacncg2vbpoorllsgkvpc3ercocqea6i"
+        position="top left"
       >
         <media-viewer
           src="https://ipfs-pin.numbersprotocol.io/ipfs/bafybeiclalewdmcdj2lwj2wtsxyacncg2vbpoorllsgkvpc3ercocqea6i"
@@ -92,6 +94,7 @@
 
       <capture-eye
         nid="bafybeidmy3oncdegri3cugy3zstnqderjokmj5f3wfqrbrswhcf47eyxau"
+        position="top right"
       >
         <img
           src="https://ipfs-pin.numbersprotocol.io/ipfs/bafybeidmy3oncdegri3cugy3zstnqderjokmj5f3wfqrbrswhcf47eyxau"
@@ -100,6 +103,7 @@
 
       <capture-eye
         nid="bafybeieq4kw5rmkwhvwgrb5psr5h4mdbnxtmqf6wxiun7jqjxsoj43zevm"
+        position="bottom left"
       >
         <img
           src="https://ipfs-pin.numbersprotocol.io/ipfs/bafybeieq4kw5rmkwhvwgrb5psr5h4mdbnxtmqf6wxiun7jqjxsoj43zevm"
@@ -108,6 +112,7 @@
 
       <capture-eye
         nid="bafybeicnparo54ctkk5tbqaz2ykteuzp4gy4aof76pjv72x5bl35qiftim"
+        position="bottom right"
       >
         <img
           src="https://ipfs-pin.numbersprotocol.io/ipfs/bafybeicnparo54ctkk5tbqaz2ykteuzp4gy4aof76pjv72x5bl35qiftim"

diff --git a/src/capture-eye-styles.ts b/src/capture-eye-styles.ts
@@ -5,22 +5,21 @@ export function getCaptureEyeStyles() {
     :host {
       display: block;
       font-family: 'Degular-Medium', Helvetica;
-      --capture-eye-container-flex: 0 1 auto;
-      --capture-eye-container-display: flex;
+      --capture-eye-container-display: inline-block;
+    }
+
+    ::slotted(*) {
+      display: block;
     }
 
     .capture-eye-container {
       position: relative;
       display: var(--capture-eye-container-display);
-      flex: var(--capture-eye-container-flex);
+      vertical-align: bottom;
     }
 
     .capture-eye-button {
       position: absolute;
-      top: 0;
-      left: 0;
-      margin-top: 5px;
-      margin-left: 5px;
       justify-content: center;
       align-items: center;
       z-index: 100;
@@ -31,6 +30,22 @@ export function getCaptureEyeStyles() {
       opacity: 0.4;
       display: none; /* Hidden by default */
     }
+    .capture-eye-button.position-top {
+      top: 0;
+      margin-top: 5px;
+    }
+    .capture-eye-button.position-bottom {
+      bottom: 0;
+      margin-bottom: 5px;
+    }
+    .capture-eye-button.position-left {
+      left: 0;
+      margin-left: 5px;
+    }
+    .capture-eye-button.position-right {
+      right: 0;
+      margin-right: 5px;
+    }
     .capture-eye-button:hover {
       opacity: 1;
     }
@@ -53,9 +68,7 @@ export function getCaptureEyeStyles() {
         text-overflow: ellipsis;
         content: 'Click me!';
         position: absolute;
-        left: 220%;
         /* Adjust as needed */
-        transform: translateX(-50%);
         padding: 5px 10px;
         background-color: #fff;
         /* Background color of the popup */
@@ -70,6 +83,14 @@ export function getCaptureEyeStyles() {
         /* Ensure it doesn't interfere with other interactions */
         font-family: 'Degular-Medium', Helvetica;
       }
+      .capture-eye-button.position-left:hover::before {
+        left: 220%;
+        transform: translateX(-50%);
+      }
+      .capture-eye-button.position-right:hover::before {
+        right: 220%;
+        transform: translateX(50%);
+      }
     }
 
     .capture-eye-no-scroll {

diff --git a/src/capture-eye.ts b/src/capture-eye.ts
@@ -32,6 +32,12 @@ export class CaptureEye extends LitElement {
   @property({ type: String })
   visibility = Constant.visibility.hover;
 
+  /**
+   * Set position. Default is top left. Options: top left, top right, bottom left, bottom right
+   */
+  @property({ type: String })
+  position = '';
+
   /**
    * Set color: default is #377dde, and for mobile, the default is #333333.
    */
@@ -105,15 +111,19 @@ export class CaptureEye extends LitElement {
     const color = this.color
       ? this.color
       : mobile
-        ? Constant.color.mobileEye
-        : Constant.color.defaultEye;
+      ? Constant.color.mobileEye
+      : Constant.color.defaultEye;
     const size = mobile ? 24 : 32;
+    const positions = this.position.split(' ');
     return html`
       <div
         class="capture-eye-button ${this.visibility ===
           Constant.visibility.always || mobile
           ? 'full-visibility'
-          : ''}"
+          : ''}
+          ${positions.includes('bottom') ? 'position-bottom' : 'position-top'}
+          ${positions.includes('right') ? 'position-right' : 'position-left'}
+          "
         @click=${this.openEye}
       >
         ${this.generateCaptureEyeSvg(color, size)}
@@ -157,6 +167,7 @@ export class CaptureEye extends LitElement {
       position: {
         top: buttonRect.top + window.scrollY,
         left: buttonRect.left + window.scrollX,
+        name: this.position,
       },
     };
     modalManager.updateModal(modalOptions);
@@ -172,12 +183,17 @@ export class CaptureEye extends LitElement {
   }
 
   private generateCaptureEyeSvg(
-    color: string, size: number
+    color: string,
+    size: number
   ): HTMLTemplateResult {
     return html`
       <svg
-        style="--eye-color: ${color};" width="${size}" height="${size}"
-        viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
+        style="--eye-color: ${color};"
+        width="${size}"
+        height="${size}"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
       >
         <g clip-path="url(#clip0_640_264)">
           <path
@@ -248,7 +264,7 @@ export class CaptureEye extends LitElement {
         </g>
         <defs>
           <clipPath id="clip0_640_264">
-            <rect width="24" height="24" fill="white"/>
+            <rect width="24" height="24" fill="white" />
           </clipPath>
         </defs>
       </svg>

diff --git a/src/constant.ts b/src/constant.ts
@@ -29,6 +29,7 @@ interface ConstantType {
   layout: Layout;
   visibility: Visibility;
   color: Color;
+  position: Position;
 }
 
 interface Layout {
@@ -46,6 +47,13 @@ interface Color {
   mobileEye: string;
 }
 
+interface Position {
+  topLeft: string;
+  topRight: string;
+  bottomLeft: string;
+  bottomRight: string;
+}
+
 const numbersCdnUrl = 'https://static-cdn.numbersprotocol.io';
 
 export const Constant: ConstantType = {
@@ -83,5 +91,11 @@ export const Constant: ConstantType = {
   color: {
     defaultEye: '#377dde',
     mobileEye: '#333333',
-  }
+  },
+  position: {
+    topLeft: 'top left',
+    topRight: 'top right',
+    bottomLeft: 'bottom left',
+    bottomRight: 'bottom right',
+  },
 };
diff --git a/src/media-viewer/media-viewer-styles.ts b/src/media-viewer/media-viewer-styles.ts
@@ -9,6 +9,7 @@ export function getMediaViewerStyles() {
     video {
       width: var(--media-viewer-width, 100%);
       height: var(--media-viewer-height, auto);
+      vertical-align: bottom;
     }
     .unsupported {
       color: red;

diff --git a/src/modal/modal-styles.ts b/src/modal/modal-styles.ts
@@ -32,7 +32,6 @@ export function getModalStyles() {
       align-items: flex-start;
       opacity: 0;
       transform: scale(0.5);
-      transform-origin: top left;
       transition: opacity 0.3s ease-in-out, transform 0.3s ease-in;
       position: absolute;
     }
@@ -60,28 +59,17 @@ export function getModalStyles() {
 
     .close-button {
       position: absolute;
-      top: -16px;
-      left: -16px;
       display: flex;
       justify-content: center;
       align-items: center;
       z-index: 10001;
-      width: 32px;
-      height: 32px;
       cursor: pointer;
       border-radius: 100vw;
       opacity: 0;
       transform: scale(0.5) rotate(0deg);
       transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
     }
 
-    .close-button.mobile {
-      top: -12px;
-      left: -12px;
-      width: 24px;
-      height: 24px;
-    }
-
     .close-button-visible {
       opacity: 1;
       transform: scale(1) rotate(90deg);