Merge pull request #420 from recurly/revert-396-mobile-tabbing

Revert "Mobile Tabbing for Recurly.js"
recurly · Jan 17, 2018 · cf739cf · cf739cf
2 parents 617e326 + 5542ef3
commit cf739cf
Show file tree

Hide file tree

Showing 10 changed files with 95 additions and 257 deletions.
diff --git a/karma.conf.js b/karma.conf.js
@@ -20,14 +20,14 @@ var staticConfig = {
   autoWatch: true,
   browsers: [
     'PhantomJS'
-    //'IE11 - Win7'
+    // 'IE11 - Win7'
   ],
   singleRun: true,
   concurrency: Infinity,
-  browserDisconnectTimeout: 800000,
-  browserDisconnectTolerance : 4,
-  browserNoActivityTimeout: 800000,
-  captureTimeout: 800000,
+  browserDisconnectTimeout: 240000,
+  browserDisconnectTolerance : 1,
+  browserNoActivityTimeout: 240000,
+  captureTimeout: 240000,
   customLaunchers: {
     PhantomJSDebug: {
       base: 'PhantomJS',
@@ -41,7 +41,7 @@ var staticConfig = {
   client: {
     captureConsole: true,
     mocha: {
-      timeout : 800000, // 800 seconds
+      timeout : 20000, // 20 seconds
       grep: ''
     }
   }

diff --git a/lib/recurly.js b/lib/recurly.js
@@ -134,6 +134,7 @@ export class Recurly extends Emitter {
 
   configure (options) {
     debug('configure');
+
     options = clone(options);
 
     if (typeof options === 'string') options = { publicKey: options };
@@ -173,9 +174,8 @@ export class Recurly extends Emitter {
     this.config.required = options.required || this.config.required || [];
 
     // Begin parent role configuration and setup
-    if (this.config.parent) {
-      this.parent();
-    } else {
+    if (this.config.parent) this.parent();
+    else {
       if (options.parentVersion) this.config.parentVersion = options.parentVersion;
     }
 

diff --git a/lib/recurly/hosted-field.js b/lib/recurly/hosted-field.js
@@ -3,7 +3,6 @@ import clone from 'component-clone';
 import dom from '../util/dom';
 import errors from '../errors';
 
-const bowser = require('bowser');
 const debug = require('debug')('recurly:hostedField');
 
 /**
@@ -84,6 +83,7 @@ export class HostedField extends Emitter {
   }
 
   // Private
+
   configure (options) {
     options = clone(options);
     this.target = dom.element(global.document.querySelector(options.selector));
@@ -95,46 +95,27 @@ export class HostedField extends Emitter {
   }
 
   inject () {
-    this.target.innerHTML = this.fieldHtml();
-    this.container = this.target.children[0]; // recurly-hosted-field
-
-    if (isMobile()) {
-      this.injectMobileElements();
-    } else {
-      this.iframe = this.container.children[0];
-    }
+    this.target.innerHTML = `
+      <div class="${this.classList}">
+        <iframe
+          src="${this.url}"
+          border="0"
+          frameborder="0"
+          allowtransparency="true"
+          scrolling="no">
+        </iframe>
+      </div>
+    `;
 
+    this.container = this.target.children[0];
+    this.iframe = this.container.children[0];
     this.window = this.iframe.contentWindow;
+
     this.iframe.style.height = '100%';
     this.iframe.style.width = '100%';
     this.iframe.style.background = 'transparent';
   }
 
-  injectMobileElements() {
-    this.tabbingProxy = this.container.children[0];
-    this.iframe = this.container.children[1];
-    this.bindDeferredFocusOnTabbingProxy();
-  }
-
-  fieldHtml () {
-    return `<div class="${this.classList}">
-      ${isMobile() ? dom.createHiddenInput().outerHTML : ''}
-      <iframe
-        src="${this.url}"
-        border="0"
-        frameborder="0"
-        allowtransparency="true"
-        scrolling="no">
-      </iframe>
-      </div>
-    `;
-  }
-
-  bindDeferredFocusOnTabbingProxy () {
-    if (this.tabbingProxy === undefined) return;
-    this.tabbingProxy.addEventListener('focus', () => this.focus());
-  }
-
   bindDeferredFocus () {
     this.container.addEventListener('click', this.focus);
     if (!this.target.id) return;
@@ -181,12 +162,3 @@ export class HostedField extends Emitter {
     this.bus.send(`hostedField:${this.type}:focus!`);
   }
 }
-
-/**
- * Determine if user's browser is mobile or non-mobile
- * @return {Boolean} value
- */
-
-function isMobile() {
-  return bowser.mobile || bowser.tablet;
-}
diff --git a/lib/recurly/hosted-fields.js b/lib/recurly/hosted-fields.js
@@ -1,6 +1,5 @@
 import clone from 'component-clone';
 import Emitter from 'component-emitter';
-import tabbable from 'tabbable';
 import {HostedField} from './hosted-field';
 import deepAssign from '../util/deep-assign';
 import errors from '../errors';
@@ -30,8 +29,6 @@ export class HostedFields extends Emitter {
     this.readyState = 0;
     this.configure(options);
     this.inject();
-    this.on('hostedField:tab:previous', this.onTab.bind(this, 'previous'));
-    this.on('hostedField:tab:next', this.onTab.bind(this, 'next'));
     this.on('hostedField:state:change', this.update.bind(this));
     this.on('bus:added', bus => {
       this.bus = bus;
@@ -66,7 +63,7 @@ export class HostedFields extends Emitter {
   }
 
   inject () {
-    this.on('hostedField:ready', this.onReady.bind(this));
+    this.on('hostedField:ready', this.readyHandler.bind(this));
     FIELD_TYPES.forEach(type => {
       try {
         this.fields.push(new HostedField(this.fieldConfig(type)));
@@ -112,38 +109,17 @@ export class HostedFields extends Emitter {
     this.initQueue = [];
   }
 
-  onReady (body) {
+  readyHandler (body) {
     const pos = this.initQueue.indexOf(body.type);
     if (~pos) this.initQueue.splice(pos, 1);
     if (this.initQueue.length === 0) {
-      this.off('hostedField:ready', this.onReady);
+      this.off('hostedField:ready', this.readyHandler);
       this.bus.send('hostedFields:ready');
       this.ready = true;
     }
     this.update(body);
   }
 
-  onTab (direction, message) {
-    const origin = this.getFieldByType(message.type);
-    let tabbableItems = this.tabbableItems();
-    let destination;
-
-    // Find the origin within the tabbable list, and focus in our intended direction
-    tabbableItems.forEach((tabbableItem, i) => {
-      if (origin instanceof HostedField) {
-        if (origin.tabbingProxy == tabbableItem) {
-          destination = direction == 'previous' ? tabbableItems[i - 1] : tabbableItems[i + 1];
-        }
-      }
-    });
-
-    if (destination) destination.focus();
-  }
-
-  tabbableItems () {
-    return tabbable(global.document.body);
-  }
-
   update (body) {
     let newState = Object.assign({}, body);
     delete newState.type;
@@ -164,8 +140,4 @@ export class HostedFields extends Emitter {
       recurly: this.config.recurly
     };
   }
-
-  getFieldByType (type) {
-    return this.fields.filter(f => f.config.type === type)[0];
-  }
 }
diff --git a/lib/util/dom.js b/lib/util/dom.js
@@ -10,11 +10,10 @@ var each = require('component-each');
  */
 
 module.exports = {
-  createHiddenInput: createHiddenInput,
-  data: data,
   element: element,
-  findNodeInParents: findNodeInParents,
-  value: value
+  value: value,
+  data: data,
+  findNodeInParents: findNodeInParents
 };
 
 /**
@@ -187,17 +186,3 @@ function findNodeInParents(node, targetTagName) {
   if (node.tagName.match(RegExp(targetTagName, 'i'))) return node;
   return findNodeInParents(node.parentNode, targetTagName);
 }
-
-/**
- * Utility function to create a hidden input element
- * @return {InputElement}
- */
-function createHiddenInput (attributes = {}) {
-  let hidden = global.document.createElement(attributes.type === 'button' ? 'button' : 'input');
-  if (!('type' in attributes)) attributes.type = 'text';
-  if (!('style' in attributes)) attributes.style = 'position: absolute; top: 0px; left: -1000px; opacity: 0;';
-
-  Object.keys(attributes).forEach(attr => hidden.setAttribute(attr, attributes[attr]));
-
-  return hidden;
-}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -38,7 +38,6 @@
     "babel-loader": "^7.1.2",
     "babel-plugin-transform-object-assign": "^6.22.0",
     "babel-preset-es2015": "^6.24.0",
-    "bowser": "^1.9.0",
     "combinations": "^0.1.1",
     "css-loader": "^0.28.7",
     "extract-text-webpack-plugin": "^3.0.2",
@@ -78,7 +77,6 @@
     "phantomjs-prebuilt": "^2.1.14",
     "sinon": "^2.1.0",
     "style-loader": "^0.19.0",
-    "tabbable": "^1.1.2",
     "webpack": "^3.9.1",
     "webpack-dev-server": "^2.9.5"
   }