only use sidebarresizer if theme explicitly sets option to show

TiddlyWiki · Oct 27, 2024 · 1b5889f · 1b5889f
1 parent f7d83b8
commit 1b5889f
Show file tree

Hide file tree

Showing 12 changed files with 121 additions and 88 deletions.
diff --git a/core/ui/PageTemplate/sidebar-resizer.tid b/core/ui/PageTemplate/sidebar-resizer.tid
@@ -5,7 +5,7 @@ list-after: $:/core/ui/PageTemplate/story
 \import [function[get.base.functions.theme],<get.current.theme>first[]!is[missing]] :else[function[get.base.functions.theme],<get.current.theme>first[]is[shadow]] :else[[$:/themes/tiddlywiki/vanilla/functions]] [[$:/core/macros/sidebar-resizer]]
 \whitespace trim
 
-<%if [<get.theme.option sidebarresizer>match[show]] %>
+<%if [<get.theme.explicit.option sidebarresizer>match[show]] %>
 
 	<$let
 		tv-set-storywidth-storyright=<<set.storywidth.storyright>>

diff --git a/core/wiki/functions/themes.tid b/core/wiki/functions/themes.tid
@@ -45,6 +45,8 @@ tags: $:/tags/Global
 
 \function get.theme.option(option) [function[get.base.theme.option],<get.current.theme>,<option>first[]get[text]]
 
+\function get.theme.explicit.option(option) [<get.current.theme>addsuffix[/options/]addsuffix<option>get[text]]
+
 \function get.theme(metric) [function[get.base.theme],<get.current.theme>,<metric>addsuffix[/metrics/]addsuffix<metric>!is[missing]] :else[function[get.base.theme],<get.current.theme>,<metric>addsuffix[/metrics/]addsuffix<metric>is[shadow]] :else[[$:/themes/tiddlywiki/vanilla/metrics/]addsuffix<metric>]
 
 \function set.theme.metric(metric) [function[get.base.theme.metric],<get.current.theme>,<metric>first[]is[shadow]] :else[function[get.base.theme.metric],<get.current.theme>,<metric>first[]!is[shadow]!is[missing]] :else[[$:/themes/tiddlywiki/vanilla/metrics/]addsuffix<metric>]

diff --git a/themes/tiddlywiki/centralised/options.multids b/themes/tiddlywiki/centralised/options.multids
@@ -0,0 +1,3 @@
+title: $:/themes/tiddlywiki/centralised/options/
+
+sidebarresizer: show
diff --git a/themes/tiddlywiki/example/options.multids b/themes/tiddlywiki/example/options.multids
@@ -0,0 +1,3 @@
+title: $:/themes/tiddlywiki/example/options/
+
+sidebarresizer: show
diff --git a/themes/tiddlywiki/heavier/options.multids b/themes/tiddlywiki/heavier/options.multids
@@ -0,0 +1,3 @@
+title: $:/themes/tiddlywiki/heavier/options/
+
+sidebarresizer: show
diff --git a/themes/tiddlywiki/readonly/options.multids b/themes/tiddlywiki/readonly/options.multids
@@ -0,0 +1,3 @@
+title: $:/themes/tiddlywiki/readonly/options/
+
+sidebarresizer: show
diff --git a/themes/tiddlywiki/seamless/options.multids b/themes/tiddlywiki/seamless/options.multids
@@ -0,0 +1,3 @@
+title: $:/themes/tiddlywiki/seamless/options/
+
+sidebarresizer: show
diff --git a/themes/tiddlywiki/snowwhite/options.multids b/themes/tiddlywiki/snowwhite/options.multids
@@ -0,0 +1,3 @@
+title: $:/themes/tiddlywiki/snowwhite/options/
+
+sidebarresizer: show
diff --git a/themes/tiddlywiki/starlight/options.multids b/themes/tiddlywiki/starlight/options.multids
@@ -0,0 +1,3 @@
+title: $:/themes/tiddlywiki/starlight/options/
+
+sidebarresizer: show
diff --git a/themes/tiddlywiki/tight-heavier/options.multids b/themes/tiddlywiki/tight-heavier/options.multids
@@ -0,0 +1,3 @@
+title: $:/themes/tiddlywiki/tight-heavier/options/
+
+sidebarresizer: show
diff --git a/themes/tiddlywiki/tight/options.multids b/themes/tiddlywiki/tight/options.multids
@@ -0,0 +1,3 @@
+title: $:/themes/tiddlywiki/tight/options/
+
+sidebarresizer: show
diff --git a/themes/tiddlywiki/vanilla/sidebar-resizer.tid b/themes/tiddlywiki/vanilla/sidebar-resizer.tid
@@ -6,130 +6,134 @@ code-body: yes
 
 \rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock conditional
 
-@media (min-width: <<sidebarbreakpoint>>) {
-
-	.tc-sidebar-resizer {
-		position: fixed;
-		top: 0;
-		height: 100%;
-		width: <<sidebar.resizer.width>>;
-		transition: opacity 100ms;
-		opacity: 0.1;
-		cursor: ew-resize;
-		background: linear-gradient(<<colour muted-foreground>>, <<colour muted-foreground>>) no-repeat center/2px 100%;
-	}
-
-	.tc-sidebar-resizer:hover {
-		opacity: 0.6;
-	}
+<%if [<get.theme.explicit.option sidebarresizer>match[show]] %>
 
-	@media (pointer: coarse) {
+	@media (min-width: <<sidebarbreakpoint>>) {
 
 		.tc-sidebar-resizer {
-			background: <<colour muted-foreground>>;
+			position: fixed;
+			top: 0;
+			height: 100%;
+			width: <<sidebar.resizer.width>>;
+			transition: opacity 100ms;
+			opacity: 0.1;
+			cursor: ew-resize;
+			background: linear-gradient(<<colour muted-foreground>>, <<colour muted-foreground>>) no-repeat center/2px 100%;
 		}
 
 		.tc-sidebar-resizer:hover {
-			opacity: 0.1;
+			opacity: 0.6;
 		}
-	}
-
-	.tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove {
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		width: 100%;
-		height: 100%;
-		min-height: 100%;
-		z-index: -1;
-	}
 
-	.tc-sidebar-resizer, .tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove {
-		touch-action: none;
-		user-select: none;
-	}
+		@media (pointer: coarse) {
 
-	<%if [[$:/state/sidebar/resizing]!is[missing]] %>
+			.tc-sidebar-resizer {
+				background: <<colour muted-foreground>>;
+			}
 
-		.tc-sidebar-resizer-pointermove-eventcatcher-wrapper {
-			z-index: 801;
+			.tc-sidebar-resizer:hover {
+				opacity: 0.1;
+			}
 		}
 
-		.tc-sidebar-resizer-pointermove-eventcatcher {
-			z-index: 802;
+		.tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove {
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			width: 100%;
+			height: 100%;
+			min-height: 100%;
+			z-index: -1;
 		}
 
-		.tc-sidebar-resizer-pointermove {
-			z-index: 803;
-			cursor: ew-resize;
+		.tc-sidebar-resizer, .tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove {
+			touch-action: none;
+			user-select: none;
 		}
 
-		.tc-sidebar-resizer {
-			opacity: 0.6;
-		}
+		<%if [[$:/state/sidebar/resizing]!is[missing]] %>
 
-		@media (pointer: coarse) {
+			.tc-sidebar-resizer-pointermove-eventcatcher-wrapper {
+				z-index: 801;
+			}
+
+			.tc-sidebar-resizer-pointermove-eventcatcher {
+				z-index: 802;
+			}
+
+			.tc-sidebar-resizer-pointermove {
+				z-index: 803;
+				cursor: ew-resize;
+			}
 
 			.tc-sidebar-resizer {
-				opacity: 0.25;
+				opacity: 0.6;
 			}
-		}
 
-	<% endif %>
+			@media (pointer: coarse) {
 
-	<%if [<set.storywidth.storyright>match[yes]] %>
+				.tc-sidebar-resizer {
+					opacity: 0.25;
+				}
+			}
 
-		.tc-sidebar-resizer {
-			left: clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)),clamp(calc(<<get.theme.metric storywidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)),max(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)),calc(<<get.theme.metric storyright>> - (2 * <<get.theme.metric storypaddingright>> / 3))),max(calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3) + (<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - <<get.theme.metric storyright>>)),calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)))),calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)));
-		}
+		<% endif %>
 
-		.tc-sidebar-left .tc-sidebar-resizer {
-			left: auto;
-			right: clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)),clamp(calc(<<get.theme.metric storywidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)),max(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)),calc(<<get.theme.metric storyright>> - (2 * <<get.theme.metric storypaddingright>> / 3))),max(calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3) + (<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - <<get.theme.metric storyright>>)),calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)))),calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)));
-		}
+		<%if [<set.storywidth.storyright>match[yes]] %>
 
-	<% endif %>
+			.tc-sidebar-resizer {
+				left: clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)),clamp(calc(<<get.theme.metric storywidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)),max(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)),calc(<<get.theme.metric storyright>> - (2 * <<get.theme.metric storypaddingright>> / 3))),max(calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3) + (<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - <<get.theme.metric storyright>>)),calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)))),calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)));
+			}
 
-	<%if [<set.sidebarwidth>match[yes]] %>
+			.tc-sidebar-left .tc-sidebar-resizer {
+				left: auto;
+				right: clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)),clamp(calc(<<get.theme.metric storywidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)),max(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)),calc(<<get.theme.metric storyright>> - (2 * <<get.theme.metric storypaddingright>> / 3))),max(calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3) + (<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - <<get.theme.metric storyright>>)),calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)))),calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)));
+			}
 
-		.tc-sidebar-resizer {
-			left: clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> + (<<get.theme.metric storypaddingright>> / 3)),calc(100% - <<get.theme.metric sidebarwidth>> + (<<get.theme.metric storypaddingright>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> + (<<get.theme.metric storypaddingright>> / 3)));
-		}
+		<% endif %>
 
-		.tc-sidebar-left .tc-sidebar-resizer {
-			left: auto;
-			right: clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> + (<<get.theme.metric storypaddingright>> / 3)),calc(100% - <<get.theme.metric sidebarwidth>> + (<<get.theme.metric storypaddingright>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> + (<<get.theme.metric storypaddingright>> / 3)));
-		}
+		<%if [<set.sidebarwidth>match[yes]] %>
 
-	<% endif %>
+			.tc-sidebar-resizer {
+				left: clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> + (<<get.theme.metric storypaddingright>> / 3)),calc(100% - <<get.theme.metric sidebarwidth>> + (<<get.theme.metric storypaddingright>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> + (<<get.theme.metric storypaddingright>> / 3)));
+			}
 
-	<%if [<set.centralised>match[yes]] %>
+			.tc-sidebar-left .tc-sidebar-resizer {
+				left: auto;
+				right: clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> + (<<get.theme.metric storypaddingright>> / 3)),calc(100% - <<get.theme.metric sidebarwidth>> + (<<get.theme.metric storypaddingright>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> + (<<get.theme.metric storypaddingright>> / 3)));
+			}
 
-		.tc-sidebar-resizer {
-			left: min(calc(50% + (<<get.theme.metric storywidth>> / 2) - (2 * <<get.theme.metric storypaddingright>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)));
-		}
+		<% endif %>
 
-		.tc-sidebar-left .tc-sidebar-resizer {
-			left: auto;
-			right: min(calc(50% + (<<get.theme.metric storywidth>> / 2) - (2 * <<get.theme.metric storypaddingright>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)));
-		}
+		<%if [<set.centralised>match[yes]] %>
 
-	<% endif %>
+			.tc-sidebar-resizer {
+				left: min(calc(50% + (<<get.theme.metric storywidth>> / 2) - (2 * <<get.theme.metric storypaddingright>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)));
+			}
 
-	<%if [{$:/state/sidebar}match[no]] %>
+			.tc-sidebar-left .tc-sidebar-resizer {
+				left: auto;
+				right: min(calc(50% + (<<get.theme.metric storywidth>> / 2) - (2 * <<get.theme.metric storypaddingright>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)));
+			}
 
-		.tc-sidebar-resizer-pointerdown-eventcatcher, .tc-sidebar-resizer-pointermove-eventcatcher-wrapper, .tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove, .tc-sidebar-resizer {
-			display: none;
-		}
+		<% endif %>
+
+		<%if [{$:/state/sidebar}match[no]] %>
 
-	<% endif %>
+			.tc-sidebar-resizer-pointerdown-eventcatcher, .tc-sidebar-resizer-pointermove-eventcatcher-wrapper, .tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove, .tc-sidebar-resizer {
+				display: none;
+			}
+
+		<% endif %>
 
-}
+	}
 
-@media (max-width: <<sidebarbreakpoint-minus-one>>) {
+	@media (max-width: <<sidebarbreakpoint-minus-one>>) {
 
-	.tc-sidebar-resizer-pointerdown-eventcatcher, .tc-sidebar-resizer-pointermove-eventcatcher-wrapper, .tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove, .tc-sidebar-resizer {
-		display: none;
+		.tc-sidebar-resizer-pointerdown-eventcatcher, .tc-sidebar-resizer-pointermove-eventcatcher-wrapper, .tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove, .tc-sidebar-resizer {
+			display: none;
+		}
 	}
-}
+
+<% endif %>