YAR - yet another resizer

Plugins
,
#1

Hello dear TiddlyWikians!

Yes, that’s right, yet another resizer is coming to the town! :blush:

This time it’s a multi purpose Javascript resizer widget
I’m actively developing this to become universally usable
In the plugin the widget is used to resize the sidebar and the tiddler preview
The widget can resize horizontally and vertically
I hope I got the documentation right and that the widget lives up to the standards the documentation promises

Have a look if you find the time and let me know how it works for you!

Thanks and best wishes,
Simon

11 Likes
#2

Nice! How do I see what you mean by horizontally?

#3

Hi @DaveGifford

you probably mean vertically. I haven’t added any examples for that yet
Should do so, should do so…

#4

Yeah I was picturing a horizontal line…

#5

@DaveGifford

I’ve added some examples on the page (second tiddler)

1 Like
#6

Nice demo! I think having a unified tool for this is fantastic. I can see how it will be useful in building other interfaces down the line (such as in presenting parallel columns with transclusions that make it hard to column-balance elegantly in advance — just allowing the viewer to drag the column border will save me trying to set up some convoluted and fragile optimizing-solution.)

I’ve installed it at quick-demo — and have noticed a couple quirks (and not enough time to troubleshoot further today).:

  • Somehow my sidebar suddenly widens a bit when I open the control panel in the story river… Or rather, opening the control panel makes the story river get thinner. This happens unless the control panel is on the “saving” tab…, quite perplexing. And also: This happens only in Chrome, not in Safari… Widths jumps back to normal when I close the control panel.

  • Opening the shadow tiddler for the sidebar template causes double-rendering, off diagonally by a few pixels (and I see it doesn’t do that on your demo site). Somehow, it’s not playing nice with other modifications I’ve made to my sidebar (mostly about spacing; other css seems to be identical).

  • Understandably, your edit-preview resizer isn’t designed to work with the CodeMirror plugin, so it has no effect there — which is actually one of the main draws for me. (Meanwhile, for reasons I don’t fully understand, trying to disable CodeMirror is leaving me with no edit interface; the plugin just isn’t disabling itself nicely enough — so there’s a different thing for me to troubleshoot.)

For now, I’ve your resizer it up at quick-demo, in case you want to have a look and see how/why it behaves a bit differently in that environment.

#7

This looks great, in particular because it provides a generic solution.

The sidebar is a common need and this seems more reliable than previouse solutions, installing resizer delivers the sidebar resizer out of the box but can be used to build other resizable “objects”.

  • It has the issue of overwriting core tiddlers,
    • perhaps we should leverage an alternate layout/page template to avoid this?
    • Or perhaps alternative “view template Body” and “View Template subtitles” used if a sidebar resizer config tiddler is set to yes. I can build this for you @BurningTreeC if you want?

As I try to come to terms with this I can see that the $resizer widget primarily manipulates a size value in a nominated configuration tiddler and is CSS size format aware. If tiddlywiki is aleady using such a configuration tiddler and the appropriate CSS is known we can modify existing tiddlers as the sidebar resizer does $:/core/ui/EditTemplate/body/default and $:/core/ui/PageTemplate/sidebar.

  • Note: It is not easy to determin what changes were made to allow this, the Difference view is not working because of the shadow overwrite, by a plugin shadow tiddler.

However if we want to build other resizable objects as in the examples given quite a lot needs to be done to build the containers and define the CSS to achive it. This is quite a large scope if we wanted to document it, so I understand why it is not.

Supporting elements

This makes me wonder if a set of html/css classes and tags could be provided in the plugin for common use requirements, as in the examples, including one that helps verticaly resize tiddlers. The user can then use shared config tiddlers or qualified tiddlers against a named html element or class.

  • This would allow this effective resizer to be used without the need to write all the CSS.
  • Although it would call for a library of resizable objects/elements to be developed.
  • In a manner similar to @Mohammad Shiraz cards etc…