From abe92a5cc9e6a17a93621d76f88967f9e097701d Mon Sep 17 00:00:00 2001 From: BurningTreeC Date: Sat, 28 Sep 2024 05:41:41 +0200 Subject: [PATCH] make the sidebar resizer work correctly --- core/language/en-GB/ThemeTweaks.multids | 2 + core/ui/PageTemplate/sidebar.tid | 16 ++ core/wiki/macros/sidebar-resizer.tid | 30 ++++ themes/tiddlywiki/vanilla/ThemeTweaks.tid | 1 + themes/tiddlywiki/vanilla/base.tid | 9 +- themes/tiddlywiki/vanilla/metrics.multids | 3 +- themes/tiddlywiki/vanilla/sidebar-resizer.tid | 149 ++++++++++++++++++ 7 files changed, 205 insertions(+), 5 deletions(-) create mode 100644 core/wiki/macros/sidebar-resizer.tid diff --git a/core/language/en-GB/ThemeTweaks.multids b/core/language/en-GB/ThemeTweaks.multids index 5168053c3..3c018af5f 100644 --- a/core/language/en-GB/ThemeTweaks.multids +++ b/core/language/en-GB/ThemeTweaks.multids @@ -28,6 +28,8 @@ Metrics/BodyFontSize: Font size for tiddler body Metrics/BodyLineHeight: Line height for tiddler body Metrics/StoryLeft: Story left position Metrics/StoryLeft/Hint: how far the left margin of the story river
(tiddler area) is from the left of the page +Metrics/StoryMinWidth: Story minimum width +Metrics/StoryMinWidth/Hint: the minimum width of the story river Metrics/StoryTop: Story top position Metrics/StoryTop/Hint: how far the top margin of the story river
is from the top of the page Metrics/StoryRight: Story right diff --git a/core/ui/PageTemplate/sidebar.tid b/core/ui/PageTemplate/sidebar.tid index 642289418..c04e0262e 100644 --- a/core/ui/PageTemplate/sidebar.tid +++ b/core/ui/PageTemplate/sidebar.tid @@ -6,6 +6,20 @@ tags: $:/tags/PageTemplate $:/config/SideBarSegments/Visibility/$(listItem)$ \end +<$eventcatcher tag="div" class="tc-sidebar-resizer-pointerdown-eventcatcher" selector=".tc-sidebar-resizer" matchSelector=".tc-sidebar-resizer" $pointerdown=<> $pointerup=<>> + +<%if [{$:/state/sidebar}!match[no]] %> + +<$eventcatcher tag="div" selector=".tc-sidebar-resizer-pointermove" matchSelector=".tc-sidebar-resizer-pointermove" class="tc-sidebar-resizer-pointermove-eventcatcher" $pointerup=<> $pointermove=<> $pointerleave=<> $pointerout=<>> + +
+ + + +
+ +<% endif %> + <$scrollable fallthrough="no" class="tc-sidebar-scrollable">
@@ -27,3 +41,5 @@ $:/config/SideBarSegments/Visibility/$(listItem)$
+ + \ No newline at end of file diff --git a/core/wiki/macros/sidebar-resizer.tid b/core/wiki/macros/sidebar-resizer.tid new file mode 100644 index 000000000..9f3e7113d --- /dev/null +++ b/core/wiki/macros/sidebar-resizer.tid @@ -0,0 +1,30 @@ +title: $:/core/macros/sidebar-resizer +tags: $:/tags/Global + +\procedure sidebar-resizer-pointerdown-actions() +<%if [[$:/state/sidebar/resizing]is[missing]thenmatch[left]] %> + <$let dragDiff=<> storyRiverWidth={{{ [subtract] }}} sidebarWidth={{{ [subtractadd] }}}> + <$action-setfield $tiddler="$:/state/sidebar/dimensions" + drag-diff=<> + story-river-width=<> + sidebar-width=<> + /> + <$action-setfield $tiddler="$:/state/sidebar/resizing" text="yes"/> + +<% endif %> +\end +\procedure sidebar-resizer-pointerup-actions() +<%if [[$:/state/sidebar/resizing]!is[missing]] %> + <$action-deletetiddler $tiddler="$:/state/sidebar/resizing"/> +<% endif %> +\end +\procedure sidebar-resizer-pointermove-actions() +<%if [[$:/state/sidebar/resizing]!is[missing]] %> + <$let storyRiverWidth={{{ [subtract{$:/state/sidebar/dimensions!!drag-diff}] }}} sidebarWidth={{{ [subtractadd{$:/state/sidebar/dimensions!!drag-diff}] }}}> + <$action-setfield $tiddler="$:/state/sidebar/dimensions" + story-river-width=<> + sidebar-width=<> + /> + +<% endif %> +\end \ No newline at end of file diff --git a/themes/tiddlywiki/vanilla/ThemeTweaks.tid b/themes/tiddlywiki/vanilla/ThemeTweaks.tid index 0e8babf7a..b7f36778b 100644 --- a/themes/tiddlywiki/vanilla/ThemeTweaks.tid +++ b/themes/tiddlywiki/vanilla/ThemeTweaks.tid @@ -72,6 +72,7 @@ caption: {{$:/language/ThemeTweaks/ThemeTweaks}} |<$link to="$:/themes/tiddlywiki/vanilla/metrics/storytop"><>
//<>// |^<$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/storytop" default="" tag="input"/> | |<$link to="$:/themes/tiddlywiki/vanilla/metrics/storyright"><>
//<>// |^<$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/storyright" default="" tag="input"/> | |<$link to="$:/themes/tiddlywiki/vanilla/metrics/storywidth"><>
//<>// |^<$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/storywidth" default="" tag="input"/> | +|<$link to="$:/themes/tiddlywiki/vanilla/metrics/storyminwidth"><>
//<>// |^<$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/storyminwidth" default="" tag="input"/> | |<$link to="$:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth"><>
//<>//
|^<$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth" default="" tag="input"/> | |<$link to="$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint"><>
//<>// |^<$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint" default="" tag="input"/> | |<$link to="$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth"><>
//<>// |^<$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth" default="" tag="input"/> | diff --git a/themes/tiddlywiki/vanilla/base.tid b/themes/tiddlywiki/vanilla/base.tid index 112233016..dc5170da0 100644 --- a/themes/tiddlywiki/vanilla/base.tid +++ b/themes/tiddlywiki/vanilla/base.tid @@ -32,12 +32,12 @@ background-size:` {{$:/themes/tiddlywiki/vanilla/settings/backgroundimagesize}}` \end \define if-fluid-fixed(text,hiddenSidebarText) -<$reveal state="$:/themes/tiddlywiki/vanilla/options/sidebarlayout" type="match" text="fluid-fixed"> +<%if [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fluid-fixed]] [[$:/state/sidebar/dimensions]!is[missing]] %> $text$ <$reveal state="$:/state/sidebar" type="nomatch" text="yes" default="yes"> $hiddenSidebarText$ - +<% endif %> \end \define if-editor-height-fixed(then,else) @@ -1046,14 +1046,15 @@ button.tc-btn-invisible.tc-remove-tag-button { position: relative; left: {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}; top: {{$:/themes/tiddlywiki/vanilla/metrics/storytop}}; - width: {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}}; - padding: 42px 42px 42px 42px; + width: calc({{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - 42px); + padding: 42px 0px 42px 42px; } <> diff --git a/themes/tiddlywiki/vanilla/metrics.multids b/themes/tiddlywiki/vanilla/metrics.multids index 3607bd6c9..9579e8a63 100644 --- a/themes/tiddlywiki/vanilla/metrics.multids +++ b/themes/tiddlywiki/vanilla/metrics.multids @@ -5,9 +5,10 @@ bodylineheight: 22px fontsize: 14px lineheight: 20px storyleft: 0px +storyminwidth: 350px storytop: 0px storyright: 770px storywidth: 770px -tiddlerwidth: 686px sidebarbreakpoint: 960px sidebarwidth: 350px +tiddlerwidth: 686px \ No newline at end of file diff --git a/themes/tiddlywiki/vanilla/sidebar-resizer.tid b/themes/tiddlywiki/vanilla/sidebar-resizer.tid index 6bec06639..3aea5dbb1 100644 --- a/themes/tiddlywiki/vanilla/sidebar-resizer.tid +++ b/themes/tiddlywiki/vanilla/sidebar-resizer.tid @@ -1 +1,150 @@ title: $:/themes/tiddlywiki/vanilla/sidebar-resizer +tags: [[$:/tags/Stylesheet]] +code-body: yes + +\define sidebarbreakpoint() +<$text text={{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}/> +\end + +\define sidebarbreakpoint-minus-one() +<$text text={{{ [{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}removesuffix[px]subtract[1]addsuffix[px]] ~[{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}] }}}/> +\end + +@media (min-width: <>) { + + .tc-sidebar-resizer-pointerdown-eventcatcher { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 0; + } + + .tc-sidebar-resizer-pointermove-eventcatcher { + position: absolute; + top: 0; + left: 0; + right: 0; + width: 100%; + height: 100%; + min-height: 100%; + z-index: -1; + } + + .tc-sidebar-resizer-pointermove { + position: absolute; + top: 0; + left: 0; + right: 0; + width: 100%; + height: 100%; + min-height: 100%; + z-index: -1; + } + + .tc-sidebar-resizer { + position: fixed; + top: 0; + right: calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} - 42px); + height: 100vh; + width: 22px; + z-index: 1; + transition: opacity 100ms; + opacity: 0; + cursor: ew-resize; + background: linear-gradient(<>, <>) no-repeat center/2px 100%; + } + + <%if [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fixed-fluid]] %> + + .tc-sidebar-resizer { + right: calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyright}}); + } + + <% endif %> + + .tc-sidebar-resizer:hover { + opacity: 0.6; + } + + <%if [[$:/state/sidebar/resizing]!is[missing]] %> + + .tc-sidebar-resizer-pointerdown-eventcatcher { + z-index: 800; + } + + .tc-sidebar-resizer-pointermove-eventcatcher { + z-index: 801; + } + + .tc-sidebar-resizer-pointermove { + z-index: 802; + cursor: ew-resize; + } + + .tc-sidebar-resizer { + opacity: 0.8; + } + + <% endif %> + + <%if [[$:/state/sidebar/dimensions]!is[missing]] %> + + <%if [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fixed-fluid]] %> + + <%if [{$:/state/sidebar}!match[no]] %> + + .tc-story-river { + width: clamp(0px,clamp({{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}},calc({{$:/state/sidebar/dimensions!!story-river-width}}px - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - 20px),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}})),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}})); + } + + <% endif %> + + .tc-sidebar-scrollable { + left: auto; + width: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}}),calc(100% + 20px - {{$:/state/sidebar/dimensions!!story-river-width}}px),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}})); + } + + .tc-sidebar-resizer { + right: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} - 42px),calc(100% - 42px + 20px - {{$:/state/sidebar/dimensions!!story-river-width}}px),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - 42px - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}})); + } + + <% else %> + + <%if [{$:/state/sidebar}!match[no]] %> + + .tc-story-river { + width: clamp(0px,clamp({{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}},calc(100% - {{$:/state/sidebar/dimensions!!sidebar-width}}px - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - 20px),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}})),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}})); + } + + <% endif %> + + .tc-sidebar-scrollable { + width: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}}),calc({{$:/state/sidebar/dimensions!!sidebar-width}}px + 20px),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}})); + } + + .tc-sidebar-resizer { + right: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} - 42px),calc({{$:/state/sidebar/dimensions!!sidebar-width}}px - 42px + 20px),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - 42px - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}})); + } + + <% endif %> + + <% endif %> + + <%if [{$:/state/sidebar}match[no]] %> + + .tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer { + display: none; + } + + <% endif %> + +} + +@media (max-width: <>) { + + .tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer { + display: none; + } +} \ No newline at end of file