SidebarSlider plugin - slide your sidebar!

[BurningTreeC]

I made the button larger @john.edw_gmail.com

I’m not perfectly happy how it looks like but it’s functional

[tw-FRed]

Same problem here, latest Firefox on Linux. [EDIT:] Problem solved with latest version
Also tested with Vivaldi on Linux, works flawlessly!

Congratulations @BurningTreeC! The slider button is perfect!

Fred

[Scott_Sauyet]

@BurningTreeC

I think I now changed it to your liking. Have a look if you have time and let me know

It looks fantastic to me!

I haven’t dug too deeply into the implementation – that’s a lot of tiddlers touched! – but there is something disconcerting about this using a property not in the $:/temp namespace, and hence having the “save” button immediately turn red on any move of the slider. But I don’t know that there’s any comfortable alternative. Sometimes using it would involve a temporary viewing convenience, and sometimes I would want it to be a permanent fix; not a situation easy to cater to.

Question: If I wanted to use this only in author mode, could I add the plugin, adjust my divider, and remove the plugin, leaving everything working as it was except for the new widths of the two sides?

[DaveGifford]

Looks good (Windows + Chrome). But I don’t see how to move the sidebar to the left. There are no instructions or visible cues for that. It just lists that as a current feature.

[EricShulman]

$:/ControlPanel > Appearance > Theme Tweaks
has settings for “sidebar position” and “sidebar slider”.

[TW_Tones]

@Scott_Sauyet

there is something disconcerting about this using a property not in the $:/temp namespace, and hence having the “save” button immediately turn red on any move of the slider.

Scott, If you identify the temp tiddler(s) that changes when adjusting the the slider you can add -tiddlertitle to the save filter, there may be a second step, so the dirty trigger is not triggered by adjusting the slider.

• However depending on your use case you may want to exclude other changes triggering the dirty indicator.

[Scott_Sauyet]

@TW_Tones

Scott, If you identify the temp tiddler(s) that changes when adjusting the the slider you can add -tiddlertitle to the save filter, there may be a second step, so the dirty trigger is not triggered by adjusting the slider.

Thank you. I have modified the Save filter in the past, but I’ve never tried altering the dirty indicator. I’ll have to look that up, because I’ve run into other things I think of as temporary UI changes that I would prefer didn’t trigger the dirty state.

[TW_Tones]

Remember if they can’t save in any circumstance, you could just disable any entry into the dirty state.

[EricShulman]

see https://tiddlywiki.com/#SavingMechanism

Regarding the appearance of the red “dirty indicator”

1. The saver mechanism uses the filter defined in $:/config/SaverFilter to specify which modified tiddlers trigger the dirty state for the wiki. (The dirty state is reflected in the red colouring of the “save changes” button in the sidebar).

and regarding the “save filter” that determines which tiddlers are actually saved to the file:

• The template includes a reference to $(publishFilter)$ that allows the filter to be customised via a global variable

-e

[Yaisog]

Hi @BurningTreeC, great plugin! There are some things I noticed that could be improved:

• When closing a tiddler with the sidebar on the left, the closing animation slides it through the sidebar
• It would be nice if the button itself could also be dragged to change the width of the sidebar. It takes up its space anyway and it easier to hit than the thinner line (alternatively, you could make the line the same width as the button and put the latter right on it).
• You could duplicate the settings for your resizer on its plugin page. That’s where I looked first, and without @EricShulman’s help I might not have found them at all.

Keep up the good work!

[BurningTreeC]

Hi @Yaisog

Thanks for your kind words, I appreciate!

I could change the “classic” storyview animation to slide out to the right when the sidebar is on the left.

Making the button draggable is maybe impossible by design, but the slider line is just an indicator where the slider-center is, the slider itself is larger.

Yes, I’ll add the settings tiddler (which are the ThemeTweaks) to the start page.

Thanks for your ideas,
best wishes,
Simon

[JanJo]

Hi @BurningTreeC
Thanks for the plugin! To what tiddler does it save the width?

[tw-FRed]

As far as I can tell the plugin uses the same configuration tiddlers as native tiddlywiki, you can check that by opening ControlPanel → Appearance → Theme Tweaks and then using the slider. When releasing the mouse button, the configuration values are modified according to the new slider position.

This would also explain why the wiki is “dirty” ( = modified ) after each use of the slider, just like when you change these configuration values by hand in any tiddlywiki.

Fred

[JanJo]

Yes…but what tiddler is it saved to? I could not track it.

[BurningTreeC]

Hello @JanJo

if you click on the links left beneath the values in the ThemeTweaks tab, the corresponding configuration tiddler opens

[Scott_Sauyet]

Try putting this in the AdvancedSearch / Filter tab:

[all[tiddlers+shadows]!sort[modified]first[20]]

Then adjust the sidebar slider, and you’ll see these four move to the top of the list:

• $:/themes/tiddlywiki/vanilla/metrics/storyright
• $:/themes/tiddlywiki/vanilla/metrics/storywidth
• $:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth
• $:/state/sidebar

And if you change themes, you will see the equivalent tiddlers for that theme instead of “vanilla”.

[linonetwo]

How to use it on my calendar layout plugin? So I might need it to edit an alternative setting tiddler instead.

P.S. will it works on your multi column layout?

[BurningTreeC]

Hi @linonetwo

I don’t know how your calendar layout is build, but if it uses PageTemplates with tag $:/tags/PageTemplate and a theme you can make it work

P.S. on which multi column layout should it work?

[BurningTreeC]

A little how-to:

• The Layout should include the tiddlers $:/plugins/BTC/SidebarSlider/ui/PageTemplate/show-sidebar and $:/plugins/BTC/SidebarSlider/PageTemplate/sidebar-slider either explicitely or by the tag $:/tags/PageTemplate
• The Layout should somewhere include a sidebar with the class tc-sidebar-scrollable (maybe I can make that class configurable? → EDIT: it’s configurable now
• The theme options, theme functions and theme metrics are used to control the configuration:

title: $:/themes/tiddlywiki/vanilla/metrics/

previewsliderwidth: 10px
sidebarbreakpoint: 960px
sidebarminwidth: 350px
sidebarpadding: 42px
sidebarwidth: 350px
sliderchevroncontainerwidth: 10.5px
sliderchevroncontainertransformx: 0px
slideropacity: 0.5
slideropacityhover: 1
storypaddingleft: 42px
storyminwidth: 168px
storypaddingright: 42px

title: $:/themes/tiddlywiki/vanilla/functions

\function set.centralised() no
\function set.storywidth.storyright() [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fixed-fluid]then[yes]] :else[[no]]
\function set.sidebarwidth() [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fluid-fixed]then[yes]] :else[[no]]

\function get.story-sidebar.overlap() 42px

\function sidebar.resizer.maxwidth() 21px
\function sidebar.resizer.width() [<get.theme.option sidebarposition>!match[left]then[min(calc(]addsuffix<get.theme.metric storypaddingright>addsuffix[ / 2),]addsuffix<sidebar.resizer.maxwidth>addsuffix[)]] :else[[min(calc(]addsuffix<get.theme.metric storypaddingleft>addsuffix[ / 2),]addsuffix<sidebar.resizer.maxwidth>addsuffix[)]]

title: $:/themes/tiddlywiki/vanilla/options/

sidebarclass: tc-sidebar-scrollable
sidebarposition: right
sidebarresizer: show
storyriverclass: tc-story-river

[linonetwo]

@BurningTreeC

multi column layout should it work?

I mean BTC/TiddlyFlex , shouldn’t it?

And I just notice you don’t have a plugin library, also didn’t release json plugin in your github release, could you make one so CPL could auto update it?

And could you see why it doesn’t work on tiddly-gittly.github.io/tiddlywiki-calendar/ ?