From 642dff4741a37f9f8fda9f90eff65506b97415a4 Mon Sep 17 00:00:00 2001 From: Johannes Wilm Date: Sun, 4 Nov 2012 21:10:13 -0300 Subject: [PATCH] added footnote support for static contents --- book.css | 18 ++++++++++++++++++ book.js | 46 ++++++++++++++++++++++++++++++++++------------ changes.txt | 3 ++- index.html | 10 ++++++++-- test.html | 2 +- 5 files changed, 63 insertions(+), 16 deletions(-) diff --git a/book.css b/book.css index 27f9a7a..2394345 100644 --- a/book.css +++ b/book.css @@ -231,3 +231,21 @@ font-size:12px; line-height: 1em; margin:.25em; } + +/* Turn of for chapter 1 + +#body0 .contents-column:nth-child(2) { +background-color: red; +width:0; +height: 0; +} +*/ + +/* Turn of for page 3, chapter 1 */ + +#body0 .page:nth-child(3) .contents-column:nth-child(2) { +background-color: red; +width:0; +height: 0; +} + diff --git a/book.js b/book.js index 9d21e47..6dd6bcb 100644 --- a/book.js +++ b/book.js @@ -314,17 +314,40 @@ pagination.flowObject.prototype.findStartpageNumber = function () { }; pagination.flowObject.prototype.layoutFootnotes = function () { - var numFootnote, footnote, currentPage; - var allFootnotes = this.rawdiv.getElementsByClassName('footnote'); + var numFootnote, footnote, footnoteReferencePageBeforeInsertion, footnoteReferencePageAfterInsertion, currentFootnoteContainer, nextpageFootnote; + + var allFootnotes = this.rawdiv.getElementsByClassName('footnote'); // Look for all the items that have "footnote" in their class list. These will be treated as footnote texts. for (var i = 0; i < allFootnotes.length; i++) { - footnote = allFootnotes[i].cloneNode(true); - allFootnotes[i].style.display = 'none'; - numFootnote = document.createElement('sup'); - - numFootnote.classList.add('footnote-reference'); - allFootnotes[i].parentNode.insertBefore(numFootnote, allFootnotes[i]); - currentPage = numFootnote; - + numFootnote = document.createElement('sup'); // Create a sup-element with the class "footnote-reference" that holds the current footnote number. This will be used both in the body text and in the footnote itself. + numFootnote.classList.add('footnote-reference'); + numFootnoteContents = document.createTextNode(i+1); + numFootnote.appendChild(numFootnoteContents); + + footnote = document.createElement('div'); // Put the footnote number and footnote text together in a div-element with the class footnote-item + footnote.classList.add('footnote-item'); + footnote.appendChild(numFootnote); + + footnoteText = allFootnotes[i].cloneNode(true); + footnote.appendChild(footnoteText); + + allFootnotes[i].style.display = 'none'; // Hide the original footnote text in the body text. We hide it instead of removing it, so that it can easily be recovered. + + numFootnoteReference = numFootnote.cloneNode(true) + allFootnotes[i].parentNode.insertBefore(numFootnoteReference, allFootnotes[i]); // Insert the footnote number in the body text just before the original footnote text appeared in the body (the text that is now hidden). + + footnoteReferencePageBeforeInsertion = this.namedFlow.getRegionsByContent(numFootnoteReference)[0].parentNode.parentNode.parentNode; // We find the page where the footnote is referenced from before the insertion procedure begins. + currentFootnoteContainer = footnoteReferencePageBeforeInsertion.querySelector('.footnotes'); + currentFootnoteContainer.appendChild(footnote); // We insert the footnote in the footnote contianer of that page. + footnoteReferencePageAfterInsertion = this.namedFlow.getRegionsByContent(numFootnoteReference)[0].parentNode.parentNode.parentNode; // We find the page where the footnote is referenced from after the insertion procedure has taken place. + + if (footnoteReferencePageBeforeInsertion !== footnoteReferencePageAfterInsertion) { //If the footnote reference has been moved from oen page to another through the insertion procedure, we set the visibility of the footnote to "hidden" so that it continues to take up the same space and then insert it one more time on the page from where it now is referenced. + nextpageFootnote = footnote.cloneNode(true); + footnote.style.visibility = 'hidden'; + footnote.classList.remove('footnote-item'); + + currentFootnoteContainer = footnoteReferencePageAfterInsertion.querySelector('.footnotes'); + currentFootnoteContainer.appendChild(nextpageFootnote); + } } }; @@ -364,7 +387,6 @@ pagination.flowObject.prototype.addOrRemovePages = function (pages) { if(!(this.namedFlow)) { this.setNamedFlow(); } - console.log(this.namedFlow); if ((this.namedFlow.overset) && (this.rawdiv.innerText.length > 0)) { this.pageCounter.needsUpdate = true; @@ -424,6 +446,7 @@ pagination.applyBookLayout = function () { if (pagination.config.enableReflow) { bodyObjects[i].enableAutoReflow(); } + bodyObjects[i].layoutFootnotes(); } pagination.pageCounters.arab.numberPages(); @@ -432,7 +455,6 @@ pagination.applyBookLayout = function () { //Create and flow frontmatter fmObject = new pagination.flowObject('frontmatter', pagination.pageCounters.roman, 1); fmObject.columns = 1; - console.log(fmObject); document.body.appendChild(fmObject.rawdiv); fmObject.rawdiv.innerHTML = pagination.config.frontmatterContents; var toc = pagination.headersAndToc(bodyObjects); diff --git a/changes.txt b/changes.txt index a87eddd..d518b4e 100644 --- a/changes.txt +++ b/changes.txt @@ -1,5 +1,6 @@ -0.23.1 +0.23.1-dev ---- +Added footnote support for static content (reflow has to be enabled) Added multi column support 0.23.0 diff --git a/index.html b/index.html index 4ebb3a3..d95e99b 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,7 @@

Welcome to BookJS

-

Page headers, footers, numbers, TOC, using CSS Regions

+

Page headers, footnotes, pagenumbers, multi columns, TOC, using CSS Regions

Steps:

@@ -17,9 +17,15 @@

Steps:

Notice:

  1. There are multiple numbered "pages"
    2. -
  2. The TOC is generated from the H1 tags and includes the page number the tag occurs on, for further configuration options, check the sourcefile book.js and an example for how configuration is done in book-config.js.
    3. +
  3. The TOC is generated from the H1 tags and includes the page number the tag occurs on.
+

Configuration:

+

For configuration options, check the sourcefile book.js and an example for how configuration is done in book-config.js.

+ +

Footnotes:

+

Footnotes are currently only supported for previously created content (not when using BookJS in combination with a text editor). The option pagination.config.enableReflow needs to be enabled for this to work (this option is enabled by default). In order to insert a footnote into the source text, simply insert it as a span with a class 'footnote', such as <span class='footnote'>This a footnote</span>. See also the source code of the Test Page.

+

License:

BookJS is licensed under the APL license. For further information, check LICENSE.txt. diff --git a/test.html b/test.html index 7a20bd0..36b80d6 100644 --- a/test.html +++ b/test.html @@ -33,7 +33,7 @@

Introduction

non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. -
3 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy +
3 Lorem ipsum dolor sit amethey, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure