Merge pull request #312 from nymag/more-text-args

add autocomplete and autocapitalize to text input
clay · Dec 17, 2015 · 0eaa7f0 · 0eaa7f0
2 parents e2b9973 + fd9d295
commit 0eaa7f0
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 6 deletions.
diff --git a/behaviors/text.js b/behaviors/text.js
@@ -12,6 +12,48 @@ var dom = require('../services/dom'),
     'submit' // unsupported form-level input (i.e. we already have submit buttons)
   ];
 
+/**
+ * get attribute value of boolean fields
+ * e.g. autocomplete: false should be autocomplete="off" in html
+ * @param {boolean} value
+ * @returns {string}
+ */
+function onOff(value) {
+  return value ? 'on' : 'off';
+}
+
+/**
+ * add autocomplete if it exists
+ * @param {object} args
+ * @returns {string}
+ */
+function addAutocomplete(args) {
+  if (args.autocomplete !== undefined) {
+    return `autocomplete="${onOff(args.autocomplete)}"`;
+  } else {
+    return '';
+  }
+}
+
+/**
+ * add auto-capitalize if it exists
+ * @param {object} args
+ * @returns {string}
+ */
+function addAutocapitalize(args) {
+  var cap = args.autocapitalize;
+
+  if (cap !== undefined) {
+    if (_.isString(cap)) {
+      return `autocapitalize="${cap}"`;
+    } else {
+      return `autocapitalize="${onOff(cap)}"`;
+    }
+  } else {
+    return '';
+  }
+}
+
 /**
  * Replace result.el with input.
  * @param {{name: string, bindings: {}}} result
@@ -22,6 +64,9 @@ var dom = require('../services/dom'),
  * @param {number}  [args.minLength]   minimum number of characters required (blocking)
  * @param {number}  [args.maxLength]   maximum number of characters allowed (blocking)
  * @param {string}  [args.placeholder] placeholder that will display in the input
+ * @param {boolean}  [args.autocomplete] enable/disable autocomplete on field (defaults to true)
+ * @param {boolean|string}  [args.autocapitalize] enable/disable auto-capitalize on field (defaults to true). if set to "words" it will capitalize the first letter of each word
+ * (note: on recent mobile browsers, certain input types will have auto-capitalize disabled, e.g. emails)
  * @returns {*}
  */
 module.exports = function (result, args) {
@@ -47,6 +92,8 @@ module.exports = function (result, args) {
           class="input-text"
           rv-field="${name}"
           type="${type}"
+          ${addAutocomplete(args)}
+          ${addAutocapitalize(args)}
           rv-required="${name}.required"
           rv-pattern="${name}.pattern"
           rv-minLength="${name}.minLength"

diff --git a/behaviors/text.test.js b/behaviors/text.test.js
@@ -8,12 +8,21 @@ describe(dirname, function () {
   describe(filename, function () {
 
     var args = {
-      required: true,
-      pattern: /\S/,
-      minLength: 10,
-      maxLength: 20,
-      placeholder: 'abc'
-    };
+        required: true,
+        pattern: /\S/,
+        minLength: 10,
+        maxLength: 20,
+        placeholder: 'abc'
+      },
+      autoComplete = {
+        autocomplete: true
+      },
+      autoCap = {
+        autocapitalize: true
+      },
+      autoCapWords = {
+        autocapitalize: 'words'
+      };
 
     it('replaces the result.el', function () { // We could call this a "root" behavior
       var result,
@@ -44,6 +53,24 @@ describe(dirname, function () {
       expect(input.getAttribute('rv-value')).to.eql('foo.data.value');
     });
 
+    it('sets autocomplete', function () {
+      var input = lib(fixture, autoComplete).el.querySelector('input');
+
+      expect(input.getAttribute('autocomplete')).to.eql('on');
+    });
+
+    it('sets autocapitalize', function () {
+      var input = lib(fixture, autoCap).el.querySelector('input');
+
+      expect(input.getAttribute('autocapitalize')).to.eql('on');
+    });
+
+    it('sets autocapitalize to words', function () {
+      var input = lib(fixture, autoCapWords).el.querySelector('input');
+
+      expect(input.getAttribute('autocapitalize')).to.eql('words');
+    });
+
     it('has bindings', function () {
       var bindings = lib(fixture, args).bindings;