Flexbox story sidebar

core/modules/startup/focus-handler.js

@@ -0,0 +1,123 @@
+/*\
+title: $:/plugins/custom/sidebar-focus/startup.js
+type: application/javascript
+module-type: startup
+Handles focus management and spacebar scrolling for sidebar layout
+\*/
+"use strict";
+
+exports.name = "sidebar-focus";
+exports.platforms = ["browser"];
+exports.after = ["story"];
+exports.synchronous = true;
+
+exports.startup = function() {
+	var mainSelector = ".tc-story-river";
+	var secondarySelector = ".tc-secondary-container";
+
+	// Helper: Check if element is in any secondary container
+	function isInSecondary(element) {
+		var containers = document.querySelectorAll(secondarySelector);
+		return Array.from(containers).some(function(container) {
+			return container === element || container.contains(element);
+		});
+	}
+
+	// Wait for DOM to be fully ready
+	function initialize() {
+		var main = document.querySelector(mainSelector);
+
+		if(!main) {
+			setTimeout(initialize, 100);
+			return;
+		}
+
+		// Make main focusable
+		if(!main.hasAttribute("tabindex")) {
+			main.setAttribute("tabindex", "-1");
+		}
+		main.focus();
+
+		// Make secondary containers unfocusable
+		var secondaryContainers = document.querySelectorAll(secondarySelector);
+		secondaryContainers.forEach(function(element) {
+			element.removeAttribute("tabindex");
+		});
+	}
+
+	// Handle spacebar scrolling in secondary containers
+	document.addEventListener("keydown", function(e) {
+		if(e.key !== " ") return;
+
+		if(isInSecondary(e.target)) {
+			// Allow spacebar in input fields
+			if(e.target.tagName === "INPUT" || 
+			   e.target.tagName === "TEXTAREA" || 
+			   e.target.isContentEditable) {
+				return;
+			}
+			e.preventDefault();
+		}
+	}, true);
+
+	// Tab-Trapping: Keep tab navigation within main content
+	document.addEventListener("keydown", function(e) {
+		if(e.key !== "Tab") return;
+
+		var main = document.querySelector(mainSelector);
+		if(!main) return;
+
+		var focusableElements = main.querySelectorAll(
+			'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'
+		);
+
+		if(focusableElements.length === 0) {
+			e.preventDefault();
+			main.focus();
+			return;
+		}
+
+		var firstElement = focusableElements[0];
+		var lastElement = focusableElements[focusableElements.length - 1];
+		var activeElement = document.activeElement;
+
+		// Only trap if we're in main
+		var inMain = activeElement === main || main.contains(activeElement);
+		if(!inMain) {
+			e.preventDefault();
+			main.focus();
+			return;
+		}
+
+		// Trap tab at boundaries
+		if(e.shiftKey && activeElement === firstElement) {
+			e.preventDefault();
+			lastElement.focus();
+		} else if(!e.shiftKey && activeElement === lastElement) {
+			e.preventDefault();
+			firstElement.focus();
+		} else if(activeElement === main) {
+			e.preventDefault();
+			firstElement.focus();
+		}
+	});
+
+	// Click-Handler: Always refocus main after clicks (except in input fields)
+	document.addEventListener("click", function(e) {
+		var main = document.querySelector(mainSelector);
+		if(!main) return;
+
+		// Don't refocus if clicking in input fields
+		if(e.target.tagName === "INPUT" || 
+		   e.target.tagName === "TEXTAREA" ||
+		   e.target.isContentEditable) {
+			return;
+		}
+
+		setTimeout(function() {
+			main.focus();
+		}, 10);
+	}, true);
+
+	initialize();
+};

core/modules/utils/dom/scroller.js

@@ -41,6 +41,32 @@ PageScroller.prototype.cancelScroll = function(srcWindow) {
 	}
 };
 
+/*
+Find the scrollable ancestor of an element
+Returns the first ancestor with overflow-y: auto|scroll, or null if none found
+*/
+PageScroller.prototype.getScrollContainer = function(element,srcWindow) {
+	var node = element.parentElement;
+	while(node) {
+		var style = srcWindow.getComputedStyle(node);
+		var overflowY = style.getPropertyValue("overflow-y");
+		if(overflowY === "auto" || overflowY === "scroll") {
+			return node;
+		}
+		node = node.parentElement;
+	}
+	return null;
+};
+
+/*
+Get scroll-margin value from element's computed style
+*/
+PageScroller.prototype.getScrollMargin = function(element,srcWindow,propertyValue) {
+	var style = srcWindow.getComputedStyle(element);
+	var scrollMargin = style.getPropertyValue(propertyValue);
+	return parseFloat(scrollMargin) || 0;
+};
+
 /*
 Handle an event
 */
@@ -66,7 +92,10 @@ Handle a scroll event hitting the page document
 PageScroller.prototype.scrollIntoView = function(element,callback,options) {
 	var self = this,
 		duration = $tw.utils.hop(options,"animationDuration") ? parseInt(options.animationDuration) : $tw.utils.getAnimationDuration(),
-		srcWindow = element ? element.ownerDocument.defaultView : window;
+		srcWindow = element ? element.ownerDocument.defaultView : window,
+		scrollContainer = this.getScrollContainer(element,srcWindow),
+		scrollMarginTop = this.getScrollMargin(element,srcWindow,"scroll-margin-top"),
+		scrollMarginLeft = this.getScrollMargin(element,srcWindow,"scroll-margin-left");
 	// Now get ready to scroll the body
 	this.cancelScroll(srcWindow);
 	this.startTime = Date.now();
@@ -78,14 +107,26 @@ PageScroller.prototype.scrollIntoView = function(element,callback,options) {
 	}
 	// Get the client bounds of the element and adjust by the scroll position
 	var getBounds = function() {
-			var clientBounds = typeof callback === 'function' ? callback() : element.getBoundingClientRect(),
-				scrollPosition = $tw.utils.getScrollPosition(srcWindow);
-			return {
-				left: clientBounds.left + scrollPosition.x,
-				top: clientBounds.top + scrollPosition.y - offset,
-				width: clientBounds.width,
-				height: clientBounds.height
-			};
+			var clientBounds = typeof callback === "function" ? callback() : element.getBoundingClientRect();
+			if(scrollContainer) {
+				// Position relative to scroll container
+				var containerBounds = scrollContainer.getBoundingClientRect();
+				return {
+					left: clientBounds.left - containerBounds.left + scrollContainer.scrollLeft - scrollMarginLeft,
+					top: clientBounds.top - containerBounds.top + scrollContainer.scrollTop - offset - scrollMarginTop,
+					width: clientBounds.width,
+					height: clientBounds.height
+				};
+			} else {
+				// Position relative to window
+				var scrollPosition = $tw.utils.getScrollPosition(srcWindow);
+				return {
+					left: clientBounds.left + scrollPosition.x,
+					top: clientBounds.top + scrollPosition.y - offset - scrollMarginTop,
+					width: clientBounds.width,
+					height: clientBounds.height
+				};
+			}
 		},
 		// We'll consider the horizontal and vertical scroll directions separately via this function
 		// targetPos/targetSize - position and size of the target element
@@ -111,11 +152,30 @@ PageScroller.prototype.scrollIntoView = function(element,callback,options) {
 				t = 1;
 			}
 			t = $tw.utils.slowInSlowOut(t);
-			var scrollPosition = $tw.utils.getScrollPosition(srcWindow),
-				bounds = getBounds(),
-				endX = getEndPos(bounds.left,bounds.width,scrollPosition.x,srcWindow.innerWidth),
-				endY = getEndPos(bounds.top,bounds.height,scrollPosition.y,srcWindow.innerHeight);
-			srcWindow.scrollTo(scrollPosition.x + (endX - scrollPosition.x) * t,scrollPosition.y + (endY - scrollPosition.y) * t);
+			var bounds = getBounds(),
+				scrollX,scrollY,viewportWidth,viewportHeight,endX,endY;
+			if(scrollContainer) {
+				scrollX = scrollContainer.scrollLeft;
+				scrollY = scrollContainer.scrollTop;
+				viewportWidth = scrollContainer.clientWidth;
+				viewportHeight = scrollContainer.clientHeight;
+			} else {
+				var scrollPosition = $tw.utils.getScrollPosition(srcWindow);
+				scrollX = scrollPosition.x;
+				scrollY = scrollPosition.y;
+				viewportWidth = srcWindow.innerWidth;
+				viewportHeight = srcWindow.innerHeight;
+			}
+			endX = getEndPos(bounds.left,bounds.width,scrollX,viewportWidth);
+			endY = getEndPos(bounds.top,bounds.height,scrollY,viewportHeight);
+			var newX = scrollX + (endX - scrollX) * t,
+				newY = scrollY + (endY - scrollY) * t;
+			if(scrollContainer) {
+				scrollContainer.scrollLeft = newX;
+				scrollContainer.scrollTop = newY;
+			} else {
+				srcWindow.scrollTo(newX,newY);
+			}
 			if(t < 1) {
 				self.idRequestFrame = self.requestAnimationFrame.call(srcWindow,drawFrame);
 			}

core/ui/PageTemplate.tid

@@ -6,7 +6,6 @@ code-body: yes
 
 \whitespace trim
 \import [subfilter{$:/core/config/GlobalImportFilter}]
-
 <$vars
 	tv-config-toolbar-icons={{$:/config/Toolbar/Icons}}
 	tv-config-toolbar-text={{$:/config/Toolbar/Text}}
@@ -15,23 +14,16 @@ code-body: yes
 	tv-show-missing-links={{$:/config/MissingLinks}}
 	storyviewTitle={{$:/view}}
 	languageTitle={{{ [{$:/language}get[name]] }}}>
-
 <div class={{{ [all[shadows+tiddlers]tag[$:/tags/ClassFilters/PageTemplate]!is[draft]] :map:flat[subfilter{!!text}] tc-page-container [[tc-page-view-]addsuffix<storyviewTitle>] [[tc-language-]addsuffix<languageTitle>] :and[unique[]join[ ]] }}} >
-
 <$navigator story="$:/StoryList" history="$:/HistoryList" openLinkFromInsideRiver={{$:/config/Navigation/openLinkFromInsideRiver}} openLinkFromOutsideRiver={{$:/config/Navigation/openLinkFromOutsideRiver}} relinkOnRename={{$:/config/RelinkOnRename}}>
-
+<$list filter="[all[shadows+tiddlers]tag[$:/tags/PageTemplate/Outside]!has[draft.of]]" variable="listItem">
+<$transclude tiddler=<<listItem>>/>
+</$list>
 <$dropzone enable=<<tv-enable-drag-and-drop>> class="tc-dropzone tc-page-container-inner">
-
 <$list filter="[all[shadows+tiddlers]tag[$:/tags/PageTemplate]!has[draft.of]]" variable="listItem">
-
 <$transclude tiddler=<<listItem>>/>
-
 </$list>
-
 </$dropzone>
-
 </$navigator>
-
 </div>
-
 </$vars>

core/ui/PageTemplate/sidebar.tid

@@ -6,6 +6,8 @@ tags: $:/tags/PageTemplate
 $:/config/SideBarSegments/Visibility/$(listItem)$
 \end
 
+<aside class="tc-sidebar tc-secondary-container" tabindex="-1">
+
 <$scrollable fallthrough="no" class="tc-sidebar-scrollable">
 
 <div class="tc-sidebar-header">
@@ -27,3 +29,5 @@ $:/config/SideBarSegments/Visibility/$(listItem)$
 </div>
 
 </$scrollable>
+
+</aside>

core/ui/PageTemplate/story.tid

@@ -2,7 +2,9 @@ title: $:/core/ui/PageTemplate/story
 tags: $:/tags/PageTemplate
 
 \whitespace trim
-<section class="tc-story-river" role="main">
+<section class="tc-story-river" role="main" tabindex="-1">
+
+<div class="tc-main-content">
 
 <section class="story-backdrop">
 
@@ -26,4 +28,6 @@ tags: $:/tags/PageTemplate
 
 </section>
 
+</div>
+
 </section>

editions/tw5.com/tiddlers/releasenotes/5.4.0/#9532 - flexbox-story-sidebar.tid

@@ -0,0 +1,13 @@
+title: $:/changenotes/5.4.0/#9532
+created: 20251229082625621
+modified: 20251229082625621
+tags: $:/tags/ChangeNote
+change-type: enhancement
+change-category: usability
+description: The sidebar moves out of view and into view
+release: 5.4.0
+github-links: https://github.com/TiddlyWiki/TiddlyWiki5/pull/9532
+github-contributors: BurningTreeC
+type: text/vnd.tiddlywiki
+
+This pull request makes the sidebar move when hiding and showing, rather than jumping.

plugins/tiddlywiki/menubar/menu.tid

@@ -1,7 +1,8 @@
 title: $:/plugins/tiddlywiki/menubar/menu
-tags: $:/tags/PageTemplate
+tags: $:/tags/PageTemplate/Outside
 
 \define menubar-inner(size)
+\whitespace trim
 <ul class="tc-menubar-list">
 <$list filter="[all[shadows+tiddlers]tag[$:/tags/MenuBar]!has[draft.of]] -[all[tiddlers+shadows]tag[$:/tags/TopLeftBar]limit[1]then[]else[$:/plugins/tiddlywiki/menubar/items/topleftbar]] -[all[tiddlers+shadows]tag[$:/tags/TopRightBar]limit[1]then[]else[$:/plugins/tiddlywiki/menubar/items/toprightbar]]">
 <$list filter="[<currentTiddler>addprefix[$:/config/plugins/menubar/MenuItems/Visibility/]get[text]] ~show +[match[show]]" variable="ignore">
@@ -41,10 +42,10 @@ tags: $:/tags/PageTemplate
 </$list>
 </ul>
 \end
-
+\whitespace trim
 <$list filter="[<tv-config-static>!match[yes]]" variable="ignore">
 <$list filter="[all[shadows+tiddlers]tag[$:/tags/MenuBar]!has[draft.of]] -[all[tiddlers+shadows]tag[$:/tags/TopLeftBar]limit[1]then[]else[$:/plugins/tiddlywiki/menubar/items/topleftbar]] -[all[tiddlers+shadows]tag[$:/tags/TopRightBar]limit[1]then[]else[$:/plugins/tiddlywiki/menubar/items/toprightbar]] +[limit[1]]" variable="listItem">
-<nav class="tc-menubar tc-adjust-top-of-scroll">
+<nav class="tc-menubar tc-secondary-container tc-adjust-top-of-scroll">
 <div class="tc-menubar-narrow">
 <<menubar-inner narrow>>
 </div>

plugins/tiddlywiki/menubar/styles.tid

@@ -43,12 +43,13 @@ tags: [[$:/tags/Stylesheet]]
 \rules only filteredtranscludeinline transcludeinline macrodef macrocallinline
 
 nav.tc-menubar {
-	position: fixed;
+	position: relative;
+	flex-shrink: 0;
 	z-index: 850;
 	display: inline-block;
-	top: 0;
-	right: 0;
-	left: 0;
+	top: auto;
+	right: auto;
+	left: auto;
 }
 
 nav.tc-menubar ul.tc-menubar-list {