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 {
@@ -22,7 +23,7 @@
       }
 
       .container {
-        height: 300vh;
+        width: 300vh;
       }
 
       .sticky {
@@ -32,10 +33,11 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        min-height: 100vh;
+        min-width: 100vh;
         position: sticky;
         top: 0;
         font-size: calc(var(--size) * 1em);
+        color: var(--color);
       }
 
       span {
@@ -48,13 +50,14 @@
       class="container"
       tg-name="size"
       tg-edge="inset"
+      tg-direction="horizon"
       tg-from="14"
       tg-to="20"
       tg-bezier="0.23, 1.5, 0.32, 2"
     >
       <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/bind.ts b/src/bind.ts
@@ -17,10 +17,12 @@ export default function (
   document
     .querySelectorAll<HTMLElement>(`[${prefix}name]`)
     .forEach((element) => {
-      const { top, height } = element.getBoundingClientRect();
+      const { top, height, left, width } = element.getBoundingClientRect();
 
       element.style.setProperty(`--${prefix}top`, `${top + window.scrollY}`);
+      element.style.setProperty(`--${prefix}left`, `${left + window.scrollX}`);
       element.style.setProperty(`--${prefix}height`, `${height}`);
+      element.style.setProperty(`--${prefix}width`, `${width}`);
 
       observer && observer.observe(element);
     });

diff --git a/src/directives/index.ts b/src/directives/index.ts
@@ -1,5 +1,5 @@
 import { getPrefix } from '../prefix';
-import { CustomDirective, TgDirective, TgElementExtraData } from '../type';
+import { CustomDirective, TgDirective, TgElement, TgElementExtraData } from '../type';
 
 const SHOULD_NOT_INHERIT_DIRECTIVES = [`tg-follow`, `tg-ref`];
 
@@ -20,12 +20,18 @@ importDir.keys().map((key) => {
   }
 });
 
+type TExtractValues = <K extends keyof TgElement>(
+  element: HTMLElement,
+  directive: CustomDirective,
+  data?: TgElementExtraData
+) =>TgElement[K]
+
 // Extract the value of tg element
-export function extractValues(
+export const extractValues: TExtractValues = (
   element: HTMLElement,
   directive: CustomDirective,
   data?: TgElementExtraData
-) {
+) => {
   // Check if the directive prefix is customised
   // Replace custom prefix to tg- here if necessary
   // in order to have the correct object key

diff --git a/src/directives/tg-direction.ts b/src/directives/tg-direction.ts
@@ -0,0 +1,8 @@
+import { direction } from '../type';
+
+// Default value
+const DEFAULT: direction = 'vertical';
+
+export function get(value?: direction) {
+  return value ? value : DEFAULT;
+}
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,34 @@ 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
+  );
+}
+
+/**
+ * compose functions into one function from the left to the right
+ * @param {Array<Function>} func 
+ * @returns {Function}
+ */
+export function compose(...func: Array<Function>): Function {
+  if (func.length === 0) {
+    return (args: any) => args;
+  }
+
+  if (func.length === 1) {
+    return func[0];
+  }
+
+  return func.reduce((a, b) => (...args: Array<any>) => b(a(...args)));
+}