DynaView plugin: make viewport dimensions available in state tiddlers (#3126)

* add export-viewport-dimensions functionality

* add config.tid

* add config to plugin.info list

* typo

* update docs.tid

* change default tiddler to $:/state/viewport

* change default to $:/state/viewport

* Update dynaview.js

* changes as discussed - lingo missing

plugins/tiddlywiki/dynaview/config.tid

@@ -0,0 +1,4 @@
+title: $:/plugins/tiddlywiki/dynaview/config
+
+<$checkbox tiddler="$:/config/ViewportDimensions" field="text" checked="yes" unchecked="">&nbsp;&nbsp;enable dynamic saving of the viewport dimensions</$checkbox>
+- //the values get stored in // $:/state/viewport/width and $:/state/viewport/height

plugins/tiddlywiki/dynaview/docs.tid

@@ -7,6 +7,7 @@ The components of this plugin include:
 * A background task that:
 ** performs specified actions when elements are scrolled into view
 ** updates certain base classes on the `document.body` according to the current zoom level
+** if enabled in the dynaview config panel - dynamically stores the viewport dimensions in $:/state/viewport/width and $:/state/viewport/height
 * Pre-configured CSS classes to simplify using those base classes
 * Usage examples
 

plugins/tiddlywiki/dynaview/dynaview.js

@@ -26,6 +26,9 @@ exports.startup = function() {
 	window.addEventListener("resize",onScrollOrResize,false);
 	$tw.hooks.addHook("th-page-refreshed",function() {
 		checkVisibility();
+    if($tw.wiki.getTiddlerText("$:/config/ViewportDimensions") === "yes") {
+      saveViewportDimensions();
+    }
 	});
 };
 
@@ -34,6 +37,9 @@ function onScrollOrResize(event) {
 		window.requestAnimationFrame(function() {
 			setZoomClasses();
 			checkVisibility();
+			if($tw.wiki.getTiddlerText("$:/config/ViewportDimensions") === "yes") {
+				saveViewportDimensions();
+			}
 			isWaitingForAnimationFrame = false;
 		});
 	}
@@ -43,7 +49,7 @@ function onScrollOrResize(event) {
 function setZoomClasses() {
 	var zoomFactor = document.body.scrollWidth / window.innerWidth,
 		classList = document.body.classList;
-	classList.add("tc-dynaview")
+	classList.add("tc-dynaview");
 	classList.toggle("tc-dynaview-zoom-factor-1",zoomFactor <= 2);
 	classList.toggle("tc-dynaview-zoom-factor-1-and-above",zoomFactor >= 1);
 	classList.toggle("tc-dynaview-zoom-factor-1a-and-above",zoomFactor >= 1.14);
@@ -91,4 +97,11 @@ function checkVisibility() {
 	});
 }
 
-})();
+function saveViewportDimensions() {
+	var viewportWidth = window.innerWidth || document.documentElement.clientWidth,
+	    viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+	$tw.wiki.setText("$:/state/viewport/width",undefined,undefined,viewportWidth.toString(),undefined);
+	$tw.wiki.setText("$:/state/viewport/height",undefined,undefined,viewportHeight.toString(),undefined);
+}
+
+})();

plugins/tiddlywiki/dynaview/plugin.info

@@ -3,5 +3,5 @@
 	"description": "Dynamic scrolling and zooming effects",
 	"author": "JeremyRuston",
 	"core-version": ">=5.0.0",
-	"list": "readme docs examples"
+	"list": "readme docs examples config"
 }