jquery-numbercontrol

1) (function (factory) {
2) 	if (typeof define === 'function' && define.amd) {
3) 		// AMD. Register as an anonymous module.
4) 		define(['jquery'], factory);
5) 	} else if (typeof module === 'object' && module.exports) {
6) 		// Node/CommonJS
7) 		module.exports = function( root, jQuery ) {
8) 			if ( jQuery === undefined ) {
9) 				// require('jQuery') returns a factory that requires window to
10) 				// build a jQuery instance, we normalize how we use modules
11) 				// that require this pattern but the window provided is a noop
12) 				// if it's defined (how jquery works)
13) 				if ( typeof window !== 'undefined' ) {
14) 					jQuery = require('jquery');
15) 				}
16) 				else {
17) 					jQuery = require('jquery')(root);
18) 				}
19) 			}
20) 			factory(jQuery);
21) 			return jQuery;
22) 		};
23) 	} else {
24) 		// Browser globals
25) 		factory(jQuery);
26) 	}
27) }(function ($) {
28) 	'use strict'

29) 	$.fn.numbercontrol = function (methodOrProps) {

30) 		if (methodOrProps === 'destory') {

31) 			this.each(function () {
32) 				$(this).parent().children().each(function (index, value) {
33) 					var thisSelector = $(value);
34) 
35) 					if (options.onBeforeDestoryInitialize !== undefined)
36) 						options.onBeforeDestoryInitialize(this);
37) 
38) 					if (!thisSelector.is('input'))
39) 						thisSelector.remove();
40) 
41) 					if (options.onAfterDestoryInitialize !== undefined)
42) 						options.onAfterDestoryInitialize(this);
43) 				});
44) 
45) 				$(this).parent().removeClass().addClass('numberControlDestoryed');

46) 			})
47) 			return this;
48) 		}

49) 
50) 		// Allow customizing the options.

51) 		var options = {
52) 			debug: false,
53) 			separator: '.',
54) 			type: 'number',
55) 			prependHtml: '<div class="input-group-prepend"><button class="btn btn-decrease btn-outline-secondary px-1"><span class="oi oi-minus" /></button></div>',

56) 			appendHtml: '<div class="input-group-append"><button class="btn btn-increase btn-outline-secondary px-1"><span class="oi oi-plus" /></button></div>',
57) 			inputParentCss: 'input-group numberControl',

58) 			inputParent: 'div',
59) 			inputCss: 'numberControlInput form-control px-1',

60) 			bindButtonEvents: 'click tap touch touchstart focus',

61) 			keyboardLanguage: {
62) 				'UP' : '<span class="oi oi-chevron-top" />',
63) 				'DOWN' : '<span class="oi oi-chevron-bottom" />',
64) 				'INVERSE' : '<span class="oi oi-transfer" />',
65) 				'SEP' : '<span class="oi oi-media-record" />',
66) 			},
67) 			keyboardControl: {
68) 			},

69) 			buttons: [...Array(10).keys(), 'DELETE', 'CLEAR', 'DONE', 'CANCEL', 'UP', 'DOWN', 'SEP', 'INVERSE']

70) 		}
71) 		for (var option in methodOrProps) {
72) 			options[option] = methodOrProps[option]
73) 		}

74) 
75) 		function setNewValue(container, value)
76) 		{

77) 			if (options.onBeforeSetNewvalue !== undefined)
78) 				options.onBeforeSetNewvalue(this, event, container, value);
79) 

80) 			if (options.type === 'number')
81) 				$(container).val(parseInt(value));
82) 			else
83) 				$(container).val(parseFloat(value));

84) 
85) 			if (options.onAfterSetNewvalue !== undefined)
86) 				options.onAfterSetNewvalue(this, event, container, value);

87) 		}
88) 

89) 		// https://stackoverflow.com/questions/9553354/how-do-i-get-the-decimal-places-of-a-floating-point-number-in-javascript
90) 		function precision(a)
91) 		{
92) 			if (!isFinite(a))
93) 				return 0;
94) 
95) 			var e = 1, p = 0;
96) 			while (Math.round(a * e) / e !== a)
97) 			{
98) 				e *= 10;
99) 				p++;
100) 			}
101) 
102) 			return parseInt(p);
103) 		}
104) 
105) 		function FindPercision(v, p)
106) 		{
107) 			if (!isFinite(v))
108) 				return 0;
109) 			return parseInt(v).toString().length + p;
110) 		}
111) 

112) 		function findMinMaxValue()
113) 		{
114) 			var testValue;
115) 			for (var i=0; i < arguments.length; i++) {
116) 				testValue = arguments[i];
117) 				if (typeof testValue !== 'undefined' && !isNaN(testValue))
118) 				{
119) 					if (options.type === 'number' && parseInt(testValue) !== null)
120) 						return parseInt(testValue);
121) 					else if (parseFloat(testValue) !== null)
122) 						return parseFloat(testValue);
123) 					continue;
124) 				}
125) 			}
126) 			return 0;
127) 		}
128) 
129) 		// Bind to each input selector

130) 		this.each(function () {

131) 			if (options.onBeforeInitialized !== undefined)
132) 				options.onBeforeInitialized(this);
133) 

134) 			var $base = $(this);

135) 
136) 			// Some settings we either can pull in from a options, from standard attributes or defaults.
137) 			var $step = findMinMaxValue(parseFloat(options.step), parseFloat($base.attr('step')), 1);

138) 			var $percision = precision($step) + 1;

139) 			var $minValue = findMinMaxValue(options.min, $base.attr('min'), Number.MIN_VALUE);
140) 			var $maxValue = findMinMaxValue(options.max, $base.attr('max'), Number.MAX_VALUE);
141) 
142) 			// Build the parent up. 

143) 			if (!$($base).parent().is('div') || !$($base).parent().hasClass('numberControlDestoryed')) {
144) 				$base.wrap('<' + options.inputParent + '></' + options.inputParent + '>');

145) 			}

146) 			var $parent = $base.parent(options.parentSelector);

147) 			$parent.removeClass().addClass(options.inputParentCss);

148) 
149) 			// Set the base.
150) 			$base.attr('type', options.type);
151) 			$base.addClass(options.inputCss);
152) 
153) 			// Wrap the buttons around.			
154) 			$base.before(options.prependHtml);
155) 			$base.after(options.appendHtml);

156) 

157) 			// Add the style to the body to cleanup input controls for number.
158) 			if (options.type == 'number' && !options.DisableNumberSpinStyleFix)
159) 				$('body').append('<style>' +
160) 							'.numberControlInput::-webkit-outer-spin-button,.numberControlInput::-webkit-inner-spin-button {' + 
161) 								'-webkit-appearance: none;' +
162) 							'}</style>'
163) 				);
164) 
165) 			// The decrease event.
166) 			var $decreaseButton = $parent.find('.btn-decrease');
167) 			$decreaseButton.on(options.bindButtonEvents, function (event) {

168) 				event.preventDefault();
169) 

170) 				if (options.onBeforeClickDecrease !== undefined)
171) 					options.onBeforeClickDecrease(this, event);
172) 				if ($base.val() > $minValue)

173) 					setNewValue($base, parseFloat(parseFloat($base.val()) - parseFloat($step)).toPrecision(FindPercision($base.val(), $percision)));

174) 				if (options.onAfterClickDecrease !== undefined)
175) 					options.onAfterClickDecrease(this, event);
176) 				if (options.debug)

177) 					console.log('numbercontrl: decreaseButton: Click', event, parseFloat($base.val()), $minValue, parseFloat($step));

178) 			});
179) 
180) 			// The increase event.

181) 			var $increaseButton = $parent.find('.btn-increase');
182) 			$increaseButton.on(options.bindButtonEvents, function (event) {

183) 				event.preventDefault();
184) 

185) 				if (options.onBeforeClickIncrease !== undefined)
186) 					options.onBeforeClickIncrease(this, event);
187) 				if ($base.val() < $maxValue)

188) 					setNewValue($base, parseFloat(parseFloat($base.val()) + parseFloat($step)).toPrecision(FindPercision($base.val(), $percision)));

189) 				if (options.onAfterClickIncrease !== undefined)
190) 					options.onAfterClickIncrease(this, event);
191) 				if (options.debug)

192) 					console.log('numbercontrl: increaseButton: Click', event, parseFloat($base.val()), $maxValue, parseFloat($step));

193) 			});
194) 
195) 			// The Popup Numberpad
196) 			if (!options.disableVirtualKeyboard)
197) 			{

198) 				var $KeyboardLayout;
199) 

200) 				if (options.onBeforeVirtualKeyboardInitalized !== undefined)
201) 					options.onBeforeVirtualKeyboardInitalized(this);
202) 
203) 				$base.on(options.bindButtonEvents, function (event) {
204) 					event.stopPropagation();
205) 
206) 					if (options.onBeforeVirtualKeyboardOpen !== undefined)
207) 						options.onBeforeVirtualKeyboardOpen(this);
208) 
209) 					var $location = options.virtualKeyboardAttachSelector ? $(options.virtualKeyboardAttachSelector) : $base;
210) 
211) 					if (options.keyboardLayout)

212) 						$KeyboardLayout = options.keyboardLayout;

213) 					else

214) 						$KeyboardLayout = 

215) 							'<div class="modal-dialog modal-dialog-centered" style="width: 250px;">' +
216) 								'<div class="modal-content">' +
217) 									'<table>' +
218) 										'<tr>' +
219) 											'<td colspan="4">{INPUTBOX}</td>' +
220) 										'</tr><tr>' +
221) 											'<td>{7}</td>' +
222) 											'<td>{8}</td>' +
223) 											'<td>{9}</td>' +
224) 											'<td>{DELETE}</td>' +
225) 										'</tr><tr>' +
226) 											'<td>{4}</td>' +
227) 											'<td>{5}</td>' +
228) 											'<td>{6}</td>' +
229) 											'<td>{CLEAR}</td>' +
230) 										'</tr><tr>' +
231) 											'<td>{1}</td>' +
232) 											'<td>{2}</td>' +
233) 											'<td>{3}</td>' +
234) 											'<td>{DONE}</td>' +
235) 										'</tr><tr>' +
236) 											'<td>{UP}</td>' +
237) 											'<td>{0}</td>' +
238) 											'<td>{DOWN}</td>' +
239) 											'<td>{CANCEL}</td>' +
240) 										'</tr>' +
241) 									'</table>' +
242) 								'</div>' +
243) 							'</div>'
244) 						;
245) 
246) 					// Fill out the input.

247) 					if (typeof options.keyboardControl['INPUTBOX'] === 'undefined')
248) 						options.keyboardControl['INPUTBOX'] = '<input class="numberControlVirtualNumPad numberControlVirtualNumPadINPUT form-control" type="text" readonly value="{VAL}"/>';
249) 					$KeyboardLayout = $KeyboardLayout.replace('{INPUTBOX}', options.keyboardControl['INPUTBOX'].replace('{VAL}', $base.val()).toString());

250) 
251) 					// Fill out all buttons.
252) 					$.each(options.buttons, function(i, v){
253) 						var LanguageBox = options.keyboardLanguage[v] ? options.keyboardLanguage[v] : v;
254) 
255) 						if (typeof options.keyboardControl[v] === 'undefined')
256) 							options.keyboardControl[v] = '<button class="numberControlVirtualNumPad numberControlVirtualNumPad' + v + ' btn btn-outline-secondary w-100" data-function="' + v + '">{' + v + '_LANG}</button>';
257) 						$KeyboardLayout = $KeyboardLayout.replace('{' + v + '}', options.keyboardControl[v].replace('{' + v + '_LANG}', LanguageBox));
258) 					});
259) 
260) 					// Attach the keyboard to the container.
261) 					$location.after('<div class="numberControlVirtualNumPad modal d-block">' + $KeyboardLayout + '</div>');
262) 					var $VirtualKeyboard = $parent.find('.numberControlVirtualNumPad');
263) 					var $VirtualKeyboardInput = $VirtualKeyboard.find('.numberControlVirtualNumPadINPUT');
264) 
265) 					// Bind the virtual Keyboard action.
266) 					$VirtualKeyboard.find('.numberControlVirtualNumPad').on(options.bindButtonEvents, function(event){						

267) 						event.preventDefault();
268) 

269) 						if (options.debug) console.log('numbercontrl: numberControlVirtualNumPad: Click', event, $base.val(), $VirtualKeyboardInput.val().toString(), $(this).attr('data-function'));
270) 
271) 						var thisFunction = $(this).attr('data-function');
272) 
273) 						if (options.onBeforeVirtualKeyboardButton !== undefined)
274) 							options.onBeforeVirtualKeyboardButton(this, event, thisFunction);
275) 
276) 						switch (thisFunction)
277) 						{
278) 							case 'DELETE':
279) 								$VirtualKeyboardInput.val($VirtualKeyboardInput.val().toString().slice(0, -1));

280) 								break;

281) 							
282) 							case 'CLEAR':

283) 								$VirtualKeyboardInput.val('');
284) 								break;

285) 							
286) 							case 'DONE':
287) 								if ($VirtualKeyboardInput.val() > $maxValue)
288) 									setNewValue($base, $maxValue);
289) 								else if ($VirtualKeyboardInput.val() < $minValue)
290) 									setNewValue($base, $minValue);
291) 								else
292) 									setNewValue($base, $VirtualKeyboardInput.val());

293) 								
294) 								$VirtualKeyboard.remove();
295) 								break;
296) 

297) 							case 'CANCEL':
298) 								$VirtualKeyboard.remove();

299) 								break;

300) 							
301) 							case 'UP':
302) 								if ($VirtualKeyboardInput.val() < $maxValue)
303) 									setNewValue($VirtualKeyboardInput, parseFloat($VirtualKeyboardInput.val()) + parseFloat($step));

304) 								break;

305) 							
306) 							case 'DOWN':
307) 								if ($VirtualKeyboardInput.val() > $minValue)
308) 									setNewValue($VirtualKeyboardInput, parseFloat($VirtualKeyboardInput.val()) - parseFloat($step));

309) 								break;

310) 
311) 							case 'SEP':
312) 								if ($VirtualKeyboardInput.val().toString().indexOf(options.separator) === -1)
313) 									$VirtualKeyboardInput.val($VirtualKeyboardInput.val().toString() + options.separator);

314) 								break;

315) 
316) 							case 'INVERSE':
317) 								setNewValue($VirtualKeyboardInput, parseFloat($VirtualKeyboardInput.val()) * -1);

318) 								break;

319) 														
320) 							// Default to assume its numbers.
321) 							default:
322) 								if ($(this).attr('data-custom-function'))
323) 									$(this).attr('data-custom-function')(this, event, thisFunction);
324) 								else
325) 									setNewValue($VirtualKeyboardInput, $VirtualKeyboardInput.val().toString() + $(this).attr('data-function'));
326) 						}
327) 
328) 						if (options.onAfterVirtualKeyboardButton !== undefined)
329) 							options.onAfterVirtualKeyboardButton(this, event, thisFunction);
330) 					});
331) 
332) 					if (options.onAfterVirtualKeyboardOpen !== undefined)
333) 						options.onAfterVirtualKeyboardOpen(this);
334) 				});
335) 
336) 				if (options.onAfterVirtualKeyboardInitalized !== undefined)
337) 					options.onAfterVirtualKeyboardInitalized(this);
338) 			}
339) 
340) 			if (options.onAfterInitialized !== undefined)
341) 				options.onAfterInitialized(this);
342) 			if (options.debug) console.log($base.parent());
343) 		});