diff --git a/.DS_Store b/.DS_Store index 52a8547..9bc3e02 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/css/main.css b/css/main.css index 1e1c88a..cf1a49e 100755 --- a/css/main.css +++ b/css/main.css @@ -155,10 +155,23 @@ input:-moz-placeholder { #toc { margin-top: 50px; + padding-left: 25px; + display: block; + width: 100%; + height: 100%; } #toc li { margin-bottom: 10px; + width: 225px; + font-family: Georgia, "Times New Roman", Times, serif; + list-style: none; +} + +#toc li:active, +#toc li.current +{ + list-style: square; } #toc a { @@ -168,4 +181,5 @@ input:-moz-placeholder { #toc a:hover { text-decoration: underline; -} \ No newline at end of file +} + diff --git a/fpjs/reader/app.js b/fpjs/reader/app.js index cbf0ecd..a3b21ac 100644 --- a/fpjs/reader/app.js +++ b/fpjs/reader/app.js @@ -5,22 +5,26 @@ FP.app.init = (function($){ var Book; function init(){ + //-- Setup the browser prefixes FP.core.crossBrowserColumnCss(); + //-- Temp set the previos position to section 6, + // since moby-dick has lots of crap before the test + // Might want to make a way to skip to first chapter + if (localStorage.getItem("spinePos") === null) { + localStorage.setItem("spinePos", 6); + } + + Book = new FP.Book("area", "/moby-dick/"); //Book = new FP.Book("area", "/the-hound-of-the-baskervilles/"); + Book.listen("book:metadataReady", meta); + Book.listen("book:tocReady", toc); + //-- Wait for Dom ready to handle jquery $(function() { controls(); - //-- Replace with event - setTimeout(function(){ - meta(); - toc(); - }, 500); - setTimeout(function(){ - toc(); - }, 1000); }); @@ -31,7 +35,7 @@ FP.app.init = (function($){ author = Book.getCreator(), $title = $("#book-title"), $author = $("#chapter-title"); - + document.title = title+"–"+author; $title.html(title); $author.html(author); @@ -41,10 +45,25 @@ FP.app.init = (function($){ function toc(){ var contents = Book.getTOC(); $toc = $("#toc"); - + + $toc.empty(); + contents.forEach(function(item){ - $toc.append("
  • "+item.label+"
    • "); + $wrapper = $("
  • "); + + $item = $(""+item.label+""); + + $item.on("click", function(e){ + $this = $(this); + console.log(item.spinePos) + Book.displayChapter($this.data("spinepos")); + e.preventDefault(); + }); + + $wrapper.append($item); + $toc.append($wrapper); }); + } diff --git a/fpjs/render/book.js b/fpjs/render/book.js index 6951fe3..5277c42 100644 --- a/fpjs/render/book.js +++ b/fpjs/render/book.js @@ -6,6 +6,14 @@ FP.Book = function(elem, bookUrl){ } else { this.el = elem; } + + this.events = {}; + this.createEvent("book:tocReady"); + this.createEvent("book:metadataReady"); + this.createEvent("book:spineReady"); + this.createEvent("book:bookReady"); + this.createEvent("book:chapterReady"); + this.createEvent("book:resized"); this.initialize(this.el); this.listeners(); @@ -21,19 +29,21 @@ FP.Book = function(elem, bookUrl){ //-- Build up any html needed FP.Book.prototype.initialize = function(el){ this.iframe = document.createElement('iframe'); - this.onResized(); + this.resizeIframe(false, this.el.clientWidth, this.el.clientHeight); + + this.listen("book:resized", this.resizeIframe, this); + + //this.listen("book:bookReady", function(){console.log("rready")}); + this.el.appendChild(this.iframe); + } FP.Book.prototype.listeners = function(){ var that = this; - window.addEventListener("resize", function(){ - //-- Need a better way to unbind this - - that.onResized(); - }, false); + window.addEventListener("resize", that.onResized.bind(this), false); } @@ -70,13 +80,30 @@ FP.Book.prototype.isContained = function(bookUrl){ FP.Book.prototype.onResized = function(){ - var width = this.el.clientWidth; - this.iframe.height = this.el.clientHeight; + this.tell("book:resized", { + width: this.el.clientWidth, + height: this.el.clientHeight + }); +} + +FP.Book.prototype.resizeIframe = function(e, cWidth, cHeight){ + var width, height; + + //-- Can be resized by the window resize event, or by passed height + if(!e){ + width = cWidth; + height = cHeight; + }else{ + width = e.msg.width; + height = e.msg.height; + } + + this.iframe.height = height; if(width % 2 != 0){ width += 1; } - + this.iframe.width = width; } @@ -98,7 +125,7 @@ FP.Book.prototype.parseContainer = function(callback){ that.contentsPath = fullpath[1]; //-- Now that we have the path we can parse the contents //-- TODO: move this - that.parseContents(that.contentsPath) + that.parseContents(that.contentsPath); }); } @@ -129,6 +156,8 @@ FP.Book.prototype.parseMetadata = function(metadata){ .childNodes[0].nodeValue; this.metadata["creator"] = metadata.getElementsByTagNameNS("http://purl.org/dc/elements/1.1/","creator")[0] .childNodes[0].nodeValue; + + this.tell("book:metadataReady"); } FP.Book.prototype.parseManifest = function(manifest){ @@ -155,16 +184,20 @@ FP.Book.prototype.parseSpine = function(spine){ this.spine = []; + this.spineIndex = {}; //-- For quick reference by id, might be a better way + //-- Turn items into an array items = Array.prototype.slice.call(spine.getElementsByTagName("itemref")); //-- Add to array to mantain ordering and cross reference with manifest - items.forEach(function(item){ + items.forEach(function(item, index){ var id = item.getAttribute('idref'), href = that.assets[id]; that.spine.push({"id": id, "href": href}); + that.spineIndex[id] = index; }); + this.tell("book:spineReady"); } FP.Book.prototype.parseTOC = function(path){ @@ -185,9 +218,16 @@ FP.Book.prototype.parseTOC = function(path){ href = that.assets[id], navLabel = item.getElementsByTagName("navLabel")[0].childNodes[0].childNodes[0].nodeValue; - that.toc.push({"id": id, "href": href, "label": navLabel}); + that.toc.push({ + "id": id, + "href": href, + "label": navLabel, + "spinePos": that.spineIndex[id] + }); + }); + that.tell("book:tocReady"); /* Moby-Dick @@ -216,15 +256,18 @@ FP.Book.prototype.chapterTitle = function(){ } FP.Book.prototype.startDisplay = function(){ - //-- TODO: get previous saved positions? - var spinePos = 6; + //-- get previous saved positions + var spinePos = localStorage.getItem("spinePos") || 0; + + this.tell("book:bookReady"); this.displayChapter(spinePos); + } FP.Book.prototype.displayChapter = function(pos, end){ var that = this; - + if(pos >= this.spine.length){ console.log("Reached End of Book") return false; @@ -235,6 +278,7 @@ FP.Book.prototype.displayChapter = function(pos, end){ return false; } + localStorage.setItem("spinePos", pos); this.spinePos = pos; this.chapterPos = 1; @@ -245,23 +289,22 @@ FP.Book.prototype.displayChapter = function(pos, end){ this.iframe.onload = function() { //-- TODO: Choose between single and spread - that.formatSpread(end); + that.formatSpread(); + if(end) that.goToChapterEnd(); - window.addEventListener("resize", function(){ - that.formatSpread(); - //-- need to adjust position in book - }, false); + that.listen("book:resized", that.formatSpread, that); + + that.tell("book:chapterReady"); } } -FP.Book.prototype.formatSpread = function(end){ +FP.Book.prototype.formatSpread = function(){ this.bodyEl = this.iframe.contentDocument.documentElement.getElementsByTagName('body')[0]; //this.bodyEl.setAttribute("style", "background: #777"); //-- Check the width and decied on columns //-- Todo: a better place for this? - this.elWidth = this.iframe.width; this.gap = this.gap || this.elWidth / 8; @@ -291,9 +334,10 @@ FP.Book.prototype.formatSpread = function(end){ this.calcPages(); - if(end){ - this.chapterEnd(); - } +} + +FP.Book.prototype.goToChapterEnd = function(){ + this.chapterEnd(); } FP.Book.prototype.calcPages = function(){ @@ -351,3 +395,43 @@ FP.Book.prototype.getTOC = function(){ } +FP.Book.prototype.createEvent = function(evt){ + var e = new CustomEvent(evt); + this.events[evt] = e; + return e; +} + +FP.Book.prototype.tell = function(evt, msg){ + var e; + + if(!this.events[evt]){ + console.warn("No event:", evt, "defined yet, creating."); + e = this.createEvent(evt) + }else{ + e = this.events[evt]; + } + + if(msg) e.msg = msg; + + this.el.dispatchEvent(e); + +} + +FP.Book.prototype.listen = function(evt, func, bindto){ + if(!this.events[evt]){ + console.warn("No event:", evt, "defined yet, creating."); + this.createEvent(evt); + return; + } + + if(bindto){ + this.el.addEventListener(evt, func.bind(bindto), false); + }else{ + this.el.addEventListener(evt, func, false); + } + +} + +FP.Book.prototype.deafen = function(evt, func){ + this.el.removeEventListener(evt, func, false); +} diff --git a/img/.DS_Store b/img/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/img/.DS_Store differ diff --git a/img/settings-s.png b/img/settings-s.png new file mode 100644 index 0000000..fc21e78 Binary files /dev/null and b/img/settings-s.png differ diff --git a/img/settings.png b/img/settings.png new file mode 100644 index 0000000..be20cba Binary files /dev/null and b/img/settings.png differ diff --git a/index.html b/index.html index 2bf7199..80e0058 100755 --- a/index.html +++ b/index.html @@ -44,8 +44,10 @@
    + +
    -
      +
      diff --git a/moby-dick/OPS/toc.ncx b/moby-dick/OPS/toc.ncx index 2338b83..baaffc9 100644 --- a/moby-dick/OPS/toc.ncx +++ b/moby-dick/OPS/toc.ncx @@ -46,5 +46,40 @@ + + Chapter 4. The Counterpane. + + + + + Chapter 5. Breakfast. + + + + + Chapter 6. The Street. + + + + + Chapter 7. The Chapel. + + + + + Chapter 8. The Pulpit. + + + + + Chapter 9. The Sermon. + + + + + Chapter 10. A Bosom Friend. + + +