1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-30 13:29:56 +00:00

Add support for resize tracking

This commit is contained in:
Jermolene 2018-09-01 13:19:28 +01:00
parent d7b8c1c298
commit 4f39e69e9d
2 changed files with 19 additions and 2 deletions

View File

@ -27,6 +27,13 @@ The background task detects the tiddler at the top of the viewport and sets the
! Viewport Size Features ! Viewport Size Features
!! Resize Tracking
Some widgets require re-rendering or refreshing if the size of the viewport changes. This can be accomplished using "resize counting" in two steps:
* Ensure that a DOM element with the class `tc-dynaview-request-refresh-on-resize` is present in the DOM to enable resize counting
* Have the widget check for changes to the tiddler $:/state/DynaView/ViewportDimensions/ResizeCount to detect viewport resizes
!! Viewport Size Tracking !! Viewport Size Tracking
The background task can optionally dynamically update a pair of state tiddlers with the dimensions of the browser viewport. The background task can optionally dynamically update a pair of state tiddlers with the dimensions of the browser viewport.

View File

@ -158,10 +158,20 @@ function checkTopmost() {
} }
} }
var previousViewportWidth, previousViewportHeight;
function saveViewportDimensions() { function saveViewportDimensions() {
var viewportWidth = window.innerWidth || document.documentElement.clientWidth,
viewportHeight = window.innerHeight || document.documentElement.clientHeight;
if(document.querySelector(".tc-dynaview-request-refresh-on-resize")) {
if(previousViewportWidth !== viewportWidth || previousViewportHeight !== viewportHeight) {
var count = parseInt($tw.wiki.getTiddlerText("$:/state/DynaView/ViewportDimensions/ResizeCount","0"),10) || 0;
$tw.wiki.addTiddler(new $tw.Tiddler({title: "$:/state/DynaView/ViewportDimensions/ResizeCount", text: (count + 1) + ""}));
previousViewportWidth = viewportWidth;
previousViewportHeight = viewportHeight;
}
}
if($tw.wiki.getTiddlerText("$:/config/DynaView/ViewportDimensions") === "yes") { if($tw.wiki.getTiddlerText("$:/config/DynaView/ViewportDimensions") === "yes") {
var viewportWidth = window.innerWidth || document.documentElement.clientWidth,
viewportHeight = window.innerHeight || document.documentElement.clientHeight;
if($tw.wiki.getTiddlerText("$:/state/DynaView/ViewportDimensions/Width") !== viewportWidth.toString()) { if($tw.wiki.getTiddlerText("$:/state/DynaView/ViewportDimensions/Width") !== viewportWidth.toString()) {
$tw.wiki.setText("$:/state/DynaView/ViewportDimensions/Width",undefined,undefined,viewportWidth.toString(),undefined); $tw.wiki.setText("$:/state/DynaView/ViewportDimensions/Width",undefined,undefined,viewportWidth.toString(),undefined);
} }