[tw] [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 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

Post by Jed Carty
I had never noticed that before. The popup mechanism is the same as with
<$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

Post by 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

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

Post by FrD
Hi,
<$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 <https://groups.google.com/d/msg/tiddlywiki/Ggm1-oblWP8/ys4OZyYaEAAJ>)
FrD
Hi,
I've read in the doc (http://tiddlywiki.com/#EditTextWidget <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
--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
Visit this group at http://groups.google.com/group/tiddlywiki <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 <https://groups.google.com/d/msgid/tiddlywiki/22ffdfb8-9a08-44ad-a0b0-48628ea3409e%40googlegroups.com?utm_medium=email&utm_source=footer>.
For more options, visit https://groups.google.com/d/optout <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

Post by Jeremy Ruston
—
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.
Hi,
<$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

Post by 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

--
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
<javascript:>.
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
<https://groups.google.com/d/msgid/tiddlywiki/22ffdfb8-9a08-44ad-a0b0-48628ea3409e%40googlegroups.com?utm_medium=email&utm_source=footer>
.
For more options, visit https://groups.google.com/d/optout.

[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

Post by 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

[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
<http://tiddlywiki.com/#PopupMechanism> 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,

Post by Tobias Beer
I tried to add the class tc-popup-keep
<http://tiddlywiki.com/#PopupMechanism> 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

On 10 January 2016 at 3:18:17 PM, Tobias Beer (***@gmail.com) wrote:

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.
--
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 ***@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.
For more options, visit https://groups.google.com/d/optout.

[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

Post by FrD
Hi Matabele,

Post by Tobias Beer
I tried to add the class tc-popup-keep
<http://tiddlywiki.com/#PopupMechanism> 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.

[Tobias Beer]

Hi Matabele,

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

\define qualifyState() <<qualify $:/temp/check-edit/$(currentTiddler)$

<$vars currentTiddler="HelloThere">
<$vars state=<<qualifyState>>>
<$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>
<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

Post by FrD
Hi Matabele,

[Tobias Beer]

Hi Matabele,

Post by 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
<http://tobibeer.github.io/tw5-plugins/#inc> (alternatively) use an inline
ui
...with the appropriate buttons save and cancel buttons.

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

Post by Tobias Beer
There is no "click to save" or "cancel" here.
So, this feels quite unsafe as an editor.

[Tobias Beer]

Hi Matabele,

Post by 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

Post by FrD
Hi Matabele,

Post by 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.
--
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
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
<https://groups.google.com/d/msgid/tiddlywiki/c467c512-546b-4393-8005-f1aa1e431d5b%40googlegroups.com?utm_medium=email&utm_source=footer>
.
For more options, visit https://groups.google.com/d/optout.

[Jed Carty]

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