fix init params

donkeyclip · May 8, 2023 · 56b8c16 · 56b8c16
1 parent 846ce13
commit 56b8c16
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 43 deletions.
diff --git a/clip/clip.css b/clip/clip.css
@@ -1,7 +1,7 @@
 * {
 
-  --first-color: {{ initParams.colors[0] }};
-  --second-color: {{ initParams.colors[1] }};
+  --first-color: {{ initParams.backgroundColor }};
+  --second-color: {{ initParams.fontColor }};
   --first-top: {{ initParams.firstImagePosition.top }}px;
   --first-left: {{ initParams.firstImagePosition.left }}px;
   --second-top: {{ initParams.secondImagePosition.top }}px;
@@ -19,9 +19,9 @@ justify-content: center;
 flex-direction: column;
 align-items: center;
 height: 100%;
-background: black;
+background: var(--first-color);
 font-family: 'Open Sans', sans-serif;
-color: white;
+color: var(--second-color);
 }
 
 .image-wrapper{

diff --git a/clip/clip.html b/clip/clip.html
@@ -1,5 +1,4 @@
-<a class="container"
-  href="https://www.e-tennis.gr/tennis-shoes/tennis-shoe/nike/shopby/show_onsales_products-sales_products-model-zoom_lite.html">
+<a class="container" href="{{initParams.bannerLink}}">
   <div class="smoke"></div>
   <div class="title-wrapper">
     <div class="row-wrapper first-row">

diff --git a/clip/initParams.ts b/clip/initParams.ts
@@ -2,7 +2,8 @@ export default [
   {
     name: "Blue medium",
     value: {
-      colors: ["#fff", "#161616"],
+      backgroundColor: "#161616",
+      fontColor: "#fff",
       offer: "39.90€",
       images: [
         "https://donkeyclip.github.io/week-offer/server/white.png",
@@ -19,6 +20,8 @@ export default [
       firstRow: "ΠΡΟΣΦΟΡΑ",
       secondRow: "ΕΒΔΟΜΑΔΑΣ",
       thirdRow: "Nike Zoom Lite 3",
+      bannerLink:
+        "https://www.e-tennis.gr/tennis-shoes/tennis-shoe/nike/shopby/show_onsales_products-sales_products-model-zoom_lite.html",
     },
   },
 ];
diff --git a/clip/initParamsValidationRules.ts b/clip/initParamsValidationRules.ts
@@ -1,42 +1,39 @@
 export default {
-  colors: {
-    label: "Colors",
+  backgroundColor: { label: "Background Color", type: "color" },
+  fontColor: { label: "Font Color", type: "color" },
+  firstRow: {
+    label: "First Row",
+    type: "string",
+  },
+  secondRow: {
+    label: "Second Row",
+    type: "string",
+  },
+  offer: {
+    label: "Offer",
+    type: "string",
+  },
+  images: {
+    label: "Images",
     type: "array",
-    items: {
-      type: "color",
-    },
-    firstRow: {
-      label: "First Row",
-      type: "string",
-    },
-    secondRow: {
-      label: "Second Row",
-      type: "string",
-    },
-    offer: {
-      label: "Offer",
-      type: "string",
-    },
-    images: {
-      label: "Images",
-      type: "array",
-      items: { type: "string" },
-    },
-    firstImagePosition: {
-      type: "object",
-      label: "First Image Position",
-      props: {
-        top: { type: "number" },
-        left: { type: "number" },
-      },
+    items: { type: "string" },
+  },
+  firstImagePosition: {
+    type: "object",
+    label: "First Image Position",
+    props: {
+      top: { type: "number" },
+      left: { type: "number" },
     },
-    secondImagePosition: {
-      type: "object",
-      label: "Second Image Position",
-      props: {
-        top: { type: "number" },
-        left: { type: "number" },
-      },
+  },
+  secondImagePosition: {
+    type: "object",
+    label: "Second Image Position",
+    props: {
+      top: { type: "number" },
+      left: { type: "number" },
     },
   },
+  bannerLink: { type: "string", label: "Link" },
+  thirdRow: { type: "string", label: "Third Row" },
 };