noccy/jsl
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tweaks and fixes, improve example

Browse Source
This commit is contained in:
Chris
2025-09-21 12:16:40 +02:00
parent 0f8747dce7
commit 4331ee0ebe
4 changed files with 110 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
dialog.css
View File

@@ -58,6 +58,13 @@
content: '⚠️ '; content: '⚠️ ';
} }
} }
&.-style-dialog {
--jsl-dialog-bgcolor: #fff;
--jsl-dialog-bordercolor: #05224e;
/* .-title::before {
content: '⚠️ ';
} */
}
.-header { .-header {
border-top-left-radius: 0.5rem; border-top-left-radius: 0.5rem;

184
index.html
View File

@@ -1,111 +1,117 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<link rel="stylesheet" type="text/css" href="./dialog.css"> <link rel="stylesheet" type="text/css" href="./dialog.css">
<link rel="stylesheet" type="text/css" href="./jsonform.css"> <link rel="stylesheet" type="text/css" href="./jsonform.css">
</head> </head>
<body> <body>
<script type="module"> <script type="module">
import { el } from './dom.js';
import { dialog } from './dialog.js';
import { JsonForm, TextField, NumericField, CheckField } from './jsonform.js';
import { jsonQuery, jsonPatch, tokenizePath } from './json.js';
import { date } from './date.js';
// build our dom import { el, dom } from './dom.js';
let btn, btn2, btn3, btn4; import { dialog } from './dialog.js';
let root = el.div({}, [ import { JsonForm, TextField, NumericField, CheckField } from './jsonform.js';
el.div({ style:'color:#444;' }, "This is dynamically generated!"), import { jsonQuery, jsonPatch, tokenizePath } from './json.js';
el.div({ style:'display:flex; gap:0.25rem; margin-top:0.25rem;' }, [ import { date } from './date.js';
el.button({ 'on:click': () => dialog.info("You clicked me!") }, "With event"),
btn = el.button({}, "Hello World"), // build our dom tree
btn2 = el.button({}, "Error mode"), let btn, btn2, btn3, btn4;
btn3 = el.button({}, "Edit form"), let root = el.div({}, [
btn4 = el.button({}, "Form modal"), el.div({ style:'color:#444;' }, "This is dynamically generated!"),
]) el.div({ style:'display:flex; gap:0.25rem; margin-top:0.25rem;' }, [
]); el.button({ 'on:click': () => dialog.info("You clicked me!") }, "With event"),
// click handler btn = el.button({}, "Hello World"),
btn.addEventListener('click', () => { btn2 = el.button({}, "Error mode"),
dialog.msgbox("Yo! This is a messagebox!").then((result) => { btn3 = el.button({}, "Edit form"),
console.log("Accepted with: " + result); btn4 = el.button({}, "Form modal"),
dialog.confirm("Isn't that neat?", "Woah", { "sure":"Sure!", "nah":"Nah..." }).then((result) => { ])
console.log("Neat? " + result); ]);
// Apply attributes (in this case styles) to the root element
dom.apply(root, { 'style':'border: solid 1px #999; padding: 5px;' });
// click handlers to show off the dialogs
btn.addEventListener('click', () => {
dialog.msgbox("Yo! This is a messagebox!").then((result) => {
console.log("Accepted with: " + result);
dialog.confirm("Isn't that neat?", "Woah", { "sure":"Sure!", "nah":"Nah..." }).then((result) => {
console.log("Neat? " + result);
});
}); });
}); });
}); btn2.addEventListener('click', async () => {
// click handler await dialog.error("Oh shit. That didn't work. Maybe try again?");
btn2.addEventListener('click', async () => { await dialog.information("Just kidding! Everything is great!");
await dialog.error("Oh shit. That didn't work. Maybe try again?"); });
await dialog.information("Just kidding! Everything is great!");
});
document.body.appendChild(root); // Append the dom we built
document.body.appendChild(root);
const userForm = new JsonForm(); // Define a form with three rows and some various fields
userForm.layout.addRow() const userForm = new JsonForm();
.append(new TextField({ label:"Username", width:70, path:".username" })) userForm.layout.addRow()
.append(new NumericField({ label:"ID", path:".id", locked:true })); .append(new TextField({ label:"Username", width:70, path:".username" }))
userForm.layout.addRow() .append(new NumericField({ label:"ID", path:".id", locked:true }));
.append(new TextField({ label:"Created", width:50, path:".meta.created", locked:true })) userForm.layout.addRow()
.append(new TextField({ label:"Updated", width:50, path:".meta.updated", locked:true })); .append(new TextField({ label:"Created", width:50, path:".meta.created", locked:true }))
userForm.layout.addRow() .append(new TextField({ label:"Updated", width:50, path:".meta.updated", locked:true }));
.append(new NumericField({ label:"Salary", width:30, path:".meta.salary", fixed:2 })) userForm.layout.addRow()
.append(new CheckField({ label:"Admin", path:".admin" })); .append(new NumericField({ label:"Salary", width:30, path:".meta.salary", fixed:2 }))
document.body.appendChild(userForm.dom()); .append(new CheckField({ label:"Admin", path:".admin" }));
document.body.appendChild(userForm.dom());
// Set the model // Set the model
userForm.model = { userForm.model = {
username: "Admin", username: "Admin",
id: 1, id: 1,
meta: { meta: {
created: '2025-09-01 00:00:00 +02:00', created: '2025-09-01 00:00:00 +02:00',
}
};
btn3.addEventListener('click', () => {
userForm.editable = !userForm.editable;
if (!userForm.editable) {
console.log(userForm.model);
}
});
const productForm = new JsonForm();
productForm.layout.addRow()
.append(new TextField({ label:"Product", width:60, path:".product.name" }))
.append(new NumericField({ label:"Price", path:".product.price", fixed:2 }));
productForm.layout.addRow()
.append(new NumericField({ label:"Inventory", width:30, path:".inventory.count" }))
.append(new NumericField({ label:"Limit", width:30, path:".inventory.limit" }))
.append(new CheckField({ label:"Virtual", path:".virtual" }));
productForm.model = {};
btn4.addEventListener('click', () => {
dialog.dialog(productForm.dom(), "Title", {"ok":"Update"}, { showClose:true, width:'400px' }).then(
(result) => {
productForm.editable = false;
if (result == 'ok') {
console.log(productForm.model);
}
} }
) };
productForm.editable = true;
});
// Create a click handler to toggle editable on the form
btn3.addEventListener('click', () => {
userForm.editable = !userForm.editable;
if (!userForm.editable) {
console.log(userForm.model);
}
});
// console.log(tokenizePath(".foo.bar[1].title")); // Define another form, this one for embedding in a dialog
// console.log(jsonQuery({ "foo":{ "bar":"42" }}, ".foo.bar" )); const productForm = new JsonForm();
// console.log(jsonQuery([ { name:"cheese" }, { name:"bread" }, { name:"milk" } ], "[].name" )); productForm.layout.addRow()
.append(new TextField({ label:"Product", width:60, path:".product.name" }))
.append(new NumericField({ label:"Price", path:".product.price", fixed:2 }));
productForm.layout.addRow()
.append(new NumericField({ label:"Inventory", width:30, path:".inventory.count" }))
.append(new NumericField({ label:"Limit", width:30, path:".inventory.limit" }))
.append(new CheckField({ label:"Virtual", width:20, path:".virtual" }))
.append(new CheckField({ label:"Active", width:20, path:".active" }));
let data = { name: "Bob" }; // Set an empty model for creating a new product
console.log(data); productForm.model = {};
let data2 = jsonPatch(data, ".name", "Bobby");
console.log(data, data2);
btn4.addEventListener('click', () => {
dialog.dialog(productForm.dom(), "Title", {"ok":"Update"}, { showClose:true, width:'400px' }).then(
(result) => {
productForm.editable = false;
if (result == 'ok') {
// here's the new product model!
console.log(productForm.model);
}
}
)
productForm.editable = true;
});
// This just demonstrates the json functions
console.log(tokenizePath(".foo.bar[1].title"));
console.log(jsonQuery({ "foo":{ "bar":"42" }}, ".foo.bar" ));
console.log(jsonQuery([ { name:"cheese" }, { name:"bread" }, { name:"milk" } ], "[].name" ));
let data = { name: "Bob" };
console.log(data);
let data2 = jsonPatch(data, ".name", "Bobby");
console.log(data, data2);
</script> </script>
</body> </body>

10
jsonform.css
View File

@@ -70,10 +70,11 @@
cursor: pointer; cursor: pointer;
pointer-events: all; pointer-events: all;
.-check-thumb { .-check-thumb {
background: #254b6e !important; background: #5a6977 !important;
} }
} }
.-check-box { .-check-box {
box-sizing: border-box;
padding: 0.25rem; padding: 0.25rem;
padding-left: 0em; padding-left: 0em;
padding-right: 1rem; padding-right: 1rem;
@@ -81,14 +82,17 @@
border: solid 1px #444; border: solid 1px #444;
background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0)), #929292; background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0)), #929292;
color: #dddddd; color: #dddddd;
transition-property: padding;
transition-duration: 0.2s;
.-check-thumb { .-check-thumb {
border-radius: 0.25rem; border-radius: 0.25rem;
background-color: #444; background-color: #444;
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
box-shadow: 0px 0px 5px rgba(0,0,0,0.25); box-shadow: 0px 0px 5px rgba(0,0,0,0.5), inset 0px 0px 2px rgba(255,255,255,0.2);
text-shadow: -1px 0px 0px rgba(0,0,0,0.5);
} }
&.-check-on { &.-check-on {
padding-left: 1em; padding-left: 1rem;
padding-right: 0rem; padding-right: 0rem;
.-check-thumb { .-check-thumb {
background-color: #2c7416 !important; background-color: #2c7416 !important;

2
jsonform.js
View File

@@ -295,7 +295,7 @@ class CheckField extends FormField {
} }
toggle() { toggle() {
this.value = !this.value; this.value = !this.value;
console.log("toggle", this.value); // console.log("toggle", this.value);
} }
valueUpdated() { valueUpdated() {
if (!this.#input) return; if (!this.#input) return;