Skip to content

Commit

Permalink
rewrote and improved HTML for TOC
Browse files Browse the repository at this point in the history 
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
  • Loading branch information
@selfthinker
selfthinker committed Apr 9, 2012
1 parent 49e5a70 commit d5acc30
Show file tree
Hide file tree
Showing 8 changed files with 69 additions and 69 deletions.
11 changes: 5 additions & 6 deletions inc/html.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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>';
}

/**
Expand Down
16 changes: 8 additions & 8 deletions lib/scripts/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>&minus;</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;
Expand Down
33 changes: 16 additions & 17 deletions lib/tpl/default/design.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -547,78 +547,77 @@ 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;
font-size: 80%;
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;
padding-left: 1em;
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__;
}

Expand Down
2 changes: 1 addition & 1 deletion lib/tpl/default/print.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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; }

18 changes: 12 additions & 6 deletions lib/tpl/default/rtl.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
30 changes: 14 additions & 16 deletions lib/tpl/dokuwiki/css/_toc.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
}


Expand Down
26 changes: 12 additions & 14 deletions lib/tpl/dokuwiki/css/design.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
2 changes: 1 addition & 1 deletion lib/tpl/dokuwiki/css/print.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ div.error,
#dokuwiki__header .tools,
#dokuwiki__aside,
.dokuwiki .breadcrumbs,
.dokuwiki .toc,
#dw__toc,
.dokuwiki .secedit,
#dokuwiki__pagetools,
#dokuwiki__footer {
Expand Down

0 comments on commit d5acc30

Please sign in to comment.