added footnote support for static contents

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;
+}
+

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);

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

index.html

@@ -1,7 +1,7 @@
 <html>
 <body>
 <h1>Welcome to BookJS</h1>
-<h4>Page headers, footers, numbers, TOC, using CSS Regions</h4>
+<h4>Page headers, footnotes, pagenumbers, multi columns, TOC, using CSS Regions</h4>
 
 
 <h2>Steps:</h2>
@@ -17,9 +17,15 @@ <h2>Steps:</h2>
 <h2>Notice:</h2>
 <ol>
   <li>There are multiple numbered "pages"</li>
-  <li>The TOC is generated from the H1 tags and includes the page number the tag occurs on, for further configuration options, check the sourcefile <a href="book.js">book.js</a> and an example for how configuration is done in <a href="book-config.js">book-config.js</a>.</li>
+  <li>The TOC is generated from the H1 tags and includes the page number the tag occurs on.</li>
 </ol>
 
+<h2>Configuration:</h2>
+<p>For configuration options, check the sourcefile <a href="book.js">book.js</a> and an example for how configuration is done in <a href="book-config.js">book-config.js</a>.</p>
+
+<h2>Footnotes:</h2>
+<p>Footnotes are currently only supported for previously created content (not when using BookJS in combination with a text editor). The option <i>pagination.config.enableReflow</i> 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 <i>&lt;span class='footnote'&gt;This a footnote&lt;/span&gt;</i>. See also the source code of the <a href="test.html">Test Page</a>.</p>
+
 <h2>License:</h2>
 BookJS is licensed under the APL license. For further information, check <a href="LICENSE.txt">LICENSE.txt</a>.
 

test.html

@@ -33,7 +33,7 @@ <h1>Introduction</h1>
             non habent claritatem insitam; est usus legentis in iis qui facit eorum
             claritatem. Investigationes demonstraverunt lectores legere me lius quod
             ii legunt saepius.</div>
-        <div>3 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+        <div>3 Lorem ipsum dolor sit amet<span class="footnote">hey</span>, 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