[mod] overlay:scrollable

Co-authored-by: Fenris Wolf <fenris@folksprak.org>
Co-committed-by: Fenris Wolf <fenris@folksprak.org>

lib/plankton/plankton.d.ts

@@ -4306,6 +4306,9 @@ declare namespace lib_plankton.zoo_input {
         /**
          */
         hook_change(action: (() => void)): Promise<void>;
+        /**
+         */
+        focus(): void;
     }
 }
 declare namespace lib_plankton.zoo_input {
@@ -4353,6 +4356,10 @@ declare namespace lib_plankton.zoo_input {
          * [implementation]
          */
         hook_change(action: (() => void)): Promise<void>;
+        /**
+         * [implementation]
+         */
+        focus(): void;
     }
 }
 declare namespace lib_plankton.zoo_input {
@@ -4392,6 +4399,10 @@ declare namespace lib_plankton.zoo_input {
          * [implementation]
          */
         hook_change(action: (() => void)): Promise<void>;
+        /**
+         * [implementation]
+         */
+        focus(): void;
     }
 }
 declare namespace lib_plankton.zoo_input {
@@ -4439,6 +4450,10 @@ declare namespace lib_plankton.zoo_input {
          * [implementation]
          */
         hook_change(action: (() => void)): Promise<void>;
+        /**
+         * [implementation]
+         */
+        focus(): void;
     }
 }
 declare namespace lib_plankton.zoo_input {
@@ -4477,6 +4492,10 @@ declare namespace lib_plankton.zoo_input {
          * [implementation]
          */
         hook_change(action: (() => void)): Promise<void>;
+        /**
+         * [implementation]
+         */
+        focus(): void;
     }
 }
 declare namespace lib_plankton.zoo_input {
@@ -4533,6 +4552,10 @@ declare namespace lib_plankton.zoo_input {
          * [implementation]
          */
         hook_change(action: (() => void)): Promise<void>;
+        /**
+         * [implementation]
+         */
+        focus(): void;
     }
 }
 declare namespace lib_plankton.zoo_input {
@@ -4571,6 +4594,10 @@ declare namespace lib_plankton.zoo_input {
          * [implementation]
          */
         hook_change(action: (() => void)): Promise<void>;
+        /**
+         * [implementation]
+         */
+        focus(): void;
     }
 }
 declare namespace lib_plankton.zoo_input {
@@ -4617,6 +4644,10 @@ declare namespace lib_plankton.zoo_input {
          * [implementation]
          */
         hook_change(action: (() => void)): Promise<void>;
+        /**
+         * [implementation]
+         */
+        focus(): void;
     }
 }
 declare namespace lib_plankton.zoo_input {
@@ -4656,6 +4687,10 @@ declare namespace lib_plankton.zoo_input {
          * [implementation]
          */
         hook_change(action: (() => void)): Promise<void>;
+        /**
+         * [implementation]
+         */
+        focus(): void;
     }
 }
 declare namespace lib_plankton.zoo_input {
@@ -4702,6 +4737,10 @@ declare namespace lib_plankton.zoo_input {
          * [implementation]
          */
         hook_change(action: (() => void)): Promise<void>;
+        /**
+         * [implementation]
+         */
+        focus(): void;
     }
 }
 declare namespace lib_plankton.zoo_input {
@@ -4765,6 +4804,10 @@ declare namespace lib_plankton.zoo_input {
          * [implementation]
          */
         hook_change(action: (() => void)): Promise<void>;
+        /**
+         * [implementation]
+         */
+        focus(): void;
     }
     export {};
 }
@@ -4809,6 +4852,10 @@ declare namespace lib_plankton.zoo_input {
          * [implementation]
          */
         hook_change(action: (() => void)): Promise<void>;
+        /**
+         * [implementation]
+         */
+        focus(): void;
     }
 }
 declare namespace lib_plankton.zoo_input {
@@ -4861,6 +4908,10 @@ declare namespace lib_plankton.zoo_input {
          * [implementation]
          */
         hook_change(action: (() => void)): Promise<void>;
+        /**
+         * [implementation]
+         */
+        focus(): void;
     }
 }
 declare namespace lib_plankton.zoo_input {
@@ -4905,6 +4956,10 @@ declare namespace lib_plankton.zoo_input {
          * [implementation]
          */
         hook_change(action: (() => void)): Promise<void>;
+        /**
+         * [implementation]
+         */
+        focus(): void;
     }
 }
 declare namespace lib_plankton.zoo_input {
@@ -4953,6 +5008,10 @@ declare namespace lib_plankton.zoo_input {
          * [implementation]
          */
         hook_change(action: (() => void)): Promise<void>;
+        /**
+         * [implementation]
+         */
+        focus(): void;
     }
 }
 declare namespace lib_plankton.zoo_input {
@@ -4988,6 +5047,10 @@ declare namespace lib_plankton.zoo_input {
          * [implementation]
          */
         hook_change(action: (() => void)): Promise<void>;
+        /**
+         * [implementation]
+         */
+        focus(): void;
     }
 }
 declare namespace lib_plankton.zoo_input {
@@ -5021,6 +5084,10 @@ declare namespace lib_plankton.zoo_input {
          * [implementation]
          */
         hook_change(action: (() => void)): Promise<void>;
+        /**
+         * [implementation]
+         */
+        focus(): void;
     }
 }
 declare namespace lib_plankton.zoo_input {
@@ -5054,6 +5121,10 @@ declare namespace lib_plankton.zoo_input {
          * [implementation]
          */
         hook_change(action: (() => void)): Promise<void>;
+        /**
+         * [implementation]
+         */
+        focus(): void;
     }
 }
 declare namespace lib_plankton.zoo_input {
@@ -5166,6 +5237,9 @@ declare namespace lib_plankton.zoo_form {
         /**
          */
         input_lock(mode: boolean): Promise<void>;
+        /**
+         */
+        input_focus(): void;
     }
     export {};
 }

lib/plankton/plankton.js

@@ -13295,6 +13295,12 @@ var lib_plankton;
                 });
                 return Promise.resolve(undefined);
             }
+            /**
+             * [implementation]
+             */
+            focus() {
+                this.dom_input.focus();
+            }
         }
         zoo_input.class_input_simple = class_input_simple;
     })(zoo_input = lib_plankton.zoo_input || (lib_plankton.zoo_input = {}));
@@ -13364,6 +13370,12 @@ var lib_plankton;
             hook_change(action) {
                 return this.core.hook_change(action);
             }
+            /**
+             * [implementation]
+             */
+            focus() {
+                this.core.focus();
+            }
         }
         zoo_input.class_input_wrapped = class_input_wrapped;
     })(zoo_input = lib_plankton.zoo_input || (lib_plankton.zoo_input = {}));
@@ -13486,6 +13498,12 @@ var lib_plankton;
                 });
                 await this.core.hook_change(action);
             }
+            /**
+             * [implementation]
+             */
+            focus() {
+                this.dom_set.focus();
+            }
         }
         zoo_input.class_input_soft = class_input_soft;
     })(zoo_input = lib_plankton.zoo_input || (lib_plankton.zoo_input = {}));
@@ -13557,6 +13575,11 @@ var lib_plankton;
             hook_change(action) {
                 return Promise.resolve(undefined);
             }
+            /**
+             * [implementation]
+             */
+            focus() {
+            }
         }
         zoo_input.class_input_hidden = class_input_hidden;
     })(zoo_input = lib_plankton.zoo_input || (lib_plankton.zoo_input = {}));
@@ -13711,6 +13734,12 @@ var lib_plankton;
                 });
                 return Promise.resolve(undefined);
             }
+            /**
+             * [implementation]
+             */
+            focus() {
+                this.dom_textarea.focus();
+            }
         }
         zoo_input.class_input_textarea = class_input_textarea;
     })(zoo_input = lib_plankton.zoo_input || (lib_plankton.zoo_input = {}));
@@ -13822,6 +13851,12 @@ var lib_plankton;
                 });
                 return Promise.resolve(undefined);
             }
+            /**
+             * [implementation]
+             */
+            focus() {
+                this.dom_input.focus();
+            }
         }
         zoo_input.class_input_date = class_input_date;
     })(zoo_input = lib_plankton.zoo_input || (lib_plankton.zoo_input = {}));
@@ -13941,6 +13976,12 @@ var lib_plankton;
                 });
                 return Promise.resolve(undefined);
             }
+            /**
+             * [implementation]
+             */
+            focus() {
+                this.dom_input.focus();
+            }
         }
         zoo_input.class_input_checkbox = class_input_checkbox;
     })(zoo_input = lib_plankton.zoo_input || (lib_plankton.zoo_input = {}));
@@ -14025,6 +14066,12 @@ var lib_plankton;
                 });
                 return Promise.resolve(undefined);
             }
+            /**
+             * [implementation]
+             */
+            focus() {
+                this.dom_select.focus();
+            }
         }
         zoo_input.class_input_selection = class_input_selection;
     })(zoo_input = lib_plankton.zoo_input || (lib_plankton.zoo_input = {}));
@@ -14137,6 +14184,12 @@ var lib_plankton;
                 });
                 return Promise.resolve(undefined);
             }
+            /**
+             * [implementation]
+             */
+            focus() {
+                this.dom_inputs[0].focus();
+            }
         }
         zoo_input.class_input_enumeration = class_input_enumeration;
     })(zoo_input = lib_plankton.zoo_input || (lib_plankton.zoo_input = {}));
@@ -14316,6 +14369,12 @@ var lib_plankton;
                     await element.input.hook_change(action);
                 }
             }
+            /**
+             * [implementation]
+             */
+            focus() {
+                lib_plankton.log.notice("plankton.zoo_input.list.focus.dummy_implementation");
+            }
         }
         zoo_input.class_input_list = class_input_list;
     })(zoo_input = lib_plankton.zoo_input || (lib_plankton.zoo_input = {}));
@@ -14427,6 +14486,12 @@ var lib_plankton;
                 });
                 return Promise.resolve(undefined);
             }
+            /**
+             * [implementation]
+             */
+            focus() {
+                this.checkboxes[0].focus();
+            }
         }
         zoo_input.class_input_set = class_input_set;
     })(zoo_input = lib_plankton.zoo_input || (lib_plankton.zoo_input = {}));
@@ -14545,6 +14610,12 @@ var lib_plankton;
                 });
                 return Promise.resolve(undefined);
             }
+            /**
+             * [implementation]
+             */
+            focus() {
+                this.dom_input.focus();
+            }
         }
         zoo_input.class_input_password = class_input_password;
     })(zoo_input = lib_plankton.zoo_input || (lib_plankton.zoo_input = {}));
@@ -14638,6 +14709,12 @@ var lib_plankton;
                 });
                 return Promise.resolve(undefined);
             }
+            /**
+             * [implementation]
+             */
+            focus() {
+                this.dom_element.focus();
+            }
         }
         zoo_input.class_input_switch = class_input_switch;
     })(zoo_input = lib_plankton.zoo_input || (lib_plankton.zoo_input = {}));
@@ -14820,6 +14897,12 @@ var lib_plankton;
                 });
                 return Promise.resolve(undefined);
             }
+            /**
+             * [implementation]
+             */
+            focus() {
+                this.fields[0].input.focus();
+            }
         }
         zoo_input.class_input_group = class_input_group;
     })(zoo_input = lib_plankton.zoo_input || (lib_plankton.zoo_input = {}));
@@ -14900,6 +14983,12 @@ var lib_plankton;
             hook_change(action) {
                 return this.core.hook_change(action);
             }
+            /**
+             * [implementation]
+             */
+            focus() {
+                this.core.focus();
+            }
         }
         zoo_input.class_input_hashmap = class_input_hashmap;
     })(zoo_input = lib_plankton.zoo_input || (lib_plankton.zoo_input = {}));
@@ -14987,6 +15076,12 @@ var lib_plankton;
             hook_change(action) {
                 return this.core.hook_change(action);
             }
+            /**
+             * [implementation]
+             */
+            focus() {
+                this.core.focus();
+            }
         }
         zoo_input.class_input_datetime = class_input_datetime;
     })(zoo_input = lib_plankton.zoo_input || (lib_plankton.zoo_input = {}));
@@ -15097,6 +15192,12 @@ var lib_plankton;
             hook_change(action) {
                 return this.core.hook_change(action);
             }
+            /**
+             * [implementation]
+             */
+            focus() {
+                this.core.focus();
+            }
         }
         zoo_input.class_input_datetime_central_europe = class_input_datetime_central_europe;
     })(zoo_input = lib_plankton.zoo_input || (lib_plankton.zoo_input = {}));
@@ -15444,6 +15545,11 @@ var lib_plankton;
             input_lock(mode) {
                 return this.input.lock(mode);
             }
+            /**
+             */
+            input_focus() {
+                return this.input.focus();
+            }
         }
         zoo_form.class_form = class_form;
     })(zoo_form = lib_plankton.zoo_form || (lib_plankton.zoo_form = {}));

source/helpers.ts

@@ -138,6 +138,25 @@ namespace _dali.helpers
 	}
 	
 	
+	/**
+	 */
+	export async function element_from_template(
+		group : string,
+		name : string,
+		data : Record<string, string>
+	)
+	: Promise<HTMLElement>
+	{
+		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<type_result>
 		>
-	) : 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.pit.type_datetime>
+	)
+	: lib_plankton.zoo_input.interface_input<lib_plankton.pit.type_datetime>
 	{
 		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});
 		}
 	}

source/style/hacks.css

@@ -1,9 +0,0 @@
-.plankton_input_group_field[rel="resource"]
-{
-	display: none;
-}
-
-.weekview-control-count
-{
-	display: none !important;
-}

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;
 

source/style/overlay.css

@@ -0,0 +1,33 @@
+#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;
+	overflow: auto;
+}
+
+#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;
+}

source/widgets/caldav/logic.ts

@@ -159,6 +159,10 @@ namespace _dali.widgets
 					);
 				}
 			}
+			// init
+			{
+				(target_element.querySelector(".widget-caldav-close") as HTMLElement).focus();
+			}
 			
 			return Promise.resolve<void>(undefined);
 		}

source/widgets/calendar_edit/logic.ts

@@ -111,6 +111,13 @@ namespace _dali.widgets
 			target_element : HTMLElement
 		) : Promise<void>
 		{
+			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,12 @@ 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);
+			form.input_focus();
 		}
 		
 	}

source/widgets/calendar_edit/style.css

@@ -0,0 +1,4 @@
+.widget-calendar_edit .plankton_input_group_field[rel="resource"]
+{
+	display: none;
+}

source/widgets/calendar_edit/templates/main.html.tpl

@@ -0,0 +1,2 @@
+<div class="widget-calendar_edit">
+</div>

source/widgets/event_edit/logic.ts

@@ -154,6 +154,13 @@ namespace _dali.widgets
 			target_element : HTMLElement
 		) : Promise<void>
 		{
+			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,12 @@ 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);
+			form.input_focus();
 		}
 		
 	}

source/widgets/event_edit/templates/main.html.tpl

@@ -0,0 +1,2 @@
+<div class="widget-event_edit">
+</div>

source/widgets/login_internal/logic.ts

@@ -157,6 +157,7 @@ namespace _dali.widgets
 					"password": "",
 				}
 			);
+			form.input_focus();
 		}
 		
 	}

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<type_entry_data>;
 		
 		
 		/**
@@ -63,7 +58,7 @@ namespace _dali.widgets
 		/**
 		 */
 		public constructor(
-			entry_data_list : Array<type_entry_data>,
+			entries : Array<type_entry_data>,
 			{
 				"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<void>
 		{
-			// 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);
 		}
 		
 	}

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;

source/widgets/menu/templates/entry.html.tpl

@@ -0,0 +1,3 @@
+<li class="widget-menu-entry" rel="{{rel}}">
+	<span>{{label}}</span>
+</li>

source/widgets/menu/templates/main.html.tpl

@@ -0,0 +1,8 @@
+<div class="widget-menu">
+	<button class="widget-menu-button"></button>
+	<div class="widget-menu-platform">
+		<ul class="widget-menu-entries">
+{{entries}}
+		</ul>
+	</div>
+</div>

source/widgets/mode_switcher/logic.ts

@@ -78,7 +78,8 @@ namespace _dali.widgets
 		 */
 		public async load(
 			target_element : Element
-		) : Promise<void>
+		)
+		: Promise<void>
 		{
 			target_element.innerHTML = await _dali.helpers.template_coin(
 				"widget-mode_switcher",

source/widgets/special_number_input/logic.ts

@@ -91,8 +91,7 @@ namespace _dali.widgets
 		)
 		: Promise<void>
 		{
-			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);
 		}
 		
 	}

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");

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/*)