Merge pull request #89 from Doorvest/master

coderitual · web-flow · commit ea224ac1d1ab · 2023-03-24T09:12:32.000+01:00
add restart function
diff --git a/examples/restart.html b/examples/restart.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>bounty</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="author" content="Coderitual" />
+    <meta name="description" content="Canvas 2d odometer effect" />
+    <meta
+      name="viewport"
+      content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"
+    />
+    <style type="text/css">
+      @font-face {
+        font-family: "ITV Reem";
+        src: url(assets/itvreem.woff) format("woff");
+      }
+
+      body {
+        background-color: #999;
+        font-family: "ITV Reem";
+        font-size: 82px;
+        text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
+        fill: #fff;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="js-bounty"></div>
+    <script src="../lib/bounty.js"></script>
+    <script>
+      const animation = bounty.default({
+        el: ".js-bounty",
+        value: "£42,000,000",
+        initialValue: "£123,456",
+      });
+
+      const restart = () => {
+        setInterval(() => {
+          animation.restart({
+            el: ".js-bounty",
+            value: "£56,123,456",
+            initialValue: "£42,000,000",
+          })
+        }, 6000)
+      }
+
+      restart();
+    </script>
+  </body>
+</html>
diff --git a/lib/bounty.js b/lib/bounty.js
diff --git a/src/bounty.js b/src/bounty.js
@@ -82,16 +82,17 @@ const setViewBox = (svg, width, height) => {
   svg::style("overflow", "hidden");
 };
 
-export default ({
-  el,
-  value,
-  initialValue = null,
-  lineHeight = 1.35,
-  letterSpacing = 1,
-  animationDelay = 100,
-  letterAnimationDelay = 100,
-  duration = 3000,
-}) => {
+const main = (initialOptions) => {
+  const {
+    el,
+    value,
+    initialValue = null,
+    lineHeight = 1.35,
+    letterSpacing = 1,
+    animationDelay = 100,
+    letterAnimationDelay = 100,
+    duration = 3000,
+  } = initialOptions;
   const element = select(el);
   const computedStyle = window.getComputedStyle(element);
   const fontSize = parseInt(computedStyle.fontSize, 10);
@@ -229,5 +230,11 @@ export default ({
     transitions.forEach((transition) => transition.resume());
   };
 
-  return { cancel, pause, resume };
+  const restart = (options) => {
+    main({ ...initialOptions, ...options });
+  };
+
+  return { cancel, pause, resume, restart };
 };
+
+export default main;
