How to: Button to Toggle View (Stylesheet)

[Surya]

Hi,

I made a Button to toggle two Stylesheets by adding/removing the tag "$:/tags/Stylesheet".

It is located on the RightMenu (not on my test-wiki) and contains:

<$details summary="D/m">
D:<$fieldmangler tiddler="Seiten und Tiddler Style Desktop">
<$button message="tm-add-tag" param="$:/tags/Stylesheet">D</$button></$fieldmangler>
+<$fieldmangler tiddler="Seiten und Tiddler Style mobil">
<$button message="tm-remove-tag" param="$:/tags/Stylesheet">D</$button>
</$fieldmangler>
<br/><br/><br/>

m:
<$fieldmangler tiddler="Seiten und Tiddler Style mobil">
<$button message="tm-add-tag" param="$:/tags/Stylesheet">m</$button></$fieldmangler>
+<$fieldmangler tiddler="Seiten und Tiddler Style Desktop">
<$button message="tm-remove-tag" param="$:/tags/Stylesheet">m</$button>
</$fieldmangler>
</$details>

When I click on it, it expands and shows 4 Buttons: 2 for Desktop (adding "$:/tags/Stylesheet" to the Stylesheet "Desktop" and removing that tag from the Stylesheet "mobil") and 2 for mobile (doing the same the other way round).

That works, but I would like to have only one Button. First Clicking on this Button would add "$:/tags/Stylesheet" to the Stylesheet "Desktop" and removing that tag from the Stylesheet "mobil". And the second click would do the same the other way round.

Maybe it could be possible with the Cycle tags?:

D<$tiddler tiddler="Seiten und Tiddler Style Desktop">
<<cycletags "foo bar">>
m<$tiddler tiddler="Seiten und Tiddler Style mobil">
<<cycletags "bar foo">>
</$tiddler>

or maybe with $:/plugins/matabele/mangletags?- but I couldn't bring it to work, not at all.

You can test and play with it at http://suryas-testwiki.tiddlyspot.com/

Thanks for your help!

Surya

Update: It is solved :-) With this:

My toggle-button - solution now is only one tiddler. Code:

\define SwapActiveStyle(style1,style2)
<$fieldmangler tiddler="$style1$">
<$action-sendmessage $message="tm-add-tag" $param="$:/tags/Stylesheet"/>
</$fieldmangler>
<$fieldmangler tiddler="$style2$">
<$action-sendmessage $message="tm-remove-tag" $param="$:/tags/Stylesheet"/>
</$fieldmangler>
\end

\define swapper(style1,style2)
<$vars sheet="$:/tags/Stylesheet">
<$list filter="[[$style1$]tag<sheet>]">
<$button><$text text="""<m"""/>
<<SwapActiveStyle """$style2$""" """$style1$""">>
</$button>
</$list>
<$list filter="[[$style2$]tag<sheet>]">
<$button><$text text=""">D"""/>
<<SwapActiveStyle """$style1$""" """$style2$""">>
</$button>
</$list>
</$vars>
\end

<<swapper DesktopStyle mobilStyle>>

The tiddler "DesktopStyle" is for optimized view & handling on the Laptop. And the tiddler "mobilStyle" for optimized view & handling on my tablet.

And Birthes code lets the sidebar to behave like expected:

<<if-no-sidebar "

.tc-story-river {
    width: calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}});
}

.tc-tiddler-frame {
    width: 100%;
}
">>

Maybe, these codes helps other people too...

Surya

[TonyM]

A quick tip

Create two buttons one mobile, one desktop in the same tiddler. set an initial value then display one when mobile selected hide it when desktop is enabled and visa versa for the other. Basically have a complex toggle.

You can load each button with multiple actions.

Forcing the initial value stops you having to deal with the first button press, ie before either is pressed.

Remember you can search for the code for any existing button core or coming with a plugin that behaves similarly to what you want and learn from how its done, even clone and modify.

Regards
Tony

[Surya]

Hi Tony,

that sounds interesting!

But I really don't know how to do , I mean how to write what you describe.

And please believe me, I am searching for the codes and learn from them and try to modify them and so on and so on.

Doing that since 3 days á 7 hours only for this one button. And the same for many other wanted functions, sometimes even more time spending. And knowing that somebody here possibly knows the code...

Thanks for your help, Surya

[TonyM]

Syrya,

A Quick example, use on tiddlywiki.com and explore how this works, one button allows another button to be toggled.

<$button set="!!edit-fields-list" setTo="" class="tc-btn-invisible"  tooltip="Create edit-fields-list and customise which fields to display for edit in view mode"><$action-setfield show-edit-fields="yes"/>{{$:/core/images/edit-button}}{{$:/core/images/storyview-classic}}</$button>


<$reveal type="match" state="!!show-edit-fields" text="yes"><$button set="!!show-edit-fields" setTo="no" class="tc-btn-invisible" tooltip="close edit fields view">{{$:/core/images/preview-closed}}{{$:/core/images/storyview-classic}}</$button></$reveal>
<$reveal type="match" state="!!show-edit-fields" text="no"><$button set="!!show-edit-fields" setTo="yes" class="tc-btn-invisible"  tooltip="open edit fields view">{{$:/core/images/preview-open}}{{$:/core/images/storyview-classic}}</$button></$reveal>

The first allows you to create the show-edit-fields. if this field exists the second button(s) (one at a time displayed but made up of two buttons) provides the ability to toggle the value yes/no.

Regards

Tony

[Surya]

Hi Tony,

thanks a lot for your concrete code.

For my wished toggle-button I found another solution, which works really fantastic.

But no matter- maybe, your code will help another time in other situations. So I will keep it.

Every concrete code-example, where I can see in live-mode what it does, helps me to learn.

In this way- thanks :-)

(My toggle-button - solution now is also only one tiddler. Code:

[TonyM]

Surya

Glad you have what you need and thanks for sharing back your code.

To improve the way Google groups works Someone like yourself can use the forum view and edit your original post to note the solution. Visitors will see its solved in the first read.

Regards
Tony

[Surya]

Hi Tony,

you're absolutely right. Thanks, that you pointed to that!

I will do that and hope to remember it for the future.

(But for me I can say, I always read until the last replie to learn and eventually find the solution).

Surya

[Mohammad]

Thank you Surya!

It would great if other people also update their post when a solution is found!

This is quite helpful for future reference.

Mohammad