YAR - yet another resizer

Plugins
,
#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

#21

I suspect you may not have noticed my CodeMirror note above, since it hasn’t gotten any engagement at all.

The incompatibility seems to revolve mostly around codemirror-6… But in the process of troubleshooting, I want to raise a GENERAL concern:

  • IF a plugin includes a shadow that replaces part of the core, such as $:/core/ui/EditTemplate/body/default … surely this should NOT happen without a clear breadcrumb trail. Both my (older) version of codemirror-6 and the @BurningTreeC resizer plugin had shadows trying to override this same core tiddler — and it was hard to tell which was active!
  • (It’s true that the “override shadow” warning text $:/language/EditTemplate/Shadow/Warning normally appears at the top of the edit window to indicate This is a shadow tiddler. Any changes you make will override the default version from the plugin... … This banner at the top of edit-mode window would have been helpful, but it was getting bypassed because codemirror and/or some other plugins had disrupted (wait for it…) the default edit template cascade :grimacing: )
  • When plugins override tiddlers in the core (or at least ones whose alteration might foreseeably disrupt a wiki), should they include a standard FIELD in that tiddler that identifies the source of this shadow, including a link to the plugin tiddler? (Maybe there’s some other metadata that we could have best practices about, for pivotal core-displacing tiddlers in a distributed plugin — such as “designed/tested for core v5.x.x through 5.x.x”.)

ANYWAY, back to Codemirror – Resizer conflict: Even on a stripped-down site, most recent TW, most recent version of plugins (where codemirror-6 v3.9.2 now no longer seems to be simply overriding that core shadow in parallel to the @BurningTreeC overwrite), I still see weird behavior (different versions of weird that seem to morph before I can reproduce them neatly — but none of them good). At the very least, it’s nearly impossible to get edit and preview to appear simultaneously (and edit pane was buggy the one time I was able to get it to draw to left of preview pane).

It’s probably inevitable that sometimes one plugin is ineffective in the presence of another. But someone who naively installs them together surely should not find that normal aspects of TiddlyWiki interface no longer work. So I hope one or both can be modified so that this risk is mitigated (and/or one or both need a warning about the incompatibility).

Here’s the demo site with very little going on except this resizer (which by itself is fantastic!) and CodeMirror plugin (+ subplugins).

If @oeyoews or anyone else associated with CodeMirror can swoop in with perspective on what’s going on here, that would be very good!

I’m putting time into detailing this conflict partly because of @jeremyruston’s interest in building this general-purpose resizer functionality into the core. Which sounds great! … And it also raises the stakes for compatibility.

2 Likes
#22

Hi @Springer

Sorry for not replying to that note. I’ll reply now.
Yes, my Codemirror 6 plugin overrides the $:/core/ui/EditTemplate/body/default tiddler and because @oeyoews cloned my plugin also his version does so.

Edit: I’ve seen that @oeyoews version does not override the $:/core/ui/EditTemplate/body/default tiddler. Something else must be going on

What I can do is adding a how to for these plugins.

I understand why you put time into this.
Thanks for pointing these problems out.
I’ll think about it and try coming up with a solution

Thanks,
Simon

2 Likes
#23

Hi @Springer ,

I’ve found the problem of the CodeMirror 6 editor.
In its Stylesheet $:/plugins/oeyoews/tiddlywiki-codemirror-6/styles it sets grid-template-columns: ... !important; which should be removed or just remove the !important that will do the trick, too.

This important overrides the resizer styles and makes the editor unusable.

2 Likes
#24

Cool!

Are you in a position to publish a fixed version?

(I could override in the meantime, but if a fix is forthcoming, I’d rather stick to official versions of codemirror).