feat(WEB-821): Add onScreenChanged callback to widget

Author: Alfonso Cerrato

README.md

@@ -54,15 +54,15 @@ import * as typeformEmbed from "@typeform/embed";
 
 const MyTypeform = () => {
   const typeformRef = useRef(null);
-  
+
   useEffect(() => {
     typeformEmbed.makeWidget(typeformRef.current, 'https://form.typeform.com/to/MY_TYPEFORM_ID', {
       hideFooter: true,
       hideHeaders: true,
       opacity: 0,
     });
   }, [typeformRef]);
-  
+
   return (
     <div ref={typeformRef} style={{ height: '100vh', width: '100%'}}></div>
   );
@@ -82,16 +82,17 @@ typeformEmbed.makeWidget(element, url, options)
 - **url**: typeform's URL (like: `https://admin.typeform.com/to/PlBzgL`)
 - **options**: Object with the optional parameters:
 
-  | option         | description                                                                                                                                                    | values     | default |
-  |----------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------|------------|---------|
-  | opacity        | You can make your typeform's background totally transparent, or opaque. (For example, to have a video as a background)                                         | `Number`   | 100     |
-  | buttonText     | The button text that appears on mobile in order to open the typeform.                                                                                          | `String`   | "Start" |
-  | 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   |
-  | 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` | -       |
-    | transferableUrlParameters     | Parameters that we want to transfert from the URL to the Typeform as hidden fields | `Array`   | [] |
+  | option          | description                                                                                                                                                    | values     | default |
+  |-----------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------|------------|---------|
+  | opacity         | You can make your typeform's background totally transparent, or opaque. (For example, to have a video as a background)                                         | `Number`   | 100     |
+  | buttonText      | The button text that appears on mobile in order to open the typeform.                                                                                          | `String`   | "Start" |
+  | 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   |
+  | 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` | -       |
+  | onScreenChanged | Callback function that will be executed once the typeform's active screen changes.                                                                             | `Function` | -       |
+  | transferableUrlParameters | Parameters that we want to transfert from the URL to the Typeform as hidden fields | `Array`   | [] |
   #### Example:
 
   ```js

src/core/make-widget.js

@@ -24,7 +24,8 @@ const defaultOptions = {
   hideScrollbars: false,
   disableTracking: false,
   transferableUrlParameters: [],
-  onSubmit: noop
+  onSubmit: noop,
+  onScreenChanged: noop
 }
 
 const queryStringKeys = {

src/core/views/widget.js

@@ -129,6 +129,7 @@ class Widget extends Component {
     this.debouncedScroll = debounce(this.focusIframe, DEBOUNCE_WAIT, this)
     this.setIframeRef = this.setIframeRef.bind(this)
     this.sendFocusMessageToIframe = this.sendFocusMessageToIframe.bind(this)
+    this.handleFormScreenChanged = this.handleFormScreenChanged.bind(this)
   }
 
   componentDidMount () {
@@ -140,6 +141,7 @@ class Widget extends Component {
     window.addEventListener('welcome-screen-hidden', this.goFullScreen)
     window.addEventListener('redirect-after-submit', redirectToUrl)
     window.addEventListener('thank-you-screen-redirect', redirectToUrl)
+    window.addEventListener('form-screen-changed', this.handleFormScreenChanged)
 
     document.body.appendChild(this.fullScreenModalDiv)
   }
@@ -153,6 +155,7 @@ class Widget extends Component {
     window.removeEventListener('welcome-screen-hidden', this.goFullScreen)
     window.removeEventListener('redirect-after-submit', redirectToUrl)
     window.removeEventListener('thank-you-screen-redirect', redirectToUrl)
+    window.removeEventListener('form-screen-changed', this.handleFormScreenChanged)
 
     document.body.removeChild(this.fullScreenModalDiv)
   }
@@ -191,6 +194,12 @@ class Widget extends Component {
     })
   }
 
+  handleFormScreenChanged (event) {
+    if (this.props.options.onScreenChanged) {
+      this.props.options.onScreenChanged(event)
+    }
+  }
+
   handleMessage (event) {
     broadcastMessage(this.embedId, event)
   }