<div class="my-3"> Number field<br>
	<div class="m-form-number">
		<input type="number" min="0" max="9" step="1" name="number1" id="frm-pc-form-number1" class="m-form-number__input a-form-input jq_number_field">
	</div>
</div>

<div class="my-3"> Number field - inline spinners<br>
	<div class="m-form-number m-form-number--inline">
		<input type="number" min="0" max="9" step="1" name="number2" id="frm-pc-form-number2" class="m-form-number__input a-form-input jq_number_field">
	</div>
</div>

@import "atoms/form-input/index";

.m-form-number {

    $self: &;

    display: inline-block;
    margin-bottom: space(1);
    margin-top: space(1);
    position: relative;

    &:first-child {

        margin-top: 0;

    }

    &:last-child {

        margin-bottom: 0;

    }

    &__spin {

        cursor: pointer;
        height: 50%;
        line-height: 1;
        margin: 0;
        overflow: hidden;
        padding: 0;
        position: absolute;
        right: 0;
        text-align: center;
        width: 20px;
        z-index: 0;

        &[data-dir="inner"] {

            top: 0;

            &:after {

                content: '+';

            }

        }

        &[data-dir="outer"] {

            bottom: 0;

            &:after {

                content: '-';

            }

        }

        &:before {

            content: '';
            display: inline-block;
            height: 100%;
            vertical-align: middle;
            width: 0;

        }

        .no-js & {

            display: none;

        }

    }

    & #{$self}__input {

        margin: 0;
        position: relative;
        text-align: center;
        width: 80px;
        z-index: 1;

        .js & {

            appearance: textfield;
            margin: 0 20px;

            // sass-lint:disable no-vendor-prefixes
            &::-webkit-inner-spin-button,
            &::-webkit-outer-spin-button {

                -webkit-appearance: none;
                margin: 0;

            }
            // sass-lint:enable no-vendor-prefixes

        }

    }

    &:not(#{$self}--inline) {

        #{$self}__spin {

            &[data-dir="outer"] {

                border-top: 0;

            }

        }

        #{$self}__input {

            margin-left: 0;

        }

    }

    &--inline {

        #{$self}__spin {

            bottom: auto;
            height: 100%;
            top: 0;

            &[data-dir="outer"] {

                left: 0;
                right: auto;

            }

        }

        #{$self}__input {

            width: 60px;

        }

    }

}

import $ from 'jquery';

export default class NumberField {
	constructor() {

		$('.jq_number_field').each((i, el) => {
			var $el = {
				input: $(el),
				spines: []
			};

			var data = {
				min: parseFloat($el.input.attr('min') || 0),
				max: parseFloat($el.input.attr('max') || $el.input.attr('maxlength')),
				step: parseFloat($el.input.attr('step') || 1)
			};

			$.each([ 'inner', 'outer' ], (index, dir) => {
				var spin = $('<span>')
							.addClass('m-form-number__spin')
							.attr('data-dir', dir);

				spin.on('click', { input: $el.input, dir: dir, data: data }, this.change);

				$el.spines.push(spin);
			});

			$el.input.before($el.spines);

			$el.input.on('change', { data: data }, this.trigger);
		});
	}

	change(event) {
		var $el = {
			input: $(event.data.input),
			spin: $(this)
		};

		var data = event.data.data;
		data.dir = event.data.dir;
		data.number = parseInt($el.input.val());

		if (isNaN(data.number)) {
			data.number = !isNaN(data.min) ? data.min : 0;
		}

		if (isNaN(data.step)) {
			data.step = 1;
		}

		if (data.dir === 'inner') {
			data.number += data.step;
		} else {
			data.number -= data.step;
		}

		if (!isNaN(data.min) && !isNaN(data.max)) {
			data.number = Math.min(data.max, Math.max(data.min, data.number));
		}

		$el.input.val(data.number).trigger('change');
	}

	trigger(event) {
		var $el = {
			input: $(this)
		};

		var data = event.data.data;

		if (!isNaN(data.min) && !isNaN(data.max)) {
			data.number = parseInt($el.input.val());

			data.number = Math.min(data.max, Math.max(data.min, data.number));

			$el.input.val(data.number);
		}
	}
}

$(() => new NumberField);