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
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.
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?
Speculation
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.
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)]] }}}
Hi all,
now the resizer handles multi-touch, too. 
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
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:
$:/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!$:/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 
)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.
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
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.
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).
It’s @oeyoews version of CodeMirror that has the “problem”
I can try making a pull request at his repo, will do so
Version 0.1.1 is out!
collapsible-three-column-panel procedure which can be used to create nice Layouts for exampleThanks @BurningTreeC it is working well.
I just looked at your demo site again, and something that struck me, is that resizing images makes navigating and reviewing images really easy.
However I found myself trying to grab the intersection of two resize bars to enlarge an image. Of course it did not work, and I expect this would not be easy to implement. I just thought I would mention it if you had an idea how to implement it.
This in no way diminishes what you have presented, thanks.
Hi @Springer
@oeyoews has released a new version of his Codemirror 6 plugin
In that version the problem should be fixed
Great stuff !
It would be nice, if the code $:/plugins/BTC/resizer/procedures/panels and others, where possible have code-body: yes so the code can be read without opening it in edit mode.
Hi @pmario, I’ve now added code-body:yes to the panels procedures and other tiddlers
Version 0.2.1 should be online now
I think I may deploy the resizer widget onto setting the top of tiddler and page when using the menu bar or sticky titles.
Also, I think $:/core/ui/EditTemplate/body/default could be introduce through a different title and core cascade to avoid overwiting the core.
If you look into Control Panel > Settings > Advanced > Cascades > Edit Template Body
Copy your modified $:/core/ui/EditTemplate/body/default ie; your replacement to (for example) $:/plugins/BTC/resizer/EditTemplate/body/default
Now create another tiddler and include it in your plugin (rather than the current core one) eg $:/config/resizer/EditTemplateBodyFilters/default,
[[$:/plugins/BTC/resizer/EditTemplate/body/default]]
$:/tags/EditTemplateBodyFilter
$:/core/ui/EditTemplate/body/default
Your new edit Template Body will now be resolved and the core one ($:/core/ui/EditTemplate/body/default) will never be used. However anyone curious can look in the cascade and see this is happening.
You may still need to modify the core tiddler, but instead just remove its tag $:/tags/PageTemplate and tag your replacement tiddler $:/core/ui/PageTemplate/sidebar now with $:/tags/PageTemplate.
Hi @TW_Tones ,
I’ve now followed your steps and the plugin doesn’t overwrite the core body/default Template anymore.
For the sidebar I’ll have to think about a solution.
I just got the idea to put the sidebar resizer into its own page template, maybe that works
Will that mean new page template means you need to switch layouts?
This is one of those areas where we could look to introducing some more hackability to the core, unfortunatly for me I dont know enough hardcore HTML/CSS to do this.
I would have thought we could add an element via $:/tags/PageTemplate but this may not be true.