mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2025-01-24 07:56:52 +00:00
make it more generic
This commit is contained in:
BurningTreeC
parent
de653df549
commit
0c132c96be
@ -1,53 +0,0 @@
|
|||||||
title: $:/core/ui/PageTemplate/sidebar-resizer
|
|
||||||
tags: $:/tags/PageTemplate
|
|
||||||
list-after: $:/core/ui/PageTemplate/story
|
|
||||||
|
|
||||||
\import $:/core/macros/sidebar-resizer
|
|
||||||
\whitespace trim
|
|
||||||
|
|
||||||
<%if [{$:/themes/tiddlywiki/vanilla/options/sidebarresizer}match[show]] %>
|
|
||||||
|
|
||||||
<$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-pointercancel-actions>>>
|
|
||||||
|
|
||||||
<%if [{$:/state/sidebar}!match[no]] %>
|
|
||||||
|
|
||||||
<$eventcatcher
|
|
||||||
tag="div"
|
|
||||||
class="tc-sidebar-resizer-pointermove-eventcatcher-wrapper"
|
|
||||||
selector=".tc-sidebar-resizer"
|
|
||||||
matchSelector=".tc-sidebar-resizer"
|
|
||||||
$pointerup={{{ [[$:/state/sidebar/resizing]!is[missing]then<sidebar-resizer-pointercancel-actions>] }}}>
|
|
||||||
|
|
||||||
<$eventcatcher
|
|
||||||
tag="div"
|
|
||||||
selector=".tc-sidebar-resizer-pointermove"
|
|
||||||
matchSelector=".tc-sidebar-resizer-pointermove"
|
|
||||||
class="tc-sidebar-resizer-pointermove-eventcatcher"
|
|
||||||
$pointerup=<<sidebar-resizer-pointercancel-actions>>
|
|
||||||
$pointerleave=<<sidebar-resizer-pointercancel-actions>>
|
|
||||||
$pointerout=<<sidebar-resizer-pointercancel-actions>>
|
|
||||||
$pointercancel=<<sidebar-resizer-pointercancel-actions>>
|
|
||||||
$pointerdown=<<sidebar-resizer-pointercancel-actions>>
|
|
||||||
$touchstart=<<sidebar-resizer-pointercancel-actions>>
|
|
||||||
$pointermove=<<sidebar-resizer-pointermove-actions>>
|
|
||||||
$contextmenu=<<sidebar-resizer-pointercancel-actions>>>
|
|
||||||
|
|
||||||
<div class="tc-sidebar-resizer-pointermove"/>
|
|
||||||
|
|
||||||
</$eventcatcher>
|
|
||||||
|
|
||||||
<div class="tc-sidebar-resizer"/>
|
|
||||||
|
|
||||||
</$eventcatcher>
|
|
||||||
|
|
||||||
<% endif %>
|
|
||||||
|
|
||||||
</$eventcatcher>
|
|
||||||
|
|
||||||
<% endif %>
|
|
||||||
@ -51,11 +51,11 @@ title: $:/core/macros/sidebar-resizer
|
|||||||
\procedure sidebar-resizer-pointerdown-actions()
|
\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]] %>
|
||||||
<$let
|
<$let
|
||||||
startStoryLeft={{{ [get.theme.metric[metrics/storyleft]] }}}
|
startStoryLeft={{{ [<storyLeftTiddler>!is[blank]get[text]] :else[get.theme.metric[metrics/storyleft]] }}}
|
||||||
startStoryRight={{{ [get.theme.metric[metrics/storyright]] }}}
|
startStoryRight={{{ [<storyRightTiddler>!is[blank]get[text]] :else[get.theme.metric[metrics/storyright]] }}}
|
||||||
startSidebarWidth={{{ [get.theme.metric[metrics/sidebarwidth]] }}}
|
startSidebarWidth={{{ [<sidebarWidthTiddler>!is[blank]get[text]] :else[get.theme.metric[metrics/sidebarwidth]] }}}
|
||||||
startTiddlerWidth={{{ [get.theme.metric[metrics/tiddlerwidth]] }}}
|
startTiddlerWidth={{{ [<tiddlerWidthTiddler>!is[blank]get[text]] :else[get.theme.metric[metrics/tiddlerwidth]] }}}
|
||||||
startStoryWidth={{{ [get.theme.metric[metrics/storywidth]] }}}>
|
startStoryWidth={{{ [<storyWidthTiddler>!is[blank]get[text]] :else[get.theme.metric[metrics/storywidth]] }}}>
|
||||||
<$action-setfield $tiddler="$:/state/sidebar/resizing"
|
<$action-setfield $tiddler="$:/state/sidebar/resizing"
|
||||||
text="yes"
|
text="yes"
|
||||||
widget-node-width=<<tv-widgetnode-width>>
|
widget-node-width=<<tv-widgetnode-width>>
|
||||||
@ -83,13 +83,16 @@ title: $:/core/macros/sidebar-resizer
|
|||||||
<$let
|
<$let
|
||||||
storyRightStart={{{ [convert.to.pixels{$:/state/sidebar/resizing!!start-story-right}] }}}
|
storyRightStart={{{ [convert.to.pixels{$:/state/sidebar/resizing!!start-story-right}] }}}
|
||||||
storyWidthStart={{{ [convert.to.pixels{$:/state/sidebar/resizing!!start-story-width}] }}}
|
storyWidthStart={{{ [convert.to.pixels{$:/state/sidebar/resizing!!start-story-width}] }}}
|
||||||
storyMinWidth={{{ [convert.to.pixels<get.theme.metric metrics/storyminwidth>] }}}
|
storyMinWidthValue={{{ [<storyMinWidthTiddler>!is[blank]get[text]] :else[<get.theme.metric metrics/storyminwidth>] }}}
|
||||||
sidebarMinWidth={{{ [convert.to.pixels<get.theme.metric metrics/sidebarminwidth>] }}}
|
storyMinWidth={{{ [convert.to.pixels<storyMinWidthValue>] }}}
|
||||||
storyPaddingLeft={{{ [get.theme.metric[metrics/storypaddingleft]] }}}
|
sidebarMinWidthValue={{{ [<sidebarMinWidthTiddler>!is[blank]get[text]] :else[<get.theme.metric metrics/sidebarminwidth>] }}}
|
||||||
storyPaddingLeft={{{ [convert.to.pixels<storyPaddingLeft>] }}}
|
sidebarMinWidth={{{ [convert.to.pixels<sidebarMinWidthValue>] }}}
|
||||||
storyPaddingRight={{{ [get.theme.metric[metrics/storypaddingright]] }}}
|
storyPaddingLeftValue={{{ [<storyPaddingLeftTiddler>!is[blank]get[text]] :else[get.theme.metric[metrics/storypaddingleft]] }}}
|
||||||
storyPaddingRight={{{ [convert.to.pixels<storyPaddingRight>] }}}
|
storyPaddingLeft={{{ [convert.to.pixels<storyPaddingLeftValue>] }}}
|
||||||
storyLeft={{{ [convert.to.pixels<get.theme.metric metrics/storyleft>] }}}
|
storyPaddingRightValue={{{ [<storyPaddingRightTiddler>!is[blank]get[text]] :else[get.theme.metric[metrics/storypaddingright]] }}}
|
||||||
|
storyPaddingRight={{{ [convert.to.pixels<storyPaddingRightValue>] }}}
|
||||||
|
storyLeftValue={{{ [<storyLeftTiddler>!is[blank]get[text]] :else[<get.theme.metric metrics/storyleft>] }}}
|
||||||
|
storyLeft={{{ [convert.to.pixels<storyLeftValue>] }}}
|
||||||
clampedDiff={{{ [<storyWidthStart>add<storyLeft>add<sidebarMinWidth>subtract<widgetNodeWidth>compare:number:gt[0]] ~0 }}}
|
clampedDiff={{{ [<storyWidthStart>add<storyLeft>add<sidebarMinWidth>subtract<widgetNodeWidth>compare:number:gt[0]] ~0 }}}
|
||||||
storyWidthStart={{{ [<storyWidthStart>subtract<clampedDiff>] }}}
|
storyWidthStart={{{ [<storyWidthStart>subtract<clampedDiff>] }}}
|
||||||
storyRightStart={{{ [<storyRightStart>subtract<clampedDiff>] }}}
|
storyRightStart={{{ [<storyRightStart>subtract<clampedDiff>] }}}
|
||||||
@ -120,7 +123,7 @@ title: $:/core/macros/sidebar-resizer
|
|||||||
|
|
||||||
storyWidthResult={{{ [<storyWidth>compare:number:lt<storyMinWidth>then<storyMinWidthConverted>addsuffix<storyWidthMetric>] :else[<storyWidth>compare:number:gteq<storyMaxWidth>then<storyMaxWidthConverted>addsuffix<storyWidthMetric>] :else[<storyWidthConverted>addsuffix<storyWidthMetric>] }}}
|
storyWidthResult={{{ [<storyWidth>compare:number:lt<storyMinWidth>then<storyMinWidthConverted>addsuffix<storyWidthMetric>] :else[<storyWidth>compare:number:gteq<storyMaxWidth>then<storyMaxWidthConverted>addsuffix<storyWidthMetric>] :else[<storyWidthConverted>addsuffix<storyWidthMetric>] }}}
|
||||||
|
|
||||||
tiddlerWidthResult={{{ [<tiddlerWidthMetric>match[%]then<storyWidth>compare:number:lt<storyMinWidth>then<get.theme.metric metrics/tiddlerwidth>compare:number:gteq[0]then<get.theme.metric metrics/tiddlerwidth>] :else[<tiddlerWidthMetric>match[%]then<storyWidth>compare:number:gt<storyMaxWidth>then<get.theme.metric metrics/tiddlerwidth>] :else[<tiddlerWidthMetric>!match[%]then<tiddlerWidth>compare:number:lt<tiddlerMinWidth>then<tiddlerMinWidthConverted>addsuffix<tiddlerWidthMetric>] :else[<tiddlerWidthMetric>!match[%]then<tiddlerWidth>compare:number:gteq<tiddlerMaxWidth>then<tiddlerMaxWidthConverted>addsuffix<tiddlerWidthMetric>] :else[<tiddlerWidth>compare:number:lt[0]then[0]addsuffix<tiddlerWidthMetric>] :else[<tiddlerWidthConverted>addsuffix<tiddlerWidthMetric>] }}}>
|
tiddlerWidthResult={{{ [<tiddlerWidthMetric>match[%]then<storyWidth>compare:number:lt<storyMinWidth>then<get.theme.metric metrics/tiddlerwidth>compare:number:gteq[0]then<get.theme.metric metrics/tiddlerwidth>] :else[<tiddlerWidthMetric>match[%]then<storyWidth>compare:number:gt<storyMaxWidth>then<get.theme.metric metrics/tiddlerwidth>] :else[<tiddlerWidthMetric>!match[%]then<tiddlerWidth>compare:number:lt<tiddlerMinWidth>then<tiddlerMinWidthConverted>addsuffix<tiddlerWidthMetric>] :else[<tiddlerWidthMetric>!match[%]then<tiddlerWidth>compare:number:gteq<tiddlerMaxWidth>then<tiddlerMaxWidthConverted>addsuffix<tiddlerWidthMetric>] :else[<tiddlerWidth>compare:number:lt[0]then[0]addsuffix<tiddlerWidthMetric>] :else[<tiddlerWidthConverted>addsuffix<tiddlerWidthMetric>] }}}>
|
||||||
|
|
||||||
<$action-setfield $tiddler=<<set.theme.metric metrics/tiddlerwidth>> text=<<tiddlerWidthResult>>/>
|
<$action-setfield $tiddler=<<set.theme.metric metrics/tiddlerwidth>> text=<<tiddlerWidthResult>>/>
|
||||||
<$action-setfield $tiddler=<<set.theme.metric metrics/storywidth>> text=<<storyWidthResult>>/>
|
<$action-setfield $tiddler=<<set.theme.metric metrics/storywidth>> text=<<storyWidthResult>>/>
|
||||||
@ -144,10 +147,13 @@ title: $:/core/macros/sidebar-resizer
|
|||||||
|
|
||||||
\procedure set-sidebarwidth-actions()
|
\procedure set-sidebarwidth-actions()
|
||||||
<$let
|
<$let
|
||||||
|
sidebarMinWidthValue={{{ [<sidebarMinWidthTiddler>!is[blank]get[text]] :else[<get.theme.metric metrics/sidebarminwidth>] }}}
|
||||||
sidebarWidthMetric={{$:/state/sidebar/resizing!!sidebar-width-metric}}
|
sidebarWidthMetric={{$:/state/sidebar/resizing!!sidebar-width-metric}}
|
||||||
sidebarMinWidth={{{ [convert.to.pixels<get.theme.metric metrics/sidebarminwidth>] }}}
|
sidebarMinWidth={{{ [convert.to.pixels<sidebarMinWidthValue>] }}}
|
||||||
storyLeft={{{ [convert.to.pixels<get.theme.metric metrics/storyleft>] }}}
|
storyLeftValue={{{ [<storyLeftTiddler>!is[blank]get[text]] :else[<get.theme.metric metrics/storyleft>] }}}
|
||||||
storyMinWidth={{{ [convert.to.pixels<get.theme.metric metrics/storyminwidth>] }}}
|
storyLeft={{{ [convert.to.pixels<storyLeftValue>] }}}
|
||||||
|
storyMinWidthValue={{{ [<storyMinWidthTiddler>!is[blank]get[text]] :else[<get.theme.metric metrics/storyminwidth>] }}}
|
||||||
|
storyMinWidth={{{ [convert.to.pixels<storyMinWidthValue>] }}}
|
||||||
sidebarMaxWidth={{{ [<widgetNodeWidth>subtract<storyLeft>subtract<storyMinWidth>] }}}
|
sidebarMaxWidth={{{ [<widgetNodeWidth>subtract<storyLeft>subtract<storyMinWidth>] }}}
|
||||||
clampedDiff={{{ [<storyLeft>add<storyMinWidth>add<startSidebarWidth>subtract<widgetNodeWidth>compare:number:gt[0]] ~0 }}}
|
clampedDiff={{{ [<storyLeft>add<storyMinWidth>add<startSidebarWidth>subtract<widgetNodeWidth>compare:number:gt[0]] ~0 }}}
|
||||||
sidebarWidth={{{ [<sidebarWidth>subtract<clampedDiff>] }}}>
|
sidebarWidth={{{ [<sidebarWidth>subtract<clampedDiff>] }}}>
|
||||||
@ -164,9 +170,11 @@ title: $:/core/macros/sidebar-resizer
|
|||||||
|
|
||||||
\procedure set-centralised-actions()
|
\procedure set-centralised-actions()
|
||||||
<$let
|
<$let
|
||||||
storyMinWidth={{{ [convert.to.pixels{$:/themes/tiddlywiki/centralised/metrics/storyminwidth}] }}}
|
storyMinWidthValue={{{ [<storyMinWidthTiddler>!is[blank]get[text]] :else[{$:/themes/tiddlywiki/centralised/metrics/storyminwidth}] }}}
|
||||||
|
storyMinWidth={{{ [convert.to.pixels<storyMinWidthValue>] }}}
|
||||||
storyWidthStart={{{ [convert.to.pixels{$:/state/sidebar/resizing!!start-story-width}] }}}
|
storyWidthStart={{{ [convert.to.pixels{$:/state/sidebar/resizing!!start-story-width}] }}}
|
||||||
sidebarMinWidth={{{ [convert.to.pixels{$:/themes/tiddlywiki/centralised/metrics/sidebarminwidth}] }}}
|
sidebarMinWidthValue={{{ [<sidebarMinWidthTiddler>!is[blank]get[text]] :else[{$:/themes/tiddlywiki/centralised/metrics/sidebarminwidth}] }}}
|
||||||
|
sidebarMinWidth={{{ [convert.to.pixels<sidebarMinWidthValue>] }}}
|
||||||
storyMaxWidth={{{ [<widgetNodeWidth>subtract<sidebarMinWidth>subtract<sidebarMinWidth>] }}}
|
storyMaxWidth={{{ [<widgetNodeWidth>subtract<sidebarMinWidth>subtract<sidebarMinWidth>] }}}
|
||||||
dragDiffMultiplied={{{ [<dragDiff>multiply[2]] }}}
|
dragDiffMultiplied={{{ [<dragDiff>multiply[2]] }}}
|
||||||
storyWidthClamped={{{ [<storyWidthStart>add<sidebarMinWidth>add<sidebarMinWidth>subtract<widgetNodeWidth>compare:number:gt[0]] ~0 }}}
|
storyWidthClamped={{{ [<storyWidthStart>add<sidebarMinWidth>add<sidebarMinWidth>subtract<widgetNodeWidth>compare:number:gt[0]] ~0 }}}
|
||||||
@ -179,7 +187,7 @@ title: $:/core/macros/sidebar-resizer
|
|||||||
storyMinWidthConverted={{{ [function[convert.to.result],<storyMinWidth>,<storyWidthMetric>] }}}
|
storyMinWidthConverted={{{ [function[convert.to.result],<storyMinWidth>,<storyWidthMetric>] }}}
|
||||||
storyMaxWidthConverted={{{ [function[convert.to.result],<storyMaxWidth>,<storyWidthMetric>] }}}>
|
storyMaxWidthConverted={{{ [function[convert.to.result],<storyMaxWidth>,<storyWidthMetric>] }}}>
|
||||||
|
|
||||||
<$action-setfield $tiddler="$:/themes/tiddlywiki/centralised/metrics/storywidth" text={{{ [<storyWidth>compare:number:lt<storyMinWidth>then<storyMinWidthConverted>addsuffix<storyWidthMetric>] :else[<storyWidth>compare:number:gteq<storyMaxWidth>then<storyMaxWidthConverted>addsuffix<storyWidthMetric>] :else[<storyWidthConverted>addsuffix<storyWidthMetric>] }}}/>
|
<$action-setfield $tiddler=<<set.theme.metric metrics/storywidth>> text={{{ [<storyWidth>compare:number:lt<storyMinWidth>then<storyMinWidthConverted>addsuffix<storyWidthMetric>] :else[<storyWidth>compare:number:gteq<storyMaxWidth>then<storyMaxWidthConverted>addsuffix<storyWidthMetric>] :else[<storyWidthConverted>addsuffix<storyWidthMetric>] }}}/>
|
||||||
|
|
||||||
</$let>
|
</$let>
|
||||||
|
|
||||||
@ -191,18 +199,65 @@ title: $:/core/macros/sidebar-resizer
|
|||||||
\procedure sidebar-resizer-pointermove-actions()
|
\procedure sidebar-resizer-pointermove-actions()
|
||||||
<%if [[$:/state/sidebar/resizing]!is[missing]] %>
|
<%if [[$:/state/sidebar/resizing]!is[missing]] %>
|
||||||
<$let widgetNodeWidth={{$:/state/sidebar/resizing!!widget-node-width}} dragDiff=<<get.drag.diff>> startStoryRight={{{ [convert.to.pixels{$:/state/sidebar/resizing!!start-story-right}] }}} storyRiverWidth={{{ [<startStoryRight>add<dragDiff>] }}} startSidebarWidth={{{ [convert.to.pixels{$:/state/sidebar/resizing!!start-sidebar-width}] }}} sidebarWidth={{{ [<startSidebarWidth>subtract<dragDiff>] }}}>
|
<$let widgetNodeWidth={{$:/state/sidebar/resizing!!widget-node-width}} dragDiff=<<get.drag.diff>> startStoryRight={{{ [convert.to.pixels{$:/state/sidebar/resizing!!start-story-right}] }}} storyRiverWidth={{{ [<startStoryRight>add<dragDiff>] }}} startSidebarWidth={{{ [convert.to.pixels{$:/state/sidebar/resizing!!start-sidebar-width}] }}} sidebarWidth={{{ [<startSidebarWidth>subtract<dragDiff>] }}}>
|
||||||
<%if [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fixed-fluid]then{$:/theme}!match[$:/themes/tiddlywiki/centralised]] %>
|
<%if [<tv-set-storywidth-storyright>match[yes]] %>
|
||||||
<<set_theme_throttling metrics/storyright>>
|
<<set_theme_throttling metrics/storyright>>
|
||||||
<<set_theme_throttling metrics/tiddlerwidth>>
|
<<set_theme_throttling metrics/tiddlerwidth>>
|
||||||
<<set_theme_throttling metrics/storywidth>>
|
<<set_theme_throttling metrics/storywidth>>
|
||||||
<<set-storywidth-storyright-actions>>
|
<<set-storywidth-storyright-actions>>
|
||||||
<%elseif [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fluid-fixed]then{$:/theme}!match[$:/themes/tiddlywiki/centralised]] %>
|
<% endif %>
|
||||||
|
<%if [<tv-set-sidebarwidth>match[yes]] %>
|
||||||
<<set_theme_throttling metrics/sidebarwidth>>
|
<<set_theme_throttling metrics/sidebarwidth>>
|
||||||
<<set-sidebarwidth-actions>>
|
<<set-sidebarwidth-actions>>
|
||||||
<%elseif [{$:/theme}match[$:/themes/tiddlywiki/centralised]] %>
|
<% endif %>
|
||||||
|
<%if [<tv-set-centralised>match[yes]] %>
|
||||||
<<set_theme_throttling metrics/storywidth>>
|
<<set_theme_throttling metrics/storywidth>>
|
||||||
<<set-centralised-actions>>
|
<<set-centralised-actions>>
|
||||||
<% endif %>
|
<% endif %>
|
||||||
</$let>
|
</$let>
|
||||||
<% endif %>
|
<% endif %>
|
||||||
\end
|
\end
|
||||||
|
|
||||||
|
\procedure sidebar-resizer()
|
||||||
|
<$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-pointercancel-actions>>>
|
||||||
|
|
||||||
|
<%if [{$:/state/sidebar}!match[no]] %>
|
||||||
|
|
||||||
|
<$eventcatcher
|
||||||
|
tag="div"
|
||||||
|
class="tc-sidebar-resizer-pointermove-eventcatcher-wrapper"
|
||||||
|
selector=".tc-sidebar-resizer"
|
||||||
|
matchSelector=".tc-sidebar-resizer"
|
||||||
|
$pointerup={{{ [[$:/state/sidebar/resizing]!is[missing]then<sidebar-resizer-pointercancel-actions>] }}}>
|
||||||
|
|
||||||
|
<$eventcatcher
|
||||||
|
tag="div"
|
||||||
|
selector=".tc-sidebar-resizer-pointermove"
|
||||||
|
matchSelector=".tc-sidebar-resizer-pointermove"
|
||||||
|
class="tc-sidebar-resizer-pointermove-eventcatcher"
|
||||||
|
$pointerup=<<sidebar-resizer-pointercancel-actions>>
|
||||||
|
$pointerleave=<<sidebar-resizer-pointercancel-actions>>
|
||||||
|
$pointerout=<<sidebar-resizer-pointercancel-actions>>
|
||||||
|
$pointercancel=<<sidebar-resizer-pointercancel-actions>>
|
||||||
|
$pointerdown=<<sidebar-resizer-pointercancel-actions>>
|
||||||
|
$touchstart=<<sidebar-resizer-pointercancel-actions>>
|
||||||
|
$pointermove=<<sidebar-resizer-pointermove-actions>>
|
||||||
|
$contextmenu=<<sidebar-resizer-pointercancel-actions>>>
|
||||||
|
|
||||||
|
<div class="tc-sidebar-resizer-pointermove"/>
|
||||||
|
|
||||||
|
</$eventcatcher>
|
||||||
|
|
||||||
|
<div class="tc-sidebar-resizer"/>
|
||||||
|
|
||||||
|
</$eventcatcher>
|
||||||
|
|
||||||
|
<% endif %>
|
||||||
|
|
||||||
|
</$eventcatcher>
|
||||||
|
\end
|
||||||
|
|||||||
20
themes/tiddlywiki/centralised/sidebar-resizer-ui.tid
Normal file
20
themes/tiddlywiki/centralised/sidebar-resizer-ui.tid
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
title: $:/core/ui/PageTemplate/sidebar-resizer
|
||||||
|
tags: $:/tags/PageTemplate
|
||||||
|
list-after: $:/core/ui/PageTemplate/story
|
||||||
|
|
||||||
|
\import $:/core/macros/sidebar-resizer
|
||||||
|
\whitespace trim
|
||||||
|
|
||||||
|
<%if [{$:/themes/tiddlywiki/vanilla/options/sidebarresizer}match[show]] %>
|
||||||
|
|
||||||
|
<$let
|
||||||
|
tv-set-storywidth-storyright="no"
|
||||||
|
tv-set-sidebarwidth="no"
|
||||||
|
tv-set-centralised="yes"
|
||||||
|
>
|
||||||
|
|
||||||
|
<$transclude $variable="sidebar-resizer"/>
|
||||||
|
|
||||||
|
</$let>
|
||||||
|
|
||||||
|
<% endif %>
|
||||||
20
themes/tiddlywiki/vanilla/sidebar-resizer-ui.tid
Normal file
20
themes/tiddlywiki/vanilla/sidebar-resizer-ui.tid
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
title: $:/core/ui/PageTemplate/sidebar-resizer
|
||||||
|
tags: $:/tags/PageTemplate
|
||||||
|
list-after: $:/core/ui/PageTemplate/story
|
||||||
|
|
||||||
|
\import $:/core/macros/sidebar-resizer
|
||||||
|
\whitespace trim
|
||||||
|
|
||||||
|
<%if [{$:/themes/tiddlywiki/vanilla/options/sidebarresizer}match[show]] %>
|
||||||
|
|
||||||
|
<$let
|
||||||
|
tv-set-storywidth-storyright={{{ [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fixed-fluid]then[yes]] :else[[no]] }}}
|
||||||
|
tv-set-sidebarwidth={{{ [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fluid-fixed]then[yes]] :else[[no]] }}}
|
||||||
|
tv-set-centralised="no"
|
||||||
|
>
|
||||||
|
|
||||||
|
<$transclude $variable="sidebar-resizer"/>
|
||||||
|
|
||||||
|
</$let>
|
||||||
|
|
||||||
|
<% endif %>
|
||||||
@ -1,126 +1,126 @@
|
|||||||
title: $:/themes/tiddlywiki/vanilla/sidebar-resizer
|
title: $:/themes/tiddlywiki/vanilla/sidebar-resizer
|
||||||
tags: [[$:/tags/Stylesheet]]
|
tags: [[$:/tags/Stylesheet]]
|
||||||
code-body: yes
|
code-body: yes
|
||||||
|
|
||||||
\function sidebarbreakpoint() [{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}]
|
\function sidebarbreakpoint() [{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}]
|
||||||
|
|
||||||
\function sidebarbreakpoint-minus-one() [{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}removesuffix[px]subtract[1]addsuffix[px]] ~[{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}]
|
\function sidebarbreakpoint-minus-one() [{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}removesuffix[px]subtract[1]addsuffix[px]] ~[{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}]
|
||||||
|
|
||||||
\function get.theme.metric(metric) [{$:/theme}addsuffix[/]addsuffix<metric>get[text]] ~[[$:/themes/tiddlywiki/vanilla/]addsuffix<metric>get[text]]
|
\function get.theme.metric(metric) [{$:/theme}addsuffix[/]addsuffix<metric>get[text]] ~[[$:/themes/tiddlywiki/vanilla/]addsuffix<metric>get[text]]
|
||||||
|
|
||||||
\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock conditional
|
\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock conditional
|
||||||
|
|
||||||
@media (min-width: <<sidebarbreakpoint>>) {
|
@media (min-width: <<sidebarbreakpoint>>) {
|
||||||
|
|
||||||
.tc-sidebar-resizer {
|
.tc-sidebar-resizer {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: min(calc(<<get.theme.metric metrics/storypaddingright>> / 2),21px);
|
width: min(calc(<<get.theme.metric metrics/storypaddingright>> / 2),21px);
|
||||||
transition: opacity 100ms;
|
transition: opacity 100ms;
|
||||||
opacity: 0.1;
|
opacity: 0.1;
|
||||||
cursor: ew-resize;
|
cursor: ew-resize;
|
||||||
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-sidebar-resizer:hover {
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (pointer: coarse) {
|
@media (pointer: coarse) {
|
||||||
|
|
||||||
.tc-sidebar-resizer {
|
.tc-sidebar-resizer {
|
||||||
background: <<colour muted-foreground>>;
|
background: <<colour muted-foreground>>;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tc-sidebar-resizer:hover {
|
.tc-sidebar-resizer:hover {
|
||||||
opacity: 0.1;
|
opacity: 0.1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove {
|
.tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tc-sidebar-resizer, .tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove {
|
.tc-sidebar-resizer, .tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove {
|
||||||
touch-action: none;
|
touch-action: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
<%if [[$:/state/sidebar/resizing]!is[missing]] %>
|
<%if [[$:/state/sidebar/resizing]!is[missing]] %>
|
||||||
|
|
||||||
.tc-sidebar-resizer-pointermove-eventcatcher-wrapper {
|
.tc-sidebar-resizer-pointermove-eventcatcher-wrapper {
|
||||||
z-index: 801;
|
z-index: 801;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tc-sidebar-resizer-pointermove-eventcatcher {
|
.tc-sidebar-resizer-pointermove-eventcatcher {
|
||||||
z-index: 802;
|
z-index: 802;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tc-sidebar-resizer-pointermove {
|
.tc-sidebar-resizer-pointermove {
|
||||||
z-index: 803;
|
z-index: 803;
|
||||||
cursor: ew-resize;
|
cursor: ew-resize;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tc-sidebar-resizer {
|
.tc-sidebar-resizer {
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (pointer: coarse) {
|
@media (pointer: coarse) {
|
||||||
|
|
||||||
.tc-sidebar-resizer {
|
.tc-sidebar-resizer {
|
||||||
opacity: 0.25;
|
opacity: 0.25;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
<% endif %>
|
<% endif %>
|
||||||
|
|
||||||
<%if [{$:/theme}!match[$:/themes/tiddlywiki/centralised]] %>
|
<%if [{$:/theme}!match[$:/themes/tiddlywiki/centralised]] %>
|
||||||
|
|
||||||
.tc-sidebar-resizer {
|
.tc-sidebar-resizer {
|
||||||
left: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),max(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),calc({{$:/themes/tiddlywiki/vanilla/metrics/storyright}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3))),max(calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3) + ({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyright}})),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)))),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)));
|
left: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),max(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),calc({{$:/themes/tiddlywiki/vanilla/metrics/storyright}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3))),max(calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3) + ({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyright}})),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)))),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)));
|
||||||
}
|
}
|
||||||
|
|
||||||
.tc-sidebar-left .tc-sidebar-resizer {
|
.tc-sidebar-left .tc-sidebar-resizer {
|
||||||
left: auto;
|
left: auto;
|
||||||
right: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),max(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),calc({{$:/themes/tiddlywiki/vanilla/metrics/storyright}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3))),max(calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3) + ({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyright}})),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)))),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)));
|
right: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),max(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),calc({{$:/themes/tiddlywiki/vanilla/metrics/storyright}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3))),max(calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3) + ({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyright}})),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)))),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)));
|
||||||
}
|
}
|
||||||
|
|
||||||
<%if [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fluid-fixed]] %>
|
<%if [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fluid-fixed]] %>
|
||||||
|
|
||||||
.tc-sidebar-resizer {
|
.tc-sidebar-resizer {
|
||||||
left: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} + ({{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} + ({{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} + ({{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)));
|
left: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} + ({{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} + ({{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} + ({{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)));
|
||||||
}
|
}
|
||||||
|
|
||||||
.tc-sidebar-left .tc-sidebar-resizer {
|
.tc-sidebar-left .tc-sidebar-resizer {
|
||||||
left: auto;
|
left: auto;
|
||||||
right: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} + ({{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} + ({{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} + ({{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)));
|
right: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} + ({{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} + ({{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} + ({{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)));
|
||||||
}
|
}
|
||||||
|
|
||||||
<% endif %>
|
<% endif %>
|
||||||
|
|
||||||
<% endif %>
|
<% endif %>
|
||||||
|
|
||||||
<%if [{$:/state/sidebar}match[no]] %>
|
<%if [{$:/state/sidebar}match[no]] %>
|
||||||
|
|
||||||
.tc-sidebar-resizer-pointerdown-eventcatcher, .tc-sidebar-resizer-pointermove-eventcatcher-wrapper, .tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove, .tc-sidebar-resizer {
|
.tc-sidebar-resizer-pointerdown-eventcatcher, .tc-sidebar-resizer-pointermove-eventcatcher-wrapper, .tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove, .tc-sidebar-resizer {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
<% endif %>
|
<% endif %>
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: <<sidebarbreakpoint-minus-one>>) {
|
@media (max-width: <<sidebarbreakpoint-minus-one>>) {
|
||||||
|
|
||||||
.tc-sidebar-resizer-pointerdown-eventcatcher, .tc-sidebar-resizer-pointermove-eventcatcher-wrapper, .tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove, .tc-sidebar-resizer {
|
.tc-sidebar-resizer-pointerdown-eventcatcher, .tc-sidebar-resizer-pointermove-eventcatcher-wrapper, .tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove, .tc-sidebar-resizer {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user