Tweaks and fixes, improve example
This commit is contained in:
@@ -58,6 +58,13 @@
|
||||
content: '⚠️ ';
|
||||
}
|
||||
}
|
||||
&.-style-dialog {
|
||||
--jsl-dialog-bgcolor: #fff;
|
||||
--jsl-dialog-bordercolor: #05224e;
|
||||
/* .-title::before {
|
||||
content: '⚠️ ';
|
||||
} */
|
||||
}
|
||||
|
||||
.-header {
|
||||
border-top-left-radius: 0.5rem;
|
||||
|
||||
34
index.html
34
index.html
@@ -1,20 +1,19 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="./dialog.css">
|
||||
<link rel="stylesheet" type="text/css" href="./jsonform.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script type="module">
|
||||
import { el } from './dom.js';
|
||||
|
||||
import { el, dom } 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
|
||||
// build our dom tree
|
||||
let btn, btn2, btn3, btn4;
|
||||
let root = el.div({}, [
|
||||
el.div({ style:'color:#444;' }, "This is dynamically generated!"),
|
||||
@@ -26,7 +25,11 @@ let root = el.div({}, [
|
||||
btn4 = el.button({}, "Form modal"),
|
||||
])
|
||||
]);
|
||||
// click handler
|
||||
|
||||
// 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);
|
||||
@@ -35,14 +38,15 @@ btn.addEventListener('click', () => {
|
||||
});
|
||||
});
|
||||
});
|
||||
// click handler
|
||||
btn2.addEventListener('click', async () => {
|
||||
await dialog.error("Oh shit. That didn't work. Maybe try again?");
|
||||
await dialog.information("Just kidding! Everything is great!");
|
||||
});
|
||||
|
||||
// Append the dom we built
|
||||
document.body.appendChild(root);
|
||||
|
||||
// Define a form with three rows and some various fields
|
||||
const userForm = new JsonForm();
|
||||
userForm.layout.addRow()
|
||||
.append(new TextField({ label:"Username", width:70, path:".username" }))
|
||||
@@ -64,6 +68,7 @@ userForm.model = {
|
||||
}
|
||||
};
|
||||
|
||||
// Create a click handler to toggle editable on the form
|
||||
btn3.addEventListener('click', () => {
|
||||
userForm.editable = !userForm.editable;
|
||||
if (!userForm.editable) {
|
||||
@@ -71,6 +76,7 @@ btn3.addEventListener('click', () => {
|
||||
}
|
||||
});
|
||||
|
||||
// Define another form, this one for embedding in a dialog
|
||||
const productForm = new JsonForm();
|
||||
productForm.layout.addRow()
|
||||
.append(new TextField({ label:"Product", width:60, path:".product.name" }))
|
||||
@@ -78,8 +84,10 @@ productForm.layout.addRow()
|
||||
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" }));
|
||||
.append(new CheckField({ label:"Virtual", width:20, path:".virtual" }))
|
||||
.append(new CheckField({ label:"Active", width:20, path:".active" }));
|
||||
|
||||
// Set an empty model for creating a new product
|
||||
productForm.model = {};
|
||||
|
||||
btn4.addEventListener('click', () => {
|
||||
@@ -87,6 +95,7 @@ btn4.addEventListener('click', () => {
|
||||
(result) => {
|
||||
productForm.editable = false;
|
||||
if (result == 'ok') {
|
||||
// here's the new product model!
|
||||
console.log(productForm.model);
|
||||
}
|
||||
}
|
||||
@@ -94,18 +103,15 @@ btn4.addEventListener('click', () => {
|
||||
productForm.editable = true;
|
||||
});
|
||||
|
||||
|
||||
// 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" ));
|
||||
// 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>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
10
jsonform.css
10
jsonform.css
@@ -70,10 +70,11 @@
|
||||
cursor: pointer;
|
||||
pointer-events: all;
|
||||
.-check-thumb {
|
||||
background: #254b6e !important;
|
||||
background: #5a6977 !important;
|
||||
}
|
||||
}
|
||||
.-check-box {
|
||||
box-sizing: border-box;
|
||||
padding: 0.25rem;
|
||||
padding-left: 0em;
|
||||
padding-right: 1rem;
|
||||
@@ -81,14 +82,17 @@
|
||||
border: solid 1px #444;
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0)), #929292;
|
||||
color: #dddddd;
|
||||
transition-property: padding;
|
||||
transition-duration: 0.2s;
|
||||
.-check-thumb {
|
||||
border-radius: 0.25rem;
|
||||
background-color: #444;
|
||||
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 {
|
||||
padding-left: 1em;
|
||||
padding-left: 1rem;
|
||||
padding-right: 0rem;
|
||||
.-check-thumb {
|
||||
background-color: #2c7416 !important;
|
||||
|
||||
@@ -295,7 +295,7 @@ class CheckField extends FormField {
|
||||
}
|
||||
toggle() {
|
||||
this.value = !this.value;
|
||||
console.log("toggle", this.value);
|
||||
// console.log("toggle", this.value);
|
||||
}
|
||||
valueUpdated() {
|
||||
if (!this.#input) return;
|
||||
|
||||
Reference in New Issue
Block a user