Dynaview: Add support for updating the address bar when scrolling

We add an attribute to tiddler frames in the DOM giving the title of the corresponding tiddler

core/ui/EditTemplate.tid

@@ -11,7 +11,7 @@ title: $:/core/ui/EditTemplate
 \define frame-classes()
 tc-tiddler-frame tc-tiddler-edit-frame $(missingTiddlerClass)$ $(shadowTiddlerClass)$ $(systemTiddlerClass)$
 \end
-<div class=<<frame-classes>>>
+<div class=<<frame-classes>> data-tiddler-title=<<currentTiddler>>>
 <$fieldmangler>
 <$set name="storyTiddler" value=<<currentTiddler>>>
 <$keyboard key="((cancel-edit-tiddler))" message="tm-cancel-tiddler">

core/ui/ViewTemplate.tid

@@ -6,6 +6,6 @@ tc-tiddler-frame tc-tiddler-view-frame $(missingTiddlerClass)$ $(shadowTiddlerCl
 \define folded-state()
 $:/state/folded/$(currentTiddler)$
 \end
-<$set name="storyTiddler" value=<<currentTiddler>>><$set name="tiddlerInfoState" value=<<qualify "$:/state/popup/tiddler-info">>><$tiddler tiddler=<<currentTiddler>>><div class=<<frame-classes>>><$list filter="[all[shadows+tiddlers]tag[$:/tags/ViewTemplate]!has[draft.of]]" variable="listItem"><$transclude tiddler=<<listItem>>/></$list>
+<$set name="storyTiddler" value=<<currentTiddler>>><$set name="tiddlerInfoState" value=<<qualify "$:/state/popup/tiddler-info">>><$tiddler tiddler=<<currentTiddler>>><div class=<<frame-classes>> data-tiddler-title=<<currentTiddler>>><$list filter="[all[shadows+tiddlers]tag[$:/tags/ViewTemplate]!has[draft.of]]" variable="listItem"><$transclude tiddler=<<listItem>>/></$list>
 </div>
 </$tiddler></$set></$set>

plugins/tiddlywiki/dynaview/config.multids

@@ -3,3 +3,4 @@ title: $:/config/DynaView/
 Optisizer: no
 Optisizer/Text: ABCDEFGHIJKLMnopqrstuvwxyzABCDEFGHIJKLMnopqrstuvwxyz
 ViewportDimensions: no
+UpdateAddressBar: no

plugins/tiddlywiki/dynaview/config.tid

@@ -1,5 +1,6 @@
 title: $:/plugins/tiddlywiki/dynaview/config
 
-<$checkbox tiddler="$:/config/DynaView/ViewportDimensions" field="text" checked="yes" unchecked=""> Enable dynamic saving of the viewport [[width|$:/state/DynaView/ViewportDimensions/Width]] and [[height|$:/state/DynaView/ViewportDimensions/Height]]</$checkbox>
+<$checkbox tiddler="$:/config/DynaView/ViewportDimensions" field="text" checked="yes" unchecked="no" default="no"> Enable dynamic saving of the viewport [[width|$:/state/DynaView/ViewportDimensions/Width]] and [[height|$:/state/DynaView/ViewportDimensions/Height]]</$checkbox>
 
+<$checkbox tiddler="$:/config/DynaView/UpdateAddressBar" field="text" checked="yes" unchecked="no" default="no"> Update address bar while scrolling</$checkbox>
 

plugins/tiddlywiki/dynaview/docs.tid

@@ -13,8 +13,14 @@ The components of this plugin include:
 
 ! Scroll Features
 
+!! Set tiddler field when visible
+
 The background task detects when elements with the class `tc-dynaview-set-tiddler-when-visible` scroll into view. The first time that they do, the background task assigns the value in the attribute `data-dynaview-set-value` to the tiddler whose title is in the attribute `data-dynaview-set-tiddler`. This assignment can be tied to a reveal widget to cause content to be displayed when it becomes visible. If the class `tc-dynaview-expand-viewport` is set then the viewport is expanded so that the processing occurs when elements move near the viewport.
 
+!! Update address bar when scrolling
+
+The background task detects the tiddler at the top of the viewport and sets the address bar location hash to the title of that tiddler.
+
 ! Viewport Size Features
 
 !! Viewport Size Tracking

plugins/tiddlywiki/dynaview/dynaview.js

@@ -29,6 +29,7 @@ exports.startup = function() {
 	window.addEventListener("resize",onResize,false);
 	$tw.hooks.addHook("th-page-refreshed",function() {
 		optisizeFonts();
+		checkTopmost();
 		checkVisibility();
 		saveViewportDimensions();
 	});
@@ -61,6 +62,7 @@ function worker() {
 		saveViewportDimensions();
 	}
 	setZoomClasses();
+	checkTopmost();
 	checkVisibility();
 	isWaitingForAnimationFrame = 0;
 }
@@ -165,6 +167,30 @@ function checkVisibility() {
 	});
 }
 
+function checkTopmost() {
+	if($tw.wiki.getTiddlerText("$:/config/DynaView/UpdateAddressBar") === "yes") {
+		var elements = document.querySelectorAll(".tc-tiddler-frame[data-tiddler-title]"),
+			topmostElement = null,
+			topmostElementTop = 1 * 1000 * 1000;
+		$tw.utils.each(elements,function(element) {
+			// Check if the element is visible
+			var elementRect = element.getBoundingClientRect();
+			if((elementRect.top < topmostElementTop) && (elementRect.bottom > 0)) {
+				topmostElement = element;
+				topmostElementTop = elementRect.top;
+			}
+		});
+		if(topmostElement) {
+			var title = topmostElement.getAttribute("data-tiddler-title"),
+				hash = "#" + encodeURIComponent(title) + ":" + encodeURIComponent("[list[$:/StoryList]]");
+			if(title && $tw.locationHash !== hash) {
+				$tw.locationHash = hash;
+				window.location.hash = hash;			
+			}
+		}
+	}
+}
+
 function saveViewportDimensions() {
 	if($tw.wiki.getTiddlerText("$:/config/DynaView/ViewportDimensions") === "yes") {
 		var viewportWidth = window.innerWidth || document.documentElement.clientWidth,

plugins/tiddlywiki/dynaview/readme.tid

@@ -8,6 +8,7 @@ This plugin makes it possible to build user interfaces that dynamically respond
 * CSS classes that allow the opacity of DOM elements to vary according to the current zoom level
 * A daemon that can dynamically update a pair of state tiddlers with the current dimensions of the browser viewport
 * A daemon that can dynamically adjust the size of text to yield a particular number of characters per line
+* A daemon that can dynamically update the address bar with the title of the tiddler at the top of the viewport
 
 Some points to note about the zoom features: