From 338a3d1646eca2e0370a7c908b779804876b116e Mon Sep 17 00:00:00 2001 From: BurningTreeC Date: Tue, 29 Oct 2024 07:56:32 +0100 Subject: [PATCH] start making it possible to use this universally --- core/ui/PageTemplate/sidebar-resizer.tid | 4 + core/wiki/macros/sidebar-resizer.tid | 167 ++++++++++++------ themes/tiddlywiki/vanilla/sidebar-resizer.tid | 60 ++++--- 3 files changed, 146 insertions(+), 85 deletions(-) diff --git a/core/ui/PageTemplate/sidebar-resizer.tid b/core/ui/PageTemplate/sidebar-resizer.tid index 6cbe6b5ec..cad0f2123 100644 --- a/core/ui/PageTemplate/sidebar-resizer.tid +++ b/core/ui/PageTemplate/sidebar-resizer.tid @@ -3,6 +3,10 @@ tags: $:/tags/PageTemplate list-after: $:/core/ui/PageTemplate/story \import [function[get.base.functions.theme],first[]!is[missing]] :else[function[get.base.functions.theme],first[]is[shadow]] :else[[$:/themes/tiddlywiki/vanilla/functions]] [[$:/core/procedures/sidebar-resizer]] +\function resizer.state.tiddler() $:/state/sidebar/resizing +\function resizer.state() [{$:/state/sidebar}] +\function resizer.class() tc-main-sidebar-resizer +\function set.throttling() yes \whitespace trim <%if [match[show]] %> diff --git a/core/wiki/macros/sidebar-resizer.tid b/core/wiki/macros/sidebar-resizer.tid index 447938746..81ee0222d 100644 --- a/core/wiki/macros/sidebar-resizer.tid +++ b/core/wiki/macros/sidebar-resizer.tid @@ -37,12 +37,51 @@ title: $:/core/procedures/sidebar-resizer :else[suffix[em]then[em]] \end -\procedure set_theme_throttling(metric) -<$set name="metricsTiddler" value={{{ [function[get.theme],] }}}> - <%if [!has[throttle.refresh]] %> - <$action-setfield $tiddler=<> throttle.refresh="yes"/> - <% endif %> - +\function get.sidebar.width.tiddler() +[!is[blank]] +:else[get.theme[sidebarwidth]] +\end + +\function get.resizer.state() +[!is[blank]] +:else[addsuffix[-]addsuffixaddsuffix[-]addsuffixsha256[]addprefix[$:/state/resizing-]] +\end + +\procedure set_theme_throttling(metric,tiddler) +<%if [match[yes]] %> + <$set name="metricsTiddler" value={{{ [getvariable[]!is[blank]] :else[function[get.theme],] }}}> + <%if [!has[throttle.refresh]] %> + <$action-setfield $tiddler=<> throttle.refresh="yes"/> + <% endif %> + +<% endif %> +\end + +\procedure sidebar-resizer-pointerdown-actions-inner() +<%if [is[missing]thenmatch[left]] %> + <$let + startStoryLeft={{{ [!is[blank]get[text]] :else[get.theme.metric[storyleft]] }}} + startStoryRight={{{ [!is[blank]get[text]] :else[get.theme.metric[storyright]] }}} + startSidebarWidth={{{ [!is[blank]get[text]] :else[get.theme.metric[sidebarwidth]] }}} + startTiddlerWidth={{{ [!is[blank]get[text]] :else[get.theme.metric[tiddlerwidth]] }}} + startStoryWidth={{{ [!is[blank]get[text]] :else[get.theme.metric[storywidth]] }}}> + <$action-setfield $tiddler=<> + text="yes" + widget-node-width=<> + start-posx=<> + start-story-left=<> + story-left-metric={{{ [get.value.metric] }}} + start-story-right=<> + story-right-metric={{{ [get.value.metric] }}} + start-sidebar-width=<> + sidebar-width-metric={{{ [get.value.metric] }}} + start-tiddler-width=<> + tiddler-width-metric={{{ [get.value.metric] }}} + start-story-width=<> + story-width-metric={{{ [get.value.metric] }}} + /> + +<% endif %> \end \procedure sidebar-resizer-pointerdown-actions() @@ -54,35 +93,12 @@ title: $:/core/procedures/sidebar-resizer <$action-setfield $tiddler="$:/state/sidebar" text="yes"/> <% endif %> <$action-setfield $tiddler="$:/state/sidebar" click-time=<>/> - <%if [[$:/state/sidebar/resizing]is[missing]thenmatch[left]] %> - <$let - startStoryLeft={{{ [!is[blank]get[text]] :else[get.theme.metric[storyleft]] }}} - startStoryRight={{{ [!is[blank]get[text]] :else[get.theme.metric[storyright]] }}} - startSidebarWidth={{{ [!is[blank]get[text]] :else[get.theme.metric[sidebarwidth]] }}} - startTiddlerWidth={{{ [!is[blank]get[text]] :else[get.theme.metric[tiddlerwidth]] }}} - startStoryWidth={{{ [!is[blank]get[text]] :else[get.theme.metric[storywidth]] }}}> - <$action-setfield $tiddler="$:/state/sidebar/resizing" - text="yes" - widget-node-width=<> - start-posx=<> - start-story-left=<> - story-left-metric={{{ [get.value.metric] }}} - start-story-right=<> - story-right-metric={{{ [get.value.metric] }}} - start-sidebar-width=<> - sidebar-width-metric={{{ [get.value.metric] }}} - start-tiddler-width=<> - tiddler-width-metric={{{ [get.value.metric] }}} - start-story-width=<> - story-width-metric={{{ [get.value.metric] }}} - /> - - <% endif %> + <> <% endif %> \end \procedure sidebar-resizer-pointercancel-actions() -<$action-deletetiddler $tiddler="$:/state/sidebar/resizing"/> +<$action-deletetiddler $tiddler=<>/> \end \function get.story-width.result() @@ -108,8 +124,10 @@ title: $:/core/procedures/sidebar-resizer \procedure set-storywidth-storyright-actions() <$let - storyRightStart={{{ [convert.to.pixels.locally{$:/state/sidebar/resizing!!start-story-right}] }}} - storyWidthStart={{{ [convert.to.pixels.locally{$:/state/sidebar/resizing!!start-story-width}] }}} + storyRightStart={{{ [get[start-story-right]] }}} + storyWidthStart={{{ [get[start-story-width]] }}} + storyRightStart={{{ [convert.to.pixels.locally] }}} + storyWidthStart={{{ [convert.to.pixels.locally] }}} storyMinWidthValue={{{ [!is[blank]get[text]] :else[] }}} storyMinWidth={{{ [convert.to.pixels.locally] }}} sidebarMinWidthValue={{{ [!is[blank]get[text]] :else[] }}} @@ -129,8 +147,8 @@ title: $:/core/procedures/sidebar-resizer storyMinWidthAddLeft={{{ [add] }}} storyRiverLimit={{{ [subtract] }}} storyMaxWidth={{{ [subtract] }}} - tiddlerWidthMetric={{$:/state/sidebar/resizing!!tiddler-width-metric}} - tiddlerWidthStart={{$:/state/sidebar/resizing!!start-tiddler-width}} + tiddlerWidthMetric={{{ [get[tiddler-width-metric]] }}} + tiddlerWidthStart={{{ [get[start-tiddler-width]] }}} tiddlerWidthStartPixels={{{ [match[%]thenmultiplydivide[100]] :else[convert.to.pixels.locally] }}} tiddlerWidthClampedDiff={{{ [addaddaddaddsubtractcompare:number:gt[0]] ~0 }}} tiddlerWidth={{{ [addsubtract] }}} @@ -140,7 +158,7 @@ title: $:/core/procedures/sidebar-resizer storyRiverWidth={{{ [subtract] }}}> <$let - storyWidthMetric={{$:/state/sidebar/resizing!!story-width-metric}} + storyWidthMetric={{{ [get[story-width-metric]] }}} storyWidthConverted={{{ [function[convert.to.result],,] }}} storyMinWidthConverted={{{ [function[convert.to.result],,] }}} storyMaxWidthConverted={{{ [function[convert.to.result],,] }}} @@ -156,7 +174,7 @@ title: $:/core/procedures/sidebar-resizer <$let - storyRightMetric={{$:/state/sidebar/resizing!!story-right-metric}} + storyRightMetric={{{ [get[story-right-metric]] }}} storyRiverWidthConverted={{{ [function[convert.to.result],,] }}} storyRiverLimitConverted={{{ [function[convert.to.result],,] }}} storyMinWidthAddLeftConverted={{{ [function[convert.to.result],,] }}} @@ -178,7 +196,7 @@ title: $:/core/procedures/sidebar-resizer \procedure set-sidebarwidth-actions() <$let sidebarMinWidthValue={{{ [!is[blank]get[text]] :else[] }}} - sidebarWidthMetric={{$:/state/sidebar/resizing!!sidebar-width-metric}} + sidebarWidthMetric={{{ [get[sidebar-width-metric]] }}} sidebarMinWidth={{{ [convert.to.pixels.locally] }}} storyLeftValue={{{ [!is[blank]get[text]] :else[] }}} storyLeft={{{ [convert.to.pixels.locally] }}} @@ -195,6 +213,7 @@ title: $:/core/procedures/sidebar-resizer sidebarWidthSetTiddler={{{ [!is[blank]] :else[] }}}> <$action-setfield $tiddler=<> text=<>/> + \end @@ -209,7 +228,8 @@ title: $:/core/procedures/sidebar-resizer <$let storyMinWidthValue={{{ [!is[blank]get[text]] :else[{$:/themes/tiddlywiki/centralised/metrics/storyminwidth}] }}} storyMinWidth={{{ [convert.to.pixels.locally] }}} - storyWidthStart={{{ [convert.to.pixels.locally{$:/state/sidebar/resizing!!start-story-width}] }}} + storyWidthStart={{{ [get[start-story-width]] }}} + storyWidthStart={{{ [convert.to.pixels.locally] }}} sidebarMinWidthValue={{{ [!is[blank]get[text]] :else[{$:/themes/tiddlywiki/centralised/metrics/sidebarminwidth}] }}} sidebarMinWidth={{{ [convert.to.pixels.locally] }}} storyMaxWidth={{{ [subtractsubtract] }}} @@ -219,7 +239,7 @@ title: $:/core/procedures/sidebar-resizer storyWidth={{{ [subtract] }}}> <$let - storyWidthMetric={{$:/state/sidebar/resizing!!story-width-metric}} + storyWidthMetric={{{ [get[story-width-metric]] }}} storyWidthConverted={{{ [function[convert.to.result],,] }}} storyMinWidthConverted={{{ [function[convert.to.result],,] }}} storyMaxWidthConverted={{{ [function[convert.to.result],,] }}} @@ -233,54 +253,72 @@ title: $:/core/procedures/sidebar-resizer \end \function get.drag.diff() -[subtract{$:/state/sidebar/resizing!!start-posx}] +[subtract] :map[match[left]thenmultiply[-1]else] \end \procedure sidebar-resizer-pointermove-actions() -<%if [[$:/state/sidebar/resizing]!is[missing]] %> - <$let widgetNodeWidth={{$:/state/sidebar/resizing!!widget-node-width}} dragDiff=<> startStoryRight={{{ [convert.to.pixels.locally{$:/state/sidebar/resizing!!start-story-right}] }}} storyRiverWidth={{{ [add] }}} startSidebarWidth={{{ [convert.to.pixels.locally{$:/state/sidebar/resizing!!start-sidebar-width}] }}} sidebarWidth={{{ [subtract] }}}> +<%if [!is[missing]] %> + <$let + startPosX={{{ [get[start-posx]] }}} + widgetNodeWidth={{{ [get[widget-node-width]] }}} + dragDiff=<> + startStoryRight={{{ [get[start-story-right]] }}} + startStoryRight={{{ [convert.to.pixels.locally] }}} + storyRiverWidth={{{ [add] }}} + startSidebarWidth={{{ [get[start-sidebar-width]] }}} + startSidebarWidth={{{ [convert.to.pixels.locally] }}} + sidebarWidth={{{ [subtract] }}}> <%if [match[yes]] %> - <> - <> - <> + <> + <> + <> <> <% endif %> <%if [match[yes]] %> - <> + <> <> <% endif %> <%if [match[yes]] %> - <> + <> <> <% endif %> <% endif %> \end -\procedure sidebar-resizer() +\function get.sidebar-resizer.class() tc-sidebar-resizer [!is[missing]then[tc-resizer-active]] [resizer.class[]] [addsuffix[-]addsuffixsha256[]addprefix[tc-sidebar-resizer-]] +[join[ ]] + +\function get.active.class(class) [] [!is[missing]then[tc-resizer-active]] +[join[ ]] + +\function get.sidebar-resizer.pointerdown.actions() +[match[$:/state/sidebar/resizing]then] +:else[] +\end + +\procedure sidebar-resizer(templateLeft:"",templateRight:"") <$eventcatcher tag="div" - class="tc-sidebar-resizer-pointerdown-eventcatcher" + class=<> selector=".tc-sidebar-resizer" matchSelector=".tc-sidebar-resizer" - $pointerdown=<> + $pointerdown=<> $pointerup=<>> - <%if [{$:/state/sidebar}!match[no]] %> + <%if [!match[no]] %> <$eventcatcher tag="div" - class="tc-sidebar-resizer-pointermove-eventcatcher-wrapper" + class=<> selector=".tc-sidebar-resizer" matchSelector=".tc-sidebar-resizer" - $pointerup={{{ [[$:/state/sidebar/resizing]!is[missing]then] }}}> + $pointerup={{{ [!is[missing]then] }}}> <$eventcatcher tag="div" selector=".tc-sidebar-resizer-pointermove" matchSelector=".tc-sidebar-resizer-pointermove" - class="tc-sidebar-resizer-pointermove-eventcatcher" + class=<> $pointerup=<> $pointerleave=<> $pointerout=<> @@ -290,11 +328,26 @@ title: $:/core/procedures/sidebar-resizer $pointermove=<> $contextmenu=<>> -
+
>/> -
+ <%if [!is[blank]] %> + + <$transclude $tiddler=<> mode="block"/> + + <% endif %> + +
> + style.position={{{ [get.style.position[]] }}} + style.left={{{ [get.style.left[]] }}}/> + + <%if [!is[blank]] %> + + <$transclude $tiddler=<> mode="block"/> + + <% endif %> diff --git a/themes/tiddlywiki/vanilla/sidebar-resizer.tid b/themes/tiddlywiki/vanilla/sidebar-resizer.tid index e03a8ccf1..db18d10e9 100644 --- a/themes/tiddlywiki/vanilla/sidebar-resizer.tid +++ b/themes/tiddlywiki/vanilla/sidebar-resizer.tid @@ -27,15 +27,19 @@ code-body: yes @media (pointer: coarse) { - .tc-sidebar-resizer { + .tc-sidebar-resizer.tc-main-sidebar-resizer { background: <>; } - .tc-sidebar-resizer:hover { + .tc-sidebar-resizer.tc-main-sidebar-resizer:hover { opacity: 0.1; } } + .tc-sidebar-resizer-pointerdown-eventcatcher, .tc-sidebar-resizer-pointermove-eventcatcher-wrapper { + height: 100%; + } + .tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove { position: absolute; top: 0; @@ -52,28 +56,28 @@ code-body: yes user-select: none; } + .tc-sidebar-resizer-pointermove-eventcatcher-wrapper.tc-resizer-active { + z-index: 801; + } + + .tc-sidebar-resizer-pointermove-eventcatcher.tc-resizer-active { + z-index: 802; + } + + .tc-sidebar-resizer-pointermove.tc-resizer-active { + z-index: 803; + cursor: ew-resize; + } + + .tc-sidebar-resizer.tc-resizer-active { + opacity: 0.6; + } + <%if [[$:/state/sidebar/resizing]!is[missing]] %> - .tc-sidebar-resizer-pointermove-eventcatcher-wrapper { - z-index: 801; - } - - .tc-sidebar-resizer-pointermove-eventcatcher { - z-index: 802; - } - - .tc-sidebar-resizer-pointermove { - z-index: 803; - cursor: ew-resize; - } - - .tc-sidebar-resizer { - opacity: 0.6; - } - @media (pointer: coarse) { - .tc-sidebar-resizer { + .tc-sidebar-resizer.tc-main-sidebar-resizer { opacity: 0.25; } } @@ -82,11 +86,11 @@ code-body: yes <%if [match[yes]] %> - .tc-sidebar-resizer { + .tc-sidebar-resizer.tc-main-sidebar-resizer { left: clamp(calc(<> + <> - (2 * <> / 3)),clamp(calc(<> - (2 * <> / 3)),max(calc(<> + <> - (2 * <> / 3)),calc(<> - (2 * <> / 3))),max(calc(100% - <> - (2 * <> / 3) + (<> + <> - <>)),calc(100% - <> - (2 * <> / 3)))),calc(100% - <> - (2 * <> / 3))); } - .tc-sidebar-left .tc-sidebar-resizer { + .tc-sidebar-left .tc-sidebar-resizer.tc-main-sidebar-resizer { left: auto; right: clamp(calc(<> + <> - (2 * <> / 3)),clamp(calc(<> - (2 * <> / 3)),max(calc(<> + <> - (2 * <> / 3)),calc(<> - (2 * <> / 3))),max(calc(100% - <> - (2 * <> / 3) + (<> + <> - <>)),calc(100% - <> - (2 * <> / 3)))),calc(100% - <> - (2 * <> / 3))); } @@ -95,11 +99,11 @@ code-body: yes <%if [match[yes]] %> - .tc-sidebar-resizer { + .tc-sidebar-resizer.tc-main-sidebar-resizer { left: clamp(calc(<> + <> + (<> / 3)),calc(100% - <> + (<> / 3)),calc(100% - <> + (<> / 3))); } - .tc-sidebar-left .tc-sidebar-resizer { + .tc-sidebar-left .tc-sidebar-resizer.tc-main-sidebar-resizer { left: auto; right: clamp(calc(<> + <> + (<> / 3)),calc(100% - <> + (<> / 3)),calc(100% - <> + (<> / 3))); } @@ -108,11 +112,11 @@ code-body: yes <%if [match[yes]] %> - .tc-sidebar-resizer { + .tc-sidebar-resizer.tc-main-sidebar-resizer { left: min(calc(50% + (<> / 2) - (2 * <> / 3)),calc(100% - <> - (2 * <> / 3))); } - .tc-sidebar-left .tc-sidebar-resizer { + .tc-sidebar-left .tc-sidebar-resizer.tc-main-sidebar-resizer { left: auto; right: min(calc(50% + (<> / 2) - (2 * <> / 3)),calc(100% - <> - (2 * <> / 3))); } @@ -121,7 +125,7 @@ code-body: yes <%if [{$:/state/sidebar}match[no]] %> - .tc-sidebar-resizer-pointerdown-eventcatcher, .tc-sidebar-resizer-pointermove-eventcatcher-wrapper, .tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove, .tc-sidebar-resizer { + .tc-sidebar-resizer-pointerdown-eventcatcher, .tc-sidebar-resizer-pointermove-eventcatcher-wrapper, .tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove, .tc-sidebar-resizer.tc-main-sidebar-resizer { display: none; } @@ -131,7 +135,7 @@ code-body: yes @media (max-width: <>) { - .tc-sidebar-resizer-pointerdown-eventcatcher, .tc-sidebar-resizer-pointermove-eventcatcher-wrapper, .tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove, .tc-sidebar-resizer { + .tc-sidebar-resizer-pointerdown-eventcatcher, .tc-sidebar-resizer-pointermove-eventcatcher-wrapper, .tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove, .tc-sidebar-resizer.tc-main-sidebar-resizer { display: none; } }