https://drx.com.tw/assets/js/components/hs.counter.js

1/**
2 * Counter wrapper.
3 *
4 * @author Htmlstream
5 * @version 1.0
6 * @requires appear.js (v1.0.3)
7 *
8 */
9;(function($){
10	'use strict';
11
12	$.HSCore.components.HSCounter = {
13
14		/**
15		 *
16		 *
17		 * @var Object _baseConfig
18		 */
19		_baseConfig : {
20			bounds: -100,
21			debounce: 10,
22			time: 6000,
23			fps: 60,
24			commaSeparated: false
25		},
26
27		/**
28		 *
29		 *
30		 * @var jQuery _pageCollection
31		 */
32		_pageCollection : $(),
33
34		/**
35		 * Initialization of Counter wrapper.
36		 *
37		 * @param String selector (optional)
38		 * @param Object config (optional)
39		 *
40		 * @return jQuery pageCollection - collection of initialized items.
41		 */
42		init: function(selector, config){
43
44			this.collection = $(selector) && $(selector).length ? $(selector) : $();
45			if(!this.collection.length) return;
46
47			this.config = config && $.isPlainObject(config) ? $.extend({}, this._baseConfig, config) : this._baseConfig;
48			this.config.itemSelector = selector;
49
50			this.initCounters();
51
52		},
53
54		/**
55		 * Initialization of each Counter of the page.
56		 *
57		 * @return undefined
58		 */
59		initCounters: function() {
60
61			var self = this;
62
63			appear({
64
65				bounds: self.config['bounds'],
66				debounce: self.config['debounce'],
67
68				init: function() {
69
70					self.collection.each(function(i, el) {
71
72						var $item = $(el),
73								value = parseInt($item.text(), 10);
74
75							$item.text('0').data('value', value);
76
77							self._pageCollection = self._pageCollection.add($item);
78
79					});
80
81				},
82
83				elements: function() {
84					return document.querySelectorAll(self.config['itemSelector']);
85				},
86
87				appear: function(el) {
88
89					var $item = $(el),
90							counter = 1,
91							endValue = $item.data('value'),
92							iterationValue = parseInt(endValue / ((self.config['time'] / self.config['fps'])), 10),
93							isCommaSeparated = $item.data('comma-separated'),
94							isReduced = $item.data('reduce-thousands-to');
95
96					if(iterationValue == 0) iterationValue = 1;
97
98					$item.data('intervalId', setInterval(function(){
99
100						if(isCommaSeparated){
101
102							$item.text(self.getCommaSeparatedValue(counter+= iterationValue));
103
104						}
105						else if(isReduced) {
106							$item.text(self.getCommaReducedValue(counter+= iterationValue, isReduced));
107						}
108						else {
109
110							$item.text(counter+= iterationValue);
111						}
112
113						if(counter > endValue) {
114
115							clearInterval($item.data('intervalId'));
116							if(isCommaSeparated) {
117								$item.text(self.getCommaSeparatedValue(endValue));
118							}
119							else if(isReduced) {
120								$item.text(self.getCommaReducedValue(endValue, isReduced));
121							}
122							else {
123								$item.text(endValue);
124							}
125
126							return;
127
128						}
129
130					}, self.config['time'] / self.config['fps']));
131
132				}
133
134			});
135
136		},
137
138		/**
139		 *
140		 *
141		 * @param Number value
142		 *
143		 * @return String
144		 */
145		getCommaReducedValue: function(value, additionalText) {
146
147			return parseInt(value / 1000, 10) + additionalText;
148
149		},
150
151		/**
152		 * Returns comma separated value.
153		 *
154		 * @param Number value
155		 *
156		 * @return String
157		 */
158		getCommaSeparatedValue: function(value) {
159
160			value = new String(value);
161
162			switch(value.length) {
163
164				case 4:
165
166					return value.substr(0, 1) + ',' + value.substr(1);
167
168				break;
169
170				case 5:
171
172					return value.substr(0, 2) + ',' + value.substr(2);
173
174				break;
175
176				case 6:
177
178					return value.substr(0, 3) + ',' + value.substr(3);
179
180				break;
181				case 7:
182
183					value = value.substr(0, 1) + ',' + value.substr(1);
184					return value.substr(0, 5) + ',' + value.substr(5);
185
186				break;
187
188				case 8:
189
190					value = value.substr(0, 2) + ',' + value.substr(2);
191					return value.substr(0, 6) + ',' + value.substr(6);
192
193				break;
194
195				case 9:
196
197					value = value.substr(0, 3) + ',' + value.substr(3);
198					return value.substr(0, 7) + ',' + value.substr(7);
199
200				break;
201
202				case 10:
203
204					value = value.substr(0, 1) + ',' + value.substr(1);
205					value = value.substr(0, 5) + ',' + value.substr(5);
206					return value.substr(0, 9) + ',' + value.substr(9);
207
208				break;
209
210				default:
211
212					return value;
213
214			}
215
216		}
217
218	};
219
220})(jQuery);