lib/plankton/plankton.js

@@ -12743,9 +12743,10 @@ var lib_plankton;
                 const dom_container = document.createElement("div");
                 dom_container.classList.add("widget-bunch");
                 for (const element of this.elements) {
-                    const dom_li = document.createElement("li");
+                    const dom_element = document.createElement("div");
-                    await element.load(dom_li);
+                    dom_element.classList.add("widget-bunch-element");
-                    dom_container.appendChild(dom_li);
+                    await element.load(dom_element);
+                    dom_container.appendChild(dom_element);
                 }
                 target_element.appendChild(dom_container);
             }
@@ -12832,7 +12833,7 @@ var lib_plankton;
                         null
                     :
                         class_slider.position_subtract(position, this.state.touch_start_position));
-                this.state.dom_context.querySelector(".slides").style.transform = (([
+                this.state.dom_context.querySelector(".widget-slider-slides").style.transform = (([
                     lib_plankton.string.coin("translateX({{value}}%)", {
                         "value": ((this.state.index - 1) * (-100)).toFixed(0)
                     })
@@ -12842,7 +12843,6 @@ var lib_plankton;
                         []
                     :
                         [
-                            // 
                             lib_plankton.string.coin("translateX({{value}}px)", {
                                 "value": class_slider.cap(((this.state.index >= this.conf.content.length)
                                     ?
@@ -12925,30 +12925,60 @@ var lib_plankton;
              */
             async load(target_element) {
                 this.state.dom_context = target_element;
+                // style
+                {
+                    const dom_style = document.createElement("style");
+                    dom_style.textContent = ([
+                        {
+                            "selector": ".widget-slider",
+                            "settings": {
+                                "overflow": "hidden",
+                                "white-space": "nowrap",
+                                "width": "100%",
+                            },
+                        },
+                        {
+                            "selector": ".widget-slider-slides",
+                            "settings": {
+                                "width": "100%",
+                                "height": "100%",
+                                "transition": "transform 0.25s ease-in-out",
+                            }
+                        },
+                        {
+                            "selector": ".widget-slider-slide",
+                            "settings": {
+                                "display": "inline-block",
+                                "height": "100%",
+                                "width": "100%;",
+                                "vertical-align": "top",
+                                "white-space": "normal",
+                                "transition": "width 0.25s ease-in-out",
+                            }
+                        }
+                    ]
+                        .map(rule => lib_plankton.string.coin("{{selector}} {{{settings}}}", {
+                        "selector": rule.selector,
+                        "settings": (Object.entries(rule.settings)
+                            .map(([key, value]) => lib_plankton.string.coin("{{key}}: {{value}};", {
+                            "key": key,
+                            "value": value,
+                        }))
+                            .join(" "))
+                    }))
+                        .join("\n"));
+                    this.state.dom_context.appendChild(dom_style);
+                }
                 // structure
                 {
                     const dom_container = document.createElement("div");
-                    {
+                    dom_container.classList.add("widget-slider");
-                        dom_container.style.overflow = "hidden";
-                        dom_container.style.whiteSpace = "nowrap";
-                    }
                     {
                         const dom_content = document.createElement("div");
-                        {
+                        dom_content.classList.add("widget-slider-slides");
-                            dom_content.style.height = "100%";
-                            dom_content.style.width = "100%";
-                            dom_content.style.transition = "transform 0.25s ease-in-out";
-                        }
-                        dom_content.classList.add("slides");
                         for (const slide of this.conf.content) {
                             const dom_slide = document.createElement("div");
-                            dom_slide.classList.add("slide");
+                            dom_slide.classList.add("widget-slider-slide");
-                            {
-                                dom_slide.style.display = "inline-block";
-                                dom_slide.style.height = "100%";
-                                dom_slide.style.width = "100%";
-                                dom_slide.style.transition = "width 0.25s ease-in-out";
-                            }
                             await slide.load(dom_slide);
                             dom_content.appendChild(dom_slide);
                         }

source/pages/overview/logic.ts

@@ -495,6 +495,7 @@ namespace _dali.pages.overview
 					get_entries,
 					{
 						"initial_view_mode": view_mode,
+						"weekview_initial_vertical": (view_kind === _dali.enum_view_kind.touch),
 						"action_create_event": action_create_event,
 						"action_edit_event": action_edit_event,
 					}
@@ -512,16 +513,21 @@ namespace _dali.pages.overview
 			{
 				case _dali.enum_view_kind.regular:
 				{
-					target_element.querySelector("#overview-body").innerHTML = await _dali.helpers.template_coin(
+					const widget_slider = new lib_plankton.zoo_widget.class_slider(
-						"overview",
+						[
-						"body-regular",
+							new lib_plankton.zoo_widget.class_bunch(
+								[
+									widget_sources,
+									widget_multiview,
+								]
+							),
+						],
 						{
+							"threshold": 100,
+							"initial_index": 1,
 						}						
 					);
-					
+					await widget_slider.load(target_element.querySelector("#overview-body"));
-					await widget_sources.load(target_element.querySelector("#overview-pane-left"));
-					await widget_multiview.load(target_element.querySelector("#overview-pane-right"));
-					
 					break;
 				}
 				case _dali.enum_view_kind.touch:
@@ -535,7 +541,7 @@ namespace _dali.pages.overview
 							"threshold": 100,
 							"initial_index": 2,
 						}						
-					)
+					);
 					await widget_slider.load(target_element.querySelector("#overview-body"));
 					break;
 				}
@@ -548,12 +554,6 @@ namespace _dali.pages.overview
 				dom_hint.classList.toggle("overview-hint-hidden", _dali.is_logged_in());
 			}
 			
-			// mode switcher
-			{
-				// set_view_mode(view_mode);
-				// await widget_mode_switcher.load(target_element.querySelector("#overview-mode"));
-			}
-			
 			_dali.model.listen_reset(
 				async (priviliged) => {
 					update_sources_and_entries({"priviliged": priviliged});

source/pages/overview/style.css

@@ -23,14 +23,37 @@
 	flex-wrap: nowrap;
 }
 
-#overview-body #overview-pane-left
+#overview-pane-left
 {
+	flex-basis: 12.5%;
 	flex-grow: 0;
 	flex-shrink: 1;
 }
 
-#overview-body #overview-pane-right
+#overview-pane-right
 {
+	flex-basis: 87.5%;
 	flex-grow: 1;
 	flex-shrink: 1;
 }
+
+#overview-body .widget-slider-slide .widget-bunch
+{
+	display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+}
+
+#overview-body .widget-slider-slide .widget-bunch-element:nth-child(1)
+{
+	flex-grow: 0;
+	flex-shrink: 1;
+	flex-basis: 12.5%;
+}
+
+#overview-body .widget-slider-slide .widget-bunch-element:nth-child(2)
+{
+	flex-grow: 1;
+	flex-shrink: 1;
+	flex-basis: 87.5%;
+}

source/pages/overview/templates/body-regular.html.tpl

@@ -1,4 +0,0 @@
-		<div id="overview-pane-left">
-		</div>
-		<div id="overview-pane-right">
-		</div>

source/pages/overview/templates/body-touch.html.tpl

@@ -1 +0,0 @@
-

source/widgets/listview/logic.ts

@@ -162,12 +162,12 @@ namespace _dali.widgets.listview
 		
 		
 		/**
-		 * [implementation]
 		 */
-		public async load(
+		public async update_entries(
-			target_element : Element
 		)
 		: Promise<void>
+		{
+			// structure
 			{
 				const now_pit : lib_plankton.pit.type_pit = lib_plankton.pit.now();
 				const from_pit : lib_plankton.pit.type_pit = now_pit;
@@ -184,23 +184,8 @@ namespace _dali.widgets.listview
 						lib_plankton.pit.from_datetime(y.event_object.begin)
 					)
 				);
-			
+				const dom_list : HTMLElement = this.container.querySelector(".listview-entries");
-			// view
+				dom_list.innerHTML = (
-			{
-				target_element.innerHTML = await _dali.helpers.template_coin(
-					"widget-listview",
-					"main",
-					{
-						"add_href": "",
-						"add_label": lib_plankton.translate.get("widget.listview.add"),
-						"add_extra_classes": (
-							(! await _dali.is_logged_in())
-							?
-							" listview-add-hidden"
-							:
-							""
-						),
-						"entries": (
 					(
 						await _dali.helpers.promise_row<string>(
 							entries
@@ -287,21 +272,11 @@ namespace _dali.widgets.listview
 						)
 					)
 					.join("")
-						),
-					}
 				);
 			}
-			
+			// listeners
-			// control
 			{
-				target_element.querySelector(".listview-add").addEventListener(
+				this.container.querySelectorAll(".listview-entry").forEach(
-					"click",
-					(event) => {
-						event.preventDefault();
-						this.action_add();
-					}
-				);
-				target_element.querySelectorAll(".listview-entry").forEach(
 					(element) => {
 						element.addEventListener(
 							"click",
@@ -320,8 +295,51 @@ namespace _dali.widgets.listview
 					}
 				);
 			}
+		}
 		
-			this.container = target_element.querySelector(".listview");
+		
+		/**
+		 * [implementation]
+		 */
+		public async load(
+			target_element : Element
+		)
+		: Promise<void>
+		{
+			this.container = target_element;
+			
+			// view
+			{
+				target_element.innerHTML = await _dali.helpers.template_coin(
+					"widget-listview",
+					"main",
+					{
+						"add_href": "",
+						"add_label": lib_plankton.translate.get("widget.listview.add"),
+						"add_extra_classes": (
+							(! await _dali.is_logged_in())
+							?
+							" listview-add-hidden"
+							:
+							""
+						),
+						"entries": "",
+					}
+				);
+			}
+			
+			// control
+			{
+				target_element.querySelector(".listview-add").addEventListener(
+					"click",
+					(event) => {
+						event.preventDefault();
+						this.action_add();
+					}
+				);
+			}
+			
+			await this.update_entries();
 			
 			return Promise.resolve<void>(undefined);
 		}

source/widgets/mode_switcher/style.css

@@ -0,0 +1,4 @@
+.widget-mode_switcher-option
+{
+	margin-left: 16px;
+}

source/widgets/multiview/logic.ts

@@ -69,6 +69,11 @@ namespace _dali.widgets.multiview
 		private initial_view_mode : _dali.enum_view_mode;
 		
 		
+		/**
+		 */
+		private weekview_initial_vertical : boolean;
+		
+		
 		/**
 		 */
 		private get_entries : type_get_entries;
@@ -110,12 +115,14 @@ namespace _dali.widgets.multiview
 			get_entries : type_get_entries,
 			{
 				"initial_view_mode": initial_view_mode = _dali.enum_view_mode.week,
+				"weekview_initial_vertical": weekview_initial_vertical = false,
 				"action_create_event": action_create_event = ((stuff) => Promise.resolve<void>(undefined)),
 				"action_edit_event": action_edit_event = ((event_key) => Promise.resolve<void>(undefined)),
 			}
 			:
 			{
 				initial_view_mode ?: _dali.enum_view_mode;
+				weekview_initial_vertical ?: boolean;
 				action_create_event ?: type_create_event;
 				action_edit_event ?: type_edit_event;
 			}
@@ -126,6 +133,7 @@ namespace _dali.widgets.multiview
 		{
 			this.get_entries = get_entries;
 			this.initial_view_mode = initial_view_mode;
+			this.weekview_initial_vertical = weekview_initial_vertical;
 			this.action_create_event = action_create_event;
 			this.action_edit_event = action_edit_event;
 			this.dom_context = null;
@@ -168,12 +176,17 @@ namespace _dali.widgets.multiview
 		
 		/**
 		 */
-		public update_entries(
+		public async update_entries(
 		)
 		:
 		Promise<void>
 		{
-			return this.widget_weekview.update_entries();
+			await Promise.all(
+				[
+					this.widget_weekview.update_entries(),
+					this.widget_listview.update_entries(),
+				]
+			);
 		}
 		
 		
@@ -206,17 +219,6 @@ namespace _dali.widgets.multiview
 						{
 							"initial_selection": this.initial_view_mode,
 							"action_change": (view_mode) => {
-								console.warn("todo");
-								/*
-								lib_plankton.zoo_page.set(
-									{
-										"name": "overview",
-										"parameters": {
-											"mode": _dali.view_mode_encode(view_mode),
-										}
-									}
-								);
-								 */
 								this.set_view_mode(view_mode);
 							}
 						}
@@ -235,6 +237,7 @@ namespace _dali.widgets.multiview
 						{
 							"action_select_event": (event_key) => this.action_edit_event(event_key),
 							"action_select_day": (date) => this.action_create_event({"date": date}),
+							"vertical": this.weekview_initial_vertical,
 						}
 					)
 				);

source/widgets/weekview/logic.ts

@@ -36,7 +36,8 @@ namespace _dali.widgets.weekview
 	
 	/**
 	 */
-	export class class_widget_weekview implements lib_plankton.zoo_widget.interface_widget
+	export class class_widget_weekview
+		implements lib_plankton.zoo_widget.interface_widget
 	{
 		
 		/**