mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2025-01-10 01:10:28 +00:00
add one-cell-slider procedure and use it for editor and preview
This commit is contained in:
BurningTreeC
parent
e61dd8211f
commit
530500ec68
@ -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]] }}}
|
||||
|
||||
@ -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
|
||||
<$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"/>
|
||||
|
||||
\procedure tp-tiddler-preview()
|
||||
<$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>
|
||||
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user