mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2025-09-07 21:36:06 +00:00
Code Issues Releases Wiki Activity

updates

Browse Source
This commit is contained in:
BurningTreeC
2024-09-25 07:33:36 +02:00
parent b47e0bdee0
commit 433e54b43e
4 changed files with 168 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
core/ui/PageTemplate/story.tid
View File

@@ -4,6 +4,18 @@ tags: $:/tags/PageTemplate
\whitespace trim
<section class="tc-story-river" role="main">
<$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-pointerup-actions>>>
<$eventcatcher tag="div" selector=".tc-sidebar-resizer-pointermove" matchSelector=".tc-sidebar-resizer-pointermove" class="tc-sidebar-resizer-pointermove-eventcatcher" $pointerup=<<sidebar-resizer-pointerup-actions>> $pointermove=<<sidebar-resizer-pointermove-actions>> $pointerleave=<<sidebar-resizer-pointerup-actions>> $pointerout=<<sidebar-resizer-pointerup-actions>>>
<div class="tc-sidebar-resizer-pointermove"/>
</$eventcatcher>
<div class="tc-sidebar-resizer"/>
</$eventcatcher>
<section class="story-backdrop">
<$list filter="[all[shadows+tiddlers]tag[$:/tags/AboveStory]!has[draft.of]]">

32
core/wiki/macros/sidebar-resizer.tid Normal file
View File

@@ -0,0 +1,32 @@
title: $:/core/macros/sidebar-resizer
tags: $:/tags/Global
\procedure sidebar-resizer-pointerdown-actions()
<%if [[$:/state/sidebar/resizing]is[missing]then<event-mousebutton>match[left]] %>
<$let leftOffset={{{ [<event-fromviewport-posx>subtract<event-fromcatcher-posx>] }}} viewportWidth={{{ [<leftOffset>add<tv-widgetnode-width>] }}} dragDiff=<<event-fromselected-posx>> dragDiffPercentage={{{ [<dragDiff>divide<viewportWidth>] }}} dragWidthPercentage={{{ [<tv-selectednode-width>divide<viewportWidth>] }}} sidebarOffsetPercentage={{{ [[22]divide<viewportWidth>] }}} storyRiverPercentage={{{ [<event-fromcatcher-posx>subtract<leftOffset>divide<viewportWidth>subtract<dragDiffPercentage>] }}} sidebarPercentage={{{ [[1]subtract<storyRiverPercentage>subtract<sidebarOffsetPercentage>] }}}>
<$action-setfield $tiddler="$:/state/sidebar/posx"
drag-width=<<tv-selectednode-width>>
drag-diff=<<dragDiff>>
drag-diff-percentage=<<dragDiffPercentage>>
drag-width-percentage=<<dragWidthPercentage>>
sidebar-offset-percentage=<<sidebarOffsetPercentage>>
story-river-percentage=<<storyRiverPercentage>>
sidebar-percentage=<<sidebarPercentage>>/>
<$action-setfield $tiddler="$:/state/sidebar/resizing" text="yes"/>
</$let>
<% endif %>
\end
\procedure sidebar-resizer-pointerup-actions()
<%if [[$:/state/sidebar/resizing]!is[missing]] %>
<$action-deletetiddler $tiddler="$:/state/sidebar/resizing"/>
<% endif %>
\end
\procedure sidebar-resizer-pointermove-actions()
<%if [[$:/state/sidebar/resizing]!is[missing]] %>
<$let leftOffset={{{ [<event-fromviewport-posx>subtract<event-fromcatcher-posx>] }}} viewportWidth={{{ [<leftOffset>add<tv-widgetnode-width>] }}} storyRiverPercentage={{{ [<event-fromcatcher-posx>subtract<leftOffset>divide<viewportWidth>subtract{$:/state/sidebar/posx!!drag-diff-percentage}] }}} sidebarPercentage={{{ [[1]subtract<storyRiverPercentage>subtract{$:/state/sidebar/posx!!sidebar-offset-percentage}] }}}>
<$action-setfield $tiddler="$:/state/sidebar/posx"
story-river-percentage=<<storyRiverPercentage>>
sidebar-percentage=<<sidebarPercentage>>/>
</$let>
<% endif %>
\end

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

@@ -5,9 +5,10 @@ bodylineheight: 22px
fontsize: 14px
lineheight: 20px
storyleft: 0px
storyminwidth: 350px
storytop: 0px
storyright: 770px
storywidth: 770px
tiddlerwidth: 686px
sidebarbreakpoint: 960px
sidebarwidth: 350px
tiddlerwidth: 686px

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

@@ -1 +1,123 @@
title: $:/themes/tiddlywiki/vanilla/sidebar-resizer
tags: [[$:/tags/Stylesheet]]
code-body: yes
\define sidebarbreakpoint()
<$text text={{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}/>
\end
\define sidebarbreakpoint-minus-one()
<$text text={{{ [{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}removesuffix[px]subtract[1]addsuffix[px]] ~[{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}] }}}/>
\end
@media (min-width: <<sidebarbreakpoint>>) {
.tc-sidebar-scrollable {
padding-left: 20px;
width: calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} - 22px);
z-index: 1;
}
.tc-sidebar-resizer-pointerdown-eventcatcher {
position: absolute;
top: calc(0px - {{$:/themes/tiddlywiki/vanilla/metrics/storytop}});
left: 0;
right: calc(-{{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}});
height: 100%;
min-height: 100vh;
z-index: 0;
}
.tc-sidebar-resizer-pointermove-eventcatcher {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
min-height: 100vh;
z-index: -1;
}
.tc-sidebar-resizer-pointermove {
position: absolute;
top: 0;
left: calc(100% - 100vw);
right: 0;
width: 100vw;
height: 100%;
min-height: 100vh;
z-index: -1;
}
.tc-sidebar-resizer {
position: fixed;
top: 0;
right: calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} - 22px);
height: 100vh;
width: 22px;
z-index: 2;
transition: opacity 100ms;
opacity: 0;
cursor: ew-resize;
background: linear-gradient(<<colour muted-foreground>>, <<colour muted-foreground>>) no-repeat center/2px 100%;
}
.tc-sidebar-resizer:hover {
opacity: 0.8;
}
<%if [[$:/state/sidebar/resizing]!is[missing]] %>
.tc-sidebar-scrollable {
z-index: -1;
}
.tc-sidebar-resizer-pointerdown-eventcatcher {
z-index: 3;
}
.tc-sidebar-resizer-pointermove-eventcatcher {
z-index: 4;
}
.tc-sidebar-resizer-pointermove {
z-index: 5;
cursor: ew-resize;
}
.tc-sidebar-resizer {
opacity: 0.8;
}
<% endif %>
<%if [[$:/state/sidebar/posx]!is[missing]then{$:/state/sidebar}!match[no]] %>
.tc-sidebar-resizer-pointerdown-eventcatcher {
right: auto;
width: calc(100% + (100vw - 100%));
}
.tc-sidebar-resizer {
right: min(max(calc(({{$:/state/sidebar/posx!!sidebar-percentage}} * 100%)),calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} - 22px)),calc((100vw - 100%) + (100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}}) - 22px));
}
.tc-story-river {
width: min(max(calc({{$:/state/sidebar/posx!!story-river-percentage}} * 100%),{{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}}),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}}));
}
.tc-sidebar-scrollable {
width: min(max(calc(({{$:/state/sidebar/posx!!sidebar-percentage}} * 100%)),calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} - 22px)),calc((100vw - 100%) + (100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}}) - 22px));
}
<% endif %>
}
@media (max-width: <<sidebarbreakpoint-minus-one>>) {
.tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer {
display: none;
}
}