ソースを参照

extend alternator syntax to regexp-like syntax

Robin Herbots 8 年 前
コミット
71e2d3c596
2 ファイル変更107 行追加54 行削除
  1. 89 52
      README.md
  2. 18 2
      js/inputmask.js

+ 89 - 52
README.md

@@ -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(){
@@ -79,7 +145,7 @@ $(document).ready(function(){
 });
 ```
 
-via data-inputmask attribute
+###via data-inputmask attribute
 
 ```html
 <input data-inputmask="'alias': 'date'" />
@@ -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" />
@@ -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">`

+ 18 - 2
js/inputmask.js

@@ -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;
@@ -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];
@@ -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: