Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: improve example #3

Merged
merged 1 commit into from
Apr 7, 2024
Merged

docs: improve example #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 17 additions & 12 deletions examples/ex-1/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,23 @@
</head>
<body>
<header>
<label for="ms">Milliseconds between boxes</label>
<input
id="ms"
placeholder="Milliseconds between boxes"
value="0"
type="number"
/>
<label for="box">Number of boxes</label>
<input id="box" placeholder="Number of boxes" value="3" type="number" />
<button>Diff</button>
<a href="/ex-1">Reload</a>
<div><a href="/">Come back to examples</a></div>
<form>
<label for="ms">Milliseconds between boxes</label>
<input
id="ms"
placeholder="Milliseconds between boxes"
value="0"
type="number"
/>
<label for="box">Number of boxes</label>
<input id="box" placeholder="Number of boxes" value="3" type="number" />
<button>Diff</button>
<a href="/ex-1">Reload</a>
<a href="/">Come back to examples</a>
<a href="https://github.com/aralroca/diff-dom-streaming" target="_blank"
>GitHub</a
>
</form>
</header>
</body>
</html>
33 changes: 19 additions & 14 deletions examples/ex-1/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import diff from "https://unpkg.com/diff-dom-streaming@latest";

async function diffStreamReader() {
async function diffStreamReader(e) {
e?.preventDefault();

// This is a simple example. Normally the stream comes from a fetch request.
const encoder = new TextEncoder();
const ms = +document.querySelector("#ms").value ?? 0;
Expand All @@ -20,18 +22,21 @@ async function diffStreamReader() {
</head>
<body>
<header>
<label for="ms">Milliseconds between boxes</label>
<input
id="ms"
placeholder="Milliseconds between boxes"
value="0"
type="number"
/>
<label for="box">Number of boxes</label>
<input id="box" placeholder="Number of boxes" value="3" type="number" />
<button>Diff</button>
<a href="/ex-1">Reload</a>
<div><a href="/">Come back to examples</a></div>
<form>
<label for="ms">Milliseconds between boxes</label>
<input
id="ms"
placeholder="Milliseconds between boxes"
value="0"
type="number"
/>
<label for="box">Number of boxes</label>
<input id="box" placeholder="Number of boxes" value="3" type="number" />
<button>Diff</button>
<a href="/ex-1">Reload</a>
<a href="/">Come back to examples</a>
<a href="https://github.com/aralroca/diff-dom-streaming" target="_blank">GitHub</a>
</form>
</header>
<div class="container">
`),
Expand Down Expand Up @@ -65,4 +70,4 @@ async function diffStreamReader() {
await diff(document, stream.getReader());
}

document.querySelector("button").addEventListener("click", diffStreamReader);
document.querySelector("form").addEventListener("submit", diffStreamReader);
9 changes: 9 additions & 0 deletions examples/ex-1/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,10 @@ header {
position: fixed;
padding: 10px;
margin-top: -10px;
text-align: center;
background-color: light-dark(white, black);
width: 100%;
box-shadow: 2px 2px 10px 0 hsla(0, 0%, 40%, 0.5);
}

.container {
Expand All @@ -22,4 +24,11 @@ header {
padding: 20px;
border: 1px solid #000;
margin: 10px;
width: calc(33.33% - 20px);
}

input,
button,
a {
margin-right: 10px;
}
Loading