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

[Finn Lancaster]

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!

On Monday, August 16, 2021 at 8:21:43 PM UTC-4 TW Tones wrote:

> 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, 
>
>- Ask here in the forum (as you are doing)
>- search tiddlywiki.com
>   - Especialy https://tiddlywiki.com/#Community
>   - Eg Grok Wiki 
>   - Search https://links.tiddlywiki.com/
>   - Search 
>   
> https://tiddlywiki.com/#%22TiddlyWiki%20Toolmap%22%20by%20David%20Gifford
>   - My Own resource especially 
>https://anthonymuscio.github.io/#Standard%20Nomenclature
>- There is a lot more out there so feel free to ask
>
> Tones
>
> On Tuesday, 17 August 2021 at 06:26:09 UTC+10 flanc...@gmail.com wrote:
>
>> 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?
>>
>> On Monday, August 16, 2021 at 4:17:04 PM UTC-4 jeremy...@gmail.com wrote:
>>
>>> 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 https://tiddlywiki.com/dev, and it's worth 
>>> browsing the code over at GitHub:
>>>
>>> 

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

[TW Tones]

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, 

   - Ask here in the forum (as you are doing)
   - search tiddlywiki.com
  - Especialy https://tiddlywiki.com/#Community
  - Eg Grok Wiki 
  - Search https://links.tiddlywiki.com/
  - Search 
  https://tiddlywiki.com/#%22TiddlyWiki%20Toolmap%22%20by%20David%20Gifford
  - My Own resource especially 
   https://anthonymuscio.github.io/#Standard%20Nomenclature
   - There is a lot more out there so feel free to ask

Tones

On Tuesday, 17 August 2021 at 06:26:09 UTC+10 flanc...@gmail.com wrote:

> 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?
>
> On Monday, August 16, 2021 at 4:17:04 PM UTC-4 jeremy...@gmail.com wrote:
>
>> 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 https://tiddlywiki.com/dev, 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
>>
>>

-- 
You received this message because you are 

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

[Finn Lancaster]

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?

On Monday, August 16, 2021 at 4:17:04 PM UTC-4 jeremy...@gmail.com wrote:

> 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 https://tiddlywiki.com/dev, 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
>
>

-- 
You received this message because you are subscribed to the Google Groups 
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/fcd9d157-9f94-45b6-b23d-1bde87fc2a3en%40googlegroups.com.

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

[Jeremy Ruston]

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 https://tiddlywiki.com/dev, 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

-- 
You received this message because you are subscribed to the Google Groups 
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/9c0c867b-1876-42b6-b987-bf4af5e671a1n%40googlegroups.com.

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

[Finn Lancaster]

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!
On Monday, August 16, 2021 at 1:05:02 PM UTC-4 jeremy...@gmail.com wrote:

> 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.
>
>

-- 
You received this message because you are subscribed to the Google Groups 
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/09a8b651-6813-4511-b4ca-68de76e756aen%40googlegroups.com.

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

[Jeremy Ruston]

> 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.

-- 
You received this message because you are subscribed to the Google Groups 
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/B007F351-61B4-42A1-92C5-B8B5A15BE1F5%40gmail.com.

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

[Finn Lancaster]

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!

-- 
You received this message because you are subscribed to the Google Groups 
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/256d930f-4c60-483e-b509-7788dc09bb99n%40googlegroups.com.