[TW5] edit-text widget with popup

[FrD]

Hi,

I've read in the doc (http://tiddlywiki.com/#EditTextWidget) that the edit-text widget can trigger a popup with the option focusPopup="PopupStateTiddler".

I've tried to use this construct but with no results. My goal was to have a popup appear with buttons to give a value to the field (via action-setfield) and a button to close the popup.

As there is no documentation or exemple in the doc, can anybody explain how to make this work ?

Thanks in advance.

FrD

[Jed Carty]

I had never noticed that before. The popup mechanism is the same as with the button widget, you can use something like:

<$edit-text tiddler='foo' popupFocus='bar'/>

<$reveal type='popup' state='bar'>
Something here
</$reveal>

although nothing has been staying visible for more than just a second.

I will poke it a bit more and see what I can do. Unfortunately the popup mechanism doesn't have very good documentation either.

[FrD]

Hi,

I managed to have it working. The code looks like :

<$edit-text tiddler="AuxTest" field="inputfield" focusPopup="PopupState"/>
<$reveal type="popup" state="PopupState" class="tc-popup-keep">
<div class="tc-drop-down">

{{PopupTiddler}}
</div></$reveal>

With a <$reveal> after the <$edit-text> it works; at least if you keep the mouse button down until you reach the popup !
PopupTiddler is displayed inside a popup. This tiddler has a button to close the popup by deleting the state tiddler as shown by Eric Shulman (https://groups.google.com/d/msg/tiddlywiki/Ggm1-oblWP8/ys4OZyYaEAAJ)

FrD

[FrD]

Hi Jed,

Thank you for looking at this.
I've posted just after you and didn't see your text. In fact I did try what you propose. It works (not as good as I thought) in Chrome but does not work in firefox; at least for me (firefow 41.0.2, windows 8.1)

FrD

[Jeremy Ruston]

Here’s a very simple example of a dropdown using focusPopup:

—

Editing TargetTiddler.

<$edit-text tiddler="TargetTiddler" tag="input" default="" focusPopup="$:/state/demo" class="tc-popup-handle"/>
<$reveal state="$:/state/demo" type="nomatch" text="" default="">
<div class="tc-block-dropdown">
<$linkcatcher to="TargetTiddler">
<div class="tc-dropdown-item">
[[A value to set]]
[[Another value]]
[[These links could be generated]]
[[by a list widget, too]]
</div>
</$linkcatcher>
</div>
</$reveal>

—

I’d welcome a documentation contribution on this.

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+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/22ffdfb8-9a08-44ad-a0b0-48628ea3409e%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[FrD]

Hi Jeremy,

Thank you for your answer. Your example works well.

The difference with the code I wrote is the class attribute of the edit-text widget.
I rewrote my use case with this class attribute in the edit-text widget and removed the class attribute of the reveal (which was "tc-popup-keep").
Now it's all good.

FrD

[Jed Carty]

This will be helpful for giving instructions instead of some of the other buttons I have been using.

[FrD]

Hi Jeremy,

I'm back on this topic.

How would I modify the code in order to set a field in the TargetTiddler (different from the text field) ?
The only way I found was to use buttons in the dropdown with <$action-setField ...>.
I was wondering if there is somethin much simpler like the use of the <$link> and <$linkcatcher> widgets.

Thanks

FrD

[Matabele]

Hi

Not sure exactly what you're looking for, but try something like this:

<$edit-text tiddler="$:/temp/input" tag="input" default="" focusPopup="$:/state/demo" class="tc-popup-handle"/>

<$reveal state="$:/state/demo" type="nomatch" text="" default="">

<div class="tc-block-dropdown">
<$linkcatcher to="TargetTiddler!!myfield">

<div class="tc-dropdown-item">
[[A value to set]]
[[Another value]]
[[These links could be generated]]
[[by a list widget, too]]
</div>
</$linkcatcher>
</div>
</$reveal>

Note: All I have changed is the TextReference of the 'to=' attribute of the $linkcatcher widget -- now points to a field

regards

[FrD]

Hi Matabele,

That's exactly what I was looking for. Thanks a lot. I should have tried that but believed that the "to" attribute had to be a tiddler.

FrD

[Tobias Beer]

Hi Matabele,

Not sure exactly what you're looking for, but try something like this:

I tried to add the class tc-popup-keep to the reveal, but the popup won't be sticky.

Any ideas how to make a reveal given focus by an edit-text-widget not close when clicking inside?

Best wishes,

Tobias.

[Tobias Beer]

Hi Matabele,

 

I tried to add the class tc-popup-keep to the reveal, but the popup won't be sticky.

Any ideas how to make a reveal given focus by an edit-text-widget not close when clicking inside?

I figured it out. It needs both classes tc-popup AND tc-popup-keep. 

Best wishes,

Tobias.

[William Jackson]

Hi Tobias

OK thanks — I’ll give this a try.

regards

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/kuq-FDMDWWg/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.

To post to this group, send email to tiddl...@googlegroups.com.

Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/5e7f3ea4-df2f-46e4-996c-e0b0555929e1%40googlegroups.com.

[Matabele]

Hi

Another simple mechanism to get a sticky popup for editing (the second reveal widget isn't necessary):

<$checkbox field="state" checked="edit" unchecked="hide"/>
<$reveal state="!!state" type="match" text="edit">
<$edit-text tiddler="target" field="text"/>
</$reveal>
<$reveal state="!!state" type="match" text="hide">
Click to Edit
</$reveal>

regards

[Tobias Beer]

Hi Matabele,

Nice tip, here's a slightly pimped up version:

\define check-edit()

<$vars currentTiddler="HelloThere">
<$vars state=<<qualify """$:/temp/check-edit/$(currentTiddler)$""">>>
<$checkbox tiddler=<<state>> field="text" checked="edit" unchecked="" class="check-edit">{{$:/core/images/edit-button}}</$checkbox> <$link><$view field="title"/></$link>
<$reveal state=<<state>> type="match" text="edit">
<$edit-text tiddler=<<target>> field="text" class="tc-edit-texteditor" minHeight="200px" autoHeight="yes"/>
</$reveal>
</$vars>
</$vars>

\end

<<check-edit>>

<style>
.check-edit input{display:none;}
.check-edit svg{fill:grey;height:1em;width:1em;curser:pointer;}
.check-edit:hover svg{fill:black;}
</style>

Best wishes,

Tobias.

[Matabele]

Hi Tobias

Nice -- I have a couple of applications for this version.

regards

[Tobias Beer]

Hi Matabele,

 

Nice -- I have a couple of applications for this version.

One thing I am not sure about with this is:

There is no "click to save" or "cancel" here.

So, this feels quite unsafe as an editor.

I'll see if I can't have tobibeer/inc (alternatively) use an inline ui

...with the appropriate buttons save and cancel buttons...

and I'm thinking I'll actually make the inline editor be the default.

If one wants the full editor, one clicks the link to open it.

Also, the state handling wasn't quite right,

so I updated the above example once more!

Best wishes,

Tobias.

[Matabele]

Hi Tobias

The application I had in mind is for entering data, beginning with a blank form. I prefer pop-up type edit-text boxes, as I have several different sections of the form into which to enter data. I 're-use' the same edit-text box to enter data into each section of the form -- by simply switching the target field. I want quick and efficient -- click to save and cancel aren't therefore an issue.

regards

[Tobias Beer]

Hi Matabele, 

The application I had in mind is for entering data, beginning with a blank form. I prefer pop-up type edit-text boxes, as I have several different sections of the form into which to enter data...

Be so kind as to post an example at some point,

for us to have a look at how your overall editing process works.

Best wishes,

Tobias.

[Alex Hough]

a possible use case would be to edit an image in situ. I've tried the code with a png drawn in TW, but it gets opened as data no the image

I drew a picture and used it to create a thumbnail using the thumbnail macro. It would be nice to update a image without opening it and for that image to propagate though to the thumbnail.

best wishes

Alex

--

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+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.

Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/c467c512-546b-4393-8005-f1aa1e431d5b%40googlegroups.com.