Documentation:
- modified javascript files to use mootools - fixed a layout bug in table of contents when javascript is disabled - added a smooth scrolling effect :)
This commit is contained in:
jepso
parent
fbf4462821
commit
b868b23d9e
3
manual/new/scripts/mootools.v1.11.js
Normal file
3
manual/new/scripts/mootools.v1.11.js
Normal file
File diff suppressed because one or more lines are too long
@ -1,95 +1,76 @@
|
|||||||
function toggleToc()
|
function initializeTocToggles()
|
||||||
{
|
{
|
||||||
var toc = document.getElementById('table-of-contents').getElementsByTagName('ul')[0];
|
var container = new Element('div', {
|
||||||
var toggleLink = document.getElementById('toc-collapse-toggle').getElementsByTagName('a')[0];
|
'id': 'toc-toggles'
|
||||||
var stickySpan = document.getElementById('toc-sticky-toggle');
|
});
|
||||||
|
|
||||||
if (toc && toggleLink && toc.style.display == 'none') {
|
container.injectTop($('table-of-contents'));
|
||||||
toggleLink.innerHTML = tocHideText;
|
$('table-of-contents').setStyle('padding-top', '0');
|
||||||
toc.style.display = 'block';
|
|
||||||
if (stickySpan) {
|
var hideToggle = new Element('a', {
|
||||||
stickySpan.style.display = 'inline';
|
'href': 'javascript:void(0);',
|
||||||
}
|
'events': {
|
||||||
createCookie('hidetoc', 0, 1000);
|
'click': function() {
|
||||||
|
var toc = $E('ul', 'table-of-contents');
|
||||||
|
|
||||||
|
if (toc.getStyle('display') == 'none') {
|
||||||
|
this.setHTML(tocHideText);
|
||||||
|
toc.setStyle('display', 'block');
|
||||||
|
stickyToggle.setStyle('display', 'inline');
|
||||||
|
Cookie.set('hidetoc', 0, {duration: 1000});
|
||||||
} else {
|
} else {
|
||||||
toggleLink.innerHTML = tocShowText;
|
this.setHTML(tocShowText);
|
||||||
toc.style.display = 'none';
|
toc.setStyle('display', 'none');
|
||||||
if (stickySpan) {
|
stickyToggle.setStyle('display', 'none');
|
||||||
stickySpan.style.display = 'none';
|
Cookie.set('hidetoc', 1, {duration: 1000});
|
||||||
}
|
}
|
||||||
createCookie('hidetoc', 1, 1000);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
|
||||||
function toggleStickyToc()
|
var stickyToggle = new Element('a', {
|
||||||
{
|
'href': 'javascript:void(0);',
|
||||||
var wrap = document.getElementById('wrap');
|
'events': {
|
||||||
var toggleLink = document.getElementById('toc-sticky-toggle').getElementsByTagName('a')[0];
|
'click': function() {
|
||||||
var collapseSpan = document.getElementById('toc-collapse-toggle');
|
var wrap = $('wrap');
|
||||||
|
|
||||||
if (wrap && toggleLink && !hasClassName(wrap, 'sticky-toc')) {
|
if ( ! wrap.hasClass('sticky-toc')) {
|
||||||
toggleLink.innerHTML = tocUnstickyText;
|
this.setHTML(tocUnstickyText);
|
||||||
addClassName(wrap, 'sticky-toc');
|
wrap.addClass('sticky-toc');
|
||||||
if (collapseSpan) {
|
hideToggle.setStyle('display', 'none');
|
||||||
collapseSpan.style.display = 'none';
|
Cookie.set('stickytoc', 1, {duration: 1000});
|
||||||
}
|
|
||||||
createCookie('stickytoc', 1, 1000);
|
|
||||||
} else {
|
} else {
|
||||||
toggleLink.innerHTML = tocStickyText;
|
this.setHTML(tocStickyText);
|
||||||
removeClassName(wrap, 'sticky-toc');
|
wrap.removeClass('sticky-toc');
|
||||||
if (collapseSpan) {
|
hideToggle.setStyle('display', 'inline');
|
||||||
collapseSpan.style.display = 'inline';
|
Cookie.set('stickytoc', 0, {duration: 1000});
|
||||||
}
|
}
|
||||||
createCookie('stickytoc', 0, 1000);
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
hideToggle.setHTML(tocHideText);
|
||||||
|
hideToggle.injectInside(container);
|
||||||
|
|
||||||
|
stickyToggle.setHTML(tocStickyText);
|
||||||
|
stickyToggle.injectInside(container);
|
||||||
|
|
||||||
|
if (Cookie.get('hidetoc') == 1) {
|
||||||
|
hideToggle.fireEvent('click');
|
||||||
|
stickyToggle.setStyle('display', 'none');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (Cookie.get('stickytoc') == 1) {
|
||||||
|
stickyToggle.fireEvent('click');
|
||||||
|
hideToggle.setStyle('display', 'none');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function createTocToggle()
|
window.addEvent('domready', function() {
|
||||||
{
|
initializeTocToggles();
|
||||||
var container = document.getElementById('toc-toggles');
|
});
|
||||||
|
|
||||||
var span = document.createElement('span');
|
window.addEvent('domready', function() {
|
||||||
var link = document.createElement('a');
|
new SmoothScroll();
|
||||||
var text = document.createTextNode(tocHideText);
|
});
|
||||||
|
|
||||||
link.appendChild(text);
|
|
||||||
link.setAttribute('href', 'javascript:toggleToc()');
|
|
||||||
|
|
||||||
span.setAttribute('id', 'toc-collapse-toggle');
|
|
||||||
span.appendChild(link);
|
|
||||||
|
|
||||||
container.appendChild(span);
|
|
||||||
|
|
||||||
if (readCookie('hidetoc') == 1) {
|
|
||||||
toggleToc();
|
|
||||||
}
|
|
||||||
|
|
||||||
if (readCookie('stickytoc') == 1) {
|
|
||||||
span.style.display = 'none';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function createTocStickyToggle()
|
|
||||||
{
|
|
||||||
var container = document.getElementById('toc-toggles');
|
|
||||||
|
|
||||||
var span = document.createElement('span');
|
|
||||||
var link = document.createElement('a');
|
|
||||||
var text = document.createTextNode(tocStickyText);
|
|
||||||
|
|
||||||
link.appendChild(text);
|
|
||||||
link.setAttribute('href', 'javascript:toggleStickyToc()');
|
|
||||||
|
|
||||||
span.setAttribute('id', 'toc-sticky-toggle');
|
|
||||||
span.appendChild(link);
|
|
||||||
|
|
||||||
container.appendChild(span);
|
|
||||||
|
|
||||||
if (readCookie('stickytoc') == 1) {
|
|
||||||
toggleStickyToc();
|
|
||||||
}
|
|
||||||
|
|
||||||
if (readCookie('hidetoc') == 1) {
|
|
||||||
span.style.display = 'none';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@ -1,73 +1,33 @@
|
|||||||
var symbolClosed = '+';
|
function initializeTrees(symbolClosed, symbolOpen)
|
||||||
var symbolOpen = '-';
|
|
||||||
|
|
||||||
function Tree_AutoInit()
|
|
||||||
{
|
{
|
||||||
var candidates = document.getElementsByTagName('ul');
|
$$('ul.tree li').each(function(listItem) {
|
||||||
|
|
||||||
for (i in candidates) {
|
var subTree = listItem.getChildren().filterByTag('ul')[0];
|
||||||
if (hasClassName(candidates[i], 'tree')) {
|
|
||||||
Tree_Init(candidates[i]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function Tree_Init(element)
|
|
||||||
{
|
|
||||||
for (var i in element.childNodes) {
|
|
||||||
|
|
||||||
var li = element.childNodes[i];
|
|
||||||
|
|
||||||
if (li.tagName && li.tagName.toLowerCase() == 'li') {
|
|
||||||
|
|
||||||
var subTree = Tree_FindChild(li, 'ul');
|
|
||||||
|
|
||||||
if (subTree) {
|
if (subTree) {
|
||||||
var expander = document.createElement('a');
|
|
||||||
|
|
||||||
expander.className = 'expander';
|
var expander = new Element('a', {
|
||||||
expander.href = 'javascript:void(0);';
|
'class': 'expander',
|
||||||
expander.onclick = Tree_Toggle;
|
'href': 'javascript:void(0);',
|
||||||
|
'events': {
|
||||||
if (hasClassName(subTree, 'closed')) {
|
'click': function() {
|
||||||
expander.innerHTML = symbolClosed;
|
if (subTree.hasClass('closed')) {
|
||||||
|
subTree.removeClass('closed');
|
||||||
|
this.setHTML(symbolOpen);
|
||||||
} else {
|
} else {
|
||||||
expander.innerHTML = symbolOpen;
|
subTree.addClass('closed');
|
||||||
|
this.setHTML(symbolClosed);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
li.insertBefore(expander, li.firstChild);
|
expander.setHTML(subTree.hasClass('closed') ? symbolClosed : symbolOpen);
|
||||||
|
expander.injectTop(listItem);
|
||||||
Tree_Init(subTree);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function Tree_FindChild(element, childTag)
|
window.addEvent('domready', function() {
|
||||||
{
|
initializeTrees('+', '-');
|
||||||
for (i in element.childNodes) {
|
});
|
||||||
child = element.childNodes[i];
|
|
||||||
if (child.tagName && child.tagName.toLowerCase() == childTag) {
|
|
||||||
return child;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
function Tree_Toggle()
|
|
||||||
{
|
|
||||||
expander = this;
|
|
||||||
li = expander.parentNode;
|
|
||||||
subTree = Tree_FindChild(li, 'ul');
|
|
||||||
|
|
||||||
if (hasClassName(subTree, 'closed')) {
|
|
||||||
removeClassName(subTree, 'closed');
|
|
||||||
expander.innerHTML = symbolOpen;
|
|
||||||
} else {
|
|
||||||
addClassName(subTree, 'closed');
|
|
||||||
expander.innerHTML = symbolClosed;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
appendLoader(Tree_AutoInit);
|
|
||||||
|
|||||||
@ -1,179 +0,0 @@
|
|||||||
/**
|
|
||||||
* Checks if the object has the class name.
|
|
||||||
*
|
|
||||||
* @param objElement element to manipulate
|
|
||||||
* @param strClass class name to add
|
|
||||||
*
|
|
||||||
* @return boolean indicating whether the object has the class name built with
|
|
||||||
* the understanding that there may be multiple classes.
|
|
||||||
*/
|
|
||||||
function hasClassName(objElement, strClass)
|
|
||||||
{
|
|
||||||
// if there is a class
|
|
||||||
if (objElement.className) {
|
|
||||||
|
|
||||||
// the classes are just a space separated list, so first get the list
|
|
||||||
var arrList = objElement.className.split(' ');
|
|
||||||
|
|
||||||
// get uppercase class for comparison purposes
|
|
||||||
var strClassUpper = strClass.toUpperCase();
|
|
||||||
|
|
||||||
// find all instances and remove them
|
|
||||||
for (var i = 0; i < arrList.length; i++) {
|
|
||||||
// if class found
|
|
||||||
if (arrList[i].toUpperCase() == strClassUpper) {
|
|
||||||
// we found it
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// if we got here then the class name is not there
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Adds a class to the class attribute of a DOM element built with the
|
|
||||||
* understanding that there may be multiple classes.
|
|
||||||
*
|
|
||||||
* @param objElement element to manipulate
|
|
||||||
* @param strClass class name to add
|
|
||||||
*/
|
|
||||||
function addClassName(objElement, strClass, blnMayAlreadyExist)
|
|
||||||
{
|
|
||||||
// if there is a class
|
|
||||||
if (objElement.className) {
|
|
||||||
|
|
||||||
// the classes are just a space separated list, so first get the list
|
|
||||||
var arrList = objElement.className.split(' ');
|
|
||||||
|
|
||||||
// if the new class name may already exist in list
|
|
||||||
if (blnMayAlreadyExist) {
|
|
||||||
|
|
||||||
// get uppercase class for comparison purposes
|
|
||||||
var strClassUpper = strClass.toUpperCase();
|
|
||||||
|
|
||||||
// find all instances and remove them
|
|
||||||
for (var i = 0; i < arrList.length; i++) {
|
|
||||||
|
|
||||||
// if class found
|
|
||||||
if (arrList[i].toUpperCase() == strClassUpper) {
|
|
||||||
|
|
||||||
// remove array item
|
|
||||||
arrList.splice(i, 1);
|
|
||||||
|
|
||||||
// decrement loop counter as we have adjusted the array's contents
|
|
||||||
i--;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// add the new class to end of list
|
|
||||||
arrList[arrList.length] = strClass;
|
|
||||||
|
|
||||||
// add the new class to beginning of list
|
|
||||||
//arrList.splice(0, 0, strClass);
|
|
||||||
|
|
||||||
// assign modified class name attribute
|
|
||||||
objElement.className = arrList.join(' ');
|
|
||||||
|
|
||||||
// if there was no class
|
|
||||||
} else {
|
|
||||||
// assign modified class name attribute
|
|
||||||
objElement.className = strClass;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* RemoveClassName
|
|
||||||
*
|
|
||||||
* Removes a class from the class attribute of a DOM element built with the
|
|
||||||
* understanding that there may be multiple classes.
|
|
||||||
*
|
|
||||||
* @param objElement element to manipulate
|
|
||||||
* @param strClass class name to remove
|
|
||||||
*/
|
|
||||||
function removeClassName(objElement, strClass)
|
|
||||||
{
|
|
||||||
// if there is a class
|
|
||||||
if (objElement.className) {
|
|
||||||
|
|
||||||
// the classes are just a space separated list, so first get the list
|
|
||||||
var arrList = objElement.className.split(' ');
|
|
||||||
|
|
||||||
// get uppercase class for comparison purposes
|
|
||||||
var strClassUpper = strClass.toUpperCase();
|
|
||||||
|
|
||||||
// find all instances and remove them
|
|
||||||
for (var i = 0; i < arrList.length; i++) {
|
|
||||||
|
|
||||||
// if class found
|
|
||||||
if (arrList[i].toUpperCase() == strClassUpper) {
|
|
||||||
|
|
||||||
// remove array item
|
|
||||||
arrList.splice(i, 1);
|
|
||||||
|
|
||||||
// decrement loop counter as we have adjusted the array's contents
|
|
||||||
i--;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// assign modified class name attribute
|
|
||||||
objElement.className = arrList.join(' ');
|
|
||||||
|
|
||||||
}
|
|
||||||
// if there was no class
|
|
||||||
// there is nothing to remove
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Handlers for automated loading
|
|
||||||
*/
|
|
||||||
_LOADERS = Array();
|
|
||||||
|
|
||||||
function callAllLoaders() {
|
|
||||||
var i, loaderFunc;
|
|
||||||
for(i=0;i<_LOADERS.length;i++) {
|
|
||||||
loaderFunc = _LOADERS[i];
|
|
||||||
if(loaderFunc != callAllLoaders) loaderFunc();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function appendLoader(loaderFunc) {
|
|
||||||
if(window.onload && window.onload != callAllLoaders)
|
|
||||||
_LOADERS[_LOADERS.length] = window.onload;
|
|
||||||
|
|
||||||
window.onload = callAllLoaders;
|
|
||||||
|
|
||||||
_LOADERS[_LOADERS.length] = loaderFunc;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function createCookie(name,value,days) {
|
|
||||||
if (days) {
|
|
||||||
var date = new Date();
|
|
||||||
date.setTime(date.getTime()+(days*24*60*60*1000));
|
|
||||||
var expires = "; expires="+date.toGMTString();
|
|
||||||
}
|
|
||||||
else var expires = "";
|
|
||||||
document.cookie = name+"="+value+expires+";";
|
|
||||||
}
|
|
||||||
|
|
||||||
function readCookie(name) {
|
|
||||||
var nameEQ = name + "=";
|
|
||||||
var ca = document.cookie.split(';');
|
|
||||||
for(var i=0;i < ca.length;i++) {
|
|
||||||
var c = ca[i];
|
|
||||||
while (c.charAt(0)==' ') c = c.substring(1,c.length);
|
|
||||||
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
function eraseCookie(name) {
|
|
||||||
createCookie(name,"",-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
@ -211,13 +211,11 @@ ul.tree {
|
|||||||
color: black;
|
color: black;
|
||||||
background-color: #f6f6f6;
|
background-color: #f6f6f6;
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
padding-top: 0;
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#table-of-contents p,
|
#table-of-contents p,
|
||||||
#table-of-contents ul.tree,
|
#table-of-contents ul.tree {
|
||||||
#table-of-contents span {
|
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -237,10 +235,11 @@ ul.tree {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
font-size: 0.9em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#toc-toggles span {
|
#toc-toggles a {
|
||||||
padding-left: 0.5em;
|
margin-left: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Sticky Table of Contents **************************************************/
|
/** Sticky Table of Contents **************************************************/
|
||||||
|
|||||||
@ -16,7 +16,14 @@
|
|||||||
<![endif]>
|
<![endif]>
|
||||||
<![endif]-->
|
<![endif]-->
|
||||||
|
|
||||||
<script type="text/javascript" src="<?php echo $baseUrl; ?>scripts/util.js"></script>
|
<script type="text/javascript">
|
||||||
|
//<![CDATA[
|
||||||
|
var tocHideText = "hide"; var tocShowText = "show";
|
||||||
|
var tocStickyText = "sticky"; var tocUnstickyText = 'unstick';
|
||||||
|
//]]>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="<?php echo $baseUrl; ?>scripts/mootools.v1.11.js"></script>
|
||||||
<script type="text/javascript" src="<?php echo $baseUrl; ?>scripts/tree.js"></script>
|
<script type="text/javascript" src="<?php echo $baseUrl; ?>scripts/tree.js"></script>
|
||||||
<script type="text/javascript" src="<?php echo $baseUrl; ?>scripts/toc.js"></script>
|
<script type="text/javascript" src="<?php echo $baseUrl; ?>scripts/toc.js"></script>
|
||||||
|
|
||||||
@ -32,19 +39,10 @@
|
|||||||
|
|
||||||
<div id="table-of-contents">
|
<div id="table-of-contents">
|
||||||
|
|
||||||
<div id="toc-toggles"></div>
|
|
||||||
|
|
||||||
<h1>Table of Contents</h1>
|
<h1>Table of Contents</h1>
|
||||||
|
|
||||||
<?php $tool->renderToc(); ?>
|
<?php $tool->renderToc(); ?>
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
//<![CDATA[
|
|
||||||
var tocHideText = "hide"; var tocShowText = "show"; createTocToggle();
|
|
||||||
var tocStickyText = "sticky"; var tocUnstickyText = 'unstick'; createTocStickyToggle();
|
|
||||||
//]]>
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
<?php if($tool->getOption('one-page')): ?>
|
<?php if($tool->getOption('one-page')): ?>
|
||||||
<a href="<?php echo ($tool->getOption('clean-url') ? "${baseUrl}chapter/" : '?chapter=') . $tool->findByIndex('1.')->getPath(); ?>">View one chapter per page</a>
|
<a href="<?php echo ($tool->getOption('clean-url') ? "${baseUrl}chapter/" : '?chapter=') . $tool->findByIndex('1.')->getPath(); ?>">View one chapter per page</a>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user