/*! * JavaScript Custom Forms : Number Module * * Copyright 2014-2015 PSD2HTML - http://psd2html.com/jcf * Released under the MIT license (LICENSE.txt) * * Version: 1.2.1 */ (function(jcf) { jcf.addModule(function($) { 'use strict'; return { name: 'Number', selector: 'input[type="number"]', options: { realElementClass: 'jcf-real-element', fakeStructure: '', btnIncSelector: '.jcf-btn-inc', btnDecSelector: '.jcf-btn-dec', pressInterval: 150 }, matchElement: function(element) { return element.is(this.selector); }, init: function() { this.initStructure(); this.attachEvents(); this.refresh(); }, initStructure: function() { this.page = $('html'); this.realElement = $(this.options.element).addClass(this.options.realElementClass); this.fakeElement = $(this.options.fakeStructure).insertBefore(this.realElement).prepend(this.realElement); this.btnDec = this.fakeElement.find(this.options.btnDecSelector); this.btnInc = this.fakeElement.find(this.options.btnIncSelector); // set initial values this.initialValue = parseFloat(this.realElement.val()) || 0; this.minValue = parseFloat(this.realElement.attr('min')); this.maxValue = parseFloat(this.realElement.attr('max')); this.stepValue = parseFloat(this.realElement.attr('step')) || 1; // check attribute values this.minValue = isNaN(this.minValue) ? -Infinity : this.minValue; this.maxValue = isNaN(this.maxValue) ? Infinity : this.maxValue; // handle range if (isFinite(this.maxValue)) { this.maxValue -= (this.maxValue - this.minValue) % this.stepValue; } }, attachEvents: function() { this.realElement.on({ focus: this.onFocus }); this.btnDec.add(this.btnInc).on('jcf-pointerdown', this.onBtnPress); }, onBtnPress: function(e) { var self = this, increment; if (!this.realElement.is(':disabled')) { increment = this.btnInc.is(e.currentTarget); self.step(increment); clearInterval(this.stepTimer); this.stepTimer = setInterval(function() { self.step(increment); }, this.options.pressInterval); this.page.on('jcf-pointerup', this.onBtnRelease); } }, onBtnRelease: function() { clearInterval(this.stepTimer); this.page.off('jcf-pointerup', this.onBtnRelease); }, onFocus: function() { this.fakeElement.addClass(this.options.focusClass); //rameez add this.fakeElement.addClass('number'); this.realElement.on({ blur: this.onBlur, keydown: this.onKeyPress }); }, onBlur: function() { this.fakeElement.removeClass(this.options.focusClass); // var numberValue = $('.jcf-number').val(); // alert(numberValue); // if ( numberValue.is(":empty") ) { // this.fakeElement.removeClass('number'); // } /*if ($(this).val()=='') { this.fakeElement.removeClass('number'); }*/ //console.log(this.find('.jcf-real-element').html()); if( this.empty() ) { this.fakeElement.removeClass('number'); } this.realElement.off({ blur: this.onBlur, keydown: this.onKeyPress }); }, onKeyPress: function(e) { if (e.which === 38 || e.which === 40) { e.preventDefault(); this.step(e.which === 38); } }, step: function(increment) { var originalValue = parseFloat(this.realElement.val()), newValue = originalValue || 0, addValue = this.stepValue * (increment ? 1 : -1), edgeNumber = isFinite(this.minValue) ? this.minValue : this.initialValue - Math.abs(newValue * this.stepValue), diff = Math.abs(edgeNumber - newValue) % this.stepValue; // handle step diff if (diff) { if (increment) { newValue += addValue - diff; } else { newValue -= diff; } } else { newValue += addValue; } // handle min/max limits if (newValue < this.minValue) { newValue = this.minValue; } else if (newValue > this.maxValue) { newValue = this.maxValue; } // update value in real input if its changed if (newValue !== originalValue) { this.realElement.val(newValue).trigger('change'); this.refresh(); } }, refresh: function() { var isDisabled = this.realElement.is(':disabled'), currentValue = parseFloat(this.realElement.val()); // handle disabled state this.fakeElement.toggleClass(this.options.disabledClass, isDisabled); // refresh button classes this.btnDec.toggleClass(this.options.disabledClass, currentValue === this.minValue); this.btnInc.toggleClass(this.options.disabledClass, currentValue === this.maxValue); }, destroy: function() { // restore original structure this.realElement.removeClass(this.options.realElementClass).insertBefore(this.fakeElement); this.fakeElement.remove(); clearInterval(this.stepTimer); // remove event handlers this.page.off('jcf-pointerup', this.onBtnRelease); this.realElement.off({ keydown: this.onKeyPress, focus: this.onFocus, blur: this.onBlur }); }, empty: function() { var realValue = parseFloat( this.realElement.val() ); if(isNaN(realValue)) return true; else return false; } }; }); }(jcf));