incrementer

Use case

This plugin extends an html input field which serves a number to be given. Handling validation and easy incrementing or decrementing of given value is provided.

Content

[TOC]

Installation

Classical dom injection

You can simply download the compiled version as zip file here and inject it after needed dependencies:

#!HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="http://torben.website/clientNode/data/distributionBundle/index.compiled.js"></script>
<!--Inject downloaded file:-->
<script src="index.compiled.js"></script>
<!--Or integrate via cdn:
<script src="http://torben.website/incrementer/data/distributionBundle/index.compiled.js"></script>
-->

The compiled bundle supports AMD, commonjs, commonjs2 and variable injection into given context (UMD) as export format: You can use a module bundler if you want.

Package managed and module bundled

If you are using npm as package manager you can simply add this tool to your package.json as dependency:

#!JSON

...
"dependencies": {
    ...
    "incrementer": "latest",
    ...
},
...

After updating your packages you can simply depend on this script and let a module bundler do the hard stuff or access it via an exported variable name in given context.

#!JavaScript

...
import Incrementer from 'incrementer'
class SpecialIncrementer extends Incrementer...
// or
import {$} from 'incrementer'
$('input').Incrementer()
class SpecialIncrementer extends $.Incrementer.class ...
// or
Incrementer = require('incrementer').default
value instanceof Incrementer
// or
$ = require('incrementer').$
$('input').Incrementer()
...

Usage

1. Load needed dependencies

#!JavaScript

const dependenciesLoadPromise = $documentationWebsite.getScript(
    'https://code.jquery.com/jquery-3.1.1.min.js'
).then(() => $.getScript(
    'http://torben.website/clientNode/data/distributionBundle/' +
    'index.compiled.js'
)).then(() => $.getScript(
    'http://torben.website/incrementer/data/distributionBundle/' +
    'index.compiled.js'))

2. Set your styles

#!CSS

body form div.incrementer > input.form-control {
    width: 61px;
    float: left;
}
body form div.incrementer > a.plus,
body form div.incrementer > a.minus {
    font-size: 24px;
    font-weight: bold;
    margin: 10px;
}

3. Initialize you incrementer (when everything is loaded)

#!JavaScript

dependenciesLoadPromise.then(() => $(
    'body form.first input'
).Incrementer())

4. Define you number input field

#!HTML

<form class="first" action="#">
    <input name="test" value="4" class="form-control" />
</form>

Example with more than one input

#!HTML

<script>
    dependenciesLoadPromise.then(() => {
        $('body form.second input.first').Incrementer({
            step: 2, minimum: 10, maximum: 20, logging: true
        })
        $('body form.second input.second').Incrementer({
            step: 3, minimum: 5, maximum: 30, logging: true
        })
    })
</script>
<form class="second" action="#">
    <input name="test" value="10" class="form-control first" />
    <input name="test" value="12" class="form-control second" />
</form>

Advanced example with all available (default) options

#!HTML

<script>
    dependenciesLoadPromise.then(() => $(
        'body form.third input'
    ).Incrementer({
        onInvalidNumber: $.noop(),
        onTypeInvalidLetter: $.noop(),
        step: 1,
        minimum: 0,
        maximum: 9999,
        domNode: {
            plus: '> a.plus',
            minus: '> a.minus'
        },
        neededMarkup: `
            <a href="#" class="plus">+</a>
            <a href="#" class="minus">-</a>
        `
    }))
</script>
<form class="third" action="#">
    <input name="test" value="50" class="form-control" />
</form>