aristath / kirki

wp.customize.controlConstructor['kirki-number'] = wp.customize.kirkiDynamicControl.extend({

	initKirkiControl: function() {

		var control = this,

		    value   = control.setting._value,

		    html    = '',

		    input,

		    up,

		    down;

		// Make sure we use default values if none are define for some arguments.

		control.params.choices = _.defaults( control.params.choices, {

			min: 0,

			max: 100,

			step: 1

		} );

		// Make sure we have a valid value.

		if ( isNaN( value ) || '' === value ) {

			value = ( 0 > control.params.choices.min && 0 < control.params.choices.max ) ? 0 : control.params.choices.min;

		}

		value = parseFloat( value );

		// If step is 'any', set to 0.001.

		control.params.choices.step = ( 'any' === control.params.choices.step ) ? 0.001 : control.params.choices.step;

		// Make sure choices are properly formtted as numbers.

		control.params.choices.min  = parseFloat( control.params.choices.min );

		control.params.choices.max  = parseFloat( control.params.choices.max );

		control.params.choices.step = parseFloat( control.params.choices.step );

		// Build the HTML for the control.

		html += '<label>';

		if ( control.params.label ) {

			html += '<span class="customize-control-title">' + control.params.label + '</span>';

		}

		if ( control.params.description ) {

			html += '<span class="description customize-control-description">' + control.params.description + '</span>';

		}

		html += '<div class="customize-control-content">';

		html += '<input ' + control.params.inputAttrs + ' type="text" ' + control.params.link + ' value="' + value + '" />';

		html += '<div class="quantity button minus">-</div>';

		html += '<div class="quantity button plus">+</div>';

		html += '</div>';

		html += '</label>';

		control.container.html( html );

		input = control.container.find( 'input' );

		up    = control.container.find( '.plus' );

		down  = control.container.find( '.minus' );

		up.click( function() {

			var oldVal = parseFloat( input.val() ),

			    newVal;

			newVal = ( oldVal >= control.params.choices.max ) ? oldVal : oldVal + control.params.choices.step;

			input.val( newVal );

			input.trigger( 'change' );

		} );

		down.click( function() {

			var oldVal = parseFloat( input.val() ),

			    newVal;

			newVal = ( oldVal <= control.params.choices.min ) ? oldVal : oldVal - control.params.choices.step;

			input.val( newVal );

			input.trigger( 'change' );

		} );

		this.container.on( 'change keyup paste click', 'input', function() {

			control.setting.set( jQuery( this ).val() );

		});

	}

});