Add revealing mask feature

Revealing mask only shows static and placeholder characters contained within the current value
Example:
Given an input with a mask of '111-1111 x 111', a value of '47', and isRevealingMask set to true, then the input's value is '47'
Given the same input but with a value of '476', then the input's value is formatted as '476-'
Given the same input but with a value of '47 3191', then the input's value is formatted as '47_-3191 x '

Author: Nick Gard

lib/index.js

@@ -68,7 +68,7 @@ var DEFAULT_FORMAT_CHARACTERS = {
  * @param {string} source
  * @patam {?Object} formatCharacters
  */
-function Pattern(source, formatCharacters, placeholderChar) {
+function Pattern(source, formatCharacters, placeholderChar, isRevealingMask) {
   if (!(this instanceof Pattern)) {
     return new Pattern(source, formatCharacters, placeholderChar)
   }
@@ -87,9 +87,10 @@ function Pattern(source, formatCharacters, placeholderChar) {
   this.firstEditableIndex = null
   /** Index of the last editable character. */
   this.lastEditableIndex = null
-
   /** Lookup for indices of editable characters in the pattern. */
   this._editableIndices = {}
+  /** If true, only the pattern before the last valid value character shows. */
+  this.isRevealingMask = isRevealingMask || false
 
   this._parse()
 }
@@ -139,6 +140,11 @@ Pattern.prototype.formatValue = function format(value) {
 
   for (var i = 0, l = this.length; i < l ; i++) {
     if (this.isEditableIndex(i)) {
+      if (this.isRevealingMask &&
+          value.length <= valueIndex &&
+          !this.isValidAtIndex(value[valueIndex], i)) {
+        break
+      }
       valueBuffer[i] = (value.length > valueIndex && this.isValidAtIndex(value[valueIndex], i)
                         ? this.transform(value[valueIndex], i)
                         : this.placeholderChar)
@@ -181,10 +187,10 @@ Pattern.prototype.transform = function transform(char, index) {
 
 function InputMask(options) {
   if (!(this instanceof InputMask)) { return new InputMask(options) }
-
   options = extend({
     formatCharacters: null,
     pattern: null,
+    isRevealingMask: false,
     placeholderChar: DEFAULT_PLACEHOLDER_CHAR,
     selection: {start: 0, end: 0},
     value: ''
@@ -202,7 +208,8 @@ function InputMask(options) {
   this.formatCharacters = mergeFormatCharacters(options.formatCharacters)
   this.setPattern(options.pattern, {
     value: options.value,
-    selection: options.selection
+    selection: options.selection,
+    isRevealingMask: options.isRevealingMask
   })
 }
 
@@ -447,7 +454,7 @@ InputMask.prototype.setPattern = function setPattern(pattern, options) {
     selection: {start: 0, end: 0},
     value: ''
   }, options)
-  this.pattern = new Pattern(pattern, this.formatCharacters, this.placeholderChar)
+  this.pattern = new Pattern(pattern, this.formatCharacters, this.placeholderChar, options.isRevealingMask)
   this.setValue(options.value)
   this.emptyValue = this.pattern.formatValue([]).join('')
   this.selection = options.selection

test/index.js

@@ -45,7 +45,7 @@ test('formatValueToPattern', function(t) {
 })
 
 test('Constructor options', function(t) {
-  t.plan(21)
+  t.plan(24)
 
   t.throws(function() { new InputMask() },
            /InputMask: you must provide a pattern./,
@@ -113,6 +113,14 @@ test('Constructor options', function(t) {
   t.equal(mask.getValue(), '___ ___', 'null value treated as blank')
   mask = new InputMask({pattern: '111 111', value: undefined})
   t.equal(mask.getValue(), '___ ___', 'undefined value treated as blank')
+
+  // Mask is progressive
+  mask = new InputMask({pattern: '111-1111 x 111', value: '47', isRevealingMask: true})
+  t.equal(mask.getValue(), '47', 'no mask characters or placeholders are revealed')
+  mask = new InputMask({pattern: '111-1111 x 111', value: '476', isRevealingMask: true})
+  t.equal(mask.getValue(), '476-', 'mask is revealed up to the next editable character')
+  mask = new InputMask({pattern: '111-1111 x 111', value: '47 3191', isRevealingMask: true})
+  t.equal(mask.getValue(), '47_-3191 x ', 'mask is revealed up to the last value')
 })
 
 test('Formatting characters', function(t) {