Merge pull request #55 from TrevorBurnham/accept-format-function

Accept a new option, formatFunction, that converts numbers to strings

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "odometer",
   "main": "odometer.js",
-  "version": "0.4.6",
+  "version": "0.4.7",
   "homepage": "http://github.hubspot.com/odometer/docs/welcome",
   "authors": [
     "Zack Bloom <[email protected]>",

component.json

@@ -1,6 +1,6 @@
 {
   "name": "odometer",
-  "version": "0.4.6",
+  "version": "0.4.7",
   "repo": "hubspot/odometer",
   "description": "Transition numbers with ease",
   "keywords": [

docs/intro.md

@@ -94,7 +94,7 @@ All of [the themes](http://github.hubspot.com/odometer/api/themes/) can be resiz
 Usage
 -----
 
-**The simplest possible usage is just including [the javascript](https://raw.github.com/HubSpot/odometer/v0.4.6/odometer.min.js) and a [theme css](http://github.hubspot.com/odometer/api/themes/)
+**The simplest possible usage is just including [the javascript](https://raw.github.com/HubSpot/odometer/v0.4.7/odometer.min.js) and a [theme css](http://github.hubspot.com/odometer/api/themes/)
 file on your page.  Add the `odometer` class to any numbers you'd like to animate on change.  You're done.**
 
 Just set the `innerHTML`, `innerText`, or use jQuery's `.text()` or `.html()` methods to change their contents, and the animation

docs/welcome/index.html

@@ -129,7 +129,7 @@
             <div class="section">
                 <div class="about-section">
                     <h1>How To Use</h1>
-                    <p>Add the <a href="https://raw.github.com/HubSpot/odometer/v0.4.6/odometer.min.js">js</a> and a <a href="http://github.hubspot.com/odometer/api/themes/">theme file</a> to your page:</p>
+                    <p>Add the <a href="https://raw.github.com/HubSpot/odometer/v0.4.7/odometer.min.js">js</a> and a <a href="http://github.hubspot.com/odometer/api/themes/">theme file</a> to your page:</p>
 <pre class="  language-markup"><code class="  language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>odometer-theme-car.css<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
 <span class="token script"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>odometer.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span></code></pre>
                     <p>Any element with class name "odometer" will automatically be made into an Odometer! When you want to update the value, simply update it the same way you normally would.</p>

odometer.coffee

@@ -265,15 +265,32 @@ class Odometer
 
     @ribbons = {}
 
+    @formatDigits(value)
+
+    @startWatchingMutations()
+
+  formatDigits: (value) ->
     @digits = []
-    wholePart = not @format.precision or not fractionalPart(value) or false
-    for digit in value.toString().split('').reverse()
-      if digit is '.'
-        wholePart = true
 
-      @addDigit digit, wholePart
+    if @options.formatFunction
+      valueString = @options.formatFunction(value)
+      for valueDigit in valueString.split('').reverse()
+        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
 
-    @startWatchingMutations()
+        @addDigit digit, wholePart
+
+    return
 
   update: (newValue) ->
     newValue = @cleanValue newValue

package.json

@@ -1,6 +1,6 @@
 {
   "name": "odometer",
-  "version": "0.4.6",
+  "version": "0.4.7",
   "description": "Transition numbers with ease",
   "main": "odometer.js",
   "authors": [