fix: Config option to allow native zoom overrides (#180)

Option for the user to allow HelloSign Embedded to override the viewport meta tag.

---------

Co-authored-by: Asa Ayers <AsaAyers@Dropbox.com>

src/defaults.js

@@ -4,4 +4,5 @@ export default {
   skipDomainVerification: false,
   testMode: false,
   timeout: 30000, // 30 seconds
+  allowViewportOverride: false,
 };

src/embedded.js

@@ -52,6 +52,16 @@ class HelloSign extends Emitter {
    */
   static version = __PKG_VERSION__;
 
+  /**
+   * Internal reference to the backup viewport content. Used
+   * if the "allowViewportOverride" config option is set to
+   * true.
+   *
+   * @type {?string}
+   * @private
+   */
+  _backupViewportContent = null;
+
   /**
    * The base config object which "open" will extend.
    *
@@ -627,6 +637,52 @@ class HelloSign extends Emitter {
     }
   }
 
+  /**
+   * Overrides the viewport meta tag to use maximum-scale=1,
+   * if it is not already present. This is needed to prevent
+   * browsers from automatically zooming into text fields.
+   * This will only be applied if there is an existing
+   * viewport meta tag on the page.
+   *
+   * @private
+   */
+  _blockNativeZoom() {
+    const viewport = document.querySelector('meta[name=viewport]');
+
+    if (viewport) {
+      const content = viewport.getAttribute('content') || '';
+      const newContentPairs = content.split(/,\s?/);
+
+      // Prevent browsers from automatically zooming into
+      // text fields.
+      if (!content.includes('maximum-scale=1')) {
+        newContentPairs.push('maximum-scale=1');
+      }
+
+      const newContent = newContentPairs.join(',');
+      if (newContent !== viewport.getAttribute('content')) {
+        viewport.setAttribute('content', newContent);
+        this._backupViewportContent = content;
+      }
+    }
+  }
+
+  /**
+   * Restores the viewport using the original value of the
+   * initial viewport meta tag.
+   *
+   * @private
+   */
+  _restoreViewport() {
+    if (this._backupViewportContent) {
+      const viewport = document.querySelector('meta[name=viewport]');
+
+      viewport.setAttribute('content', this._backupViewportContent);
+
+      this._backupViewportContent = null;
+    }
+  }
+
   /**
    * @event HelloSign#error
    * @type {Object}
@@ -1051,6 +1107,10 @@ class HelloSign extends Emitter {
     this._appendMarkup();
     this._maybeStartInitTimeout();
 
+    if (this._config.allowViewportOverride) {
+      this._blockNativeZoom();
+    }
+
     this._isOpen = true;
 
     window.addEventListener('message', this._onMessage);
@@ -1081,6 +1141,10 @@ class HelloSign extends Emitter {
     this._clearInitTimeout();
     this._clearMarkup();
 
+    if (this._config.allowViewportOverride) {
+      this._restoreViewport();
+    }
+
     this._baseEl.removeEventListener('click', this._onEmbeddedClick);
 
     this._config = null;