Live playground for filter operator examples on tiddlywiki.com

Community Projects Documentation
#1

I had the idea of making the filter operator examples on tiddlywiki.com into a “live” playground. All the examples already have a “Try It” button which executes the filter example and toggles the button text to “Hide”. I thought it would be convenient to change the filter text into an edit-text widget after the “Try It” button is clicked. That way the filter examples can be changed on-the-fly.

I implemented my idea (see the attached $ _editions_tw5.com_operator-macros.json (2.0 KB) tiddler). Download the attachment and drop it onto https://tiddlywiki.com/#:[tag[Operator%20Examples]]) and import it. Then click the “Try It” in any of the filter examples.

I’m thinking of making a pull request and decided to seek some feedback here first.

Some notes:

  1. Every time “Try it”/“Hide” is toggled, the edit-text is replaced by the original filter text. So any user modifications are lost.
  2. Ctrl-z inside the edit-text doesn’t undo typing changes. I haven’t yet tried to figure out why. Ctrl-z in the Advanced search text boxes works fine for undo.

Here are the changes I made to the macro:

diff --git a/editions/tw5.com/tiddlers/system/operator-macros.tid b/editions/tw5.com/tiddlers/system/operator-macros.tid
index df917402b..2fc4e1952 100644
--- a/editions/tw5.com/tiddlers/system/operator-macros.tid
+++ b/editions/tw5.com/tiddlers/system/operator-macros.tid
@@ -7,23 +7,29 @@ tags: $:/tags/Macro
 
 \define .operator-example(n,eg,ie)
 <div class="doc-example">
-`$eg$`
-<$macrocall $name=".if" cond="""$ie$""" then="""<dd>&rarr; $ie$</dd>"""/>
 <$list filter="[title<.state-prefix>addsuffix{!!title}addsuffix[/]addsuffix[$n$]]" variable=".state">
 <$reveal state=<<.state>> type="nomatch" text="show">
+	`$eg$`
+	<$macrocall $name=".if" cond="""$ie$""" then="""<dd>&rarr; $ie$</dd>"""/>
 	<dl>
-	<dd><$button set=<<.state>> setTo="show">Try it</$button></dd>
+	<dd><$button actions="""<$action-setfield $tiddler=<<.state>> text="show" filter=<<__eg__>>/>
+""">Try it</$button></dd>
 	</dl>
 </$reveal>
 <$reveal state=<<.state>> type="match" text="show">
+	<div class="tc-search tc-advanced-search">
+	<$edit-text tiddler=<<.state>> field="filter" tag="input" type=search/>
+	</div>
 	<dl>
 	<dd><$button set=<<.state>> setTo="">Hide</$button></dd>
 	</dl>
+	<$list filter="[<.state>get[filter]]" variable=".filter">
 	<blockquote class="doc-example-result">
-	<ul><$list filter="""$eg$""" emptyMessage="(empty)">
+	<ul><$list filter=<<.filter>> emptyMessage="(empty)">
 	<li><$link><$view field="title"/></$link></li>
 	</$list></ul>
 	</blockquote>
+	</$list>
 </$reveal>
 </$list>
 \end

I just noticed there is a somewhat related discussion about the .operator-example macro and its somewhat inconsistent use:

2 Likes
#2

Neat idea. Perhaps a “reset” button next to “hide” would be handy.

Would also set the input to grab focus automatically and not use the search related class names.

#3

@saqimtiaz , thanks for the feedback! I implemented your suggestions. See Comparing Jermolene:tiddlywiki-com...btheado:filter-operator-live-playground · Jermolene/TiddlyWiki5 · GitHub

I plan to make a pull request after I troubleshoot the issue with ctrl-z/undo not working. I suspect the dom input element is getting recreated and the undo history is getting lost, but I’m not sure.

With the reset button, the undo is not as important, so even if I don’t figure it out, I will still make the pull request.

#4

Perhaps post this as an Issue now to get thoughts from Jeremy and others before you put in more work.

Ctrl+Z does seem to work to undo typing for me. Perhaps describe the exact steps needed to recreate the situation in which it fails?

One of the most common scenarios in which DOM nodes get re-rendered when you don’t expect it, is when they are surrounded by a widget setting a variable and that variable changes.

#5

It was not working for me in Firefox. I discovered it worked fine in Chrome. I also discovered if I replaced use of a $list widget with a filter transclusion then the undo works even in Firefox.

I created a pull request at Make filter operater examples live-editable by btheado · Pull Request #6139 · Jermolene/TiddlyWiki5 · GitHub