2016-02-02

Odometer - Transition Number with Ease - fixed length

Odometer component is used in one of my latest mobile app projects to display generated one time password. It is a visual candy for displaying numbers with some animation.
I could not find property to set the formatting to always show a number with fixed length (leading zeroes) so I had to dig into the source and change some lines of code.
Inside of the Odometer javascript file look for the function render() and at the end of the function you will see the following code:
  for (_j = 0, _len1 = _ref.length; _j < _len1; _j++) {
    digit = _ref[_j];
    if (digit === '.') {
      wholePart = true;
    }
    this.addDigit(digit, wholePart);
  }

Between the end of the for loop and the return statement, add the following code.
if (MIN_INTEGER_LEN > this.digits.length)
  {
    var initialLength;
    initialLength = this.digits.length;
    for (_j = 0; _j < MIN_INTEGER_LEN - initialLength; _j++)
    {
        this.addDigit(0,true);
    }
  }

For example, setting MIN_INTEGER_LENGTH to 8 will format number 12345 to 00012345. It is great that all stylesheets still work after this change.

No comments:

Post a Comment