@formsort/web-embed-api - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

lib/index.d.ts

 import { IIFrameAnalyticsEventData, IIFrameRedirectEventData } from './interfaces';
+interface IFormsortWebEmbedConfig {
+    useHistoryAPI: boolean;
+}
 declare class FormsortWebEmbed {
@@ -8,3 +11,4 @@ private rootEl;
     private onFlowFinalizedCallback?;
-    constructor(rootEl: HTMLElement);
+    private config;
+    constructor(rootEl: HTMLElement, config?: IFormsortWebEmbedConfig);
     setSize: (width: string, height: string) => void;
@@ -11,0 +15,0 @@ onFlowLoaded: () => void;

lib/index.js

@@ -6,5 +6,7 @@ "use strict";
 var FLOW_ORIGIN = FS_ORIGIN || "https://flow.formsort.com";
+var DEFAULT_CONFIG = { useHistoryAPI: false };
 var FormsortWebEmbed = /** @class */ (function () {
-    function FormsortWebEmbed(rootEl) {
+    function FormsortWebEmbed(rootEl, config) {
         var _this = this;
+        if (config === void 0) { config = DEFAULT_CONFIG; }
         this.setSize = function (width, height) {
@@ -55,4 +57,20 @@ _this.iframeEl.style.width = width;
         this.onRedirectMessage = function (redirectData) {
+            var currentUrl = window.location.href;
+            var currentHash = window.location.hash.slice(1);
+            var currentUrlBase = currentUrl.replace(currentHash, '');
             var url = redirectData.payload;
-            window.location.assign(url);
+            var hashIndex = url.indexOf('#');
+            var urlHash = hashIndex >= 0 ? url.slice(hashIndex + 1) : undefined;
+            var urlBase = urlHash !== undefined ? url.replace(urlHash, '') : url;
+            if (urlHash && urlBase === currentUrlBase && urlHash !== currentHash) {
+                window.location.hash = urlHash;
+            }
+            if (_this.config.useHistoryAPI &&
+                'history' in window &&
+                url.indexOf(window.location.origin) === 0) {
+                window.history.pushState({}, document.title, url);
+            }
+            else {
+                window.location.assign(url);
+            }
         };
@@ -70,2 +88,3 @@ this.removeListeners = function () {
         this.rootEl = rootEl;
+        this.config = config;
         var iframeEl = document.createElement('iframe');
@@ -72,0 +91,0 @@ iframeEl.style.border = 'none';

package.json

 {
   "name": "@formsort/web-embed-api",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Embed Formsort flows within other webpages",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -10,3 +10,3 @@ # @formsort/web-embed-api
 ```
-npm install @formsort/web-embed-api
+npm install @formsort/web-embed-api --save
 ```
@@ -18,6 +18,20 @@
 
-### FormsortWebEmbed(rootEl: HTMLElement)
+### FormsortWebEmbed(rootEl: HTMLElement, config?: IFormsortWebEmbedConfig)
 
 Initializes a Formsort iframe as a child of the `rootEl` provided.
 
+The config has the following type:
+
+```
+interface IFormsortWebEmbedConfig {
+  useHistoryAPI: boolean; // Default: false
+}
+```
+
+#### Description
+
+- `useHistoryAPI`: When redirecting, should we use the HTML5 History API (namely, `window.pushState`), or just change the URL in its entirety?
+
+  Helpful if you have a single-page app and want to change the container's URL without reloading the entire page. Note that you'll have to listen to the `popstate` event on the embedding `window` to detect this navigation.
+
 ### `loadFlow(clientLabel: string, flowLabel: string, variantLabel?: string) => void`
@@ -24,0 +38,0 @@

No alert changes

Improved metrics

Total package byte prevSize

10847

increased by17.56%

Lines of code

151

increased by17.97%

Number of lines in readme file

74

increased by23.33%

No dependency changes