1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2025-01-09 17:00:27 +00:00

rename tc-sidebar-resizer to tc-slider

This commit is contained in:
BurningTreeC 2024-11-14 04:48:52 +01:00
parent 3261818850
commit 2e68b6f1a1
3 changed files with 49 additions and 49 deletions

View File

@ -7,7 +7,7 @@ code-body: yes
\function resizer.state.tiddler() $:/state/sidebar/resizing \function resizer.state.tiddler() $:/state/sidebar/resizing
\function resizer.state() [{$:/state/sidebar}] \function resizer.state() [{$:/state/sidebar}]
\function resizer.class() tc-main-sidebar-resizer \function resizer.class() tc-main-slider
\function set.throttling() yes \function set.throttling() yes
\function drag.direction.reverse() [<get.theme.option sidebarposition>match[left]then[yes]] :else[[no]] \function drag.direction.reverse() [<get.theme.option sidebarposition>match[left]then[yes]] :else[[no]]
\whitespace trim \whitespace trim

View File

@ -356,9 +356,9 @@ title: $:/core/procedures/sidebar-resizer
<% endif %> <% endif %>
\end \end
\function get.resizer.class() tc-sidebar-resizer [<get.resizer.state>is[tiddler]then[tc-resizer-active]] [<resizer.class>] [<resizer.class>is[blank]then<qualify>addsuffix<currentTiddler>sha256[]addprefix[tc-sidebar-resizer-identified-]] +[join[ ]] \function get.resizer.class() tc-slider [<get.resizer.state>is[tiddler]then[tc-resizer-active]] [<resizer.class>] [<resizer.class>is[blank]then<qualify>addsuffix<currentTiddler>sha256[]addprefix[tc-slider-identified-]] +[join[ ]]
\function get.active.class(class) [<class>] [<resizer.class>match[tc-main-sidebar-resizer]] [<eventCatcherClass>] [<get.resizer.state>is[tiddler]then[tc-resizer-active]] +[join[ ]] \function get.active.class(class) [<class>] [<resizer.class>match[tc-main-slider]] [<eventCatcherClass>] [<get.resizer.state>is[tiddler]then[tc-resizer-active]] +[join[ ]]
\function get.sidebar-resizer.pointerdown.actions() \function get.sidebar-resizer.pointerdown.actions()
[<get.resizer.state>match[$:/state/sidebar/resizing]then<sidebar-resizer-pointerdown-actions>] [<get.resizer.state>match[$:/state/sidebar/resizing]then<sidebar-resizer-pointerdown-actions>]
@ -377,9 +377,9 @@ title: $:/core/procedures/sidebar-resizer
<$eventcatcher <$eventcatcher
tag="div" tag="div"
class=<<get.active.class tc-sidebar-resizer-pointerdown-eventcatcher>> class=<<get.active.class tc-slider-pointerdown-eventcatcher>>
selector=".tc-sidebar-resizer" selector=".tc-slider"
matchSelector=".tc-sidebar-resizer" matchSelector=".tc-slider"
$pointerdown=<<get.sidebar-resizer.pointerdown.actions>> $pointerdown=<<get.sidebar-resizer.pointerdown.actions>>
$pointerup=<<sidebar-resizer-pointercancel-actions>>> $pointerup=<<sidebar-resizer-pointercancel-actions>>>
@ -387,16 +387,16 @@ title: $:/core/procedures/sidebar-resizer
<$eventcatcher <$eventcatcher
tag="div" tag="div"
class=<<get.active.class tc-sidebar-resizer-pointermove-eventcatcher-wrapper>> class=<<get.active.class tc-slider-pointermove-eventcatcher-wrapper>>
selector=".tc-sidebar-resizer" selector=".tc-slider"
matchSelector=".tc-sidebar-resizer" matchSelector=".tc-slider"
$pointerup={{{ [<get.resizer.state>is[tiddler]then<sidebar-resizer-pointercancel-actions>] }}}> $pointerup={{{ [<get.resizer.state>is[tiddler]then<sidebar-resizer-pointercancel-actions>] }}}>
<$eventcatcher <$eventcatcher
tag="div" tag="div"
selector=".tc-sidebar-resizer-pointermove" selector=".tc-slider-pointermove"
matchSelector=".tc-sidebar-resizer-pointermove" matchSelector=".tc-slider-pointermove"
class=<<get.active.class tc-sidebar-resizer-pointermove-eventcatcher>> class=<<get.active.class tc-slider-pointermove-eventcatcher>>
$pointerup=<<sidebar-resizer-pointercancel-actions>> $pointerup=<<sidebar-resizer-pointercancel-actions>>
$pointerleave=<<sidebar-resizer-pointercancel-actions>> $pointerleave=<<sidebar-resizer-pointercancel-actions>>
$pointerout=<<sidebar-resizer-pointercancel-actions>> $pointerout=<<sidebar-resizer-pointercancel-actions>>
@ -406,7 +406,7 @@ title: $:/core/procedures/sidebar-resizer
$pointermove=<<sidebar-resizer-pointermove-actions>> $pointermove=<<sidebar-resizer-pointermove-actions>>
$contextmenu=<<sidebar-resizer-pointercancel-actions>>> $contextmenu=<<sidebar-resizer-pointercancel-actions>>>
<div class=<<get.active.class tc-sidebar-resizer-pointermove>>/> <div class=<<get.active.class tc-slider-pointermove>>/>
</$eventcatcher> </$eventcatcher>
@ -486,9 +486,9 @@ title: $:/core/procedures/sidebar-resizer
<$eventcatcher <$eventcatcher
tag="div" tag="div"
class=<<get.active.class tc-sidebar-resizer-pointerdown-eventcatcher>> class=<<get.active.class tc-slider-pointerdown-eventcatcher>>
selector=".tc-sidebar-resizer" selector=".tc-slider"
matchSelector=".tc-sidebar-resizer" matchSelector=".tc-slider"
$pointerdown=<<get.sidebar-resizer.pointerdown.actions>> $pointerdown=<<get.sidebar-resizer.pointerdown.actions>>
$pointerup=<<sidebar-resizer-pointercancel-actions>>> $pointerup=<<sidebar-resizer-pointercancel-actions>>>
@ -496,16 +496,16 @@ title: $:/core/procedures/sidebar-resizer
<$eventcatcher <$eventcatcher
tag="div" tag="div"
class=<<get.active.class tc-sidebar-resizer-pointermove-eventcatcher-wrapper>> class=<<get.active.class tc-slider-pointermove-eventcatcher-wrapper>>
selector=".tc-sidebar-resizer" selector=".tc-slider"
matchSelector=".tc-sidebar-resizer" matchSelector=".tc-slider"
$pointerup={{{ [<get.resizer.state>is[tiddler]then<sidebar-resizer-pointercancel-actions>] }}}> $pointerup={{{ [<get.resizer.state>is[tiddler]then<sidebar-resizer-pointercancel-actions>] }}}>
<$eventcatcher <$eventcatcher
tag="div" tag="div"
selector=".tc-sidebar-resizer-pointermove" selector=".tc-slider-pointermove"
matchSelector=".tc-sidebar-resizer-pointermove" matchSelector=".tc-slider-pointermove"
class=<<get.active.class tc-sidebar-resizer-pointermove-eventcatcher>> class=<<get.active.class tc-slider-pointermove-eventcatcher>>
$pointerup=<<sidebar-resizer-pointercancel-actions>> $pointerup=<<sidebar-resizer-pointercancel-actions>>
$pointerleave=<<sidebar-resizer-pointercancel-actions>> $pointerleave=<<sidebar-resizer-pointercancel-actions>>
$pointerout=<<sidebar-resizer-pointercancel-actions>> $pointerout=<<sidebar-resizer-pointercancel-actions>>
@ -515,7 +515,7 @@ title: $:/core/procedures/sidebar-resizer
$pointermove=<<sidebar-resizer-pointermove-actions>> $pointermove=<<sidebar-resizer-pointermove-actions>>
$contextmenu=<<sidebar-resizer-pointercancel-actions>>> $contextmenu=<<sidebar-resizer-pointercancel-actions>>>
<div class=<<get.active.class tc-sidebar-resizer-pointermove>>/> <div class=<<get.active.class tc-slider-pointermove>>/>
</$eventcatcher> </$eventcatcher>

View File

@ -6,7 +6,7 @@ code-body: yes
\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock conditional html \rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock conditional html
.tc-sidebar-resizer { .tc-slider {
position: fixed; position: fixed;
top: 0; top: 0;
height: 100%; height: 100%;
@ -16,22 +16,22 @@ code-body: yes
background: linear-gradient(<<colour muted-foreground>>, <<colour muted-foreground>>) no-repeat center/2px 100%; background: linear-gradient(<<colour muted-foreground>>, <<colour muted-foreground>>) no-repeat center/2px 100%;
} }
.tc-sidebar-resizer:hover { .tc-slider:hover {
opacity: <<get.theme.metric slideropacityhover>>; opacity: <<get.theme.metric slideropacityhover>>;
} }
.tc-sidebar-resizer-pointerdown-eventcatcher, .tc-sidebar-resizer-pointermove-eventcatcher-wrapper { .tc-slider-pointerdown-eventcatcher, .tc-slider-pointermove-eventcatcher-wrapper {
height: 100%; height: 100%;
} }
.tc-edit-texteditor-slider > .tc-sidebar-resizer-pointerdown-eventcatcher.tc-editor-preview-eventcatcher { .tc-edit-texteditor-slider > .tc-slider-pointerdown-eventcatcher.tc-editor-preview-eventcatcher {
position: absolute; position: absolute;
width: 100%; width: 100%;
top: 0; top: 0;
left: 0; left: 0;
} }
.tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove { .tc-slider-pointermove-eventcatcher, .tc-slider-pointermove {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -42,39 +42,39 @@ code-body: yes
z-index: -1; z-index: -1;
} }
.tc-sidebar-resizer-pointerdown-eventcatcher:not(.tc-main-sidebar-resizer), .tc-sidebar-resizer-pointermove-eventcatcher:not(.tc-main-sidebar-resizer), .tc-sidebar-resizer-pointermove-eventcatcher-wrapper:not(.tc-main-sidebar-resizer) { .tc-slider-pointerdown-eventcatcher:not(.tc-main-slider), .tc-slider-pointermove-eventcatcher:not(.tc-main-slider), .tc-slider-pointermove-eventcatcher-wrapper:not(.tc-main-slider) {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
} }
.tc-sidebar-resizer-pointermove-eventcatcher-wrapper:not(.tc-main-sidebar-resizer) { .tc-slider-pointermove-eventcatcher-wrapper:not(.tc-main-slider) {
flex-direction: row; flex-direction: row;
} }
.tc-sidebar-resizer-pointerdown-eventcatcher:not(.tc-main-sidebar-resizer), .tc-sidebar-resizer-pointermove-eventcatcher-wrapper:not(.tc-main-sidebar-resizer) { .tc-slider-pointerdown-eventcatcher:not(.tc-main-slider), .tc-slider-pointermove-eventcatcher-wrapper:not(.tc-main-slider) {
position: relative; position: relative;
} }
.tc-sidebar-resizer, .tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove { .tc-slider, .tc-slider-pointermove-eventcatcher, .tc-slider-pointermove {
touch-action: none; touch-action: none;
user-select: none; user-select: none;
} }
.tc-sidebar-resizer-pointermove-eventcatcher-wrapper.tc-resizer-active { .tc-slider-pointermove-eventcatcher-wrapper.tc-resizer-active {
z-index: 801; z-index: 801;
} }
.tc-sidebar-resizer-pointermove-eventcatcher.tc-resizer-active { .tc-slider-pointermove-eventcatcher.tc-resizer-active {
z-index: 802; z-index: 802;
} }
.tc-sidebar-resizer-pointermove.tc-resizer-active { .tc-slider-pointermove.tc-resizer-active {
z-index: 803; z-index: 803;
cursor: ew-resize; cursor: ew-resize;
} }
.tc-sidebar-resizer.tc-resizer-active { .tc-slider.tc-resizer-active {
opacity: <<get.theme.metric slideropacityhover>>; opacity: <<get.theme.metric slideropacityhover>>;
} }
@ -84,11 +84,11 @@ code-body: yes
@media (pointer: coarse) { @media (pointer: coarse) {
.tc-sidebar-resizer.tc-main-sidebar-resizer { .tc-slider.tc-main-slider {
background: <<colour muted-foreground>>; background: <<colour muted-foreground>>;
} }
.tc-sidebar-resizer.tc-main-sidebar-resizer:hover { .tc-slider.tc-main-slider:hover {
opacity: <<get.theme.metric slideropacity>>; opacity: <<get.theme.metric slideropacity>>;
} }
} }
@ -97,7 +97,7 @@ code-body: yes
@media (pointer: coarse) { @media (pointer: coarse) {
.tc-sidebar-resizer.tc-main-sidebar-resizer { .tc-slider.tc-main-slider {
opacity: min(calc(3 * <<get.theme.metric slideropacity>>),1); opacity: min(calc(3 * <<get.theme.metric slideropacity>>),1);
} }
} }
@ -106,11 +106,11 @@ code-body: yes
<%if [<set.storywidth.storyright>match[yes]] %> <%if [<set.storywidth.storyright>match[yes]] %>
.tc-sidebar-resizer.tc-main-sidebar-resizer { .tc-slider.tc-main-slider {
left: clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> + <<get.theme.storyleftpadding.excess>> + <<get.theme.storyrightpadding.excess>> - (2 * <<get.story-sidebar.overlap>> / 3)),calc(<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - (2 * <<get.story-sidebar.overlap>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> + <<get.story-sidebar.overlap>> + <<get.theme.storywidthoverlap>> - (2 * <<get.story-sidebar.overlap>> / 3))); left: clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> + <<get.theme.storyleftpadding.excess>> + <<get.theme.storyrightpadding.excess>> - (2 * <<get.story-sidebar.overlap>> / 3)),calc(<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - (2 * <<get.story-sidebar.overlap>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> + <<get.story-sidebar.overlap>> + <<get.theme.storywidthoverlap>> - (2 * <<get.story-sidebar.overlap>> / 3)));
} }
.tc-sidebar-left .tc-sidebar-resizer.tc-main-sidebar-resizer { .tc-sidebar-left .tc-slider.tc-main-slider {
left: auto; left: auto;
right: clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> + <<get.theme.storyleftpadding.excess>> + <<get.theme.storyrightpadding.excess>> - (2 * <<get.story-sidebar.overlap>> / 3)),calc(<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - (2 * <<get.story-sidebar.overlap>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> + <<get.story-sidebar.overlap>> + <<get.theme.storywidthoverlap>> - (2 * <<get.story-sidebar.overlap>> / 3))); right: clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> + <<get.theme.storyleftpadding.excess>> + <<get.theme.storyrightpadding.excess>> - (2 * <<get.story-sidebar.overlap>> / 3)),calc(<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - (2 * <<get.story-sidebar.overlap>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> + <<get.story-sidebar.overlap>> + <<get.theme.storywidthoverlap>> - (2 * <<get.story-sidebar.overlap>> / 3)));
} }
@ -119,11 +119,11 @@ code-body: yes
<%if [<set.sidebarwidth>match[yes]] %> <%if [<set.sidebarwidth>match[yes]] %>
.tc-sidebar-resizer.tc-main-sidebar-resizer { .tc-slider.tc-main-slider {
left: min(clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> + <<get.theme.storyleftpadding.excess>> + <<get.theme.storyrightpadding.excess>> - <<get.story-sidebar.overlap>> + (<<get.story-sidebar.overlap>> / 3)),calc(100% - <<get.theme.metric sidebarwidth>> + (<<get.story-sidebar.overlap>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> + (<<get.story-sidebar.overlap>> / 3))),calc(100% - <<get.theme.metric sidebarminwidth>> + (<<get.story-sidebar.overlap>> / 3))); left: min(clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> + <<get.theme.storyleftpadding.excess>> + <<get.theme.storyrightpadding.excess>> - <<get.story-sidebar.overlap>> + (<<get.story-sidebar.overlap>> / 3)),calc(100% - <<get.theme.metric sidebarwidth>> + (<<get.story-sidebar.overlap>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> + (<<get.story-sidebar.overlap>> / 3))),calc(100% - <<get.theme.metric sidebarminwidth>> + (<<get.story-sidebar.overlap>> / 3)));
} }
.tc-sidebar-left .tc-sidebar-resizer.tc-main-sidebar-resizer { .tc-sidebar-left .tc-slider.tc-main-slider {
left: auto; left: auto;
right: min(clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> + <<get.theme.storyleftpadding.excess>> + <<get.theme.storyrightpadding.excess>> - <<get.story-sidebar.overlap>> + (<<get.story-sidebar.overlap>> / 3)),calc(100% - <<get.theme.metric sidebarwidth>> + (<<get.story-sidebar.overlap>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> + (<<get.story-sidebar.overlap>> / 3))),calc(100% - <<get.theme.metric sidebarminwidth>> + (<<get.story-sidebar.overlap>> / 3))); right: min(clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> + <<get.theme.storyleftpadding.excess>> + <<get.theme.storyrightpadding.excess>> - <<get.story-sidebar.overlap>> + (<<get.story-sidebar.overlap>> / 3)),calc(100% - <<get.theme.metric sidebarwidth>> + (<<get.story-sidebar.overlap>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> + (<<get.story-sidebar.overlap>> / 3))),calc(100% - <<get.theme.metric sidebarminwidth>> + (<<get.story-sidebar.overlap>> / 3)));
} }
@ -132,11 +132,11 @@ code-body: yes
<%if [<set.centralised>match[yes]] %> <%if [<set.centralised>match[yes]] %>
.tc-sidebar-resizer.tc-main-sidebar-resizer { .tc-slider.tc-main-slider {
left: min(calc(50% + (<<get.theme.metric storywidth>> / 2) - (2 * <<get.story-sidebar.overlap>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.story-sidebar.overlap>> / 3))); left: min(calc(50% + (<<get.theme.metric storywidth>> / 2) - (2 * <<get.story-sidebar.overlap>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.story-sidebar.overlap>> / 3)));
} }
.tc-sidebar-left .tc-sidebar-resizer.tc-main-sidebar-resizer { .tc-sidebar-left .tc-slider.tc-main-slider {
left: auto; left: auto;
z-index: 1; z-index: 1;
right: min(calc(50% + (<<get.theme.metric storywidth>> / 2) - (2 * <<get.story-sidebar.overlap>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.story-sidebar.overlap>> / 3))); right: min(calc(50% + (<<get.theme.metric storywidth>> / 2) - (2 * <<get.story-sidebar.overlap>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.story-sidebar.overlap>> / 3)));
@ -146,7 +146,7 @@ code-body: yes
<%if [{$:/state/sidebar}match[no]] %> <%if [{$:/state/sidebar}match[no]] %>
.tc-sidebar-resizer-pointerdown-eventcatcher.tc-main-sidebar-resizer, .tc-sidebar-resizer-pointermove-eventcatcher-wrapper.tc-main-sidebar-resizer, .tc-sidebar-resizer-pointermove-eventcatcher.tc-main-sidebar-resizer, .tc-sidebar-resizer-pointermove.tc-main-sidebar-resizer, .tc-sidebar-resizer.tc-main-sidebar-resizer { .tc-slider-pointerdown-eventcatcher.tc-main-slider, .tc-slider-pointermove-eventcatcher-wrapper.tc-main-slider, .tc-slider-pointermove-eventcatcher.tc-main-slider, .tc-slider-pointermove.tc-main-slider, .tc-slider.tc-main-slider {
display: none; display: none;
} }
@ -156,7 +156,7 @@ code-body: yes
@media (max-width: <<sidebarbreakpoint-minus-one>>) { @media (max-width: <<sidebarbreakpoint-minus-one>>) {
.tc-sidebar-resizer-pointerdown-eventcatcher.tc-main-sidebar-resizer, .tc-sidebar-resizer-pointermove-eventcatcher-wrapper.tc-main-sidebar-resizer, .tc-sidebar-resizer-pointermove-eventcatcher.tc-main-sidebar-resizer, .tc-sidebar-resizer-pointermove.tc-main-sidebar-resizer, .tc-sidebar-resizer.tc-main-sidebar-resizer { .tc-slider-pointerdown-eventcatcher.tc-main-slider, .tc-slider-pointermove-eventcatcher-wrapper.tc-main-slider, .tc-slider-pointermove-eventcatcher.tc-main-slider, .tc-slider-pointermove.tc-main-slider, .tc-slider.tc-main-slider {
display: none; display: none;
} }
} }
@ -204,13 +204,13 @@ div[class*="tc-editor-preview-slider-"] {
grid-template-columns: calc(100% - <<width>>) <<width>>; grid-template-columns: calc(100% - <<width>>) <<width>>;
} }
div.tc-sidebar-resizer.tc-editor-preview-slider-<<identifier>> { div.tc-slider.tc-editor-preview-slider-<<identifier>> {
left: calc(100% - <<width>> - <<get.theme.metric previewsliderwidth>>); left: calc(100% - <<width>> - <<get.theme.metric previewsliderwidth>>);
} }
<%if [[$:/state/resizing/editor-preview-]addsuffix<identifier>is[tiddler]] %> <%if [[$:/state/resizing/editor-preview-]addsuffix<identifier>is[tiddler]] %>
div.tc-sidebar-resizer.tc-editor-preview-slider-<<identifier>> { div.tc-slider.tc-editor-preview-slider-<<identifier>> {
opacity: min(calc(3 * <<get.theme.metric slideropacity>>),1); opacity: min(calc(3 * <<get.theme.metric slideropacity>>),1);
} }