Skip to content

Commit

Permalink
extend alternator syntax to regexp-like syntax
Browse files Browse the repository at this point in the history
  • Loading branch information
@RobinHerbots
RobinHerbots committed Apr 12, 2017
1 parent 3e9707d commit 71e2d3c
Show file tree
Hide file tree
Showing 2 changed files with 107 additions and 54 deletions.
141 changes: 89 additions & 52 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,43 +33,109 @@ Demo page see [http://robinherbots.github.io/Inputmask](http://robinherbots.gith

[![donate](https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=ZNR3EB6JTMMSS)

## Usage:
Include the js-files which you can find in the `dist` folder.
## Setup
### dependencyLibs
Inputmask can run against different javascript libraries.
You can choose between:
- inputmask.dependencyLib (vanilla)
- inputmask.dependencyLib.jquery
- inputmask.dependencyLib.jqlite
- .... (others are welcome)

via Inputmask class
### Classic web with <script\> tag
Include the js-files which you can find in the `dist` folder.

If you want to include the Inputmask and all extensions. (with jQuery as dependencylib)
```html
<script src="jquery.js"></script>
<script src="inputmask.js"></script>
<script src="inputmask.???.Extensions.js"></script>
<script src="dist/jquery.inputmask.bundle.js"></script>
<script src="dist/inputmask/phone-codes/phone.js"></script>
<script src="dist/inputmask/phone-codes/phone-be.js"></script>
<script src="dist/inputmask/phone-codes/phone-ru.js"></script>
```
For individual extensions. (with jQuery as dependencylib)
```html
<script src="jquery.js"></script>
<script src="dist/inputmask/inputmask.js"></script>
<script src="dist/inputmask/inputmask.regex.extensions.js"></script>
<script src="dist/inputmask/inputmask.extensions.js"></script>
<script src="dist/inputmask/inputmask.numeric.extensions.js"></script>
<script src="dist/inputmask/inputmask.date.extensions.js"></script>
<script src="dist/inputmask/inputmask.phone.extensions.js"></script>
<script src="dist/inputmask/jquery.inputmask.js"></script>
<script src="dist/inputmask/phone-codes/phone.js"></script>
<script src="dist/inputmask/phone-codes/phone-be.js"></script>
<script src="dist/inputmask/phone-codes/phone-ru.js"></script>
```

For individual extensions. (with vanilla dependencylib)
```html
<script src="dist/inputmask/dependencyLibs/inputmask.dependencyLib.js"></script>
<script src="dist/inputmask/inputmask.js"></script>
<script src="dist/inputmask/inputmask.regex.extensions.js"></script>
<script src="dist/inputmask/inputmask.extensions.js"></script>
<script src="dist/inputmask/inputmask.numeric.extensions.js"></script>
<script src="dist/inputmask/inputmask.date.extensions.js"></script>
<script src="dist/inputmask/inputmask.phone.extensions.js"></script>
<script src="dist/inputmask/phone-codes/phone.js"></script>
<script src="dist/inputmask/phone-codes/phone-be.js"></script>
<script src="dist/inputmask/phone-codes/phone-ru.js"></script>
```

If you like to automatically bind the inputmask to the inputs marked with the data-inputmask- ... attributes you may also want to include the inputmask.binding.js

```html
...
<script src="dist/inputmask/bindings/inputmask.binding.js"></script>
...
```

###webpack

####Install the package
```
npm install inputmask --save-dev
```

####In your modules
If you want to include the Inputmask and all extensions.
```
var Inputmask = require('inputmask');
//es6
import Inputmask from "inputmask";
```

For individual extensions.
Every extension exports the Inputmask, so you only need to import the extensions.
See example.
```
require("inputmask/dist/inputmask/inputmask.numeric.extensions");
var Inputmask = require("inputmask/dist/inputmask/inputmask.date.extensions");
//es6
import "inputmask/dist/inputmask/inputmask.numeric.extensions";
import Inputmask from "inputmask/dist/inputmask/inputmask.date.extensions";
```

## Usage

### via Inputmask class

```javascript
var selector = document.getElementById("selector");

var im = new Inputmask("99-9999999");
im.mask(selector);


//or

Inputmask({"mask": "(999) 999-9999", .... other options .....}).mask(selector);
Inputmask("9-a{1,3}9{1,3}").mask(selector);
Inputmask("9", { repeat: 10 }).mask(selector);
```

via jquery plugin

```html
<script src="jquery.js"></script>
<script src="inputmask.js"></script>
<script src="inputmask.???.Extensions.js"></script>
<script src="jquery.inputmask.js"></script>
```

or with the bundled version

```html
<script src="jquery.js"></script>
<script src="jquery.inputmask.bundle.js"></script>
```
###via jquery plugin

```javascript
$(document).ready(function(){
Expand All @@ -79,7 +145,7 @@ $(document).ready(function(){
});
```

via data-inputmask attribute
###via data-inputmask attribute

```html
<input data-inputmask="'alias': 'date'" />
Expand All @@ -95,7 +161,7 @@ $(document).ready(function(){
});
```

Any option can also be passed through the use of a data attribute. Use data-inputmask-<**_the name of the option_**>="value"
####Any option can also be passed through the use of a data attribute. Use data-inputmask-<**_the name of the option_**>="value"

```html
<input id="example1" data-inputmask-clearmaskonlostfocus="false" />
Expand All @@ -109,35 +175,6 @@ $(document).ready(function(){
});
```

If you like to automatically bind the inputmask to the inputs marked with the data-inputmask- ... attributes you may also want to include the inputmask.binding.js

```html
...
<script src="inputmask.binding.js"></script>
...
```

If you use a module loader like requireJS

Have a look at the inputmask.loader.js for usage.

Example config.js

```javascript
paths: {
...
"inputmask.dependencyLib": "../dist/inputmask/inputmask.dependencyLib",
"inputmask": "../dist/inputmask/inputmask",
...
}
```

As dependencyLib you can choose between the supported libraries.
- inputmask.dependencyLib (vanilla)
- inputmask.dependencyLib.jquery
- inputmask.dependencyLib.jqlite
- .... (others are welcome)

### Allowed HTML-elements
- `<input type="text">`
- `<input type="tel">`
Expand Down
20 changes: 18 additions & 2 deletions js/inputmask.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -306,6 +306,7 @@
function MaskToken(isGroup, isOptional, isQuantifier, isAlternator) {
this.matches = [];
this.openGroup = isGroup || false;
this.alternatorGroup = false;
this.isGroup = isGroup || false;
this.isOptional = isOptional || false;
this.isQuantifier = isQuantifier || false;
Expand Down Expand Up @@ -511,6 +512,7 @@
alternator = openenings.pop();
for (var mndx = 0; mndx < alternator.matches.length; mndx++) {
alternator.matches[mndx].isGroup = false; //don't mark alternate groups as group
alternator.matches[mndx].alternatorGroup = false;
}
if (openenings.length > 0) {
currentOpeningToken = openenings[openenings.length - 1];
Expand Down Expand Up @@ -571,16 +573,30 @@
case opts.alternatormarker:
if (openenings.length > 0) {
currentOpeningToken = openenings[openenings.length - 1];
lastMatch = currentOpeningToken.matches.pop();
if (currentOpeningToken.openGroup) { //regexp alt syntax
lastMatch = openenings.pop();
} else
lastMatch = currentOpeningToken.matches.pop();
} else {
lastMatch = currentToken.matches.pop();
}
if (lastMatch.isAlternator) {
openenings.push(lastMatch);
} else {
alternator = new MaskToken(false, false, false, true);
if (lastMatch.alternatorGroup) {
alternator = openenings.pop();
lastMatch.alternatorGroup = false;
} else {
alternator = new MaskToken(false, false, false, true);
}
alternator.matches.push(lastMatch);
openenings.push(alternator);
if (lastMatch.openGroup) { //regexp alt syntax
lastMatch.openGroup = false;
var alternatorGroup = new MaskToken(true);
alternatorGroup.alternatorGroup = true;
openenings.push(alternatorGroup);
}
}
break;
default:
Expand Down

0 comments on commit 71e2d3c

Please sign in to comment.