improvements to spotlight code

99x-incubator · Aug 31, 2024 · 69fa74f · 69fa74f
1 parent 906a027
commit 69fa74f
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 112 deletions.
diff --git a/packages/@productled/spotlights/src/Spotlight.ts b/packages/@productled/spotlights/src/Spotlight.ts
@@ -1,35 +1,16 @@
-
-
-// Define the Trigger interface
-interface Trigger {
-  url: string;
-  selector: string;
-}
-
+import style from './styles';
 export interface Positioning {
   alignment: string;
   left: string;
   top: string;
 }
-
-// Define the Schedule interface
-interface Schedule {
-  start: { date: string; time: string };
-  end: { date: string; time: string };
-}
-
-// Define the Flow interface
 export interface SpotlightConf {
   title: String;
   description: String;
   link: String;
-  trigger: Trigger;
   frequency: string;
-  schedule: Schedule;
   positioning: Positioning;
 }
-
-
 export class Spotlight {
     private targetElement: Element;
     private title: String;
@@ -46,97 +27,19 @@ export class Spotlight {
     }
 
     create(): void {
-        const spotlight = document.createElement('div');
-        spotlight.className = 'spotlight';
-        spotlight.style.position = 'absolute';
-        spotlight.style.left = `${this.positioning.left}px`;
-        spotlight.style.top = `${this.positioning.top}px`;
-
-        // Design the spotlight based on the configuration
-        spotlight.innerHTML = `
-            <div class="productled-spotlight">
-            <style>
-            .beacon{
-                position:absolute;
-                top:50%;
-                left:50%;
-                background-color:#DB2828;
-                height:2em;
-                width:2em;
-                border-radius:50%;
-                -webkit-animation: grow .4s 1 linear;
-                animation: grow .4s 1 linear;
-                -webkit-transform:translateX(-50%) translateY(-50%);
-              }
-              .beacon:before{
-                position:absolute;
-                content:"";
-                height:2em;
-                width:2em;
-                left:0;
-                top:0;
-                background-color:transparent;
-                border-radius:50%;
-                box-shadow:0px 0px 2px 2px #DB2828;
-                -webkit-animation:active 2s infinite linear;
-                animation:active 2s infinite linear;
-              }
-              
-              @-webkit-keyframes grow {
-                0% {
-                  -webkit-transform: scale(.1);
-                }
-                
-                100% {
-                  -webkit-transform: scale(1);
-                }
-              }
-              
-              @keyframes grow {
-                0% {
-                  transform: scale(.1);
-                }
-                
-                100% {
-                  transform: scale(1);
-                }
-              }
-              
-              @-webkit-keyframes active{
-                0%{
-                  -webkit-transform:scale(.1);
-                  opacity:1;
-                }
-                70%{
-                  -webkit-transform:scale(2.5);
-                  opacity:0;
-                }
-                100%{
-                  opacity:0;
-                }
-              }
-              
-              @keyframes active{
-                0%{
-                  transform:scale(.1);
-                  opacity:1;
-                }
-                70%{
-                  transform:scale(2.5);
-                  opacity:0;
-                }
-                100%{
-                  opacity:0;
-                }
-              }
-              
-            </style>
-            <span class="beacon"></span>
-            </div>
-        `;
-
         // Position the spotlight relative to the target element
         (this.targetElement as HTMLElement).style.position = 'relative';
-        this.targetElement.appendChild(spotlight);
+
+        const container = document.createElement('div');
+        container.classList.add('productled-spotlight');
+        container.style.position = 'absolute';
+        container.style.left = `${this.positioning.left}px`;
+        container.style.top = `${this.positioning.top}px`;
+        container.appendChild(style);
+        this.targetElement.appendChild(container);
+
+        const spotlight = document.createElement('span');
+        spotlight.classList.add('beacon');
+        container.appendChild(spotlight);
     }
 }
diff --git a/packages/@productled/spotlights/src/styles.ts b/packages/@productled/spotlights/src/styles.ts
@@ -0,0 +1,84 @@
+function createStyleElement(cssCode: string): HTMLStyleElement {
+  const styleElement = document.createElement('style');
+  styleElement.innerHTML = cssCode;
+  return styleElement;
+}
+
+const cssCode = `
+  .beacon{
+    position:absolute;
+    border-color: rgba(219, 40, 40, .75);
+    border-style: solid;
+    border-width: 1px;
+    height:1em;
+    width:1em;
+    border-radius:50%;
+    -webkit-animation: grow .4s 1 linear;
+    animation: grow .4s 1 linear;
+  }
+  .beacon:before{
+    position:absolute;
+    content:"";
+    height:1em;
+    width:1em;
+    left:0;
+    top:0;
+    background-color:transparent;
+    border-radius:50%;
+    box-shadow:0px 0px 2px 2px #DB2828;
+    -webkit-animation:active 2s infinite linear;
+    animation:active 2s infinite linear;
+  }
+
+  @-webkit-keyframes grow {
+    0% {
+      -webkit-transform: scale(.1);
+    }
+    
+    100% {
+      -webkit-transform: scale(1);
+    }
+  }
+
+  @keyframes grow {
+    0% {
+      transform: scale(.1);
+    }
+    
+    100% {
+      transform: scale(1);
+    }
+  }
+
+  @-webkit-keyframes active{
+    0%{
+      -webkit-transform:scale(.1);
+      opacity:1;
+    }
+    70%{
+      -webkit-transform:scale(2.5);
+      opacity:0;
+    }
+    100%{
+      opacity:0;
+    }
+  }
+
+  @keyframes active{
+    0%{
+      transform:scale(.1);
+      opacity:1;
+    }
+    70%{
+      transform:scale(2.5);
+      opacity:0;
+    }
+    100%{
+      opacity:0;
+    }
+  }
+`;
+
+
+const styleElement = createStyleElement(cssCode);
+export default styleElement;
diff --git a/packages/samples/react-sample/src/productled-config.json b/packages/samples/react-sample/src/productled-config.json
@@ -16,8 +16,8 @@
         },
         "positioning": {
             "alignment": "right-center",
-            "left": "75",
-            "top": "15"
+            "left": "60",
+            "top": "10"
         }
     }]
 }