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

14 Likes
Conditional list-filter
Community Plugin Showcase on tiddlywiki.com
#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…

1 Like
#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…
#8

How do I adjust the width? I haven’t found a suitable method. Could you update an example in the documentation?

#9

Hi @TW_Tones and @dongrentianyu

Tonight I’ll update the plugin with some generic macros for simple panels.

Left | Right

Top Left | Top Right
--------------------
B. Left  | B. Right

and so on

2 Likes
#10

Hi @BurningTreeC congratulations, a very impressive piece of work. It is very elegant and usable, and works very smoothly. Given the universal appeal of the sidebar resizer I think it is a very strong candidate for inclusion in the core, if you’d be interested.

One thing that caught my eye was this line:

  tiddler="$:/metrics/storyright $:/metrics/storywidth $:/metrics/tiddlerwidth"

It feels a bit uncomfortable using an attribute named “tiddler” for a list of tiddlers.

Beyond that, I’m sure it will already be part of your plans, but more interactive examples would be very valuable.

4 Likes
#11

Hi @jeremyruston

I’d be very much interested to include the resizer in the core.
Let me just add the changes that are needed and some procedures that make it easier to use it out-of-the-box.

Tonight I’ll work on more interactive examples, so tomorrow we can have another talk :slightly_smiling_face:

But rather than maintaining this as a plugin, I’d love this to be in the core. I’m not very good at maintaining anyway.

5 Likes
#12

For everyone who’s interested, I’ve added some generic procedures and some examples on the plugin page to demonstrate their capabilities. I’m behind with documenting, sorry.

The procedures:

  • horizontal-split-panel
  • vertical-split-panel
  • three-column-panels

Just a note about how to transclude content within the panel areas:
The procedures accept leftContent, rightContent (centerContent) and topContent and bottomContent attributes that should be variable names or tiddler titles. If you have a good idea how to do this better, please let me know!

On the page you’ll also see an example of nested panels which I find pretty cool
Ah, and there’s Vincent Van Gogh with some new friends :grinning_face_with_smiling_eyes:

2 Likes
#13

The examples are great for showing the code how they can be used. But because the resizer is the same colour as the background, I found them poor for immediate usability (waving the mouse around the screen till it changes icon is not obvious usage)

Suggest setting a class on more of them, with some simple style example (maybe as little as
.example-panel .tc-resizer { background:#0001; } ) would do wonders for discoverability - and could be written as part of the examples different examples having different styles with the invisible resizers being at the end.

#14

Hi @nemo - it’s not been intended to have invisible resizers. They are just perfectly visible on my screens.
I’ve now changed some CSS, let me know if it works better!

#15

looks great! :+1: :+1:

1 Like
#16

Hi all,

I came across the need of a mediaquery filter operator that does:

<%if [mediaquery[(pointer: coarse)]] %>
Do this
<% else %>
Do that
<% endif %>

I’ve added this filter to the plugin.
Do you think that’s useful for you, too?

Best wishes,
Simon

#17

Yes,

I think this mediaquery filter operator is both very useful but also an exemplar of how to introduce a higher level of interaction between tiddlywiki and CSS. In this case through a filter operator.

  • I would like to see a more proactive approach to identifying how to extend tiddlywiki through more integration with its underlying technologies (HTML, CSS and JS) as this does. Such extensions may be placed in a special category so they don’t waist time for novices, but are obvious to developers and designers with experience.

Note:
I took your " Panel Examples" and exported it as a static HTML, whilst the resizer is visible it does not work in the static html. Perhaps if included in the core we can make this work through inclusion of more CSS?

  • I am not sure of the technical complexity here.

Speculation

  • Could we leverage css this way to automate page breaks in tiddlers we can print?
  • Could we expose the css calc for other purposes?

Love your work @BurningTreeC

1 Like
#18

Very good to see the examples! It is incredibly responsive!

One small point.
If you had a complex use of sliders on a Touch-Screen it would be easy to accidentally touch and move a resizer bar.

Any chance there could be a “Resizer Lock” button … meaning the resizer bars would become inactive?

A thought.

1 Like
#19

Hi @TiddlyTitch

You can do so by using the (undocumented) disable attribute, that, when set to yes, disables resizing

For example:

disable={{{ [[yes]mediaquery[(pointer: coarse)]mediaquery[(max-width: 768px)]] }}}
#20

Hi all,

now the resizer handles multi-touch, too. :partying_face:
On the page there are more examples…

Do you have any ideas for common use-cases / layouts we could pack into a generic procedure?

Thanks,
Simon