Hiding the TiddlyWiki interface: sneaky sneaky simple ...

45 views
Skip to first unread message

Charlie Veniot

unread,
Nov 24, 2021, 1:20:58 PM11/24/21
to TiddlyWiki
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.



TiddlyWikiInterfaceBlocker.json

Charlie Veniot

unread,
Nov 24, 2021, 1:30:18 PM11/24/21
to TiddlyWiki
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

unread,
Nov 24, 2021, 5:06:17 PM11/24/21
to TiddlyWiki
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

unread,
Nov 24, 2021, 6:32:30 PM11/24/21
to TiddlyWiki
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

unread,
Nov 24, 2021, 7:44:00 PM11/24/21
to TiddlyWiki
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

unread,
Nov 24, 2021, 7:54:14 PM11/24/21
to TiddlyWiki
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>
Reply all
Reply to author
Forward
0 new messages