triggerjs · DominguitoLamo · Nov 4, 2021 · Nov 6, 2021 · Nov 6, 2021 · Nov 6, 2021
diff --git a/demo/map.html b/demo/map.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Map</title>
+
+    <script src="../dist/bundle.js" defer></script>
+
+    <style>
+      :root {
+        --opacity: 0.3;
+        font-size: 20px;
+        font-family: "Helvetica Neue", Helvetica;
+      }
+
+      body {
+        background-image: conic-gradient(
+          #0f2257,
+          #1d41a5,
+          #1d3782,
+          #90f1fe,
+          #1145c1,
+          #06153e,
+          #06153e
+        );
+        background-size: cover;
+        background-attachment: fixed;
+        min-height: 100vh;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      div {
+        margin: 100vh 0;
+        font-size: 3.4rem;
+        font-weight: 600;
+        letter-spacing: -1.2px;
+        color: #fff;
+        line-height: 1.22em;
+        width: 800px;
+      }
+
+      span {
+        --opacity: 0.3;
+        opacity: var(--opacity);
+      }
+
+      .pro {
+        display: block;
+        margin-top: 2.2rem;
+      }
+    </style>
+  </head>
+  <body>
+<!-- This is an example of using Trigger.js, checkout at https://github.com/triggerjs/trigger -->
+  <div tg-name="a" tg-ref="container" tg-from="1" tg-to="10" tg-step="1">
+    <section tg-name="a" tg-map="1,2,3,4,5,6,7,8,9,10: 1">
+      <span tg-name="opacity" tg-filter="2!" tg-follow="container">A dramatically more powerful camera system.</span>
+      <span tg-name="opacity" tg-filter="3!" tg-follow="container">A display so responsive, every interaction feels new again.</span>
+      <span tg-name="opacity" tg-filter="4!" tg-follow="container">The world’s fastest smartphone chip.</span>
+      <span tg-name="opacity" tg-filter="5!" tg-follow="container">Exceptional durability.</span>
+      <span tg-name="opacity" tg-filter="6!" tg-follow="container">And a huge leap in battery life.</span>
+      <span tg-name="opacity" tg-filter="6,7" tg-map="6: 0.3; 7: 1" tg-follow="container" class="pro">Let’s Pro.</span>
+    </section>
+  </div>
+  </body>
+</html>
diff --git a/dist/bundle.js b/dist/bundle.js
diff --git a/index.html b/index.html
@@ -14,6 +14,7 @@
         font-size: 20px;
         --blur: 100;
         --opacity: 0;
+        --color: 'black';
       }
 
       body {
@@ -36,6 +37,7 @@
         position: sticky;
         top: 0;
         font-size: calc(var(--size) * 1em);
+        color: var(--color);
       }
 
       span {
@@ -54,7 +56,7 @@
     >
       <div class="container" tg-name="opacity" tg-from="0" tg-to="1">
         <div class="sticky">
-          <span>Hello.</span>
+          <span tg-name="color" tg-from="0" tg-to="1" tg-map="1...2: black; 2: red; 3: orange; 4: yellow; 5: green; 6: cyan; 7: blue">Hello.</span>
         </div>
       </div>
     </div>

diff --git a/src/directives/tg-map.ts b/src/directives/tg-map.ts
@@ -6,16 +6,24 @@ export function get(value?: string, data?: TgElementExtraData) {
   if (typeof value === 'string' && value.trim() !== '') {
     value.split(';').forEach((pair) => {
       let arr = pair.split(':');
-
       if (arr.length === 2) {
         if (arr[0].indexOf(',') > -1) {
+          // check whether they are number or not
+          const nums = arr[0].split(',')
+          if (!nums.every(item => /\d+/.test(item.trim()))) {
+            throw new Error('Multiple keys of map is wrong. Please check whether they are number or not.')
+          }
           // Multiple Values
-          arr[0].split(',').forEach((key) => {
+          nums.forEach((key) => {
             items[key.trim()] = arr[1].trim();
           });
         } else if (arr[0].indexOf('...') > -1) {
           // Use `...` here to define a range, inspired by Swift range operator.
           // Instead of using `-`, we can handle negative numbers easily.
+          if (!(/(\d+)\.\.\.(\d+)/.test(arr[0].trim()))) {
+            throw new Error('The format of key range is wrong.')
+          }
+
           let [from, to] = arr[0]
             .split('...')
             .map((val) => {
@@ -30,9 +38,14 @@ export function get(value?: string, data?: TgElementExtraData) {
 
             i += data?.increment || 0.01;
           }
-        } else {
+          // the number normal case
+        } else if (/\d+/.test(arr[0].trim())) {
           items[arr[0].trim()] = arr[1].trim();
+        } else {
+          throw new Error('The map key is wrong.')
         }
+      } else {
+        throw new Error('Map format is wrong.')
       }
     });
   }

diff --git a/src/helpers.ts b/src/helpers.ts
@@ -7,3 +7,17 @@ export function decimalsLength(number: number): number {
   if (Math.floor(number) === number) return 0;
   return number.toString().split('.')[1].length || 0;
 }
+
+/**
+ * Get the value. If it is greater than max, get max, otherwise get min.
+ * @param {number} value 
+ * @param {number} min min value in the range
+ * @param {number} max max value in the range
+ * @returns number
+ */
+export function getValueInRange(value: number, min: number, max: number) {
+  return Math.min(
+    Math.max(value, 0),
+    1
+  );
+}
diff --git a/src/parse.ts b/src/parse.ts
@@ -1,4 +1,4 @@
-import { decimalsLength } from './helpers';
+import { decimalsLength, getValueInRange } from './helpers';
 import { extractValues } from './directives';
 import { getPrefix } from './prefix';
 import { FilterValue } from './directives/tg-filter';
@@ -35,7 +35,7 @@ export function parseAttributes(element: HTMLElement): TgElement {
 
   const range = Math.abs(to - from);
   const increment = step === 0 ? range / steps : step;
-  const segments = range / increment;
+  const segments = steps ? steps : range / increment;
   const decimals = decimalsLength(increment);
   const multiplier = from > to ? -1 : 1;
 
@@ -104,16 +104,9 @@ export function parseValues(elements: TgElement[]) {
     }
 
     // edge is 'cover' by default
-    let percentage =
-      edge === 'cover'
-        ? Math.min(
-            Math.max(
-              (scrolled + clientHeight - top) / (clientHeight + height),
-              0
-            ),
-            1
-          )
-        : Math.min(Math.max((scrolled - top) / (height - clientHeight), 0), 1);
+    let percentage = edge === 'cover' ? 
+        getValueInRange((scrolled + clientHeight - top) / (clientHeight + height), 0, 1)
+      : getValueInRange((scrolled - top) / (height - clientHeight), 0, 1);
 
 
 

diff --git a/src/trigger.ts b/src/trigger.ts
@@ -79,7 +79,6 @@ const Trigger: TriggerType = {
       console.warn(`Unable to initialise, document.body does not exist.`);
       return;
     }
-
     observeElements();
     eventListeners();
   },
-Original file line number
+Diff line change
@@ Expand Up / @@ -79,7 +79,6 @@ const Trigger: TriggerType = { @@
           console.warn(`Unable to initialise, document.body does not exist.`);
           return;
         }
         observeElements();
         eventListeners();
       },
@@ Expand Down @@