Making the Krystal Storyriver sortable by drag and drop

1

Hi,
I am tinkering a mod of Crazko’s Krystal-Plugin for a horizontal storyriver which turns this into a switchable layout.

http://szen.io/horizont/

The horizontal view is very good for sorting idea’s so it would be perfect to be able to sort them by drag and drop. I tried to implement this in the storyriver ($:/plugins/krystal/story) there.
But somehow the currentTiddler-Variable seems to be empty so that the actionTIddler always appears at the end.
Any ideas how to debug this?

Best wishes Jan

\define drop-actions()
<$action-listops $tiddler="$:/StoryList" $subfilter="+[insertbefore<actionTiddler>,<currentTiddler>]"/>
<$action-setfield $tiddler="test" text=<<currentTiddler>>/>
\end
\whitespace trim
<$droppable actions=<<drop-actions>> > >
<$draggable tiddler="actionTiddler">
<section class="tc-story-river krystalriver" style="height:100vh; overflow-y: hidden !important;">

<$list filter="[list[$:/StoryList]]" history="$:/HistoryList" template="$:/core/ui/StoryTiddlerTemplate" storyview={{$:/view}} emptyMessage={{$:/config/EmptyStoryMessage}}/>

</section>
</$draggable>
</$droppable>
2

You need a separate droppable widget around each tiddler in the story, where the current tiddler variable is set to the value of that tiddler.

Similarly you need a separate draggable widget around each tiddler in the story if you want them to be directly draggable, and the tiddler attribute of the draggable widget needs to be set to the title of that tiddler.

3

Thank you @saqimtiaz , the drag and drop works fine now…

but somehow I stepped into a formatting-problem because I could not use the elegant template attribute of the listwidget.

\whitespace trim
\define drop-actions()
<$action-listops $tiddler="$:/StoryList" $subfilter="+[insertbefore<actionTiddler>,<currentTiddler>]"/>
\end
<section class="tc-story-river krystalriver" style="height:100vh; overflow-y: hidden !important;">
<$list filter="[list[$:/StoryList]]" history="$:/HistoryList"  storyview={{$:/view}} emptyMessage={{$:/config/EmptyStoryMessage}}>
<$droppable actions=<<drop-actions>> >
<$draggable tiddler="actionTiddler">

{{||$:/core/ui/StoryTiddlerTemplate}}

</$draggable>
</$droppable>
</$list>
</section>

I have already used a lot of clumbsy contructions like <$list filter="[currentTiddler]" template="$:/core/ui/StoryTiddlerTemplate"/> to get the correct formatting but nothing worked.

4

…using this I get the correct format again but loose the drag drop abilities…

\whitespace trim
\define drop-actions()
<$action-listops $tiddler="$:/StoryList" $subfilter="+[insertbefore<actionTiddler>,<currentTiddler>]"/>
\end
<section class="tc-story-river krystalriver" style="height:100vh; overflow-y: hidden !important;">
<$list filter="[list[$:/StoryList]]" history="$:/HistoryList"  storyview={{$:/view}} emptyMessage={{$:/config/EmptyStoryMessage}} template="$:/core/ui/StoryTiddlerTemplate">
<$droppable actions=<<drop-actions>> >
<$draggable tiddler="actionTiddler">

<$transclude/>

</$draggable>
</$droppable>
</$list>
</section>

Seems that drag does not work with this construction…

5

Try this:

\whitespace trim
\define drop-actions()
<$action-listops $tiddler="$:/StoryList" $subfilter="+[insertbefore<actionTiddler>,<currentTiddler>]"/>
\end
<section class="tc-story-river krystalriver" style="height:100vh; overflow-y: hidden !important;">
<$list filter="[list[$:/StoryList]]" history="$:/HistoryList"  storyview={{$:/view}} emptyMessage={{$:/config/EmptyStoryMessage}}>
<$droppable actions=<<drop-actions>> tag="div">
<$draggable tiddler=<<currentTiddler>> tag="div">
{{||$:/core/ui/StoryTiddlerTemplate}}
</$draggable>
</$droppable>
</$list>
</section>

If that doesn’t work, please post a screenshot showing the formatting issues that you mention.

6

Thanks @saqimtiaz,
I pasted your solution, it is difficult to capture the problems in a screenshot:
So here’s a verbal description:

  • the Tiddlers are too short,
  • Crazko’s display of the titles of the offscreen-Tiddlers as vertical stripes does no longer work.

if you may have a look: Krystal — an experiment with a horizontal story (formatproblem)
vs. Krystal — an experiment with a horizontal story for the display as it should be…

8

I think the problem is just that the HTML structure of the tiddlers is no longer the same after wrapping the draggable and droppable widgets and therefore the CSS is not being properly applied.

Two possible ways to approach it. Modify the tidder template and place the draggable and droppable widgets inside it. Or modify the CSS to work with the new HTML structure. The latter would probably be more robust.

9

Hi Saq, thanks a lot. But I did not make any advances:

Taking your first approach and fiddling in the droppable into a new $:/plugins/krystal/StoryTiddlerTemplate again the krystal-specific formatting is lost.

The css is hard to reverse-engeneer because some of the classes seem to be applied by js.

What is astonishing me is that here <$transclude/> does not create a working dropzone whereas {{||$:/core/ui/StoryTiddlerTemplate}} does… Could this be a question of tags?

10

You need the droppable widget inside $:/core/ui/ViewTemplate or a clone of it that you use as the view template.

The problem really is that the JS and CSS depend on a particular HTML structure, and we need to change the HTML to get the drag and drop behaviour that you want. I cannot say more without taking the time to deconstruct the plugin and honestly it might at that stage be easier to start from scratch.

11

Seems you are right: Even inserting the droppable deep down in the $:/core/ui/ViewTemplate destroys the html in a way that the Krystal css are no longer working.

12

This is as far as I could get with some quick tinkering with templates:

https://saqimtiaz.github.io/sq-tw/temp/brokenformat.html

13

Cool! Thank you! I made a version where I turn only the left edge (pink for demo purposes) of the Tiddlers and the titles into dropzones. What do you think is better?

14

It is hard to say without playing with and seeing what is useful in practice.

I do suggest not using a draggable widget around each tiddler though, and using the tiddler titles as the thing to drag. The problem with making the entire tiddler draggable is that it becomes impossible to select text inside them.

15

So at last there is a working solution with drag and drop.

I would say this mod now has made the way to the final aim

:flushed: Bug repaired, now it should be working

Thanks for the help, @saqimtiaz

16

Just had a quick look. That is very cool!