Merge pull request #97 from Typeform/dist225

feat(DIST-225): Allow transparent welcome screen on mobile
Typeform · Nov 16, 2020 · f84a424 · f84a424
2 parents 1c5ff6d + 40f78be
commit f84a424
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -213,9 +213,6 @@ If you want to override this behaviour, the best option is to use the API with `
 ### After opening a typeform in mobile, a `<meta name="viewport">` tag is added to the document
 This tag is needed for the correct visualization of the typeform. This is only a problem if you don't have this tag in your site.
 
-### Transparency is not applied on mobile
-We do not apply transparency on modals, and all embed types behave like a modal in mobile.
-
 ### Typeform does not look good with a small embed
 Although we have no hard limit, we recommend having a height of at least 350px.
 

diff --git a/demo/index.html b/demo/index.html
@@ -14,6 +14,7 @@ <h2>Embed snippet</h2>
     <ul>
       <li><a href="./widget-v3.html">Widget accepting form and embed library version as URL parameters</a></li>
       <li><a href="./widget.html">Widget *</a></li>
+      <li><a href="./widget-transparent.html">Widget with trasnparent background *</a></li>
       <li><a href="./widget-legacy.html">Widget with legacy hidden fields *</a></li>
       <li><a href="./widget-v2.html">Widget with long text</a></li>
       <li><a href="./multi-widget.html">Multiple widgets</a></li>

diff --git a/demo/widget-transparent.html b/demo/widget-transparent.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Widget (legacy hidden fields) example</title>
+    <meta charset="utf-8" />
+    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
+    <link rel="stylesheet" href="demo.css" />
+    <style>
+      body {
+        background-image: url('https://images.unsplash.com/photo-1583706564177-f5cda790d4aa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1024&q=80');
+        background-size: cover;
+        background-position: center center;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      class="typeform-widget"
+      data-url="https://form.typeform.com/to/QvdKFFXo"
+      data-transferable-url-parameters="utm_source"
+      data-transparency=50
+      style="width:80%;height:400px;margin:100px auto;"
+    ></div>
+
+    <script type="text/javascript" src="demo.js"></script>
+    <script type="text/javascript" src="embed.js"></script>
+  </body>
+</html>
diff --git a/src/core/make-widget.js b/src/core/make-widget.js
@@ -4,8 +4,7 @@ import { render } from 'react-dom'
 import {
   appendParamsToUrl,
   replaceExistingKeys,
-  noop,
-  omit
+  noop
 } from './utils'
 import {
   transferUrlParametersToQueryStrings
@@ -46,8 +45,7 @@ export default function makeWidget (element, url, options) {
 
   if (enabledFullscreen) {
     queryStrings = {
-      // We don't set the opacity on the iframe when is mobile
-      ...omit('embed-opacity', queryStrings),
+      ...queryStrings,
       'add-placeholder-ws': true
     }
   }

diff --git a/src/core/make-widget.spec.js b/src/core/make-widget.spec.js
@@ -53,7 +53,6 @@ describe('makeWidget', () => {
     const widgetURL = component.props.url
     const { query } = UrlParse(widgetURL, true)
     expect(query['add-placeholder-ws']).toBe('true')
-    expect(query['embed-opacity']).toBeUndefined()
     expect(query['mandarina']).toBeUndefined()
 
     expect(component.type.name).toEqual('Widget')

diff --git a/src/core/utils/index.js b/src/core/utils/index.js
@@ -104,13 +104,6 @@ export const debounce = (func, wait, context) => {
 
 export const noop = () => null
 
-export const omit = (key, object) => {
-  const {
-    [key]: deletedKey, ...otherKeys
-  } = object
-  return otherKeys
-}
-
 export const redirectToUrl = event => {
   const { url } = event.detail
 
@@ -128,3 +121,7 @@ export const redirectToUrl = event => {
 export const getSubmitEventData = (event) => {
   return { response_id: event && event.detail ? event.detail.response_id : undefined }
 }
+
+export const removeColorTransparency = (color) => {
+  return `${color}`.replace(/rgba\((.*),\s?[\d.]+\)/, 'rgb($1)')
+}
diff --git a/src/core/utils/index.spec.js b/src/core/utils/index.spec.js
@@ -165,4 +165,17 @@ describe('Utilities', () => {
       expect(utils.getSubmitEventData({ detail: {} })).toEqual({ response_id: undefined })
     })
   })
+
+  describe('removeColorTransparency', () => {
+    test('should remove transparency', () => {
+      expect(utils.removeColorTransparency('rgba(255, 0, 0, 0.5)')).toBe('rgb(255, 0, 0)')
+      expect(utils.removeColorTransparency('rgba(255,0,0,1)')).toBe('rgb(255,0,0)')
+      expect(utils.removeColorTransparency('rgba(255,0,0,.25)')).toBe('rgb(255,0,0)')
+    })
+
+    test('return the same color if there is no transparency', () => {
+      expect(utils.removeColorTransparency('#ff0000')).toBe('#ff0000')
+      expect(utils.removeColorTransparency('rgb(255, 0, 0)')).toBe('rgb(255, 0, 0)')
+    })
+  })
 })
diff --git a/src/core/views/widget.js b/src/core/views/widget.js
@@ -10,7 +10,8 @@ import {
   callIfEmbedIdMatches,
   updateQueryStringParameter,
   redirectToUrl,
-  getSubmitEventData
+  getSubmitEventData,
+  removeColorTransparency
 } from '../utils'
 import randomString from '../utils/random-string'
 
@@ -163,8 +164,7 @@ class Widget extends Component {
   goFullScreen () {
     if (this.props.enabledFullscreen) {
       this.setState({ isFullscreen: true })
-
-      setTimeout(this.reloadIframe, 3000)
+      setTimeout(this.reloadIframe, 500)
     }
   }
 
@@ -259,7 +259,14 @@ class Widget extends Component {
       inlineIframeUrl = updateQueryStringParameter('disable-tracking', 'true', inlineIframeUrl)
     }
 
-    const fullscreenIframeUrl = updateQueryStringParameter('typeform-welcome', '0', url)
+    let fullscreenIframeUrl = updateQueryStringParameter('typeform-welcome', '0', url)
+
+    // fullscreen modal window should not have transparency because it has to cover the host page under it
+    fullscreenIframeUrl = updateQueryStringParameter('embed-opacity', '100', fullscreenIframeUrl)
+
+    // placeholder background should match background of the welcome screen when modal is closed (it might be transparent)
+    // when the fullscreen modal is opened it should match background of the modal (modal background is never transparent)
+    const placeholderBackgroundColor = isFullscreen ? removeColorTransparency(backgroundColor) : backgroundColor
 
     return (
       <WidgetWrapper ref={this.wrapperRef}>
@@ -276,7 +283,7 @@ class Widget extends Component {
         </IframeWrapper>
         { enabledFullscreen &&
             <Placeholder
-              backgroundColor={backgroundColor}
+              backgroundColor={placeholderBackgroundColor}
               bottom={iframePosition && iframePosition.bottom}
               height={iframePosition && iframePosition.height}
               left={iframePosition && iframePosition.left}