From d5acc30de20298eb6ed7545e70484599c4d95867 Mon Sep 17 00:00:00 2001
From: Anika Henke <anika@selfthinker.org>
Date: Mon, 9 Apr 2012 17:36:33 +0100
Subject: [PATCH] rewrote and improved HTML for TOC
Attention: Template authors need to adjust their CSS!
Original structure:
div.toc >
div#toc__header.tocheader.toctoggle > span#toc__toggle.toc_close|toc_open > span
div#toc__inside > ul.toc > li.level1 > div.li > span.li > a.toc
New structure:
div#dw__toc.open|close >
h3 > strong > span
ul.toc > li.toc > div.li > a
---
inc/html.php | 11 +++++------
lib/scripts/page.js | 16 ++++++++--------
lib/tpl/default/design.css | 33 ++++++++++++++++-----------------
lib/tpl/default/print.css | 2 +-
lib/tpl/default/rtl.css | 18 ++++++++++++------
lib/tpl/dokuwiki/css/_toc.css | 30 ++++++++++++++----------------
lib/tpl/dokuwiki/css/design.css | 26 ++++++++++++--------------
lib/tpl/dokuwiki/css/print.css | 2 +-
8 files changed, 69 insertions(+), 69 deletions(-)
diff --git a/inc/html.php b/inc/html.php
index f3f042ea1..787f96caa 100644
--- a/inc/html.php
+++ b/inc/html.php
@@ -1712,11 +1712,11 @@ function html_TOC($toc){
if(!count($toc)) return '';
global $lang;
$out = '<!-- TOC START -->'.DOKU_LF;
- $out .= '<div class="toc">'.DOKU_LF;
- $out .= '<div class="tocheader toctoggle" id="toc__header">';
+ $out .= '<div id="dw__toc">'.DOKU_LF;
+ $out .= '<h3>';
$out .= $lang['toc'];
- $out .= '</div>'.DOKU_LF;
- $out .= '<div id="toc__inside">'.DOKU_LF;
+ $out .= '</h3>'.DOKU_LF;
+ $out .= '<div>'.DOKU_LF;
$out .= html_buildlist($toc,'toc','html_list_toc','html_li_default',true);
$out .= '</div>'.DOKU_LF.'</div>'.DOKU_LF;
$out .= '<!-- TOC END -->'.DOKU_LF;
@@ -1733,8 +1733,7 @@ function html_list_toc($item){
$link = $item['link'];
}
- return '<span class="li"><a href="'.$link.'" class="toc">'.
- hsc($item['title']).'</a></span>';
+ return '<a href="'.$link.'">'.hsc($item['title']).'</a>';
}
/**
diff --git a/lib/scripts/page.js b/lib/scripts/page.js
index 5da4a9cc0..6e7d7faf7 100644
--- a/lib/scripts/page.js
+++ b/lib/scripts/page.js
@@ -96,26 +96,26 @@ dw_page = {
* Adds the toggle switch to the TOC
*/
initTocToggle: function() {
- var $header, $clicky, $toc, $tocul, setClicky;
- $header = jQuery('#toc__header');
+ var $wrapper, $header, $clicky, $toc, $tocul, setClicky;
+ $wrapper = jQuery('#dw__toc');
+ $header = jQuery('h3', $wrapper);
if(!$header.length) {
return;
}
- $toc = jQuery('#toc__inside');
- $tocul = $toc.children('ul.toc');
+ $toc = jQuery('div', $wrapper).first();
+ $tocul = jQuery('ul', $toc);
setClicky = function(hiding){
if(hiding){
$clicky.html('<span>+</span>');
- $clicky[0].className = 'toc_open';
+ $wrapper.addClass('close').removeClass('open');
}else{
$clicky.html('<span>−</span>');
- $clicky[0].className = 'toc_close';
+ $wrapper.addClass('open').removeClass('close');
}
};
- $clicky = jQuery(document.createElement('span'))
- .attr('id','toc__toggle');
+ $clicky = jQuery(document.createElement('strong'));
$header.css('cursor','pointer')
.click(function () {
var hidden;
diff --git a/lib/tpl/default/design.css b/lib/tpl/default/design.css
index 9d2cc1844..48438527e 100644
--- a/lib/tpl/default/design.css
+++ b/lib/tpl/default/design.css
@@ -547,7 +547,7 @@ div.dokuwiki table.inline td {
/* ---------- table of contents ------------------- */
-div.dokuwiki div.toc {
+div.dokuwiki #dw__toc {
margin: 1.2em 0 0 2em;
float: right;
width: 200px;
@@ -555,46 +555,45 @@ div.dokuwiki div.toc {
clear: both;
}
-div.dokuwiki div.tocheader {
+div.dokuwiki #dw__toc h3 {
border: 1px solid __border__;
background-color: __background_alt__;
text-align: left;
font-weight: bold;
padding: 3px;
- margin-bottom: 2px;
+ margin: 0 0 2px 0;
+ font-size: 1em;
}
-div.dokuwiki span.toc_open,
-div.dokuwiki span.toc_close {
+div.dokuwiki #dw__toc h3 strong {
border: 0.4em solid __background_alt__;
float: right;
display: block;
margin: 0.4em 3px 0 0;
}
-div.dokuwiki span.toc_open span,
-div.dokuwiki span.toc_close span {
+div.dokuwiki #dw__toc h3 strong span {
display: none;
}
-div.dokuwiki span.toc_open {
+div.dokuwiki #dw__toc.close h3 strong {
margin-top: 0.4em;
border-top: 0.4em solid __text__;
}
-div.dokuwiki span.toc_close {
+div.dokuwiki #dw__toc.open h3 strong {
margin-top: 0;
border-bottom: 0.4em solid __text__;
}
-div.dokuwiki #toc__inside {
+div.dokuwiki #dw__toc > div {
border: 1px solid __border__;
background-color: __background__;
text-align: left;
padding: 0.5em 0 0.7em 0;
}
-div.dokuwiki ul.toc {
+div.dokuwiki #dw__toc ul {
list-style-type: none;
list-style-image: none;
line-height: 1.2em;
@@ -602,23 +601,23 @@ div.dokuwiki ul.toc {
margin: 0;
}
-div.dokuwiki ul.toc li {
+div.dokuwiki #dw__toc ul li {
background: transparent url(images/tocdot2.gif) 0 0.6em no-repeat;
padding-left: 0.4em;
}
-div.dokuwiki ul.toc li.clear {
+div.dokuwiki #dw__toc ul li.clear {
background-image: none;
padding-left: 0.4em;
}
-div.dokuwiki a.toc:link,
-div.dokuwiki a.toc:visited {
+div.dokuwiki #dw__toc a:link,
+div.dokuwiki #dw__toc a:visited {
color: __extern__;
}
-div.dokuwiki a.toc:hover,
-div.dokuwiki a.toc:active {
+div.dokuwiki #dw__toc a:hover,
+div.dokuwiki #dw__toc a:active {
color: __text__;
}
diff --git a/lib/tpl/default/print.css b/lib/tpl/default/print.css
index 4387dc4bf..f83e8c97c 100644
--- a/lib/tpl/default/print.css
+++ b/lib/tpl/default/print.css
@@ -224,5 +224,5 @@ table.inline td {
border: 1px solid #000000;
}
-.toc, .footerinc, .header, .bar, .user { display: none; }
+#dw__toc, .footerinc, .header, .bar, .user { display: none; }
diff --git a/lib/tpl/default/rtl.css b/lib/tpl/default/rtl.css
index 82c85839b..32a8ddb6d 100644
--- a/lib/tpl/default/rtl.css
+++ b/lib/tpl/default/rtl.css
@@ -89,30 +89,36 @@ div.dokuwiki div.level4 { margin-left: 0px; margin-right: 63px; }
div.dokuwiki div.level5 { margin-left: 0px; margin-right: 83px; }
/* TOC control */
-div.dokuwiki div.toc {
+div.dokuwiki #dw__toc {
float: left;
+ margin: 1.2em 2em 0 0;
}
-div.dokuwiki div.tocheader {
+div.dokuwiki #dw__toc h3 {
text-align: right;
}
-div.dokuwiki #toc__inside {
+div.dokuwiki #dw__toc h3 strong {
+ float: left;
+ margin: 0.4em 0 0 3px;
+}
+
+div.dokuwiki #dw__toc > div {
text-align: right;
}
-div.dokuwiki ul.toc {
+div.dokuwiki #dw__toc ul {
padding: 0;
padding-right: 1em;
}
-div.dokuwiki ul.toc li {
+div.dokuwiki #dw__toc ul li {
background-position: right 0.6em;
padding-right: 0.4em;
direction: rtl;
}
-div.dokuwiki ul.toc li.clear {
+div.dokuwiki #dw__toc ul li.clear {
padding-right: 0.4em;
}
diff --git a/lib/tpl/dokuwiki/css/_toc.css b/lib/tpl/dokuwiki/css/_toc.css
index f89bce6c1..e62bb0a7a 100644
--- a/lib/tpl/dokuwiki/css/_toc.css
+++ b/lib/tpl/dokuwiki/css/_toc.css
@@ -7,68 +7,66 @@
********************************************************************/
/* toc container */
-.dokuwiki div.toc {
+#dw__toc {
float: right;
margin: 0 0 1.4em 1.4em;
width: 12em;
background-color: __background_alt__;
color: inherit;
}
-[dir=rtl] .dokuwiki div.toc {
+[dir=rtl] #dw__toc {
float: left;
margin: 0 1.4em 1.4em 0;
}
/*____________ toc header ____________*/
-.dokuwiki div.tocheader {
+#dw__toc h3 {
padding: .2em .5em;
font-weight: bold;
}
-.dokuwiki .toc span.toc_open,
-.dokuwiki .toc span.toc_close {
+#dw__toc h3 strong {
float: right;
margin: 0 .2em;
}
-[dir=rtl] .dokuwiki .toc span.toc_open,
-[dir=rtl] .dokuwiki .toc span.toc_close {
+[dir=rtl] #dw__toc h3 strong {
float: left;
}
/*____________ toc list ____________*/
-.dokuwiki #toc__inside {
+#dw__toc > div {
padding: .2em .5em;
}
-.dokuwiki #toc__inside ul {
+#dw__toc ul {
padding: 0;
margin: 0;
}
-.dokuwiki #toc__inside ul li {
+#dw__toc ul li {
list-style: none;
padding: 0;
margin: 0;
line-height: 1.1;
}
-.dokuwiki #toc__inside ul li div.li {
+#dw__toc ul li div.li {
padding: .15em 0;
}
-.dokuwiki #toc__inside ul ul {
+#dw__toc ul ul {
padding-left: 1em;
}
-[dir=rtl] .dokuwiki #toc__inside ul ul {
+[dir=rtl] #dw__toc ul ul {
padding-left: 0;
padding-right: 1em;
}
-.dokuwiki #toc__inside ul ul li {
+#dw__toc ul ul li {
}
-.dokuwiki #toc__inside ul li a {
+#dw__toc ul li a {
}
/* in case of toc list jumping one level
(e.g. if heading level 3 follows directly after heading level 1) */
-.dokuwiki #toc__inside ul li.clear {
+#dw__toc ul li.clear {
}
diff --git a/lib/tpl/dokuwiki/css/design.css b/lib/tpl/dokuwiki/css/design.css
index f73985ed7..8ebeca6da 100644
--- a/lib/tpl/dokuwiki/css/design.css
+++ b/lib/tpl/dokuwiki/css/design.css
@@ -392,60 +392,58 @@
/*____________ changes to _toc ____________*/
-.dokuwiki div.toc {
+#dw__toc {
margin: -2em -2em .5em 1.4em;
width: __sidebar_width__;
border-left: 1px solid __border__;
background: __background__;
color: inherit;
}
-[dir=rtl] .dokuwiki div.toc {
+[dir=rtl] #dw__toc {
margin: -2em 1.4em .5em -2em;
border-left-width: 0;
border-right: 1px solid __border__;
}
-.dokuwiki div.tocheader {
+#dw__toc h3 {
padding: .5em 1em;
margin-bottom: 0;
font-size: .875em;
letter-spacing: .1em;
}
-.dokuwiki .toc span.toc_open,
-.dokuwiki .toc span.toc_close {
+#dw__toc h3 strong {
background: transparent url(images/toc-arrows.png) 0 0;
width: 8px;
height: 5px;
margin: .4em 0 0;
}
-.dokuwiki .toc span.toc_open {
+#dw__toc.close strong {
background-position: 0 -5px;
}
-.dokuwiki .toc span.toc_open span,
-.dokuwiki .toc span.toc_close span {
+#dw__toc strong span {
display: none;
}
-.dokuwiki #toc__inside {
+#dw__toc > div {
font-size: 0.875em;
padding: .5em 1em 1em;
}
-.dokuwiki #toc__inside ul {
+#dw__toc ul {
padding: 0 0 0 1.2em;
}
-[dir=rtl] .dokuwiki #toc__inside ul {
+[dir=rtl] #dw__toc ul {
padding: 0 1.5em 0 0;
}
-.dokuwiki #toc__inside ul li {
+#dw__toc ul li {
list-style-image: url(images/toc-bullet.png);
}
-.dokuwiki #toc__inside ul li.clear {
+#dw__toc ul li.clear {
list-style: none;
}
-.dokuwiki #toc__inside ul li div.li {
+#dw__toc ul li div.li {
padding: .2em 0;
}
diff --git a/lib/tpl/dokuwiki/css/print.css b/lib/tpl/dokuwiki/css/print.css
index f4f81d741..f6bf64dd9 100644
--- a/lib/tpl/dokuwiki/css/print.css
+++ b/lib/tpl/dokuwiki/css/print.css
@@ -21,7 +21,7 @@ div.error,
#dokuwiki__header .tools,
#dokuwiki__aside,
.dokuwiki .breadcrumbs,
-.dokuwiki .toc,
+#dw__toc,
.dokuwiki .secedit,
#dokuwiki__pagetools,
#dokuwiki__footer {
--
GitLab