|
// Written by retoor@molodetz.nl
|
|
|
|
// This code defines two custom HTML elements, `GenericField` and `GenericForm`. The `GenericField` element represents a form field with validation and styling functionalities, and the `GenericForm` fetches and manages form data, handling field validation and submission.
|
|
|
|
// No external imports are present; all utilized functionality is native to JavaScript and web APIs.
|
|
|
|
// MIT License
|
|
// Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
// of this software and associated documentation files (the "Software"), to deal
|
|
// in the Software without restriction, including without limitation the rights
|
|
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
// copies of the Software, and to permit persons to whom the Software is
|
|
// furnished to do so, subject to the following conditions:
|
|
// The above copyright notice and this permission notice shall be included in
|
|
// all copies or substantial portions of the Software.
|
|
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
// THE SOFTWARE.
|
|
|
|
class GenericField extends HTMLElement {
|
|
form = null;
|
|
field = null;
|
|
inputElement = null;
|
|
footerElement = null;
|
|
action = null;
|
|
container = null;
|
|
styleElement = null;
|
|
name = null;
|
|
|
|
get value() {
|
|
return this.inputElement.value;
|
|
}
|
|
|
|
get type() {
|
|
return this.field.tag;
|
|
}
|
|
|
|
set value(val) {
|
|
val = val ?? "";
|
|
this.inputElement.value = val;
|
|
this.inputElement.setAttribute("value", val);
|
|
}
|
|
|
|
setInvalid() {
|
|
this.inputElement.classList.add("error");
|
|
this.inputElement.classList.remove("valid");
|
|
}
|
|
|
|
setErrors(errors) {
|
|
const errorText = errors.length ? errors[0] : "";
|
|
this.inputElement.setAttribute("title", errorText);
|
|
}
|
|
|
|
setValid() {
|
|
this.inputElement.classList.remove("error");
|
|
this.inputElement.classList.add("valid");
|
|
}
|
|
|
|
constructor() {
|
|
super();
|
|
this.attachShadow({ mode: "open" });
|
|
this.container = document.createElement("div");
|
|
this.styleElement = document.createElement("style");
|
|
this.styleElement.innerHTML = `
|
|
|
|
h1 {
|
|
font-size: 2em;
|
|
color: #f05a28;
|
|
margin-bottom: 20px;
|
|
margin-top: 0px;
|
|
}
|
|
|
|
input {
|
|
width: 90%;
|
|
padding: 10px;
|
|
margin: 10px 0;
|
|
border: 1px solid #333;
|
|
border-radius: 5px;
|
|
background-color: #1a1a1a;
|
|
color: #e6e6e6;
|
|
font-size: 1em;
|
|
|
|
&:focus {
|
|
outline: 2px solid #f05a28 !important;
|
|
}
|
|
|
|
&::placeholder {
|
|
transition: opacity 0.3s;
|
|
}
|
|
|
|
&:focus::placeholder {
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
|
|
button {
|
|
width: 50%;
|
|
padding: 10px;
|
|
background-color: #f05a28;
|
|
border: none;
|
|
float: right;
|
|
margin-top: 10px;
|
|
margin-left: 10px;
|
|
margin-right: 10px;
|
|
border-radius: 5px;
|
|
color: white;
|
|
font-size: 1em;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s;
|
|
clear: both;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: #e04924;
|
|
}
|
|
|
|
a {
|
|
color: #f05a28;
|
|
text-decoration: none;
|
|
display: block;
|
|
margin-top: 15px;
|
|
font-size: 0.9em;
|
|
transition: color 0.3s;
|
|
}
|
|
|
|
a:hover {
|
|
color: #e04924;
|
|
}
|
|
|
|
.valid {
|
|
border: 1px solid green;
|
|
color: green;
|
|
font-size: 0.9em;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.error {
|
|
border: 3px solid red;
|
|
color: #d8000c;
|
|
font-size: 0.9em;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
@media (max-width: 500px) {
|
|
input {
|
|
width: 90%;
|
|
}
|
|
}
|
|
`;
|
|
this.container.appendChild(this.styleElement);
|
|
|
|
this.shadowRoot.appendChild(this.container);
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.updateAttributes();
|
|
}
|
|
|
|
setAttribute(name, value) {
|
|
this[name] = value;
|
|
}
|
|
|
|
focus(options) {
|
|
this.inputElement?.focus(options);
|
|
}
|
|
|
|
updateAttributes() {
|
|
const inputUpdate = this.inputElement != null;
|
|
|
|
if (this.inputElement == null && this.field) {
|
|
this.inputElement = document.createElement(this.field.tag);
|
|
if (this.field.tag === "button" && this.field.value === "submit") {
|
|
this.action = this.field.value;
|
|
}
|
|
this.inputElement.name = this.field.name;
|
|
this.name = this.inputElement.name;
|
|
|
|
const me = this;
|
|
this.inputElement.addEventListener("keyup", (e) => {
|
|
if (e.key === "Enter") {
|
|
const event = new CustomEvent("change", {
|
|
detail: me,
|
|
bubbles: true,
|
|
});
|
|
me.dispatchEvent(event);
|
|
|
|
me.dispatchEvent(new Event("submit"));
|
|
} else if (me.field.value !== e.target.value) {
|
|
const event = new CustomEvent("change", {
|
|
detail: me,
|
|
bubbles: true,
|
|
});
|
|
me.dispatchEvent(event);
|
|
}
|
|
});
|
|
|
|
this.inputElement.addEventListener("click", (e) => {
|
|
const event = new CustomEvent("click", { detail: me, bubbles: true });
|
|
me.dispatchEvent(event);
|
|
});
|
|
|
|
this.inputElement.addEventListener(
|
|
"blur",
|
|
(e) => {
|
|
const event = new CustomEvent("change", {
|
|
detail: me,
|
|
bubbles: true,
|
|
});
|
|
me.dispatchEvent(event);
|
|
},
|
|
true,
|
|
);
|
|
|
|
this.container.appendChild(this.inputElement);
|
|
}
|
|
|
|
if (!this.field) {
|
|
return;
|
|
}
|
|
|
|
this.inputElement.setAttribute("type", this.field.type ?? "input");
|
|
this.inputElement.setAttribute("name", this.field.name ?? "");
|
|
|
|
if (this.field.text != null) {
|
|
this.inputElement.innerText = this.field.text;
|
|
}
|
|
if (this.field.html != null) {
|
|
this.inputElement.innerHTML = this.field.html;
|
|
}
|
|
if (this.field.class_name) {
|
|
this.inputElement.classList.add(this.field.class_name);
|
|
}
|
|
this.inputElement.setAttribute("tabindex", this.field.index);
|
|
this.inputElement.classList.add(this.field.name);
|
|
if (this.field.value != null || !inputUpdate) {
|
|
this.value = this.field.value;
|
|
}
|
|
|
|
let place_holder = this.field.place_holder ?? null;
|
|
if (this.field.required && place_holder) {
|
|
place_holder = "* " + place_holder;
|
|
}
|
|
this.inputElement.setAttribute("placeholder", place_holder);
|
|
if (this.field.required) {
|
|
this.inputElement.setAttribute("required", "required");
|
|
} else {
|
|
this.inputElement.removeAttribute("required");
|
|
}
|
|
if (!this.footerElement) {
|
|
this.footerElement = document.createElement("div");
|
|
this.footerElement.style.clear = "both";
|
|
this.container.appendChild(this.footerElement);
|
|
}
|
|
}
|
|
}
|
|
|
|
customElements.define("generic-field", GenericField);
|
|
|
|
class GenericForm extends HTMLElement {
|
|
fields = {};
|
|
form = {};
|
|
|
|
constructor() {
|
|
super();
|
|
this.attachShadow({ mode: "open" });
|
|
this.styleElement = document.createElement("style");
|
|
this.styleElement.innerHTML = `
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
width: 90%;
|
|
}
|
|
|
|
div {
|
|
min-width:350px;
|
|
border-radius: 10px;
|
|
padding: 30px;
|
|
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
|
|
text-align: center;
|
|
}
|
|
@media (max-width: 500px) {
|
|
width: 100%;
|
|
height: 100%;
|
|
form {
|
|
height: 100%;
|
|
width: 80%;
|
|
}
|
|
}`;
|
|
|
|
this.container = document.createElement("div");
|
|
this.container.appendChild(this.styleElement);
|
|
this.container.classList.add("generic-form-container");
|
|
this.shadowRoot.appendChild(this.container);
|
|
}
|
|
|
|
connectedCallback() {
|
|
const preloadedForm = this.getAttribute("preloaded-structure");
|
|
if (preloadedForm) {
|
|
try {
|
|
const form = JSON.parse(preloadedForm);
|
|
this.constructForm(form);
|
|
} catch (error) {
|
|
console.error(error, preloadedForm);
|
|
}
|
|
}
|
|
const url = this.getAttribute("url");
|
|
if (url) {
|
|
const fullUrl = url.startsWith("/")
|
|
? window.location.origin + url
|
|
: new URL(window.location.origin + "/http-get");
|
|
if (!url.startsWith("/")) {
|
|
fullUrl.searchParams.set("url", url);
|
|
}
|
|
this.loadForm(fullUrl.toString());
|
|
} else {
|
|
this.container.textContent = "No URL provided!";
|
|
}
|
|
}
|
|
|
|
async constructForm(formPayload) {
|
|
try {
|
|
this.form = formPayload;
|
|
|
|
let fields = Object.values(this.form.fields);
|
|
|
|
let hasAutoFocus = Object.keys(this.fields).length !== 0;
|
|
|
|
fields.sort((a, b) => a.index - b.index);
|
|
fields.forEach((field) => {
|
|
const updatingField = field.name in this.fields;
|
|
|
|
this.fields[field.name] ??= document.createElement("generic-field");
|
|
|
|
const fieldElement = this.fields[field.name];
|
|
|
|
fieldElement.setAttribute("form", this);
|
|
fieldElement.setAttribute("field", field);
|
|
|
|
fieldElement.updateAttributes();
|
|
|
|
if (!updatingField) {
|
|
this.container.appendChild(fieldElement);
|
|
|
|
if (!hasAutoFocus && field.tag === "input") {
|
|
fieldElement.focus();
|
|
hasAutoFocus = true;
|
|
}
|
|
|
|
fieldElement.addEventListener("change", (e) => {
|
|
this.form.fields[e.detail.name].value = e.detail.value;
|
|
});
|
|
|
|
fieldElement.addEventListener("click", async (e) => {
|
|
if (e.detail.type === "button" && e.detail.value === "submit") {
|
|
const isValid = await this.validate();
|
|
if (isValid) {
|
|
const saveResult = await this.submit();
|
|
if (saveResult.redirect_url) {
|
|
window.location.pathname = saveResult.redirect_url;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
fieldElement.addEventListener("submit", async (e) => {
|
|
const isValid = await this.validate();
|
|
if (isValid) {
|
|
const saveResult = await this.submit();
|
|
if (saveResult.redirect_url) {
|
|
window.location.pathname = saveResult.redirect_url;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
} catch (error) {
|
|
this.container.textContent = `Error: ${error.message}`;
|
|
}
|
|
}
|
|
|
|
async loadForm(url) {
|
|
try {
|
|
const response = await fetch(url);
|
|
if (!response.ok) {
|
|
throw new Error(
|
|
`Failed to fetch: ${response.status} ${response.statusText}`,
|
|
);
|
|
}
|
|
|
|
await this.constructForm(await response.json());
|
|
} catch (error) {
|
|
this.container.textContent = `Error: ${error.message}`;
|
|
}
|
|
}
|
|
|
|
async validate() {
|
|
const url = this.getAttribute("url");
|
|
|
|
let response = await fetch(url, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({ action: "validate", form: this.form }),
|
|
});
|
|
|
|
const form = await response.json();
|
|
Object.values(form.fields).forEach((field) => {
|
|
if (!this.form.fields[field.name]) {
|
|
return;
|
|
}
|
|
this.form.fields[field.name].is_valid = field.is_valid;
|
|
if (!field.is_valid) {
|
|
this.fields[field.name].setInvalid();
|
|
this.fields[field.name].setErrors(field.errors);
|
|
} else {
|
|
this.fields[field.name].setValid();
|
|
}
|
|
this.fields[field.name].setAttribute("field", field);
|
|
this.fields[field.name].updateAttributes();
|
|
});
|
|
Object.values(form.fields).forEach((field) => {
|
|
this.fields[field.name].setErrors(field.errors);
|
|
});
|
|
return form["is_valid"];
|
|
}
|
|
|
|
async submit() {
|
|
const url = this.getAttribute("url");
|
|
const response = await fetch(url, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({ action: "submit", form: this.form }),
|
|
});
|
|
return await response.json();
|
|
}
|
|
}
|
|
|
|
customElements.define("generic-form", GenericForm);
|