TW Gadget: Tiddler Editor Text Resizer

[Charlie Veniot]

Just for the giggles to figure out how I would go about it.

Download the attached and drag into TiddlyWiki.com for import of the tiddlers.

2 Screenshots:

Notice and play around with the slider in the edit toolbar:

[Scott Sauyet]

 Charlie Veniot wrote:

> Just for the giggles to figure out how I would go about it.

Very nice!  One suggestion: make the max 200 or so rather than the default 100.  Help those with poorer eyesight!

  -- Scott

[Charlie Veniot]

Done.  Plus a "reset" button.

[S²]

Hello forum,

inspired by @Charlie Veniot I tried to add the reset button to my wiki - but no effect when clicking on the button.

Any idea why?

Also tested on https://tiddlywiki.com/

Code:

<$action-setfield $tiddler="$:/themes/tiddlywiki/vanilla/metrics/bodyfontsize" text={{fontsizeValue}}/>
<span style="font-size: 0.85em; font-weight: 400;">Schriftgröße (Editor): </span>&nbsp;
<$range tiddler="fontsizeEditor" min="16" max="24" default="18" increment="0.5" class="slider"/>
&nbsp;
<span style="font-size: 0.7em"> {{fontsizeEditor}} px </span>
<$button class="tc-btn-invisible" tooltip="Reset">
<$action-setfield $tiddler="$:/themes/tiddlywiki/vanilla/metrics/bodyfontsize" text="18px"/>&nbsp;
<span style="font-size:1em;">''↺''</span>
</$button>

with 

 

Thanks for help.

Stefan

[Charlie Veniot]

There are a few problems in your TW scripting.

The first line, action-setfield.   All action widgets have to be the result of something happening (like clicking on a button).  That action doesn't have anything to trigger it, so it will never happen.

The other action-setfield does happen when pushing on the button.  It correctly sets the "bodyfontsize" metric.

The slider, though, sets the text value for a tiddler that is used in your CSS to set the font size of tc-edit-text-editor-body.

tc-edit-text-editor-body and "bodyfontsize" are two different things.

If you use the TiddlyWiki control panel, setting the bodyfontsize does have an impact on the font size for tc-edit-text-editor-body (have a tiddler in edit mode while changing things in the control panel to see what happens), but it isn't a 1-1 relationship.

What "one" thing are you trying to accomplish here?

[S²]

Thanks Charlie!

This code works:

<span style="font-size: 0.85em; font-weight: 600;">Schriftgröße (Editor): </span>&nbsp;
<$range tiddler="fontsizeEditor" min="16" max="22" default="18" increment="0.5" class="slider"/>

&nbsp;
<span style="font-size: 0.7em"> {{fontsizeEditor}} px </span>
<$button class="tc-btn-invisible" tooltip="Reset">

<$action-setfield $tiddler="fontsizeEditor" text="18"/>&nbsp;

<span style="font-size:1em;">''↺''</span>
</$button>

[S²]

Hi Charlie,

if I do the same for Font size for tiddler body I'm loosing the suffix "px" when using the slider.

<span style="font-size: 0.85em;font-weight: 600;">
 Schriftgröße (Anzeige): </span> &nbsp;
<$range tiddler="$:/themes/tiddlywiki/vanilla/metrics/bodyfontsize" min="14" max="44" default="20" increment="1" class="slider"/>
&nbsp;
<span style="font-size: 0.85em"> {{$:/themes/tiddlywiki/vanilla/metrics/bodyfontsize}} </span>

<$button class="tc-btn-invisible" tooltip="Reset">

<$action-setfield $tiddler="$:/themes/tiddlywiki/vanilla/metrics/bodyfontsize" text="20px"/>&nbsp;

<span style="font-size:1em;">''↺''</span>
</$button>

(Actual I put "20px" to the reset button.)

Any idea how to keep it?

Thanks, Stefan

[Eric Shulman]

The TWCore setting `$:/themes/tiddlywiki/vanilla/metrics/bodyfontsize` assumes that it includes the CSS units (e.g., “px”). However, the $range widget only sets a numeric value, thus losing the default “px” suffix.

To work around this, try the following:
```
<$let target="$:/themes/tiddlywiki/vanilla/metrics/bodyfontsize">
<$range tiddler="$:/temp/bodyfontsize" class="slider"
   min="14" max="44" increment="1" default={{{ [<target>get[text]multiply[1]] }}}
   actions="<$action-setfield $tiddler=<<target>> text={{{ [<actionValue>addsuffix[px]] }}}/>"/>

```

• Have the $range widget store its result in a temp tiddler (e.g., $:/temp/bodyfontsize)
• Set the default value to the contents of $:/themes/tiddlywiki/vanilla/metrics/bodyfontsize and multiply by 1 to remove any CSS units suffix while retaining the numeric portion of the current setting value.
• Add an actions="..." parameter that copies the temp tiddler value to the actual target tiddler while also adding the desired “px” suffix.

In addition, the “reset” button should delete both the temp tiddler and the target tiddler, so the default TWCore shadow is re-applied and is also used as the default value for the $range widget:
```
<$action-deletetiddler $filter="[[$:/temp/bodyfontsize]] [<target>]"/>
```

[S²]

Thanks Eric, that works - nice.

Small hint: The slide is much smoother using this code in the sidebar (as a workaround):

```

<span style="font-size: 0.85em;font-weight: 600;">
 Schriftgröße (Anzeige): </span> &nbsp;

<$range tiddler="fontsizeValue" min="14" max="44" default="28" increment="1" class="slider"/>
&nbsp;
<span class="anzeigewert"> {{fontsizeValue}}px </span>
<$button class="tc-btn-invisible" tooltip="Zurücksetzen auf den Standardwert">
<$action-setfield $tiddler="fontsizeValue" text="28"/>&nbsp;

<span style="font-size:1em;"> ↺ </span>
</$button>

```

with $:/tags/Stylesheet

```

.tc-tiddler-body.tc-reveal { font-size: {{fontsizeValue}}px; }

```

[Scott Sauyet]

Charlie Veniot wrote:

>  Done.  Plus a "reset" button.

I created a version of this that scales logarithmically from 30% to 400%.  It feels smoother and more useful to me.

GigantiCorp doesn't allow me to upload attachments to Google Groups.  I'll try to do that from home later, but the changes are straightforward enough:

`Tid Edit Text Resizer CSS`:

```

<$let exponent={{{ [[$:/TidEditResizer/Val]get[text]] }}}>
.tc-edit-texteditor-body {
     font-size:<$text text={{{ [[10]power<exponent>multiply[100]round[]addsuffix[%]] }}}/>;
 }
</$let>

```

Here we separate out the exponent that we're going to use, just for readability, but it's still fetched from the same  tiddler.  We raise 10 to that power, multiply the result by 100, round it to an integer (probably not necessary, but looks nicer when the CSS is viewed), append the percent sign, and set this as the value for the relevant `font-size`.

`Tid Edit Text Resizer Gadget`:

```

<!-- ... -->

<$range class="tinyrange" tiddler="$:/TidEditResizer/Val" min="-0.52287874528" max="0.60205999132" default="0" increment="0.03749795788"/>
<$button class="tc-btn-invisible" tooltip="Reset to 100%">
<$action-setfield $tiddler="$:/TidEditResizer/Val" text="0"/>

<!-- ... -->

```

here we change the min, the max, then increment, and the reset value.

`max` is `log(4)`, `min` is `log (.3)`, `increment` is their difference divided by `30` steps.  You could always choose a higher number of steps if it doesn't seem smooth enough.  And the `setfield` sets it to `0`, which will correspond to 100%.

I realize as I type this, that I probably could have just use `log(400)` and `log(30)`, skipping the multiplication by `100` and leaving the reset at `100`.  Ah well, next time!