From 51c684c896f31928cc139bc9dbeffde538557beb Mon Sep 17 00:00:00 2001 From: Fenris Wolf Date: Wed, 22 Apr 2026 22:53:40 +0200 Subject: [PATCH] [mod] --- source/logic/helpers/json_schema.ts | 4 +++ source/logic/info.ts | 40 +++++++++++++++++++++++++++++ source/logic/input/_factory.ts | 7 +++++ source/logic/input/checkbox.ts | 34 ++++++++++++++++-------- source/logic/input/color.ts | 3 +++ source/logic/input/date.ts | 3 +++ source/logic/input/number.ts | 3 +++ source/logic/input/simple.ts | 34 ++++++++++++++++-------- source/logic/input/text.ts | 3 +++ source/logic/input/time.ts | 3 +++ source/structure.html | 1 + source/style.css | 14 ++++++++-- tools/build | 1 + 13 files changed, 126 insertions(+), 24 deletions(-) create mode 100644 source/logic/info.ts diff --git a/source/logic/helpers/json_schema.ts b/source/logic/helpers/json_schema.ts index e088da6..95ba9fd 100644 --- a/source/logic/helpers/json_schema.ts +++ b/source/logic/helpers/json_schema.ts @@ -129,6 +129,10 @@ namespace formgen.helpers.json_schema * @see https://json-schema.org/understanding-json-schema/reference/annotations */ title ?: string; + /** + * @see https://json-schema.org/understanding-json-schema/reference/annotations + */ + description ?: string; /** * @see https://json-schema.org/understanding-json-schema/reference/generic */ diff --git a/source/logic/info.ts b/source/logic/info.ts new file mode 100644 index 0000000..4293501 --- /dev/null +++ b/source/logic/info.ts @@ -0,0 +1,40 @@ +namespace formgen.info +{ + + /** + */ + export class class_info + { + + /** + */ + private content : string; + + + /** + */ + public constructor( + content : string + ) + { + this.content = content; + } + + + /** + */ + public setup( + element_target : Element + ) : Promise + { + const element_bubble : Element = document.createElement("span"); + element_bubble.classList.add("formgen-info"); + element_bubble.setAttribute("title", this.content); + element_bubble.textContent = "(?)"; + element_target.appendChild(element_bubble); + return Promise.resolve(undefined); + } + + } + +} diff --git a/source/logic/input/_factory.ts b/source/logic/input/_factory.ts index 1e74bb1..7ada363 100644 --- a/source/logic/input/_factory.ts +++ b/source/logic/input/_factory.ts @@ -220,6 +220,7 @@ namespace formgen.input new class_input_checkbox( { "label": (schema_adjusted.title ?? fallback_label ?? null), + "hint": (schema_adjusted.description ?? null), } ) ); @@ -238,6 +239,7 @@ namespace formgen.input new class_input_number( { "label": (schema_adjusted.title ?? fallback_label ?? null), + "hint": (schema_adjusted.description ?? null), } ) ); @@ -256,6 +258,7 @@ namespace formgen.input new class_input_number( { "label": (schema_adjusted.title ?? fallback_label ?? null), + "hint": (schema_adjusted.description ?? null), } ) ); @@ -279,6 +282,7 @@ namespace formgen.input new class_input_date( { "label": (schema_adjusted.title ?? fallback_label ?? null), + "hint": (schema_adjusted.description ?? null), } ) ); @@ -290,6 +294,7 @@ namespace formgen.input new class_input_time( { "label": (schema_adjusted.title ?? fallback_label ?? null), + "hint": (schema_adjusted.description ?? null), } ) ); @@ -304,6 +309,7 @@ namespace formgen.input new class_input_text( { "label": (schema_adjusted.title ?? fallback_label ?? null), + "hint": (schema_adjusted.description ?? null), } ) ); @@ -317,6 +323,7 @@ namespace formgen.input new class_input_text( { "label": (schema_adjusted.title ?? fallback_label ?? null), + "hint": (schema_adjusted.description ?? null), } ) ); diff --git a/source/logic/input/checkbox.ts b/source/logic/input/checkbox.ts index a2eff27..b020acc 100644 --- a/source/logic/input/checkbox.ts +++ b/source/logic/input/checkbox.ts @@ -16,6 +16,11 @@ namespace formgen.input private label : (null | string); + /** + */ + private hint : (null | string); + + /** */ private element_input : (null | Element); @@ -27,11 +32,13 @@ namespace formgen.input { "additional_classes": additional_classes = [], "label": label = null, + "hint": hint = null, } : { additional_classes ?: Array, label ?: (null | string); + hint ?: (null | string); } = { @@ -40,6 +47,7 @@ namespace formgen.input { this.additional_classes = ["formgen-input-checkbox"].concat(additional_classes); this.label = label; + this.hint = hint; this.element_input = null; } @@ -47,7 +55,7 @@ namespace formgen.input /** * [implementation] */ - public setup( + public async setup( target : Element ) : Promise { @@ -61,17 +69,21 @@ namespace formgen.input } // label { - if (this.label === null) + const element_label : Element = document.createElement("label"); + element_label.setAttribute("for", id); + element_label.textContent = (this.label ?? ""); + // hint { - // do nothing - } - else - { - const element_label : Element = document.createElement("label"); - element_label.setAttribute("for", id); - element_label.textContent = this.label; - element_container.appendChild(element_label); + if (this.hint === null) + { + // do nothing + } + else + { + await (new formgen.info.class_info(this.hint)).setup(element_label); + } } + element_container.appendChild(element_label); } // input { @@ -82,7 +94,7 @@ namespace formgen.input this.element_input = element_input; } target.appendChild(element_container); - return Promise.resolve(undefined); + // return Promise.resolve(undefined); } diff --git a/source/logic/input/color.ts b/source/logic/input/color.ts index 2ae6eed..415dcc2 100644 --- a/source/logic/input/color.ts +++ b/source/logic/input/color.ts @@ -13,11 +13,13 @@ namespace formgen.input { "additional_classes": additional_classes = [], "label": label = null, + "hint": hint = null, } : { additional_classes ?: Array, label ?: (null | string); + hint ?: (null | string); } = { @@ -30,6 +32,7 @@ namespace formgen.input (raw) => raw, { "label": label, + "hint": hint, "additional_classes": ["formgen-input-color"].concat(additional_classes), } ); diff --git a/source/logic/input/date.ts b/source/logic/input/date.ts index 061d426..0074c42 100644 --- a/source/logic/input/date.ts +++ b/source/logic/input/date.ts @@ -13,11 +13,13 @@ namespace formgen.input { "additional_classes": additional_classes = [], "label": label = null, + "hint": hint = null, } : { additional_classes ?: Array, label ?: (null | string); + hint ?: (null | string); } = { @@ -30,6 +32,7 @@ namespace formgen.input (raw) => raw, { "label": label, + "hint": hint, "additional_classes": ["formgen-input-date"].concat(additional_classes), } ); diff --git a/source/logic/input/number.ts b/source/logic/input/number.ts index 48c2e14..e699a6f 100644 --- a/source/logic/input/number.ts +++ b/source/logic/input/number.ts @@ -12,11 +12,13 @@ namespace formgen.input { "additional_classes": additional_classes = [], "label": label = null, + "hint": hint = null, } : { additional_classes ?: Array, label ?: (null | string); + hint ?: (null | string); } = { @@ -29,6 +31,7 @@ namespace formgen.input (raw) => parseInt(raw), { "label": label, + "hint": hint, "additional_classes": ["formgen-input-number"].concat(additional_classes), } ); diff --git a/source/logic/input/simple.ts b/source/logic/input/simple.ts index 843ed12..f8614c6 100644 --- a/source/logic/input/simple.ts +++ b/source/logic/input/simple.ts @@ -31,6 +31,11 @@ namespace formgen.input private label : (null | string); + /** + */ + private hint : (null | string); + + /** */ private element_input : (null | Element); @@ -45,11 +50,13 @@ namespace formgen.input { "additional_classes": additional_classes = [], "label": label = null, + "hint": hint = null, } : { additional_classes ?: Array, label ?: (null | string); + hint ?: (null | string); } = { @@ -61,6 +68,7 @@ namespace formgen.input this.value_decode = value_decode; this.additional_classes = additional_classes; this.label = label; + this.hint = hint; this.element_input = null; } @@ -68,7 +76,7 @@ namespace formgen.input /** * [implementation] */ - public setup( + public async setup( element_target : Element ) : Promise { @@ -82,17 +90,21 @@ namespace formgen.input } // label { - if (this.label === null) + const element_label : Element = document.createElement("label"); + element_label.setAttribute("for", id); + element_label.textContent = (this.label ?? ""); + // hint { - // do nothing - } - else - { - const element_label : Element = document.createElement("label"); - element_label.setAttribute("for", id); - element_label.textContent = this.label; - element_container.appendChild(element_label); + if (this.hint === null) + { + // do nothing + } + else + { + await (new formgen.info.class_info(this.hint)).setup(element_label); + } } + element_container.appendChild(element_label); } // input { @@ -103,7 +115,7 @@ namespace formgen.input this.element_input = element_input; } element_target.appendChild(element_container); - return Promise.resolve(undefined); + // return Promise.resolve(undefined); } diff --git a/source/logic/input/text.ts b/source/logic/input/text.ts index 4d43546..e00c78f 100644 --- a/source/logic/input/text.ts +++ b/source/logic/input/text.ts @@ -12,11 +12,13 @@ namespace formgen.input { "additional_classes": additional_classes = [], "label": label = null, + "hint": hint = null, } : { additional_classes ?: Array, label ?: (null | string); + hint ?: (null | string); } = { @@ -29,6 +31,7 @@ namespace formgen.input (raw) => raw, { "label": label, + "hint": hint, "additional_classes": ["formgen-input-text"].concat(additional_classes), } ); diff --git a/source/logic/input/time.ts b/source/logic/input/time.ts index 73ff6ff..5812354 100644 --- a/source/logic/input/time.ts +++ b/source/logic/input/time.ts @@ -13,11 +13,13 @@ namespace formgen.input { "additional_classes": additional_classes = [], "label": label = null, + "hint": hint = null, } : { additional_classes ?: Array, label ?: (null | string); + hint ?: (null | string); } = { @@ -30,6 +32,7 @@ namespace formgen.input (raw) => raw, { "label": label, + "hint": hint, "additional_classes": ["formgen-input-time"].concat(additional_classes), } ); diff --git a/source/structure.html b/source/structure.html index e748845..9cbbdb8 100644 --- a/source/structure.html +++ b/source/structure.html @@ -2,6 +2,7 @@ + diff --git a/source/style.css b/source/style.css index 32dd68e..896f7c3 100644 --- a/source/style.css +++ b/source/style.css @@ -60,6 +60,16 @@ body margin-bottom: 16px; } +.formgen-info +{ + cursor: help; + margin: 2px; + font-weight: bold; + /* + font-size: 75%; + */ +} + .formgen-input > label { display: block; @@ -115,9 +125,9 @@ body margin-bottom: 8px; } -.formgen-input-group-field-marked > .formgen-input > label::after +.formgen-input-group-field-marked > .formgen-input > label::before { - content: " *"; + content: "* "; } .formgen-input-sum-selection diff --git a/tools/build b/tools/build index 57b91bd..6e30bae 100755 --- a/tools/build +++ b/tools/build @@ -20,6 +20,7 @@ ${cmd_tsc} \ ${dir_source}/logic/helpers/list.ts \ ${dir_source}/logic/helpers/map.ts \ ${dir_source}/logic/helpers/json_schema.ts \ + ${dir_source}/logic/info.ts \ ${dir_source}/logic/input/_interface.ts \ ${dir_source}/logic/input/empty.ts \ ${dir_source}/logic/input/wrapper.ts \