[tw5] Stupid Question: Add button to ViewBar(?) with JS Only.

Google Group (Read Only)
#1

Hello,

I’ve been working on my plugin (www.github.com/flancast90/text-to-speech-in-tw5), and would like to add a button to the tiddler viewBar (I think that’s what it’s called, the place containing the More Actions, Lose, etc. buttons).

Is there a way I can do this in JS only? I am quite lost, so I’ll need to know the file structure, code, etc.

Thanks!

#2

I’ve been working on my plugin (www.github.com/flancast90/text-to-speech-in-tw5), and would like to add a button to the tiddler viewBar (I think that’s what it’s called, the place containing the More Actions, Lose, etc. buttons).

Is there a way I can do this in JS only? I am quite lost, so I’ll need to know the file structure, code, etc.

Adding a new view toolbar button requires a tiddler with the tag $:/tags/ViewToolbar, a “caption” field, an optional “description” field, and the “text” field containing the button itself (and any associated dropdowns). See the core buttons for examples:

https://github.com/Jermolene/TiddlyWiki5/tree/master/core/ui/ViewToolbar

So, the usual approach is to bundle JS modules along with any necessary wikitext tiddlers into a plugin so that they can be distributed/updated as a single unit.

Best wishes

Jeremy.

#3

Thanks Jeremy! I was able to get the button to show-up! I have a few more stupid questions, if you have the time, mainly related to styling these buttons and to wikitext.

Firstly, I would like the colour of the button to change onhover. While this is simple to do with CSS, I imagine it needs some sort of special stylesheet (styles.tid, perhaps), to do this. It would be great if you could share the syntax needed for this.

Next and lastly, I am a bit confused as to how to implement this with JS. I would like to be able to get the tiddler text, and then call a JS function with this JS text as an argument. How could I go about getting the tiddler text when the button is clicked, and then have this transfer over to JS for the function call?

Sorry if these questions are a bit basic, but I have yet to find a good resource for learning WikiText/TW Syntax, so I have to rely on the community and you.

Thanks Again!

#4

Hi Finn

Thanks Jeremy! I was able to get the button to show-up! I have a few more stupid questions, if you have the time, mainly related to styling these buttons and to wikitext.

Firstly, I would like the colour of the button to change onhover. While this is simple to do with CSS, I imagine it needs some sort of special stylesheet (styles.tid, perhaps), to do this. It would be great if you could share the syntax needed for this.

As you inferred, there are two parts: (a) assign a class to the button and (b) create a stylesheet with a :hover rule. Stylesheets are ordinary tiddlers with the tag “$:/tags/Stylesheet”, and (usually) the type “text/css”.

For dynamic effects, one can also use the wikitext type “text/vnd.tiddlywiki” and use wikitext primitives like <$list> to generate stylesheet rules dynamically.

Next and lastly, I am a bit confused as to how to implement this with JS. I would like to be able to get the tiddler text, and then call a JS function with this JS text as an argument. How could I go about getting the tiddler text when the button is clicked, and then have this transfer over to JS for the function call?

It sounds like you want to make a view toolbar button that calls a JS function to do something with the text of a tiddler. There are quite a few ways to do that, and the precise details will depend on what you’re trying to achieve. What does the JS function do with the text? Does it need to update the tiddler value in the store?

The key types of JS modules in TW5 are as follows:

  • JS macros for simple deterministic text transformations that don’t have any side effects (eg they cannot modify the tiddler store)
  • Widgets for dynamic components that reflect values in the tiddler store, and automatically refresh if the values in the store change
  • Filter operators for operations on lists of items. Again, they mustn’t have side effects
  • Savers for saving entire TiddlyWiki HTML files
  • SyncAdaptors for saving/loading individual tiddlers to remote servers

There are some docs at TiddlyWiki/Dev — documentation for developers, and it’s worth browsing the code over at GitHub:

https://github.com/Jermolene/TiddlyWiki5/tree/master/core/modules

Sorry if these questions are a bit basic, but I have yet to find a good resource for learning WikiText/TW Syntax, so I have to rely on the community and you.

Not at all. It sounds like you’ve plenty of experience of HTML, CSS and JS which puts you in a great position. Some of it will be a matter of unlearning some of the usual ways of doing things. TiddlyWiki is a different beast: it tries to make it easy to write complex apps declaratively by composing a small number of higher level primitives. But it also tries to have it’s cake and eat it, in the way that it tries to expose the underlying flexibility of HTML, CSS and JS.

Best wishes

Jeremy

#5

Thanks! I’ve already had a look around the Developer TW page, but, sadly, it does seem lacking on so-much info. Instead, I’ve had to refer to various posts/pages written by other community-members, but even those are few-and-far between for some of what I want to know.

On the note of calling the JS function, I would like to call a pre-defined script in the startup folder, with the tiddler text as an argument. The call would look like
text_to_speech(TIDDLER TEXT HERE)

Is this possible to do, or does it need a line in a .info file, or something so that one can access the functions of the other?

#6

Flank,

I can already see you contributing a lot to the community, thanks a lot. As Jeremy says you may need to unlearn and relearn a little to get right into tiddlywiki. I am myself intentionally a superuser, I do everything in the world of wiki text etc… There is very little we can’t do without javascript except as Jeremy outlined. The key pieces are to me filters, wiki text and the widgets (especially the list widget).

You may learn to ask the question “can I do it natively in tiddlywiki?” It is mostly when you are brining in functions and API’s you may need Javascript otherwise not so often.

About learning tiddlywiki,

#7

Thanks @TW Tones! I do often find myself getting into that “Js-only” mentality. As powerful and hackable as the JavaScript language is, there are certain things it cannot do (possibly or effectively), and some of those reasons are why I need to read-up on wikitext. I will look into that great list you made, and hopefully find something on it that allows the getting of the tiddler text (I have already done the stylesheet).

I may have to really work hard to stop my bad habits, because I developed quite a long bit of code to get the text of the tiddler where the button click event fired from!

Thanks Again!