1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-12-25 01:20:30 +00:00
TiddlyWiki5/editions/tw5.com/tiddlers/howtos/How to create dynamic editor toolbar buttons.tid
Mario Pietsch ac15334bb0
Add support for disabled editor toolbar buttons & docs (#5294)
* add dynamic toolbar buttons + HowTo

* remove some whitespace.

* move howto and improve shortcut logic

* move howto

* add whitespace so it can be removed in an other PR.
2021-04-25 16:17:32 +01:00

127 lines
4.1 KiB
Plaintext

created: 20201216182347597
modified: 20201217193318816
tags:
title: How to create dynamic editor toolbar buttons
type: text/vnd.tiddlywiki
\define disabledFilterExample()`[[$(tempBoldDisabled)$]get[state-disabled]else[no]]`
\define remove-shortcuts()
<$action-deletetiddler $tiddler=<<shortcutInfo>>/>
<$action-deletetiddler $tiddler=<<shortcutConfigMac>>/>
<$action-deletetiddler $tiddler=<<shortcutConfigNotMac>>/>
<$action-deletetiddler $tiddler=<<tempBold>>/>
<$action-deletetiddler $tiddler=<<tempBoldDisabled>>/>
\end
\define create-shortcut-tiddlers()
<$action-createtiddler $basetitle=<<shortcutInfo>>
$template="$:/config/ShortcutInfo/bold"
$overwrite="yes"
/>
<$action-navigate $to=<<shortcutInfo>>/>
<$action-createtiddler $basetitle=<<shortcutConfigMac>>
$template="$:/config/shortcuts-mac/bold"
$overwrite="yes"
text="meta-shift-X"
/>
<$action-navigate $to=<<shortcutConfigMac>>/>
<$action-createtiddler $basetitle=<<shortcutConfigNotMac>>
$template="$:/config/shortcuts-not-mac/bold"
$overwrite="yes"
text="ctrl-shift-X"
/>
<$action-navigate $to=<<shortcutConfigNotMac>>/>
\end
\define clone-bold()
<$action-createtiddler $basetitle=<<tempBold>>
$template="$:/core/ui/EditorToolbar/bold"
$overwrite="yes"
icon="$:/core/images/spiral"
shortcuts="((temp-bold))"
condition-disabled="[[$(tempBoldDisabled)$]get[state-disabled]else[no]]"
/>
<$action-sendmessage $message="tm-edit-tiddler" $param=<<tempBold>>/>
\end
\define clone-button-bold()
<$button actions=<<clone-bold>> >Create a Temporary Bold Button</$button>
\end
\define toggle-bold()
<$action-listops $tiddler=<<tempBoldDisabled>> $field="state-disabled" $subfilter="+[toggle[yes],[no]]" />
\end
<!-- $vars is needed don't remove it! -->
<$vars tempBold="$:/temp/bold" tempBoldDisabled="$:/temp/bold/disabled" shortcutInfo="$:/config/ShortcutInfo/temp-bold" shortcutConfigMac="$:/config/shortcuts-mac/temp-bold" shortcutConfigNotMac="$:/config/shortcuts-not-mac/temp-bold">
!! Create a New Toolbar Button
The easiest way to create new editor toolbar button is to clone and open one.
><<clone-button-bold>>
This tiddler contains all the necessary elements that are important for toolbar buttons.
<<<
; text
: We don't discuss the text field details in this howto
; caption
: The caption field is used to display the shortcut name in the $:/ControlPanel : Keyboard Shortcuts tab
; condition
: A filter, that defines the button visibility state
; condition-disabled <<.from-version "5.1.23">>
: A ''filter'', that allows us to define the "disabled" attribute for buttons. eg: <<disabledFilterExample>>
: This condition ''must'' return "no", if the "state tiddler" or "state field" doesn't exist! So there has to be a `else[no]` element in the filter.
; description
: Is used as the button tooltip
; icon
: Assigns the button icon. We use `$:/core/images/spiral` {{$:/core/images/spiral}} here.
; shortcuts
: This is the [[Keyboard Shortcut Descriptor]] eg: `((temp-bold))`
<<<
!! Disabled State
You can use any "state tiddler" to define the button disabled state. It's important, that the ''condition-disabled'' field is a ''filter''. For our example we use the `state-disabled` field from tiddler: <<tempBoldDisabled>>
The easiest way to test filters is with the $:/AdvancedSearch : Filter tab
> The temporary "bold button" is disabled: ''"{{{ [<tempBoldDisabled>get[state-disabled]else[no]] }}}"'' ... You can see the button in the editor toolbar if you edit any tiddler!
> <$button actions=<<toggle-bold>>>Toggle Temporary Bold Button Visisbility</$button>
!! Create Keyboard Shortcuts for New Button
For our ~HowTo we use the ''Keyboard Shortcut Descriptor'': `((temp-bold))`
To create a valid shortcut configuration we need 2 tiddlers:
>[[$:/config/ShortcutInfo/|$:/config/ShortcutInfo/temp-bold]]''temp-bold'' .. and
>[[$:/config/shortcuts/|$:/config/shortcuts/temp-bold]]''temp-bold''
> <$button actions=<<create-shortcut-tiddlers>>>Create Shortcut Tiddlers</$button>
!!
!! Clean up the Configuration Tiddlers
If you don't need the config tiddlers anymore you can
><$button actions=<<remove-shortcuts>>>Remove the Shortcut Configuration</$button>
</$vars><!-- needed don't remove! -->