add one-cell-slider procedure and use it for editor and preview

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

@@ -4,6 +4,8 @@ title: $:/core/ui/EditTemplate/body/default
 [{$:/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 [<identifier>addprefix[tc-edit-texteditor-]] +[join[ ]]
+
 \define config-visibility-title()
 $:/config/EditorToolbarButtons/Visibility/$(currentTiddler)$
 \end
@@ -12,18 +14,7 @@ $:/config/EditorToolbarButtons/Visibility/$(currentTiddler)$
 <$action-popup $state=<<importState>> $coords="(0,0,0,0)" $floating="yes"/>
 \end
 
-\whitespace trim
+\procedure tp-tiddler-preview()
-<$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[ ]] }}}>
-
-<$transclude tiddler="$:/core/ui/EditTemplate/body/editor" mode="inline"/>
-
 <$list filter="[<editPreviewStateTiddler>get[text]match[yes]]" variable="ignore">
 
 <div class="tc-tiddler-preview-preview" data-tiddler-title={{!!draft.title}} data-tags={{!!tags}}>
@@ -37,6 +28,30 @@ $:/config/EditorToolbarButtons/Visibility/$(currentTiddler)$
 </div>
 
 </$list>
+\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[ ]] }}}>
+
+<$let identifier={{{ [<qualify>addsuffix[-]addsuffix<currentTiddler>sha256[]] }}} sidebarWidthTiddler={{{ [<identifier>addprefix[$:/state/resizer/texteditorwidth-]] }}}>
+
+<$transclude tiddler="$:/core/ui/EditTemplate/body/editor" mode="inline"/>
+
+<$transclude
+	$variable="one-cell-slider"
+	template="tp-tiddler-preview"
+	mode="inline"
+	padding="0px"
+/>
+
+</$let>
 
 </div>
 

core/wiki/macros/sidebar-resizer.tid

@@ -289,7 +289,7 @@ title: $:/core/procedures/sidebar-resizer
 
 \function get.resizer.class() tc-sidebar-resizer [<get.resizer.state>!is[missing]then[tc-resizer-active]] [<resizer.class>] [<qualify>addsuffix[-]addsuffix<currentTiddler>sha256[]addprefix[tc-sidebar-resizer-]] +[join[ ]]
 
-\function get.active.class(class) [<class>] [<resizer.class>] [<get.resizer.state>!is[missing]then[tc-resizer-active]] +[join[ ]]
+\function get.active.class(class) [<class>] [<resizer.class>] [<eventCatcherClass>] [<get.resizer.state>!is[missing]then[tc-resizer-active]] +[join[ ]]
 
 \function get.sidebar-resizer.pointerdown.actions()
 [<get.resizer.state>match[$:/state/sidebar/resizing]then<sidebar-resizer-pointerdown-actions>]
@@ -302,7 +302,7 @@ title: $:/core/procedures/sidebar-resizer
 
 \function get.template-right.style.flex-basis() [<sliderCondition>match[no]then[0%]] :else[[calc(]addsuffix<get.template-right.width>addsuffix[ - ]addsuffix<resizerWidthDivided>addsuffix[px)]]
 
-\procedure sidebar-resizer(templateLeft:"",templateRight:"",mode:"block",sliderCondition:"yes")
+\procedure sidebar-resizer(templateLeft:"",templateRight:"",mode:"block",sliderCondition:"yes",eventCatcherClass:"",zIndexLeft:"")
 <$set name="resizerWidthDivided" value={{{ [<get.resizer.style.width>divide[2]] }}}>
 
 	<$eventcatcher
@@ -340,7 +340,7 @@ title: $:/core/procedures/sidebar-resizer
 
 				</$eventcatcher>
 
-				<%if [<templateLeft>!is[blank]] %>
+				<%if [<templateLeft>is[variable]] [<templateLeft>is[tiddler]] %>
 
 					<div
 						style.display="flex"
@@ -349,6 +349,7 @@ title: $:/core/procedures/sidebar-resizer
 						style.top="0"
 						style.left="0"
 						style.flex-basis=<<get.template-left.style.flex-basis>>
+						style.z-index=<<zIndexLeft>>
 					>
 
 						<%if [<templateLeft>is[variable]] %>
@@ -376,7 +377,7 @@ title: $:/core/procedures/sidebar-resizer
 
 				<% endif %>
 
-				<%if [<templateRight>!is[blank]then<sliderCondition>!match[no]] %>
+				<%if [<templateRight>is[variable]then<sliderCondition>!match[no]] [<templateRight>is[tiddler]then<sliderCondition>!match[no]] %>
 
 					<div
 						style.display="flex"

core/wiki/macros/sliders.tid

@@ -2,6 +2,56 @@ title: $:/core/procedures/sliders
 tags: $:/tags/Global
 code-body: yes
 
+\procedure one-cell-slider(width:"100%",minHeight:"10px",template:"",mode:"block",sliderWidth:"12px",padding:"12px",sliderCondition:"yes")
+\import $:/core/procedures/sidebar-resizer
+\function get.resizer.style.position() absolute
+\function get.template-right.width() [<sidebarWidthTiddler>get[text]] :else[[50%]]
+\function get.resizer.style.left() [[calc(100% - ]addsuffix<get.template-right.width>addsuffix[)]]
+\function get.resizer.style.width() [<sliderWidth>]
+\function set.throttling() no
+\function get.template.left()
+\whitespace trim
+
+<div
+	style.width=<<width>>
+	style.min-height=<<minHeight>>
+	style.display="flex"
+	style.flex-direction="column"
+	style.padding-left=<<padding>>
+	style.padding-right=<<padding>>
+	style.padding-top=<<padding>>
+	style.padding-bottom=<<padding>>
+>
+
+	<$let
+		tv-set-storywidth-storyright="no"
+		tv-set-sidebarwidth="yes"
+		tv-set-centralised="no"
+		storyLeftTiddler={{{ [<qualify>addsuffix[-]addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storyleft-]] }}}
+		storyRightTiddler={{{ [<qualify>addsuffix[-]addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storyright-]] }}}
+		sidebarWidthTiddler={{{ [<sidebarWidthTiddler>!is[blank]] :else[<qualify>addsuffix[-]addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/rightwidth-]] }}}
+		tiddlerWidthTiddler={{{ [<qualify>addsuffix[-]addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/tiddlerwidth-]] }}}
+		storyWidthTiddler={{{ [<qualify>addsuffix[-]addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storywidth-]] }}}
+		storyMinWidthTiddler={{{ [<qualify>addsuffix[-]addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storywidth-]] }}}
+		sidebarMinWidthTiddler={{{ [<qualify>addsuffix[-]addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storyminwidth-]] }}}
+		storyPaddingLeftTiddler={{{ [<qualify>addsuffix[-]addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storypaddingleft-]] }}}
+		storyPaddingRightTiddler={{{ [<qualify>addsuffix[-]addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storypaddingright-]] }}}>
+
+		<$transclude
+			$variable="sidebar-resizer"
+			templateLeft="get.template.left"
+			templateRight=<<template>>
+			sliderCondition=<<sliderCondition>>
+			eventCatcherClass="tc-one-cell-eventcatcher"
+			mode=<<mode>>
+			zIndexLeft="-1"
+		/>
+
+	</$let>
+
+</div>
+\end
+
 \procedure two-cell-slider(width:"100%",minHeight:"10px",templateLeft:"",templateRight:"",mode:"block",sliderWidth:"12px",padding:"12px",sliderCondition:"yes")
 \import $:/core/procedures/sidebar-resizer
 \function get.resizer.style.position() absolute

themes/tiddlywiki/vanilla/base.tid

@@ -1356,6 +1356,7 @@ button.tc-btn-invisible.tc-remove-tag-button {
 
 .tc-tiddler-frame iframe.tc-edit-texteditor {
 	background-color: <<colour tiddler-background>>;
+	z-index: 1;
 }
 
 .tc-tiddler-frame .tc-edit-fields input.tc-edit-fieldeditor,

themes/tiddlywiki/vanilla/sidebar-resizer.tid

@@ -4,7 +4,7 @@ code-body: yes
 
 \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]]
 
-\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock conditional
+\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock conditional html
 
 <%if [<get.theme.explicit.option sidebarresizer>match[show]] %>
 
@@ -40,6 +40,11 @@ code-body: yes
 			height: 100%;
 		}
 
+		.tc-sidebar-resizer-pointerdown-eventcatcher.tc-one-cell-eventcatcher {
+			width: 200%;
+			left: -100%;
+		}
+
 		.tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove {
 			position: absolute;
 			top: 0;
@@ -155,3 +160,16 @@ code-body: yes
 	}
 
 <% endif %>
+
+<$list filter="[all[tiddlers]prefix[$:/state/resizer/texteditorwidth-]]" variable="textEditorWidthTiddler">
+
+	<$let classIdentifier={{{ [<textEditorWidthTiddler>removeprefix[$:/state/resizer/texteditorwidth-]] }}}>
+
+		.tc-edit-texteditor.tc-edit-texteditor-<<classIdentifier>> {
+			width: calc(2 * (100% - {{{ [<textEditorWidthTiddler>get[text]] }}}));
+			max-width: 200%;
+		}
+
+	</$let>
+
+</$list>