mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2025-04-12 05:43:16 +00:00
Code Issues Releases Wiki Activity

make this work on touch devices

Browse Source
This commit is contained in:
BurningTreeC 2024-10-01 05:55:29 +02:00
parent aa2c7769a9
commit 7f2167b285
3 changed files with 28 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
core/ui/PageTemplate/sidebar.tid
View File

@ -6,11 +6,13 @@ 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>>>
<$eventcatcher tag="div" class="tc-sidebar-resizer-pointerdown-eventcatcher" selector=".tc-sidebar-resizer" matchSelector=".tc-sidebar-resizer" $pointerdown=<<sidebar-resizer-pointerdown-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>>>
<$eventcatcher tag="div" selector=".tc-sidebar-resizer" matchSelector=".tc-sidebar-resizer" $pointerup={{{ [[$:/state/sidebar/resizing]!is[missing]then<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>> $pointerleave=<<sidebar-resizer-pointerup-actions>> $pointerout=<<sidebar-resizer-pointerup-actions>> $pointermove=<<sidebar-resizer-pointermove-actions>>>
<div class="tc-sidebar-resizer-pointermove"/>
@ -18,6 +20,8 @@ $:/config/SideBarSegments/Visibility/$(listItem)$
<div class="tc-sidebar-resizer"/>
</$eventcatcher>
<% endif %>
<$scrollable fallthrough="no" class="tc-sidebar-scrollable">

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

@ -2,7 +2,7 @@ title: $:/core/macros/sidebar-resizer
tags: $:/tags/Global
\procedure sidebar-resizer-pointerdown-actions()
<%if [[$:/state/sidebar/resizing]is[missing]then<event-mousebutton>match[left]] %>
<%if [[$:/state/sidebar/resizing]is[missing]then<event-mousebutton>match[left]then<modifier>match[normal]] %>
<$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>>

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

@ -10,7 +10,24 @@ code-body: yes
<$text text={{{ [{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}removesuffix[px]subtract[1]addsuffix[px]] ~[{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}] }}}/>
\end
\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock conditional
@media (min-width: <<sidebarbreakpoint>>) {
.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.1;
cursor: ew-resize;
background: linear-gradient(<<colour muted-foreground>>, <<colour muted-foreground>>) no-repeat center/2px 100%;
touch-action: none;
user-select: none;
}
.tc-sidebar-resizer-pointerdown-eventcatcher {
position: absolute;
@ -30,6 +47,8 @@ code-body: yes
height: 100%;
min-height: 100%;
z-index: -1;
touch-action: none;
user-select: none;
}
.tc-sidebar-resizer-pointermove {
@ -41,19 +60,8 @@ code-body: yes
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.1;
cursor: ew-resize;
background: linear-gradient(<<colour muted-foreground>>, <<colour muted-foreground>>) no-repeat center/2px 100%;
touch-action: none;
user-select: none;
}
<%if [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fixed-fluid]] %>