Simple checklist macro

1

As I’ve been working on my TiddlyWiki fluency, I sometimes yearned for a simple checklist macro for small lists. I use my own homegrown Getting Things Done system in TiddlyWiki (a potential topic for a future post!), but it’s nice to have a little checklist for packing lists or other small sets of tasks. Enter $:/phajas/macros/checklist:

$__phajas_macros_checklist.json (974 Bytes)

Drag this into a TiddlyWiki, and try to use it like this in a Tiddler:

<<checklist>>

You’ll get a simple checklist with an input field and add button. It was fun learning about the $keyboard widget to enable rapid entering of checklist items. It uses the checked, checklist, and inflight-checklist-input fields on the tiddler embedding the macro.

2

Nice, simple, elegant. Although I have others already in use, I would prefer this one to not have the extra line between, easy to change.

Thanks for sharing to the community.

3

Hi Peter,

I think you have added unnecessary complexity to your code. The below works

\define add-item()
<$action-listops $field="checklist" $subfilter="[{!!inflight-checklist-input}]" />
<$action-deletefield $field="inflight-checklist-input"/>
<$action-sendmessage $message="tm-focus-selector" $param=".ChecklistInput"/>
\end

\define short-checklist()
<$keyboard key="enter" actions=<<add-item>> >
<$edit-text class="ChecklistInput" field="inflight-checklist-input"/>
</$keyboard>
<$button actions=<<add-item>> >Add</$button>

<$list filter="[list[!!checklist]]" variable=item>
<$checkbox listField="checked" checked=<<item>> >
<<item>>
</$checkbox><br/>
</$list>
\end

I renamed the checklist to short-checklist

You can learn from Kara in kookma plugin library.

4

Nice little hack for both of your codes.
But, if you edit the tiddler containing the checklist, all selections are cleared. Checked items do not seem to be saved somewhere in the wiki.

5

I don’t think so. The cheklist is stored in a field and as far as you keep that field, checklist works.

If you like to store the items in another tiddler say mychecklist-tiddler call macro like this.

<$tiddler tiddler="mychecklist-tiddler">

<<short-checklist>>
</$tiddler>
6

This is really cool, though I do have one question
Is there a way to create a btn to remove an item? I’m not sure how to target a specific segment of text within a field unfortunately

7

This is a KISS solution, but you can use css and use better filters.
Change your $list widget as below

<$list filter="[list[!!checklist]]" variable=item>
<$button class="tc-btn-invisible">{{$:/core/images/delete-button}}
<$action-listops $field="checklist" $subfilter="-[<item>]"/>
<$action-listops $field="checked" $subfilter="-[<item>]"/>
</$button>
<$checkbox listField="checked" checked=<<item>> >
<<item>>
</$checkbox><br/>
</$list>
8

That works perfectly, honestly

9

I like this.

For those that want to show active and completed, here is the same code with more separation between checked and unchecked

\define add-item()
<$action-listops $field="checklist" $subfilter="[{!!inflight-checklist-input}]" />
<$action-deletefield $field="inflight-checklist-input"/>
<$action-sendmessage $message="tm-focus-selector" $param=".ChecklistInput"/>
\end

\define delete-item()
<$action-listops $field="checklist" $subfilter="-[<item>]"/>
<$action-listops $field="checked" $subfilter="-[<item>]"/>
\end

\define check-item()
<$action-listops $field="checked" $subfilter="[<item>]" />
<$action-listops $field="checklist" $subfilter="-[<item>]"/>
\end

\define uncheck-item()
<$action-listops $field="checklist" $subfilter="[<item>]" />
<$action-listops $field="checked" $subfilter="-[<item>]"/>
\end

\define checklist()
<$keyboard key="enter" actions=<<add-item>> >
<$edit-text class="ChecklistInput" field="inflight-checklist-input"/>
</$keyboard>
<$button actions=<<add-item>> >Add</$button>

<$list filter="[all[current]has[checklist]]">
__Active__<br/>
<$list filter="[list[!!checklist]]" variable=item>
<$button class="tc-btn-invisible" actions=<<delete-item>>>{{$:/core/images/delete-button}}</$button>
<$checkbox listField="checked" checked=<<item>> checkactions=<<check-item>> >
<<item>>
</$checkbox><br/>
</$list>
</$list>

<$list filter="[all[current]has[checklist]has[checked]]">
<hr/>
</$list>
<$list filter="[all[current]has[checked]]">
__Completed__<br/>
<$list filter="[list[!!checked]]" variable=item>
<$button class="tc-btn-invisible" actions=<<delete-item>>>{{$:/core/images/delete-button}}</$button>
<$checkbox listField="checked" checked=<<item>> uncheckactions=<<uncheck-item>> >
~~<<item>>~~
</$checkbox><br/>
</$list>
</$list>
\end
10

I liked this thread a lot, so I packaged it up as a plugin with a few enchancements.

The Field-based Check List plugin is a basic, simple and flexible TiddlyWiki plugin used to generate orderable lists or checklists (using drag and drop ).

It sets itself apart from other similar solutions by storing its list items in tiddler fields rather than using tiddlers for each list entry.

image
image1686×898 99.1 KB

11

Hi @fastfreddy
I like your plugin but I would like to increase the spacing/padding ? between the checkbox and each list entry and edit icon and delete icon.
Could you please tell me what is needed to be changed in the stylesheet tiddler to achieve this.
Thanks for the plugin.

12

If you just want to change the padding around the text, you might add padding: 0 .35em to the .fbcl declaration. But there does not seem to be a CSS hook at a higher level (@fastfreddy: would it make sense to add .fbcl or fbcl-group or similar to the tc-links-draggable-list span?), so if you want to target the edit/delete buttons as well, we have to get a bit more creative.

Here’s one version that seems to work (only lightly tested):

button:has(.fbcl) {
  .fbcl {padding: 0 .35em;}
  &+button {padding: 0 .25em;}
}

or, as I originally wrote it:

.tc-links-draggable-list:has(.fbcl) li.tc-droppable button {padding: 0 .35em;}
13

Hello @Scott_Sauyet,
thank you for your help,

Sorry for the delay in replying, your solution worked for me.

14

more than happy to try @Scott_Sauyet. Is simply adding this style the best approach in your opinion?
→ <span class="tc-links-draggable-list fbcl">
in \procedure list-filter-draggable definition
in $:/plugins/phiv/field-based-checklist/list-filter-draggable

I am trying to find out the underlying compatibility issue between @BurningTreeC My TiddlyWiki — a non-linear personal web notebook and this plugin. Any pointer would help me save a bit of time…

15

Maybe, but if you reuse the same class name you have for the item text, you will probably also have to change your CSS a bit. If you use something like .fbcl-list, nothing else would need to change.

I’ll try to look when I’m on a computer, but I don’t have real experience with multicol. What’s the incompatibility?

16

Released v.0.0.4 that should address this need. Thanks for the tips!

All of the checklists disappear when the murri layout is selected… very odd… They seem to disappear from the DOM even:

image
image2007×1059 190 KB

vs

image
image2021×1080 255 KB

17

Oh, that is bizarre! I’m afraid I have no expertise that might help. You might need to check with @BurningTreeC .

18

I think I managed to fix the incompatibility by adding the legacy $:/tags/Macro tag in addition to the more modern $:/tags/Global where the procedures are defined. Released plugin’s version 0.0.5 this day.

19

v.0.0.6 Field-Based Checklist — A list and checklist generator plugin

  • users can now choose numbered or un-numbered lists
  • users can now choose to show checked items at the bottom, top or in the user-defined order

image
image1875×1200 260 KB

20

v.0.0.7 Field-Based Checklist — A list and checklist generator plugin

  • users can now choose to show or hide checked or unchecked items.

(my shopping list was getting unwieldy large yet only a few items needed buying, so this features shows me only items I actually need to buy, perfect for small mobile screen)

Compare with above:

image
image1888×1245 313 KB