TOC styling

Create default TOC style with options to use the theme css

config/config.ini.example

@@ -141,6 +141,9 @@ toc.label = "Table of Contents"
 ; TOC inital state
 toc.state = "close"
 
+; TOC style
+toc.style = "default"
+
 ; Set the theme here
 views.root = "themes/twentysixteen"
 

content/data/configList.json

@@ -1 +1 @@
-["site.url","timezone","date.format","language","blog.title","blog.tagline","blog.description","blog.copyright","permalink.type","static.frontpage","blog.enable","social.twitter","social.facebook","breadcrumb.home","comment.system","fb.appid","fb.num","fb.color","disqus.shortname","google.wmt.id","google.analytics.id","google.gtag.id","google.reCaptcha","google.reCaptcha.public","google.reCaptcha.private","posts.perpage","category.perpage","tag.perpage","archive.perpage","search.perpage","profile.perpage","type.perpage","json.count","category.info","related.count","recent.count","popular.count","tagcloud.count","teaser.type","read.more","teaser.char","description.char","rss.count","rss.char","views.counter","sitemap.priority.base","sitemap.priority.post","sitemap.priority.static","sitemap.priority.category","sitemap.priority.tag","sitemap.priority.archiveDay","sitemap.priority.archiveMonth","sitemap.priority.archiveYear","sitemap.priority.author","sitemap.priority.type","prerelease","cache.expiration","cache.off","generation.time","cache.timestamp","multi.site","toc.label","toc.state","views.root","views.layout"]
+["site.url","timezone","date.format","language","blog.title","blog.tagline","blog.description","blog.copyright","permalink.type","static.frontpage","blog.enable","social.twitter","social.facebook","breadcrumb.home","comment.system","fb.appid","fb.num","fb.color","disqus.shortname","google.wmt.id","google.analytics.id","google.gtag.id","google.reCaptcha","google.reCaptcha.public","google.reCaptcha.private","posts.perpage","category.perpage","tag.perpage","archive.perpage","search.perpage","profile.perpage","type.perpage","json.count","category.info","related.count","recent.count","popular.count","tagcloud.count","teaser.type","read.more","teaser.char","description.char","rss.count","rss.char","views.counter","sitemap.priority.base","sitemap.priority.post","sitemap.priority.static","sitemap.priority.category","sitemap.priority.tag","sitemap.priority.archiveDay","sitemap.priority.archiveMonth","sitemap.priority.archiveYear","sitemap.priority.author","sitemap.priority.type","prerelease","cache.expiration","cache.off","generation.time","cache.timestamp","multi.site","toc.label","toc.state","toc.style","views.root","views.layout"]

system/admin/views/config-widget.html.php

@@ -85,6 +85,25 @@
       </div>
     </div>
   </div>
+  <div class="form-group row">
+    <label class="col-sm-2 col-form-label">TOC styling</label>
+    <div class="col-sm-10">
+      <div class="col-sm-10">
+        <div class="form-check">
+          <input class="form-check-input" type="radio" name="-config-toc.style" id="toc.style1" value="default" <?php if (config('toc.style') === 'default'):?>checked<?php endif;?>>
+          <label class="form-check-label" for="toc.style1">
+            Default
+          </label>
+        </div>
+        <div class="form-check">
+          <input class="form-check-input" type="radio" name="-config-toc.style" id="toc.style2" value="theme" <?php if (config('toc.style') === 'theme'):?>checked<?php endif;?>>
+          <label class="form-check-label" for="toc.style2">
+            Theme
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
   <br>
   <h4><?php echo i18n('Comments');?></h4>
   <hr>

system/includes/functions.php

@@ -528,6 +528,12 @@ function get_posts($posts, $page = 1, $perpage = 0)
             if (empty($label)) {
                 $label = 'Table of Contents';
             }
+            $style = config('toc.style');
+            if ($style == 'default' || empty($style)) {
+                $style = '<link rel="stylesheet" id="default-toc-style" href="'. site_url() .'system/resources/css/toc.css" type="text/css" media="all">';
+            } else {
+                $style = '';
+            }
             $load = <<<EOF
             <script>
             document.addEventListener("DOMContentLoaded", function() {
@@ -541,7 +547,7 @@ function get_posts($posts, $page = 1, $perpage = 0)
             });
             </script>
             EOF;
-            $post->body = $toc['0'] . '<div class="toc-wrapper" id="toc-wrapper.post-'.$post->date.'" style="display:none;" >'. $load .'<details '. $state .'><summary title="'. $label .'"><span class="details">'. $label .'</span></summary><div class="inner"><div class="toc" id="toc.post-'.$post->date.'"></div></div></details><script src="'. site_url().'system/resources/js/toc.generator.js"></script></div>' . $toc['1'];
+            $post->body = $toc['0'] . '<div class="toc-wrapper" id="toc-wrapper.post-'.$post->date.'" style="display:none;" >'. $load . $style .'<details '. $state .'><summary title="'. $label .'"><span class="details">'. $label .'</span></summary><div class="inner"><div class="toc" id="toc.post-'.$post->date.'"></div></div></details><script src="'. site_url().'system/resources/js/toc.generator.js"></script></div>' . $toc['1'];
         }
 
         // Convert image tags to figures
@@ -618,6 +624,12 @@ function get_pages($pages, $page = 1, $perpage = 0)
             if (empty($label)) {
                 $label = 'Table of Contents';
             }
+            $style = config('toc.style');
+            if ($style == 'default' || empty($style)) {
+                $style = '<link rel="stylesheet" id="default-toc-style" href="'. site_url() .'system/resources/css/toc.css" type="text/css" media="all">';
+            } else {
+                $style = '';
+            }
             $load = <<<EOF
             <script>
             document.addEventListener("DOMContentLoaded", function() {
@@ -631,7 +643,7 @@ function get_pages($pages, $page = 1, $perpage = 0)
             });
             </script>
             EOF;
-            $post->body = $toc['0'] . '<div class="toc-wrapper" id="toc-wrapper.page-'.$post->slug.'" style="display:none;" >'. $load .'<details '. $state .'><summary title="'. $label .'"><span class="details">'. $label .'</span></summary><div class="inner"><div class="toc" id="toc.page-'.$post->slug.'"></div></div></details><script src="'. site_url().'system/resources/js/toc.generator.js"></script></div>' . $toc['1'];
+            $post->body = $toc['0'] . '<div class="toc-wrapper" id="toc-wrapper.page-'.$post->slug.'" style="display:none;" >'. $load . $style .'<details '. $state .'><summary title="'. $label .'"><span class="details">'. $label .'</span></summary><div class="inner"><div class="toc" id="toc.page-'.$post->slug.'"></div></div></details><script src="'. site_url().'system/resources/js/toc.generator.js"></script></div>' . $toc['1'];
         }
 
         if (config('views.counter') == 'true') {
@@ -714,6 +726,12 @@ function get_subpages($sub_pages, $page = 1, $perpage = 0)
             if (empty($label)) {
                 $label = 'Table of Contents';
             }
+            $style = config('toc.style');
+            if ($style == 'default' || empty($style)) {
+                $style = '<link rel="stylesheet" id="default-toc-style" href="'. site_url() .'system/resources/css/toc.css" type="text/css" media="all">';
+            } else {
+                $style = '';
+            }
             $load = <<<EOF
             <script>
             document.addEventListener("DOMContentLoaded", function() {
@@ -727,7 +745,7 @@ function get_subpages($sub_pages, $page = 1, $perpage = 0)
             });
             </script>
             EOF;
-            $post->body = $toc['0'] . '<div class="toc-wrapper" id="toc-wrapper.subpage-'.$post->slug.'" style="display:none;" >'. $load .'<details '. $state .'><summary title="'. $label .'"><span class="details">'. $label .'</span></summary><div class="inner"><div class="toc" id="toc.subpage-'.$post->slug.'"></div></div></details><script src="'. site_url().'system/resources/js/toc.generator.js"></script></div>' . $toc['1'];
+            $post->body = $toc['0'] . '<div class="toc-wrapper" id="toc-wrapper.subpage-'.$post->slug.'" style="display:none;" >'. $load . $style .'<details '. $state .'><summary title="'. $label .'"><span class="details">'. $label .'</span></summary><div class="inner"><div class="toc" id="toc.subpage-'.$post->slug.'"></div></div></details><script src="'. site_url().'system/resources/js/toc.generator.js"></script></div>' . $toc['1'];
         }
         
         if (config('views.counter') == 'true') {
@@ -1017,6 +1035,12 @@ function read_category_info($category)
                     if (empty($label)) {
                         $label = 'Table of Contents';
                     }
+                    $style = config('toc.style');
+                    if ($style == 'default' || empty($style)) {
+                        $style = '<link rel="stylesheet" id="default-toc-style" href="'. site_url() .'system/resources/css/toc.css" type="text/css" media="all">';
+                    } else {
+                        $style = '';
+                    }
                     $load = <<<EOF
                     <script>
                     document.addEventListener("DOMContentLoaded", function() {
@@ -1030,7 +1054,7 @@ function read_category_info($category)
                     });
                     </script>
                     EOF;
-                    $desc->body = $toc['0'] . '<div class="toc-wrapper" id="toc-wrapper.taxonomy-'.$desc->slug.'" style="display:none;" >'. $load .'<details '. $state .'><summary title="'. $label .'"><span class="details">'. $label .'</span></summary><div class="inner"><div class="toc" id="toc.taxonomy-'.$desc->slug.'"></div></div></details><script src="'. site_url().'system/resources/js/toc.generator.js"></script></div>' . $toc['1'];
+                    $desc->body = $toc['0'] . '<div class="toc-wrapper" id="toc-wrapper.taxonomy-'.$desc->slug.'" style="display:none;" >'. $load . $style .'<details '. $state .'><summary title="'. $label .'"><span class="details">'. $label .'</span></summary><div class="inner"><div class="toc" id="toc.taxonomy-'.$desc->slug.'"></div></div></details><script src="'. site_url().'system/resources/js/toc.generator.js"></script></div>' . $toc['1'];
                 }
 
                 $desc->description = get_content_tag("d", $content, get_description($desc->body));
@@ -1270,6 +1294,12 @@ function get_author($name)
                     if (empty($label)) {
                         $label = 'Table of Contents';
                     }
+                    $style = config('toc.style');
+                    if ($style == 'default' || empty($style)) {
+                        $style = '<link rel="stylesheet" id="default-toc-style" href="'. site_url() .'system/resources/css/toc.css" type="text/css" media="all">';
+                    } else {
+                        $style = '';
+                    }
                     $load = <<<EOF
                     <script>
                     document.addEventListener("DOMContentLoaded", function() {
@@ -1283,7 +1313,7 @@ function get_author($name)
                     });
                     </script>
                     EOF;
-                    $author->about = $toc['0'] . '<div class="toc-wrapper" id="toc-wrapper.profile-'.$author->slug.'" style="display:none;" >'. $load .'<details '. $state .'><summary title="'. $label .'"><span class="details">'. $label .'</span></summary><div class="inner"><div class="toc" id="toc.profile-'.$author->slug.'"></div></div></details><script src="'. site_url().'system/resources/js/toc.generator.js"></script></div>' . $toc['1'];
+                    $author->about = $toc['0'] . '<div class="toc-wrapper" id="toc-wrapper.profile-'.$author->slug.'" style="display:none;" >'. $load . $style .'<details '. $state .'><summary title="'. $label .'"><span class="details">'. $label .'</span></summary><div class="inner"><div class="toc" id="toc.profile-'.$author->slug.'"></div></div></details><script src="'. site_url().'system/resources/js/toc.generator.js"></script></div>' . $toc['1'];
                 }
                 
                 $author->body = $author->about;
@@ -1345,6 +1375,12 @@ function get_frontpage()
             if (empty($label)) {
                 $label = 'Table of Contents';
             }
+            $style = config('toc.style');
+            if ($style == 'default' || empty($style)) {
+                $style = '<link rel="stylesheet" id="default-toc-style" href="'. site_url() .'system/resources/css/toc.css" type="text/css" media="all">';
+            } else {
+                $style = '';
+            }
             $load = <<<EOF
             <script>
             document.addEventListener("DOMContentLoaded", function() {
@@ -1358,7 +1394,7 @@ function get_frontpage()
             });
             </script>
             EOF;
-            $front->body = $toc['0'] . '<div class="toc-wrapper" id="toc-wrapper.page-front" style="display:none;" >'. $load .'<details '. $state .'><summary title="'. $label .'"><span class="details">'. $label .'</span></summary><div class="inner"><div class="toc" id="toc.page-front"></div></div></details><script src="'. site_url().'system/resources/js/toc.generator.js"></script></div>' . $toc['1'];
+            $front->body = $toc['0'] . '<div class="toc-wrapper" id="toc-wrapper.page-front" style="display:none;" >'. $load . $style . '<details '. $state .'><summary title="'. $label .'"><span class="details">'. $label .'</span></summary><div class="inner"><div class="toc" id="toc.page-front"></div></div></details><script src="'. site_url().'system/resources/js/toc.generator.js"></script></div>' . $toc['1'];
         }
     } else {
         $front->title = 'Welcome';

system/resources/css/toc.css

@@ -0,0 +1,48 @@
+summary {
+	display: list-item;
+	cursor: pointer;
+}
+
+.toc-wrapper {
+	background: #f9f9f9;
+	border: 1px solid #aaa;
+	border-radius: 4px;
+	-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
+	box-shadow: 0 1px 1px rgba(0,0,0,.05);
+	margin-bottom: 1.5em;
+	padding: 10px;
+	position: relative;
+	width: auto;
+	font-size: 90%;
+}
+
+.toc-wrapper .inner {
+	margin-top:5px;
+}
+
+.toc-wrapper .inner a {
+	border: none;
+	box-shadow:none;
+}
+
+.toc .h3-toc {
+	margin-left: .20in;
+}
+
+.toc .h4-toc {
+	margin-left: .35in;
+}
+
+.toc .h5-toc {
+	margin-left: .50in;
+}
+
+.toc .h6-toc {
+	margin-left: .65in;
+}
+
+.toc-link a.anchor {
+	border:none;
+	margin-left: 5px;
+	box-shadow:none;
+}

themes/blog/css/styles.css

@@ -629,49 +629,3 @@ ul.month {
   margin:0 0 0 10px;
   float:right;	
 }
-
-summary {
-	display: list-item;
-	cursor: pointer;
-}
-
-.toc-wrapper {
-  background: #f9f9f9;
-  border: 1px solid #aaa;
-  border-radius: 4px;
-  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
-  box-shadow: 0 1px 1px rgba(0,0,0,.05);
-  margin-bottom: 1.5em;
-  padding: 10px;
-  position: relative;
-  width: auto;
-  font-size: 90%;
-}
-
-.toc-wrapper .inner {
-  margin-top:5px;
-}
-
-.toc-wrapper .inner a {
-  border: none;
-  box-shadow:none;
-}
-
-.toc .h3-toc {
-  margin-left: .20in;
-}
-.toc .h4-toc {
-  margin-left: .35in;
-}
-.toc .h5-toc {
-  margin-left: .50in;
-}
-.toc .h6-toc {
-  margin-left: .65in;
-}
-
-.toc-link a.anchor {
-  border:none;
-  margin-left: 5px;
-  box-shadow:none;
-}

themes/clean/css/style.css

@@ -950,49 +950,3 @@ ul.archivegroup {
     list-style: none;
     background:none;
 }   
-
-summary {
-	display: list-item;
-	cursor: pointer;
-}
-
-.toc-wrapper {
-  background: #f9f9f9;
-  border: 1px solid #aaa;
-  border-radius: 4px;
-  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
-  box-shadow: 0 1px 1px rgba(0,0,0,.05);
-  margin-bottom: 1.5em;
-  padding: 10px;
-  position: relative;
-  width: auto;
-  font-size: 90%;
-}
-
-.toc-wrapper .inner {
-  margin-top:5px;
-}
-
-.toc-wrapper .inner a {
-  border: none;
-  box-shadow:none;
-}
-
-.toc .h3-toc {
-  margin-left: .20in;
-}
-.toc .h4-toc {
-  margin-left: .35in;
-}
-.toc .h5-toc {
-  margin-left: .50in;
-}
-.toc .h6-toc {
-  margin-left: .65in;
-}
-
-.toc-link a.anchor {
-  border:none;
-  margin-left: 5px;
-  box-shadow:none;
-}

themes/doks/css/style.css

@@ -3533,49 +3533,3 @@ body.dark .docs-bar .menu-icon .navicon::before, body.dark .docs-bar .menu-icon
 .float-right {
   float:right;
 }
-
-summary {
-	display: list-item;
-	cursor: pointer;
-}
-
-.toc-wrapper {
-  background: #f9f9f9;
-  border: 1px solid #aaa;
-  border-radius: 4px;
-  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
-  box-shadow: 0 1px 1px rgba(0,0,0,.05);
-  margin-bottom: 1.5em;
-  padding: 10px;
-  position: relative;
-  width: auto;
-  font-size: 90%;
-}
-
-.toc-wrapper .inner {
-  margin-top:5px;
-}
-
-.toc-wrapper .inner a {
-  border: none;
-  box-shadow:none;
-}
-
-.toc .h3-toc {
-  margin-left: .20in;
-}
-.toc .h4-toc {
-  margin-left: .35in;
-}
-.toc .h5-toc {
-  margin-left: .50in;
-}
-.toc .h6-toc {
-  margin-left: .65in;
-}
-
-.toc-link a.anchor {
-  border:none;
-  margin-left: 5px;
-  box-shadow:none;
-}

themes/logs/css/style.css

@@ -980,49 +980,3 @@ ul.archivegroup {
 .archivegroup li.expanded, .archivegroup li.collapsed {
     list-style: none;
 }
-
-summary {
-	display: list-item;
-	cursor: pointer;
-}
-
-.toc-wrapper {
-  background: #f9f9f9;
-  border: 1px solid #aaa;
-  border-radius: 4px;
-  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
-  box-shadow: 0 1px 1px rgba(0,0,0,.05);
-  margin-bottom: 1.5em;
-  padding: 10px;
-  position: relative;
-  width: auto;
-  font-size: 90%;
-}
-
-.toc-wrapper .inner {
-  margin-top:5px;
-}
-
-.toc-wrapper .inner a {
-  border: none;
-  box-shadow:none;
-}
-
-.toc .h3-toc {
-  margin-left: .20in;
-}
-.toc .h4-toc {
-  margin-left: .35in;
-}
-.toc .h5-toc {
-  margin-left: .50in;
-}
-.toc .h6-toc {
-  margin-left: .65in;
-}
-
-.toc-link a.anchor {
-  border:none;
-  margin-left: 5px;
-  box-shadow:none;
-}

themes/readable/css/style.css

@@ -1031,49 +1031,3 @@ ul.archivegroup {
 .archivegroup li.expanded, .archivegroup li.collapsed {
     list-style: none;
 }
-
-summary {
-	display: list-item;
-	cursor: pointer;
-}
-
-.toc-wrapper {
-  background: #f9f9f9;
-  border: 1px solid #aaa;
-  border-radius: 4px;
-  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
-  box-shadow: 0 1px 1px rgba(0,0,0,.05);
-  margin-bottom: 1.5em;
-  padding: 10px;
-  position: relative;
-  width: auto;
-  font-size: 90%;
-}
-
-.toc-wrapper .inner {
-  margin-top:5px;
-}
-
-.toc-wrapper .inner a {
-  border: none;
-  box-shadow:none;
-}
-
-.toc .h3-toc {
-  margin-left: .20in;
-}
-.toc .h4-toc {
-  margin-left: .35in;
-}
-.toc .h5-toc {
-  margin-left: .50in;
-}
-.toc .h6-toc {
-  margin-left: .65in;
-}
-
-.toc-link a.anchor {
-  border:none;
-  margin-left: 5px;
-  box-shadow:none;
-}

themes/twentyfifteen/css/style.css

@@ -6140,49 +6140,3 @@ ul.month {
 .feed-link a {
 	height:100%;
 }
-
-summary {
-	display: list-item;
-	cursor: pointer;
-}
-
-.toc-wrapper {
-  background: #f9f9f9;
-  border: 1px solid #aaa;
-  border-radius: 4px;
-  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
-  box-shadow: 0 1px 1px rgba(0,0,0,.05);
-  margin-bottom: 1.5em;
-  padding: 10px;
-  position: relative;
-  width: auto;
-  font-size: 90%;
-}
-
-.toc-wrapper .inner {
-  margin-top:5px;
-}
-
-.toc-wrapper .inner a {
-  border: none;
-  box-shadow:none;
-}
-
-.toc .h3-toc {
-  margin-left: .20in;
-}
-.toc .h4-toc {
-  margin-left: .35in;
-}
-.toc .h5-toc {
-  margin-left: .50in;
-}
-.toc .h6-toc {
-  margin-left: .65in;
-}
-
-.toc-link a.anchor {
-  border:none;
-  margin-left: 5px;
-  box-shadow:none;
-}

themes/twentyfifteen/css/style_v2.css

@@ -6147,49 +6147,3 @@ ul.month {
 .feed-link a {
 	height:100%;
 }
-
-summary {
-	display: list-item;
-	cursor: pointer;
-}
-
-.toc-wrapper {
-  background: #f9f9f9;
-  border: 1px solid #aaa;
-  border-radius: 4px;
-  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
-  box-shadow: 0 1px 1px rgba(0,0,0,.05);
-  margin-bottom: 1.5em;
-  padding: 10px;
-  position: relative;
-  width: auto;
-  font-size: 90%;
-}
-
-.toc-wrapper .inner {
-  margin-top:5px;
-}
-
-.toc-wrapper .inner a {
-  border: none;
-  box-shadow:none;
-}
-
-.toc .h3-toc {
-  margin-left: .20in;
-}
-.toc .h4-toc {
-  margin-left: .35in;
-}
-.toc .h5-toc {
-  margin-left: .50in;
-}
-.toc .h6-toc {
-  margin-left: .65in;
-}
-
-.toc-link a.anchor {
-  border:none;
-  margin-left: 5px;
-  box-shadow:none;
-}

themes/twentysixteen/css/style.css

@@ -4066,49 +4066,3 @@ ul.month {
 	margin:0 0 0 10px;
 	float:right;	
 }
-
-summary {
-	display: list-item;
-	cursor: pointer;
-}
-
-.toc-wrapper {
-  background: #f9f9f9;
-  border: 1px solid #aaa;
-  border-radius: 4px;
-  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
-  box-shadow: 0 1px 1px rgba(0,0,0,.05);
-  margin-bottom: 1.5em;
-  padding: 10px;
-  position: relative;
-  width: auto;
-  font-size: 90%;
-}
-
-.toc-wrapper .inner {
-  margin-top:5px;
-}
-
-.toc-wrapper .inner a {
-  border: none;
-  box-shadow:none;
-}
-
-.toc .h3-toc {
-  margin-left: .20in;
-}
-.toc .h4-toc {
-  margin-left: .35in;
-}
-.toc .h5-toc {
-  margin-left: .50in;
-}
-.toc .h6-toc {
-  margin-left: .65in;
-}
-
-.toc-link a.anchor {
-  border:none;
-  margin-left: 5px;
-  box-shadow:none;
-}