From b45dea8ec672c9a455ff34bfa07eb6809088e6a7 Mon Sep 17 00:00:00 2001 From: Julen Ruiz Aizpuru Date: Wed, 26 Mar 2014 16:55:02 +0100 Subject: [PATCH] Added `odometer-digit-added` event This is useful for animating the width of the odometer in case the number of digits increases or decreases. --- odometer.coffee | 4 +- odometer.js | 148 +++++++++++++++++++++++++----------------------- 2 files changed, 81 insertions(+), 71 deletions(-) diff --git a/odometer.coffee b/odometer.coffee index 5ddc9f0..2b009ac 100644 --- a/odometer.coffee +++ b/odometer.coffee @@ -344,7 +344,9 @@ class Odometer digit.querySelector('.odometer-value').innerHTML = value @digits.push digit - @insertDigit digit + rv = @insertDigit digit + trigger @el, 'odometer-digit-added' + rv animate: (newValue) -> if not TRANSITION_SUPPORT or @options.animation is 'count' diff --git a/odometer.js b/odometer.js index 695ca90..6096c85 100644 --- a/odometer.js +++ b/odometer.js @@ -1,3 +1,4 @@ +// Generated by CoffeeScript 1.7.1 (function() { var COUNT_FRAMERATE, COUNT_MS_PER_FRAME, DIGIT_FORMAT, DIGIT_HTML, DIGIT_SPEEDBOOST, DURATION, FORMAT_MARK_HTML, FORMAT_PARSER, FRAMERATE, FRAMES_PER_VALUE, MS_PER_FRAME, MutationObserver, Odometer, RIBBON_HTML, TRANSITION_END_EVENTS, TRANSITION_SUPPORT, VALUE_HTML, addClass, createFromHTML, fractionalPart, now, removeClass, requestAnimationFrame, round, transitionCheckStyles, trigger, truncate, wrapJQuery, _jQueryWrapped, _old, _ref, _ref1, __slice = [].slice; @@ -126,8 +127,7 @@ Odometer = (function() { function Odometer(options) { - var e, k, property, v, _base, _i, _len, _ref, _ref1, _ref2, - _this = this; + var e, k, property, v, _base, _i, _len, _ref, _ref1, _ref2; this.options = options; this.el = this.options.el; if (this.el.odometer != null) { @@ -154,21 +154,23 @@ for (_i = 0, _len = _ref2.length; _i < _len; _i++) { property = _ref2[_i]; if (this.el[property] != null) { - (function(property) { - return Object.defineProperty(_this.el, property, { - get: function() { - var _ref3; - if (property === 'innerHTML') { - return _this.inside.outerHTML; - } else { - return (_ref3 = _this.inside.innerText) != null ? _ref3 : _this.inside.textContent; + (function(_this) { + return (function(property) { + return Object.defineProperty(_this.el, property, { + get: function() { + var _ref3; + if (property === 'innerHTML') { + return _this.inside.outerHTML; + } else { + return (_ref3 = _this.inside.innerText) != null ? _ref3 : _this.inside.textContent; + } + }, + set: function(val) { + return _this.update(val); } - }, - set: function(val) { - return _this.update(val); - } + }); }); - })(property); + })(this)(property); } } } catch (_error) { @@ -186,20 +188,21 @@ }; Odometer.prototype.watchForMutations = function() { - var e, - _this = this; + var e; if (MutationObserver == null) { return; } try { if (this.observer == null) { - this.observer = new MutationObserver(function(mutations) { - var newVal; - newVal = _this.el.innerText; - _this.renderInside(); - _this.render(_this.value); - return _this.update(newVal); - }); + this.observer = new MutationObserver((function(_this) { + return function(mutations) { + var newVal; + newVal = _this.el.innerText; + _this.renderInside(); + _this.render(_this.value); + return _this.update(newVal); + }; + })(this)); } this.watchMutations = true; return this.startWatchingMutations(); @@ -233,8 +236,7 @@ }; Odometer.prototype.bindTransitionEnd = function() { - var event, renderEnqueued, _i, _len, _ref, _results, - _this = this; + var event, renderEnqueued, _i, _len, _ref, _results; if (this.transitionEndBound) { return; } @@ -244,18 +246,20 @@ _results = []; for (_i = 0, _len = _ref.length; _i < _len; _i++) { event = _ref[_i]; - _results.push(this.el.addEventListener(event, function() { - if (renderEnqueued) { + _results.push(this.el.addEventListener(event, (function(_this) { + return function() { + if (renderEnqueued) { + return true; + } + renderEnqueued = true; + setTimeout(function() { + _this.render(); + renderEnqueued = false; + return trigger(_this.el, 'odometerdone'); + }, 0); return true; - } - renderEnqueued = true; - setTimeout(function() { - _this.render(); - renderEnqueued = false; - return trigger(_this.el, 'odometerdone'); - }, 0); - return true; - }, false)); + }; + })(this), false)); } return _results; }; @@ -327,8 +331,7 @@ }; Odometer.prototype.update = function(newValue) { - var diff, - _this = this; + var diff; newValue = this.cleanValue(newValue); if (!(diff = newValue - this.value)) { return; @@ -342,10 +345,12 @@ this.stopWatchingMutations(); this.animate(newValue); this.startWatchingMutations(); - setTimeout(function() { - _this.el.offsetHeight; - return addClass(_this.el, 'odometer-animating'); - }, 0); + setTimeout((function(_this) { + return function() { + _this.el.offsetHeight; + return addClass(_this.el, 'odometer-animating'); + }; + })(this), 0); return this.value = newValue; }; @@ -374,7 +379,7 @@ }; Odometer.prototype.addDigit = function(value, repeating) { - var chr, digit, resetted, _ref; + var chr, digit, resetted, rv, _ref; if (repeating == null) { repeating = true; } @@ -405,7 +410,9 @@ digit = this.renderDigit(); digit.querySelector('.odometer-value').innerHTML = value; this.digits.push(digit); - return this.insertDigit(digit); + rv = this.insertDigit(digit); + trigger(this.el, 'odometer-digit-added'); + return rv; }; Odometer.prototype.animate = function(newValue) { @@ -417,35 +424,36 @@ }; Odometer.prototype.animateCount = function(newValue) { - var cur, diff, last, start, tick, - _this = this; + var cur, diff, last, start, tick; if (!(diff = +newValue - this.value)) { return; } start = last = now(); cur = this.value; - return (tick = function() { - var delta, dist, fraction; - if ((now() - start) > _this.options.duration) { - _this.value = newValue; - _this.render(); - trigger(_this.el, 'odometerdone'); - return; - } - delta = now() - last; - if (delta > COUNT_MS_PER_FRAME) { - last = now(); - fraction = delta / _this.options.duration; - dist = diff * fraction; - cur += dist; - _this.render(Math.round(cur)); - } - if (requestAnimationFrame != null) { - return requestAnimationFrame(tick); - } else { - return setTimeout(tick, COUNT_MS_PER_FRAME); - } - })(); + return (tick = (function(_this) { + return function() { + var delta, dist, fraction; + if ((now() - start) > _this.options.duration) { + _this.value = newValue; + _this.render(); + trigger(_this.el, 'odometerdone'); + return; + } + delta = now() - last; + if (delta > COUNT_MS_PER_FRAME) { + last = now(); + fraction = delta / _this.options.duration; + dist = diff * fraction; + cur += dist; + _this.render(Math.round(cur)); + } + if (requestAnimationFrame != null) { + return requestAnimationFrame(tick); + } else { + return setTimeout(tick, COUNT_MS_PER_FRAME); + } + }; + })(this))(); }; Odometer.prototype.getDigitCount = function() { @@ -580,7 +588,7 @@ _results = []; for (k in _ref1) { v = _ref1[k]; - _results.push((_base = Odometer.options)[k] != null ? (_base = Odometer.options)[k] : _base[k] = v); + _results.push((_base = Odometer.options)[k] != null ? _base[k] : _base[k] = v); } return _results; }