├── .gitignore
├── index.html
├── bower.json
├── numerator.jquery.json
├── package.json
├── LICENSE
├── README.md
└── jquery-numerator.js
/.gitignore:
--------------------------------------------------------------------------------
1 | npm-debug.log
2 | bower_components
3 | node_modules
4 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
jQuery Numerator
9 |
10 |
11 |
14 |
15 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "jquery-numerator",
3 | "description": "A jQuery plugin to easily animate numbers.",
4 | "main": [
5 | "jquery-numerator.js"
6 | ],
7 | "dependencies": {
8 | "jquery": ">=1.9.1"
9 | },
10 | "keywords": [
11 | "jquery",
12 | "animate",
13 | "numbers",
14 | "number",
15 | "numerate",
16 | "numerator",
17 | "stopwatch",
18 | "timer"
19 | ],
20 | "authors": [
21 | "Gareth Nolan"
22 | ],
23 | "repository": {
24 | "type": "git",
25 | "url": "https://github.com/garethdn/jquery-numerator.git"
26 | },
27 | "homepage": "https://github.com/garethdn/jquery-numerator",
28 | "license": "MIT"
29 | }
--------------------------------------------------------------------------------
/numerator.jquery.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "numerator",
3 | "title": "jQuery Numerator",
4 | "description": "A jQuery plugin to easily animate numbers.",
5 | "keywords": [
6 | "jquery",
7 | "animate",
8 | "numbers",
9 | "number",
10 | "numerate",
11 | "numerator",
12 | "stopwatch",
13 | "timer"
14 | ],
15 | "version": "0.2.1",
16 | "author": {
17 | "name": "Gareth Nolan"
18 | },
19 | "licenses": [
20 | {
21 | "type": "MIT",
22 | "url": "https://github.com/garethdn/jquery-numerator/blob/master/LICENSE"
23 | }
24 | ],
25 | "dependencies": {
26 | "jquery": ">=1.9.1"
27 | }
28 | }
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "jquery-numerator",
3 | "version": "0.2.1",
4 | "description": "A jQuery plugin to easily animate numbers.",
5 | "main": "jquery-numerator.js",
6 | "repository": {
7 | "type": "git",
8 | "url": "https://github.com/garethdn/jquery-numerator.git"
9 | },
10 | "dependencies": {
11 | "jquery": ">=1.9.1"
12 | },
13 | "keywords": [
14 | "jquery",
15 | "animate",
16 | "numbers",
17 | "number",
18 | "numerate",
19 | "numerator",
20 | "stopwatch",
21 | "timer"
22 | ],
23 | "author": "Gareth Nolan",
24 | "license": "MIT",
25 | "bugs": {
26 | "url": "https://github.com/garethdn/jquery-numerator/issues"
27 | },
28 | "homepage": "https://github.com/garethdn/jquery-numerator"
29 | }
30 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 garethdn
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
6 | this software and associated documentation files (the "Software"), to deal in
7 | the Software without restriction, including without limitation the rights to
8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # jQuery Numerator
2 |
3 | A jQuery plugin to easily animate numbers.
4 |
5 | ### Demo page
6 |
7 | http://garethdn.github.io/jquery-numerator/
8 |
9 | ### Installation
10 |
11 | Include script after the jQuery library:
12 |
13 | ```html
14 |
15 | ```
16 |
17 | ### Usage
18 |
19 | ```js
20 | $('.my-value').numerator( options )
21 | ```
22 |
23 | ### Options
24 |
25 | #### easing (string)
26 |
27 | An optional parameter to specify the animation easing. Defaults to swing.
28 |
29 | ```js
30 | easing: 'linear'
31 | ```
32 |
33 | #### duration (number)
34 |
35 | An optional parameter specifying the length of the animation in milliseconds (ms). Defaults to 500 (1/2 a second).
36 |
37 | ```js
38 | duration: 2000
39 | ```
40 |
41 | #### delimiter (string)
42 |
43 | An optional parameter specifying character(s) used to delimit thousands values.
44 |
45 | ```js
46 | delimiter: ','
47 | ```
48 |
49 | #### rounding (number)
50 |
51 | This parameter specifies the number of decimal points to display. Defaults to 0.
52 |
53 | ```js
54 | rounding: 2
55 | ```
56 |
57 | #### toValue (number)
58 |
59 | The final value that you want the number to be animated to.
60 |
61 | ```js
62 | toValue: 205
63 | ```
64 |
65 | #### onStart (function)
66 |
67 | A function to be called when the animation beings.
68 |
69 | ```js
70 | onStart: function(){
71 | alert('Animation started')
72 | }
73 | ```
74 |
75 | #### onStep (function)
76 |
77 | A function to be called at each step of the animation. Accepts two arguments, now and fx.
78 |
79 | ```js
80 | onStep: function(now, fx){
81 | alert('The current value is: ' + now)
82 | }
83 | ```
84 |
85 | #### onComplete (function)
86 |
87 | A function to be called when the animation is complete.
88 |
89 | ```js
90 | onComplete: function(){
91 | alert('The animation is now complete')
92 | }
93 | ```
94 |
95 | ### TODO
96 |
97 | * Implement queue functionality
98 | * ~~Publish bower package~~
99 | * ~~Publish NPM package~~
100 |
101 | ## License
102 |
103 | MIT License
104 | (c) [Gareth Nolan](http://ie.linkedin.com/in/garethnolan/)
--------------------------------------------------------------------------------
/jquery-numerator.js:
--------------------------------------------------------------------------------
1 | /*
2 | * jQuery Numerator Plugin 0.2.1
3 | * https://github.com/garethdn/jquery-numerator
4 | *
5 | * Copyright 2015, Gareth Nolan
6 | * http://ie.linkedin.com/in/garethnolan/
7 |
8 | * Based on jQuery Boilerplate by Zeno Rocha with the help of Addy Osmani
9 | * http://jqueryboilerplate.com
10 | *
11 | * Licensed under the MIT license:
12 | * http://www.opensource.org/licenses/MIT
13 | */
14 |
15 | ;(function (factory) {
16 | 'use strict';
17 | if (typeof define === 'function' && define.amd) {
18 | // AMD is used - Register as an anonymous module.
19 | define(['jquery'], factory);
20 | } else if (typeof exports === 'object') {
21 | factory(require('jquery'));
22 | } else {
23 | // Neither AMD nor CommonJS used. Use global variables.
24 | if (typeof jQuery === 'undefined') {
25 | throw 'jquery-numerator requires jQuery to be loaded first';
26 | }
27 | factory(jQuery);
28 | }
29 | }(function ($) {
30 |
31 | var pluginName = "numerator",
32 | defaults = {
33 | easing: 'swing',
34 | duration: 500,
35 | delimiter: undefined,
36 | rounding: 0,
37 | toValue: undefined,
38 | fromValue: undefined,
39 | queue: false,
40 | onStart: function(){},
41 | onStep: function(){},
42 | onProgress: function(){},
43 | onComplete: function(){}
44 | };
45 |
46 | function Plugin ( element, options ) {
47 | this.element = element;
48 | this.settings = $.extend( {}, defaults, options );
49 | this._defaults = defaults;
50 | this._name = pluginName;
51 | this.init();
52 | }
53 |
54 | Plugin.prototype = {
55 |
56 | init: function () {
57 | this.parseElement();
58 | this.setValue();
59 | },
60 |
61 | parseElement: function () {
62 | var elText = $.trim($(this.element).text());
63 |
64 | this.settings.fromValue = this.settings.fromValue || this.format(elText);
65 | },
66 |
67 | setValue: function() {
68 | var self = this;
69 |
70 | $({value: self.settings.fromValue}).animate({value: self.settings.toValue}, {
71 |
72 | duration: parseInt(self.settings.duration, 10),
73 |
74 | easing: self.settings.easing,
75 |
76 | start: self.settings.onStart,
77 |
78 | step: function(now, fx) {
79 | $(self.element).text(self.format(now));
80 | // accepts two params - (now, fx)
81 | self.settings.onStep(now, fx);
82 | },
83 |
84 | // accepts three params - (animation object, progress ratio, time remaining(ms))
85 | progress: self.settings.onProgress,
86 |
87 | complete: self.settings.onComplete
88 | });
89 | },
90 |
91 | format: function(value){
92 | var self = this;
93 |
94 | if ( parseInt(this.settings.rounding ) < 1) {
95 | value = parseInt(value, 10);
96 | } else {
97 | value = parseFloat(value).toFixed( parseInt(this.settings.rounding) );
98 | }
99 |
100 | if (self.settings.delimiter) {
101 | return this.delimit(value)
102 | } else {
103 | return value;
104 | }
105 | },
106 |
107 | // TODO: Add comments to this function
108 | delimit: function(value){
109 | var self = this;
110 |
111 | value = value.toString();
112 |
113 | if (self.settings.rounding && parseInt(self.settings.rounding, 10) > 0) {
114 | var decimals = value.substring( (value.length - (self.settings.rounding + 1)), value.length ),
115 | wholeValue = value.substring( 0, (value.length - (self.settings.rounding + 1)));
116 |
117 | return self.addDelimiter(wholeValue) + decimals;
118 | } else {
119 | return self.addDelimiter(value);
120 | }
121 | },
122 |
123 | addDelimiter: function(value){
124 | return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, this.settings.delimiter);
125 | }
126 | };
127 |
128 | $.fn[ pluginName ] = function ( options ) {
129 | return this.each(function() {
130 | if ( $.data( this, "plugin_" + pluginName ) ) {
131 | $.data(this, 'plugin_' + pluginName, null);
132 | }
133 | $.data( this, "plugin_" + pluginName, new Plugin( this, options ) );
134 | });
135 | };
136 |
137 | }));
--------------------------------------------------------------------------------