autonumeric - npm Package Compare versions

Comparing version 2.0.8 to 3.0.0-beta.3

CHANGELOG.md

 ### Change log for autoNumeric:
 
+### "3.0.0-beta.3"
++ Fix issue #399 Fully convert autoNumeric to an ES6 module
++ Fix issue #398 Finish removing all jQuery dependencies
++ Fix issue #244 \[Feature request] Remove the jQuery dependency
++ Add an entry point `src/main.js` for bundling the library.
++ Split the library into 3 files ; 
+ - `autoNumeric.js`, which contains the AutoNumeric class,
+ - `AutoNumericEnum.js` which contains the enumerations used by AutoNumeric, and
+ - `AutoNumericHelper.js` which contains the AutoNumericHelper class which provides static helper functions.
+ 
++ Extract the `allowedTagList`, `keyCode` and `keyName` into `AutoNumericEnum`.
++ Add the `isEmptyString`, `isNumberOrArabic`, `isFunction`, `isElement`, `isInputElement`, `arabicToLatinNumbers`, `triggerEvent`, `randomString`, `getElementValue`, `setElementValue`, `cloneObject`, `camelize`, `text`, `setText` and `filterOut` functions to the helper functions.
++ Move the `preparePastedText`, `runCallbacksFoundInTheSettingsObject`, `maximumVMinAndVMaxDecimalLength`, `stripAllNonNumberCharacters`, `toggleNegativeBracket`, `convertToNumericString`, `toLocale`, `modifyNegativeSignAndDecimalCharacterForRawValue`, `modifyNegativeSignAndDecimalCharacterForFormattedValue`, `checkEmpty`, `addGroupSeparators`, `truncateZeros`, `roundValue`, `truncateDecimal`, `checkIfInRangeWithOverrideOption` functions into the AutoNumeric object.
++ Improve the `character()` method to take into account the quirks of some obsolete browsers.
++ Remove the `getCurrentElement()` function since we now only need to access the `this.domElement` property.
++ Remove the `AutoNumericHolder` class and the `getAutoNumericHolder()` function since we are now using the AutoNumeric class as the 'property holder'.
++ Add multiple ways to initialize an AutoNumeric element (cf. the AutoNumeric constructor and the `_setArgumentsValues()` method).
++ Simplify the input type and tag support check.
++ Add the `serializeSpaces` option that allows the user to defines how the serialize function will managed the spaces, either by converting them to `'%20'`, or to the `'+'` string, the latter now being the default.
++ Add the `noEventListeners` option that allows the user to initialize an AutoNumeric `<input>` element without adding any AutoNumeric event listeners.
++ Add the `readOnly` option to the settings that allow the `<input>` element to be set to read-only on initialization.
++ Add a feature where all AutoNumeric-managed elements in a page share a common list.
++ Add a feature where the AutoNumeric-managed elements that initialized each other share a common list, allowing the user to perform a single action on many elements at once (via the `.global.*` functions).
++ Add a `isPristine()` method to test if an AutoNumeric-managed element `value`/`textContent` has been changed since its initialization.
++ Rename `unset` to `unformat`.
++ Rename `reSet` to `reformat`.
++ Add an `unformatLocalized()` function to unformat the element value while using the `outputFormat` setting.
++ Add a `clear()` method to empty the element value.
++ Add a `nuke()` method to remove the DOM element from the DOM tree.
++ Add a `.global.has()` method to check if the given AutoNumeric object (or DOM element) is in the local AutoNumeric element list.
++ Add a `.global.addObject()` method that adds an existing AutoNumeric object (or DOM element) to the local AutoNumeric element list.
++ Add a `.global.removeObject()` method that removes the given AutoNumeric object (or DOM element) from the local AutoNumeric element list.
++ Add a `.global.empty()` method to remove all elements from the shared list.
++ Add a `.global.elements()` method to retrieve all the AutoNumeric object that share the same local list.
++ Add a `.global.getList()` method to retrieve the local AutoNumeric element list.
++ Add one function for updating each option individually (ie. anElement.options.decimalCharacter('.')) instead of having to pass an object.
++ Add a `version()` method to output the current AutoNumeric version (for debug purpose).
++ Fix the `set()` method so that the `rawValue` is updated when the value is set to `''`.
++ Add a `setUnformatted()` method to set the value given value directly as the DOM element value, without formatting it beforehand.
++ Deprecate the `get()` method to the renamed `getNumericString()` which bares more meaning.
++ Add a `getFormatted()` method to retrieve the current formatted value of the AutoNumeric element as a string.
++ Add a `getNumber()` method that returns the element unformatted value as a real Javascript number.
++ Add a `getLocalized()` method that returns the unformatted value, but following the `outputFormat` setting.
++ Add a `unformatLocalized()` method that unformats the element value by removing the formatting and keeping only the localized unformatted value in the element.
++ Add a `selectNumber()` method that select only the numbers in the formatted element content, leaving out the currency symbol, whatever the value of the `selectNumberOnly` option.
++ Add a `selectInteger()` method that select only the integer part in the formatted element content, whatever the value of the `selectNumberOnly` option.
++ Add a `selectDecimal()` method that select only the decimal part in the formatted element content, whatever the value of `selectNumberOnly`.
++ Add a `node()` method that returns the DOM element reference of the autoNumeric-managed element.
++ Add a `parent()` method that returns the DOM element reference of the parent node of the autoNumeric-managed element.
++ Add a `detach()` method that detach the current AutoNumeric element from the shared local 'init' list.
++ Add an `attach()` method that attach the given AutoNumeric element to the shared local 'init' list.
++ Add a `formatOther()` method that format and return the given value, or set the formatted value into the given DOM element if one is passed as an argument.
++ Add an `unformatOther()` method that unformat and return the raw numeric string corresponding to the given value, or directly set the unformatted value into the given DOM element if one is passed as an argument.
++ Add an `init()` method that allows to use the current AutoNumeric element settings to initialize the DOM element given as a parameter. This effectively *link* the two AutoNumeric element by making them share the same local AutoNumeric element list.
++ Add a `form()` method that return a reference to the parent <form> element if it exists, otherwise return `null`.
++ Add a `formNumericString()` method that returns a string in standard URL-encoded notation with the form input values being unformatted.
++ Add a `formFormatted()` method that returns a string in standard URL-encoded notation with the form input values being formatted.
++ Add a `formLocalized()` method that returns a string in standard URL-encoded notation with the form input values, with localized values.
++ Add a `formArrayNumericString()` method that returns an array containing an object for each form `<input>` element.
++ Add a `formArrayFormatted()` method that returns an array containing an object for each form `<input>` element, with the value formatted.
++ Add a `formArrayLocalized()` method that returns an array containing an object for each form `<input>` element, with the value localized.
++ Add a `formJsonNumericString()` method that returns a JSON string containing an object representing the form input values.
++ Add a `formJsonFormatted()` method that returns a JSON string containing an object representing the form input values, with the value formatted.
++ Add a `formJsonLocalized()` method that returns a JSON string containing an object representing the form input values, with the value localized.
++ Add a `formUnformat()` method that unformat all the autoNumeric-managed elements that are a child of the parent <form> element of this DOM element, to numeric strings.
++ Add a `formUnformatLocalized()` method that unformat all the autoNumeric-managed elements that are a child of the parent <form> element of this DOM element, to localized strings.
++ Add a `formReformat()` method that reformat all the autoNumeric-managed elements that are a child of the parent <form> element of this DOM element.
++ Add a `formSubmitNumericString()` method that convert the input values to numeric strings, submit the form, then reformat those back.
++ Add a `formSubmitFormatted()` method that submit the form with the current formatted values.
++ Add a `formSubmitLocalized()` method that convert the input values to localized strings, submit the form, then reformat those back.
++ Add a `formSubmitArrayNumericString()` method that generate an array of numeric strings from the `<input>` elements, and pass it to the given callback.
++ Add a `formSubmitArrayFormatted()` method that generate an array of the current formatted values from the `<input>` elements, and pass it to the given callback.
++ Add a `formSubmitArrayLocalized()` method that generate an array of localized strings from the `<input>` elements, and pass it to the given callback.
++ Add a `formSubmitJsonNumericString()` method that generate a JSON string with the numeric strings values from the `<input>` elements, and pass it to the given callback.
++ Add a `formSubmitJsonFormatted()` method that generate a JSON string with the current formatted values from the `<input>` elements, and pass it to the given callback.
++ Add a `formSubmitJsonLocalized()` method that generate a JSON string with the localized strings values from the `<input>` elements, and pass it to the given callback.
++ Add a static `test()` method that if the given domElement is already managed by AutoNumeric (if it has been initialized on the current page).
++ Add multiple private methods to create and delete a global list of AutoNumeric objects (via a WeakMap), as well as the methods to add and remove elements to that list.
++ Add multiple private methods to manage the local enumerable list of AutoNumeric objects that are initialized together and share a common local list.
++ Add the private methods `_mergeSettings()` and `_cloneAndMergeSettings()` to do what they are named about.
++ Modify the static `format()` method so that it formats the given number (or numeric string) with the given options, and returns the formatted value as a string.
++ Add a static `formatAndSet()` method that format the given DOM element value, and set the resulting value back as the element value.
++ Modify the static `unformat()` method so that it unformats the given formatted string with the given options, and returns a numeric string.
++ Add a static `unformatAndSet()` method that unformat the given DOM element value, and set the resulting value back as the element value.
++ Add a static `localize()` method that unformat and localize the given formatted string with the given options, and returns a numeric string.
++ Add a static `isManagedByAutoNumeric()` method that returns `true` is the given DOM element has an AutoNumeric object that manages it.
++ Add a static `getAutoNumericElement()` method that returns the AutoNumeric object that manages the given DOM element.
++ Add the `french()`, `northAmerican()`, `british()`, `swiss()`, `japanese()`, `spanish()` and `chinese()` methods that update the settings to use the named pre-defined language options.
++ Convert some cryptic ternary statements to if/else block.
++ Remove the unknown parameter `setReal` from some functions.
++ Remove the need to pass around the settings in many functions signatures (using `this.settings` directly).
++ Rename the temporary variables created by coping some settings, with the new option names.
++ Correct the warning shown when using `isNan()` on non-number elements like strings.
++ Keep the focus status of the DOM element in the new `this.isFocused` variable.
++ Use the `getElementValue()` function to retrieve the element `value` or `textContent` (depending if the element in an `<input>` or another tag), which allow AutoNumeric to perform some operations on non-input elements too. This is the first changes needed for the goal of managing the non-input tags with `contentEditable` with AutoNumeric.
++ Use the `getElementValue()` function as well in order to be able to set the `value` or `textContent` transparently where needed.
++ Rename `_updateAutoNumericHolderProperties()` to `_updateInternalProperties()`.
++ Complete some JSDoc to be more precise on the event or element types. This helps for IDE autocompletion.
++ Rewrite completely how AutoNumeric test if the given DOM element is supported or not (by using the new `_checkElement()` method). This simplify the process by calling the new `_isElementTagSupported()`, `_isInputElement()` and `_isInputTypeSupported()` functions which respect the separation of concerns.
++ The `_formatDefaultValueOnPageLoad()` method now accepts a 'forced' initial value instead of the default one.
++ Remove the tests about the input type or element support from the `set()` methods, since those cannot change once AutoNumeric has been initialized, simplifying the code.
++ Remove duplicated tests (ie. `settings.formatOnPageLoad` inside the `formatDefaultValueOnPageLoad()` function that is only called if `settings.formatOnPageLoad` is already set).
++ Rename the `getInitialSettings()` method to `_setSettings()`.
++ Use array destructuring to give more meaningful names to the data returned by the `_getSignPosition()` function.
++ Add a private `_serialize()` function that take care of serializing the form data into multiple output as needed, which is called by the `_serializeNumericString()`, `_serializeFormatted()`,`_serializeLocalized()`, `_serializeNumericStringArray()`, `_serializeFormattedArray()` and `_serializeLocalizedArray()` methods.
++ The default settings are now exposed on the AutoNumeric class as a static object `AutoNumeric.defaultSettings`.
++ Add the static `AutoNumeric.options` object that gives access to all the possible options values, with a semantic name (handy for IDE autocompletion).
++ The pre-defined language options objects are now accessible via the static `AutoNumeric.languageOptions` object.
++ Add the static `AutoNumeric.multiple()` function that allows to initialize numerous AutoNumeric object (on numerous DOM elements) in one call (and possibly pass multiple values that will be mapped to each DOM element).
++ Add end-to-end tests for initializing non-`<input>` tags.
++ Add e2e tests for initializing elements with the `noEventListeners` or `readOnly` options.
++ Convert the end-to-end tests to the new API v3.
++ Convert the unit tests to the new API v3.
++ Add unit tests for the `serializeSpaces`, `noEventListeners` and `readOnly` options.
++ Fix the unit tests checking that the `rawValue` was correctly set when using `getSettings()`.
++ Add unit tests to check the `.global.*` methods.
++ Add unit tests to check the `AutoNumeric.multiple()` methods.
++ Add unit tests to check the `selectDecimal`, `selectInteger`, `reformat`, `unformat` and `unformatLocalized` methods.
++ Add unit tests to check the `.form*` methods.
++ Add the `babel-plugin-transform-object-assign` dev dependency in order to be able to use `Object.assign()` in the ES6 source.
+
+### "3.0.0-beta.2"
++ Fix issue #393 Add an option `modifyValueOnWheel` that allow the user to use mouse wheel to increment/decrement the element value
++ The related `wheelStep` option allows to either define a *fixed* step (ie. `1000`), or a *progressive* one calculated based on the current element value
++ Fix issue #397 Create enumerations for every options that allows only a set of values
+
+### "3.0.0-beta.1"
++ Fix issue #387 Add a 'cancellable' feature
++ It's now possible to select the whole input by hitting the `Escape` key (if no changes have been made to the element value, otherwise this will cancel those changes if the `isCancellable` is set to `true`)
++ Fix issue #391 The currency symbol is selected when focusing on an input via the `Tab` key, when `selectNumberOnly` is set to `true`
++ Refactor the code to create a `_selectOnlyNumbers()` function that extract that behavior for re-use.
++ Create a `_select()` function that select the whole element content, while respecting the `selectNumberOnly` option.
++ Create a `_defaultSelectAll()` function that select the whole element content, including all characters.
++ Modify the `setElementSelection()` calls to simplify them with the ability to use one argument instead of two when the `start` and `end` position are the same.
++ Add a feature where when the user hit 'Escape', the element content is selected (cf. issue #387).
+
 ### "2.0.8"
@@ -53,5 +189,5 @@ + Fix issue #389 autoNumeric 2.0.7 npm packages causes build error with typescriptify + browserify
 ### "2.0.0-beta.17"
-+ Fix issue #317 allow jumping over the decimal character when the caret is just left of the decimal character and the user enters the decimal character
-+ Fix issue #319 so the 'get' method returns a negative value when there is a trailing negative sign.
-+ Fix issue #327 so the entire content is selected when tabbing in. 
++ Fix issue #317 Jump over the decimal character when trying to enter a number and the integer part limit has already been attained
++ Fix issue #319 'get' returns wrong value when the value has a trailing negative sign
++ Fix issue #327 When focusing on an input via the `Tab` key, the value is not always selected 
 
@@ -58,0 +194,0 @@ ### "2.0.0-beta.16"

package.json

 {
   "name": "autonumeric",
-  "version": "2.0.8",
+  "version": "3.0.0-beta.3",
   "description": "autoNumeric is a library that provides live *as-you-type* formatting for international numbers and currencies. It supports most International numeric formats and currencies including those used in Europe, Asia, and North and South America.",
-  "main": "src/autoNumeric.js",
-  "readmeFilename": "README.MD",
+  "main": "src/main.js",
+  "readmeFilename": "README.md",
   "keywords": [
     "currency",
     "money",
+    "monetary",
     "Euro",
@@ -16,4 +17,2 @@ "Dollar",
     "format",
-    "jquery",
-    "plugin",
     "form",
@@ -76,5 +75,3 @@ "input",
   "homepage": "http://www.decorplanit.com/plugin/",
-  "dependencies": {
-    "jquery": ">=1.7"
-  },
+  "dependencies": {},
   "devDependencies": {
@@ -87,2 +84,4 @@ "babel-core": "latest",
     "babel-plugin-add-module-exports": "latest",
+    "babel-plugin-transform-object-assign": "^6.22.0",
+    "babel-polyfill": "^6.23.0",
     "babel-preset-latest": "latest",
@@ -145,5 +144,8 @@ "babel-register": "^6.22.0",
     "files": [
-      "src/autoNumeric.js"
+      "src/autoNumeric.js",
+      "src/autoNumericEnum.js",
+      "src/autoNumericHelper.js",
+      "src/main.js"
     ]
   }
 }

README.md

 ## What is [autoNumeric](http://www.decorplanit.com/plugin/)?
 
-autoNumeric is a library that provides live *as-you-type* formatting for international numbers and currencies.
+autoNumeric is a standalone Javascript library that provides live *as-you-type* formatting for international numbers and currencies.
 
@@ -15,3 +15,3 @@ [![NPM][nodei-image]][nodei-url]
 
-The latest stable branch is [2.*](https://github.com/BobKnothe/autoNumeric/tree/master).<br>For older stable versions, please take a look [here](#older-versions), while for the latest development version, check the `next` [branch](https://github.com/BobKnothe/autoNumeric/tree/next).<br><br>
+The latest stable branch is [3.*](https://github.com/BobKnothe/autoNumeric/tree/master).<br>For older stable versions, please take a look [here](#older-versions), while for the latest development version, check the `next` [branch](https://github.com/BobKnothe/autoNumeric/tree/next).<br><br>
 Moreover, you can take a look at what could be the next features coming to autoNumeric on our [project](https://github.com/BobKnothe/autoNumeric/projects) page *(feel free to participate!)*.
@@ -24,5 +24,5 @@
 // Initialization
-$('.myInput').autoNumeric('init', { currencySymbol : '$' });
+new AutoNumeric('.myInput', { currencySymbol : '$' });
 ```
-- Very high configurability (more than 30 [options](#options) available)
+- Very high configurability (more than 38 [options](#options) available)
 ```js
@@ -35,3 +35,3 @@ // The options are...optional :)
     currencySymbol             : '\u202f€',
-    currencySymbolPlacement    : 's',
+    currencySymbolPlacement    : AutoNumeric.options.currencySymbolPlacement.suffix,
     roundingMethod             : 'U',
@@ -41,3 +41,3 @@ };
 // Initialization
-$('.myInput').autoNumeric('init', autoNumericOptionsEuro);
+new AutoNumeric(domElement, autoNumericOptionsEuro);
 ```
@@ -50,8 +50,10 @@ - User experience oriented ; using autoNumeric just feels right and natural
 - The settings can easily be changed at *any* time using the `update` method or via a callback
-- autoNumeric supports most text elements, allowing you to place formatted numbers and currency on just about any part of the page
-- Pre-defined [currency options](#predefined-language-options) allows you to directly use autoNumeric by skipping the option configuration step
-- 18 built-in [methods](#methods) gives you the flexibility needed to use autoNumeric to its maximum potential
-- More than 30 [options](#options) allows you to customize the output format
+- autoNumeric supports `input` elements as well as most text elements, allowing you to place formatted numbers and currencies on just about any part of your page
+- AutoNumeric elements can be linked together allowing you to perform one action on multiple elements at once
+- 7 pre-defined [currency options](#predefined-language-options) allows you to directly use autoNumeric by skipping the option configuration step
+- 26 built-in [methods](#methods) gives you the flexibility needed to use autoNumeric to its maximum potential
+- 21 additional [methods](#methods) specialized for managing form submission
+- More than 38 [options](#options) allows you to customize the output format
 
-With that said, autoNumeric supports most International numeric formats and currencies including those used in Europe, Asia, and North and South America.
+With that said, autoNumeric supports most international numeric formats and currencies including those used in Europe, Asia, and North and South America.
 
@@ -72,22 +74,28 @@ ****
 ### How to use?
-Simply include jQuery and autoNumeric (in that order) in your html `<header>` tag.<br>No other file or library are required.
 
+#### In the browser
+Simply include **autoNumeric** in your html `<header>` tag.<br>No other files or libraries are required ; autoNumeric has **no dependency**.
+
 ```html
-<script src="jquery.min.js" type="text/javascript"></script>
 <script src="autoNumeric.min.js" type="text/javascript"></script>
-<!-- You may also directly use a CDN :-->
-<script src="https://cdn.jsdelivr.net/autonumeric/2.0.0/autoNumeric.min.js"></script>
+<!-- ...or, you may also directly use a CDN :-->
+<script src="https://cdn.jsdelivr.net/autonumeric/3.0.0/autoNumeric.min.js"></script>
 ```
 
-Initialize autoNumeric with or without options :
+#### In another script
+If you want to use AutoNumeric in your code, you can import the `src/autoNumeric.js` file as an ES6 module using:
+```js
+import AutoNumeric from 'autoNumeric';
+```
 
+Then you can initialize autoNumeric with or without options :
 ```js
 // autoNumeric with the defaults options
-$(selector).autoNumeric('init');
+anElement = new AutoNumeric(domElement);
 
 // autoNumeric with specific options being passed
-$(selector).autoNumeric('init', { options }); 
+anElement = new AutoNumeric(domElement, { options });
 
-// autoNumeric with pre-defined language options being passed
-$(selector).autoNumeric('init', $.fn.autoNumeric.lang.French);
+// autoNumeric with a css selector and a pre-defined language options
+anElement = new AutoNumeric('.myCssClass > input').french();
 ```
@@ -98,4 +106,14 @@ *(See the available language list [here](#predefined-language-options))*
 
+*Note : an AutoNumeric object can be initialized in various ways, check those out [here](#initialization)*
+
 ### On which elements can it be used?
-Here are the following supported input types:
+
+autoNumeric can be used in two ways ;
+- with event listeners when used on `<input>` elements making them reactive (in a *read/write* mode), or
+- without event listeners when used on other DOM elements types, essentially acting as a *format-once-and-forget*-*read only* mode.
+
+#### On `<input>` elements
+When used on an `<input>` element, you'll be able to interact with its value and get a formatted input value *as-you-type*, using the full power of autoNumeric.
+
+Only the following supported `<input>` types are supported :
 - `text`,
@@ -115,4 +133,18 @@ - `tel`,
 
+#### On other DOM elements
+
+You can use autoNumeric to format a DOM element value **once** on load.<br>
+This means it will then not react to any user interaction.
+
+The following elements are accepted :
+```js
+const allowedTagList = [
+    'b', 'caption', 'cite', 'code', 'const', 'dd', 'del', 'div', 'dfn', 'dt', 'em', 'h1', 'h2', 'h3',
+    'h4', 'h5', 'h6', 'ins', 'kdb', 'label', 'li', 'option', 'output', 'p', 'q', 's', 'sample',
+    'span', 'strong', 'td', 'th', 'u'
+]
+```
+
 ## Options
-Multiple options allow you to customize precisely how a form input will format your inputs as you type :
+Multiple options allow you to customize precisely how a form input will format your key strokes as you type :
 
@@ -134,7 +166,10 @@ | Option           | Description | Default Value |
 | `formatOnPageLoad`| Determine if the default value will be formatted on initialization | `true` |
+| `isCancellable`| Determine if the user can *'cancel'* the last modifications done to the element value when using the `Escape` key | `true` |
 | `leadingZero`| Controls the leading zero behavior (possible options are `allow`, `deny` and `keep`) | `'deny'` |
 | `maximumValue` | Maximum possible value | `'9999999999999.99'` |
 | `minimumValue` | Minimum possible value | `'-9999999999999.99'` |
+| `modifyValueOnWheel`| Determine if the element value can be incremented / decremented with the mouse wheel. The wheel behavior is modified with the `wheelStep` option. | `true` |
 | `negativeBracketsTypeOnBlur`| Adds brackets `[]`, parenthesis `()`, curly braces `{}` or `<>` on negative values when unfocused | `null` |
 | `negativePositiveSignPlacement` | Placement of negative/positive sign relative to the currency symbol (possible options are `l` (left), `r` (right), `p` (prefix) and `s` (suffix)) | `null` |
+| `noEventListeners` | Defines if the element should have event listeners activated on it | `false` |
 | `noSeparatorOnFocus` | Remove the thousand separator, currency symbol and suffix on focus | `false` |
@@ -144,2 +179,3 @@ | `onInvalidPaste`| Manage how autoNumeric react when the user tries to paste an invalid number (possible options are `error`, `ignore`, `clamp`, `truncate` or `replace`) | `'error'` |
 | `overrideMinMaxLimits` | Override minimum and maximum limits (possible options are `ceiling`, `floor` and `ignore`) | `null` |
+| `readOnly` | Defines if the `<input>` element should be set as read only on initialization | `false` |
 | `roundingMethod`| Method used for rounding (possible options are `S`, `A`, `s`, `a`, `B`, `U`, `D`, `C`, `F`, `N05`, `U05` or `D05`) | `'S'` |
@@ -150,2 +186,3 @@ | `saveValueToSessionStorage`| Allow the `decimalPlacesShownOnFocus` value to be saved into session storage | `false` |
 | `scaleSymbol`| Symbol placed as a suffix when unfocused | `null` |
+| `serializeSpaces`| Defines how the serialize functions should treat spaces when serializing (convert them to `'%20'` or `'+'`) | `'+'` |
 | `selectNumberOnly`| Determine if the select all keyboard command will select the complete input text, or only the input numeric value | `false` |
@@ -156,7 +193,25 @@ | `showPositiveSign` | Allow the positive sign symbol `+` to be displayed for positive numbers | `false` |
 | `unformatOnSubmit`| Removes formatting on submit event | `false` |
+| `wheelStep`| Used in conjonction with the `modifyValueOnWheel` option, this allow to either define a *fixed* step (ie. `1000`), or a *progressive* one | `'progressive'` |
 
 
+###### noEventListeners
+Using the `noEventListeners` option allow autoNumeric to only format without adding any event listeners to an input, or any other DOM elements (that the function would accept as a parameter). This would be useful for read-only values for instance.
+```js
+// Initialize without setting up any event listeners
+anElement = new AutoNumeric(domElement, 12345.789, { options }).remove(); // This is the default existing way of doing that...
+// ...but you can also directly pass a special option `noEventListeners` to prevent the initial creation of those event listeners
+anElement = new AutoNumeric(domElement, 12345.789, { noEventListeners: true });
+```
+In the latter case, it initialize the AutoNumeric element, except it does not add any event listeners. Which means it format the value only once and then let the user modify it freely.<br>*Note: The value can then be formatted via a call to `set`.*
+
+###### readOnly
+AutoNumeric can initialize an `<input>` element with the `readonly` property by setting the `readOnly` option to `true` in the settings:
+```js
+anElement = new AutoNumeric(domElement, 12345.789, { readOnly: true });
+```
+
 For more detail on how to use each options, please take a look at the detailed comments in the source code for the `defaultSettings` object.
 
 #### Predefined language options
+
 Sometime you do not want to have to configure every single aspect of your format, specially if it's a common one.<br>Hence, we provide multiple default options for the most common currencies.
@@ -166,7 +221,3 @@
 ```js
-// ES6 way
-$(selector).autoNumeric('init', an.getLanguages().French);
-
-// jQuery way
-$(selector).autoNumeric('init', $.fn.autoNumeric.lang.French);
+new AutoNumeric('.mySelector > input').french();
 ```
@@ -188,45 +239,277 @@
 
+## Initialization
+
+An AutoNumeric object can be initialized in various ways.
+
+### Initialize one AutoNumeric object
+
+It always takes either a DOM element reference as its first argument, or a css string selector.<br>
+*Note: only one element can be selected this way, since under the hood `document.querySelector` is called, and this only return one element.*<br>
+*If you need to be able to select and initialize multiple elements in one call, then consider using the static `AutoNumeric.multiple()` function*
+
+```js
+anElement = new AutoNumeric(domElement); // With the default options
+anElement = new AutoNumeric(domElement, { options }); // With one option object
+anElement = new AutoNumeric(domElement).french(); // With one pre-defined language object
+anElement = new AutoNumeric(domElement).french({ options });// With one pre-defined language object and additional options that will override those defaults
+
+// ...or init and set the value in one call :
+anElement = new AutoNumeric(domElement, 12345.789); // With the default options, and an initial value
+anElement = new AutoNumeric(domElement, 12345.789, { options });
+anElement = new AutoNumeric(domElement, '12345.789', { options });
+anElement = new AutoNumeric(domElement, null, { options }); // With a null initial value
+anElement = new AutoNumeric(domElement, 12345.789).french({ options });
+anElement = new AutoNumeric(domElement, 12345.789, { options }).french({ options }); // Not really helpful, but possible
+
+// The AutoNumeric constructor class can also accept a string as a css selector. Under the hood this use `QuerySelector` and limit itself to only the first element it finds.
+anElement = new AutoNumeric('.myCssClass > input');
+anElement = new AutoNumeric('.myCssClass > input', { options });
+anElement = new AutoNumeric('.myCssClass > input', 12345.789);
+anElement = new AutoNumeric('.myCssClass > input', 12345.789, { options });
+anElement = new AutoNumeric('.myCssClass > input', null, { options }); // With a null initial value
+anElement = new AutoNumeric('.myCssClass > input', 12345.789).french({ options });
+```
+*Note: AutoNumeric also accepts a limited tag list that it will format on page load, but without adding any event listeners*
+
+### Initialize multiple AutoNumeric objects at once
+If you know you want to initialize multiple elements in one call, you must then use the static `AutoNumeric.multiple()` function:
+```js
+// Init multiple DOM elements in one call (and possibly pass multiple values that will be mapped to each DOM element)
+[anElement1, anElement2, anElement3] = AutoNumeric.multiple([domElement1, domElement2, domElement3], { options });
+[anElement1, anElement2, anElement3] = AutoNumeric.multiple([domElement1, domElement2, domElement3], 12345.789, { options });
+[anElement1, anElement2, anElement3] = AutoNumeric.multiple.french([domElement1, domElement2, domElement3], [12345.789, 234.78, null], { options });
+
+// Special case, if a <form> element is passed (or any other 'parent' (or 'root') DOM element), then autoNumeric will initialize each child `<input>` elements recursively, ignoring those referenced in the `exclude` attribute
+[anElement1, anElement2] = AutoNumeric.multiple({ rootElement: formElement }, { options });
+[anElement1, anElement2] = AutoNumeric.multiple({ rootElement: formElement, exclude : [hiddenElement, tokenElement] }, { options });
+[anElement1, anElement2] = AutoNumeric.multiple({ rootElement: formElement, exclude : [hiddenElement, tokenElement] }, [12345.789, null], { options });
+
+// If you want to select multiple elements via a css selector, then you must use the `multiple` function. Under the hood `QuerySelectorAll` is used.
+[anElement1, anElement2] = AutoNumeric.multiple('.myCssClass > input', { options }); // This always return an Array, even if there is only one element selected
+[anElement1, anElement2] = AutoNumeric.multiple('.myCssClass > input', [null, 12345.789], { options }); // Idem above, but with passing the initial values too
+```
+
+## Options update
+Options can be added and/or modified after the initialization has been done.
+
+Either by passing an options object that contains multiple options...
+```js
+anElement.update({ moreOptions });
+anElement.update(AutoNumeric.getLanguages().NorthAmerican); // Update the settings (and immediately reformat the element accordingly)
+```
+
+...or by changing the options one by one (or by calling a pre-defined option object)
+```js
+anElement.options.minimumValue('12343567.89');
+anElement.options.allowDecimalPadding(false);
+```
+
+Lastly, the option object can be accessed directly, thus allowing to query each options globally too
+```js
+anElement.getSettings(); // Return the options object containing all the current autoNumeric settings in effect
+```
+
 ## Methods
-autoNumeric provides numerous methods to access and modify the input value, formatted or unformatted, at any point in time.
-<br>It does so by either providing access to those methods via the jQuery [wrapper](#jquery-plugin-calls), or directly via the autoNumeric [ES6 module](#es6-module-calls).
+autoNumeric provides numerous methods to access and modify the element value, formatted or unformatted, at any point in time.
+<br>It does so by providing access to those [methods](#instantiated-methods) via the AutoNumeric object class (declared as an ES6 Module).
 
-#### jQuery plugin calls
+First. you need to get a reference to the AutoNumeric module that you need to import:
+```js
+import AutoNumeric from 'autoNumeric.min';
+```
+
+Then you'll be able to access either the methods on the instantiated AutoNumeric object, or the [static functions](#static-methods) directly by using the `AutoNumeric` class.
+
+#### Instantiated methods
+
+##### Usual functions on each autoNumeric-managed element
+
 | Method           | Description | Call example |
 | :----------------: | :-----------:  | :-----------:  |
-| `init` | Initialize autoNumeric and attach the settings (options can be passed as a parameter). **This must be run before other methods can be called.**  | `$(someSelector).autoNumeric('init', {options});` |
-| `autoFormat` | cf. ES6 Module calls | `$(someSelector).autoFormat('1234.56', {options});` |
-| `autoUnFormat` | cf. ES6 Module calls | `$(someSelector).autoUnFormat('1.234,56 €', {options});` |
-| `autoValidate` | cf. ES6 Module calls | `$(someSelector).autoValidate({options});` |
-| `defaults` | Return the default autoNumeric settings | `$.fn.autoNumeric.defaults` |
-| `destroy` | Stop and remove autoNumeric for the current element | `$(someSelector).autoNumeric("destroy");` |
-| `get` | Return the unformatted value as a string | `$(someSelector).autoNumeric('get');` |
-| `getArray` | Serialize the whole form input array into an Array | `$(someSelector).autoNumeric('getArray');` |
-| `getFormatted` | Return the current formatted value | `$(someSelector).autoNumeric('getFormatted');` |
-| `getLocalized` | Returns the unformatted value, but following the `outputFormat` setting | `$(someSelector).autoNumeric('getLocalized');`  |
-| `getNumber` | Return the input unformatted value as a real Javascript number | `$(someSelector).autoNumeric('getNumber');` |
-| `getString` | Serialize the whole form input array into a String | `$(someSelector).autoNumeric('getString');` |
-| `lang` | Return all the predefined language options in one object | `$.fn.autoNumeric.lang` |
-| `reSet` | Re-format inputs (handy right after form submission) | `$(someSelector).autoNumeric('reSet');` |
-| `set` | Set the value given as a parameter, and formats it | `$(someSelector).autoNumeric('set', '12345.67');` |
-| `unSet` | Unformat inputs (handy right before form submission) | `$(someSelector).autoNumeric('unSet');` |
-| `update` | Updates the autoNumeric settings, which reformat the input on-the-fly | `$(someSelector).autoNumeric("update", {options});` |
-| `wipe` | Clear the value from sessionStorage (or cookie, depending on browser supports) | `$(someSelector).autoNumeric("wipe");` |
+| `set` | Set the value (that will be formatted immediately) | `anElement.set(42.76);` |
+| `set` | Set the value and update the setting in one go | `anElement.set(42.76, { options });` |
+| `setUnformatted` | Set the value (that will not be formatted immediately) | `anElement.setUnformatted(42.76);` |
+| `setUnformatted` | Set the value and update the setting in one go (the value will not be formatted immediately) | `anElement.setUnformatted(42.76, { options });` |
+| `getNumericString` | Return the unformatted number as a string | `anElement.getNumericString();` |
+| `get` | Alias for the `.getNumericString()` method | `anElement.get();` |
+| `getFormatted` | Return the formatted string | `anElement.getFormatted();` |
+| `getNumber` | Return the unformatted number as a number | `anElement.getNumber();` |
+| `getLocalized` | Return the localized unformatted number as a string | `anElement.getLocalized();` |
+| `getLocalized` | Return the localized unformatted number as a string, using the outputFormat option override passed as a parameter | `anElement.getLocalized(forcedOutputFormat);` |
+| `reformat` | Force the element to reformat its value again (in case the formatting has been lost) | `anElement.reformat();` |
+| `unformat` | Remove the formatting and keep only the raw unformatted value in the element (as a numeric string) | `anElement.unformat();` |
+| `unformatLocalized` | Remove the formatting and keep only the localized unformatted value in the element | `anElement.unformatLocalized();` |
+| `unformatLocalized` | Idem above, but using the outputFormat option override passed as a parameter | `anElement.unformatLocalized(forcedOutputFormat);` |
+| `isPristine` | Return `true` if the current value is the same as when the element got initialized | `anElement.isPristine();` |
+| `select` | Select the formatted element content, based on the `selectNumberOnly` option | `anElement.select();` |
+| `selectNumber` | Select only the numbers in the formatted element content, leaving out the currency symbol, whatever the value of the `selectNumberOnly` option | `anElement.selectNumber();` |
+| `selectInteger` | Select only the integer part in the formatted element content, whatever the value of `selectNumberOnly` | `anElement.selectInteger(); ` |
+| `selectDecimal` | Select only the decimal part in the formatted element content, whatever the value of `selectNumberOnly` | `anElement.selectDecimal();` |
+| `clear` | Reset the element value to the empty string '' (or the currency sign, depending on the `emptyInputBehavior` option value) | `anElement.clear();` |
+| `clear` | Reset the element value to the empty string '' as above, no matter the `emptyInputBehavior` option value | `anElement.clear(true);` |
 
-#### ES6 Module calls
-First you need to get a reference to the autoNumeric object that you need to import:
+
+##### Un-initialize the AutoNumeric element with the following methods
+
+| Method           | Description | Call example |
+| :----------------: | :-----------:  | :-----------:  |
+| `remove` | Remove the autoNumeric listeners from the element (previous name : 'destroy'). Keep the element content intact. | `anElement.remove();` |
+| `wipe` | Remove the autoNumeric listeners from the element, and reset its value to '' | `anElement.wipe();` |
+| `nuke` | Remove the autoNumeric listeners from the element, and delete the DOM element altogether | `anElement.nuke();` |
+
+
+##### Node manipulation
+
+| Method           | Description | Call example |
+| :----------------: | :-----------:  | :-----------:  |
+| `node` | Return the DOM element reference of the autoNumeric-managed element | `anElement.node();` |
+| `parent` | Return the DOM element reference of the parent node of the autoNumeric-managed element | `anElement.parent();` |
+| `detach` | Detach the current AutoNumeric element from the shared 'init' list (which means any changes made on that local shared list will not be transmitted to that element anymore) | `anElement.detach();` |
+| `detach` | Idem above, but detach the given AutoNumeric element, not the current one | `anElement.detach(otherAnElement);` |
+| `attach` | Attach the given AutoNumeric element to the shared local 'init' list. When doing that, by default the DOM content is left untouched. The user can force a reformat with the new shared list options by passing a second argument to `true`. | `anElement.attach(otherAnElement, reFormat = true);` |
+
+
+##### Use any AutoNumeric element to format/unformat other numbers or DOM elements
+
+This allows to format or unformat numbers, strings or directly other DOM elements without having to specify the options each time, since the current AutoNumeric object already has those settings set.
+
+| Method           | Description | Call example |
+| :----------------: | :-----------:  | :-----------:  |
+| `formatOther` | This use the same function signature that when using the static AutoNumeric method directly (cf. below: `AutoNumeric.format`), but without having to pass the options | `anElement.formatOther(12345, { options });` |
+| `formatOther` | Idem above, but apply the formatting to the DOM element content directly | `anElement.formatOther(domElement5, { options }); ` |
+| `unformatOther` | This use the same function signature that when using the static AutoNumeric method directly (cf. below: `AutoNumeric.unformat`), but without having to pass the options | `anElement.unformatOther('1.234,56 €', { options });` |
+| `unformatOther` | Idem above, but apply the unformatting to the DOM element content directly | `anElement.unformatOther(domElement5, { options });` |
+
+
+##### Initialize other DOM Elements
+
+Once you have an AutoNumeric element already setup correctly with the right options, you can use it as many times you want to initialize as many other DOM elements as needed (this works only on elements that can be managed by autoNumeric).
+
+Whenever `init` is used to initialize other DOM element, a shared 'local' list of those elements is stored in the AutoNumeric objects.<br>This allows for neat things like modifying all those *linked* AutoNumeric elements globally, with one call.
+
+| Method           | Description | Call example |
+| :----------------: | :-----------:  | :-----------:  |
+| `init` | Use an existing AutoNumeric element to initialize another DOM element with the same options | `const anElement2 = anElement.init(domElement2);` |
+| `init` | If `true` is set as the second argument, then the newly generated AutoNumeric element will not share the same local element list as `anElement` | `const anElement2 = anElement.init(domElement2, true);` |
+
+
+##### Perform actions globally on a shared list of AutoNumeric elements
+
+This local list can be used to perform global operations on all those AutoNumeric elements, with one function call.<br>
+To do so, you must call the wanted function by prefixing `.global` before the method name (ie. `anElement.global.set(42)`).<br>
+Below are listed all the supported methods than can be called globally:
+
 ```js
-import an from 'lib/autoNumeric.js';
+anElement.global.set(2000); // Set the value 2000 in all the autoNumeric-managed elements that are shared on this element
+anElement.global.setUnformatted(69);
+[result1, result2, result3] = anElement.global.get(); // Return an array of results
+[result1, result2, result3] = anElement.global.getNumericString(); // Return an array of results
+[result1, result2, result3] = anElement.global.getFormatted(); // Return an array of results
+[result1, result2, result3] = anElement.global.getNumber(); // Return an array of results
+[result1, result2, result3] = anElement.global.getLocalized(); // Return an array of results
+anElement.global.reformat();
+anElement.global.unformat();
+anElement.global.unformatLocalized();
+anElement.global.unformatLocalized(forcedOutputFormat);
+anElement.global.isPristine(); // Return `true` is *all* the autoNumeric-managed elements are pristine, if their raw value hasn't changed
+anElement.global.isPristine(false); // Idem as above, but also checks that the formatted value hasn't changed
+anElement.global.clear(); // Clear the value in all the autoNumeric-managed elements that are shared on this element
+anElement.global.remove();
+anElement.global.wipe();
 ```
-Then you'll be able to use that object static methods:
 
+The shared local list also provide list-specific methods to manipulate it:
+```js
+anElement.global.has(domElementOrAutoNumericObject); // Return `true` if the given AutoNumeric object (or DOM element) is in the local AutoNumeric element list
+anElement.global.addObject(domElementOrAutoNumericObject); // Add an existing AutoNumeric object (or DOM element) to the local AutoNumeric element list, using the DOM element as the key
+anElement.global.removeObject(domElementOrAutoNumericObject); // Remove the given AutoNumeric object (or DOM element) from the local AutoNumeric element list, using the DOM element as the key
+anElement.global.empty(); // Remove all elements from the shared list, effectively emptying it
+[anElement0, anElement1, anElement2, anElement3] = anElement.global.elements(); // Return an array containing all the AutoNumeric elements that have been initialized by each other
+anElement.global.getList(); // Return the `Map` object directly
+anElement.global.size(); // Return the number of elements in the local AutoNumeric element list
+```
+
+##### Form functions
+
+autoNumeric elements provide special functions to manipulate the form they are a part of.
+Those special functions really work on the parent `<form>` element, instead of the `<input>` element itself. 
+
 | Method           | Description | Call example |
+| :----------------: | :-----------:  | :-----------:  |
+| `form` | Return a reference to the parent <form> element, `null` if it does not exist | `anElement.form();` |
+| `formNumericString` | Return a string in standard URL-encoded notation with the form input values being unformatted | `anElement.formNumericString();` |
+| `formFormatted` | Return a string in standard URL-encoded notation with the form input values being formatted | `anElement.formFormatted();` |
+| `formLocalized` | Return a string in standard URL-encoded notation with the form input values, with localized values | `anElement.formLocalized();` |
+| `formLocalized(forcedOutputFormat)` | Idem above, but with the possibility of overriding the `outputFormat` option | `anElement.formLocalized(forcedOutputFormat);` |
+| `formArrayNumericString` | Return an array containing an object for each form `<input>` element, with the values as numeric strings | `anElement.formArrayNumericString();` |
+| `formArrayFormatted` | Return an array containing an object for each form `<input>` element, with the values as formatted strings | `anElement.formArrayFormatted();` |
+| `formArrayLocalized` | Return an array containing an object for each form `<input>` element, with the values as localized numeric strings | `anElement.formArrayLocalized();` |
+| `formArrayLocalized(forcedOutputFormat)` | Idem above, but with the possibility of overriding the `outputFormat` option | `anElement.formArrayLocalized(forcedOutputFormat);` |
+| `formJsonNumericString` | Return a JSON string containing an object representing the form input values. This is based on the result of the `formArrayNumericString()` function. | `anElement.formJsonNumericString();` |
+| `formJsonFormatted` | Return a JSON string containing an object representing the form input values. This is based on the result of the `formArrayFormatted()` function. | `anElement.formJsonFormatted();` |
+| `formJsonLocalized` | Return a JSON string containing an object representing the form input values. This is based on the result of the `formArrayLocalized()` function. | `anElement.formJsonLocalized();` |
+| `formJsonLocalized(forcedOutputFormat)` | Idem above, but with the possibility of overriding the `outputFormat` option | `anElement.formJsonLocalized(forcedOutputFormat);` |
+| `formUnformat` | Unformat all the autoNumeric-managed elements that are a child to the parent <form> element of this `anElement` input, to numeric strings | `anElement.formUnformat();` |
+| `formUnformatLocalized` | Unformat all the autoNumeric-managed elements that are a child to the parent <form> element of this `anElement` input, to localized strings | `anElement.formUnformatLocalized();` |
+| `formReformat` | Reformat all the autoNumeric-managed elements that are a child to the parent <form> element of this `anElement` input | `anElement.formReformat();` |
+
+The following functions can either take a callback, or not. If they don't, the default `form.submit()` function will be called.
+
+| Method           | Description | Call example |
+| :----------------: | :-----------:  | :-----------:  |
+| `formSubmitNumericString(callback)` | Run the `callback(value)` with `value` being equal to the result of `formNumericString()` | `anElement.formSubmitNumericString(callback);` |
+| `formSubmitFormatted(callback)` | Run the `callback(value)` with `value` being equal to the result of `formFormatted()` | `anElement.formSubmitFormatted(callback);` |
+| `formSubmitLocalized(callback)` | Run the `callback(value)` with `value` being equal to the result of `formLocalized()` | `anElement.formSubmitLocalized(callback);` |
+| `formSubmitLocalized(forcedOutputFormat, callback)` | Idem above, but with the possibility of overriding the `outputFormat` option | `anElement.formSubmitLocalized(forcedOutputFormat, callback);` |
+
+For the following methods, the callback is mandatory:
+
+| Method           | Description | Call example |
+| :----------------: | :-----------:  | :-----------:  |
+| `formSubmitArrayNumericString(callback)` | Run the `callback(value)` with `value` being equal to the result of `formArrayNumericString()` | `anElement.formSubmitArrayNumericString(callback);` |
+| `formSubmitArrayFormatted(callback)` | Run the `callback(value)` with `value` being equal to the result of `formArrayFormatted()` | `anElement.formSubmitArrayFormatted(callback);` |
+| `formSubmitArrayLocalized(callback, forcedOutputFormat)` | Idem above, but with the possibility of overriding the `outputFormat` option | `anElement.formSubmitArrayLocalized(callback, forcedOutputFormat);` |
+| `formSubmitJsonNumericString(callback)` | Run the `callback(value)` with `value` being equal to the result of `formJsonNumericString()` | `anElement.formSubmitJsonNumericString(callback);` |
+| `formSubmitJsonFormatted(callback)` | Run the `callback(value)` with `value` being equal to the result of `formJsonFormatted()` | `anElement.formSubmitJsonFormatted(callback);` |
+| `formSubmitJsonLocalized(callback, forcedOutputFormat)` | Idem above, but with the possibility of overriding the `outputFormat` option | `anElement.formSubmitJsonLocalized(callback, forcedOutputFormat);` |
+
+
+#### Function chaining
+
+Most of those functions can be chained which allow to be less verbose and more concise.
+
+```js
+anElement.french()
+         .set(42)
+         .update({ options })
+         .formSubmitJsonNumericString(callback)
+         .clear();
+```
+
+#### Static methods
+
+Without having to initialize any AutoNumeric object, you can directly use the static `AutoNumeric` class functions.
+
+| Method           | Description | Call example |
 | :---------------- | :-----------:  | :-----------:  |
-| `areSettingsValid` | Return true in the settings are valid | `an.areSettingsValid({options})` |
-| `format` | Format the given value without needing to initialize an autoNumeric input first | `an.format('1234.56', {options})` |
-| `getDefaultConfig` | Return the default autoNumeric settings | `an.getDefaultConfig()` |
-| `getLanguages` | Return all the predefined language options in one object | `an.getLanguages()` |
-| `unFormat` | Unformat the given value without needing to initialize an autoNumeric input first | `an.unFormat('1.234,56 €', {options})` |
-| `validate` | Check if the given option object is valid, and that each option is valid as well. This throws an error if it's not. | `an.validate({options})` |
+| `validate` | Check if the given option object is valid, and that each option is valid as well. This throws an error if it's not. | `AutoNumeric.validate({ options })` |
+| `areSettingsValid` | Return true in the settings are valid | `AutoNumeric.areSettingsValid({ options })` |
+| `getDefaultConfig` | Return the default autoNumeric settings | `AutoNumeric.getDefaultConfig()` |
+| `getLanguages` | Return all the predefined language options in one object | `AutoNumeric.getLanguages()` |
+| `getLanguages` | Return a specific pre-defined language options object | `AutoNumeric.getLanguages().French` |
+| `format` | Format the given number with the given options. This returns the formatted value as a string. | `AutoNumeric.format(12345.21, { options });` |
+| `format` | Idem above, but using a numeric string as the first parameter | `AutoNumeric.format('12345.21', { options });` |
+| `format` | Format the `domElement` *`value`* (or *`textContent`*) with the given options and returns the formatted value as a string. This does *not* update that element value. | `AutoNumeric.format(domElement, { options });` |
+| `formatAndSet` | Format the `domElement` value with the given options and returns the formatted value as a string. This function does update that element value with the newly formatted value in the process. | `AutoNumeric.formatAndSet(domElement, { options });` |
+| `unformat` | Unformat the given formatted string with the given options. This returns a numeric string. | `AutoNumeric.unformat('1.234,56 €', { options });` |
+| `unformat` | Unformat the `domElement` value with the given options and returns the unformatted numeric string. This does *not* update that element value. | `AutoNumeric.unformat(domElement, { options });` |
+| `unformatAndSet` | Unformat the `domElement` value with the given options and returns the unformatted value as a numeric string. This function does update that element value with the newly unformatted value in the process. | `AutoNumeric.unformatAndSet(domElement, { options });` |
+| `unformatAndSet` | Recursively unformat all the autoNumeric-managed elements that are a child to the `referenceToTheDomElement` element given as a parameter (this is usually the parent `<form>` element) | `AutoNumeric.unformatAndSet(referenceToTheDomElement);` |
+| `reformatAndSet` | Recursively format all the autoNumeric-managed elements that are a child to the `referenceToTheDomElement` element given as a parameter (this is usually the parent `<form>` element), with the settings of each AutoNumeric elements. | `AutoNumeric.reformatAndSet(referenceToTheDomElement);` |
+| `localize` | Unformat and localize the given formatted string with the given options. This returns a string. | `AutoNumeric.localize('1.234,56 €', { options });` |
+| `localize` | Idem as above, but return the localized DOM element value. This does *not* update that element value. | `AutoNumeric.localize(domElement, { options });` |
+| `localizeAndSet` | Unformat and localize the `domElement` value with the given options and returns the localized value as a string. This function does update that element value with the newly localized value in the process. | `AutoNumeric.localizeAndSet(domElement, { options });` |
+| `test` | Test if the given domElement is already managed by AutoNumeric (if it is initialized) | `AutoNumeric.test(domElement);` |
+| `version` | Return the AutoNumeric version number (for debugging purpose) | `AutoNumeric.version();` |
 
-*Work is ongoing to export all the current jQuery-only methods into the ES6 module.*
 
@@ -281,3 +564,3 @@ ## Questions
 
-##### How to test?
+#### How to test?
 Tests **must always be green** :white_check_mark: before pushing. Any commit that make the tests fails will be ignored.<br>To run the tests, you have multiple options :
@@ -302,3 +585,3 @@ ```sh
 
-##### How to lint?
+#### How to lint?
 Linting allow us to keep a coherent code style in all the source files.<br>In order to check that everything is well formatted, run [eslint](http://eslint.org/) with :
@@ -327,3 +610,3 @@ ```sh
 ## Older versions
-The previous stable autoNumeric version v1.9.46 can be found [here](https://github.com/BobKnothe/autoNumeric/releases/tag/1.9.46).
+The previous stable autoNumeric version v1.9.46 can be found [here](https://github.com/BobKnothe/autoNumeric/releases/tag/1.9.46), and the v2 branch can be found [here](https://github.com/BobKnothe/autoNumeric/releases/tag/v2.0.7).
 
@@ -330,0 +613,0 @@ ## Related projects

TODO.md

@@ -1,88 +0,279 @@
-## TODO list for autoNumeric
-- [ ] Fix as many `//FIXME` in the source code as possible
-- [ ] Evaluate and fix all the `//TODO` in the source code
-- [ ] Finish removing all jQuery dependencies
-- [ ] Finish converting autoNumeric to an ES6 module :
+# TODO list for autoNumeric v3
 
+## ES6 Conversion
+- [x] Finish converting autoNumeric to an ES6 module :
+
 ```js
 /* 
- * The idea is to use the AutoNumeric class as a static object to access default options and static methods,
- * and instantiate an AutoNumeric 'mold' when you want to create and configure a format model that will be able to be applied to as many inputs the user wants, or even used directly to format/unformat numbers and strings, without having to use a DOM element.
-  * This mold would serve as a factory to create a single autoNumeric-managed input object for each input.
+ * The idea is to use the AutoNumeric :
+ * - static methods to access default options and static functions,
+ * - class to instantiate `AutoNumeric` elements.
+ * 
+ * Those `AutoNumeric` elements will hold all the configuration variables and provide an API to manipulate the element value.
+ * 
+ * In the former case, we can use the AutoNumeric class directly to format/unformat numbers and strings, without having to use a DOM element.
+ * In the latter case, we can use an already instantiated `AutoNumeric` object in order to *clone* its configuration for initializing another DOM element.
+ * 
+ * To sum up :
+ * - Use the `AutoNumeric` class as a static object to access default options and static methods,
+ * - Instantiate an `AutoNumeric` when you want to *init* an element
+ * - Those elements then provides the usual functions (ie. `anElement.set(42)`)
+ * - You can use any `AutoNumeric` object to initialize other DOM elements with the same options configuration
+ * - All those elements share a common list on which you can use global commands that will be replicated on each individual `AutoNumeric` element.
  */
 // Import the autoNumeric module
 import AutoNumeric from 'autoNumeric.min';
+```
 
-// ---- Initialization (Create an instance of the autoNumeric object)
-const anMoldWithOptions1 = new AutoNumeric({ options });
-const anMoldWithOptions2 = new AutoNumeric(AutoNumeric.lang.French);
-// Possible jQuery way : $.autoNumeric.init.french(option);
-const anMoldWithOptions3 = new AutoNumeric(AutoNumeric.lang.French, { options }); //FIXME à terminer
-const anMoldWithOptions4 = new AutoNumeric(AutoNumeric.lang.French({ options })); //FIXME à terminer
-const anMoldWithOptions5 = new AutoNumeric.French(); //FIXME à terminer
-const anMoldWithOptions5 = new AutoNumeric.French({ options }); //FIXME à terminer
+### Initialization (Create an instance of the autoNumeric object)
+```js
+anElement = new AutoNumeric(domElement); // With the default options
+anElement = new AutoNumeric(domElement, { options }); // With one option object
+anElement = new AutoNumeric(domElement).french(); // With one pre-defined language object
+anElement = new AutoNumeric(domElement).french({ options });// With one pre-defined language object and additional options that will override those defaults
 
-// or add the options later
-const anModel = new AutoNumeric();
-anModel.options.setLang.French(); // or...
-anModel.options.lang = AutoNumeric.lang.French;
-anModel.options.minimumValue = '12343567.89';
-anModel.options.merge({ moreOptions });
+// ...or init and set the value in one call :
+anElement = new AutoNumeric(domElement, 12345.789); // With the default options, and an initial value
+anElement = new AutoNumeric(domElement, 12345.789, { options });
+anElement = new AutoNumeric(domElement, '12345.789', { options });
+anElement = new AutoNumeric(domElement, null, { options }); // With a null initial value
+anElement = new AutoNumeric(domElement, 12345.789).french({ options });
+anElement = new AutoNumeric(domElement, 12345.789, { options }).french({ options }); // Not really helpful, but possible
 
-// We could also imagine being able to init and set the value in one call :
-const anInput0 = new AutoNumeric(12345.789, { options });
+// The AutoNumeric constructor class can also accept a string as a css selector. Under the hood this use `QuerySelector` and limit itself to only the first element it finds.
+anElement = new AutoNumeric('.myCssClass > input');
+anElement = new AutoNumeric('.myCssClass > input', { options });
+anElement = new AutoNumeric('.myCssClass > input', 12345.789);
+anElement = new AutoNumeric('.myCssClass > input', 12345.789, { options });
+anElement = new AutoNumeric('.myCssClass > input', null, { options }); // With a null initial value
+anElement = new AutoNumeric('.myCssClass > input', 12345.789).french({ options });
+```
+*Note: AutoNumeric also accepts a limited tag list that it will format on page load, but without adding any event listeners*
 
-// Once you are happy with that 'mold', use it as many times to initialize many form inputs
-const anInput1 = anModel.init(domElement1);
-const anInput2 = anModel.init(domElement2);
+#### Initialization of multiple AutoNumeric elements at once
+Note: The previous notation `$('query selector string').autoNumeric('init')` was not deterministic since depending on the selector result (none, one or more elements), autoNumeric initialized an unknown number of elements.
+With the new API featuring a class, using `new AutoNumeric()` to generate more than one `AutoNumeric` object is against all convention and should not be done.
+In order to initialize multiple `AutoNumeric` elements at once, you'll need to know in advance that you want to initialize multiple elements and therefore retrieve an array as a result. This can be done by using the new notation (using a `static` method) : 
 
-// Or you can use the model to access the methods without having to specify the options since they are already set
-let formattedString = anMoldWithOptions1.format(1234567.89);
-let unFormattedString = anMoldWithOptions1.unformat('1,234,567.89');
+```js
+// ...or init multiple DOM elements in one call (and possibly pass multiple values that will be mapped to each DOM element)
+[anElement1, anElement2, anElement3] = AutoNumeric.multiple([domElement1, domElement2, domElement3], { options });
+[anElement1, anElement2, anElement3] = AutoNumeric.multiple([domElement1, domElement2, domElement3], 12345.789, { options });
+[anElement1, anElement2, anElement3] = AutoNumeric.multiple.french([domElement1, domElement2, domElement3], [12345.789, 234.78, null], { options });
 
-// Then use the usual functions on each aN input
-anInput1.set(12345.897);
-console.log('anInput1 raw value:', anInput1.getNumber()); //DEBUG
-anInput1.update(AutoNumeric.getLanguages().NorthAmerican);
+// Special case, if a <form> element is passed (or any other 'parent' (or 'root') DOM element), then autoNumeric will initialize each child <input> elements recursively, ignoring those referenced in the `exclude` attribute
+[anElement1, anElement2] = AutoNumeric.multiple({ rootElement: formElement }, { options });
+[anElement1, anElement2] = AutoNumeric.multiple({ rootElement: formElement, exclude : [hiddenElement, tokenElement] }, { options });
+[anElement1, anElement2] = AutoNumeric.multiple({ rootElement: formElement, exclude : [hiddenElement, tokenElement] }, [12345.789, null], { options });
 
-anInput2.set(42);
-anInput2.get();
-anInput2.settings();
-anInput2.formString();
-anInput2.formArray();
-anInput2.getFormatted();
-anInput2.unformat(); // You could also access unformat and format via the input (and not only the mold, for instance when none as been saved)
-anInput2.format();   // You could also access unformat and format via the input (and not only the mold, for instance when none as been saved)
-anInput2.raw();
-anInput2.number();
-anInput2.wipe();
-anInput2.destroy();
-anInput2.select(); // This select the formatted input content, based on the option `selectNumberOnly`
-anInput2.mold(); // Return a mold object that can be used to instantiate other dom element, or to be used to call methods from that mold
-const anInput3 = anInput2.clone(domElement3); // Use an existing aN element to initialize another dom element with the same options
+// If the user wants to select multiple elements via a css selector, then he must use the `multiple` function. Under the hood `QuerySelectorAll` is used.
+[anElement1, anElement2] = AutoNumeric.multiple('.myCssClass > input', { options }); // This always return an Array, even if there is only one element selected
+[anElement1, anElement2] = AutoNumeric.multiple('.myCssClass > input', [null, 12345.789], { options }); // Idem above, but with passing the initial values too
+```
 
+### Options update
+```js
+// Options can be added/modified after the initialization
+// Either by passing an options object that contains multiple options...
+anElement.update({ moreOptions });
+anElement.update(AutoNumeric.getLanguages().NorthAmerican); // Update the settings (and immediately reformat the element accordingly)
+// ...or by changing the options one by one (or by calling a pre-defined option object)
+anElement.options.minimumValue('12343567.89');
+anElement.options.allowDecimalPadding(false);
+
+// The option object can be accessed directly, thus allowing to query each options too
+anElement.getSettings(); // Return the options object containing all the current autoNumeric settings in effect
+```
+
+### Then use the usual functions on each autoNumeric-managed element
+```js
+// AutoNumeric functions
+anElement.set(42.76); // Set the value (that will be formatted immediately)
+anElement.set(42.76, { options }); // Set the value and update the setting in one go
+// anElement.set(42.76, { options }, saveSettings = false); // Set the value with the setting override, but do not save the settings //FIXME Add this later
+anElement.setUnformatted(42.76); // Set the value (that will not be formatted immediately)
+anElement.setUnformatted(42.76, { options }); // Set the value and update the setting in one go (the value will not be formatted immediately)
+anElement.get(); // Alias for the `.getNumericString()` function
+anElement.getNumericString(); // Return the unformatted number as a string
+anElement.getFormatted(); // Return the formatted string
+anElement.getNumber(); // Return the unformatted number as a number
+anElement.getLocalized(); // Return the localized unformatted number as a string
+anElement.getLocalized(forcedOutputFormat); // Return the localized unformatted number as a string, using the outputFormat option override passed as a parameter
+anElement.reformat(); // Force the element to reformat its value again (in case the formatting has been lost)
+anElement.unformat(); // Remove the formatting and keep only the raw unformatted value in the element (as a numeric string)
+anElement.unformatLocalized(); // Remove the formatting and keep only the localized unformatted value in the element
+anElement.unformatLocalized(forcedOutputFormat); // Idem above, but using the outputFormat option override passed as a parameter
+anElement.isPristine(); // Return `true` if the current value is the same as when the element got initialized
+anElement.select(); // Select the formatted element content, based on the `selectNumberOnly` option
+anElement.selectNumber(); // Select only the numbers in the formatted element content, leaving out the currency symbol, whatever the value of the `selectNumberOnly` option
+anElement.selectInteger(); // Select only the integer part in the formatted element content, whatever the value of `selectNumberOnly`
+anElement.selectDecimal(); // Select only the decimal part in the formatted element content, whatever the value of `selectNumberOnly`
+anElement.clear(); // Reset the element value to the empty string '' (or the currency sign, depending on the `emptyInputBehavior` option value)
+anElement.clear(true); // Reset the element value to the empty string '' as above, no matter the `emptyInputBehavior` option value
+
+// Un-initialize the AutoNumeric element
+anElement.remove(); // Remove the autoNumeric listeners from the element (previous name : 'destroy'). Keep the element content intact.
+anElement.wipe(); // Remove the autoNumeric listeners from the element, and reset its value to ''
+anElement.nuke(); // Remove the autoNumeric listeners from the element, and delete the DOM element altogether
+
+// Node manipulation
+anElement.node(); // Return the DOM element reference of the autoNumeric-managed element
+anElement.parent(); // Return the DOM element reference of the parent node of the autoNumeric-managed element
+anElement.detach(); // Detach the current AutoNumeric element from the shared 'init' list (which means any changes made on that local shared list will not be transmitted to that element anymore)
+anElement.detach(otherAnElement); // Idem above, but detach the given AutoNumeric element, not the current one
+anElement.attach(otherAnElement, reFormat = true); // Attach the given AutoNumeric element to the shared local 'init' list. When doing that, by default the DOM content is left untouched. The user can force a reformat with the new shared list options by passing a second argument to `true`.
+```
+
+### Use any AutoNumeric element to format/unformat other numbers/DOM elements without having to specify the options each time
+```js
+// You can use any existing AutoNumeric element to access its methods without having to specify the options since they are already set, and passing another DOM element :
+anElement.formatOther(12345, { options }); // Same function signature that when using the AutoNumeric object directly (cf. below: `AutoNumeric.format`), but without having to pass the options
+anElement.formatOther(domElement5, { options }); // Idem above, but apply the formatting to the DOM element content directly
+anElement.unformatOther('1.234,56 €', { options }); // Same function signature that when using the AutoNumeric object directly (cf. below: `AutoNumeric.unformat`), but without having to pass the options
+anElement.unformatOther(domElement5, { options }); // Idem above, but apply the unformatting to the DOM element content directly
+```
+
+### Initialize other DOM Elements
+```js
+// Once you have an AutoNumeric element already setup correctly with the right options, you can use it as many times you want to initialize as many other DOM elements as needed (this works only on elements that can be managed by autoNumeric) :
+const anElement3 = anElement.init(domElement3); // Use an existing aN element to initialize another DOM element with the same options
+// Whenever `init` is used to initialize other DOM element, a shared 'init' list of those elements is stored in the AutoNumeric objects.
+anElement3 = anElement.init(domElement3, true); // If `true` is set as the second argument, then the newly generated AutoNumeric element will not share the same local element list as `anElement`
+```
+
+### Perform actions globally on a shared list of AutoNumeric elements 
+```js
+// This list can then be used to perform global operations on all those AutoNumeric elements, with one function call :
+anElement.global.set(2000); // Set the value 2000 in all the autoNumeric-managed elements that are shared on this element
+anElement.global.setUnformatted(69);
+[result1, result2, result3] = anElement.global.get(); // Return an array of results
+[result1, result2, result3] = anElement.global.getNumericString(); // Return an array of results
+[result1, result2, result3] = anElement.global.getFormatted(); // Return an array of results
+[result1, result2, result3] = anElement.global.getNumber(); // Return an array of results
+[result1, result2, result3] = anElement.global.getLocalized(); // Return an array of results
+anElement.global.reformat();
+anElement.global.unformat();
+anElement.global.unformatLocalized();
+anElement.global.unformatLocalized(forcedOutputFormat);
+anElement.global.isPristine(); // Return `true` is *all* the autoNumeric-managed elements are pristine, if their raw value hasn't changed
+anElement.global.isPristine(false); // Idem as above, but also checks that the formatted value hasn't changed
+anElement.global.clear(); // Clear the value in all the autoNumeric-managed elements that are shared on this element
+anElement.global.remove();
+anElement.global.wipe();
+
+// ...or use functions specifically designed for that global list
+anElement.global.has(domElementOrAutoNumericObject); // Return `true` if the given AutoNumeric object (or DOM element) is in the local AutoNumeric element list
+anElement.global.addObject(domElementOrAutoNumericObject); // Add an existing AutoNumeric object (or DOM element) to the local AutoNumeric element list, using the DOM element as the key
+anElement.global.removeObject(domElementOrAutoNumericObject); // Remove the given AutoNumeric object (or DOM element) from the local AutoNumeric element list, using the DOM element as the key
+anElement.global.empty(); // Remove all elements from the shared list, effectively emptying it
+[anElement0, anElement1, anElement2, anElement3] = anElement.global.elements(); // Return an array containing all the AutoNumeric elements that have been initialized by each other
+anElement.global.getList(); // Return the `Map` object directly
+anElement.global.size(); // Return the number of elements in the local AutoNumeric element list
+//FIXME Does updating the settings of one of those AutoNumeric object should update the settings of its siblings too?
+```
+
+### Form functions
+```js
+// Special functions that really work on the parent <form> element, instead of the <input> element itself :
+anElement.form(); // Return a reference to the parent <form> element, `null` if it does not exist
+anElement.formNumericString(); // Return a string in standard URL-encoded notation with the form input values being unformatted
+anElement.formFormatted(); // Return a string in standard URL-encoded notation with the form input values being formatted
+anElement.formLocalized(); // Return a string in standard URL-encoded notation with the form input values, with localized values
+anElement.formLocalized(forcedOutputFormat); // Idem above, but with the possibility of overriding the `outputFormat` option
+anElement.formArrayNumericString(); // Return an array containing an object for each form <input> element, with the values as numeric strings
+anElement.formArrayFormatted(); // Return an array containing an object for each form <input> element, with the values as formatted strings
+anElement.formArrayLocalized(); // Return an array containing an object for each form <input> element, with the values as localized numeric strings
+anElement.formArrayLocalized(forcedOutputFormat); // Idem above, but with the possibility of overriding the `outputFormat` option
+anElement.formJsonNumericString(); // Return a JSON string containing an object representing the form input values. This is based on the result of the `formArrayNumericString()` function.
+anElement.formJsonFormatted(); // Return a JSON string containing an object representing the form input values. This is based on the result of the `formArrayFormatted()` function.
+anElement.formJsonLocalized(); // Return a JSON string containing an object representing the form input values. This is based on the result of the `formArrayLocalized()` function.
+anElement.formJsonLocalized(forcedOutputFormat); // Idem above, but with the possibility of overriding the `outputFormat` option
+anElement.formUnformat(); // Unformat all the autoNumeric-managed elements that are a child to the parent <form> element of this `anElement` input, to numeric strings
+anElement.formUnformatLocalized(); // Unformat all the autoNumeric-managed elements that are a child to the parent <form> element of this `anElement` input, to localized strings
+anElement.formReformat(); // Reformat all the autoNumeric-managed elements that are a child to the parent <form> element of this `anElement` input
+
+// The following functions can either take a callback, or not. If they don't, the default `form.submit()` function will be called.
+anElement.formSubmitNumericString(callback); // Run the `callback(value)` with `value` being equal to the result of `formNumericString()`
+anElement.formSubmitFormatted(callback); // Run the `callback(value)` with `value` being equal to the result of `formFormatted()`
+anElement.formSubmitLocalized(callback); // Run the `callback(value)` with `value` being equal to the result of `formLocalized()`
+anElement.formSubmitLocalized(forcedOutputFormat, callback); // Idem above, but with the possibility of overriding the `outputFormat` option
+
+// For the following methods, the callback is mandatory
+anElement.formSubmitArrayNumericString(callback); // Run the `callback(value)` with `value` being equal to the result of `formArrayNumericString()`
+anElement.formSubmitArrayFormatted(callback); // Run the `callback(value)` with `value` being equal to the result of `formArrayFormatted()`
+anElement.formSubmitArrayLocalized(callback, forcedOutputFormat); // Idem above, but with the possibility of overriding the `outputFormat` option
+anElement.formSubmitJsonNumericString(callback); // Run the `callback(value)` with `value` being equal to the result of `formJsonNumericString()`
+anElement.formSubmitJsonFormatted(callback); // Run the `callback(value)` with `value` being equal to the result of `formJsonFormatted()`
+anElement.formSubmitJsonLocalized(callback, forcedOutputFormat); // Idem above, but with the possibility of overriding the `outputFormat` option
+```
+
+### Static methods
+```js
 // the AutoNumeric object also provide static methods :
-AutoNumeric.validate({ options });
-AutoNumeric.areSettingsValid({ options });
-AutoNumeric.getDefaultConfig();
-AutoNumeric.getLanguages(); // or just `AutoNumeric.lang();`?
-AutoNumeric.format();
+AutoNumeric.validate({ options }); // Check if the given option object is valid, and that each option is valid as well. This throws an error if it's not.
+AutoNumeric.areSettingsValid({ options }); // Return `true` if the `options` are valid settings
+AutoNumeric.getDefaultConfig(); // Return the default autoNumeric settings 
+AutoNumeric.getLanguages(); // Return all the predefined language options in one object
+AutoNumeric.getLanguages().French; // Return a specific pre-defined language options object
+AutoNumeric.format(12345.21, { options }); // Format the given number (or numeric string) with the given options. This returns the formatted value as a string.
+AutoNumeric.format('12345.21', { options }); // Idem as above
+AutoNumeric.format(domElement, { options }); // ..or format the `domElement` value with the given options and returns the formatted value as a string. This does *not* update that element value.
+AutoNumeric.formatAndSet(domElement, { options }); // Format the `domElement` value with the given options and returns the formatted value as a string. This function does update that element value with the newly formatted value in the process.
+AutoNumeric.unformat('1.234,56 €', { options }); // Unformat the given formatted string with the given options. This returns a numeric string.
+AutoNumeric.unformat(domElement, { options }); // ..or unformat the `domElement` value with the given options and returns the unformatted numeric string. This does *not* update that element value.
+AutoNumeric.unformatAndSet(domElement, { options }); // Unformat the `domElement` value with the given options and returns the unformatted value as a numeric string. This function does update that element value with the newly unformatted value in the process.
+AutoNumeric.unformatAndSet(referenceToTheDomElement); // Recursively unformat all the autoNumeric-managed elements that are a child to the `referenceToTheDomElement` element given as a parameter (this is usually the parent `<form>` element)
+AutoNumeric.reformatAndSet(referenceToTheDomElement); // Recursively format all the autoNumeric-managed elements that are a child to the `referenceToTheDomElement` element given as a parameter (this is usually the parent `<form>` element), with the settings of each AutoNumeric elements.
+AutoNumeric.localize('1.234,56 €', { options }); // Unformat and localize the given formatted string with the given options. This returns a string.
+AutoNumeric.localize(domElement, { options }); // Idem as above, but return the localized DOM element value. This does *not* update that element value.
+AutoNumeric.localizeAndSet(domElement, { options }); // Unformat and localize the `domElement1` value with the given options and returns the localized value as a string. This function does update that element value with the newly localized value in the process.
+AutoNumeric.test(domElement); // Test if the given domElement is already managed by AutoNumeric (if it is initialized)
+AutoNumeric.version(); // Return the autoNumeric version number (for debugging purpose)
 ```
 
-- [ ] Rewrite all the event handling (by dropping the `keypress` event)
-- [ ] Remove any direct reference to a key or char code, and use the real character (given by `character(event)`)
-- [ ] Add an option `modifyValueOnWheel` (`true`, `false`) for using the mousewheel up/down to increment/decrement the current input value
-  - [ ] a second option `wheelStep` would allow to define the step, either :
-    - fixed `'100'`, or
-    - `'progressive'` : calculate the number of numbers in the integer part (ie. 9.999.999 -> 7, and add/substract 7-1 = 6th places : 9.999.999 - 100.000)
-  - [ ] Warning: if the inputs are big, that can prevent the user to scroll the page, or just make it do an error and increment a wrong input
-  - [ ] better yet, add a small timeout on mouse hover to make sure it won't be followed by a mouseout
-  - [ ] because you do not want to scroll in an input by accident just when it come under the mouse cursor that is currently scrolling the page
-- [ ] Add a cancellable feature :
-  - [ ] on focus, you save the input value
-  - [ ] if the user change the input value, and hit 'Escape', then the initial value saved on focus is set back
-  - [ ] on the other hand if the user either have used 'Enter' to validate ('Enter' throw a change event) his entries, or if the input value has been changed by another script in the mean time, then we save the new input value
-  - [ ] bonus; if the value has not changed, hitting 'Esc' just select all the input value
+### Function chaining
+```js
+// All those functions can be chained
+anElement.set(42)
+         .getNumber(callback1)
+         .update({ options })
+         .formSubmitJsonNumericString(callback2)
+         .clear();
+```
+
+*Note: This proposed API is **not** final and can (will) change any time soon*
+
+- [x] Allow autoNumeric to only format without adding any event listeners to an input, or any other DOM elements (that the function would accept as a parameter) (This would be useful for read-only values for instance)
+```js
+// Initialize without setting up any event listeners
+anElement = new AutoNumeric(domElement, 12345.789, { options }).remove(); // This is the default existing way of doing that...
+// ...but you can also directly pass a special option `noEventListeners` to prevent the initial creation of those event listeners
+anElement = new AutoNumeric(domElement, 12345.789, { noEventListeners: true });
+// In that case, it initialize the AutoNumeric element, except it does not add any event listeners. Which means it format the value only once and then let the user modify it freely. The value can be formatted via another call to `set`.
+//TODO In case of using the `noEventListeners` option, since we cannot make sure the content of the input is a valid one (because the user could modify its value afterwards), we need to decide if the other methods should be allowed (like `get` or `number`)
+```
+- [x] Allow autoNumeric to initialize an <input> element with the `readonly` property
+```js
+// It's possible for the user to want to declare an <input> element as read-only. This is done by passing the `readOnly` option:
+anElement = new AutoNumeric(domElement, 12345.789, { readOnly: true });
+```
+
+## Wheel events
+- [x] Add an option `modifyValueOnWheel` (`true`, `false`) for using the mousewheel up/down to increment/decrement the current input value
+  - [x] a second option `wheelStep` would allow to define the step, either :
+    - [x] fixed `'100'`, or
+    - [x] `'progressive'` : calculate the number of numbers in the integer part (ie. 9.999.999 -> 7, and add/substract 7-1 = 6th places : 9.999.999 - 100.000)
+  - [x] Make sure the user cannot use that `wheel` event to go past the min and max values. If those are attained, then drop the `wheel` event to not scroll the page.
+  - [x] Allow the user to hold `Shift` while scrolling to ignore the input and just scroll the page (useful on small screen where some badly configured inputs could use all the available space)
+  
+## Cancellable
+- [x] Add a cancellable feature :
+  - [x] on focus, you save the input value
+  - [x] if the user change the input value, and hit 'Escape', then the initial value saved on focus is set back
+  - [x] on the other hand if the user either have used 'Enter' to validate ('Enter' throw a change event) his entries, or if the input value has been changed by another script in the mean time, then we save the new input value
+  - [x] bonus; if the value has not changed, hitting 'Esc' just select all the input value
+
+## Other features and tasks
 - [ ] Make sure `ctrl+z` (undo) is always usable (after an input, but also after a paste)
-- [ ] Create enumerations for every options that allows only a set of values :
+- [x] Create enumerations for every options that allows only a set of values :
 ```js
@@ -92,16 +283,24 @@ import AutoNumeric from 'autoNumeric.min';
 ```
+- [ ] Fix as many `//FIXME` in the source code as possible
+- [ ] Evaluate and fix all the `//TODO` in the source code
+- [x] Finish removing all jQuery dependencies
+- [ ] Rewrite all the event handling (by dropping the `keypress` event)
+- [ ] Remove any direct reference to a key or char code, and use the real character (given by `character(event)`)
 - [ ] Write more tests in order to get better [coverage](https://coveralls.io/github/BobKnothe/autoNumeric)
-- [ ] Allow autoNumeric to only format without adding any event listeners to an input, or any other DOM elements (that the function would accept as a parameter) (This would be useful for read-only values)
+- [ ] If the user hover the autoNumeric-managed element then press 'Ctrl', display the unformatted value inside the hovered element
+- [ ] Add support for changing the input style (background and text color), based on rules like 'positive', 'negative', 'within range', etc. We could either use default colors, or allow the user to pass its own css class names
+  - [ ] Color if the value is positive
+  - [ ] Color if the value is negative
+  - [ ] Color if the value is within the given range (and multiple ranges can be defined)
 ```js
-// Format a number
-AutoNumeric.format(12345.78, { options });
-// or
-const anMoldWithOptions = new AutoNumeric({ options });
-anMoldWithOptions.format(12345.78);
-
-// Format the content of the DOM element
-const anDiv = anMoldWithOptions.initInert(domElementDiv); // `initInert` (or `initOnce` or `initNoEvents`) is the same as `init`, except it does not add any event listeners. Which means it format the value only once and then let the user modify it freely. The value can be formatted via another call to `set`.
-anDiv.set(42042.22);
-anDiv.set(837264);
-//TODO In case of `initInert` since we cannot make sure the content of the input is a valid one, we need to decide if the other methods should be allowed (like `get` or `number`)
+const styleRules = {
+    positive: 'positiveAn',
+    negative: 'negativeAn',
+    range : [
+        { min: -15, max: 0, class: 'red' },
+        { min: 0, max: 20, class: 'orange' },
+        { min: 20, max: 40, class: 'yellow' },
+        { min: 40, max: Number.MAX_SAFE_INTEGER, class: 'green' },
+    ]
+}
 ```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2917064

increased by58.32%

Dependency count

0

decreased by-100%

Number of package files

16

increased by23.08%

Lines of code

11692

increased by53.34%

Number of lines in readme file

628

increased by82.03%

Number of low supply chain risk alerts

1

decreased by-50%

Number of medium supply chain risk alerts

1

decreased by-66.67%

Worsened metrics

Dev dependency count

32

increased by6.67%

Dependency changes

• - Removedjquery@>=1.7

• - Removedjquery@3.7.1(transitive)