Mobil-Ansicht #4
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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});
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
<div id="overview-pane-left">
|
||||
</div>
|
||||
<div id="overview-pane-right">
|
||||
</div>
|
||||
|
|
@ -1 +0,0 @@
|
|||
|
||||
|
|
@ -162,12 +162,12 @@ namespace _dali.widgets.listview
|
|||
|
||||
|
||||
/**
|
||||
* [implementation]
|
||||
*/
|
||||
public async load(
|
||||
target_element : Element
|
||||
public async update_entries(
|
||||
)
|
||||
: 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)
|
||||
)
|
||||
);
|
||||
|
||||
// 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": (
|
||||
const dom_list : HTMLElement = this.container.querySelector(".listview-entries");
|
||||
dom_list.innerHTML = (
|
||||
(
|
||||
await _dali.helpers.promise_row<string>(
|
||||
entries
|
||||
|
|
@ -287,21 +272,11 @@ namespace _dali.widgets.listview
|
|||
)
|
||||
)
|
||||
.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
|
|||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
|
|
|||
4
source/widgets/mode_switcher/style.css
Normal file
4
source/widgets/mode_switcher/style.css
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
.widget-mode_switcher-option
|
||||
{
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
|
@ -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,
|
||||
}
|
||||
)
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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
|
||||
{
|
||||
|
||||
/**
|
||||
|
|
|
|||
Loading…
Reference in a new issue