[ Demo ] : Floats - draggable resizable "popups"

[Saq Imtiaz]

So here is the next round of conference call background fiddling from earlier this week.

There is a very rough and quick proof of concept that I have probably spent at most an hour on in bits and pieces. Therefore please do not distribute or use for anything as it may spawn a Dalek and lead to the extermination of your wikis.

Concept: 

- be able to open tiddlers in floating "windows" that can be dragged, resized and still allow interaction with the content underneath. A bit like a hybrid between popups and modals.

- personally I want something like this for my Notation editor, as while it is really convenient in a modal that can be triggered with a keyboard shortcut, at times I wish to be able to access tiddlers in the river at the same time.

Video:

https://drive.google.com/file/d/1opCBSNl9yRK8dJuV5BLjN8KGE_-myLwl/view?usp=sharing

Demo:

https://saqimtiaz.github.io/sq-tw/floats.html

Further development notes and ideas are in the "notes" tiddler. Please do give it a quick read before providing feedback.

Cheers,

Saq

[Joshua Fontany]

Saq, I have been sitting on it until some of the other base level work for my wikis (like the new Oembed plugin) are in beta, but I have been really wanting to refactor the really excellent Mentat plugin. This UI hack of TW is one of the most impressive I've seen si far, but unfortunately doesn't use some of the core StoryList logic. These mods could be better integrated (& one of the Mentat sub plugins has a fix for popups disappearing offscreen when tho close to an edge).

https://thesherwood.github.io/Mentat/

https://github.com/theSherwood/Mentat

Best,
Joshua F

[Saq Imtiaz]

Hi Joshua,

Mentat looks interesting. Though to be clear what I'm looking for is to create draggable Tiddler containers (that I refer to as floats) independent of the StoryList. More like a floating popup that can be moved around and so that you can have an editor, reference docs or other tools at hand while working.

One of the things I did consider was to implement the floats as a separate story with their own StoryList and a custom storyview to make them appear over other content and draggable, resizable etc.

Regarding popups disappearing off the edge of the screen: it's intentional in the demo that you can drag past the edge of the screen but not entirely off the screen. And I think it would be handy to be able to optionally snap to screen corners. What needs handling is window resize, which could leave a float open but not visible.

Cheers,
Saq

[Birthe C]

Joshua,

Oh I hope you will refactor Mentat. It is wonderful.

Saq,

When I saw your floats, I also thought in Mentat direction but mostly of Volant. Tiddlers to be moved around and resized.

J.D also had a go here: http://j.d.volantis.tiddlyspot.com/

Birthe

[Saq Imtiaz]

So what's interesting is that the demo is actually a lot more generic. The base component of the Floats demo is a <$float> widget that can be used to make any tiddler draggable and resizable, along with a tm-float message to easily create floats.

What this identifies is the need for standardized re-usable components that can be used to make draggable, resizable containers, which can then be used to create UI's like mentat.

Though if the desire were to replace the storyriver with such a UI I would definitely look in the direction of a custom storyview.

[TW Tones]

Saq,

I agree a generic solution is needed, I can imagine floats could be immediately used on the Murri plugin for multi screen tiddlywiki "desktops".

Before I comment on this design please drop the attached Draft design for new window buttons that do something similar, but uses new browser windows instead which is great for multi-screen desktops and they can be moved outside the browser tab. The View and edit buttons work, with view/edit templates active in windows, the code button looks wrong and is non operative.

As you have already suggested though as soon as you get a "window handling" feature, in this case popup handling, some thought has to be given to window management. You are suggesting snap and drag to side etc... 

A float this tiddler button like the new window button would be nice.

I would think that the following would be useful ultimately within the float tool

• Close all
• Minimise all (to a tray ) like current drafts.
• Open, Close or minimise individual floats
• Respond the a background colour on the tiddler since they are almost post it notes

Other ideas may include allowing them to be brought forward or pushed backward. However I see value in the underlying features being deployed with more advanced features built independently to handle floating tiddlers.

• Actually this is where an alternate story view could use a empty background and all tiddlers are opened into a popup
• A long kept in pre-release beta of stackable windows 

You can see from my open in new window solutions that the same window handling would be useful and recent discussion about closing such spawned windows also helps.

Speculation,

• A set of window/popup tiddler management tools that could be used for popups and new windows alike would be a useful tool that could be leverage to do other tiddler window and story methods.
• This would need further abstraction to find a way to treat floats and external windows in a similar way. 
• Bringing modals or modal like operations into a float where the User may be forced to respond before they regain access to the rest of the wiki, heading and subheading and close options may be a nice option.

Regards

Tony

[Saq Imtiaz]

@Tony I don't have the ability to test our your attachment at the moment. However, creating a float with a given tiddler is as simple as:

<$action-sendmessage $message="tm-float" $param=<<currentTiddler>>/>

 

I would think that the following would be useful ultimately within the float tool

• Close all
• Minimise all (to a tray ) like current drafts.
• Open, Close or minimise individual floats
• Respond the a background colour on the tiddler since they are almost post it notes

These and more ideas are  listed in the "notes" tiddler (which I mentioned in my post).

Also, the structure of a float is based on a template in a tiddler. You can also specify a different template to use for any float.

Cheers,

Saq 

[TW Tones]

Saq,

No pressure from me but Testing my attachment in chrome is as simple as;

• Hit download on my attachment
• Open tiddlywiki.com in a tab
• Drag and drop the JSON file from the trey at the bottom of Google Chrome onto tiddlywiki.com.

To test,

• Open any tiddler and click on of the new icons on the View Toolbar.

As usual I will hack your solution as well, just saying about the possibilities that stem from this, without asking you to do anything.

Regards

Tony

[Saq Imtiaz]

@Tony cannot do as you suggest on a touch screen device.

[TW Tones]

Oh, Ok - but that is fine.

The looks like the last platform to address, I now have half a dozen rapid update and test methods.

I will share sometime.

Regards

Tony

[TW Tones]

FYI:

By the way the float is helpful on laptop/desctop but this solutions seems better for small devices, with a little customisations.

I thought I would try my buttons on a tablet, Chrome downloaded the json to documents, Import from Tiddlywiki allowed me to import it from documents.

"Wa La", the test is possible.

Then open in new window, to view, or Edit opens in a new tab, but editing the content of a tiddler in that tab is reflected instantaneously back in the Wiki's tab. This really makes editing tiddlers on a small device helpful by leveraging the tabs in the browser.

• They also work on a mobile, but pinch and zoom is not enlarging text, which would be nice for editing. 
• Also currently the navigation from a new window/tab is not altering the story. But this is fixable.

Regards

Tony

[Saq Imtiaz]

The idea behind floats is to provide an alternative way to show content outside the flow of the story river in the same browser window. For my use case this complements existing methods such as modals and opening in new window, both of which I already use for Notation.

As such I think discussion regarding the usage details of any solutions involving opening in new windows are better suited for a separate thread. Digressions such as this also make it harder in the future to find pertinent information in the group.

[Jon]

Just from an end-user's perspective, this looks pretty damn awesome and I do hope you get the time to finish it.

Regards

Jon

[Saq Imtiaz]

@Jon I am hopeful I can get this stable and tested without too much more effort, though adding the extra nuances and features listed in the notes may take longer.

[Jon]

Thanks, Saq, look forward to it.

Regards

Jon

[TiddlyTweeter]

Quick initial comments. Works well. I tested on a Windows touchscreen. Resizing, moving and stacking (I.e you can foreground one over another on click) work without issue so far. Very Good. Very practical for actual usage. Has needed flex.

Minor issues on sizing on touchscreen IF floated has scroll bar. Hard to target drag point easily.

This is definitely a keeper. 

Much appreciated!

Best wishes

TT

Cheers,

Saq

[Saq Imtiaz]

@TT thank you for the feedback. I tried for once to make sure this worked on touch screens, something I don't always think about with TW based solutions.

Regarding resizing, you're a step ahead. On Android tablets the resize handle isn't visible at all.

Currently the resizing is purely CSS based and I would like to get that to work reliably. If I can't I will resort to a JavaScript based implementation.

Which browser did you encounter the resize problem on btw?

Cheers,

Saq

[Mat]

This is excellent! Both under-explored and under-exploited in TW.

Could it be made into a story view? I.e have every tiddler in classic story view really be moveable by default?

I believe also BurningTreeC has done experiments with floating tiddlers. Maybe I misremember.

<:-)

[Birthe C]

Mat,

Is this the link http://muritest.tiddlyspot.com/

Birthe

[TW Tones]

Saq,

Sorry, I did not mean to hijack your thread. My key point is that modals, popups and Windows and 'active' SideBar Tabs, ultimately serve the same purpose (reposition content), while introducing different advantages and disadvantages and use cases. I would hope such solutions can be documented along side each other so the user gets to choose what is appropriate.

But what you created is very much fit for particular purposes, thanks.

Regards

TW Tones

[Saq Imtiaz]

@Mat as mentioned earlier, it can be reworked as a storyview and I did consider that direction. However it felt like overkill for what I wanted, which is floating containers in addition to the regular story river.

A story river with floating tiddlers should ideally have extra handling for relative positions of tiddlers etc. I would say that I might play around with that some day but I strongly suspect Joshua would beat me to it.