mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2025-01-26 17:06:51 +00:00
Add tabbed table of contents
This commit is contained in:
Jermolene
parent
bd211ea082
commit
f5055c0205
@ -1,30 +1,33 @@
|
||||
title: $:/core/macros/toc
|
||||
tags: $:/tags/Macro
|
||||
|
||||
\define toc-body(rootTag,tag,sort:"")
|
||||
\define toc-body(rootTag,tag,sort:"",itemClassFilter)
|
||||
<ol class="tc-toc">
|
||||
<$list filter="""[tag[$tag$]!has[draft.of]$sort$]""">
|
||||
<li>
|
||||
<$set name="toc-item-class" filter="""$itemClassFilter$""" value="toc-item-selected" emptyValue="toc-item">
|
||||
<li class=<<toc-item-class>>>
|
||||
<$list filter="[is[current]toc-link[no]]" emptyMessage="<$link><$view field='caption'><$view field='title'/></$view></$link>">
|
||||
<$view field="caption">
|
||||
<$view field="title"/>
|
||||
</$view>
|
||||
</$list>
|
||||
<$list filter="""[all[current]] -[[$rootTag$]]""">
|
||||
<$macrocall $name="toc-body" rootTag="""$rootTag$""" tag=<<currentTiddler>> sort="$sort$"/>
|
||||
<$macrocall $name="toc-body" rootTag="""$rootTag$""" tag=<<currentTiddler>> sort="""$sort$""" itemClassFilter="""$itemClassFilter$"""/>
|
||||
</$list>
|
||||
</li>
|
||||
</$set>
|
||||
</$list>
|
||||
</ol>
|
||||
\end
|
||||
|
||||
\define toc(tag,sort:"")
|
||||
<<toc-body rootTag:"""$tag$""" tag:"""$tag$""" sort:"""$sort$""">>
|
||||
\define toc(tag,sort:"",itemClassFilter)
|
||||
<<toc-body rootTag:"""$tag$""" tag:"""$tag$""" sort:"""$sort$""" itemClassFilter:"""itemClassFilter""">>
|
||||
\end
|
||||
|
||||
\define toc-linked-expandable-body(tag,sort:"")
|
||||
\define toc-linked-expandable-body(tag,sort:"",itemClassFilter)
|
||||
<$set name="toc-state" value=<<qualify "$:/state/toc/$tag$-$(currentTiddler)$">>>
|
||||
<li>
|
||||
<$set name="toc-item-class" filter="""$itemClassFilter$""" value="toc-item-selected" emptyValue="toc-item">
|
||||
<li class=<<toc-item-class>>>
|
||||
<$link>
|
||||
<$reveal type="nomatch" state=<<toc-state>> text="open">
|
||||
<$button set=<<toc-state>> setTo="open" class="tc-btn-invisible">
|
||||
@ -41,15 +44,17 @@ tags: $:/tags/Macro
|
||||
</$view>
|
||||
</$link>
|
||||
<$reveal type="match" state=<<toc-state>> text="open">
|
||||
<$macrocall $name="toc-expandable" tag=<<currentTiddler>> sort="$sort$"/>
|
||||
<$macrocall $name="toc-expandable" tag=<<currentTiddler>> sort="""$sort$""" itemClassFilter="""$itemClassFilter$"""/>
|
||||
</$reveal>
|
||||
</li>
|
||||
</$set>
|
||||
</$set>
|
||||
\end
|
||||
|
||||
\define toc-unlinked-expandable-body(tag,sort:"")
|
||||
\define toc-unlinked-expandable-body(tag,sort:"",itemClassFilter)
|
||||
<$set name="toc-state" value=<<qualify "$:/state/toc/$tag$-$(currentTiddler)$">>>
|
||||
<li>
|
||||
<$set name="toc-item-class" filter="""$itemClassFilter$""" value="toc-item-selected" emptyValue="toc-item">
|
||||
<li class=<<toc-item-class>>>
|
||||
<$reveal type="nomatch" state=<<toc-state>> text="open">
|
||||
<$button set=<<toc-state>> setTo="open" class="tc-btn-invisible">
|
||||
{{$:/core/images/right-arrow}}
|
||||
@ -67,25 +72,27 @@ tags: $:/tags/Macro
|
||||
</$button>
|
||||
</$reveal>
|
||||
<$reveal type="match" state=<<toc-state>> text="open">
|
||||
<$macrocall $name="toc-expandable" tag=<<currentTiddler>> sort="$sort$"/>
|
||||
<$macrocall $name="toc-expandable" tag=<<currentTiddler>> sort="""$sort$""" itemClassFilter="""$itemClassFilter$"""/>
|
||||
</$reveal>
|
||||
</li>
|
||||
</$set>
|
||||
</$set>
|
||||
\end
|
||||
|
||||
\define toc-expandable(tag,sort:"")
|
||||
\define toc-expandable(tag,sort:"",itemClassFilter)
|
||||
<ol class="tc-toc toc-expandable">
|
||||
<$list filter="[tag[$tag$]!has[draft.of]$sort$]">
|
||||
<$list filter="[is[current]toc-link[no]]" emptyMessage="<<toc-linked-expandable-body tag:'$tag$' sort:'$sort$'>>">
|
||||
<<toc-unlinked-expandable-body tag:"$tag$" sort:"$sort$">>
|
||||
<$list filter="[is[current]toc-link[no]]" emptyMessage="<<toc-linked-expandable-body tag:'$tag$' sort:'$sort$' itemClassFilter:'$itemClassFilter$'>>">
|
||||
<<toc-unlinked-expandable-body tag:"""$tag$""" sort:"""$sort$""" itemClassFilter:"""itemClassFilter""">>
|
||||
</$list>
|
||||
</$list>
|
||||
</ol>
|
||||
\end
|
||||
|
||||
\define toc-linked-selective-expandable-body(tag,sort:"")
|
||||
\define toc-linked-selective-expandable-body(tag,sort:"",itemClassFilter)
|
||||
<$set name="toc-state" value=<<qualify "$:/state/toc/$tag$-$(currentTiddler)$">>>
|
||||
<li>
|
||||
<$set name="toc-item-class" filter="""$itemClassFilter$""" value="toc-item-selected" emptyValue="toc-item">
|
||||
<li class=<<toc-item-class>>>
|
||||
<$link>
|
||||
<$list filter="[all[current]tagging[]limit[1]]" variable="ignore" emptyMessage="<$button class='tc-btn-invisible'>{{$:/core/images/blank}}</$button>">
|
||||
<$reveal type="nomatch" state=<<toc-state>> text="open">
|
||||
@ -104,15 +111,17 @@ tags: $:/tags/Macro
|
||||
</$view>
|
||||
</$link>
|
||||
<$reveal type="match" state=<<toc-state>> text="open">
|
||||
<$macrocall $name="toc-selective-expandable" tag=<<currentTiddler>> sort="$sort$"/>
|
||||
<$macrocall $name="toc-selective-expandable" tag=<<currentTiddler>> sort="""$sort$""" itemClassFilter="""$itemClassFilter$"""/>
|
||||
</$reveal>
|
||||
</li>
|
||||
</$set>
|
||||
</$set>
|
||||
\end
|
||||
|
||||
\define toc-unlinked-selective-expandable-body(tag,sort:"")
|
||||
\define toc-unlinked-selective-expandable-body(tag,sort:"",itemClassFilter)
|
||||
<$set name="toc-state" value=<<qualify "$:/state/toc/$tag$-$(currentTiddler)$">>>
|
||||
<li>
|
||||
<$set name="toc-item-class" filter="""$itemClassFilter$""" value="toc-item-selected" emptyValue="toc-item">
|
||||
<li class=<<toc-item-class>>>
|
||||
<$list filter="[all[current]tagging[]limit[1]]" variable="ignore" emptyMessage="<$button class='tc-btn-invisible'>{{$:/core/images/blank}}</$button> <$view field='caption'><$view field='title'/></$view>">
|
||||
<$reveal type="nomatch" state=<<toc-state>> text="open">
|
||||
<$button set=<<toc-state>> setTo="open" class="tc-btn-invisible">
|
||||
@ -132,18 +141,39 @@ tags: $:/tags/Macro
|
||||
</$reveal>
|
||||
</$list>
|
||||
<$reveal type="match" state=<<toc-state>> text="open">
|
||||
<$macrocall $name="toc-selective-expandable" tag=<<currentTiddler>> sort="$sort$"/>
|
||||
<$macrocall $name="""toc-selective-expandable""" tag=<<currentTiddler>> sort="""$sort$""" itemClassFilter="""$itemClassFilter$"""/>
|
||||
</$reveal>
|
||||
</li>
|
||||
</$set>
|
||||
</$set>
|
||||
\end
|
||||
|
||||
\define toc-selective-expandable(tag,sort:"")
|
||||
\define toc-selective-expandable(tag,sort:"",itemClassFilter)
|
||||
<ol class="tc-toc toc-selective-expandable">
|
||||
<$list filter="[tag[$tag$]!has[draft.of]$sort$]">
|
||||
<$list filter="[is[current]toc-link[no]]" variable="ignore" emptyMessage="<<toc-linked-selective-expandable-body tag:'$tag$' sort:'$sort$'>>">
|
||||
<<toc-unlinked-selective-expandable-body tag:"$tag$" sort:"$sort$">>
|
||||
<$list filter="[is[current]toc-link[no]]" variable="ignore" emptyMessage="<<toc-linked-selective-expandable-body tag:'$tag$' sort:'$sort$' itemClassFilter:'$itemClassFilter$'>>">
|
||||
<<toc-unlinked-selective-expandable-body tag:"""$tag$""" sort:"""$sort$""" itemClassFilter:"""$itemClassFilter$""">>
|
||||
</$list>
|
||||
</$list>
|
||||
</ol>
|
||||
\end
|
||||
|
||||
\define toc-tabbed-selected-item-filter(selectedTiddler)
|
||||
[all[current]field:title{$selectedTiddler$}]
|
||||
\end
|
||||
|
||||
\define toc-tabbed(tag,sort:"",selectedTiddler:"$:/temp/toc/selectedTiddler",unselectedText)
|
||||
<$linkcatcher to="$selectedTiddler$">
|
||||
<$tiddler tiddler={{$selectedTiddler$}}>
|
||||
<div class="tc-tabbed-table-of-contents">
|
||||
<div class="tc-table-of-contents">
|
||||
<$macrocall $name="toc-selective-expandable" tag="""$tag$""" sort="""$sort$""" itemClassFilter=<<toc-tabbed-selected-item-filter selectedTiddler:"""$selectedTiddler$""">>/>
|
||||
</div>
|
||||
<div class="tc-tabbed-table-of-contents-content">
|
||||
<h1><$view field="caption"><$view field="title"/></$view></h1>
|
||||
<$transclude mode="block">$unselectedText$</$transclude>
|
||||
</div>
|
||||
</div>
|
||||
</$tiddler>
|
||||
</$linkcatcher>
|
||||
\end
|
||||
|
||||
@ -0,0 +1,9 @@
|
||||
title: TableOfContentsMacro Tabbed Example
|
||||
caption: Tabbed
|
||||
tags: table-of-contents-example
|
||||
|
||||
!! Tabbed Table of Contents
|
||||
|
||||
<$macrocall $name='wikitext-example-without-html'
|
||||
src='<<toc-tabbed tag:"TableOfContents" sort:"" selectedTiddler:"$:/temp/toc/selectedTiddler" unselectedText:"Select a topic in the table of contents. Click the arrow to expand a topic.">>
|
||||
'/>
|
||||
@ -1463,6 +1463,65 @@ a.tc-tiddlylink.tc-plugin-info:hover {
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.tc-tabbed-table-of-contents {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.tc-tabbed-table-of-contents .tc-table-of-contents {
|
||||
z-index: 100;
|
||||
display: inline-block;
|
||||
padding-left: 1em;
|
||||
max-width: 50%;
|
||||
-webkit-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
background: <<colour tab-background>>;
|
||||
border-left: 1px solid <<colour tab-border>>;
|
||||
border-top: 1px solid <<colour tab-border>>;
|
||||
border-bottom: 1px solid <<colour tab-border>>;
|
||||
}
|
||||
|
||||
.tc-tabbed-table-of-contents .tc-table-of-contents .toc-item > a,
|
||||
.tc-tabbed-table-of-contents .tc-table-of-contents .toc-item-selected > a {
|
||||
display: block;
|
||||
padding: 0.12em 1em 0.12em 0.25em;
|
||||
}
|
||||
|
||||
.tc-tabbed-table-of-contents .tc-table-of-contents .toc-item > a {
|
||||
border-top: 1px solid <<colour tab-background>>;
|
||||
border-left: 1px solid <<colour tab-background>>;
|
||||
border-bottom: 1px solid <<colour tab-background>>;
|
||||
}
|
||||
|
||||
.tc-tabbed-table-of-contents .tc-table-of-contents .toc-item > a:hover {
|
||||
text-decoration: none;
|
||||
border-top: 1px solid <<colour tab-border>>;
|
||||
border-left: 1px solid <<colour tab-border>>;
|
||||
border-bottom: 1px solid <<colour tab-border>>;
|
||||
background: <<colour tab-border>>;
|
||||
}
|
||||
|
||||
.tc-tabbed-table-of-contents .tc-table-of-contents .toc-item-selected > a {
|
||||
border-top: 1px solid <<colour tab-border>>;
|
||||
border-left: 1px solid <<colour tab-border>>;
|
||||
border-bottom: 1px solid <<colour tab-border>>;
|
||||
background: <<colour background>>;
|
||||
margin-right: -1px;
|
||||
}
|
||||
|
||||
.tc-tabbed-table-of-contents .tc-table-of-contents .toc-item-selected > a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.tc-tabbed-table-of-contents .tc-tabbed-table-of-contents-content {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
padding-left: 1.5em;
|
||||
border: 1px solid <<colour tab-border>>;
|
||||
-webkit-flex: 1 0 50%;
|
||||
flex: 1 0 50%;
|
||||
}
|
||||
|
||||
/*
|
||||
** Dirty indicator
|
||||
*/
|
||||
|
||||
Loading…
Reference in New Issue
Block a user