Unusual layout: is it possible?

#1

For a wiki I’m considering building, I envisage a layout different from any I’ve seen in TW. I’m wondering if it’s feasible.

The idea is that when certain tiddlers (let’s say those having tag MyTag) are opened, they open up large, filling the entire viewport, hiding the sidebar, hiding all other open tiddlers. When they’re closed, the previous layout is restored: the sidebar is visible, and any tiddlers that had been open are still open. If a MyTag tiddler is opened when a different one is open, it simply replaces the full-viewport one, and has the same behavior.

Has anyone seen something like this? Any advice on how to build it?

Are there any examples for the use of TW as infoscreen?
#2

I’m pretty confident that you could do this with an alternate layout. But my first, quick-and-dirty thought was that you could probably get fairly close with a single CSS class.

[data-tags*="TableOfContents"] {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  overflow-y: auto;
}

Test this in a tiddler with the $:/tags/Stylesheet tag on tiddlywiki.com, then navigate to HelloThere; it should overlay the rest of the layout.

It’s obviously not a perfect solution: if you have other tiddlers open in the (non-Zoomin view) story, you can scroll up or down to reach them, and as written, it doesn’t work with Zoomin at all. But perhaps it will inspire further work!

Alternately, I might experiment with styling a modal to fill the viewport and then redefining the link widget so that links to [tag[MyTag]] tiddlers generate buttons that open them as modals, while everything else remains a standard link.

#3

https://www.telumire.be/TiddlyTweaks/#%24%3A%2FThemeTweaks%2Ftiddler-full-screen%2Fbutton

This full screen button by telumire works in a similar way

#4

At first I was trying to think how you could use a ViewTemplate. However, I suspect css could be written to perform some, if not all of these actions. Using a filter for is current tag “My Tag” and define the css to hide elements (sidebar, etc) and bring the elements of the tiddler forward and setting element sizes as desired.

#5

Oh yes, that’s a great start!

I’m never much of a fan of modals. But this might be a good usecase. I’ll play around with it.

That looks like something I might be able to hack for my own uses. I do like the way it works as is. I might want to use it to restore one of my large tiddlers back to the story river. I’ll have to think about it.

@etardiff demonstrated something along these lines. And as Firefox finally supports :has, I think there might be a way to get at those higher level elements to hide in a cross-browser manner.

Thank you everyone for some excellent suggestions! I’m just in the dreaming stages now, but I’ll report back if it gets further than that.

1 Like
#6

Oh, does it? That’s excellent news—thanks for the heads-up!

#7

Most versions of full screen around are a full screen within the browser.

Of course if you open a tiddler in new window WidgetMessage: tm-open-window it has no side bar etc… only what you permit in the template you use, which could be your;

  • or at least your playground to experiment before you incorporate the template deeper into tiddlywiki.
  • Just to prove the feasibility of this in the example below I edited the tiddler SampleWindowTemplate to contain {{$:/core/ui/PageTemplate}}, for safety set code-body = yes on SampleWindowTemplate
    • Rather than {{$:/core/ui/PageTemplate}} you would specify your own template as you develop it. This is the whole layout.
    • You can choose if it effects the source wiki

I provide more on the “open in window” below but want to point out;

  • I now think I know a way to trigger on open specific tiddlers, an open in new window.
  • Window management features are now possible.

In this example that works on tiddlywiki, a variation on the demo provided I use the info tiddlers to find the screen width and height= to identify what full screen would be,

  • However you can always maximise any window.
<$button>Open Window
<$action-sendmessage 
  $message="tm-open-window" 
  $param="$:/temp/openme" 
  template="SampleWindowTemplate" 
  windowTitle="My Window Title"
  width={{$:/info/browser/screen/width}}
  height={{$:/info/browser/screen/height}}
  something="This is my new window. There are many like it, but this one is mine." />
</$button>

particularly;

  width={{$:/info/browser/screen/width}}
  height={{$:/info/browser/screen/height}}

The advantage with such new windows is the full wiki is still present back in its browser tab, and this window can remote control the wiki (if you want).

Because I see value in this approach I am again working on RFC Window manager in 5.3.2 coming soon - #18 by TW_Tones

2 Likes
#8

Playing with my demo I discover I could have easily have two (or more) “full screen” windows at once, one in the browser, one separate, but both belonging to the same wiki. With a custom page template in the separate window we could have a different story, history and more.

  • I have a two screen desktop
  • It needs a little work to get the links and other details working independently.
1 Like
#9

Thank you. I’ve been following your work in this area. Multiple windows is not what I want here, but it’s an interesting alternative. I always love the variety of approaches this community can find.

1 Like
#10

What about, rather than thinking in terms of “certain tiddlers”, you have a button that hides everything you want to hide, and then reveals them again when you click it a second time?

  1. Close sidebar
  2. Open tiddler as a modal / lightbox
  3. Maybe hide some viewtemplate or edittemplate items you don’t need to use

That would be a one button with a bunch of actions in it that all happen at once.

1 Like
#11

I could, but I feel as though it would be cleaner to run this when the appropriate tiddlers are opened. These tiddlers should show in a distraction-free environment and should grab as much of the available space as feasible. I would rather they didn’t open in the story river alongside other tiddlers and next to the sidebar. But I want the sidebar and multi-tiddler environment when dealing with the other 60% of the content, and probably also for edit mode on these tiddlers. It’s an odd requirement, I know.

I will likely play with various of these suggestions this weekend, but as mentioned, this is still in the dreaming stage. Moreover, it will never be a very important project to me, just a fun little wiki. But it’s an itch I would like to scratch.

#12

BTW, I don’t mean to be mysterious about this. The project would be an extension of some of the first JavaScript code I ever wrote, back in 1998. I have copies of it floating around. One is at http://andoverct.info/bingo.html. (If you’re offended by a minor cuss-word related to excrement from male bovines, I apologize.)

That page hosts (American-style) bingo cards, with each square (except the free square) holding a corporate-speak term, things like “Think outside the box”, “Synergy”, or my personal favorite “Leverage” (as a verb). That page has 1000 random cards, and lets you choose between them or just choose a random one. I have distributed printed cards to select participants in corporate meetings, and enjoyed the confused hilarity when someone actually shouts out “BINGO” in a staid, serious meeting. :wink:

I’ve wheeled them out on and off over the years. But I’m thinking that in days when most meetings seem to be virtual, it would be good to come back to this, and expand it. TiddlyWiki is my golden hammer; I would choose to reimplement it in TW.

Obviously, I could make the squares interactive, click on them to turn them green or something. That sounds simple enough. But I would also like to do Devil’s Dictionary-style definitions for the terms1, and perhaps flash-cards as well.

The point of the question, though, is that if you have the bingo card open, it should probably be the only thing open. Or so I would prefer it. But whatever definition/flash-card interface I come up with probably should not act that way.


1 I haven't really started thinking about actual definitions. Anyone is welcome to join in the fun. Here's a start:
Action Item (n)
A hot potato passed around until one poor unfortunate sucker is stuck with it. The goal of that sucker is to make everyone forget what was committed to, and if ever reminded of it, to point out that the work is dependent on someone else's Action Item. With proper handling, said sucker need never to actually perform any Action whatsoever.
Best practice (n)
How the other guy should be acting.
Leverage (vt)
Use
Sundown (vt)
To bring the usage of a system down to 20% of its previous value, and then promise for each of the next seven years to be finished by Q2 next year. Management views this as already an 80% win. Software Development views this as job security.
Virtual tiddlers
#13

You could use system tag $:/tags/BelowStory to play with the layout. You could create a tiddler tagged with this tag. It would be something like:

<$list filter="[<your_filter>] +[first[]]">
<div class="class_to_work_as_overlay">
<$list filter="[<your_filter>] " template="$:/core/ui/StoryTiddlerTemplate" />
</div>
</$list>
#14

Hmm. I’m not quite following what that would do. It looks like time for more research! Thank you very much.

#15

I don’t think you need anything more fancy than a positioned div with navigation between these tiddlers embedded in the div. KISS.

But don’t forget a close button! :scream:

#16

I’d also give this a spin Introduction to the Tour Plugin

#17

I think you (and Emily) are probably right, and I will try it.

Yes, sir!

I’ve been through it a few times. I’ll look again this weekend. I can’t tell if it would be directly helpful to my problem, but there’s certainly plenty to learn from it.

#18

Thank you very much. Interesting food for thought. Am I right that this was intended as a response in Unusual layout: is it possible? (And @mario, is there a mechanism to move messages from one thread to another? I don’t see it in the controls I’ve recently gained access to.)

This was one of the two approaches I had thought would be required. I believe some of the other suggestions in the thread might make this unnecessary. Still I might play with it, simply as a learning exercise.

I had not considered this, and I can’t right now see how it connects, but I will definitely read up on it.

I can’t see how that would help, when I do expect to display a tiddler at such times. Perhaps emptyMessage could become sophisticated enough to display my chosen tiddler, but I don’t really see how.

This was the other of the ideas I had considered, combined with your first option. To me that one would guide me in how to approach this one.

This one is going to take exploration. I will have to read up on that. It sounds like it might be relevant, but I don’t quite see it yet.

I’ve heard about this but never looked into it. Its very interesting, but I can’t quite see the relevance. I’ll reread it tomorrow, though.

#19

Just create the tiddler $:/config/EmptyStoryMessage and put whatever you want in it including all your content, or transclude other tiddlers, even according to some logic etc… If you close all tiddlers it will appear.

  • In side this tiddler you could also build an alternative story view and make use to tiddlywikis native story mechanisium.
  • So as to not be boringly long I will have to leave it to you imagination as to how you could use this space in a tricky way. Just imagin any existing view or element conditionaly displayed within it including a single tiddler or an alternative story.
  • Similar could be said to transcluding a target tiddler in a tiddler with the $:/tags/AboveStory - your view will remain at the top.
  • I have also made a way to pin a tiddler at the top, which could be your custom view.
#20

I haven’t found the time to play with the suggestions here, but I did get together a wiki that I can use to do so. I may find some time later tomorrow, but there’s a good chance I won’t have any time until Tuesday evening. If anyone finds this interesting and wants to try out a technique, this wiki is a shell of what I want to do:

http://scott.sauyet.com/Tiddlywiki/Demo/BullshitBingo.html

There’s only a few of the definitions I want to create, and a few hard-coded bingo cards. (Well, they’re generated, but the list of terms they are generated from is stolen from my old site. Eventually, they’ll be created by a [very-]pseudo-random number generator.)

My goal will be that when a Bingo Card is opened it will fill all the available space. If a different one is then opened, it will fill all the space and the first one is closed. If the open Bingo Card is closed, the UI should revert to a standard story river and sidebar. I’ll deal with more appropriate CSS for the card if I get this far.

I know that the Parts of Speech here are not a great fit for this wiki, but I had them around for another project, and it seemed fun to include them. I probably won’t keep them.

Feel free to play with it. I will also be testing out several of the suggestions that have been made… but perhaps not for a few days.