[skip ci] update demos

Typeform · Feb 23, 2024 · a240c30 · a240c30
1 parent e86e172
commit a240c30
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 113 deletions.
diff --git a/README.md b/README.md
@@ -19,8 +19,8 @@ Demos for [@typeform/embed](https://github.com/Typeform/embed).
 13. [popup-js](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/popup-js)
 14. [preselect-html](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/preselect-html)
 15. [prevent-reopen-on-close-html](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/prevent-reopen-on-close-html)
-16. [prevent-reopen-on-close-js](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/prevent-reopen-on-close-js)
-17. [reload-event](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/reload-event)
+16. [reload-event](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/reload-event)
+17. [respect-js](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/respect-js)
 18. [scroll-html](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/scroll-html)
 19. [scroll-js](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/scroll-js)
 20. [sidetab-customized-html](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/sidetab-customized-html)

diff --git a/demo-html/prevent-reopen-on-close-html/index.html b/demo-html/prevent-reopen-on-close-html/index.html
@@ -1,72 +1,73 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <title>Open: time (via embed code)</title>
+    <title>Open: data-tf-prevent-reopen-on-close</title>
     <link rel="stylesheet" href="//embed.typeform.com/next/css/sidetab.css" />
+    <link rel="stylesheet" href="//embed.typeform.com/next/css/popover.css" />
+    <link rel="stylesheet" href="//embed.typeform.com/next/css/popup.css" />
   </head>
   <body>
-    <h1>
-      This sidetab opens in <span id="seconds">5</span> seconds (via embed code)
-    </h1>
-    <p>The sidetab is opened automatically after the given time has passed.</p>
+    <p>Popover opens first (after 1 second).</p>
     <p>
-      If the user closes the sidetab and then refreshes, it will not reopen the
-      Typeform.
+      Sidetab opens second (after 6 seconds). However, if you closed the popover
+      before it opens, the sidetab does not open because they both show the same
+      typeform.
     </p>
+    <p>
+      If you closed either popover or sidetab, neither of them will open on page
+      reload.
+    </p>
+    <p>
+      Regardless of your previous actions a popup opens third (after 7 seconds).
+      If you close it, it will not reopen on page reload.
+    </p>
+    <p>
+      Information on closed typeforms is stored in cookie. You can reset the
+      cookie below:
+    </p>
+
+    <a
+      id="popover"
+      class="typeform-share"
+      data-tf-popover="HLjqXS5W"
+      data-tf-medium="unit-test"
+      data-tf-open="time"
+      data-tf-open-value="1000"
+      data-tf-prevent-reopen-on-close
+    >
+    </a>
 
     <a
       id="sidetab"
       class="typeform-share"
       data-tf-sidetab="HLjqXS5W"
       data-tf-medium="unit-test"
       data-tf-open="time"
-      data-tf-open-value="5000"
+      data-tf-open-value="6000"
       data-tf-prevent-reopen-on-close
     >
     </a>
 
+    <a
+      id="popup"
+      class="typeform-share"
+      data-tf-popup="Cqrg7cgL"
+      data-tf-medium="unit-test"
+      data-tf-open="time"
+      data-tf-open-value="7000"
+      data-tf-prevent-reopen-on-close
+    ></a>
+
     <p>
       <button id="reset-cookie">
-        Reset cookie to reopen Typeform automatically
+        Reset all cookies to reopen Typeform automatically
       </button>
     </p>
 
-    <p>
-      <button id="refresh">Refresh page</button>
-    </p>
-
-    <h2>Customize the time</h2>
-    <p>This can be set on "Share" page as well.</p>
-    <form action="" method="get">
-      <label for="time">Milliseconds</label>
-      <input
-        id="time"
-        name="ms"
-        type="number"
-        value="5000"
-        step="1000"
-        min="1000"
-      />
-      <button type="submit">Set</button>
-    </form>
-
     <script>
-      const ms = parseInt(
-        new URL(window.location.href).searchParams.get('ms'),
-        10
-      )
-      if (ms) {
-        document.getElementById('sidetab').dataset.tfOpenValue = ms
-        document.getElementById('time').value = ms
-        document.getElementById('seconds').innerHTML = Math.round(ms / 1000)
-      }
-
       document.getElementById('reset-cookie').addEventListener('click', () => {
         document.cookie = 'tf-HLjqXS5W-closed=false;Path=/'
-        window.location.reload()
-      })
-
-      document.getElementById('refresh').addEventListener('click', () => {
+        document.cookie = 'tf-Cqrg7cgL-closed=false;Path=/'
         window.location.reload()
       })
     </script>

diff --git a/demo-html/prevent-reopen-on-close-js/index.html b/demo-html/prevent-reopen-on-close-js/index.html
diff --git a/demo-html/respect-js/index.html b/demo-html/respect-js/index.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Open and respect</title>
+    <link rel="stylesheet" href="//embed.typeform.com/next/css/popover.css" />
+    <link rel="stylesheet" href="//embed.typeform.com/next/css/slider.css" />
+    <link rel="stylesheet" href="//embed.typeform.com/next/css/sidetab.css" />
+  </head>
+  <body>
+    <h1>Respect</h1>
+    <form action="?" method="get">
+      <label><input type="radio" name="respect" value="all" /> all</label><br />
+      <label
+        ><input type="radio" name="respect" value="same" /> same forms</label
+      ><br />
+      <label><input type="radio" name="respect" value="none" /> none</label>
+    </form>
+    <p>Form in popover opens in 1 second.</p>
+    <p>
+      <strong>If respect = none</strong> the same form in slider opens in 2
+      second.
+    </p>
+    <p>
+      <strong>If respect = none or same</strong> different form in side tab
+      might open in 3 seconds.
+    </p>
+
+    <script src="//embed.typeform.com/next/embed.js"></script>
+    <script>
+      document.querySelectorAll('input').forEach((radio) => {
+        radio.onclick = () => document.querySelector('form').submit()
+      })
+      const [, respectOpenModals = 'none'] =
+        window.location.search.match(/\?respect=([a-z]+)/) || []
+      document.querySelector(
+        `input[name=respect][value=${respectOpenModals}]`
+      ).checked = true
+
+      window.tf.createPopover('HLjqXS5W', {
+        open: 'time',
+        openValue: 1000,
+        respectOpenModals,
+      })
+      window.tf.createSlider('HLjqXS5W', {
+        position: 'left',
+        open: 'time',
+        openValue: 2000,
+        respectOpenModals,
+      })
+      window.tf.createSidetab('Cqrg7cgL', {
+        open: 'time',
+        openValue: 3000,
+        respectOpenModals,
+      })
+    </script>
+  </body>
+</html>
diff --git a/...l/prevent-reopen-on-close-js/package.json → demo-html/respect-js/package.json b/...l/prevent-reopen-on-close-js/package.json → demo-html/respect-js/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "prevent-reopen-on-close-js",
+  "name": "respect-js",
   "license": "MIT",
-  "description": "Embed SDK Demo - prevent-reopen-on-close-js",
+  "description": "Embed SDK Demo - respect-js",
   "version": "1.0.0",
   "main": "index.html",
   "scripts": {