For example, I would like to have a button on the page where clicking on the left side would perform a function. Clicking in the middle would jump to this entry. Clicking on the right would do another function. Switching I want to have multiple functions on a piece of text, how can I achieve this?
Try this:
\procedure leftActions() <$action-setfield left="click" middle="" right=""/>
\procedure middleActions() <$action-setfield left="" middle="click" right=""/>
\procedure rightActions() <$action-setfield left="" middle="" right="click"/>
<$button>
<$button class="tc-btn-invisible" actions=<<leftActions>>>left</$button>
<$button class="tc-btn-invisible" actions=<<middleActions>>>middle</$button>
<$button class="tc-btn-invisible" actions=<<rightActions>>>right</$button>
</$button>
LEFT={{!!left}} MIDDLE={{!!middle}} RIGHT={{!!right}}
Notes:
- The outer
$buttonis just for appearance, and has no defined actions. - The inner
$buttons are displayed as regular text (usingtc-btn-invisible) and perform their separate actions when clicked. - Note that there is a small amount of default padding within the outer
$buttonthat, when clicked, does nothing, even though it LOOKS like you are clicking within the button. - To do “multiple functions on a piece of text”, just omit the outer
$buttonwrapper.
-e
1 Like
Thank you very much. One problem though, in my vision the text in the button is most of the time the title of the tiddler. So the problem might be converted to how to cut the tiddler title into three equal parts, and to show a small blank field when the tiddler title is too short.
Here’s something else to consider, if it’s English content that contains spaces, then it might make more sense to split it by spaces. Seems like a complicated issue.
\procedure leftActions() <$action-setfield left="click" middle="" right=""/>
\procedure middleActions() <$action-setfield left="" middle="click" right=""/>
\procedure rightActions() <$action-setfield left="" middle="" right="click"/>
<$button>
<$button class="tc-btn-invisible" actions=<<leftActions>>>New</$button><$button class="tc-btn-invisible" actions=<<middleActions>>> Tiddler </$button><$button class="tc-btn-invisible" actions=<<rightActions>>> 1</$button>
</$button>
* LEFT={{!!left}}
* MIDDLE={{!!middle}}
* RIGHT={{!!right}}
It looks like it, but it was manually split by me.
Rather than have three buttons masked as one button why not have one button, with a tool tip, which responds to click, shift-click, alt-click and ctrl-click?
It’s a nice idea, but it might be a bit difficult to realise. However, I think it’s better to have click triggers for buttons, shortcuts always tend to cause conflicts.
These are built into the button actions and documented here. They are click + key triggers.
However you could create buttons like this that may be a little more obviouse, very simply;
Yeah, that’s my backup plan.
1 Like
Hi,
With a lot of help from others I created a split button effect (top bottom) I use this on tiddlers to
1 increment or decrement an integer which is used by my custom plugins to rate (score 1 to 100) tiddlers based on my subjective view of their value
2 manage a review system whereby I make sure tiddlers do not get totally forgotten by attributing each an integer number of days after which the tiddler should be given a quick review
3 provide a feature to move a tiddler up or down the story river relative to the others to help cluster a tiddler I am editing with ones I need to refer to.
In the above picture…
1 The rating value has a purple box with a current value of 100 followed by it’s increment and decrement buttons (the box gradually changes colour according to the value giving a visual indication of importance)
2 Next a bell with a review interval of 3 days so it will be flagged 3 days after my most recent review, typically this number starts small and increases with time to some stable value, it is followed by it’s increment and decrement buttons.
3 The final up-down arrow pair will move this tiddler up and down the story river relative to the other tiddlers so that I can cluster tiddlers of interest with the one I am currently editing.
The increment and decrement buttons appear vertically stacked by means of CSS.
The colour change effect is achieved by using SVG icons which can be accessed by TW because SVG text is parsed by TW before rendering.
The increment and decrement buttons are small - easiest to use on a lap-desktop, I can also use them fairly easily on my half A5 sized tablet its still possible to accurately tap the increment or decrement buttons, they are just about usable on my mobile phone but I would usually wait until I got home before using them extensively.
An early version of the setup below can be found on this thread here…
https://talk.tiddlywiki.org/t/work-on-a-rate-tiddlers-plugin/8504/14
Scroll down to find my attachment - $__plugins_jonnie45_ReviewTiddlers.json (43.1 KB)
This showcases an early version of the rate tiddlers plugin but contains I believe (working from memory) all that is needed to get the idea of the split button effect. If anyone has interest and needs more let me know.
This plugin looks good and worth looking into. Maybe I should shift my thinking a bit and not limit myself to text, but work on the buttons themselves. For example, as implemented in the plugin, two specific functions can be performed in one button, increase or decrease.
When I read this question, my thoughts turned immediately to $reveal or %if widgets. Either of these can invoke separate code blocks depending on a test as simple or complex as you like.
The block would look like
<$button>
<$if some test >
Some code to do something
<%else%>
Some alternate code
<%endif%>
Click here
</$button>
Bobj