Sidebar-resizer: change $:/themes/... tiddlers

[BurningTreeC]

This PR uses the same mechanism as #8644 but changes the $:/themes/tiddlywiki/vanilla/metrics/... tiddlers directly.
Note that in fixed-fluid mode the story-river actually changes its width but the tiddlerwidth remains fixed width as there was no discussion yet how we handle this. I just made the tiddlers adapt to the story-river if the story-river-width goes below the tiddlerwidth.

There are some design questions:

• should it be possible to make the story-river overlap the sidebar / the slider?
• should the tiddlerwidth in fixed-fluid mode be updated? (keeping the gap between sidebar and story-river)

I haven't yet added the ControlPanel configurations used for storyminwidth and sidebarminwidth.
This PR is just for completeness, I will update it so that we can compare with other possible solutions.

---

In the meantime this PR has been updated quite a bit, I've put a current build here:

https://sidebar-resizer-config.tiddlyhost.com/

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[github-actions]

Confirmed: BurningTreeC has already signed the Contributor License Agreement (see contributing.md)

[BurningTreeC]

@Jermolene @saqimtiaz @pmario

sorry for tagging you 😸
But if you have time, could you test?
Especially fixed-fluid mode needs testing.
This here now works with pixel and percentage values.
It updates the $:/themes/... tiddlers directly.
In fixed-fluid mode it updates storyright and storyleft.
There's also the option to slide using ctrl in fixed-fluid mode. ctrl makes it possible to move the sidebar further to the left if there's a gap between story and sidebar. To test that, maybe set the storyright to 75% and the storywidth to 45% and the tiddlerwidth to 100% ... it becomes easier to understand like that.

The calculations are now done in wikitext in the procedures.
One thing I had to limit to not become less than 0 which is the storyleft.

[BurningTreeC]

This works now with all absolute css metrics:

Including percentage, which is easy to calculate.
If a metric was for instance "pt" or "%" before starting to resize, it will be updated as "pt" / "%" and so on.

The internal calculations are all done in pixel, so this first converts everything to pixel, then calculates, then converts back to the corresponding value.

I don't know if this can also support other relative css metrics...

[BurningTreeC]

As I said above, in fixed-fluid mode I'm not settled about how the gap between story-river and sidebar should be handled.
This implementation however can be modified easily in that regards

[pmario]

@BurningTreeC -- I did checkout this branch and did run it, but I can not find any resizer. I think I'm missing something

[BurningTreeC]

A theme can now set the following functions in the <theme-name>/functions tiddler to define the tiddlers whose metrics should get updated. These functions are optional. If not provided, the mechanism looks for tiddlers with the namespace naming <theme-name>/metrics/<metric> as written above.

\function get.story-left.tiddler()
\function get.story-right.tiddler()
\function get.sidebar-width.tiddler()
\function get.tiddler-width.tiddler()
\function get.story-width.tiddler()
\function get.story-minwidth.tiddler()
\function get.sidebar-minwidth.tiddler()
\function get.story-padding-left.tiddler()
\function get.story-padding-right.tiddler()

[BurningTreeC]

This PR is ready for review.
I think theme developers now have their ways to use the sidebar resizer if they want to.

[BurningTreeC]

Again, here's the current build: https://sidebar-resizer-config.tiddlyhost.com/

[pmario]

What is tiddlywiki/example used for

Is it there for testing only, or will it stay?

[pmario]

Sidebar Layout: Fluid story, Fixed sidebar

---

Story Padding Left -- Does change the distance between the left window border and the tiddler border. So if I change it from 42px to 22px the padding gets smaller.

Story Padding right -- Does only move the "sidebar resizer" -- It does not change the distance between the tiddler and the sidebar -- Is that intended?

[pmario]

Is it possible to double-click the sidebar-resizer -- so it triggers the "hide sidebar".

[BurningTreeC]

Sidebar Layout: Fluid story, Fixed sidebar

Story Padding Left -- Does change the distance between the left window border and the tiddler border. So if I change it from 42px to 22px the padding gets smaller.

Story Padding right -- Does only move the "sidebar resizer" -- It does not change the distance between the tiddler and the sidebar -- Is that intended?

Hi @pmario - in Fluid story, Fixed sidebar mode the visible gap between the story-river and the sidebar has always been determined by the sidebar's left padding. That's also been a bit confusing to me in the beginning.

[BurningTreeC]

Is it possible to double-click the sidebar-resizer -- so it triggers the "hide sidebar".

Yes we can do that 👍

[pmario]

Can you try the following code for: $:/core/functions/themes

I did add line breaks and removed redundant function[ -- It seems to work for me.
Functions with more than 1 :else use multi lines now

Show code

title: $:/core/functions/themes
tags: $:/tags/Global
code-body: yes

\function is.pixel.value(value) [<value>removesuffix[px]]
\function is.percentage.value(value) [<value>removesuffix[%]]
\function is.cm.value(value) [<value>removesuffix[cm]]
\function is.mm.value(value) [<value>removesuffix[mm]]
\function is.Q.value(value) [<value>removesuffix[Q]]
\function is.in.value(value) [<value>removesuffix[in]]
\function is.pc.value(value) [<value>removesuffix[pc]]
\function is.pt.value(value) [<value>removesuffix[pt]]
\function is.em.value(value) [<value>removesuffix[em]]

\function convert.to.cm(value) [<value>divide[37.8]]
\function convert.to.mm(value) [convert.to.cm<value>multiply[10]]
\function convert.to.Q(value) [convert.to.cm<value>multiply[40]]
\function convert.to.in(value) [<value>divide[96]]
\function convert.to.pc(value) [convert.to.in<value>multiply[6]]
\function convert.to.pt(value) [convert.to.in<value>multiply[72]]
\function convert.to.em(value) [[storyTiddler]is[variable]then<value>divide{$:/themes/tiddlywiki/vanilla/metrics/bodyfontsize}] [[storyTiddler]!is[variable]then<value>divide{$:/themes/tiddlywiki/vanilla/metrics/fontsize}]

\function convert.to.pixels(value,metric)
[<metric>match[cm]then<value>multiply[37.8]]
[<metric>match[mm]then<value>multiply[37.8]divide[10]]
[<metric>match[Q]then<value>multiply[37.8]divide[40]]
[<metric>match[in]then<value>multiply[96]]
[<metric>match[pc]then<value>multiply[96]divide[6]]
[<metric>match[pt]then<value>multiply[96]divide[72]]
[<metric>match[em]then[storyTiddler]is[variable]then<value>multiply{$:/themes/tiddlywiki/vanilla/metrics/bodyfontsize}]
[<metric>match[em]then[storyTiddler]!is[variable]then<value>multiply{$:/themes/tiddlywiki/vanilla/metrics/fontsize}]
\end

\function subtract.one.from.sidebarbreakpoint(value)
[is.pixel.value<value>subtract[1]addsuffix[px]]
:else[is.cm.value<value>convert.to.pixels<value>,[cm]subtract[1]divide[37.8]addsuffix[cm]]
:else[is.mm.value<value>convert.to.pixels<value>,[mm]subtract[1]divide[37.8]multiply[10]addsuffix[mm]]
:else[is.Q.value<value>convert.to.pixels<value>,[Q]subtract[1]divide[37.8]multiply[40]addsuffix[Q]]
:else[is.in.value<value>convert.to.pixels<value>,[in]subtract[1]divide[96]addsuffix[in]]
:else[is.pc.value<value>convert.to.pixels<value>,[pc]subtract[1]divide[96]multiply[6]addsuffix[pc]]
:else[is.pt.value<value>convert.to.pixels<value>,[pt]subtract[1]divide[96]multiply[72]addsuffix[pt]]
:else[is.em.value<value>convert.to.pixels<value>,[em]subtract[1]divide{$:/themes/tiddlywiki/vanilla/metrics/fontsize}addsuffix[em]]
\end

\function sidebarbreakpoint() [{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}]

\function sidebarbreakpoint-minus-one() [subtract.one.from.sidebarbreakpoint<sidebarbreakpoint>] :else[<sidebarbreakpoint>]

\function add.one.to.breakpoint(value)
[is.pixel.value<value>add[1]addsuffix[px]]
:else[is.cm.value<value>convert.to.pixels<value>,[cm]add[1]divide[37.8]addsuffix[cm]]
:else[is.mm.value<value>convert.to.pixels<value>,[mm]add[1]divide[37.8]multiply[10]addsuffix[mm]]
:else[is.Q.value<value>convert.to.pixels<value>,[Q]add[1]divide[37.8]multiply[40]addsuffix[Q]]
:else[is.in.value<value>convert.to.pixels<value>,[in]add[1]divide[96]addsuffix[in]]
:else[is.pc.value<value>convert.to.pixels<value>,[pc]add[1]divide[96]multiply[6]addsuffix[pc]]
:else[is.pt.value<value>convert.to.pixels<value>,[pt]add[1]divide[96]multiply[72]addsuffix[pt]]
:else[is.em.value<value>convert.to.pixels<value>,[em]add[1]divide{$:/themes/tiddlywiki/vanilla/metrics/fontsize}addsuffix[em]]
\end

\function breakpoint-plus-one() [add.one.to.breakpoint{$:/config/plugins/menubar/breakpoint}] :else[{$:/config/plugins/menubar/breakpoint}]

\function get.base.theme.metric.recursive(theme,metric) [<theme>get[dependents]enlist-input[]] :map[get.base.theme.metric<currentTiddler>,<metric>]

\function get.base.theme.metric(theme,metric)
[<theme>addsuffix[/metrics/]addsuffix<metric>!is[missing]]
:else[<theme>addsuffix[/metrics/]addsuffix<metric>is[shadow]]
:else[get.base.theme.metric.recursive<theme>,<metric>]
\end

\function get.base.theme(theme,metric) [get.base.theme.metric<theme>,<metric>first[]removesuffix<metric>removesuffix[/metrics/]]

\function get.theme.metric(metric) [get.base.theme.metric<get.current.theme>,<metric>first[]get[text]]

\function get.base.theme.option.recursive(theme,option) [<theme>get[dependents]enlist-input[]] :map[get.base.theme.option<currentTiddler>,<option>]

\function get.base.theme.option(theme,option)
[<theme>addsuffix[/options/]addsuffix<option>!is[missing]]
:else[<theme>addsuffix[/options/]addsuffix<option>is[shadow]]
:else[get.base.theme.option.recursive<theme>,<option>]
\end

\function get.theme.option(option) [get.base.theme.option<get.current.theme>,<option>first[]get[text]]

\function get.theme.explicit.option(option) [<get.current.theme>addsuffix[/options/]addsuffix<option>get[text]]

\function get.theme(metric)
[get.base.theme<get.current.theme>,<metric>addsuffix[/metrics/]addsuffix<metric>!is[missing]]
:else[get.base.theme<get.current.theme>,<metric>addsuffix[/metrics/]addsuffix<metric>is[shadow]]
:else[[$:/themes/tiddlywiki/vanilla/metrics/]addsuffix<metric>]
\end

\function set.theme.metric(metric)
[get.base.theme.metric<get.current.theme>,<metric>first[]is[shadow]]
:else[get.base.theme.metric<get.current.theme>,<metric>first[]!is[shadow]!is[missing]]
:else[[$:/themes/tiddlywiki/vanilla/metrics/]addsuffix<metric>]
\end

\function get.base.functions.theme.recursive(theme) [<theme>get[dependents]enlist-input[]] :map[get.base.functions.theme<currentTiddler>]

\function get.base.functions.theme(theme)
[<theme>addsufix[/functions]!is[missing]]
:else[<theme>addsuffix[/functions]is[shadow]]
:else[get.base.functions.theme.recursive<theme>]
\end

\function get.current.theme() [{$:/theme}!is[blank]] :else[all[tiddlers+shadows]plugin-type[theme]plugin-priority[0]first[]]

[BurningTreeC]

I've made the changes @pmario requested and found a minor error which is now fixed

[BurningTreeC]

Again, here's the current build: https://sidebar-resizer-config.tiddlyhost.com/

[BurningTreeC]

should I change all occurrences of sidebar-resizer to something else like:

• layout-slider
• story-resizer
• just resizer

[pmario]

Most of the settings in TW have verbose names, even if they are a bit longer. So I think it's OK as it is. The function also modifies the "Sidebar width" tiddler, which we need to keep for backwards compatibility.