1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2025-09-06 04:48:01 +00:00
This commit is contained in:
BurningTreeC
2024-09-25 19:42:55 +02:00
parent 433e54b43e
commit c1260971b8
2 changed files with 24 additions and 19 deletions

View File

@@ -3,8 +3,12 @@ tags: $:/tags/Global
\procedure sidebar-resizer-pointerdown-actions() \procedure sidebar-resizer-pointerdown-actions()
<%if [[$:/state/sidebar/resizing]is[missing]then<event-mousebutton>match[left]] %> <%if [[$:/state/sidebar/resizing]is[missing]then<event-mousebutton>match[left]] %>
<$let leftOffset={{{ [<event-fromviewport-posx>subtract<event-fromcatcher-posx>] }}} viewportWidth={{{ [<leftOffset>add<tv-widgetnode-width>] }}} dragDiff=<<event-fromselected-posx>> dragDiffPercentage={{{ [<dragDiff>divide<viewportWidth>] }}} dragWidthPercentage={{{ [<tv-selectednode-width>divide<viewportWidth>] }}} sidebarOffsetPercentage={{{ [[22]divide<viewportWidth>] }}} storyRiverPercentage={{{ [<event-fromcatcher-posx>subtract<leftOffset>divide<viewportWidth>subtract<dragDiffPercentage>] }}} sidebarPercentage={{{ [[1]subtract<storyRiverPercentage>subtract<sidebarOffsetPercentage>] }}}> <$let leftOffset={{{ [<event-fromviewport-posx>subtract<event-fromcatcher-posx>] }}} viewportWidth={{{ [<leftOffset>add<tv-widgetnode-width>] }}} dragDiff=<<event-fromselected-posx>> leftOffsetPercentage={{{ [<leftOffset>divide<viewportWidth>] }}} dragDiffPercentage={{{ [<dragDiff>divide<viewportWidth>] }}} dragWidthPercentage={{{ [<tv-selectednode-width>divide<viewportWidth>] }}} sidebarOffsetPercentage={{{ [[22]divide<viewportWidth>] }}} storyRiverPercentage={{{ [<event-fromcatcher-posx>divide<viewportWidth>subtract<dragDiffPercentage>] }}} sidebarPercentage={{{ [[1]subtract<storyRiverPercentage>subtract<sidebarOffsetPercentage>subtract<leftOffsetPercentage>] }}} widgetNodeWidthPercentage={{{ [<tv-widgetnode-width>divide<viewportWidth>] }}}>
<$action-setfield $tiddler="$:/state/sidebar/posx" <$action-setfield $tiddler="$:/state/sidebar/dimensions"
left-offset=<<leftOffset>>
left-offset-percentage=<<leftOffsetPercentage>>
widget-node-width-percentage=<<widgetNodeWidthPercentage>>
widget-node-width=<<tv-widgetnode-width>>
drag-width=<<tv-selectednode-width>> drag-width=<<tv-selectednode-width>>
drag-diff=<<dragDiff>> drag-diff=<<dragDiff>>
drag-diff-percentage=<<dragDiffPercentage>> drag-diff-percentage=<<dragDiffPercentage>>
@@ -23,8 +27,8 @@ tags: $:/tags/Global
\end \end
\procedure sidebar-resizer-pointermove-actions() \procedure sidebar-resizer-pointermove-actions()
<%if [[$:/state/sidebar/resizing]!is[missing]] %> <%if [[$:/state/sidebar/resizing]!is[missing]] %>
<$let leftOffset={{{ [<event-fromviewport-posx>subtract<event-fromcatcher-posx>] }}} viewportWidth={{{ [<leftOffset>add<tv-widgetnode-width>] }}} storyRiverPercentage={{{ [<event-fromcatcher-posx>subtract<leftOffset>divide<viewportWidth>subtract{$:/state/sidebar/posx!!drag-diff-percentage}] }}} sidebarPercentage={{{ [[1]subtract<storyRiverPercentage>subtract{$:/state/sidebar/posx!!sidebar-offset-percentage}] }}}> <$let leftOffset={{$:/state/sidebar/dimensions!!left-offset}} viewportWidth={{{ [<leftOffset>add<tv-widgetnode-width>] }}} leftOffsetPercentage={{{ [<leftOffset>divide<viewportWidth>] }}} storyRiverPercentage={{{ [<event-fromcatcher-posx>divide<viewportWidth>subtract{$:/state/sidebar/dimensions!!drag-diff-percentage}] }}} sidebarPercentage={{{ [[1]subtract<storyRiverPercentage>subtract{$:/state/sidebar/dimensions!!sidebar-offset-percentage}subtract<leftOffsetPercentage>] }}}>
<$action-setfield $tiddler="$:/state/sidebar/posx" <$action-setfield $tiddler="$:/state/sidebar/dimensions"
story-river-percentage=<<storyRiverPercentage>> story-river-percentage=<<storyRiverPercentage>>
sidebar-percentage=<<sidebarPercentage>>/> sidebar-percentage=<<sidebarPercentage>>/>
</$let> </$let>

View File

@@ -74,15 +74,15 @@ code-body: yes
} }
.tc-sidebar-resizer-pointerdown-eventcatcher { .tc-sidebar-resizer-pointerdown-eventcatcher {
z-index: 3; z-index: 800;
} }
.tc-sidebar-resizer-pointermove-eventcatcher { .tc-sidebar-resizer-pointermove-eventcatcher {
z-index: 4; z-index: 801;
} }
.tc-sidebar-resizer-pointermove { .tc-sidebar-resizer-pointermove {
z-index: 5; z-index: 802;
cursor: ew-resize; cursor: ew-resize;
} }
@@ -92,23 +92,24 @@ code-body: yes
<% endif %> <% endif %>
<%if [[$:/state/sidebar/posx]!is[missing]then{$:/state/sidebar}!match[no]] %> <%if [[$:/state/sidebar/dimensions]!is[missing]then{$:/state/sidebar}!match[no]] %>
.tc-sidebar-resizer-pointerdown-eventcatcher {
right: auto;
width: calc(100% + (100vw - 100%));
}
.tc-sidebar-resizer {
right: min(max(calc(({{$:/state/sidebar/posx!!sidebar-percentage}} * 100%)),calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} - 22px)),calc((100vw - 100%) + (100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}}) - 22px));
}
.tc-story-river { .tc-story-river {
width: min(max(calc({{$:/state/sidebar/posx!!story-river-percentage}} * 100%),{{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}}),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}})); width: max(min(calc(({{$:/state/sidebar/dimensions!!story-river-percentage}} * 100vw) - ({{$:/state/sidebar/dimensions!!widget-node-width}}px - 100vw + {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}})),calc(100vw - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}}) - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}),{{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}});
} }
.tc-sidebar-scrollable { .tc-sidebar-scrollable {
width: min(max(calc(({{$:/state/sidebar/posx!!sidebar-percentage}} * 100%)),calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} - 22px)),calc((100vw - 100%) + (100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}}) - 22px)); width: min(max(calc({{$:/state/sidebar/dimensions!!sidebar-percentage}} * 100vw),calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} - 22px)),calc(100vw - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - ({{$:/state/sidebar/dimensions!!widget-node-width}}px - 100vw + {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}) - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - 22px));
}
.tc-sidebar-resizer-pointerdown-eventcatcher {
right: auto;
max-width: max(min(calc((100% + ({{$:/state/sidebar/dimensions!!sidebar-percentage}} * 100vw) + 22px) - (100vw - 100% - 22px - ({{$:/state/sidebar/dimensions!!sidebar-percentage}} * 100vw))),calc(100vw - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}})),calc(100vw - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}));
min-width: max(min(calc((100% + ({{$:/state/sidebar/dimensions!!sidebar-percentage}} * 100vw) + 22px) - (100vw - 100% - 22px - ({{$:/state/sidebar/dimensions!!sidebar-percentage}} * 100vw))),calc(100vw - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}})),calc(100vw - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}));
}
.tc-sidebar-resizer {
right: min(max(calc({{$:/state/sidebar/dimensions!!sidebar-percentage}} * 100vw),calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} - 22px)),calc(100vw - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - ({{$:/state/sidebar/dimensions!!widget-node-width}}px - 100vw + {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}) - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - 22px));
} }
<% endif %> <% endif %>