Resize or collapse SideBar on certain actions

[Anomaly Spy]

Hello TiddlyWiki contributors, experts and users,

I am an old school (manual) test engineer by profession, who recently stumbled into TiddlyWiki. Forced by the nature of my profession, I have been tinkering with it for a few days now, before starting to use it for a purpose :-) I am a bit familiar to programming, but a stranger to Javascript, HTML or CSS.

Before getting into my first request/question, I want to join the multitude of users who are thankful to Jeremy for this creation and various additions that make it more useful.

My request / question: Can I resize the SideBar based on certain actions? For example, when I click "Recent" in Sidebar, it should have 300px width . When I click tools the SideBar should resize to 600px px, all others should use default width. Can this be done? If yes, how?

Regards,

Anomaly Spy

[Charlie Veniot]

G'day, and welcome to TiddlerHood !

I've got a solution for you.  I just need to tidy up instructions and such so that it all makes sense.

Give me 30-60 minutes.

[Charlie Veniot]

You'll find my approach (instructions and working sample) in my TiddlyWiki Programming TiddlyWiki's Setting Up Dynamic Sidebar Width tiddler.

That was actually a lot of fun.  It involved searching system tiddlers, and I can't help but enjoy digging into the weeds.

Cheers !

On Monday, April 5, 2021 at 10:06:56 AM UTC-3 Anomaly Spy wrote:

[Mat]

Hi Anomaly Spy

You can tweak the tab itself to do further actions via the actions paramter see the tabs Macro docs. One annoyance here is to find where the sidebar tabs macro is actually called (it is in  $:/core/ui/SideBarSegments/tabs - btw, you may find HackSearch useful for such issueas an general tinkering.) As you'll note the sidebar tabs are listed by their tag so in your case I guess you'd hard code the individual tabs (no biggie it's just four of them) to differentiate what actions they trigger. One idea to consider, rather than setting fixed sidebarwidths, might be to have those tabs toggle the sidebarlayout value i.e $:/themes/tiddlywiki/vanilla/options/sidebarlayout between fluid-fixed and fixed-fluid

<:-)

[Jeremy Ruston]

Hi Charlie

You'll find my approach (instructions and working sample) in my TiddlyWiki Programming TiddlyWiki's Setting Up Dynamic Sidebar Width tiddler.

That was actually a lot of fun.  It involved searching system tiddlers, and I can't help but enjoy digging into the weeds.

Just to say that it’s a cracking solution. My first thought had been a different approach involving overriding the sidebar tabs to add an “action” parameter to the tabs macro, but your solution is much more elegant.

Best wishes

Jeremy.

Cheers !

On Monday, April 5, 2021 at 10:06:56 AM UTC-3 Anomaly Spy wrote:

Hello TiddlyWiki contributors, experts and users,

I am an old school (manual) test engineer by profession, who recently stumbled into TiddlyWiki. Forced by the nature of my profession, I have been tinkering with it for a few days now, before starting to use it for a purpose :-) I am a bit familiar to programming, but a stranger to Javascript, HTML or CSS.

Before getting into my first request/question, I want to join the multitude of users who are thankful to Jeremy for this creation and various additions that make it more useful.

My request / question: Can I resize the SideBar based on certain actions? For example, when I click "Recent" in Sidebar, it should have 300px width . When I click tools the SideBar should resize to 600px px, all others should use default width. Can this be done? If yes, how?

Regards,

Anomaly Spy

-- 
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/7b439559-ce35-4897-b81e-a75ead8b288en%40googlegroups.com.

[jtech108]

Hey there CJ and all,

Oh man, that's magical.

Thanks for sharing!

Best wishes,

Julio

[Charlie Veniot]

G'day Jeremy.

I am a transclusion fiend.  Transclusion is so well done in TiddlyWiki, that I usually only consider a macro when something cannot be done (or is simply too impractical/unwieldly) with transclusion.

BTW

Thank-you much, Jeremy.  That totally makes my day, and I'll be riding a high for a good while.

Although I'm not much into hero-worship and getting all hysterical, you are among a handful of folk who are right up there on the leaderboard of thinkers (folk I hold in high regard).  Anybody who takes a moment to give me a pat on the back, that's pretty special to me.  Extra cool when it is one of my "heroes" of the "out-of-the-box-thinkers" variety.

"Cracking solution."  I love learning new expressions, and that is new to me.  It is right up there with "It's brilliant"  (now I have "Kipper the Dog" on the brain.) 

Aside:  "Té craqué"  (tu es craqué) means "you are nuts" in my corner of the world, so "Cracking solution" is serendipitously right fitting.

[Charlie Veniot]

G'day Julio,

Thanks!

However, truth be told: I may have been dropped one too many times as a baby, so do always look upon whatever I let out the barn doors with a highly critical eye.

Often, I think:  "just because I can do it, should I?"

Then in a blink of an eye:  "Hell ya.  Rock'n roll, baby."

I may be a Dawin Award waiting to happen ...

[jtech108]

My knida folk right there!

They do say that intelligence comes with some dose of insanity...lol

You said: "so do always look upon whatever I let out the barn doors with a highly critical eye."

Most definite, will do!

 Many blessings!

[Anomaly Spy]

Hi Charlie,

Though I don't understand the code snippet in the tiddler "DynamicSidebarWidth", I understand the concept and am able to do minimal modifications to serve my purpose. Thank you!

Cheers!

[Anomaly Spy]

Hi Mat,

Thanks for your answer. I will give your answer a try after I understand macros.

Cheers!

[Anomaly Spy]

How do I collapse and expand the SideBar, though (which is done by clicking on the double arrows on right-top corner)?

It doesn't seem to be done by setting the widths of the side bar. Is there another tiddler which control this behaviour?

TIA!

[Mat]

Anomaly Spy wrote:

How do I collapse and expand the SideBar, though (which is done by clicking on the double arrows on right-top corner)?

It doesn't seem to be done by setting the widths of the side bar. Is there another tiddler which control this behaviour?

Ctrlpanel > Appearance > ThemeTweaks > Options/SidebarLayout

<:-)

[Charlie Veniot]

Yeah, you have a little bit of reading to do over a https://tiddlywiki.com/.  

For now, I hope I made it modular enough that you can easily alter it for your purposes.

If helpful, here are a few notes (quick, dirty, likely deserving of much better explanation):

(note:  I've modified my local copy, reducing to one "vars" widget ... I originally had two lines to make testing/debugging a little easier.)

<$vars vCurrentTab= {{{ [all[tiddlers]regexp[state/tab/sidebar]get[text]removeprefix[$:/core/ui/SideBar/]] }}}>

• VarsWidget
  
  • I could have used a  SetWidget, but I prefer the VarsWidget for some strange reason.
• Filters and Filter Operators
  • This is what I call the programming language of TiddlyWiki.  It is powerful stuff.  It may be hard to wrap one's mind  around it.  Until something just clicks, and it all makes sense.
• The triple curly brackets (i.e. {{{ }}} ) say "hey,  this is a filter, run it, give me the result"

<$list filter="[<vCurrentTab>match[Open]then[40%]] [<vCurrentTab>match[Recent]then[35%]] +[else[25%]]">

• ListWidget
  • [<vCurrentTab>match[Open]then[40%]] says: hey, if the tiddler specified by vCurrentTab="Open", then return "40%", otherwise return nothing
  • [<vCurrentTab>match[Recent]then[35%]] says: hey, if the tiddler specified by vCurrentTab="Recent", then return "35%", otherwise return nothing
  • Each of the two above are independent filters, results of which are a combined list of results, which will always result in either one or no items
  • +[else[25%]] says: hey, for everything before me amounts to nothing (i.e. is there one or more values results in false), then return "25%"

{{!!title}}

• Transclusion
  • {{!!title}} says:  hey, return the value of the field "title" for the current tiddler
    • "!!" is the separator between tiddler name and field name
    • when tiddler name is not specified, then "current tiddler" is assumed
      • "current tiddler" is the current value being processed by the <$list> ... </$list> loop cycle  

</$list>

• for every value (each one treated as if it is a tiddler) returned by the filter, that value is considered "current tiddler" by the processing between <$list> and </$list> 
• so <$list> ... </list> is a loop

</$vars>

• Everything between "<$vars> and </$vars> can refer to the variable vCurrentTab, by "<<vCurrentTab>>" outside of filters, and by "<vCurrentTab>" inside filters

[Anomaly Spy]

Charlie,

Much appreciate you taking time to explain the code. Now I understand what is in "DynamicSidebarWidth

And indeed I have some reading to do about TiddlyWiki

Regards,