Hiding the TiddlyWiki interface: sneaky sneaky simple ...

[Charlie Veniot]

Into a TiddlyWiki you don't care about or can't edit (I suggest TiddlyWiki.com), download and drag the attached file.

Poof.  TiddlyWiki interface gone.

[Charlie Veniot]

Oops.  Open the imported tiddler and Poof.  TiddlyWiki interface gone.

Setup such a tiddler as the default tiddler to open, or default tiddler at startup.  Maybe check for something in the URL to not open this tiddler at startup, or some mechanism (visible or hidden-keyboard-driven) to show/hide this tiddler.

Possibilities ...

[Mat]

Interesting. I did not know about the dialog html tag but I'd assume it can as well be achieved with a div. Anyhow, your idea triggered an idea for a "wall", e.g a password wall or paywall type application so here's some direct copy-paste-code with size so people can manipulate it more easily:

Copy paste it to tiddlywiki.com because it uses an image from there:

title:wall

text:

<dialog open class="dialog">

<div class="background"></div>

<div class="foreground">

<$edit-text field=foo placeholder="password"/>

<$button>

<$list filter="[<currentTiddler>get[foo]match[hey]]">

<$action-sendmessage $message="tm-close-tiddler" $param="wall"/>

</$list>

OPEN

</$button>

password=hey

</div>

</dialog>

And here's a stylesheet. No tiddler type defined but it needs the tag, i.e:

tag: $:/tags/Stylesheet

text:

.dialog {

width:300px;height:300px;

position: fixed; bottom: 0; right:0; z-index:1000; padding:0;

}

.background {

background-image: url(<<datauri "Newnham Horizon.jpg">>);

width:100%; height:100%;

}

.foreground {

position:absolute;

left:50%; transform: translateX(-50%);

top:50%;

}

<:-)

[Charlie Veniot]

All kinds of cool possibilties.

I tried with a div, gave up as soon as I realized it needed a few extra steps compared to dialog.

What I did find interesting with a div, is a div the full size of the browser window and a high z-index, allowed to see the TiddlyWiki, but prevented clicking on it (a div with nothing in it seems au natural transparent, at least in TiddlyWiki).

For what you've done, having a password dialog and then a div in the z-index layer in between the dialog and TiddlyWiki, allowing you to see the TiddlyWiki but not able to do anything with it until you enter your password (at which point the div is hidden), would be pretty nice.

[Télumire]

If you want even less steps you can do

inset:0;

position:fixed;

z-index:1000;

background:white;

On any element (other than forms, these will require a width 100vw)

[Charlie Veniot]

That seems to save a little bit of typing.

I guess I saw the use of dialog element as nice because it kind of stands out (as in: something different going on here), an element I likely wouldn't otherwise use for anything else

i.e. a by-the-jugular attention grabber.  Yeah, I need that kind of thing.

<dialog open style="width:100vw;height:100vh;position: fixed; bottom: 0; right: 0;z-index:1000;">

</dialog>