diff --git a/plugins/tiddlywiki/dynaview/docs.tid b/plugins/tiddlywiki/dynaview/docs.tid index ff569a0d2..e40fc33b3 100644 --- a/plugins/tiddlywiki/dynaview/docs.tid +++ b/plugins/tiddlywiki/dynaview/docs.tid @@ -27,6 +27,13 @@ The background task detects the tiddler at the top of the viewport and sets the ! 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 The background task can optionally dynamically update a pair of state tiddlers with the dimensions of the browser viewport. diff --git a/plugins/tiddlywiki/dynaview/dynaview.js b/plugins/tiddlywiki/dynaview/dynaview.js index 605b05516..ac9e5035a 100644 --- a/plugins/tiddlywiki/dynaview/dynaview.js +++ b/plugins/tiddlywiki/dynaview/dynaview.js @@ -158,10 +158,20 @@ function checkTopmost() { } } +var previousViewportWidth, previousViewportHeight; + 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") { - var viewportWidth = window.innerWidth || document.documentElement.clientWidth, - viewportHeight = window.innerHeight || document.documentElement.clientHeight; if($tw.wiki.getTiddlerText("$:/state/DynaView/ViewportDimensions/Width") !== viewportWidth.toString()) { $tw.wiki.setText("$:/state/DynaView/ViewportDimensions/Width",undefined,undefined,viewportWidth.toString(),undefined); }