ViewTemplate for draggable checklist, editable paragraphs

Plugins
, ,
#1

Now all you need for a checklist is to tag a tiddler, triggering a ViewTemplate that turns every newline into a checklist item that can be dragged or deleted.

draggable-viewtemplate-screenshot
draggable-viewtemplate-screenshot1135×559 89.6 KB

The ViewTemplate has $draggable/$droppable widgets that split the text field at newlines into elements that can be drag/dropped to reorder. All of the text is stored in the text field; it gets split up and temporarily written into a data tiddler for dragging or a state tiddler for checkbox/editing before getting written back into the text field.

If a tiddler is tagged “$:/dragP” a menu button will be rendered for each paragraph that is the drag handle and also opens up an edit mode, see the example on the tiddlyhost site.

https://hoopy-wiki.tiddlyhost.com/#ReadMe%3A%20ViewTemplate%20checklist:[[ReadMe%3A%20ViewTemplate%20checklist]]%20[[ReadMe%3A%20ViewTemplate%20dragParagraph]]%20[[ReadMe%3A%20ViewTemplate%20draggable]]

6 Likes
#2

Thanks for sharing, similar soultions have being share previously. Yours sounds effective :nerd_face:

#3

Thank you. I don’t have much need for the draggable paragraphs. Cut-and-paste serves me fine for that.

But the simple checklist looks great! I like having the list in a dedicated tiddler; it just feels tidy. But I wonder if this could also have a macro/procedure to embed the rendered checklist inside another tiddler, while still handling the check/uncheck behavior? Something called like

Some text.
Some more text.
<<include-checklist "Shopping List">>
And more text.

to yield:

Some text.
Some more text.
image
And more text.

That would help gain some of the flexibility of other checkbox solutions while maintaining the simplicity of this version.

#4

very neat; I think I might get inspiration from this solution, apply it to the generic ViewTemplate but only look for [ ]- or [x]-prefixed lines.

In line with the conversation here, this seems to be easier to implement than modifying the parser in checklistdemo — a demo of the Checklist plugin for TiddlyWiki5 so that it generates the equivalent of <$draggable and <$droppable.

Well done!

#5

Nicely made.

If you don’t mind me asking, is it possible to do the same but based on content-type of a tiddler? I think for convience sake using a tag to activate it is the easier approach, but I am curious about it none the less!

#6

Thanks everyone. I was finding myself opening a blank tiddler and typing lists of things only to realize afterwards that, “oh, this should have been a checklist,” so simply needing to add a tag to convert it into a checklist was my goal.

That was relatively easy with similar examples out there, the draggability is what took a lot of synthesizing so I thought I’d share my solution.

The $draggable and $droppable widgets have “startactions”/“endactions” and “actions” attributes that can execute actions in a sequence to write stuff to and from a $:/temp tiddler.

A $list filter uses the operator “split” to break up the text, and the attribute “counter” to generate a value/index pair that get written into the $:/temp data tiddler. It is important to add zero padding to the “counter” variable because the reordering operations seem to get messed up when there are both 1-digit and 2-digit numbers.

The “counter”-ed index numbers also get written into the list field and are treated as a title list to do the reordering filter operations.

After the title list of indexes gets reordered, more actions rewrite the text field and delete the temporary fields and tiddlers that were created during the process.

My original solution just used “split” and “join” filter operators but then brackets in the target text would break when dragging so I had to use this more convoluted process with the data tiddler indexes as a title list.

#7

I haven’t dug into the implementation, but would sortan help you avoid the padding?

#8

I’m not sure. I’m using the “insertbefore” operator and without padding it would work fine if there were 9 or less items/indexes, but once it hits 10 the list order would come out completely off, like not just insertbefore-ing into the wrong spot or something. I don’t know what’s going wrong with that but inferred it had to do with 2-digit numbers getting involved so I added a “pad[2]” and that fixed things.

#9

I really like this!

Like @Scott_Sauyet , I wonder if this could

have a macro/procedure to embed the rendered checklist inside another tiddler, while still handling the check/uncheck behavior?

I also note that it is not possible to transclude the list and have it still be a checklist.

#10

This does work:

{{My checklist tiddler||$:/core/ui/ViewTemplate/body/draggable}}

But it isn’t very convenient!

In a procedure:

\procedure checklist(src)
<$tiddler tiddler=<<src>>>
<$transclude $tiddler="$:/core/ui/ViewTemplate/body/draggable" $mode="block"/>
</$tiddler>
\end

Only roughly tested in @hoopyfrood 's demo wiki, use with caution…

Fred

#11

Oh damn, I almost-tried that. I don’t use this syntax much, but thought I remembered it. Well I was close; I used | instead of ||. Ah well! Thanks, @tw-FRed!

1 Like
#12

I use it very often, but mainly applied to <<currentTiddler>> like this: {{||myTemplate}}.

Most of the time I have 2 templates for each type of tiddler:

  • A “full page view” with every details
  • A shorter, single line template, used inside list widgets as an itemTemplate, linking to the full view

Fred

#13

Currently @tw-FRed 's reply are the only ways to transclude as a checklist.

Perhaps there is a way to add to the default ViewTemplate so that any transcluded tiddlers with the “$:/checklist” tag get transcluded through the draggable template?

Or any other way to implement some kind of globally rendered selective transclusion through a template when tagged?