Click to edit code question

[TW Tones]

Folks,

Just working on a smart show code facility

I am using the following at the core of it

<$list filter="[conditions]" variable=nul>
<$codeblock code={{!!text}}/>
</$list>

Can anyone tell me how to make the resulting code block respond to a click, anywhere in the code block, to open the currentTiddler for edit?

Thanks in advance

TW Tones

[Saq Imtiaz]

Wrap it in a ButtonWidget.

[TW Tones]

Saq,

I understand that but the button imposes a class, which is not the codeblock.

So In need something else to do this.

I am looking into it now.

Tony

[Saq Imtiaz]

ButtonWidget, not button.

Use the tag attribute to create whichever element you need.

[TW Tones]

Saq et al..

I may be missing something, but the tag only permits one html tag, I need both `<code>` and `<pre>` and anyway other button class settings come into play like centre.

I will keep exploring the options but if someone has a working example i would be nice.

Basically how to wrap "anything" in a button, to get the trigger but not alter the appearance of the content of the button.

Regards

Tony

[Saq Imtiaz]

How can button CSS come into play when there is no button element?

<$button tag="div" actions=<<myactions>> >
<!-------content goes here-->
</$button>

or

<$button tag="pre" actions=<<myactions>> >
<!-------code goes here-->
</$button>

or

<$button tag=<<mytag>> actions=<<myactions>> >
<!-------content goes here-->
</$button>

[Mat]

TW Tones wrote:

Basically how to wrap "anything" in a button, to get the trigger but not alter the appearance of the content of the button.

I don't understand your question. You can wrap anything in a button and make the "button artifacts" invisible like this:

<button class="tc-btn-invisible">

and if you want the button label to appear like a link you add class tc-tiddlylink

<:-)

[TW Tones]

Thank mat and Saq

I will try again later/tomorrow. I believe I followed these patterns. I will try again and if it plays up I will do an image capture.

Thanks for your help.

Tonu

[Mark S.]

A somewhat different technique is to wrap the text in a <$link> widget, and then that in a <$linkcatcher> which has an "actions" attribute. The <$link> can also change it's rendered tag and tag whatever classes you assign. For me, the advantage was that the actions clause could distinguish when a user was clicking on the text, and when they were clicking on a link inside the text (but only for links to tiddlers, sadly).

[TW Tones]

Tanks Saq, Mat and Mark,

A fresh start this morning and it was trivial to fix, this is what I am using

<$button tag="div" message="tm-edit-tiddler" param=<<currentTiddler>> tooltip="Click to edit code">
   <$codeblock code={{!!text}}/>
</$button>

My Errors

• Spending too much time on the computer
• Not removing the problem code from a larger problem (testing separately a single component)
• Leaving some style CSS in the button after experimenting.

Thanks for you forbearance

TW Tones

[TW Tones]

Folks,

This is working quite nicely but I notice when I wish to highlight and copy part of the code displayed within the button that it also triggers the button to edit the code.

I could provide an override button, but wondering it is is possible to stop the button action when click and drag "selection" is taking place?

<$button tag="div" message="tm-edit-tiddler" param=<<currentTiddler>

>
tooltip="Click to edit code" style="font-size: 0.9em; border: 1px solid green;">

 <$codeblock code={{!!text}}/>
</$button>

My smart show code solution is almost finished,

Regards

Tony

Regards

Tony

[Mat]

TW Tones wrote:

[..] but I notice when I wish to highlight and copy part of the code displayed within the button that it also triggers the button to edit the code.

Are you complaining that "when I click on the button it triggers" ???  ;-) ;-) ;-)

<:-)

[TW Tones]

Mat

I'm not complaining just observing that click and click drag are not differentiated.

Perhaps it never is?

tont

[Mat]

TW Tones wrote:

I'm not complaining just observing that click and click drag are not differentiated.

But, as far as I know, it's not "click" vs "drag" - it is "click" vs "click and drag" since you need to click in order to drag.

One could, however, imagine that a button only fires on clickrelease as opposed to clickdown.

<:-)

[TW Tones]

Mat,

Exactly, come to think of it many apps including tiddlywiki toolbar buttons, if you click but don't release and drag the pointer away from the tiddler the click action does not occur. 

ie they only trigger on release if still on the button.

Regards

Tony.

[Mat]

TW Tones wrote:

Exactly, come to think of it many apps including tiddlywiki toolbar buttons, if you click but don't release and drag the pointer away from the tiddler the click action does not occur. 

ie they only trigger on release if still on the button.

Actually, testing it in TW, it seems to behave that way for a buttonwidget. So is your problem that the label is not selected (for copy)?

This seems to work:

<$button set="!!caption" setTo="aaa" style="cursor:auto; -webkit-user-select:text; -moz-select:text; -ms-select:text; user-select:text;">
Press me!
</$button>

<:-)

[TW Tones]

Mat;

That seems closer, I can not select the text without triggering open, but on release it opens. 

However you have provided a clue to how it may be handled,

Thanks