Getting a bit of JavaScript to work in TiddlyWiki

[Kalcifer Kandari]

Hello,

I have 18 lines of JavaScript code I want to work in TiddlyWiki. All it does is makes an image in a button fullscreen. I originally asked about this in this thread but was directed here.

The code:

<!-- A button with an image inside. Call the function we define below with this element as the argument. -->
<button onclick="fullscreen(this);"><img src="test.png"></button>

<script>
function fullscreen(element) {

    // Really we want the immediate child of the element we passed.
    element = element.children[0];

    // Request fullscreen.
    if (element.requestFullscreen) {
        element.requestFullscreen();
    } else if (element.mozRequestFullScreen) { /* Firefox */
        element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
        element.webkitRequestFullscreen();
    } else if (element.msRequestFullscreen) { /* IE/Edge */
        element.msRequestFullscreen();
    }
}
</script>

I don't code much, and not at all in JavaScript. I've looked at https://tiddlywiki.com/dev/ and found the following here:

For example files see the plugins in the TiddlyWiki5 repository i.e. those located at plugins/tiddlywiki/.

I made a post in the docs group about improving that, though I think it's waiting for approval.

Any pointers on this? I don't know where to start, I don't even know if it requires a plugin or not.

Kalcifer

[PMario]

Hi,

TW can't allow executable <script> tags in tiddler content, because of security reasons.

Would this http://tobibeer.github.io/tw/ibox/#GettingStarted solution be OK for you, or do you need a fill 100% of the screen?

It uses the default TW modal mechanism: https://tiddlywiki.com/#Modals

-m

[Kalcifer Kandari]

I'd like it to be on par with the fullscreen video experience. Eventually, if I can implement this to begin with, I'd like to add some more controls and customisation.

Just relooked at modals as a solution. I think this might actually work. Before I was concerned about the button at the bottom, but that is all customisable, and combined with action-sendmessage with tm-full-screen, and tm-close-tiddler, this should be... done, I just did it.

First define a convenient macro:

\define fullscreen-image(path)
<$button>
<$action-sendmessage $message="tm-modal" $param="image-viewer" image-path=$path$ />
<$action-sendmessage $message="tm-full-screen" />
<img src=$path$>
</$button>
\end

So it's just a button with an image inside and a couple of action widgets. The first action widget opens the modal tiddler, as a modal of course, and passes it the path of the image. The other action widget enters fullscreen mode.

So in some tiddler where you want an image, just insert:

<<fullscreen-image "image-path.png">>

The "image-viewer" tiddler is what will be shown in the modal:

<$button>
<$action-sendmessage $message="tm-close-tiddler" />
<$action-sendmessage $message="tm-full-screen" $param="exit" />
<img src=<<image-path>>>
</$button>

footer: (leave blank)

Very similar to the macro, but with different action widgets. The first action widget closes the modal tiddler. The second exits fullscreen mode.

Not bad I'd say. Just a bit of CSS to tidy it up.

Might make that into a more clear tutorial once my site is ready.

Oh, and my docs thread is up, it's a call to create a hub for this sort of thing with tutorials etc. Basically improving https://tiddlywiki.com/dev/. Already got some replies.

Kalcifer