mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2025-04-08 19:56:39 +00:00
make the sidebar resizer work correctly
This commit is contained in:
BurningTreeC
parent
c0099f8210
commit
abe92a5cc9
@ -28,6 +28,8 @@ Metrics/BodyFontSize: Font size for tiddler body
|
||||
Metrics/BodyLineHeight: Line height for tiddler body
|
||||
Metrics/StoryLeft: Story left position
|
||||
Metrics/StoryLeft/Hint: how far the left margin of the story river<br>(tiddler area) is from the left of the page
|
||||
Metrics/StoryMinWidth: Story minimum width
|
||||
Metrics/StoryMinWidth/Hint: the minimum width of the story river
|
||||
Metrics/StoryTop: Story top position
|
||||
Metrics/StoryTop/Hint: how far the top margin of the story river<br>is from the top of the page
|
||||
Metrics/StoryRight: Story right
|
||||
|
||||
@ -6,6 +6,20 @@ tags: $:/tags/PageTemplate
|
||||
$:/config/SideBarSegments/Visibility/$(listItem)$
|
||||
\end
|
||||
|
||||
<$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>>>
|
||||
|
||||
<%if [{$:/state/sidebar}!match[no]] %>
|
||||
|
||||
<$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"/>
|
||||
|
||||
<% endif %>
|
||||
|
||||
<$scrollable fallthrough="no" class="tc-sidebar-scrollable">
|
||||
|
||||
<div class="tc-sidebar-header">
|
||||
@ -27,3 +41,5 @@ $:/config/SideBarSegments/Visibility/$(listItem)$
|
||||
</div>
|
||||
|
||||
</$scrollable>
|
||||
|
||||
</$eventcatcher>
|
||||
30
core/wiki/macros/sidebar-resizer.tid
Normal file
30
core/wiki/macros/sidebar-resizer.tid
Normal file
@ -0,0 +1,30 @@
|
||||
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 dragDiff=<<event-fromselected-posx>> storyRiverWidth={{{ [<event-fromcatcher-posx>subtract<dragDiff>] }}} sidebarWidth={{{ [<tv-widgetnode-width>subtract<event-fromcatcher-posx>add<dragDiff>] }}}>
|
||||
<$action-setfield $tiddler="$:/state/sidebar/dimensions"
|
||||
drag-diff=<<dragDiff>>
|
||||
story-river-width=<<storyRiverWidth>>
|
||||
sidebar-width=<<sidebarWidth>>
|
||||
/>
|
||||
<$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 storyRiverWidth={{{ [<event-fromcatcher-posx>subtract{$:/state/sidebar/dimensions!!drag-diff}] }}} sidebarWidth={{{ [<tv-widgetnode-width>subtract<event-fromcatcher-posx>add{$:/state/sidebar/dimensions!!drag-diff}] }}}>
|
||||
<$action-setfield $tiddler="$:/state/sidebar/dimensions"
|
||||
story-river-width=<<storyRiverWidth>>
|
||||
sidebar-width=<<sidebarWidth>>
|
||||
/>
|
||||
</$let>
|
||||
<% endif %>
|
||||
\end
|
||||
@ -72,6 +72,7 @@ caption: {{$:/language/ThemeTweaks/ThemeTweaks}}
|
||||
|<$link to="$:/themes/tiddlywiki/vanilla/metrics/storytop"><<lingo Metrics/StoryTop>></$link><br>//<<lingo Metrics/StoryTop/Hint>>// |^<$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/storytop" default="" tag="input"/> |
|
||||
|<$link to="$:/themes/tiddlywiki/vanilla/metrics/storyright"><<lingo Metrics/StoryRight>></$link><br>//<<lingo Metrics/StoryRight/Hint>>// |^<$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/storyright" default="" tag="input"/> |
|
||||
|<$link to="$:/themes/tiddlywiki/vanilla/metrics/storywidth"><<lingo Metrics/StoryWidth>></$link><br>//<<lingo Metrics/StoryWidth/Hint>>// |^<$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/storywidth" default="" tag="input"/> |
|
||||
|<$link to="$:/themes/tiddlywiki/vanilla/metrics/storyminwidth"><<lingo Metrics/StoryMinWidth>></$link><br>//<<lingo Metrics/StoryMinWidth/Hint>>// |^<$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/storyminwidth" default="" tag="input"/> |
|
||||
|<$link to="$:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth"><<lingo Metrics/TiddlerWidth>></$link><br>//<<lingo Metrics/TiddlerWidth/Hint>>//<br> |^<$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth" default="" tag="input"/> |
|
||||
|<$link to="$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint"><<lingo Metrics/SidebarBreakpoint>></$link><br>//<<lingo Metrics/SidebarBreakpoint/Hint>>// |^<$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint" default="" tag="input"/> |
|
||||
|<$link to="$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth"><<lingo Metrics/SidebarWidth>></$link><br>//<<lingo Metrics/SidebarWidth/Hint>>// |^<$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth" default="" tag="input"/> |
|
||||
|
||||
@ -32,12 +32,12 @@ background-size:` {{$:/themes/tiddlywiki/vanilla/settings/backgroundimagesize}}`
|
||||
\end
|
||||
|
||||
\define if-fluid-fixed(text,hiddenSidebarText)
|
||||
<$reveal state="$:/themes/tiddlywiki/vanilla/options/sidebarlayout" type="match" text="fluid-fixed">
|
||||
<%if [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fluid-fixed]] [[$:/state/sidebar/dimensions]!is[missing]] %>
|
||||
$text$
|
||||
<$reveal state="$:/state/sidebar" type="nomatch" text="yes" default="yes">
|
||||
$hiddenSidebarText$
|
||||
</$reveal>
|
||||
</$reveal>
|
||||
<% endif %>
|
||||
\end
|
||||
|
||||
\define if-editor-height-fixed(then,else)
|
||||
@ -1046,14 +1046,15 @@ 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}};
|
||||
padding: 42px 42px 42px 42px;
|
||||
width: calc({{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - 42px);
|
||||
padding: 42px 0px 42px 42px;
|
||||
}
|
||||
|
||||
<<if-no-sidebar "
|
||||
|
||||
.tc-story-river {
|
||||
width: calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}});
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
">>
|
||||
|
||||
@ -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
|
||||
@ -1 +1,150 @@
|
||||
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-resizer-pointerdown-eventcatcher {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.tc-sidebar-resizer-pointermove-eventcatcher {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.tc-sidebar-resizer-pointermove {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.tc-sidebar-resizer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} - 42px);
|
||||
height: 100vh;
|
||||
width: 22px;
|
||||
z-index: 1;
|
||||
transition: opacity 100ms;
|
||||
opacity: 0;
|
||||
cursor: ew-resize;
|
||||
background: linear-gradient(<<colour muted-foreground>>, <<colour muted-foreground>>) no-repeat center/2px 100%;
|
||||
}
|
||||
|
||||
<%if [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fixed-fluid]] %>
|
||||
|
||||
.tc-sidebar-resizer {
|
||||
right: calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyright}});
|
||||
}
|
||||
|
||||
<% endif %>
|
||||
|
||||
.tc-sidebar-resizer:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
<%if [[$:/state/sidebar/resizing]!is[missing]] %>
|
||||
|
||||
.tc-sidebar-resizer-pointerdown-eventcatcher {
|
||||
z-index: 800;
|
||||
}
|
||||
|
||||
.tc-sidebar-resizer-pointermove-eventcatcher {
|
||||
z-index: 801;
|
||||
}
|
||||
|
||||
.tc-sidebar-resizer-pointermove {
|
||||
z-index: 802;
|
||||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
.tc-sidebar-resizer {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
<% endif %>
|
||||
|
||||
<%if [[$:/state/sidebar/dimensions]!is[missing]] %>
|
||||
|
||||
<%if [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fixed-fluid]] %>
|
||||
|
||||
<%if [{$:/state/sidebar}!match[no]] %>
|
||||
|
||||
.tc-story-river {
|
||||
width: clamp(0px,clamp({{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}},calc({{$:/state/sidebar/dimensions!!story-river-width}}px - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - 20px),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}})),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}}));
|
||||
}
|
||||
|
||||
<% endif %>
|
||||
|
||||
.tc-sidebar-scrollable {
|
||||
left: auto;
|
||||
width: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}}),calc(100% + 20px - {{$:/state/sidebar/dimensions!!story-river-width}}px),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}));
|
||||
}
|
||||
|
||||
.tc-sidebar-resizer {
|
||||
right: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} - 42px),calc(100% - 42px + 20px - {{$:/state/sidebar/dimensions!!story-river-width}}px),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - 42px - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}));
|
||||
}
|
||||
|
||||
<% else %>
|
||||
|
||||
<%if [{$:/state/sidebar}!match[no]] %>
|
||||
|
||||
.tc-story-river {
|
||||
width: clamp(0px,clamp({{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}},calc(100% - {{$:/state/sidebar/dimensions!!sidebar-width}}px - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - 20px),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}})),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}}));
|
||||
}
|
||||
|
||||
<% endif %>
|
||||
|
||||
.tc-sidebar-scrollable {
|
||||
width: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}}),calc({{$:/state/sidebar/dimensions!!sidebar-width}}px + 20px),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}));
|
||||
}
|
||||
|
||||
.tc-sidebar-resizer {
|
||||
right: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} - 42px),calc({{$:/state/sidebar/dimensions!!sidebar-width}}px - 42px + 20px),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - 42px - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}));
|
||||
}
|
||||
|
||||
<% endif %>
|
||||
|
||||
<% endif %>
|
||||
|
||||
<%if [{$:/state/sidebar}match[no]] %>
|
||||
|
||||
.tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
<% endif %>
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: <<sidebarbreakpoint-minus-one>>) {
|
||||
|
||||
.tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user