Merge pull request #38 from bartpat/feature/initial-value

Michał Skowronek · web-flow · commit 7146dadd8e2c · 2017-10-18T22:17:07.000+02:00
Feature/initial value
diff --git a/README.md b/README.md
@@ -16,6 +16,7 @@ You can use it with other **options**:
 odoo.default({
   el: '.js-odoo',
   value: '£42,000,000',
+  initialValue: '£900,000',
   lineHeight: 1.35,
   letterSpacing: 1,
   animationDelay: 100,
diff --git a/examples/initial.html b/examples/initial.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Odoo</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-odoo"></div>
+<script src="/odoo.js"></script>
+<script>odoo.default({ el:'.js-odoo',value:'£42,000,000',initialValue:'£123,456' })</script>
+</body>
+</html>
diff --git a/lib/odoo.js b/lib/odoo.js
diff --git a/src/odoo.js b/src/odoo.js
@@ -86,6 +86,7 @@ const setViewBox = (svg, width, height) => {
 export default ({
   el,
   value,
+  initialValue = null,
   lineHeight = 1.35,
   letterSpacing = 1,
   animationDelay = 100,
@@ -109,13 +110,26 @@ export default ({
   createMask(defs, salt);
   createShadowFailFilter(defs);
 
-  const values = String(value)
-    .replace(/ /g, '\u00a0')
-    .split('');
+  const prepareValues = (value, secondValue) => {
+    const values = String(value)
+      .replace(/ /g, '\u00a0')
+      .split('');
+
+    const digitIndex = String(value).search(/\d/);
+    while (secondValue.length > values.length) {
+      const char = secondValue[secondValue.length - values.length - 1 + digitIndex];
+      values.splice(digitIndex, 0, isNaN(parseInt(char, 10)) ? char : '0');
+    }
+    return values;
+  };
+
+  const initialString = String(initialValue || '0');
+  const values = prepareValues(String(value), initialString);
+  const initial = prepareValues(initialString, String(value));
 
   const chars = values.map((char, i) => {
     const id = `${i}-${salt}`;
-    if(isNaN(parseInt(char, 10))) {
+    if(isNaN(parseInt(char, 10)) || isNaN(parseInt(initial[i], 10))) {
       return {
         isDigit: false,
         node: createCharacter(svg, char, fontSize),
@@ -129,24 +143,26 @@ export default ({
         node: createDigitRoulette(svg, fontSize, lineHeight, id),
         filter: createFilter(defs, id),
         value: Number(char),
-        offset: { x: 0, y: offset }
+        initial: Number(initial[i]),
+        offset: { x: 0, y: offset + Number(initial[i]) * (fontSize * lineHeight) }
       };
     }
   });
 
   const transitions = [];
   const digits = chars.filter(char => char.isDigit);
   digits.forEach((digit, i) => {
+    const sourceDistance = digit.initial * (fontSize * lineHeight);
     const targetDistance = (ROTATIONS * DIGITS_COUNT + digit.value) * (fontSize * lineHeight);
     const digitTransition = transition({
-      from: 0,
+      from: sourceDistance,
       to: targetDistance,
       delay: (digits.length - 1 - i) * letterAnimationDelay + animationDelay,
       step(value) {
         digit.offset.y = offset + value % ((fontSize * lineHeight) * DIGITS_COUNT);
         digit.node::attr('transform', `translate(${digit.offset.x}, ${digit.offset.y})`);
-        const filterOrigin = targetDistance / 2;
-        const motionValue = Math.abs(Math.abs(value - filterOrigin) - filterOrigin) / 100;
+        const filterOrigin = (sourceDistance + targetDistance) / 2;
+        const motionValue = (Math.abs(Math.abs(value - filterOrigin) - filterOrigin) - sourceDistance) / 100;
         digit.filter::attr('stdDeviation', `0 ${motionValue}`);
       },
       end: i === 0 ? () => cancelAnimation() : (e) => e
