# Usage
# Browser
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="utf-8">
<link href="./index.min.css" rel="stylesheet">
<style>
.number-picker {
min-width: 3em;
}
</style>
</head>
<body>
<p>
<input type="number">
</p>
<script src="./index.min.js"></script>
<script>
const picker = new NumberPicker(document.querySelector('input'));
</script>
</body>
</html>
# Node.js
Functions and methods in this application are mostly native JavaScript and are intended for use by the browser. Node.js doesn’t know about the DOM, so this kind of practice will probably be used more often to build new browser packages than to be used directly in the Node.js server.
# CommonJS
const NumberPicker = require('@taufik-nurrohman/number-picker').default;
const picker = new NumberPicker(document.querySelector('input'));
# ECMAScript
import NumberPicker from '@taufik-nurrohman/number-picker';
const picker = new NumberPicker(document.querySelector('input'));
# Tests
- No Idea?
- Attach, Detach
- Disabled State
- Focus Automatically
- Read-Only State
- Required State
- Step
- Strict
# Constructors
# NumberPicker(self, state)
const picker = new NumberPicker(self, strict = false);
const picker = new NumberPicker(self, state = {
max: Infinity,
min: -Infinity,
step: 1,
strict: false,
time: {
error: 1000,
repeat: [500, 50]
},
with: []
});
# Parameters
# self
The <input>
element.
# strict
If its value is set to true
, any invalid input will be rejected immediately. Increasing the number will automatically stop at the maximum number, and decreasing the number will automatically stop at the minimum number.
# state
The configuration data.
# state.max
Determines the maximum valid number value, with the default value follows what the max
attribute value of the <input>
element. If no max
attribute exists or if its value is not a number, it will default to Infinity
.
const picker = new NumberPicker(document.querySelector('input'), {
max: 25
});
# state.min
Determines the minimum valid number value, with the default value follows what the min
attribute value of the <input>
element. If no min
attribute exists or if its value is not a number, it will default to -Infinity
.
const picker = new NumberPicker(document.querySelector('input'), {
min: 5
});
# state.step
Determines how much the number will increase or decrease with each step, with the default value follows what the step
attribute value of the <input>
element. If no step
attribute exists or if its value is not a number, it will default to 1
.
const picker = new NumberPicker(document.querySelector('input'), {
step: 0.25
});
# state.strict
If its value is set to true
, any invalid input will be rejected immediately. Increasing the number will automatically stop at the maximum number, and decreasing the number will automatically stop at the minimum number.
const picker = new NumberPicker(document.querySelector('input'), {
strict: true
});
# state.time
Stores configuration data related to time in milliseconds.
# state.time.error
Determines how long the invalid state is presented to the user. If the value is less than or equal to 0
, the built-in invalid state will be disabled.
const picker = new NumberPicker(document.querySelector('input'), {
time: {
error: 999999999 // As long as possible
}
});
const picker = new NumberPicker(document.querySelector('input'), {
time: {
error: 0 // Disable the built-in invalid state
}
});
# state.time.repeat
It contains an array that determines how long the step button must be held down before the increase/decrease action starts to repeat.
const picker = new NumberPicker(document.querySelector('input'), {
time: {
repeat: [
// Start the repeat by holding down the step button for one second
1000,
// Repeat every 1 second
1000
]
}
});
# state.with
List of callable functions or objects containing an attach()
method to be invoked each time the application is initialized. A very simple “plugin” system.
# Methods
# Instance Methods
Instance methods are methods available through the results of an NumberPicker
construct.
# picker.attach(self, state)
Re-initializes the application and its extensions after it has been detached.
picker.attach();
# picker.blur()
Blurs from the number picker’s input.
picker.blur();
# picker.detach()
Removes the application view and executes the detach()
method of the extensions, if they are present.
picker.detach();
# picker.fire(event, data, that)
Fires an event.
picker.fire('change', []);
# picker.focus(mode = true)
Focuses to the number picker’s input.
picker.focus(); // Focus and select the text
picker.focus(-1); // Focus and put the caret to the start of the text
picker.focus(+1); // Focus and put the caret to the end of the text
# picker.off(event, task)
Removes an event.
picker.off('change'); // Remove all events from the `change` event container
picker.off('change', onChange); // Remove `onChange` event from the `change` event container
# picker.on(event, task)
Adds a new event.
picker.on('change', function () {
console.log(this.value);
});
function onChange() {
console.log(this.value);
}
picker.on('change', onChange);
# picker.reset(focus, mode = true)
Resets the number picker’s value to its initial value.
picker.reset(); // Reset the number picker’s value
picker.reset(true); // Reset the number picker’s value and focus to the number picker’s input
# Static Methods
Static methods are methods available directly on the NumberPicker
object.
# NumberPicker.from(self, state)
Creates a new NumberPicker
instance.
const picker = NumberPicker.from(document.querySelector('input'));
# NumberPicker.of(self)
Gets NumberPicker
instance of an element.
document.querySelectorAll('input').forEach(self => {
const picker = NumberPicker.of(self);
});
# Properties
# Instance Properties
Instance properties are properties available through the results of an NumberPicker
construct.
# picker.active
Gets or sets the active state of the number picker. By setting the value to false
or true
, the disabled state of the source element will also be set automatically.
picker.active = false; // // Make the number picker “disabled”
picker.active = true; // // Make the number picker “enabled”
# picker.fix
Gets or sets the read-only state of the number picker. By setting the value to false
or true
, the read-only state of the source element will also be set automatically.
picker.fix = true; // Make the number picker “read-only”
# picker.hooks
Returns the events data.
console.log(picker.hooks);
# picker.mask
Returns the number picker’s mask.
picker.mask.classList.add(picker.state.n + '--dark');
# picker.max
Proxy that passes to the picker.state.max
property, with additional actions that are executed while the value is being set.
console.log(picker.max); // Returns the `picker.state.max` value
picker.max = 5; // Set the maximum valid number to `5`
# picker.min
Proxy that passes to the picker.state.min
property, with additional actions that are executed while the value is being set.
console.log(picker.min); // Returns the `picker.state.min` value
picker.min = 5; // Set the minimum valid number to `5`
# picker.self
Returns the <input>
element.
console.log(picker.self.getAttribute('name'));
# picker.state
Returns the application states if any.
console.log(picker.state);
# picker.text
Gets or sets the current text of the number picker’s input.
console.log(picker.text);
picker.text = '5';
# picker.value
Proxy that passes to the picker.self.value
property, with additional actions that are executed while the value is being set.
console.log(picker.value);
picker.on('change', function () {
console.log(this.value);
});
picker.value = '5';
# picker.vital
Gets or sets the required state of the number picker. By setting the value to false
or true
, the required state of the source element will also be set automatically.
picker.vital = true; // Make the number picker “required”
# Static Properties
Static properties are properties available directly on the NumberPicker
object.
# NumberPicker._
Alias for NumberPicker.prototype
.
NumberPicker._.clear = function () {
return (this.value = ""), this;
};
const picker = new NumberPicker(document.querySelector('input'));
picker.clear(); // Clear value
# NumberPicker.state
Returns the default values of picker.state
.
const picker = new NumberPicker(document.querySelector('input'), {
foo: 'bar'
});
console.log([NumberPicker.state, picker.state]);
# NumberPicker.version
Returns the application version.
# Extensions
# Anatomy of an Extension
Extension as a function:
function Extension(self, state = {}) {
this.test = 1;
return this;
}
Object.defineProperty(Extension, 'name', {
value: 'Extension'
});
Extension as an object:
const Extension = {
attach: function (self, state = {}) {
this.test = 1;
return this;
},
detach: function (self, state = {}) {
delete this.test;
return this;
},
name: 'Extension'
};
# Usage of an Extension
As a core extension:
NumberPicker.state.with.push(Extension);
As an optional extension:
const picker = new NumberPicker(document.querySelector('input'), {
with: [Extension]
});
# List of Extensions
# License
This project is licensed under the terms of the MIT license. If this project has saved you time, please donate. Thank you! ❤️