fix(DIST-193): Fix for autoOpen backward compatibility

Also add docs for behavioral triggers functionality.
Typeform · Jun 12, 2020 · c1a8627 · c1a8627
1 parent e295c2b
commit c1a8627
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -57,7 +57,7 @@ typeformEmbed.makeWidget(element, url, options)
   | hideFooter     | Hide typeform footer, that appears showing the progress bar and the navigation buttons.                                                                        | `Boolean`  | false   |
   | hideHeaders    | Hide typeform header, that appears when you have a Question group, or a long question that you need to scroll through to answer, like a Multiple Choice block. | `Boolean`  | false   |
   | onSubmit       | Callback function that will be executed right after the typeform is successfully submitted.                                                                    | `Function` | -       |
-  | onReady       | Callback function that will be executed once the typeform is ready.                                                                                             | `Function` | -       |
+  | onReady        | Callback function that will be executed once the typeform is ready.                                                                                            | `Function` | -       |
 
   #### Example:
 
@@ -95,27 +95,33 @@ typeformEmbed.makePopup(url, options)
 
   | option         | description                                                                                                                                                    | values                                                                        | default |
   |----------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------|---------|
-  | mode           | ![typeform Embed Popup modes](/documentation/popup.png) <br/> The way of showing the embed                                                                     | `String` any of: <br/> `"popup"` <br/> `"drawer_left"` <br/> `"drawer_right"` | "popup" |
-  | autoOpen       | Your typeform will launch as soon as your web page is opened                                                                                                   | `Boolean`                                                                     | false   |
-  | autoClose      | Time until the embedded typeform will automatically close after a respondent clicks the Submit button. The default time is 5 seconds. PRO+ users can change the `autoClose` time. | `Number` (seconds)                                                        | -       |
+  | mode           | The way of showing the popup                                                                                                                                   | `String` any of: <br/> `"popup"` <br/> `"drawer_left"` <br/> `"drawer_right"` <br/> `"side-panel"` <br/> `"popover"` | "popup" |
+  | ❌ autoOpen    | Your typeform will launch as soon as your web page is opened **Deprecated:** Use `open: "load"` instead                                                        | `Boolean`                                                                     | false   |
+  | 💡 open        | Your typeform will launch based on behavioral triggers                                                                                                         | `String` any of: <br/> `"exit"` <br/> `"load"` <br/> `"scroll"` <br/> `"time"`| null    |
+  | 💡 openValue   | Configuration for behavioral triggers. Based on `open`: <br/> - `"exit"`: exit threshold in pixels <br/> - `"scroll"`: % of page scrolled <br/> * `"time"`: time in milliseconds  | `Number`                                                   | null    |
+  | autoClose      | Time until the embedded typeform will automatically close after a respondent clicks the Submit button. The default time is 5 seconds. PRO+ users can change the `autoClose` time. | `Number` (seconds)                                         | -       |
   | hideScrollbars | Hide fixed scrollbars.                                                                                                                                         | `Boolean`                                                                     | false   |
   | hideFooter     | Hide typeform footer, that appears showing the progress bar and the navigation buttons.                                                                        | `Boolean`                                                                     | false   |
   | hideHeaders    | Hide typeform header, that appears when you have a Question group, or a long question that you need to scroll through to answer, like a Multiple Choice block. | `Boolean`                                                                     | false   |
-  | drawerWidth    | Specify the width of the drawer (only applies if using `mode` `"drawer_left"` or `"drawer_right"`).                                                             | `Number` (pixels)                                                            | 800     |
+  | drawerWidth    | Specify the width of the drawer (only applies if using `mode` `"drawer_left"` or `"drawer_right"`).                                                            | `Number` (pixels)                                                             | 800     |
   | onSubmit       | Callback function that will be executed right after the typeform is successfully submitted.                                                                    | `Function`                                                                    | -       |
-  | onReady        | Callback function that will be executed once the typeform is ready.                                                                                            |
-  `Function`                                                                    | -       |
-  | onClose        | Callback function that will be executed once the typeform is closed.                                                                                            |
-  `Function`                                                                    | -       |
+  | onReady        | Callback function that will be executed once the typeform is ready.                                                                                            | `Function`                                                                    | -       |
+  | onClose        | Callback function that will be executed once the typeform is closed.                                                                                           | `Function`                                                                    | -       |
 
-  #### Example:
+Types:
+
+- ❌ Deprecated option. Will be removed in future.
+- 💡 Experimental option. Implementation might change in future without prior notice. Use at your own risk.
+
+#### Example:
 
   ```js
   typeformEmbed.makePopup(
     'https://admin.typeform.com/to/PlBzgL',
     {
       mode: 'drawer_left',
-      autoOpen: true,
+      open: 'scroll',
+      openValue: 30,
       autoClose: 3,
       hideScrollbars: true,
       onSubmit: function () {

diff --git a/documentation/popup.png b/documentation/popup.png
diff --git a/src/core/attributes.js b/src/core/attributes.js
@@ -44,6 +44,10 @@ const sanitizePopupAttributes = data => {
     obj.autoClose = submitCloseDelay
   }
 
+  if (data.autoOpen === '' || data.autoOpen === 'true') {
+    obj.autoOpen = true
+  }
+
   if (data.hideHeaders === '' || data.hideHeaders === 'true') {
     obj.hideHeaders = true
   }
@@ -59,8 +63,6 @@ const sanitizePopupAttributes = data => {
   if (data.open) {
     obj.open = data.open
     obj.openValue = data.openValue
-  } else if (data.autoOpen === '' || data.autoOpen === 'true') { // legacy auto-open attribute
-    obj.open = 'load'
   }
 
   return obj

diff --git a/src/core/attributes.spec.js b/src/core/attributes.spec.js
@@ -11,14 +11,18 @@ describe('Attributes', () => {
       popupMockElem.setAttribute('data-mode', 'popup')
       popupMockElem.setAttribute('data-submit-close-delay', 10)
       popupMockElem.setAttribute('data-auto-open', true)
+      popupMockElem.setAttribute('data-open', 'scroll')
+      popupMockElem.setAttribute('data-open-value', 20)
       popupMockElem.setAttribute('data-hide-headers', '')
       popupMockElem.setAttribute('data-hide-footer', false)
       popupMockElem.setAttribute('data-invalid-attribute', true)
 
       const popupOptions = {
         mode: 'popup',
         autoClose: 10,
-        open: 'load',
+        autoOpen: true,
+        open: 'scroll',
+        openValue: '20',
         hideHeaders: true
       }
 

diff --git a/src/core/make-popup.js b/src/core/make-popup.js
@@ -131,6 +131,10 @@ export default function makePopup (url, options) {
     }
   }
 
+  if (!options.open && options.autoOpen) { // legacy auto-open attribute
+    options.open = 'load'
+  }
+
   handleAutoOpen(popup, options.open, options.openValue)
 
   return popup