diff --git a/source/helpers.ts b/source/helpers.ts index e955bae..19d0360 100644 --- a/source/helpers.ts +++ b/source/helpers.ts @@ -138,6 +138,25 @@ namespace _dali.helpers } + /** + */ + export async function element_from_template( + group : string, + name : string, + data : Record + ) + : Promise + { + const dom_dummy = document.createElement("div"); + dom_dummy.innerHTML = await _dali.helpers.template_coin( + group, + name, + data + ); + return (dom_dummy.children[0] as HTMLElement); + } + + /** * @todo outsource */ @@ -145,7 +164,8 @@ namespace _dali.helpers members : Array< () => Promise > - ) : Promise< + ) + : Promise< Array< type_result > @@ -162,7 +182,8 @@ namespace _dali.helpers /** */ export function input_access_level( - ) : lib_plankton.zoo_input.interface_input<_dali.enum_access_level> + ) + : lib_plankton.zoo_input.interface_input<_dali.enum_access_level> { return ( new lib_plankton.zoo_input.class_input_wrapped< @@ -283,7 +304,8 @@ namespace _dali.helpers /** */ export function datetime_input( - ) : lib_plankton.zoo_input.interface_input + ) + : lib_plankton.zoo_input.interface_input { return ( _dali.conf.get().misc.use_central_europe_specific_datetime_inputs @@ -364,7 +386,7 @@ namespace _dali.helpers } else { - _dali.overlay.get_content_element().innerHTML = "[...]"; + _dali.overlay.get_content_element().innerHTML = ". . ."; _dali.overlay.toggle({"mode": true}); } } diff --git a/source/style/hacks.css b/source/style/hacks.css deleted file mode 100644 index bf601e0..0000000 --- a/source/style/hacks.css +++ /dev/null @@ -1,9 +0,0 @@ -.plankton_input_group_field[rel="resource"] -{ - display: none; -} - -.weekview-control-count -{ - display: none !important; -} diff --git a/source/style/main.css b/source/style/main.css index dc06abf..6172301 100644 --- a/source/style/main.css +++ b/source/style/main.css @@ -20,72 +20,6 @@ header margin-bottom: 16px; } -#overlay -{ - position: fixed; - width: 100%; - height: 100%; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: hsla(var(--hue), 0%, 0%, 0.75); - z-index: 2; -} - -#overlay_content -{ - position: absolute; - top: 50%; - left: 50%; - - transform: translate(-50%,-50%); - -ms-transform: translate(-50%,-50%); - - padding: 32px; - - background-color: hsl(0, 0%, 12.5%); - color: hsl(0, 0%, 100%); -} - -#overlay:not(.overlay_active) -{ - display: none; -} - -nav > ul -{ - list-style-type: none; - margin: 0; - padding: 0; -} - -nav > ul > li -{ - display: inline-block; - margin: 8px; - padding: 8px; -} - -nav > ul > li:not(.active) -{ - display: none; -} - -nav a -{ - padding: 8px; - text-decoration: none; - color: hsl(var(--hue), 0%, 87.5%); -} - -nav a:hover -{ - color: hsl(var(--hue), 0%, 100%); - border-bottom: 2px solid hsl(0, 0%, 100%); - transition: 1s ease color; -} - a { text-decoration: none; @@ -101,7 +35,7 @@ a:hover button { - padding: 4px 8px; + padding: 8px 12px; text-transform: uppercase; cursor: pointer; diff --git a/source/style/overlay.css b/source/style/overlay.css new file mode 100644 index 0000000..d7eb0fe --- /dev/null +++ b/source/style/overlay.css @@ -0,0 +1,32 @@ +#overlay +{ + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: hsla(var(--hue), 0%, 0%, 0.75); + z-index: 2; +} + +#overlay_content +{ + position: absolute; + top: 50%; + left: 50%; + + transform: translate(-50%,-50%); + -ms-transform: translate(-50%,-50%); + + padding: 32px; + + background-color: hsl(0, 0%, 12.5%); + color: hsl(0, 0%, 100%); +} + +#overlay:not(.overlay_active) +{ + display: none; +} diff --git a/source/widgets/calendar_edit/logic.ts b/source/widgets/calendar_edit/logic.ts index a3464ba..1ab7869 100644 --- a/source/widgets/calendar_edit/logic.ts +++ b/source/widgets/calendar_edit/logic.ts @@ -111,6 +111,13 @@ namespace _dali.widgets target_element : HTMLElement ) : Promise { + const dom_root = await _dali.helpers.element_from_template( + "widget-calendar_edit", + "main", + { + } + ); + const form : lib_plankton.zoo_form.class_form< _dali.type_calendar_object, _dali.type_calendar_object @@ -243,9 +250,11 @@ namespace _dali.widgets ) ) ); - await form.setup(target_element); + await form.setup(dom_root); await form.input_lock(this.read_only); await form.input_write(this.initial_value); + + target_element.appendChild(dom_root); } } diff --git a/source/widgets/calendar_edit/style.css b/source/widgets/calendar_edit/style.css new file mode 100644 index 0000000..475a7c9 --- /dev/null +++ b/source/widgets/calendar_edit/style.css @@ -0,0 +1,4 @@ +.widget-calendar_edit .plankton_input_group_field[rel="resource"] +{ + display: none; +} diff --git a/source/widgets/calendar_edit/templates/main.html.tpl b/source/widgets/calendar_edit/templates/main.html.tpl new file mode 100644 index 0000000..ae074db --- /dev/null +++ b/source/widgets/calendar_edit/templates/main.html.tpl @@ -0,0 +1,2 @@ +
+
diff --git a/source/widgets/event_edit/logic.ts b/source/widgets/event_edit/logic.ts index 4eecdb7..29ea0cc 100644 --- a/source/widgets/event_edit/logic.ts +++ b/source/widgets/event_edit/logic.ts @@ -154,6 +154,13 @@ namespace _dali.widgets target_element : HTMLElement ) : Promise { + const dom_root = await _dali.helpers.element_from_template( + "widget-event_edit", + "main", + { + } + ); + const form : lib_plankton.zoo_form.class_form< type_value, type_representation @@ -316,9 +323,11 @@ namespace _dali.widgets ) ) ); - await form.setup(target_element); + await form.setup(dom_root); await form.input_lock(this.read_only); await form.input_write(this.initial_value); + + target_element.appendChild(dom_root); } } diff --git a/source/widgets/event_edit/templates/main.html.tpl b/source/widgets/event_edit/templates/main.html.tpl new file mode 100644 index 0000000..01002ef --- /dev/null +++ b/source/widgets/event_edit/templates/main.html.tpl @@ -0,0 +1,2 @@ +
+
diff --git a/source/widgets/menu/logic.ts b/source/widgets/menu/logic.ts index 617a2f0..e0353ae 100644 --- a/source/widgets/menu/logic.ts +++ b/source/widgets/menu/logic.ts @@ -37,12 +37,7 @@ namespace _dali.widgets /** */ - private entries : Array< - { - data : type_entry_data; - element : (null | HTMLElement); - } - >; + private entries : Array; /** @@ -63,7 +58,7 @@ namespace _dali.widgets /** */ public constructor( - entry_data_list : Array, + entries : Array, { "initial_groups": initial_groups = [], "initial_label": initial_label = "", @@ -78,14 +73,7 @@ namespace _dali.widgets } ) { - this.entries = entry_data_list.map( - entry_data => ( - { - "data": entry_data, - "element": null, - } - ) - ); + this.entries = entries; this.initial_groups = initial_groups; this.label = initial_label; this.container = null; @@ -100,17 +88,20 @@ namespace _dali.widgets : void { this.entries.forEach( - entry => { - const active : boolean = groups.some(group => entry.data.groups.includes(group)); - entry.element.classList.toggle("widget-menu-entry-hidden", (! active)); + (entry, index) => { + const active : boolean = groups.some(group => entry.groups.includes(group)); + const rel : string = index.toFixed(0); + const dom_entry = this.container.querySelector(".widget-menu-entry[rel=\"" + rel + "\"]"); + dom_entry.classList.toggle("widget-menu-entry-hidden", (! active)); } ); } + /** */ public set_label( - label ?: string + label : (null | string) ) : void { @@ -153,56 +144,69 @@ namespace _dali.widgets ) : Promise { - // container - { - const dom_container : HTMLElement = document.createElement("div"); - dom_container.classList.add("widget-menu"); - // button + // structure + this.container = await _dali.helpers.element_from_template( + "widget-menu", + "main", { - const dom_button : HTMLElement = document.createElement("button"); - dom_button.textContent = "[" + this.label + "]"; - dom_button.classList.add("widget-menu-button"); - dom_button.addEventListener( + "entries": ( + ( + await lib_plankton.call.promise_condense( + this.entries.map( + (entry, index) => () => _dali.helpers.template_coin( + "widget-menu", + "entry", + { + "label": entry.label, + "rel": index.toFixed(0), + } + ) + ) + ) + ) + .join("") + ), + } + ); + + // logic + { + // collapser + { + this.container.querySelector(".widget-menu-button").addEventListener( "click", () => { this.toggle_collapsed(); } ); - dom_container.classList.toggle("widget-menu-collapsed", true); - dom_container.appendChild(dom_button); } - // platform + // entries { - const dom_platform : HTMLElement = document.createElement("div"); - dom_platform.classList.add("widget-menu-platform"); - { - const dom_list : HTMLElement = document.createElement("ul"); - dom_list.classList.add("widget-menu-entries"); - this.entries.forEach( - entry => { - const dom_entry : HTMLElement = document.createElement("li"); - dom_entry.classList.add("widget-menu-entry"); - dom_entry.textContent = entry.data.label; - dom_entry.addEventListener( - "click", - () => { - this.toggle_collapsed({"mode": true}); - entry.data.action(); - } - ); - dom_list.appendChild(dom_entry); - entry.element = dom_entry; - } - ); - dom_platform.appendChild(dom_list); - } - dom_container.appendChild(dom_platform); + this.container.querySelectorAll(".widget-menu-entry").forEach( + dom_entry => { + dom_entry.addEventListener( + "click", + () => { + const index : int = parseInt(dom_entry.getAttribute("rel")); + const entry : type_entry_data = this.entries[index]; + this.toggle_collapsed({"mode": true}); + entry.action(); + } + ); + } + ); } - target_element.appendChild(dom_container); - this.container = dom_container; } - this.set_groups(this.initial_groups); + // init + { + this.toggle_collapsed({"mode": true}); + this.set_groups(this.initial_groups); + this.set_label(null); + } + + // finish + target_element.appendChild(this.container); } } diff --git a/source/widgets/menu/style.css b/source/widgets/menu/style.css index 8451302..b1af290 100644 --- a/source/widgets/menu/style.css +++ b/source/widgets/menu/style.css @@ -29,7 +29,9 @@ padding: 8px; + /* min-width: 200px; + */ } .widget-menu-platform:not(.widget-menu-platform-collapsed) @@ -53,31 +55,20 @@ text-transform: capitalize; background-color: hsl(var(--hue), 0%, 25%); color: hsl(var(--hue), 0%, 100%); +} + +.widget-menu-entry:not(:hover) > span +{ border-bottom: 2px solid hsl(0, 0%, 25%); } -.widget-menu-entry:hover +.widget-menu-entry:hover > span { - color: hsl(var(--hue), 0%, 100%); border-bottom: 2px solid hsl(0, 0%, 100%); transition: 1s ease color; } -/* -.widget-menu-entry -{ - margin: 8px; - text-transform: capitalize; -} - -.widget-menu-entry:not(:hover) -{ - background-color: hsl(var(--hue), 0%, 25%); - color: hsl(var(--hue), 0%, 100%); -} - */ - .widget-menu-entry.widget-menu-entry-hidden { display: none; diff --git a/source/widgets/menu/templates/entry.html.tpl b/source/widgets/menu/templates/entry.html.tpl new file mode 100644 index 0000000..fff29f2 --- /dev/null +++ b/source/widgets/menu/templates/entry.html.tpl @@ -0,0 +1,3 @@ +
  • + {{label}} +
    • diff --git a/source/widgets/menu/templates/main.html.tpl b/source/widgets/menu/templates/main.html.tpl new file mode 100644 index 0000000..e1b3e72 --- /dev/null +++ b/source/widgets/menu/templates/main.html.tpl @@ -0,0 +1,8 @@ +
    + +
    +
      +{{entries}} +
    +
    +
    diff --git a/source/widgets/mode_switcher/logic.ts b/source/widgets/mode_switcher/logic.ts index 6a40a29..548c9d5 100644 --- a/source/widgets/mode_switcher/logic.ts +++ b/source/widgets/mode_switcher/logic.ts @@ -78,7 +78,8 @@ namespace _dali.widgets */ public async load( target_element : Element - ) : Promise + ) + : Promise { target_element.innerHTML = await _dali.helpers.template_coin( "widget-mode_switcher", diff --git a/source/widgets/special_number_input/logic.ts b/source/widgets/special_number_input/logic.ts index d593f89..738fd99 100644 --- a/source/widgets/special_number_input/logic.ts +++ b/source/widgets/special_number_input/logic.ts @@ -91,8 +91,7 @@ namespace _dali.widgets ) : Promise { - const dom_dummy = document.createElement("div"); - dom_dummy.innerHTML = await _dali.helpers.template_coin( + const dom_root = await _dali.helpers.element_from_template( "widget-special_number_input", "main", { @@ -100,20 +99,21 @@ namespace _dali.widgets } ); - const dom_input : HTMLInputElement = (dom_dummy.querySelector(".widget-special_number_input-input") as HTMLInputElement); + const dom_input : HTMLInputElement = (dom_root.querySelector(".widget-special_number_input-input") as HTMLInputElement); // listeners { dom_input.addEventListener( "change", () => { - this.value = parseInt(dom_input.value); + const value : int = parseInt(dom_input.value); if ( - ((this.minimum === null) || (this.value >= this.minimum)) + ((this.minimum === null) || (value >= this.minimum)) && - ((this.maximum === null) || (this.value <= this.maximum)) + ((this.maximum === null) || (value <= this.maximum)) ) { + this.value = value; this.action_change(this.value); } else @@ -122,7 +122,7 @@ namespace _dali.widgets } } ); - dom_dummy.querySelector(".widget-special_number_input-prev").addEventListener( + dom_root.querySelector(".widget-special_number_input-prev").addEventListener( "click", () => { if ((this.minimum === null) || (this.value > this.minimum)) @@ -137,7 +137,7 @@ namespace _dali.widgets } } ); - dom_dummy.querySelector(".widget-special_number_input-next").addEventListener( + dom_root.querySelector(".widget-special_number_input-next").addEventListener( "click", () => { if ((this.maximum === null) || (this.value < this.maximum)) @@ -154,9 +154,12 @@ namespace _dali.widgets ); } - dom_input.value = this.value.toFixed(0); + // content + { + dom_input.value = this.value.toFixed(0); + } - target_element.appendChild(dom_dummy.querySelector(".widget-special_number_input")); + target_element.appendChild(dom_root); } } diff --git a/source/widgets/weekview/logic.ts b/source/widgets/weekview/logic.ts index ac939de..d506cc7 100644 --- a/source/widgets/weekview/logic.ts +++ b/source/widgets/weekview/logic.ts @@ -384,8 +384,7 @@ namespace _dali.widgets } else { - let dom_dummy : HTMLElement = document.createElement("div"); - dom_dummy.innerHTML = await _dali.helpers.template_coin( + const dom_entry = await _dali.helpers.element_from_template( "widget-weekview", "tableview-cell-entry", { @@ -400,7 +399,6 @@ namespace _dali.widgets ), } ); - const dom_entry : HTMLElement = dom_dummy.querySelector(".weekview-event_entry"); // listener dom_entry.addEventListener( @@ -938,15 +936,14 @@ namespace _dali.widgets */ // control:vertical { - const dom_dummy : HTMLElement = document.createElement("div"); - dom_dummy.innerHTML = await _dali.helpers.template_coin( + const dom_control = await _dali.helpers.element_from_template( "widget-weekview", "control-vertical", { "label": lib_plankton.translate.get("widget.weekview.controls.vertical"), } ); - const dom_input : HTMLInputElement = (dom_dummy.querySelector("input") as HTMLInputElement); + const dom_input : HTMLInputElement = (dom_control.querySelector("input") as HTMLInputElement); dom_input.addEventListener( "change", async () => { @@ -958,7 +955,7 @@ namespace _dali.widgets } ); dom_input.checked = this.vertical; - target_element.querySelector(".weekview-controls").appendChild(dom_dummy.querySelector(".weekview-control-vertical")); + target_element.querySelector(".weekview-controls").appendChild(dom_control); } this.container = target_element.querySelector(".weekview"); diff --git a/tools/makefile b/tools/makefile index c2b20c8..8525d3f 100644 --- a/tools/makefile +++ b/tools/makefile @@ -32,7 +32,10 @@ ${dir_build}/index.html: \ templates: \ templates-widgets-special_number_input \ templates-widgets-login_oidc \ + templates-widgets-menu \ templates-widgets-sources \ + templates-widgets-calendar_edit \ + templates-widgets-event_edit \ templates-widgets-caldav \ templates-widgets-listview \ templates-widgets-weekview \ @@ -53,6 +56,13 @@ templates-widgets-login_oidc: \ @ ${cmd_mkdir} ${dir_build}/templates/widget-login_oidc @ ${cmd_cp} -r -u -v ${dir_source}/widgets/login_oidc/templates/* ${dir_build}/templates/widget-login_oidc/ +.PHONY: templates-widgets-menu +templates-widgets-menu: \ + $(wildcard ${dir_source}/widgets/menu/templates/*) + @ ${cmd_log} "templates:widget:menu …" + @ ${cmd_mkdir} ${dir_build}/templates/widget-menu + @ ${cmd_cp} -r -u -v ${dir_source}/widgets/menu/templates/* ${dir_build}/templates/widget-menu/ + .PHONY: templates-widgets-sources templates-widgets-sources: \ $(wildcard ${dir_source}/widgets/sources/templates/*) @@ -60,6 +70,20 @@ templates-widgets-sources: \ @ ${cmd_mkdir} ${dir_build}/templates/widget-sources @ ${cmd_cp} -r -u -v ${dir_source}/widgets/sources/templates/* ${dir_build}/templates/widget-sources/ +.PHONY: templates-widgets-calendar_edit +templates-widgets-calendar_edit: \ + $(wildcard ${dir_source}/widgets/calendar_edit/templates/*) + @ ${cmd_log} "templates:widget:calendar_edit …" + @ ${cmd_mkdir} ${dir_build}/templates/widget-calendar_edit + @ ${cmd_cp} -r -u -v ${dir_source}/widgets/calendar_edit/templates/* ${dir_build}/templates/widget-calendar_edit/ + +.PHONY: templates-widgets-event_edit +templates-widgets-event_edit: \ + $(wildcard ${dir_source}/widgets/event_edit/templates/*) + @ ${cmd_log} "templates:widget:event_edit …" + @ ${cmd_mkdir} ${dir_build}/templates/widget-event_edit + @ ${cmd_cp} -r -u -v ${dir_source}/widgets/event_edit/templates/* ${dir_build}/templates/widget-event_edit/ + .PHONY: templates-widgets-caldav templates-widgets-caldav: \ $(wildcard ${dir_source}/widgets/caldav/templates/*)