Skip to content

Commit

Permalink
[skip ci] update demos
Browse files Browse the repository at this point in the history
  • Loading branch information
Github Action committed Feb 23, 2024
1 parent 975b109 commit e86e172
Show file tree
Hide file tree
Showing 5 changed files with 206 additions and 21 deletions.
44 changes: 23 additions & 21 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,27 +18,29 @@ Demos for [@typeform/embed](https://github.com/Typeform/embed).
12. [popup-html](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/popup-html)
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. [reload-event](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/reload-event)
16. [scroll-html](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/scroll-html)
17. [scroll-js](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/scroll-js)
18. [sidetab-customized-html](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/sidetab-customized-html)
19. [sidetab-html](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/sidetab-html)
20. [sidetab-js](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/sidetab-js)
21. [slider-html](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/slider-html)
22. [slider-js](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/slider-js)
23. [time-html](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/time-html)
24. [time-js](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/time-js)
25. [transitive-params-html](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/transitive-params-html)
26. [transitive-params-js](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/transitive-params-js)
27. [widget-autoresize](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/widget-autoresize)
28. [widget-focus](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/widget-focus)
29. [widget-full-screen-html](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/widget-full-screen-html)
30. [widget-html](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/widget-html)
31. [widget-inline](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/widget-inline)
32. [widget-js](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/widget-js)
33. [widget-lazy-html](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/widget-lazy-html)
34. [widget-sandbox](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/widget-sandbox)
35. [widget-theme](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/widget-theme)
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)
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)
21. [sidetab-html](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/sidetab-html)
22. [sidetab-js](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/sidetab-js)
23. [slider-html](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/slider-html)
24. [slider-js](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/slider-js)
25. [time-html](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/time-html)
26. [time-js](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/time-js)
27. [transitive-params-html](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/transitive-params-html)
28. [transitive-params-js](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/transitive-params-js)
29. [widget-autoresize](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/widget-autoresize)
30. [widget-focus](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/widget-focus)
31. [widget-full-screen-html](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/widget-full-screen-html)
32. [widget-html](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/widget-html)
33. [widget-inline](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/widget-inline)
34. [widget-js](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/widget-js)
35. [widget-lazy-html](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/widget-lazy-html)
36. [widget-sandbox](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/widget-sandbox)
37. [widget-theme](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/widget-theme)

## React (NextJS)

Expand Down
76 changes: 76 additions & 0 deletions demo-html/prevent-reopen-on-close-html/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Open: time (via embed code)</title>
<link rel="stylesheet" href="//embed.typeform.com/next/css/sidetab.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>
If the user closes the sidetab and then refreshes, it will not reopen the
Typeform.
</p>

<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-prevent-reopen-on-close
>
</a>

<p>
<button id="reset-cookie">
Reset cookie 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', () => {
window.location.reload()
})
</script>

<script src="//embed.typeform.com/next/embed.js"></script>
</body>
</html>
20 changes: 20 additions & 0 deletions demo-html/prevent-reopen-on-close-html/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{
"name": "prevent-reopen-on-close-html",
"license": "MIT",
"description": "Embed SDK Demo - prevent-reopen-on-close-html",
"version": "1.0.0",
"main": "index.html",
"scripts": {
"start": "parcel index.html --open",
"build": "parcel build index.html"
},
"dependencies": {
"parcel-bundler": "^1.6.1"
},
"devDependencies": {
"@babel/core": "7.2.0"
},
"resolutions": {
"@babel/preset-env": "7.13.8"
}
}
67 changes: 67 additions & 0 deletions demo-html/prevent-reopen-on-close-js/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Open: time (via API)</title>
<link rel="stylesheet" href="//embed.typeform.com/next/css/sidetab.css" />
</head>
<body>
<h1>This sidetab opens in <span id="seconds">5</span> seconds (via API)</h1>
<p>The sidetab is opened automatically after the given time has passed.</p>
<p>
If the user closes the sidetab and then refreshes, it will not reopen the
Typeform.
</p>

<p>
<button id="reset-cookie">
Reset cookie 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 src="//embed.typeform.com/next/embed.js"></script>
<script>
const ms =
parseInt(new URL(window.location.href).searchParams.get('ms'), 10) ||
document.getElementById('time').value

if (ms) {
document.getElementById('time').value = ms
document.getElementById('seconds').innerHTML = Math.round(ms / 1000)
document.getElementById('seconds').innerHTML = Math.round(ms / 1000)
}
window.tf.createSidetab('HLjqXS5W', {
open: 'time',
openValue: ms,
preventReopenOnClose: true,
})

document.getElementById('reset-cookie').addEventListener('click', () => {
document.cookie = 'tf-HLjqXS5W-closed=false;Path=/'
window.location.reload()
})

document.getElementById('refresh').addEventListener('click', () => {
window.location.reload()
})
</script>
</body>
</html>
20 changes: 20 additions & 0 deletions demo-html/prevent-reopen-on-close-js/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{
"name": "prevent-reopen-on-close-js",
"license": "MIT",
"description": "Embed SDK Demo - prevent-reopen-on-close-js",
"version": "1.0.0",
"main": "index.html",
"scripts": {
"start": "parcel index.html --open",
"build": "parcel build index.html"
},
"dependencies": {
"parcel-bundler": "^1.6.1"
},
"devDependencies": {
"@babel/core": "7.2.0"
},
"resolutions": {
"@babel/preset-env": "7.13.8"
}
}

0 comments on commit e86e172

Please sign in to comment.