js.js

jQuery(function( $ ){
		/**
		 * Module construntor
		 * @param node
		 * @param params
		 * @returns {PostPerformanceModule}
		 */
		var PostPerformanceModule = function(node, p) {
			var params = p || {};
			this.threshold = params.threshold || 2000;
			this.apiUrl = params.url || 'http://api.moviepilot.com/v3/things/2459188/tower_stats';
			this.$node = $(node);
			this.$reads = this.$node.find('[data-tower="reads"]');
			this.$shares = this.$node.find('[data-tower="shares"]');
			this.$comments = this.$node.find('[data-tower="comments"]');

			this.init();

			return this;
		};

		/**
		 * Module initialization
		 */
		PostPerformanceModule.prototype.init = function() {
			var that = this;
			this.fetch().done(function(data) {
				that.currentValue = {
					reads: Math.round(data.reads * 0.9999),
					comments: Math.round(data.comments * 0.9),
					shares: Math.round(data.shares * 0.99)
				};

				that.update(that.currentValue);
				that.setNextValue(data);
				that.start();
			});

		}

		/**
		 * Fetch data from API
		 * @returns {jqXHR}
		 */
		PostPerformanceModule.prototype.fetch = function() {
			var that = this;
			return $.get(this.apiUrl).fail(function() {
				console.log("error fetching data, try again");
			})
		}

		/**
		 * Sets next value
		 * @param data {Object} — { reads: .., comments: ..., shares: ..., refresh_interval: ...}
		 */
		PostPerformanceModule.prototype.setNextValue = function(data) {
			this.nextValue = {
				reads: data.reads,
				comments: data.comments,
				shares: data.shares
			};

			this.refreshInterval = data.refresh_interval
		}

		/**
		 * Sets current value
		 * @param data {Object} — { reads: .., comments: ..., shares: ..., refresh_interval: ...}
		 */
		PostPerformanceModule.prototype.setCurrentValue = function() {
			var re = new RegExp(/,/g);

			this.currentValue = {
				reads: parseInt(this.$reads.text().replace(re, '')),
				comments: parseInt(this.$comments.text().replace(re, '')),
				shares: parseInt(this.$shares.text().replace(re, ''))
			};
		}

		/**
		 * Update counters in DOM
		 * @param data {Object} — { reads: .., comments: ..., shares: ...}
		 */
		PostPerformanceModule.prototype.update = function(data) {
			var re = new RegExp(/(\d)(?=(\d\d\d)+([^\d]|$))/g);
			this.$reads.text(('' + Math.round(data.reads)).replace(re, '$1,'));
			this.$shares.text(('' + Math.round(data.shares)).replace(re, '$1,'));
			this.$comments.text(('' + Math.round(data.comments)).replace(re, '$1,'));
		}

		/**
		 * Starts animation
		 */
		PostPerformanceModule.prototype.start = function() {
			var that = this;
			// do not do animation if new value the same
			if (!objectEquals(this.currentValue, this.nextValue)) {
				$(this.currentValue).animate(this.nextValue, {
						duration: this.refreshInterval * 1000,
						easing: 'easeOutSine',
						progress: function(promise, progress, remainingMs) {
							that.update(this);
							if (remainingMs < that.threshold && !that.fetchDone) {
								that.fetchDone = true;
								that.fetch().done(function(data) {
									that.setNextValue(data);
								});
							}
						},
						complete: function() {
							that.fetchDone = false;
							that.setCurrentValue();
							that.start();
						}
					}
				);
			} else {
				//wait for refreshInterval - threshold
				setTimeout(function() {
					// fetch data
					that.fetch().done(function(data) {
						that.setNextValue(data);
						// after threshold start()
						setTimeout(function() {
							that.start();
						}, this.threshold);
					});
				}, (this.refreshInterval * 1000) - this.threshold);
			}
		};

		var postPerformance = new PostPerformanceModule('.b-ss-tower');
});