mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2025-01-25 00:16:52 +00:00
Code Issues Releases Wiki Activity

updates

Browse Source
This commit is contained in:
BurningTreeC 2024-10-31 06:44:34 +01:00
parent bb673fc807
commit d92e4d9904
5 changed files with 144 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
core/ui/EditTemplate/body/default.tid
View File

@ -1,10 +1,20 @@
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 [<edit-preview-state>match[yes]then<identifier>addprefix[tc-edit-texteditor-identified-]] +[join[ ]]
\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.preview.width() [<sidebarWidthTiddler>get[text]]
\function get.style.grid-template-columns()
[<get.edit-preview-state>!match[yes]then[1fr]]
:else[<sidebarWidthTiddler>!is[missing]then[calc(100% - ]addsuffix<get.preview.width>addsuffix[) ]addsuffix<get.preview.width>]
: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)$
@ -14,20 +24,28 @@ $:/config/EditorToolbarButtons/Visibility/$(currentTiddler)$
<$action-popup $state=<<importState>> $coords="(0,0,0,0)" $floating="yes"/>
\end
\procedure tp-tiddler-preview()
<$list filter="[<editPreviewStateTiddler>get[text]match[yes]]" variable="ignore">
\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>>>
<div class="tc-tiddler-preview-preview" data-tiddler-title={{!!draft.title}} data-tags={{!!tags}}>
<$transclude tiddler="$:/core/ui/EditTemplate/body/editor" mode="inline"/>
<$transclude tiddler={{$:/state/editpreviewtype}} mode="inline">
<$list filter="[<editPreviewStateTiddler>get[text]match[yes]]" variable="ignore">
<$transclude tiddler="$:/core/ui/EditTemplate/body/preview/output" mode="inline"/>
<div class="tc-tiddler-preview-preview" data-tiddler-title={{!!draft.title}} data-tags={{!!tags}}>
</$transclude>
<$transclude tiddler={{$:/state/editpreviewtype}} mode="inline">
<$transclude tiddler="$:/core/ui/EditTemplate/body/preview/output" mode="inline"/>
</$transclude>
</div>
</$list>
</div>
</$list>
\end
\whitespace trim
@ -35,27 +53,22 @@ $:/config/EditorToolbarButtons/Visibility/$(currentTiddler)$
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>> >
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>
<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"
$variable="editor-preview-slider"
class="tc-edit-texteditor-slider"
template="tp-tiddler-editor-preview"
sliderCondition=<<get.slider.condition>>
mode="inline"
padding="0px"
sliderWidth="6px"
/>
</$let>
</div>
</div>
</$dropzone>

73
core/wiki/macros/sidebar-resizer.tid
View File

@ -410,3 +410,76 @@ title: $:/core/procedures/sidebar-resizer
</$set>
\end
\procedure editor-resizer(template:"",mode:"block",sliderCondition:"yes",eventCatcherClass:"")
<$set name="resizerWidthDivided" value={{{ [<get.resizer.style.width>divide[2]] }}}>
<$eventcatcher
tag="div"
class=<<get.active.class tc-sidebar-resizer-pointerdown-eventcatcher>>
selector=".tc-sidebar-resizer"
matchSelector=".tc-sidebar-resizer"
$pointerdown=<<get.sidebar-resizer.pointerdown.actions>>
$pointerup=<<sidebar-resizer-pointercancel-actions>>>
<%if [<resizer.state>!match[no]] %>
<$eventcatcher
tag="div"
class=<<get.active.class tc-sidebar-resizer-pointermove-eventcatcher-wrapper>>
selector=".tc-sidebar-resizer"
matchSelector=".tc-sidebar-resizer"
$pointerup={{{ [<get.resizer.state>!is[missing]then<sidebar-resizer-pointercancel-actions>] }}}>
<$eventcatcher
tag="div"
selector=".tc-sidebar-resizer-pointermove"
matchSelector=".tc-sidebar-resizer-pointermove"
class=<<get.active.class tc-sidebar-resizer-pointermove-eventcatcher>>
$pointerup=<<sidebar-resizer-pointercancel-actions>>
$pointerleave=<<sidebar-resizer-pointercancel-actions>>
$pointerout=<<sidebar-resizer-pointercancel-actions>>
$pointercancel=<<sidebar-resizer-pointercancel-actions>>
$pointerdown=<<sidebar-resizer-pointercancel-actions>>
$touchstart=<<sidebar-resizer-pointercancel-actions>>
$pointermove=<<sidebar-resizer-pointermove-actions>>
$contextmenu=<<sidebar-resizer-pointercancel-actions>>>
<div class=<<get.active.class tc-sidebar-resizer-pointermove>>/>
</$eventcatcher>
<%if [<sliderCondition>match[yes]] %>
<div
class=<<get.resizer.class>>
style.position=<<get.resizer.style.position>>
style.left=<<get.resizer.style.left>>
style.width=<<get.resizer.style.width>>
/>
<% endif %>
<%if [<template>is[variable]] [<template>is[tiddler]] %>
<%if [<template>is[variable]] %>
<$transclude $variable=<<template>> mode=<<mode>>/>
<% else %>
<$transclude $tiddler=<<template>> mode=<<mode>>/>
<% endif %>
<% endif %>
</$eventcatcher>
<% endif %>
</$eventcatcher>
</$set>
\end

62
core/wiki/macros/sliders.tid
View File

@ -2,7 +2,7 @@ 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",leftMinWidth:"100px",rightMinWidth:"100px")
\procedure editor-preview-slider(class:"",width:"100%",minHeight:"10px",template:"",mode:"block",sliderWidth:"12px",padding:"12px",sliderCondition:"yes",leftMinWidth:"250px",rightMinWidth:"250px")
\import $:/core/procedures/sidebar-resizer
\function get.resizer.style.position() absolute
\function get.template-right.width() [<sidebarWidthTiddler>get[text]] :else[[50%]]
@ -10,48 +10,34 @@ code-body: yes
\function get.resizer.style.width() [<sliderWidth>]
\function set.throttling() no
\function get.template.left()
\function get.preview.slider.class() [<class>]
\function get.left.minwidth() [<leftMinWidth>]
\function get.right.minwidth() [<rightMinWidth>]
\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={{{ [<storyLeftTiddler>!is[blank]] :else[<qualify>addsuffix[-]addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storyleft-]] }}}
storyRightTiddler={{{ [<storyRightTiddler>!is[blank]] :else[<qualify>addsuffix[-]addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storyright-]] }}}
sidebarWidthTiddler={{{ [<sidebarWidthTiddler>!is[blank]] :else[<qualify>addsuffix[-]addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/rightwidth-]] }}}
tiddlerWidthTiddler={{{ [<tiddlerWidthTiddler>!is[blank]] :else[<qualify>addsuffix[-]addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/tiddlerwidth-]] }}}
storyWidthTiddler={{{ [<storyWidthTiddler>!is[blank]] :else[<qualify>addsuffix[-]addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storywidth-]] }}}
storyMinWidthTiddler={{{ [<storyMinWidthTiddler>!is[blank]] :else[<qualify>addsuffix[-]addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storywidth-]] }}}
sidebarMinWidthTiddler={{{ [<sidebarMinWidthTiddler>!is[blank]] :else[<qualify>addsuffix[-]addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storyminwidth-]] }}}
storyPaddingLeftTiddler={{{ [<storyPaddingLeftTiddler>!is[blank]] :else[<qualify>addsuffix[-]addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storypaddingleft-]] }}}
storyPaddingRightTiddler={{{ [<storyPaddingRightTiddler>!is[blank]] :else[<qualify>addsuffix[-]addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storypaddingright-]] }}}>
<$let
tv-set-storywidth-storyright="no"
tv-set-sidebarwidth="yes"
tv-set-centralised="no"
storyLeftTiddler={{{ [<storyLeftTiddler>!is[blank]] :else[<qualify>addsuffix[-]addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storyleft-]] }}}
storyRightTiddler={{{ [<storyRightTiddler>!is[blank]] :else[<qualify>addsuffix[-]addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storyright-]] }}}
sidebarWidthTiddler={{{ [<sidebarWidthTiddler>!is[blank]] :else[<qualify>addsuffix[-]addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/rightwidth-]] }}}
tiddlerWidthTiddler={{{ [<tiddlerWidthTiddler>!is[blank]] :else[<qualify>addsuffix[-]addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/tiddlerwidth-]] }}}
storyWidthTiddler={{{ [<storyWidthTiddler>!is[blank]] :else[<qualify>addsuffix[-]addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storywidth-]] }}}
storyMinWidthTiddler={{{ [<storyMinWidthTiddler>!is[blank]] :else[<qualify>addsuffix[-]addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storywidth-]] }}}
sidebarMinWidthTiddler={{{ [<sidebarMinWidthTiddler>!is[blank]] :else[<qualify>addsuffix[-]addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storyminwidth-]] }}}
storyPaddingLeftTiddler={{{ [<storyPaddingLeftTiddler>!is[blank]] :else[<qualify>addsuffix[-]addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storypaddingleft-]] }}}
storyPaddingRightTiddler={{{ [<storyPaddingRightTiddler>!is[blank]] :else[<qualify>addsuffix[-]addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storypaddingright-]] }}}>
<$transclude
$variable="editor-resizer"
template=<<template>>
sliderCondition=<<sliderCondition>>
eventCatcherClass="tc-one-cell-eventcatcher"
mode=<<mode>>
/>
<$transclude
$variable="sidebar-resizer"
templateLeft="get.template.left"
templateRight=<<template>>
sliderCondition=<<sliderCondition>>
eventCatcherClass="tc-one-cell-eventcatcher"
mode=<<mode>>
zIndexLeft="-1"
/>
</$let>
</div>
</$let>
\end
\procedure two-cell-slider(width:"100%",minHeight:"10px",templateLeft:"",templateRight:"",mode:"block",sliderWidth:"12px",padding:"12px",sliderCondition:"yes",leftMinWidth:"100px",rightMinWidth:"100px")
@ -101,4 +87,4 @@ code-body: yes
</$let>
</div>
\end
\end

5
themes/tiddlywiki/vanilla/base.tid
View File

@ -1426,7 +1426,7 @@ html body.tc-body.tc-single-tiddler-window {
*/
.tc-editor-toolbar {
margin-top: 8px;
padding-top: 8px;
}
.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview .tc-editor-toolbar,
@ -1697,6 +1697,7 @@ html body.tc-body.tc-single-tiddler-window {
"editor";
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
width: 100%;
}
.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview .tc-tiddler-preview-preview {
@ -1704,7 +1705,7 @@ html body.tc-body.tc-single-tiddler-window {
overflow-wrap: anywhere;
word-break: normal;
border: 1px solid <<colour tiddler-editor-border>>;
margin: 4px 0 3px 0;
margin: 4px 0 3px 9px;
padding: 3px 3px 3px 3px;
}

27
themes/tiddlywiki/vanilla/sidebar-resizer.tid
View File

@ -40,9 +40,15 @@ code-body: yes
height: 100%;
}
.tc-sidebar-resizer-pointerdown-eventcatcher.tc-one-cell-eventcatcher {
width: 200%;
left: -100%;
.tc-edit-texteditor-slider > .tc-sidebar-resizer-pointerdown-eventcatcher.tc-one-cell-eventcatcher {
position: absolute;
width: 100%;
top: 0;
left: 0;
}
.tc-editor-toolbar {
background-color: <<colour tiddler-background>>;
}
.tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove {
@ -166,18 +172,3 @@ code-body: yes
.tc-tiddler-frame contenteditable[class*="tc-edit-texteditor-identified-"].tc-edit-texteditor {
width: calc(100% - 3px);
}
<$list filter="[all[tiddlers]prefix[$:/state/resizer/texteditorwidth-]]" variable="textEditorWidthTiddler">
<$let classIdentifier={{{ [<textEditorWidthTiddler>removeprefix[$:/state/resizer/texteditorwidth-]] }}}>
.tc-tiddler-frame iframe.tc-edit-texteditor.tc-edit-texteditor-identified-<<classIdentifier>>,
.tc-tiddler-frame textarea.tc-edit-texteditor.tc-edit-texteditor-identified-<<classIdentifier>>,
.tc-tiddler-frame contenteditable.tc-edit-texteditor.tc-edit-texteditor-identified-<<classIdentifier>> {
width: calc(2 * (100% - {{{ [<textEditorWidthTiddler>get[text]] }}}) - 3px);
max-width: 200%;
}
</$let>
</$list>