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

updates

Browse Source
This commit is contained in:
BurningTreeC 2024-10-04 14:36:00 +02:00
parent 1e0d4b87fb
commit be6510bcb4
5 changed files with 173 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
core/ui/PageTemplate/sidebar-resizer.tid Normal file
View File

@ -0,0 +1,26 @@
title: $:/core/ui/PageTemplate/sidebar-resizer
tags: $:/tags/PageTemplate
list-after: $:/core/ui/PageTemplate/story
\import $:/core/macros/sidebar-resizer
\whitespace trim
<$eventcatcher tag="div" class="tc-sidebar-resizer-pointerdown-eventcatcher" selector=".tc-sidebar-resizer" matchSelector=".tc-sidebar-resizer" $pointerdown=<<sidebar-resizer-pointerdown-actions>> $pointerup=<<sidebar-resizer-pointercancel-actions>>>
<%if [{$:/state/sidebar}!match[no]] %>
<$eventcatcher tag="div" class="tc-sidebar-resizer-pointermove-eventcatcher-wrapper" selector=".tc-sidebar-resizer" matchSelector=".tc-sidebar-resizer" $pointerup={{{ [[$:/state/sidebar/resizing]!is[missing]then<sidebar-resizer-pointercancel-actions>] }}}>
<$eventcatcher tag="div" selector=".tc-sidebar-resizer-pointermove" matchSelector=".tc-sidebar-resizer-pointermove" 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="tc-sidebar-resizer-pointermove"/>
</$eventcatcher>
<div class="tc-sidebar-resizer"/>
</$eventcatcher>
<% endif %>
</$eventcatcher>

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

@ -2,7 +2,7 @@ title: $:/core/macros/sidebar-resizer
\procedure sidebar-resizer-pointerdown-actions()
<%if [[$:/state/sidebar/resizing]is[missing]then<event-mousebutton>match[left]then<modifier>match[normal]] %>
<$let dragDiff=<<event-fromselected-posx>> dragWidth=<<tv-selectednode-width>> rightDiff={{{ [<dragWidth>subtract<dragDiff>] }}} storyRiverWidth={{{ [<event-fromcatcher-posx>subtract<dragDiff>subtract[14]] }}} sidebarWidth={{{ [<tv-widgetnode-width>subtract<event-fromcatcher-posx>subtract<dragDiff>subtract[14]] }}}>
<$let dragDiff=<<event-fromselected-posx>> dragWidth=<<tv-selectednode-width>> rightDiff={{{ [<dragWidth>subtract<dragDiff>] }}} storyRiverWidth={{{ [<event-fromcatcher-posx>subtract<dragDiff>subtract[14]] }}} sidebarWidth={{{ [<tv-widgetnode-width>subtract<event-fromcatcher-posx>add<dragDiff>add[14]] }}}>
<%if [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fixed-fluid]] %>
<$action-setfield $tiddler="$:/themes/tiddlywiki/vanilla/metrics/storywidth" text={{{ [<storyRiverWidth>addsuffix[px]] }}}/>
<$action-setfield $tiddler="$:/themes/tiddlywiki/vanilla/metrics/storyright" text={{{ [<event-fromcatcher-posx>add<rightDiff>add[6]addsuffix[px]] }}}/>
@ -18,7 +18,7 @@ title: $:/core/macros/sidebar-resizer
\end
\procedure sidebar-resizer-pointermove-actions()
<%if [[$:/state/sidebar/resizing]!is[missing]] %>
<$let storyRiverWidth={{{ [<event-fromcatcher-posx>subtract{$:/state/sidebar/resizing!!drag-diff}subtract[14]] }}} sidebarWidth={{{ [<tv-widgetnode-width>subtract<event-fromcatcher-posx>subtract{$:/state/sidebar/resizing!!drag-diff}subtract[14]] }}}>
<$let storyRiverWidth={{{ [<event-fromcatcher-posx>subtract{$:/state/sidebar/resizing!!drag-diff}subtract[14]] }}} sidebarWidth={{{ [<tv-widgetnode-width>subtract<event-fromcatcher-posx>add{$:/state/sidebar/resizing!!drag-diff}add[14]] }}}>
<%if [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fixed-fluid]] %>
<$action-setfield $tiddler="$:/themes/tiddlywiki/vanilla/metrics/storywidth" text={{{ [<storyRiverWidth>addsuffix[px]] }}}/>
<$action-setfield $tiddler="$:/themes/tiddlywiki/vanilla/metrics/storyright" text={{{ [<event-fromcatcher-posx>add{$:/state/sidebar/resizing!!right-diff}add[6]addsuffix[px]] }}}/>

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

@ -1027,7 +1027,7 @@ button.tc-btn-invisible.tc-remove-tag-button {
.tc-sidebar-scrollable {
position: fixed;
top: {{$:/themes/tiddlywiki/vanilla/metrics/storytop}};
left: {{$:/themes/tiddlywiki/vanilla/metrics/storyright}};
left: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}}),{{$:/themes/tiddlywiki/vanilla/metrics/storyright}},calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}}));
bottom: 0;
right: 0;
overflow-y: auto;
@ -1046,7 +1046,7 @@ button.tc-btn-invisible.tc-remove-tag-button {
position: relative;
left: {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}};
top: {{$:/themes/tiddlywiki/vanilla/metrics/storytop}};
width: {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}};
width: clamp({{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}},calc({{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}));
padding: 42px 42px 42px 42px;
}
@ -1481,7 +1481,7 @@ html body.tc-body.tc-single-tiddler-window {
width: auto;
left: 0;
margin-left: {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}};
margin-right: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}};
margin-right: clamp({{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}},{{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}},calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}}));
}
.tc-tiddler-frame {
@ -1492,7 +1492,7 @@ html body.tc-body.tc-single-tiddler-window {
left: auto;
bottom: 0;
right: 0;
width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}};
width: clamp({{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}},{{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}},calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}}));
}
body.tc-body .tc-page-container.tc-page-view-zoomin .tc-tiddler-frame {

8
themes/tiddlywiki/vanilla/metrics.multids
View File

@ -4,10 +4,12 @@ bodyfontsize: 15px
bodylineheight: 22px
fontsize: 14px
lineheight: 20px
sidebarbreakpoint: 960px
sidebarminwidth: 350px
sidebarwidth: 350px
storyleft: 0px
storyminwidth: 350px
storytop: 0px
storyright: 770px
storywidth: 770px
tiddlerwidth: 686px
sidebarbreakpoint: 960px
sidebarwidth: 350px
tiddlerwidth: 686px

136
themes/tiddlywiki/vanilla/sidebar-resizer.tid Normal file
View File

@ -0,0 +1,136 @@
title: $:/themes/tiddlywiki/vanilla/sidebar-resizer
tags: [[$:/tags/Stylesheet]]
code-body: yes
\function sidebarbreakpoint() [{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}]
\function sidebarbreakpoint-minus-one() [{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}removesuffix[px]subtract[1]addsuffix[px]] ~[{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}]
\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock conditional
@media (min-width: <<sidebarbreakpoint>>) {
.tc-sidebar-resizer {
position: fixed;
top: 0;
height: 100%;
width: 22px;
z-index: 1;
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;
}
@media (pointer: coarse) {
.tc-sidebar-resizer {
background: <<colour muted-foreground>>;
}
.tc-sidebar-resizer:hover {
opacity: 0.1;
}
}
.tc-sidebar-resizer-pointerdown-eventcatcher {
z-index: 0;
}
.tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove {
position: absolute;
top: 0;
left: 0;
right: 0;
}
.tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove {
width: 100%;
height: 100%;
min-height: 100%;
z-index: -1;
}
.tc-sidebar-resizer-pointermove-eventcatcher-wrapper {
z-index: -1;
}
.tc-sidebar-resizer, .tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove {
touch-action: none;
user-select: none;
}
<%if [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fixed-fluid]] %>
.tc-sidebar-resizer {
right: calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyright}} + 6px);
}
<% endif %>
<%if [[$:/state/sidebar/resizing]!is[missing]] %>
.tc-sidebar-resizer-pointerdown-eventcatcher {
z-index: 800;
}
.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.6;
}
@media (pointer: coarse) {
.tc-sidebar-resizer {
opacity: 0.25;
}
}
<% endif %>
<%if [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fixed-fluid]] %>
.tc-sidebar-resizer {
left: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - 36px),calc({{$:/themes/tiddlywiki/vanilla/metrics/storyright}} - 36px),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} - 36px));
}
<% else %>
.tc-sidebar-resizer {
left: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} + 14px),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} + 14px),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} + 14px));
}
<% endif %>
<%if [{$:/state/sidebar}match[no]] %>
tc-sidebar-resizer-pointermove-eventcatcher-wrapper, .tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer {
display: none;
}
<% endif %>
}
@media (max-width: <<sidebarbreakpoint-minus-one>>) {
.tc-sidebar-resizer-pointermove-eventcatcher-wrapper, .tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer {
display: none;
}
}