Table of contents
No headers
/**
* Page Tabs Control
* @TODO guerrics: overflowing tabs
*
* @param array pages - array of pages (default: map.values(page.subpages))
* @param str tab - name of the selected tab (default: __request.args.tab)
*/
var pages = $pages ?? map.values(page.subpages);
let pages = [ (p is str) ? wiki.getpage(p) : p foreach var p in pages];
var selectedTab = $tab ?? __request.args.tab;
// find the active tab page
var activeTab = [ tabpage foreach var tabpage in pages where tabpage.name == selectedTab ][0];
// no selected tab found, use first tab
if (!activeTab) {
let activeTab = pages[0];
}
<html>
<head>
<style type="text/css">"
.mt-page-tabs ul.mt-tabs {
margin: 0;
padding: 0 0 0 10px;
border-bottom: 1px solid #777;
line-height: normal;
}
.mt-page-tabs li.mt-tab {
display: inline;
margin: 0 4px;
list-style: none;
}
.mt-page-tabs li.mt-tab a,
.mt-page-tabs li.mt-tab a:visited {
display: inline-block;
/* set tab dimensions */
padding: 4px 14px;
text-decoration: none;
color: #000;
border: solid 1px #777;
border-bottom: none;
background-color: #fff;
}
.mt-page-tabs li.mt-tab.ui-state-active a {
position: relative;
top: 1px;
background-color: #dfdfdf;
background: -moz-linear-gradient(center top , #ddd, #fff) repeat scroll 0 0 transparent;
background: -webkit-gradient(
linear, left top, left bottom, color-stop(0.00, #ddd), color-stop(1.00, #fff)
);
filter: progid:DXImageTransform.Microsoft.gradient(
enabled='true',startColorstr=#ffdddddd,endColorstr=#ffffffff
);
}
.mt-page-tabs .mt-page-tabs-content {
margin-top: 10px;
}
"</style>
</head>
<body>
<div class="mt-page-tabs">
<ul class="mt-tabs">
foreach(var tabpage in pages) {
<li class=("mt-tab" .. (tabpage.name == activeTab.name ? " ui-state-active" : ""))>
<a href=(page.uri & {tab: tabpage.name})>
tabpage.title ?? "#" .. (__count + 1)
</a>
</li>
}
</ul>
<div class=("mt-page-tabs-content" .. (#pages > 0 ? "" : " ui-state-empty"))>
if (activeTab) {
var contents = activeTab.contents;
if (contents) {
contents;
} else {
wiki.page(activeTab.path);
}
}
</div>
</div>
</body>
</html>
Comments