jaandrle/deka-dom-el
1
0
Fork 0
mirror of https://github.com/jaandrle/deka-dom-el synced 2025-07-01 04:12:14 +02:00
Code Packages Releases Activity

docs

Browse Source
This commit is contained in:
Jan Andrle
2023-11-06 13:45:43 +01:00
parent 64a03c8ba5
commit 324727cc0a
9 changed files with 301 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
docs_src/components/example.html.js
View File

@ -1,4 +1,4 @@
let is_register= false;
let is_registered= false;
import { styles } from "../index.css.js";
export const css= styles().scope(example).css`
:host{
@ -18,10 +18,7 @@ export function example({ src, language= "javascript" }){
return el("<>").append(
el("div", { id, className: example.name }).append(
el("pre").append(
el("code", {
className: "language-"+language,
textContent: code
})
el("code", { className: "language-"+language, textContent: code })
)
),
elCode({ id, content: code })
@ -35,9 +32,9 @@ function elCode({ id, content }){
return el("script", `Flems(document.getElementById("${id}"), JSON.parse(${JSON.stringify(options)}));`);
}
function register(){
if(is_register) return;
if(is_registered) return;
document.head.append(
el("script", { src: "https://flems.io/flems.html", type: "text/javascript", charset: "utf-8" })
);
is_register= true;
is_registered= true;
}

24
docs_src/components/examples/dekaAppend.js Normal file
View File

@ -0,0 +1,24 @@
import { el } from "../../../index-with-signals.js";
document.head.append(
el("style").append(
"tr, td{ border: 1px solid red; padding: 1em; }",
"table{ border-collapse: collapse; }"
)
);
document.body.append(
el("p", "Example of a complex template. Using for example nesting lists:"),
el("ul").append(
el("li", "List item 1"),
el("li").append(
el("ul").append(
el("li", "Nested list item 1"),
)
)
),
el("table").append(
el("tr").append(
el("td", "Row 1 – Col 1"),
el("td", "Row 1 – Col 2")
)
)
);

25
docs_src/components/examples/dekaAssign.js Normal file
View File

@ -0,0 +1,25 @@
import { assignAttribute, classListDeclarative } from "../../../index-with-signals.js";
const paragraph= document.createElement("p");
assignAttribute(paragraph, "textContent", "Hello, world!");
assignAttribute(paragraph, "style", { color: "navy" });
assignAttribute(paragraph, "dataTest1", "v1");
assignAttribute(paragraph, "dataset", { test2: "v2" });
assignAttribute(paragraph, "ariaLabel", "v1");
assignAttribute(paragraph, "ariaset", { role: "none" });
classListDeclarative(paragraph, {
classAdd: true,
classRemove: false,
classAdd1: 1,
classRemove1: 0,
classToggle: -1
});
console.log(paragraph.outerHTML);
document.body.append(
paragraph
);

17
docs_src/components/examples/dekaBasicComponent.js Normal file
View File

@ -0,0 +1,17 @@
import { el } from "../../../index-with-signals.js";
document.head.append(
el("style").append(
".class1{ font-weight: bold; }",
".class2{ color: purple; }"
)
);
document.body.append(
el(component, { className: "class2", textContent: "Hello World!" }),
component({ className: "class2", textContent: "Hello World!" })
);
function component({ className, textContent }){
return el("div", { className: [ "class1", className ] }).append(
el("p", textContent)
);
}

11
docs_src/components/examples/dekaCreateElement.js Normal file
View File

@ -0,0 +1,11 @@
import { el, assign } from "../../../index-with-signals.js";
const color= "lightcoral";
document.body.append(
el("p", { textContent: "Hello (first time)", style: { color } })
);
document.body.append(
assign(
document.createElement("p"),
{ textContent: "Hello (second time)", style: { color } }
)
);

11
docs_src/components/examples/nativeAppend.js Normal file
View File

@ -0,0 +1,11 @@
document.body.append(
document.createElement("div"),
document.createElement("span"),
document.createElement("main")
);
console.log(document.body.innerHTML.includes("<div></div><span></span><main></main>"));
const template= document.createElement("main").append(
document.createElement("div"),
document.createElement("span"),
);
console.log(typeof template==="undefined");

14
docs_src/components/examples/nativeCreateElement.js Normal file
View File

@ -0,0 +1,14 @@
document.body.append(
document.createElement("div")
);
console.log(
"Emty div is generated inside <body>:",
document.body.innerHTML.includes("<div></div>")
);
document.body.append(
Object.assign(
document.createElement("p"),
{ textContent: "Element’s text content.", style: "color: coral;" }
)
);