Sidebar-resizer: change $:/themes/... tiddlers

core/language/en-GB/Misc.multids

@@ -47,6 +47,7 @@ InternalJavaScriptError/Title: Internal JavaScript Error
 InternalJavaScriptError/Hint: Well, this is embarrassing. It is recommended that you restart TiddlyWiki by refreshing your browser
 LayoutSwitcher/Description: Open the layout switcher
 LazyLoadingWarning: <p>Trying to load external content from ''<$text text={{!!_canonical_uri}}/>''</p><p>If this message doesn't disappear, either the tiddler content type doesn't match the type of the external content, or you may be using a browser that doesn't support external content for wikis loaded as standalone files. See https://tiddlywiki.com/#ExternalText</p>
+Left: Left
 LoginToTiddlySpace: Login to TiddlySpace
 Manager/Controls/FilterByTag/None: (none)
 Manager/Controls/FilterByTag/Prompt: Filter by tag:
@@ -73,6 +74,7 @@ PageTemplate/Description: the default ~TiddlyWiki layout
 PageTemplate/Name: Standard Layout
 PluginReloadWarning: Please save {{$:/core/ui/Buttons/save-wiki}} and reload {{$:/core/ui/Buttons/refresh}} to allow changes to ~JavaScript plugins to take effect
 RecentChanges/DateFormat: DDth MMM YYYY
+Right: Right
 Shortcuts/Input/AdvancedSearch/Hint: Open the ~AdvancedSearch panel from within the sidebar search field
 Shortcuts/Input/Accept/Hint: Accept the selected item
 Shortcuts/Input/AcceptVariant/Hint: Accept the selected item (variant)

core/language/en-GB/ThemeTweaks.multids

@@ -1,11 +1,13 @@
 title: $:/language/ThemeTweaks/
 
 ThemeTweaks: Theme Tweaks
-ThemeTweaks/Hint: You can tweak certain aspects of the ''Vanilla'' theme.
+ThemeTweaks/Hint: You can tweak certain aspects of the ''<$text text={{{ [<get.current.theme>get[name]] :else[[current]] }}}/>'' theme.
 Options: Options
 Options/SidebarLayout: Sidebar layout
 Options/SidebarLayout/Fixed-Fluid: Fixed story, fluid sidebar
 Options/SidebarLayout/Fluid-Fixed: Fluid story, fixed sidebar
+Options/SidebarPosition: Sidebar position
+Options/SidebarResizer: Sidebar resizer
 Options/StickyTitles: Sticky titles
 Options/StickyTitles/Hint: Causes tiddler titles to "stick" to the top of the browser window
 Options/CodeWrapping: Wrap long lines in code blocks
@@ -26,17 +28,30 @@ Metrics/FontSize: Font size
 Metrics/LineHeight: Line height
 Metrics/BodyFontSize: Font size for tiddler body
 Metrics/BodyLineHeight: Line height for tiddler body
+Metrics/PreviewSliderWidth: Preview slider width
+Metrics/PreviewSliderWidth/Hint: the width of the slider between editor and editor preview
+Metrics/SidebarPadding: Sidebar padding
+Metrics/SidebarPadding/Hint: the padding of the sidebar between sidebar and story river - determines the position of the sidebar resizer
+Metrics/SidebarResizer/Hint: the values for `storyleft`, `storyright`, `storywidth`, `storyminwidth`, `sidebarwidth` and `sidebarminwidth` need to be ''absolute'' CSS units, ''percentages'' or ''em'' units in order for the sidebar resizer to work
 Metrics/StoryLeft: Story left position
 Metrics/StoryLeft/Hint: how far the left margin of the story river<br>(tiddler area) is from the left of the page
+Metrics/StoryMinWidth: Minimum Story width
+Metrics/StoryMinWidth/Hint: the minimun width of the story river
+Metrics/StoryPaddingLeft: Story Padding Left
+Metrics/StoryPaddingLeft/Hint: the left padding of the story river
+Metrics/StoryPaddingRight: Story Padding Right
+Metrics/StoryPaddingRight/Hint: the right padding of the story river, also controls the width and positioning of the resizer
 Metrics/StoryTop: Story top position
 Metrics/StoryTop/Hint: how far the top margin of the story river<br>is from the top of the page
 Metrics/StoryRight: Story right
 Metrics/StoryRight/Hint: how far the left margin of the sidebar <br>is from the left of the page
 Metrics/StoryWidth: Story width
 Metrics/StoryWidth/Hint: the overall width of the story river
-Metrics/TiddlerWidth: Tiddler width
-Metrics/TiddlerWidth/Hint: within the story river
 Metrics/SidebarBreakpoint: Sidebar breakpoint
 Metrics/SidebarBreakpoint/Hint: the minimum page width at which the story<br>river and sidebar will appear side by side
+Metrics/SidebarMinWidth: Minimum Sidebar width
+Metrics/SidebarMinWidth/Hint: the minimum width of the sidebar
 Metrics/SidebarWidth: Sidebar width
 Metrics/SidebarWidth/Hint: the width of the sidebar in fluid-fixed layout
+Metrics/TiddlerWidth: Tiddler width
+Metrics/TiddlerWidth/Hint: within the story river

core/ui/EditTemplate/body-editor.tid

@@ -5,7 +5,7 @@ title: $:/core/ui/EditTemplate/body/editor
 <$edit
 
   field="text"
-  class="tc-edit-texteditor tc-edit-texteditor-body"
+  class=<<get.tc-edit-texteditor.class>>
   placeholder={{$:/language/EditTemplate/Body/Placeholder}}
   tabindex={{$:/config/EditTabIndex}}
   focus={{{ [{$:/config/AutoFocus}match[text]then[true]] ~[[false]] }}}

core/ui/EditTemplate/body/default.tid

@@ -1,9 +1,23 @@
 title: $:/core/ui/EditTemplate/body/default
 
-\function edit-preview-state()
+\function get.edit-preview-state()
 [{$:/config/ShowEditPreview/PerTiddler}!match[yes]then[$:/state/showeditpreview]] :else[<qualified-preview-state>] +[get[text]] :else[[no]]
 \end
 
+\function get.tc-edit-texteditor.class() tc-edit-texteditor tc-edit-texteditor-body [<get.edit-preview-state>match[yes]then<identifier>addprefix[tc-edit-texteditor-identified-]] +[join[ ]]
+
+\function get.tc-tiddler-preview-preview.class() tc-tiddler-preview-preview [<identifier>addprefix[tc-tiddler-preview-preview-identified-]] +[join[ ]]
+
+\function get.preview.width() [<sidebarWidthTiddler>get[text]]
+
+\function get.style.grid-template-columns()
+[<get.edit-preview-state>!match[yes]then[1fr]]
+:else[<sidebarWidthTiddler>is[tiddler]then[calc(100% - ]addsuffix<get.preview.width>addsuffix[) ]addsuffix[calc(]addsuffix<get.preview.width>addsuffix[)]]
+:else[[repeat(2, minmax(0px, 1fr))]]
+\end
+
+\function get.slider.condition() [<get.edit-preview-state>match[yes]] :else[[no]]
+
 \define config-visibility-title()
 $:/config/EditorToolbarButtons/Visibility/$(currentTiddler)$
 \end
@@ -12,33 +26,50 @@ $:/config/EditorToolbarButtons/Visibility/$(currentTiddler)$
 <$action-popup $state=<<importState>> $coords="(0,0,0,0)" $floating="yes"/>
 \end
 
-\whitespace trim
-<$let
-	qualified-preview-state=<<qualify "$:/state/showeditpreview">>
-	editPreviewStateTiddler={{{ [{$:/config/ShowEditPreview/PerTiddler}!match[yes]then[$:/state/showeditpreview]] :else[<qualified-preview-state>] }}}
-	importTitle=<<qualify $:/ImportImage>>
-	importState=<<qualify $:/state/ImportImage>> >
-<$dropzone importTitle=<<importTitle>> autoOpenOnImport="no" contentTypesFilter={{$:/config/Editor/ImportContentTypesFilter}} class="tc-dropzone-editor" enable={{{ [{$:/config/DragAndDrop/Enable}match[no]] :else[subfilter{$:/config/Editor/EnableImportFilter}then[yes]else[no]] }}} filesOnly="yes" actions=<<importFileActions>> >
-<div>
-<div class={{{ [<edit-preview-state>match[yes]then[tc-tiddler-preview]else[tc-tiddler-preview-hidden]] [[tc-tiddler-editor]] +[join[ ]] }}}>
+\procedure tp-tiddler-editor-preview()
+<div
+	class={{{ [<get.edit-preview-state>match[yes]then[tc-tiddler-preview]else[tc-tiddler-preview-hidden]] [[tc-tiddler-editor]] +[join[ ]] }}}
+	style.grid-template-columns=<<get.style.grid-template-columns>>>
 
-<$transclude tiddler="$:/core/ui/EditTemplate/body/editor" mode="inline"/>
+	<$transclude tiddler="$:/core/ui/EditTemplate/body/editor" mode="inline"/>
 
-<$list filter="[<editPreviewStateTiddler>get[text]match[yes]]" variable="ignore">
+	<$list filter="[<editPreviewStateTiddler>get[text]match[yes]]" variable="ignore">
 
-<div class="tc-tiddler-preview-preview" data-tiddler-title={{!!draft.title}} data-tags={{!!tags}}>
+		<div class=<<get.tc-tiddler-preview-preview.class>> data-tiddler-title={{!!draft.title}} data-tags={{!!tags}}>
 
-<$transclude tiddler={{$:/state/editpreviewtype}} mode="inline">
+			<$transclude tiddler={{$:/state/editpreviewtype}} mode="inline">
 
-<$transclude tiddler="$:/core/ui/EditTemplate/body/preview/output" mode="inline"/>
+				<$transclude tiddler="$:/core/ui/EditTemplate/body/preview/output" mode="inline"/>
 
-</$transclude>
+			</$transclude>
 
-</div>
+		</div>
 
-</$list>
+	</$list>
 
 </div>
+\end
+
+\whitespace trim
+<$let
+	qualified-preview-state=<<qualify "$:/state/showeditpreview">>
+	editPreviewStateTiddler={{{ [{$:/config/ShowEditPreview/PerTiddler}!match[yes]then[$:/state/showeditpreview]] :else[<qualified-preview-state>] }}}
+	importTitle=<<qualify $:/ImportImage>>
+	importState=<<qualify $:/state/ImportImage>>
+	identifier={{{ [<qualify>addsuffix[-]addsuffix<currentTiddler>sha256[]] }}}
+	sidebarWidthTiddler={{{ [<identifier>addprefix[$:/state/resizer/previewwidth-]] }}} >
+<$dropzone importTitle=<<importTitle>> autoOpenOnImport="no" contentTypesFilter={{$:/config/Editor/ImportContentTypesFilter}} class="tc-dropzone-editor" enable={{{ [{$:/config/DragAndDrop/Enable}match[no]] :else[subfilter{$:/config/Editor/EnableImportFilter}then[yes]else[no]] }}} filesOnly="yes" actions=<<importFileActions>> >
+<div>
+
+<$transclude
+	$variable="editor-preview-slider"
+	class="tc-edit-texteditor-slider"
+	template="tp-tiddler-editor-preview"
+	sliderCondition=<<get.slider.condition>>
+	mode="inline"
+	padding="0px"
+	sliderWidth=<<get.theme.metric previewsliderwidth>>
+/>
 
 </div>
 

core/ui/PageTemplate/sidebar-resizer.tid

@@ -0,0 +1,35 @@
+title: $:/core/ui/PageTemplate/sidebar-resizer
+tags: $:/tags/PageTemplate
+list-after: $:/core/ui/PageTemplate/story
+code-body: yes
+
+\import [function[get.base.functions.theme],<get.current.theme>first[]is[tiddler]] :else[function[get.base.functions.theme],<get.current.theme>first[]is[shadow]] :else[[$:/themes/tiddlywiki/vanilla/functions]] [[$:/core/procedures/sidebar-resizer]]
+\function resizer.state.tiddler() $:/state/sidebar/resizing
+\function resizer.state() [{$:/state/sidebar}]
+\function resizer.class() tc-main-sidebar-resizer
+\function set.throttling() yes
+\whitespace trim
+
+<%if [<get.theme.explicit.option sidebarresizer>match[show]] %>
+
+	<$let
+		tv-set-storywidth-storyright=<<set.storywidth.storyright>>
+		tv-set-sidebarwidth=<<set.sidebarwidth>>
+		tv-set-centralised=<<set.centralised>>
+
+		storyLeftTiddler=<<get.story-left.tiddler>>
+		storyRightTiddler=<<get.story-right.tiddler>>
+		sidebarWidthTiddler=<<get.sidebar-width.tiddler>>
+		tiddlerWidthTiddler=<<get.tiddler-width.tiddler>>
+		storyWidthTiddler=<<get.story-width.tiddler>>
+		storyMinWidthTiddler=<<get.story-minwidth.tiddler>>
+		sidebarMinWidthTiddler=<<get.sidebar-minwidth.tiddler>>
+		storyPaddingLeftTiddler=<<get.story-padding-left.tiddler>>
+		storyPaddingRightTiddler=<<get.story-padding-right.tiddler>>
+	>
+
+		<$transclude $variable="sidebar-resizer"/>
+
+	</$let>
+
+<% endif %>

core/ui/PageTemplateClassFilters.tid

@@ -0,0 +1,4 @@
+title: $:/core/ui/PageTemplateClassFilters
+tags: $:/tags/ClassFilters/PageTemplate
+
+[<get.theme.option sidebarposition>match[left]then[tc-sidebar-left]]

core/wiki/functions/themes.tid

@@ -0,0 +1,109 @@
+title: $:/core/functions/themes
+tags: $:/tags/Global
+code-body: yes
+
+\function is.pixel.value(value) [<value>removesuffix[px]]
+\function is.percentage.value(value) [<value>removesuffix[%]]
+\function is.cm.value(value) [<value>removesuffix[cm]]
+\function is.mm.value(value) [<value>removesuffix[mm]]
+\function is.Q.value(value) [<value>removesuffix[Q]]
+\function is.in.value(value) [<value>removesuffix[in]]
+\function is.pc.value(value) [<value>removesuffix[pc]]
+\function is.pt.value(value) [<value>removesuffix[pt]]
+\function is.em.value(value) [<value>removesuffix[em]]
+
+\function convert.to.cm(value) [<value>divide[37.8]]
+\function convert.to.mm(value) [convert.to.cm<value>multiply[10]]
+\function convert.to.Q(value) [convert.to.cm<value>multiply[40]]
+\function convert.to.in(value) [<value>divide[96]]
+\function convert.to.pc(value) [convert.to.in<value>multiply[6]]
+\function convert.to.pt(value) [convert.to.in<value>multiply[72]]
+\function convert.to.em(value) [[storyTiddler]is[variable]then<value>divide{$:/themes/tiddlywiki/vanilla/metrics/bodyfontsize}] [[storyTiddler]!is[variable]then<value>divide{$:/themes/tiddlywiki/vanilla/metrics/fontsize}]
+
+\function convert.to.pixels(value)
+[is.pixel.value<value>]
+:else[is.cm.value<value>multiply[37.8]]
+:else[is.mm.value<value>multiply[37.8]divide[10]]
+:else[is.Q.value<value>multiply[37.8]divide[40]]
+:else[is.in.value<value>multiply[96]]
+:else[is.pc.value<value>multiply[96]divide[6]]
+:else[is.pt.value<value>multiply[96]divide[72]]
+:else[is.em.value<value>then[storyTiddler]is[variable]then<value>multiply{$:/themes/tiddlywiki/vanilla/metrics/bodyfontsize}]
+:else[is.em.value<value>then[storyTiddler]!is[variable]then<value>multiply{$:/themes/tiddlywiki/vanilla/metrics/fontsize}]
+\end
+
+\function convert.to.pixels.metric(value,metric) [<value>addsuffix<metric>] :map[convert.to.pixels<currentTiddler>]
+
+\function subtract.one.from.sidebarbreakpoint(value)
+[is.pixel.value<value>subtract[1]addsuffix[px]]
+:else[is.cm.value<value>convert.to.pixels.metric<value>,[cm]subtract[1]divide[37.8]addsuffix[cm]]
+:else[is.mm.value<value>convert.to.pixels.metric<value>,[mm]subtract[1]divide[37.8]multiply[10]addsuffix[mm]]
+:else[is.Q.value<value>convert.to.pixels.metric<value>,[Q]subtract[1]divide[37.8]multiply[40]addsuffix[Q]]
+:else[is.in.value<value>convert.to.pixels.metric<value>,[in]subtract[1]divide[96]addsuffix[in]]
+:else[is.pc.value<value>convert.to.pixels.metric<value>,[pc]subtract[1]divide[96]multiply[6]addsuffix[pc]]
+:else[is.pt.value<value>convert.to.pixels.metric<value>,[pt]subtract[1]divide[96]multiply[72]addsuffix[pt]]
+:else[is.em.value<value>convert.to.pixels.metric<value>,[em]subtract[1]divide{$:/themes/tiddlywiki/vanilla/metrics/fontsize}addsuffix[em]]
+\end
+
+\function sidebarbreakpoint() [{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}]
+
+\function sidebarbreakpoint-minus-one() [subtract.one.from.sidebarbreakpoint<sidebarbreakpoint>] :else[<sidebarbreakpoint>]
+
+\function add.one.to.breakpoint(value)
+[is.pixel.value<value>add[1]addsuffix[px]]
+:else[is.cm.value<value>convert.to.pixels.metric<value>,[cm]add[1]divide[37.8]addsuffix[cm]]
+:else[is.mm.value<value>convert.to.pixels.metric<value>,[mm]add[1]divide[37.8]multiply[10]addsuffix[mm]]
+:else[is.Q.value<value>convert.to.pixels.metric<value>,[Q]add[1]divide[37.8]multiply[40]addsuffix[Q]]
+:else[is.in.value<value>convert.to.pixels.metric<value>,[in]add[1]divide[96]addsuffix[in]]
+:else[is.pc.value<value>convert.to.pixels.metric<value>,[pc]add[1]divide[96]multiply[6]addsuffix[pc]]
+:else[is.pt.value<value>convert.to.pixels.metric<value>,[pt]add[1]divide[96]multiply[72]addsuffix[pt]]
+:else[is.em.value<value>convert.to.pixels.metric<value>,[em]add[1]divide{$:/themes/tiddlywiki/vanilla/metrics/fontsize}addsuffix[em]]
+\end
+
+\function breakpoint-plus-one() [add.one.to.breakpoint{$:/config/plugins/menubar/breakpoint}] :else[{$:/config/plugins/menubar/breakpoint}]
+
+\function get.base.theme.metric.recursive(theme,metric) [<theme>get[dependents]enlist-input[]] :map[get.base.theme.metric<currentTiddler>,<metric>]
+
+\function get.base.theme.metric(theme,metric)
+[<theme>addsuffix[/metrics/]addsuffix<metric>is[tiddler]]
+:else[<theme>addsuffix[/metrics/]addsuffix<metric>is[shadow]]
+:else[get.base.theme.metric.recursive<theme>,<metric>]
+\end
+
+\function get.base.theme(theme,metric) [get.base.theme.metric<theme>,<metric>first[]removesuffix<metric>removesuffix[/metrics/]]
+
+\function get.theme.metric(metric) [get.base.theme.metric<get.current.theme>,<metric>first[]get[text]]
+
+\function get.base.theme.option.recursive(theme,option) [<theme>get[dependents]enlist-input[]] :map[get.base.theme.option<currentTiddler>,<option>]
+
+\function get.base.theme.option(theme,option)
+[<theme>addsuffix[/options/]addsuffix<option>is[tiddler]]
+:else[<theme>addsuffix[/options/]addsuffix<option>is[shadow]]
+:else[get.base.theme.option.recursive<theme>,<option>]
+\end
+
+\function get.theme.option(option) [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)
+[get.base.theme<get.current.theme>,<metric>addsuffix[/metrics/]addsuffix<metric>is[tiddler]]
+:else[get.base.theme<get.current.theme>,<metric>addsuffix[/metrics/]addsuffix<metric>is[shadow]]
+:else[[$:/themes/tiddlywiki/vanilla/metrics/]addsuffix<metric>]
+\end
+
+\function set.theme.metric(metric)
+[get.base.theme.metric<get.current.theme>,<metric>first[]is[shadow]]
+:else[get.base.theme.metric<get.current.theme>,<metric>first[]!is[shadow]is[tiddler]]
+:else[[$:/themes/tiddlywiki/vanilla/metrics/]addsuffix<metric>]
+\end
+
+\function get.base.functions.theme.recursive(theme) [<theme>get[dependents]enlist-input[]] :map[get.base.functions.theme<currentTiddler>]
+
+\function get.base.functions.theme(theme)
+[<theme>addsufix[/functions]is[tiddler]]
+:else[<theme>addsuffix[/functions]is[shadow]]
+:else[get.base.functions.theme.recursive<theme>]
+\end
+
+\function get.current.theme() [{$:/theme}!is[blank]] :else[all[tiddlers+shadows]plugin-type[theme]plugin-priority[0]first[]]