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' || (typeof methodOrProps === 'object' && methodOrProps.destroy !== undefined)) {

31) 			this.each(function () {
32) 				$(this).parent().children().each(function (index, value) {
33) 					var thisSelector = $(value);
34) 

35) 					if (typeof options === 'object' && options.onBeforeDestoryInitialize !== undefined)

36) 						options.onBeforeDestoryInitialize(this);
37) 
38) 					if (!thisSelector.is('input'))
39) 						thisSelector.remove();
40) 

41) 					if (typeof options === 'object' && options.onAfterDestoryInitialize !== undefined)

42) 						options.onAfterDestoryInitialize(this);
43) 				});
44) 
45) 				$(this).parent().removeClass().addClass('numberControlDestoryed');

46) 			});
47) 

48) 			return this;
49) 		}

50) 
51) 		// Allow customizing the options.

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

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

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

61) 			bindButtonEvents: 'click touchend',

62) 			keyboardLanguage: {

63) 				'UP': '<span class="oi oi-chevron-top" />',
64) 				'DOWN': '<span class="oi oi-chevron-bottom" />',
65) 				'INVERSE': '<span class="oi oi-transfer" />',
66) 				'SEP': '<span class="oi oi-media-record" />',

67) 			},
68) 			keyboardControl: {
69) 			},

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

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

75) 

76) 		// Parse a float with 0s at the end.
77) 		// Reference: https://stackoverflow.com/questions/4868556/how-do-i-stop-parsefloat-from-stripping-zeroes-to-right-of-decimal

78) 		function customParseFloat(number) {

79) 			if (isNaN(parseFloat(number)) !== false)
80) 				return number;
81) 

82) 			let str = String(number),
83) 				arr = str.split(options.separator);

84) 

85) 			return parseFloat(str).toFixed(arr.length === 2 ? arr[1].length : 0);

86) 		}
87) 

88) 		function setNewValue(container, value, event) {

89) 			if (options.onBeforeSetNewvalue !== undefined)
90) 				options.onBeforeSetNewvalue(this, event, container, value);
91) 

92) 			// The Min value was hit with nothing in the container, which could most likely be a blank string that was converted to a int.
93) 			if (Number.MIN_VALUE == parseFloat(value) && $(container).val() == '')
94) 				return false;
95) 

96) 			// No Nans.
97) 			if (options.type !== 'text' && isNaN(value))
98) 				value = 0;
99) 
100) 			if (options.type === 'text')
101) 				$(container).val(value);
102) 			else if (options.type === 'number')

103) 				$(container).val(parseInt(value));

104) 			// Handle floats/decmials with 0s at the end.
105) 			else if ((options.disallowTrailingZero === undefined || options.disallowTrailingZero === false) && value[value.length - 1] == 0)
106) 				$(container).val(customParseFloat(value));

107) 			else
108) 				$(container).val(parseFloat(value));

109) 

110) 			// By default, we should trigger a change to the container.
111) 			if (options.ignoreChangeTrigger === undefined || options.ignoreChangeTrigger === false)
112) 				$(container).trigger('change');
113) 

114) 			if (options.onAfterSetNewvalue !== undefined)
115) 				options.onAfterSetNewvalue(this, event, container, value);

116) 		}
117) 

118) 		// https://stackoverflow.com/questions/9553354/how-do-i-get-the-decimal-places-of-a-floating-point-number-in-javascript

119) 		function precision(a) {

120) 			if (!isFinite(a))
121) 				return 0;
122) 
123) 			var e = 1, p = 0;

124) 			while (Math.round(a * e) / e !== a) {

125) 				e *= 10;
126) 				p++;
127) 			}
128) 
129) 			return parseInt(p);
130) 		}
131) 

132) 		function FindPercision(v, p) {

133) 			if (!isFinite(v))
134) 				return 0;
135) 			return parseInt(v).toString().length + p;
136) 		}
137) 

138) 		function findMinMaxValue() {

139) 			var testValue;

140) 			for (var i = 0; i < arguments.length; i++) {

141) 				testValue = arguments[i];

142) 				if (typeof testValue !== 'undefined' && !isNaN(testValue)) {

143) 					if (options.type === 'number' && parseInt(testValue) !== null)
144) 						return parseInt(testValue);
145) 					else if (parseFloat(testValue) !== null)
146) 						return parseFloat(testValue);
147) 					continue;
148) 				}
149) 			}
150) 			return 0;
151) 		}
152) 
153) 		// Bind to each input selector

154) 		this.each(function () {

155) 			if (options.onBeforeInitialized !== undefined)
156) 				options.onBeforeInitialized(this);
157) 

158) 			var $base = $(this);

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

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

163) 			var $minValue = findMinMaxValue(options.min, $base.attr('min'), Number.MIN_SAFE_INTEGER);
164) 			var $maxValue = findMinMaxValue(options.max, $base.attr('max'), Number.MAX_SAFE_INTEGER);

165) 
166) 			// Build the parent up. 

167) 			if (options.inputParent != '' && (!$($base).parent().is('div') || !$($base).parent().hasClass('numberControlDestoryed'))) {

168) 				$base.wrap('<' + options.inputParent + '></' + options.inputParent + '>');

169) 			}

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

171) 			$parent.addClass(options.inputParentCss);

172) 
173) 			// Set the base.
174) 			$base.attr('type', options.type);
175) 			$base.addClass(options.inputCss);
176) 
177) 			// Wrap the buttons around.			
178) 			$base.before(options.prependHtml);
179) 			$base.after(options.appendHtml);

180) 

181) 			// Add the style to the body to cleanup input controls for number.
182) 			if (options.type == 'number' && !options.DisableNumberSpinStyleFix)
183) 				$('body').append('<style>' +

184) 					'.numberControlInput::-webkit-outer-spin-button,.numberControlInput::-webkit-inner-spin-button {' +
185) 					'-webkit-appearance: none;' +
186) 					'}</style>'

187) 				);
188) 
189) 			// The decrease event.
190) 			var $decreaseButton = $parent.find('.btn-decrease');
191) 			$decreaseButton.on(options.bindButtonEvents, function (event) {

192) 				event.preventDefault();

193) 				event.stopPropagation();

194) 

195) 				if (options.onBeforeClickDecrease !== undefined)
196) 					options.onBeforeClickDecrease(this, event);
197) 				if ($base.val() > $minValue)

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

199) 				if (options.onAfterClickDecrease !== undefined)
200) 					options.onAfterClickDecrease(this, event);
201) 				if (options.debug)

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

203) 			});
204) 
205) 			// The increase event.

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

208) 				event.preventDefault();

209) 				event.stopPropagation();

210) 

211) 				if (options.onBeforeClickIncrease !== undefined)
212) 					options.onBeforeClickIncrease(this, event);
213) 				if ($base.val() < $maxValue)

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

215) 				if (options.onAfterClickIncrease !== undefined)
216) 					options.onAfterClickIncrease(this, event);
217) 				if (options.debug)

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

219) 			});
220) 
221) 			// The Popup Numberpad

222) 			if (!options.disableVirtualKeyboard) {

223) 				var $KeyboardLayout;
224) 

225) 				if (options.onBeforeVirtualKeyboardInitalized !== undefined)
226) 					options.onBeforeVirtualKeyboardInitalized(this);
227) 
228) 				$base.on(options.bindButtonEvents, function (event) {

229) 					event.preventDefault();

230) 					event.stopPropagation();
231) 
232) 					if (options.onBeforeVirtualKeyboardOpen !== undefined)
233) 						options.onBeforeVirtualKeyboardOpen(this);
234) 
235) 					var $location = options.virtualKeyboardAttachSelector ? $(options.virtualKeyboardAttachSelector) : $base;
236) 
237) 					if (options.keyboardLayout)

238) 						$KeyboardLayout = options.keyboardLayout;

239) 					else

240) 						$KeyboardLayout =

241) 							'<div class="modal-dialog modal-dialog-centered m-auto" style="width: 250px;">' +

242) 							'<div class="modal-content">' +
243) 							'<table class="bg-body">' +
244) 							'<tr>' +
245) 							'<td colspan="4">{INPUTBOX}</td>' +
246) 							'</tr><tr>' +
247) 							'<td>{7}</td>' +
248) 							'<td>{8}</td>' +
249) 							'<td>{9}</td>' +
250) 							'<td>{DELETE}</td>' +
251) 							'</tr><tr>' +
252) 							'<td>{4}</td>' +
253) 							'<td>{5}</td>' +
254) 							'<td>{6}</td>' +
255) 							'<td>{CLEAR}</td>' +
256) 							'</tr><tr>' +
257) 							'<td>{1}</td>' +
258) 							'<td>{2}</td>' +
259) 							'<td>{3}</td>' +
260) 							'<td>{DONE}</td>' +
261) 							'</tr><tr>' +
262) 							'<td>{UP}</td>' +
263) 							'<td>{0}</td>' +
264) 							'<td>{DOWN}</td>' +
265) 							'<td>{CANCEL}</td>' +
266) 							'</tr>' +
267) 							'</table>' +
268) 							'</div>' +

269) 							'</div>'

270) 							;

271) 
272) 					// Fill out the input.

273) 					if (typeof options.keyboardControl['INPUTBOX'] === 'undefined')

274) 						options.keyboardControl['INPUTBOX'] = '<input class="numberControlVirtualNumPad numberControlVirtualNumPadINPUT form-control w-100" type="text" readonly value="{VAL}"/>';

275) 					$KeyboardLayout = $KeyboardLayout.replace('{INPUTBOX}', options.keyboardControl['INPUTBOX'].replace('{VAL}', $base.val()).toString());

276) 
277) 					// Fill out all buttons.

278) 					$.each(options.buttons, function (i, v) {

279) 						var LanguageBox = options.keyboardLanguage[v] ? options.keyboardLanguage[v] : v;
280) 
281) 						if (typeof options.keyboardControl[v] === 'undefined')
282) 							options.keyboardControl[v] = '<button class="numberControlVirtualNumPad numberControlVirtualNumPad' + v + ' btn btn-outline-secondary w-100" data-function="' + v + '">{' + v + '_LANG}</button>';
283) 						$KeyboardLayout = $KeyboardLayout.replace('{' + v + '}', options.keyboardControl[v].replace('{' + v + '_LANG}', LanguageBox));
284) 					});
285) 
286) 					// Attach the keyboard to the container.
287) 					$location.after('<div class="numberControlVirtualNumPad modal d-block">' + $KeyboardLayout + '</div>');
288) 					var $VirtualKeyboard = $parent.find('.numberControlVirtualNumPad');
289) 					var $VirtualKeyboardInput = $VirtualKeyboard.find('.numberControlVirtualNumPadINPUT');
290) 
291) 					// Bind the virtual Keyboard action.

292) 					$VirtualKeyboard.find('.numberControlVirtualNumPad').on(options.bindButtonEvents, function (event) {

293) 						event.preventDefault();

294) 						event.stopPropagation();

295) 

296) 						if (options.debug) console.log('numbercontrl: numberControlVirtualNumPad: Click', event, $base.val(), $VirtualKeyboardInput.val().toString(), $(this).attr('data-function'));
297) 
298) 						var thisFunction = $(this).attr('data-function');
299) 
300) 						if (options.onBeforeVirtualKeyboardButton !== undefined)
301) 							options.onBeforeVirtualKeyboardButton(this, event, thisFunction);
302) 

303) 						switch (thisFunction) {

304) 							case 'DELETE':
305) 								$VirtualKeyboardInput.val($VirtualKeyboardInput.val().toString().slice(0, -1));

306) 								break;

307) 

308) 							case 'CLEAR':

309) 								$VirtualKeyboardInput.val('');
310) 								break;

311) 

312) 							case 'DONE':
313) 								if ($VirtualKeyboardInput.val() > $maxValue)

314) 									setNewValue($base, $maxValue, event);

315) 								else if ($VirtualKeyboardInput.val() < $minValue)

316) 									setNewValue($base, $minValue, event);

317) 								else

318) 									setNewValue($base, $VirtualKeyboardInput.val(), event);
319) 

320) 								$VirtualKeyboard.remove();
321) 								break;
322) 

323) 							case 'CANCEL':
324) 								$VirtualKeyboard.remove();

325) 								break;

326) 

327) 							case 'UP':
328) 								if ($VirtualKeyboardInput.val() < $maxValue)

329) 									setNewValue($VirtualKeyboardInput, parseFloat($VirtualKeyboardInput.val()) + parseFloat($step), event);

330) 								break;

331) 

332) 							case 'DOWN':
333) 								if ($VirtualKeyboardInput.val() > $minValue)

334) 									setNewValue($VirtualKeyboardInput, parseFloat($VirtualKeyboardInput.val()) - parseFloat($step), event);

335) 								break;

336) 
337) 							case 'SEP':
338) 								if ($VirtualKeyboardInput.val().toString().indexOf(options.separator) === -1)
339) 									$VirtualKeyboardInput.val($VirtualKeyboardInput.val().toString() + options.separator);

340) 								break;

341) 
342) 							case 'INVERSE':

343) 								setNewValue($VirtualKeyboardInput, parseFloat($VirtualKeyboardInput.val()) * -1, event);

344) 								break;

345) 

346) 							// Default to assume its numbers.
347) 							default:
348) 								if ($(this).attr('data-custom-function'))
349) 									$(this).attr('data-custom-function')(this, event, thisFunction);

350) 								else if ($VirtualKeyboardInput.val() == '0' || $VirtualKeyboardInput.val() == '0.000')

351) 									setNewValue($VirtualKeyboardInput, $(this).attr('data-function'), event);

352) 								else

353) 									setNewValue($VirtualKeyboardInput, $VirtualKeyboardInput.val().toString() + $(this).attr('data-function'), event);

354) 						}
355) 
356) 						if (options.onAfterVirtualKeyboardButton !== undefined)
357) 							options.onAfterVirtualKeyboardButton(this, event, thisFunction);
358) 					});
359) 
360) 					if (options.onAfterVirtualKeyboardOpen !== undefined)
361) 						options.onAfterVirtualKeyboardOpen(this);
362) 				});
363) 
364) 				if (options.onAfterVirtualKeyboardInitalized !== undefined)
365) 					options.onAfterVirtualKeyboardInitalized(this);
366) 			}
367) 
368) 			if (options.onAfterInitialized !== undefined)
369) 				options.onAfterInitialized(this);
370) 			if (options.debug) console.log($base.parent());
371) 		});