[TW5][REQUEST] window fullscreen - applying CLASS on <body>

Simon Huber

unread,

Jan 16, 2018, 2:46:58 AM1/16/18

to TiddlyWikiDev

Hello Developers,

could TiddlyWiki apply a class like "tc-fullscreen" to the <body> node when the browser is in fullscreen with F11 or TW's fullscreen button?

that would increase the number of possibilities for addressing elements with css

I've seen how the tc-dirty class gets toggled in saver-handler.js and like this another class for fullscreen would be very useful

is there a chance to make this possible?

Simon

Simon Huber

unread,

Jan 16, 2018, 3:04:54 AM1/16/18

to TiddlyWikiDev

In the saver-handler.js I just added

if( window.innerHeight == screen.height) {

// browser is fullscreen

$tw.utils.toggleClass(document.body,"tc-fullscreen",true);

}

and it does what I expect from this, it adds the class to the body if fullscreen.

could this be implemented correctly in the core?

Jeremy Ruston

unread,

Jan 16, 2018, 3:32:29 AM1/16/18

to tiddly...@googlegroups.com

Hi Simon

and it does what I expect from this, it adds the class to the body if fullscreen.

could this be implemented correctly in the core?

A change along those lines wouldn’t cover the situation where the user uses a browser control like the F11 key to enter full screen mode.

It appears that this is one of those tricky challenges in web development, and there may not be a good solution:

https://stackoverflow.com/questions/21461890/browser-f11-fullscreen-does-not-register-with-webkit-full-screen-or-javascript

If there is a workable solution out there I’d be happy to accept a pull request,

Best wishes

Jeremy.

--
You received this message because you are subscribed to the Google Groups "TiddlyWikiDev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywikide...@googlegroups.com.
To post to this group, send email to tiddly...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywikidev.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywikidev/30ea0b01-7601-4436-ac0d-e047b1a45105%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Simon Huber

unread,

Jan 16, 2018, 4:30:14 AM1/16/18

to TiddlyWikiDev

thank you, Jeremy!

I'm going to give it a try, when I find a solution I'll make the pull request

all the best,

Simon

Simon Huber

unread,

Jan 16, 2018, 5:20:32 AM1/16/18

to TiddlyWikiDev

and it does what I expect from this, it adds the class to the body if fullscreen.

could this be implemented correctly in the core?

A change along those lines wouldn’t cover the situation where the user uses a browser control like the F11 key to enter full screen mode.

it's the wrong place there, I guessed so ... :) it was handy to put it there. I haven't figured out where the best place could be for detecting this

Simon Huber

unread,

Jan 16, 2018, 8:26:07 AM1/16/18

to TiddlyWikiDev

@Jeremy,

I don't want to bother you too much with this, I've just put something together that works here:

http://tw5fullscreen.tiddlyspot.com

it prevents the F11 key's default event so that we're able to detect the key again when in fullscreen mode, then requests fullscreen and toggles the class. another eventlistener listens for fullscreenchange events and toggles the class

what I need to know for testing and preparing a pull request if this is reliable is where to put this, would a separate startup module be correct?

thank you,

Simon

coda coder

unread,

Jan 16, 2018, 8:55:23 AM1/16/18

to TiddlyWikiDev

Simon,

I'm assuming your class addition to the body element should be toggling as I toggle F11? If so, it's not working here. Your class "tw5-burning-tree" once applied, is never removed. Your console message always says "not fullscreen" regardless of the actual state. Also, your class is never applied to the body element of "tc-body tc-single-tiddler-window" windows.

Win 7, Firefox 57.0.3

Codacoder

Simon Huber

unread,

Jan 16, 2018, 9:09:11 AM1/16/18

to TiddlyWikiDev

thanks @coda coder,

that's bad news, I really want this :D

I changed something I should have done earlier, if you want to give it another try

I'll investigate further, maybe i get this working, maybe not

thanks for your help,

Simon

Simon Huber

unread,

Jan 16, 2018, 9:10:58 AM1/16/18

to TiddlyWikiDev

now i tried it on firefox, too. there it behaves as you report @coda coder

works for me on chromium

Jeremy Ruston

unread,

Jan 16, 2018, 9:23:17 AM1/16/18

to tiddly...@googlegroups.com

Hi Simon

As it’s turned out, I don’t think this current solution is appropriate for the core because (a) it breaks some of the usual browser functionality and (b) it is somewhat platform specific; for both reasons it isn’t universal enough for the core. I think it would be more appropriate for it to be available as a plugin so that people can opt to use it if they want to.

Best wishes

Jeremy.

On 16 Jan 2018, at 14:10, Simon Huber <hypnotize...@gmail.com> wrote:

now i tried it on firefox, too. there it behaves as you report @coda coder

works for me on chromium

--
You received this message because you are subscribed to the Google Groups "TiddlyWikiDev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywikide...@googlegroups.com.
To post to this group, send email to tiddly...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywikidev.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywikidev/b74b9463-7d22-4e59-aff7-930b6b6e1c62%40googlegroups.com.

Simon Huber

unread,

Jan 16, 2018, 9:28:22 AM1/16/18

to TiddlyWikiDev

thanks Jeremy,

maybe one day :P

best wishes, Simon

Jeremy Ruston

unread,

Jan 16, 2018, 10:09:53 AM1/16/18

to tiddly...@googlegroups.com

Hi Simon

maybe one day :P

To be clear, we just need a cross platform solution that is fully backwards compatible. Hopefully, the CSS support will be fixed as that seems the easiest approach.

Best wishes

Jeremy

best wishes, Simon

--
You received this message because you are subscribed to the Google Groups "TiddlyWikiDev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywikide...@googlegroups.com.
To post to this group, send email to tiddly...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywikidev.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywikidev/6c025cc6-f3a1-40af-a588-f8b445087b51%40googlegroups.com.

coda coder

unread,

Jan 16, 2018, 10:26:05 AM1/16/18

to TiddlyWikiDev

No, sorry. Same as before.

coda coder

unread,

Jan 16, 2018, 10:31:42 AM1/16/18

to TiddlyWikiDev

Tried FF on Win10 too. Same.

However (brace yourself) it works on FF 59.0a1, Win7

Can't try Win10 (don't have FF 59).

coda coder

unread,

Jan 16, 2018, 10:34:16 AM1/16/18

to TiddlyWikiDev

Ah but... trying to go fullscreen on the yt video fails -- the video disappears.

Simon Huber

unread,

Jan 16, 2018, 10:39:59 AM1/16/18

to TiddlyWikiDev

that's good news! maybe as Jeremy said, css support is not far away.

thanks for trying it out @coda coder,

@Jeremy I've tried different approaches now and it can be done better than the first fast tries but it's a bit a mess and I can't get my head around it, too.

not giving up on this, but enough for today

thanks both of you

Simon Huber

unread,

Jan 16, 2018, 10:42:01 AM1/16/18

to TiddlyWikiDev

Ah but... trying to go fullscreen on the yt video fails -- the video disappears.

that's what it should do, as in the stylesheet there's .tw5-burning-tree .tc-tiddler-frame iframe { display: none; } ... to see if it happens with yt fullscreen, too

coda coder

unread,

Jan 16, 2018, 11:33:31 AM1/16/18

to TiddlyWikiDev

If that's you just testing, that's fine. Otherwise you (the middle man) are stealing a click from me (user) targeting YT itself -- in my view, naughty ;)

Simon Huber

unread,

Jan 16, 2018, 12:10:10 PM1/16/18

to TiddlyWikiDev

sure, it's just testing!

Reply all

Reply to author

Forward