diff --git a/lib/plankton/plankton.js b/lib/plankton/plankton.js
index a0e736f..dfa0424 100644
--- a/lib/plankton/plankton.js
+++ b/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");
- await element.load(dom_li);
- dom_container.appendChild(dom_li);
+ const dom_element = document.createElement("div");
+ dom_element.classList.add("widget-bunch-element");
+ 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.style.overflow = "hidden";
- dom_container.style.whiteSpace = "nowrap";
- }
+ dom_container.classList.add("widget-slider");
{
const dom_content = document.createElement("div");
- {
- 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");
+ dom_content.classList.add("widget-slider-slides");
for (const slide of this.conf.content) {
const dom_slide = document.createElement("div");
- dom_slide.classList.add("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";
- }
+ dom_slide.classList.add("widget-slider-slide");
await slide.load(dom_slide);
dom_content.appendChild(dom_slide);
}
diff --git a/source/pages/overview/logic.ts b/source/pages/overview/logic.ts
index 27f229c..873374c 100644
--- a/source/pages/overview/logic.ts
+++ b/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(
- "overview",
- "body-regular",
+ const widget_slider = new lib_plankton.zoo_widget.class_slider(
+ [
+ new lib_plankton.zoo_widget.class_bunch(
+ [
+ widget_sources,
+ widget_multiview,
+ ]
+ ),
+ ],
{
- }
+ "threshold": 100,
+ "initial_index": 1,
+ }
);
-
- await widget_sources.load(target_element.querySelector("#overview-pane-left"));
- await widget_multiview.load(target_element.querySelector("#overview-pane-right"));
-
+ await widget_slider.load(target_element.querySelector("#overview-body"));
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});
diff --git a/source/pages/overview/style.css b/source/pages/overview/style.css
index 9e2a028..1d7c2dc 100644
--- a/source/pages/overview/style.css
+++ b/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%;
+}
diff --git a/source/pages/overview/templates/body-regular.html.tpl b/source/pages/overview/templates/body-regular.html.tpl
deleted file mode 100644
index 1cf6257..0000000
--- a/source/pages/overview/templates/body-regular.html.tpl
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-
-
diff --git a/source/pages/overview/templates/body-touch.html.tpl b/source/pages/overview/templates/body-touch.html.tpl
deleted file mode 100644
index 8b13789..0000000
--- a/source/pages/overview/templates/body-touch.html.tpl
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/source/widgets/listview/logic.ts b/source/widgets/listview/logic.ts
index 34c68e6..98d3340 100644
--- a/source/widgets/listview/logic.ts
+++ b/source/widgets/listview/logic.ts
@@ -162,146 +162,121 @@ namespace _dali.widgets.listview
/**
- * [implementation]
*/
- public async load(
- target_element : Element
+ public async update_entries(
)
: Promise
{
- const now_pit : lib_plankton.pit.type_pit = lib_plankton.pit.now();
- const from_pit : lib_plankton.pit.type_pit = now_pit;
- const to_pit : lib_plankton.pit.type_pit = lib_plankton.pit.shift_week(now_pit, +4);
- const entries : Array<_dali.type_event_object_extended> = await this.get_entries(
- from_pit,
- to_pit,
- null
- );
- entries.sort(
- (x, y) => (
- lib_plankton.pit.from_datetime(x.event_object.begin)
- -
- lib_plankton.pit.from_datetime(y.event_object.begin)
- )
- );
-
- // view
+ // structure
{
- 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(
- entries
- .filter(
- (entry) => (
- this.include_passed
- ?
- true
- :
- lib_plankton.pit.is_after(
- lib_plankton.pit.from_datetime(entry.event_object.begin),
- now_pit
- )
- )
- )
- .map(
- (entry) => () => _dali.helpers.template_coin(
- "widget-listview",
- "entry",
- {
- "name_value": entry.event_object.name,
- "calendar_value": entry.calendar_name,
- "when_value": lib_plankton.pit.timespan_format(
- entry.event_object.begin,
- entry.event_object.end,
- {
- "timezone_indicator": lib_plankton.translate.get("common.timezone_indicator"),
- "adjust_to_ce": true,
- "show_timezone": false,
- }
- ),
- "location_label": lib_plankton.translate.get("event.location"),
- "location_extra_classes": (
- (entry.event_object.location === null)
- ?
- " listview-entry-field-empty"
- :
- ""
- ),
- "location_value": (
- (entry.event_object.location === null)
- ?
- "?"
- :
- entry.event_object.location
- ),
- "link_label": lib_plankton.translate.get("event.link"),
- "link_extra_classes": (
- (entry.event_object.link === null)
- ?
- " listview-entry-field-empty"
- :
- ""
- ),
- "link_value": (
- (entry.event_object.link === null)
- ?
- "?"
- :
- entry.event_object.link
- ),
- "link_action": lib_plankton.translate.get("common.open"),
- "description_label": lib_plankton.translate.get("event.description"),
- "description_extra_classes": (
- (entry.event_object.description === null)
- ?
- " listview-entry-field-empty"
- :
- ""
- ),
- "description_value": (
- (entry.event_object.description === null)
- ?
- "?"
- :
- entry.event_object.description
- ),
- "raw": JSON.stringify(entry),
- "color": _dali.helpers.event_color(entry.hue),
- "rel": entry.key,
- },
- )
+ const now_pit : lib_plankton.pit.type_pit = lib_plankton.pit.now();
+ const from_pit : lib_plankton.pit.type_pit = now_pit;
+ const to_pit : lib_plankton.pit.type_pit = lib_plankton.pit.shift_week(now_pit, +4);
+ const entries : Array<_dali.type_event_object_extended> = await this.get_entries(
+ from_pit,
+ to_pit,
+ null
+ );
+ entries.sort(
+ (x, y) => (
+ lib_plankton.pit.from_datetime(x.event_object.begin)
+ -
+ lib_plankton.pit.from_datetime(y.event_object.begin)
+ )
+ );
+ const dom_list : HTMLElement = this.container.querySelector(".listview-entries");
+ dom_list.innerHTML = (
+ (
+ await _dali.helpers.promise_row(
+ entries
+ .filter(
+ (entry) => (
+ this.include_passed
+ ?
+ true
+ :
+ lib_plankton.pit.is_after(
+ lib_plankton.pit.from_datetime(entry.event_object.begin),
+ now_pit
)
)
)
- .join("")
- ),
- }
+ .map(
+ (entry) => () => _dali.helpers.template_coin(
+ "widget-listview",
+ "entry",
+ {
+ "name_value": entry.event_object.name,
+ "calendar_value": entry.calendar_name,
+ "when_value": lib_plankton.pit.timespan_format(
+ entry.event_object.begin,
+ entry.event_object.end,
+ {
+ "timezone_indicator": lib_plankton.translate.get("common.timezone_indicator"),
+ "adjust_to_ce": true,
+ "show_timezone": false,
+ }
+ ),
+ "location_label": lib_plankton.translate.get("event.location"),
+ "location_extra_classes": (
+ (entry.event_object.location === null)
+ ?
+ " listview-entry-field-empty"
+ :
+ ""
+ ),
+ "location_value": (
+ (entry.event_object.location === null)
+ ?
+ "?"
+ :
+ entry.event_object.location
+ ),
+ "link_label": lib_plankton.translate.get("event.link"),
+ "link_extra_classes": (
+ (entry.event_object.link === null)
+ ?
+ " listview-entry-field-empty"
+ :
+ ""
+ ),
+ "link_value": (
+ (entry.event_object.link === null)
+ ?
+ "?"
+ :
+ entry.event_object.link
+ ),
+ "link_action": lib_plankton.translate.get("common.open"),
+ "description_label": lib_plankton.translate.get("event.description"),
+ "description_extra_classes": (
+ (entry.event_object.description === null)
+ ?
+ " listview-entry-field-empty"
+ :
+ ""
+ ),
+ "description_value": (
+ (entry.event_object.description === null)
+ ?
+ "?"
+ :
+ entry.event_object.description
+ ),
+ "raw": JSON.stringify(entry),
+ "color": _dali.helpers.event_color(entry.hue),
+ "rel": entry.key,
+ },
+ )
+ )
+ )
+ )
+ .join("")
);
}
-
- // control
+ // listeners
{
- target_element.querySelector(".listview-add").addEventListener(
- "click",
- (event) => {
- event.preventDefault();
- this.action_add();
- }
- );
- target_element.querySelectorAll(".listview-entry").forEach(
+ this.container.querySelectorAll(".listview-entry").forEach(
(element) => {
element.addEventListener(
"click",
@@ -320,8 +295,51 @@ namespace _dali.widgets.listview
}
);
}
+ }
+
+
+ /**
+ * [implementation]
+ */
+ public async load(
+ target_element : Element
+ )
+ : Promise
+ {
+ this.container = target_element;
- this.container = target_element.querySelector(".listview");
+ // 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(undefined);
}
diff --git a/source/widgets/mode_switcher/style.css b/source/widgets/mode_switcher/style.css
new file mode 100644
index 0000000..4261776
--- /dev/null
+++ b/source/widgets/mode_switcher/style.css
@@ -0,0 +1,4 @@
+.widget-mode_switcher-option
+{
+ margin-left: 16px;
+}
diff --git a/source/widgets/multiview/logic.ts b/source/widgets/multiview/logic.ts
index b34d7b5..87929aa 100644
--- a/source/widgets/multiview/logic.ts
+++ b/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(undefined)),
"action_edit_event": action_edit_event = ((event_key) => Promise.resolve(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
{
- 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,
}
)
);
diff --git a/source/widgets/weekview/logic.ts b/source/widgets/weekview/logic.ts
index fec5824..16f8cd5 100644
--- a/source/widgets/weekview/logic.ts
+++ b/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
{
/**