Full-screen tiddler button for muuri layout and storyview

#1

I have been using the full-screen tiddler button from tiddlytweaks by telumire in my regular wikis for sometime and it has been working fine. Recently I started using muuri layout again, the button is not working if the tiddler width is smaller. These two are the full-screen style tiddler and button tiddler. Can someone help to solve this ? Here is the demo wiki- My TiddlyWiki — a non-linear personal web notebook

1 Like
[ Muuri Storyview ] - A new Release
#2

Hello all, I think I managed to do something useful here.

This was a bit tricky, and I heavily re-used inspiration from @BurningTreeC’s pretty slick MCL plugin equivalent functionality (and whatever I didn’t carry across I probably should have).

A few notes:

  • the sidebar is collapsed when activating (if needed) and restores when de-activated, but the user can restore the sidebar whilst in full-screen mode, which overrides what would happen at the de-activation.
  • if the ctrl modifier is used when activating, the tm-full-screen message is also fired which also makes the browser go into full screen mode (I think this is pretty slick, but I am biased :slight_smile: )
  • the width of the tiddler is expanded to the full viewport; however, if the user then restores the sidebar, the width is adjusted with a CSS calculation in the stylesheet. As a result of this approach, the width of the tiddler in focus is adjusted if the user then resizes the sidebar after activating full screen (I have the Resizable Sidebar plugin, hopefully everything works regardless but please advise otherwise).
  • tiddler in focus is “navigated to” so that it fills the viewport vertically also. Please note that all other open tiddlers remain open and in the grid either above or below (invisible but can be scrolled to). I think that is a feature, but perhaps not everyone feels this way (restoring the grid would otherwise be far from trivial I think) (no longer the case: there were display issues with long tiddlers, which can be common when using Streams).
  • quite a bit of work to ensure that if the tiddler in focus is switched into edit mode either before full screen or after full screen behave as you would expect. This was difficult, and works by copying some of the state information to a new state tiddler… There is a stylesheet entry to expand the tiddler textarea in edit mode, but not the case if within the Streams editor (improves compatibility with Streams)
  • besides the full-screen button, and the stylesheet, the edit and save buttons are modified as a result of the bullet above. The sidebar button is also modified to save information needed to de-activate full-screen optimally. There is a minor visual indication that the full-screen mode is activated with a CSS filter rule in the stylesheet.

I’ll continue testing, feel free to give it a spin @arunnbabu81 …
muuri_fullscreen.json (8.7 KB)

3 Likes
#3

I don’t use muuri layout currently. I created a custom layout with murri like cards with horizontal and vertical story river …it’s not perfect as a muuri layout. But something similar without using javascript.

Thanks for sharing this. I will definitely take a look at this because I will be able to learn new things from it. Thank you @fastfreddy