Support for leading (and trailing zeroes)

docs/intro.md

@@ -119,7 +119,8 @@ You can set options by creating a `odometerOptions` object:
 window.odometerOptions = {
   auto: false, // Don't automatically initialize everything with class 'odometer'
   selector: '.my-numbers', // Change the selector used to automatically find things to be animated
-  format: '(,ddd).dd', // Change how digit groups are formatted, and how many digits are shown after the decimal point
+  format: '(,ddd).dd', // Change how digit groups are formatted, and how many digits are shown after the decimal point,
+  minIntegerLen: '6', // Specify the minimal number of digits in the integer part of the number
   duration: 3000, // Change how long the javascript expects the CSS animation to take
   theme: 'car', // Specify the theme (if you have more than one theme css file on the page)
   animation: 'count' // Count is a simpler animation method which just increments the value,
@@ -152,12 +153,18 @@ Format
 The format option allows you to configure how the digit groups are formatted,
 and how many digits are shown after the decimal point.
 
-    Format    -  Example
-    (,ddd)    -  12,345,678
-    (,ddd).dd -  12,345,678.09
-    (.ddd),dd -  12.345.678,09
-    ( ddd),dd -  12 345 678,09
-    d         -  12345678
+    Number        - Format    -  Example
+    12345678.09 - (,ddd)    -  12,345,678
+    12345678.09 - (,ddd).dd -  12,345,678.09
+    12345678.09 - (.ddd),dd -  12.345.678,09
+    12345678.09 - ( ddd),dd -  12 345 678,09
+    12345678.09 - d         -  12345678
+
+Furthermore, using a capital D for decimal the fractional part will specify required digits after the decimal point, and add trailing zeros if needed.
+    Number        - Format    -  Example
+    12345678.09 - (,ddd).ddd -  12,345,678.09
+    12345678.09 - (,ddd).DDd -  12,345,678.09
+    12345678.09 - (,ddd).DDD -  12,345,678.090
 
 Browser Support
 ---------------

odometer.coffee

@@ -16,7 +16,10 @@ FORMAT_MARK_HTML = '<span class="odometer-formatting-mark"></span>'
 # This is just the default, it can also be set as options.format.
 DIGIT_FORMAT = '(,ddd).dd'
 
-FORMAT_PARSER = /^\(?([^)]*)\)?(?:(.)(d+))?$/
+# What is the minimal length (no of digits) of the integer-part of the number
+MIN_INTEGER_LEN = 0;
+
+FORMAT_PARSER = /^\(?([^)]*)\)?(?:(.)(D*)(d*))?$/
 
 # What is our target framerate?
 FRAMERATE = 30
@@ -88,9 +91,6 @@ truncate = (val) ->
   else
     Math.floor(val)
 
-fractionalPart = (val) ->
-  val - round(val)
-
 _jQueryWrapped = false
 do wrapJQuery = ->
   return if _jQueryWrapped
@@ -223,11 +223,13 @@ class Odometer
     if not parsed
       throw new Error "Odometer: Unparsable digit format"
 
-    [repeating, radix, fractional] = parsed[1..3]
+    [repeating, radix, fractional1, fractional2] = parsed[1..4]
+
+    fractional = fractional1?.length or 0
 
-    precision = fractional?.length or 0
+    precision = fractional + fractional2?.length or 0
 
-    @format = {repeating, radix, precision}
+    @format = {repeating, radix, precision, fractional}
 
   render: (value=@value) ->
     @stopWatchingMutations()
@@ -275,20 +277,35 @@ class Odometer
     if @options.formatFunction
       valueString = @options.formatFunction(value)
       for valueDigit in valueString.split('').reverse()
-        if valueDigit.match(/0-9/)
+        if valueDigit.match(/[0-9]/)
           digit = @renderDigit()
           digit.querySelector('.odometer-value').innerHTML = valueDigit
           @digits.push digit
           @insertDigit digit
         else
           @addSpacer valueDigit
     else
-      wholePart = not @format.precision or not fractionalPart(value) or false
-      for digit in value.toString().split('').reverse()
-        if digit is '.'
-          wholePart = true
+      v = Math.abs value
+      fractionalCount = Math.max @format.fractional, @getFractionalDigitCount v
+      if fractionalCount
+        v = Math.round(v * Math.pow(10, fractionalCount))
+
+      i = 0
+      while v > 0
+        @addDigit (v % 10).toString(), i >= fractionalCount
+        v = Math.floor(v / 10);
+        i += 1
+        if i == fractionalCount
+          @addDigit '.', true
+
+      # if mininaml integer length is given, we need to pad with zeroes
+      minIntegerLen = @options.minIntegerLen ? MIN_INTEGER_LEN
+      for i in [i - fractionalCount...minIntegerLen] by 1
+        @addDigit 0, true
+
 
-        @addDigit digit, wholePart
+      if value < 0
+        @addDigit '-', true
 
     return
 
@@ -432,17 +449,19 @@ class Odometer
   animateSlide: (newValue) ->
     oldValue = @value
 
-    fractionalCount = @getFractionalDigitCount oldValue, newValue
+    fractionalCount = Math.max @format.fractional, @getFractionalDigitCount oldValue, newValue
 
     if fractionalCount
-      newValue = newValue * Math.pow(10, fractionalCount)
-      oldValue = oldValue * Math.pow(10, fractionalCount)
+      newValue = Math.round(newValue * Math.pow(10, fractionalCount))
+      oldValue = Math.round(oldValue * Math.pow(10, fractionalCount))
 
     return unless diff = newValue - oldValue
 
     @bindTransitionEnd()
 
-    digitCount = @getDigitCount(oldValue, newValue)
+    # if integer part of newValue has less digits than given minimal integer length, we need to pad with zeroes
+    minIntegerLen = @options.minIntegerLen ? MIN_INTEGER_LEN
+    digitCount = Math.max @getDigitCount(oldValue, newValue), minIntegerLen + fractionalCount
 
     digits = []
     boosted = 0