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

rename tc-sidebar-resizer to tc-slider

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
core/ui/PageTemplate/sidebar-resizer.tid
View File

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

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

@ -356,9 +356,9 @@ title: $:/core/procedures/sidebar-resizer
<% endif %>
\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()
[<get.resizer.state>match[$:/state/sidebar/resizing]then<sidebar-resizer-pointerdown-actions>]
@ -377,9 +377,9 @@ title: $:/core/procedures/sidebar-resizer
<$eventcatcher
tag="div"
class=<<get.active.class tc-sidebar-resizer-pointerdown-eventcatcher>>
selector=".tc-sidebar-resizer"
matchSelector=".tc-sidebar-resizer"
class=<<get.active.class tc-slider-pointerdown-eventcatcher>>
selector=".tc-slider"
matchSelector=".tc-slider"
$pointerdown=<<get.sidebar-resizer.pointerdown.actions>>
$pointerup=<<sidebar-resizer-pointercancel-actions>>>
@ -387,16 +387,16 @@ title: $:/core/procedures/sidebar-resizer
<$eventcatcher
tag="div"
class=<<get.active.class tc-sidebar-resizer-pointermove-eventcatcher-wrapper>>
selector=".tc-sidebar-resizer"
matchSelector=".tc-sidebar-resizer"
class=<<get.active.class tc-slider-pointermove-eventcatcher-wrapper>>
selector=".tc-slider"
matchSelector=".tc-slider"
$pointerup={{{ [<get.resizer.state>is[tiddler]then<sidebar-resizer-pointercancel-actions>] }}}>
<$eventcatcher
tag="div"
selector=".tc-sidebar-resizer-pointermove"
matchSelector=".tc-sidebar-resizer-pointermove"
class=<<get.active.class tc-sidebar-resizer-pointermove-eventcatcher>>
selector=".tc-slider-pointermove"
matchSelector=".tc-slider-pointermove"
class=<<get.active.class tc-slider-pointermove-eventcatcher>>
$pointerup=<<sidebar-resizer-pointercancel-actions>>
$pointerleave=<<sidebar-resizer-pointercancel-actions>>
$pointerout=<<sidebar-resizer-pointercancel-actions>>
@ -406,7 +406,7 @@ title: $:/core/procedures/sidebar-resizer
$pointermove=<<sidebar-resizer-pointermove-actions>>
$contextmenu=<<sidebar-resizer-pointercancel-actions>>>
<div class=<<get.active.class tc-sidebar-resizer-pointermove>>/>
<div class=<<get.active.class tc-slider-pointermove>>/>
</$eventcatcher>
@ -486,9 +486,9 @@ title: $:/core/procedures/sidebar-resizer
<$eventcatcher
tag="div"
class=<<get.active.class tc-sidebar-resizer-pointerdown-eventcatcher>>
selector=".tc-sidebar-resizer"
matchSelector=".tc-sidebar-resizer"
class=<<get.active.class tc-slider-pointerdown-eventcatcher>>
selector=".tc-slider"
matchSelector=".tc-slider"
$pointerdown=<<get.sidebar-resizer.pointerdown.actions>>
$pointerup=<<sidebar-resizer-pointercancel-actions>>>
@ -496,16 +496,16 @@ title: $:/core/procedures/sidebar-resizer
<$eventcatcher
tag="div"
class=<<get.active.class tc-sidebar-resizer-pointermove-eventcatcher-wrapper>>
selector=".tc-sidebar-resizer"
matchSelector=".tc-sidebar-resizer"
class=<<get.active.class tc-slider-pointermove-eventcatcher-wrapper>>
selector=".tc-slider"
matchSelector=".tc-slider"
$pointerup={{{ [<get.resizer.state>is[tiddler]then<sidebar-resizer-pointercancel-actions>] }}}>
<$eventcatcher
tag="div"
selector=".tc-sidebar-resizer-pointermove"
matchSelector=".tc-sidebar-resizer-pointermove"
class=<<get.active.class tc-sidebar-resizer-pointermove-eventcatcher>>
selector=".tc-slider-pointermove"
matchSelector=".tc-slider-pointermove"
class=<<get.active.class tc-slider-pointermove-eventcatcher>>
$pointerup=<<sidebar-resizer-pointercancel-actions>>
$pointerleave=<<sidebar-resizer-pointercancel-actions>>
$pointerout=<<sidebar-resizer-pointercancel-actions>>
@ -515,7 +515,7 @@ title: $:/core/procedures/sidebar-resizer
$pointermove=<<sidebar-resizer-pointermove-actions>>
$contextmenu=<<sidebar-resizer-pointercancel-actions>>>
<div class=<<get.active.class tc-sidebar-resizer-pointermove>>/>
<div class=<<get.active.class tc-slider-pointermove>>/>
</$eventcatcher>

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

@ -6,7 +6,7 @@ code-body: yes
\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock conditional html
.tc-sidebar-resizer {
.tc-slider {
position: fixed;
top: 0;
height: 100%;
@ -16,22 +16,22 @@ code-body: yes
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>>;
}
.tc-sidebar-resizer-pointerdown-eventcatcher, .tc-sidebar-resizer-pointermove-eventcatcher-wrapper {
.tc-slider-pointerdown-eventcatcher, .tc-slider-pointermove-eventcatcher-wrapper {
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;
width: 100%;
top: 0;
left: 0;
}
.tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove {
.tc-slider-pointermove-eventcatcher, .tc-slider-pointermove {
position: absolute;
top: 0;
left: 0;
@ -42,39 +42,39 @@ code-body: yes
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;
flex-direction: column;
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;
}
.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;
}
.tc-sidebar-resizer, .tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove {
.tc-slider, .tc-slider-pointermove-eventcatcher, .tc-slider-pointermove {
touch-action: none;
user-select: none;
}
.tc-sidebar-resizer-pointermove-eventcatcher-wrapper.tc-resizer-active {
.tc-slider-pointermove-eventcatcher-wrapper.tc-resizer-active {
z-index: 801;
}
.tc-sidebar-resizer-pointermove-eventcatcher.tc-resizer-active {
.tc-slider-pointermove-eventcatcher.tc-resizer-active {
z-index: 802;
}
.tc-sidebar-resizer-pointermove.tc-resizer-active {
.tc-slider-pointermove.tc-resizer-active {
z-index: 803;
cursor: ew-resize;
}
.tc-sidebar-resizer.tc-resizer-active {
.tc-slider.tc-resizer-active {
opacity: <<get.theme.metric slideropacityhover>>;
}
@ -84,11 +84,11 @@ code-body: yes
@media (pointer: coarse) {
.tc-sidebar-resizer.tc-main-sidebar-resizer {
.tc-slider.tc-main-slider {
background: <<colour muted-foreground>>;
}
.tc-sidebar-resizer.tc-main-sidebar-resizer:hover {
.tc-slider.tc-main-slider:hover {
opacity: <<get.theme.metric slideropacity>>;
}
}
@ -97,7 +97,7 @@ code-body: yes
@media (pointer: coarse) {
.tc-sidebar-resizer.tc-main-sidebar-resizer {
.tc-slider.tc-main-slider {
opacity: min(calc(3 * <<get.theme.metric slideropacity>>),1);
}
}
@ -106,11 +106,11 @@ code-body: 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)));
}
.tc-sidebar-left .tc-sidebar-resizer.tc-main-sidebar-resizer {
.tc-sidebar-left .tc-slider.tc-main-slider {
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)));
}
@ -119,11 +119,11 @@ code-body: 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)));
}
.tc-sidebar-left .tc-sidebar-resizer.tc-main-sidebar-resizer {
.tc-sidebar-left .tc-slider.tc-main-slider {
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)));
}
@ -132,11 +132,11 @@ code-body: 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)));
}
.tc-sidebar-left .tc-sidebar-resizer.tc-main-sidebar-resizer {
.tc-sidebar-left .tc-slider.tc-main-slider {
left: auto;
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)));
@ -146,7 +146,7 @@ code-body: yes
<%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;
}
@ -156,7 +156,7 @@ code-body: yes
@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;
}
}
@ -204,13 +204,13 @@ div[class*="tc-editor-preview-slider-"] {
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>>);
}
<%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);
}