1
0
mirror of https://github.com/til-schneider/slim-wiki.git synced 2025-03-15 06:49:37 +01:00

Added config option to disable TOC and optimized responsive behaviour (TOC is now only hidden for small screens)

This commit is contained in:
til-schneider 2016-05-25 17:39:23 +02:00
parent cb13fb33a7
commit 0292f11d81
7 changed files with 38 additions and 12 deletions

View File

@ -21,6 +21,10 @@
}
function initToc() {
if (! slimwiki.settings.showToc) {
return; // Nothing to do
}
var headingSelector = 'h1, h2, h3',
nextId = 1,
headingsOffset = 80,

View File

@ -15,4 +15,7 @@ $config['lang'] = 'en'; // 'de' or 'en'
// Hide directories having no 'index.md' in breadcrumbs
//$config['showCompleteBreadcrumbs'] = false;
// Hide table of contents
//$config['showToc'] = false;
//$config['footerHtml'] = '© Copyright 2000-'.date('Y').' My name';

View File

@ -45,7 +45,8 @@ include($themeDir . '/init-theme.php');
supportedBrowser: !! document.addEventListener,
settings: <?php
$settings = array(
"mode" => $mode
'mode' => $mode,
'showToc' => $data['showToc']
);
if ($mode == 'edit' || $mode == 'createArticle') {
$settings['demoMode'] = $data['demoMode'];
@ -59,7 +60,7 @@ include($themeDir . '/init-theme.php');
</script>
</head>
<body class="mode-<?php echo $mode; ?>">
<body class="mode-<?php echo $mode; ?> is-toc-<?php echo $data['showToc'] ? 'enabled' : 'disabled'; ?>">
<?php

View File

@ -32,7 +32,8 @@ class Context {
'theme' => 'slim',
'demoMode' => false,
'openExternalLinksInNewTab' => true,
'showCompleteBreadcrumbs' => true
'showCompleteBreadcrumbs' => true,
'showToc' => true
);
if (file_exists(__DIR__ . '/../../config.php')) {

View File

@ -119,7 +119,7 @@ class Main {
$data['mode'] = $mode;
$data['fatalErrorMessage'] = $fatalErrorMessage;
foreach (array('wikiName', 'theme', 'demoMode', 'footerHtml') as $key) {
foreach (array('wikiName', 'theme', 'demoMode', 'showToc', 'footerHtml') as $key) {
if (isset($config[$key])) {
$data[$key] = $config[$key];
}

View File

@ -6,13 +6,15 @@
// Screen sizes:
// - small: Content takes full width, TOC is hidden
// - medium: Content is left, TOC is right or hidden (if width < @screen-size-toc-hidden-max)
// - medium: If TOC is enabled: Content is left, TOC is right
// If TOC is disabled: Same as large
// - large: Content is centered, TOC is right
//
// NOTE: We need a variable using brackets here, otherwise less won't calculate the width
// See: https://github.com/less/less.js/issues/1903
@screen-size-small-max: (@contentMaxWidth + 2 * @contentMinMarginX);
@screen-size-toc-hidden-max: (@screen-size-small-max + @tocMinWidth);
@screen-size-medium-content-shrinks-max: (@screen-size-small-max + @tocMinWidth); // content is dynamic, TOC has fixed width
@screen-size-medium-content-full-min: (@screen-size-medium-content-shrinks-max + 1px); // content has fixed width, TOC is dynamic
@screen-size-medium-min: (@screen-size-small-max + 1px);
@screen-size-medium-max: (@contentMaxWidth + 2 * @tocMinWidth);
@ -25,9 +27,16 @@
margin: 0 @contentMinMarginX;
}
@media (min-width: @screen-size-medium-min) and (max-width: @screen-size-medium-max) {
width: @contentMaxWidth;
margin: 0 @contentMinMarginX;
.is-toc-enabled & {
@media (min-width: @screen-size-medium-min) and (max-width: @screen-size-medium-content-shrinks-max) {
width: auto;
margin-left: @contentMinMarginX;
margin-right: @contentMinMarginX + @tocMinWidth;
}
@media (min-width: @screen-size-medium-content-full-min) and (max-width: @screen-size-medium-max) {
width: @contentMaxWidth;
margin: 0 @contentMinMarginX;
}
}
@media (max-width: @screen-size-small-max) {
width: auto;
@ -57,11 +66,15 @@
display: none;
}
@media (min-width: @screen-size-medium-min) and (max-width: @screen-size-medium-max) {
@media (min-width: @screen-size-medium-min) and (max-width: @screen-size-medium-content-shrinks-max) {
width: @tocMinWidth;
left: auto;
}
@media (min-width: @screen-size-medium-content-full-min) and (max-width: @screen-size-medium-max) {
left: @contentMinMarginX + @contentMaxWidth + @tocMarginLeft;
margin-left: 0;
}
@media (max-width: @screen-size-toc-hidden-max) {
@media (max-width: @screen-size-small-max) {
display: none;
}
}

View File

@ -19,4 +19,8 @@ foreach ($data['breadcrumbs'] as $item) {
$isFirst = false;
}
?></div></nav>
<nav class="toc-wrapper"></nav>
<?php
if ($data['showToc']) {
?><nav class="toc-wrapper"></nav><?php
}
?>