add pipe type, refactor

Author: Kryazhev Alexey

dist/imask.js

@@ -4,6 +4,7 @@ import BaseMask from './masks/base';
 import RegExpMask from './masks/regexp';
 import FuncMask from './masks/func';
 import PatternMask from './masks/pattern';
+import PipeMask from './masks/pipe';
 
 
 export default
@@ -20,6 +21,7 @@ IMask.MaskFactory = function (el, opts) {
   if (mask instanceof BaseMask) return mask;
   if (mask instanceof RegExp) return new RegExpMask(el, opts);
   if (mask instanceof Function) return new FuncMask(el, opts);
+  if (mask instanceof Array) return new PipeMask(el, opts);
   if (isString(mask)) return new PatternMask(el, opts);
   return new BaseMask(el, opts);
 }

dist/imask.js.map

@@ -41,10 +41,11 @@ class BaseMask {
   set rawValue (str) {
     this.processInput(str, {
       cursorPos: str.length,
+      oldValue: this.rawValue,
       oldSelection: {
         start: 0,
         end: this.rawValue.length
-      },
+      }
     });
   }
 
@@ -95,12 +96,16 @@ class BaseMask {
 
 
   get selectionStart () {
-    return this.el.selectionStart;
+    return this._cursorChanging ?
+      this._changingCursorPos :
+
+      this.el.selectionStart;
   }
 
   get cursorPos () {
     return this._cursorChanging ?
       this._changingCursorPos :
+
       this.el.selectionEnd;
   }
 
@@ -133,14 +138,17 @@ class BaseMask {
 
     if (this.el.value !== value) this.el.value = value;
     if (this.cursorPos != cursorPos && cursorPos != null) {
-      // also queue change cursor for some browsers
-      if (this._cursorChanging) clearTimeout(this._cursorChanging);
-      this._changingCursorPos = cursorPos;
-      this._cursorChanging = setTimeout(() => {
-        this.cursorPos = this._changingCursorPos;
-        delete this._cursorChanging;
-      }, 10);
       this.cursorPos = cursorPos;
+
+      // also queue change cursor for mobile browsers
+      if (this._cursorChanging) clearTimeout(this._cursorChanging);
+      if (this.cursorPos != cursorPos) {
+        this._changingCursorPos = cursorPos;
+        this._cursorChanging = setTimeout(() => {
+          this.cursorPos = this._changingCursorPos;
+          delete this._cursorChanging;
+        }, 10);
+      }
     }
     this.saveSelection();
 
@@ -152,10 +160,6 @@ class BaseMask {
   }
 
   _onInput (ev) {
-    if (this._cursorChanging) {
-      ev.preventDefault();
-      return;
-    }
     this.processInput(this.el.value);
   }
 

dist/imask.min.js

@@ -0,0 +1,63 @@
+import BaseMask from './base';
+import {extendDetailsAdjustments} from '../utils';
+
+
+export default
+class PipeMask extends BaseMask {
+  constructor (el, opts) {
+    super(el, opts);
+
+    this.multipass = opts.multipass;
+
+    this._compiledMasks = this.mask.map(m => IMask.MaskFactory(el, m));
+  }
+
+  resolve (str, details) {
+    var res = this._pipe(str, details);
+    if (!this.multipass) return res;
+
+    var cursorPos = details.cursorPos;
+
+    var stepRes;
+    var tempRes = res;
+
+    while (stepRes !== tempRes) {
+      stepRes = tempRes;
+      tempRes = this._pipe(stepRes, {
+        cursorPos: stepRes.length,
+        oldValue: stepRes,
+        oldSelection: {
+          start: 0,
+          end: stepRes.length
+        }
+      });
+    }
+
+    details.cursorPos = cursorPos - (res.length - stepRes.length);
+
+    return stepRes;
+  }
+
+  _pipe (str, details) {
+    return this._compiledMasks.reduce((s, m) => {
+      var d = extendDetailsAdjustments(s, details);
+      var res = m.resolve(s, d);
+      details.cursorPos = d.cursorPos;
+      return res;
+    }, str);
+  }
+
+  bindEvents () {
+    super.bindEvents();
+    this._compiledMasks.forEach(m => {
+      m.bindEvents();
+      // disable basemask events for child masks
+      BaseMask.prototype.unbindEvents.apply(m);
+    });
+  }
+
+  unbindEvents () {
+    super.unbindEvents();
+    this._compiledMasks.forEach(m => m.unbindEvents());
+  }
+}