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 toggleLink = document.getElementById('toc-collapse-toggle').getElementsByTagName('a')[0];
|
||||
var stickySpan = document.getElementById('toc-sticky-toggle');
|
||||
var container = new Element('div', {
|
||||
'id': 'toc-toggles'
|
||||
});
|
||||
|
||||
if (toc && toggleLink && toc.style.display == 'none') {
|
||||
toggleLink.innerHTML = tocHideText;
|
||||
toc.style.display = 'block';
|
||||
if (stickySpan) {
|
||||
stickySpan.style.display = 'inline';
|
||||
}
|
||||
createCookie('hidetoc', 0, 1000);
|
||||
container.injectTop($('table-of-contents'));
|
||||
$('table-of-contents').setStyle('padding-top', '0');
|
||||
|
||||
var hideToggle = new Element('a', {
|
||||
'href': 'javascript:void(0);',
|
||||
'events': {
|
||||
'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 {
|
||||
toggleLink.innerHTML = tocShowText;
|
||||
toc.style.display = 'none';
|
||||
if (stickySpan) {
|
||||
stickySpan.style.display = 'none';
|
||||
}
|
||||
createCookie('hidetoc', 1, 1000);
|
||||
this.setHTML(tocShowText);
|
||||
toc.setStyle('display', 'none');
|
||||
stickyToggle.setStyle('display', 'none');
|
||||
Cookie.set('hidetoc', 1, {duration: 1000});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function toggleStickyToc()
|
||||
{
|
||||
var wrap = document.getElementById('wrap');
|
||||
var toggleLink = document.getElementById('toc-sticky-toggle').getElementsByTagName('a')[0];
|
||||
var collapseSpan = document.getElementById('toc-collapse-toggle');
|
||||
var stickyToggle = new Element('a', {
|
||||
'href': 'javascript:void(0);',
|
||||
'events': {
|
||||
'click': function() {
|
||||
var wrap = $('wrap');
|
||||
|
||||
if (wrap && toggleLink && !hasClassName(wrap, 'sticky-toc')) {
|
||||
toggleLink.innerHTML = tocUnstickyText;
|
||||
addClassName(wrap, 'sticky-toc');
|
||||
if (collapseSpan) {
|
||||
collapseSpan.style.display = 'none';
|
||||
}
|
||||
createCookie('stickytoc', 1, 1000);
|
||||
if ( ! wrap.hasClass('sticky-toc')) {
|
||||
this.setHTML(tocUnstickyText);
|
||||
wrap.addClass('sticky-toc');
|
||||
hideToggle.setStyle('display', 'none');
|
||||
Cookie.set('stickytoc', 1, {duration: 1000});
|
||||
} else {
|
||||
toggleLink.innerHTML = tocStickyText;
|
||||
removeClassName(wrap, 'sticky-toc');
|
||||
if (collapseSpan) {
|
||||
collapseSpan.style.display = 'inline';
|
||||
this.setHTML(tocStickyText);
|
||||
wrap.removeClass('sticky-toc');
|
||||
hideToggle.setStyle('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()
|
||||
{
|
||||
var container = document.getElementById('toc-toggles');
|
||||
window.addEvent('domready', function() {
|
||||
initializeTocToggles();
|
||||
});
|
||||
|
||||
var span = document.createElement('span');
|
||||
var link = document.createElement('a');
|
||||
var text = document.createTextNode(tocHideText);
|
||||
window.addEvent('domready', function() {
|
||||
new SmoothScroll();
|
||||
});
|
||||
|
||||
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 = '+';
|
||||
var symbolOpen = '-';
|
||||
|
||||
function Tree_AutoInit()
|
||||
function initializeTrees(symbolClosed, symbolOpen)
|
||||
{
|
||||
var candidates = document.getElementsByTagName('ul');
|
||||
$$('ul.tree li').each(function(listItem) {
|
||||
|
||||
for (i in candidates) {
|
||||
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');
|
||||
var subTree = listItem.getChildren().filterByTag('ul')[0];
|
||||
|
||||
if (subTree) {
|
||||
var expander = document.createElement('a');
|
||||
|
||||
expander.className = 'expander';
|
||||
expander.href = 'javascript:void(0);';
|
||||
expander.onclick = Tree_Toggle;
|
||||
|
||||
if (hasClassName(subTree, 'closed')) {
|
||||
expander.innerHTML = symbolClosed;
|
||||
var expander = new Element('a', {
|
||||
'class': 'expander',
|
||||
'href': 'javascript:void(0);',
|
||||
'events': {
|
||||
'click': function() {
|
||||
if (subTree.hasClass('closed')) {
|
||||
subTree.removeClass('closed');
|
||||
this.setHTML(symbolOpen);
|
||||
} else {
|
||||
expander.innerHTML = symbolOpen;
|
||||
subTree.addClass('closed');
|
||||
this.setHTML(symbolClosed);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
expander.setHTML(subTree.hasClass('closed') ? symbolClosed : symbolOpen);
|
||||
expander.injectTop(listItem);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
li.insertBefore(expander, li.firstChild);
|
||||
|
||||
Tree_Init(subTree);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function Tree_FindChild(element, childTag)
|
||||
{
|
||||
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);
|
||||
window.addEvent('domready', function() {
|
||||
initializeTrees('+', '-');
|
||||
});
|
||||
|
||||
@ -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;
|
||||
background-color: #f6f6f6;
|
||||
padding: 1em;
|
||||
padding-top: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#table-of-contents p,
|
||||
#table-of-contents ul.tree,
|
||||
#table-of-contents span {
|
||||
#table-of-contents ul.tree {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
@ -237,10 +235,11 @@ ul.tree {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: right;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
#toc-toggles span {
|
||||
padding-left: 0.5em;
|
||||
#toc-toggles a {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
/** Sticky Table of Contents **************************************************/
|
||||
|
||||
@ -16,7 +16,14 @@
|
||||
<![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/toc.js"></script>
|
||||
|
||||
@ -32,19 +39,10 @@
|
||||
|
||||
<div id="table-of-contents">
|
||||
|
||||
<div id="toc-toggles"></div>
|
||||
|
||||
<h1>Table of Contents</h1>
|
||||
|
||||
<?php $tool->renderToc(); ?>
|
||||
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
var tocHideText = "hide"; var tocShowText = "show"; createTocToggle();
|
||||
var tocStickyText = "sticky"; var tocUnstickyText = 'unstick'; createTocStickyToggle();
|
||||
//]]>
|
||||
</script>
|
||||
|
||||
<p>
|
||||
<?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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user