203 lines
7.8 KiB
HTML
203 lines
7.8 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>fluent-dom-esm Demo</title>
|
|
<link rel="stylesheet" href="/styles/main.css" />
|
|
</head>
|
|
|
|
<body>
|
|
<script type="module">
|
|
import $d from "/fluent-dom-esm.js";
|
|
|
|
// Create new objects in memory with a simple, chainable interface
|
|
const $article = $d
|
|
.create("article")
|
|
.id("fde-article")
|
|
.className("cool-article")
|
|
.append(
|
|
$d
|
|
.create("h1")
|
|
.className("cool-heading")
|
|
.text(`fluent-dom-esm v${$d.version()}`),
|
|
)
|
|
.append(
|
|
$d
|
|
.create("p")
|
|
.style("background-color", "#db7c17")
|
|
.style("color", "var(--main-dark)")
|
|
.text("Why is it so cool?"),
|
|
);
|
|
|
|
// Or if you prefer the shorter syntax...
|
|
const $ul = $d.c("ul").id("fluentDom-example-list");
|
|
[
|
|
"Remarkably simple syntax",
|
|
"Surprisingly powerful features",
|
|
"Easy to use and remember",
|
|
].forEach((reason, idx) => {
|
|
$ul.app(
|
|
$d
|
|
.c("li")
|
|
.id(`fluentDom-example-list-item${idx + 1}`)
|
|
.s("font-style", "italic")
|
|
.t(reason),
|
|
);
|
|
});
|
|
|
|
// HTMLElements an also be wrapped and combined with other in-memory objects
|
|
$d(document.body).app(
|
|
$article
|
|
.app($ul)
|
|
.app(
|
|
$d.c("em").t("Try it today!").style("color", "#c43a19"),
|
|
),
|
|
);
|
|
|
|
// Or pass in a querySelector value to wrap the first matching element
|
|
$d("#fluentDom-example-list").app(
|
|
$d
|
|
.c("li")
|
|
.id("fluentDom-example-list-itemExtra")
|
|
.t("More features coming soon"),
|
|
);
|
|
</script>
|
|
|
|
<script type="module">
|
|
import $d from "/fluent-dom-esm.js";
|
|
|
|
const preDom = $d
|
|
.c("pre")
|
|
.t(
|
|
`
|
|
\<script type="module">
|
|
import $d from "/fluent-dom-esm.ts";
|
|
|
|
// Create new objects in memory with a simple, chainable interface
|
|
const $article = $d
|
|
.create("article")
|
|
.id("fde-article")
|
|
.className("cool-article")
|
|
.append(
|
|
$d
|
|
.create("h1")
|
|
.className("cool-heading")
|
|
.text("fluent-dom-esm"),
|
|
)
|
|
.append(
|
|
$d
|
|
.create("p")
|
|
.style("background-color", "#db7c17")
|
|
.style("color", "var(--main-dark)")
|
|
.text("Why is it so cool?"),
|
|
);
|
|
|
|
// Or if you prefer the shorter syntax
|
|
const $ul = $d.c("ul").id("fluentDom-example-list");
|
|
[
|
|
"Remarkably simple syntax",
|
|
"Surprisingly powerful features",
|
|
"Easy to use and remember",
|
|
].forEach((reason, idx) => {
|
|
$ul.app(
|
|
$d
|
|
.c("li")
|
|
.id(\`fluentDom-example-list-item$\{idx + 1}\`)
|
|
.s("font-style", "italic")
|
|
.t(reason),
|
|
);
|
|
});
|
|
|
|
// HTMLElements can also be wrapped and combined with other in-memory objects
|
|
$d(document.body).app(
|
|
$article
|
|
.app($ul)
|
|
.app(
|
|
$d.c("em").t("Try it today!").style("color", "#c43a19"),
|
|
),
|
|
);
|
|
|
|
// Or pass in a querySelector value to wrap the first matching element
|
|
$d("#fluentDom-example-list").app(
|
|
$d
|
|
.c("li")
|
|
.id("fluentDom-example-list-itemExtra")
|
|
.t("More features coming soon"),
|
|
);
|
|
|
|
<\/script>
|
|
`
|
|
.trim()
|
|
.split("\n")
|
|
.map((val) => {
|
|
return val.replace(" ", "");
|
|
})
|
|
.join("\n"),
|
|
)
|
|
.toDom();
|
|
|
|
preDom.innerHTML = preDom.innerHTML
|
|
// strRegEx must be applied first to prevent false positives
|
|
.replace(/\"[^"]+\"/g, (val) =>
|
|
val !== '"module"'
|
|
? `<span class="code-str">${val}</span>`
|
|
: val,
|
|
)
|
|
.replace(
|
|
/\`[^`]+\`/g,
|
|
(val) => `<span class="code-str">${val}</span>`,
|
|
)
|
|
.replace(/\.\w+/g, (val) =>
|
|
val !== ".ts"
|
|
? `<span class="code-func">${val}</span>`
|
|
: val,
|
|
)
|
|
.replace(/(\$\w+)/g, '<span class="code-dom">$1</span>')
|
|
.replace("document", '<span class="code-var">document</span>')
|
|
.replaceAll("reason", '<span class="code-var">reason</span>')
|
|
.replace("idx", '<span class="code-var">idx</span>')
|
|
.replace(
|
|
/<\/?script[^&]*>/g,
|
|
(val) => `<span class="code-cmd">${val}</span>`,
|
|
);
|
|
|
|
const themeToggleButton = $d
|
|
.c("button")
|
|
.cls("themeToggle-button")
|
|
.id("themeToggle-button")
|
|
// .t("☀︎ / ☾")
|
|
.listen("click", () => {
|
|
document.body.classList.toggle("invertedTheme");
|
|
})
|
|
.html(
|
|
`
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-hidden="true"
|
|
width="1em"
|
|
height="1em"
|
|
class="themeToggle-svgIndicator"
|
|
fill="currentColor"
|
|
viewBox="0 0 32 32"
|
|
>
|
|
<path
|
|
d="M16 .5C7.4.5.5 7.4.5 16S7.4 31.5 16 31.5 31.5 24.6 31.5 16 24.6.5
|
|
16 .5zm0 28.1V3.4C23 3.4 28.6 9 28.6 16S23 28.6 16 28.6z"
|
|
/>
|
|
</svg>
|
|
`.trim(),
|
|
);
|
|
|
|
$d(document.body)
|
|
.app(
|
|
$d
|
|
.c("figure")
|
|
.app($d.c("figcaption").t("Source"))
|
|
.app(preDom),
|
|
)
|
|
.app(themeToggleButton);
|
|
</script>
|
|
</body>
|
|
</html>
|