Selectable input fields - a work in progress

[BurningTreeC]

Hi community,

I'd like to show my selectable-inputs tiddlyspot page which is all about text inputs whose text-content can be changed using keyboard shortcuts like the down/up arrow keys

http://selectable-inputs.tiddlyspot.com/

It's a work in progress and I'd really like to work it out so that it can safely be used

It makes it possible to create input fields and textareas using a macro that gives them wings ... ;)

The page has a step-by-step how to and two demos in form of the search field in the sidebar and the tags input of tiddlers in edit mode

What do you think about it?

All the best,

BTC

[Mohammad]

Interesting! The search box I noticed lets you scroll among result and by pressing the enter it gets and passes the input for further processing.

One other point is the saveTiddler attribute, as it lets prevent auto-triggering other processes!

This will let's developer a lot of flexibility!

--Mohammad

[BurningTreeC]

Thanks Mohammad,

 

Interesting! The search box I noticed lets you scroll among result and by pressing the enter it gets and passes the input for further processing.

yeah, right! these actions are customizable

 

One other point is the saveTiddler attribute, as it lets prevent auto-triggering other processes!

I don't know about that, the saveTiddler is just a second tiddler that stores the text typed into the input field

```

<$edit-text tiddler="testtiddler" saveTiddler="testtiddler-save"/>

```

if typing into the input, both tiddlers get the same text, it triggers no further actions. the point is that if I set the testtiddler to something else through the actions of a keyboard widget, the saveTiddler still holds the original text.

that's useful as you'll notice in the tags dropdown if you filter tags by typing and then go up/down to select an item. the list stays filtered because it's filtered by the text stored in the saveTiddler.

I hope it's clear ^^

 

This will let's developer a lot of flexibility!

I hope so 

--Mohammad

 

[Mat]

BurningTreeC that would be a warmly welcome addition. Navigation via arrows is probably standard UI these days.

Considering how your solution makes things trigger from within the edit-text widget, would you say it could serve as an ingredient in the
Feature Request: Trigger Custom Popups via Custom Strings #3784 ? I.e does your solution necessarily read(?) the full edit-text field content or could it trigger from patterns in the middle of the field content? Prime example; could it give a dropdown list for "[[Bar" when typing "Foo [[Bar" and then again for "[[Frotz" in "Foo [[Bar]] [[Frotz" ?

<:-)

[BurningTreeC]

BurningTreeC that would be a warmly welcome addition. Navigation via arrows is probably standard UI these days.

Considering how your solution makes things trigger from within the edit-text widget, would you say it could serve as an ingredient in the
Feature Request: Trigger Custom Popups via Custom Strings #3784 ? I.e does your solution necessarily read(?) the full edit-text field content or could it trigger from patterns in the middle of the field content? Prime example; could it give a dropdown list for "[[Bar" when typing "Foo [[Bar" and then again for "[[Frotz" in "Foo [[Bar]] [[Frotz" ?

Hi Mat, do you mean revealing a popup/dropdown when typing something that matches one or more items of a given list? Like typing "hello" and it opens a popup if there are tiddlers whose titles contain "hello" ?

For simple input fields I can imagine that would work. For whole textareas or for the editor it's more complicated. An idea would be making the space key and maybe the backspace key additionally delete the content of the saveTiddler to inserting space / deleting ... then it could be possible

I don't know if it works, but surrounding the text-editor for example with a keyboard widget with space as the key and the actions an edit-text-operation that inserts space + an action that deletes the saveTiddler could be tried

It's an interesting idea, would be great if it worked somehow

[Mat]

BurningTreeC wrote:

Hi Mat, do you mean revealing a popup/dropdown when typing something that matches one or more items of a given list? Like typing "hello" and it opens a popup if there are tiddlers whose titles contain "hello" ?

Yes, that would be a possible application yes. The "given list" could be predefined strings (some kind of DataTiddler) and/or the set of all tiddler titles or, as you suggest, the string merely matches part of a tiddler title.

For simple input fields I can imagine that would work. For whole textareas or for the editor it's more complicated. An idea would be making the space key and maybe the backspace key additionally delete the content of the saveTiddler to inserting space / deleting ... then it could be possible

Yeah, "whole textarea" is the key because it would be used to access "anything" during the actual authoring of the text. But not sure what you mean with the space/backspace keys here. (Maybe I don't understand because I'm not a programmer.) Regardless, the request is to be able to type text, like this very sentence, and as you, mid text, begin to type some arbitrary but predefined string pattern e.g @Burn or [[Burni  it triggers a popup with arbitrary content (e.g a select list or reference info or whatever)

My question was promted when I, in your demo, read "In its heart it's an edit-text widget and the macro accepts all its attributes" which made me think that you had manipulated the edit-text widget to more generally trigger actions.

<:-)

[BurningTreeC]

BurningTreeC wrote:

Hi Mat, do you mean revealing a popup/dropdown when typing something that matches one or more items of a given list? Like typing "hello" and it opens a popup if there are tiddlers whose titles contain "hello" ?

Yes, that would be a possible application yes. The "given list" could be predefined strings (some kind of DataTiddler) and/or the set of all tiddler titles or, as you suggest, the string merely matches part of a tiddler title.

For simple input fields I can imagine that would work. For whole textareas or for the editor it's more complicated. An idea would be making the space key and maybe the backspace key additionally delete the content of the saveTiddler to inserting space / deleting ... then it could be possible

Yeah, "whole textarea" is the key because it would be used to access "anything" during the actual authoring of the text. But not sure what you mean with the space/backspace keys here. (Maybe I don't understand because I'm not a programmer.) Regardless, the request is to be able to type text, like this very sentence, and as you, mid text, begin to type some arbitrary but predefined string pattern e.g @Burn or [[Burni  it triggers a popup with arbitrary content (e.g a select list or reference info or whatever)

ok, meanwhile I made it work in textareas, too and tried some things in this direction. It seems to be possible. What would be great and necessary if doing it following this idea, is a insert-text tm-edit-text-operation that just inserts text at the cursor position/selection and moves the cursor to the end of the inserted text, without leaving a selection. The replace-text operation I'm using at the moment can't just insert a space without leaving a selected space, it's not like pressing the space-bar normally, sadly...

I can successfully write something and have those characters in a separate tiddler. then, when pressing a certain key, I'm using space but it can be any key-combo, what's stored in that separate tiddler gets deleted and if I type again, that will be newly stored in that separate tiddler.

That tiddler can be used to reveal a popup if its text matches something

Would be great to reveal the popup at the position where the cursor is, but that's a different task

 

My question was promted when I, in your demo, read "In its heart it's an edit-text widget and the macro accepts all its attributes" which made me think that you had manipulated the edit-text widget to more generally trigger actions.

The edit-text widget itself isn't manipulated that much, it's one hook that's added... it sends a message to my mechanism when tiddlers have changed and from within that message I can detect all those additional attributes and perform those refresh-actions if some conditions are given ... 

It now also works with the edit widget, what makes it work with the text-editor, too.

Both the saveTiddler and refreshTiddler attributes are required or it doesn't do anything. The refreshCondition should also be used because the mechanism does one of two things: it either updates the saveTiddler with the text that's being typed into the tiddler that's being edited. That's the standard action. But if the refreshTiddler changes AND the refreshCondition attribute is "true" or "yes" at that point, it doesn't touch the saveTiddler. If a refreshAction attribute is given, it performs a refresh-action (either focus-update, focus or nothing), then deletes the refreshTiddler automatically. So we can type text, have that text in both the edited tiddler and the saveTiddler, then perform an action on the edited tiddler but preventing that the saveTiddler changes, too...

<:-)

[TonyM]

Byc,

I have not played with this yet, so please excuse my ignorance but could the possible values be selected from a filter for example "[subfilder<defaultvalues>] +[subfolder<existingvaluesinfield>]"

regards
Tony

[Mat]

BurningTreeC wrote:

ok, meanwhile I made it work in textareas, too and tried some things in this direction. It seems to be possible.

HA! I did not expect you to actually look into this but it seems you also sense how extremely useful this would be if it worked :-D !!!!!!

 

What would be great and necessary if doing it following this idea, is a insert-text tm-edit-text-operation that just inserts text at the cursor position/selection and moves the cursor to the end of the inserted text, without leaving a selection. The replace-text operation I'm using at the moment can't just insert a space without leaving a selected space, it's not like pressing the space-bar normally, sadly...

No solution, but trying to understand (and maybe someone more knowledgable has ideas): When you say "space", you're referring to the space character " ", right?, as opposed to e.g the space/area that is currently typed at or perhaps the space/are after the replaced text is inserted. And you're saying that it, at the moment, not is possible to e.g type the triggering string "[[foo bar" because the space character makes things trigger already at "[[foo" ...and by continuing to type "bar", this overwrites wherever the "[[foo" is temporarily stored in some state type tiddler? Or is it that the to-be-inserted text must not contain a space character?

Might the editor Stamp tool solve this in any way?

 

Would be great to reveal the popup at the position where the cursor is, but that's a different task

Ah, yes. Later question.

Thanks for looking at this!

 <:-)

[BurningTreeC]

Hi Tony, yes therefor there's the filterTiddler attribute. Give it the title of a tiddler where you put your filter(s) (up to two) in the field(s) input-filter-1 and input-filter-2. You can use one or both or none of those fields, but without a filter there's not much action, there's no default.

In your filter you get the user-input through the <<userInput>> variable, so you can "[subfilter<defaultvalues>search<userInput>]" for example

[BurningTreeC]

BurningTreeC wrote:

ok, meanwhile I made it work in textareas, too and tried some things in this direction. It seems to be possible.

HA! I did not expect you to actually look into this but it seems you also sense how extremely useful this would be if it worked :-D !!!!!!

yes it would be great to have all in one! 

 

What would be great and necessary if doing it following this idea, is a insert-text tm-edit-text-operation that just inserts text at the cursor position/selection and moves the cursor to the end of the inserted text, without leaving a selection. The replace-text operation I'm using at the moment can't just insert a space without leaving a selected space, it's not like pressing the space-bar normally, sadly...

No solution, but trying to understand (and maybe someone more knowledgable has ideas): When you say "space", you're referring to the space character " ", right?, as opposed to e.g the space/area that is currently typed at or perhaps the space/are after the replaced text is inserted. And you're saying that it, at the moment, not is possible to e.g type the triggering string "[[foo bar" because the space character makes things trigger already at "[[foo" ...and by continuing to type "bar", this overwrites wherever the "[[foo" is temporarily stored in some state type tiddler? Or is it that the to-be-inserted text must not contain a space character?

yes exactly, I'm referring to the space " " character. I want to make pressing the space-bar on the keyboard insert the " " character and additionally trigger an action string

therefor a text-operation that doesn't select the replacement would be needed and I haven't found one that behaves like needed. I think the editor stamp tool also uses "replace-selection" which leaves a selected " " if inserting a space character. Then, when typing, the space gets replaced by the first typed character... that's not what we want here

the "[[foo bar" example wouldn't work when using space as the trigger, but the trigger can be any key-combination that works as a keyboard shortcut. the problem is when and how the text stored in the separate tiddler should be reset ... my idea was to reset every time the space character is pressed so that it never contains the whole text which would be contraproductive 

[BurningTreeC]

But also using the space bar it wouldn't work consistently ... just type something, don't press space, then klick another position in the text and type ...

[Mohammad]

Thanks BTC,

I follow up your discussion with Mat!

By the way, if auto-triggering can be changed by trigger on demand, it will give  lot of flexibility!

Best

Mohammad

[BurningTreeC]

@Mat , I think a different mechanism is needed for that popup-triggering. It believe it can be additionally implemented, but we'd need to figure out what the conditions are when it should catch in

[Mat]

BurningTreeC wrote:

@Mat , I think a different mechanism is needed for that popup-triggering. It believe it can be additionally implemented, but we'd need to figure out what the conditions are when it should catch in

Did you check out Snowgoons solution? As I believe is noted in that github request his solution doesn't adress the customizability aspects much. I'm guessing his solution could be modified to achieve your original intent but also to solve the issues we've discussed. He does have customizable triggers but not customizable popups. I can't tell if it solves your space character problem the way you want it to or just circumvents it.

<:-)

[BurningTreeC]

No I didn't take a closer look, I will

Can we move the discussion about that functionality to another thread and keep this here in line with the original one?

I believe otherwise we're drifting away from "selectable inputs" to "triggered popups in the text-editor" 

[BurningTreeC]

A little but exciting update on this

Yesterday Jeremy introduced a really cool mechanism to the core that allows subclassing of widgets,

which means any widget can be customized without the need to overwrite core javascript tiddlers

This plugin now uses that mechanism and the "Big note of Doom" is gone ;)

have a nice start to the week, btc

[@TiddlyTweeter]

BTC,

I like it a lot because it simplifies coding. I'm an amateur. Give me a macro already.

Good things

Josiah

[BurningTreeC]

BTC,

I like it a lot because it simplifies coding. I'm an amateur. Give me a macro already.

everyone likes simple things

there is a macro, it's called selectable-input, you call it <<selectable-input>> or <$macrocall $name="selectable-input"/>, the params are described at the page, examples are given, the most complex example are the $:/core/macros/tag-picker and the $:/core/ui/SideBarSegments/search tiddlers which are customized to make use of the selectable-input macro

I'm sure other useful macros can be built around it

Good things

Josiah

 

[admls]

Hi BTC,

This is fantastic! Is this coming to the core? It's such an intuitive ui feature that the lack of it in the core is pretty jarring.

Best wishes,

admls

[BurningTreeC]

Hi BTC,

This is fantastic! Is this coming to the core? It's such an intuitive ui feature that the lack of it in the core is pretty jarring.

Hi admls, no I don't think it comes to the core the way it's done here. From discussing with Jeremy I believe he has an idea how to make this happen, but it may take some time

This is the solution I've found and it works well once set up. I like that a lot of the handling is done using wikitext but it may appear a bit complicated

 

Best wishes,

admls