Would it be a good idea to implement in TW to update the infomechanism when entering/leaving fullscreen?

Developers
#1

I just used $:/info/browser/screen/width in a layout and ran into the problem that - as far as I see, the infomechanism width and height are not changed when going fullscreen.
I ask myself whether it would be a good idea to implement that.

#2

The value of $:/info/browser/screen/width and $:/info/browser/screen/height don’t change because the screen is still the same size! What you want is to get the current window width and height, which are not included in the standard TWCore info mechanism.

Note that for many “responsive layout” use-cases, CSS @media definitions can suffice. For example, in $:/themes/tiddlywiki/vanilla/base you can find the following rule to set the tiddler editor’s “add field value” input control width, based on the current value of the sidebarbreakpoint:

@media (min-width: <<sidebarbreakpoint>>) {
	.tc-edit-field-add-value {
		width: 35%;
	}
}

where the <<sidebarbreakpoint>> variable is defined as:

\define sidebarbreakpoint()
<$text text={{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}/>
\end

However, for some non-CSS use-cases it may be necessary to get the actual current window size, whose value can be queried from the browser environment.

Here’s a startup tiddler that adds an “event listener” to catch the window “resize” event, and writes the current window width and height (in pixels) into $:/info/browser/window/width and $:/info/browser/window/height

/*\
title: TiddlyTools/Startup/WindowSize.js
type: application/javascript
module-type: startup
author: Eric Shulman
revision: 1.0

* Adds an event listener for window resize events.
* Gets the current window width and height (in pixels)
* Saves results in $:/info/browser/window/width and $:/info/browser/window/height

\*/
(function(){
/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";

// Export name and synchronous status
exports.name = "windowsize";
exports.platforms = ["browser"];
exports.after = ["startup"];
exports.synchronous = true;
exports.startup = function() {

    /* SET INITIAL WINDOW SIZE */
	var w=( window.innerWidth  || document.documentElement.clientWidth  || document.body.clientWidth  );
	var h=( window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight );
	$tw.wiki.addTiddler(new $tw.Tiddler({ title:"$:/info/browser/window/width",  text:w.toString() },null,{},$tw.wiki.getModificationFields()));
	$tw.wiki.addTiddler(new $tw.Tiddler({ title:"$:/info/browser/window/height", text:h.toString() },null,{},$tw.wiki.getModificationFields()));

    /* SETUP LISTENER FOR UPDATING WINDOW SIZE */
	window.addEventListener("resize", function(event) {
		var w=( window.innerWidth  || document.documentElement.clientWidth  || document.body.clientWidth  );
		var h=( window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight );
		$tw.wiki.addTiddler(new $tw.Tiddler({ title:"$:/info/browser/window/width",  text:w.toString() },null,{},$tw.wiki.getModificationFields()));
		$tw.wiki.addTiddler(new $tw.Tiddler({ title:"$:/info/browser/window/height", text:h.toString() },null,{},$tw.wiki.getModificationFields()));
	});
};
})();

Note that the values for current width and height depend on which browser you are using. Thus, in the above code, the width and height are retrieved using the following “fallback” references:

var w=( window.innerWidth  || document.documentElement.clientWidth  || document.body.clientWidth  );
var h=( window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight );

enjoy,
-e

2 Likes
#3

Hi @EricShulman again a solution worth more than five likes!
Mysteriously I cannot see a solution-button (yet?) though I launched this thread.
Can your js also update the values when changing the orientation of a mobile device?

1 Like
#4

After a quick check on my Android phone, it seems that the answer is a qualified yes.

The caveat is that, when rotating, the $:/info/browser/window/height value changes as expected, but the $:/info/browser/window/width value does not.

I think this may be a side-effect of the way that the Android Chrome browser handles the viewport width by automatically scaling the display so that the effective page width remains constant, regardless of the screen orientation.

-e

1 Like
#5

Side note.

I do find it annoying that, still, this stuff is quite difficult to deal with universally.
Add to Android the Chromebooks … that is a lot of stuff in use that behaves differently?

Off-topic, partially, but I think harmonisation is a real issue?

The OP, I think, was, basically about that?
I dunno if it will be ever satisfactorily cross-all platforms solvable??

Dunno. Nuff said by me.

TT

#6

I think this is now quite universal; iPads and iPhones have the same behaviour. On my iPhone the screen width reads as 428 in both landscape and portrait mode, and on my iPad the screen width reads as 1024 in both orientations. The actual pixel resolution is several times greater in both dimensions.

2 Likes