From f26bdc8afc4932c1ec849bac253dafdbe7eff684 Mon Sep 17 00:00:00 2001 From: Fred Chasen Date: Thu, 20 Dec 2012 12:37:43 -0800 Subject: [PATCH] update toc to use displayChapter and added events for book --- .DS_Store | Bin 21508 -> 21508 bytes css/main.css | 16 ++++- fpjs/reader/app.js | 41 +++++++++---- fpjs/render/book.js | 134 ++++++++++++++++++++++++++++++++++-------- img/.DS_Store | Bin 0 -> 6148 bytes img/settings-s.png | Bin 0 -> 1436 bytes img/settings.png | Bin 0 -> 1537 bytes index.html | 4 +- moby-dick/OPS/toc.ncx | 35 +++++++++++ 9 files changed, 192 insertions(+), 38 deletions(-) create mode 100644 img/.DS_Store create mode 100644 img/settings-s.png create mode 100644 img/settings.png diff --git a/.DS_Store b/.DS_Store index 52a854791dafef8bcf7c582f48f3053ae7438bf3..9bc3e0200f667d72bae1aa07f54801bff7414698 100644 GIT binary patch delta 81 zcmZo!!Pv5bal;pN#&wg;6_T~ZtE&wyOmq~?jB9lis?E(TflL#_+FDKy4o-n>9HL5k kHXb2~)it$s^^=b&$TK!>EKFhF%x>_OopIgfujc$R01b{Av;Y7A delta 30 lcmZo!!Pv5bal;q&$z}?hH"+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 0000000000000000000000000000000000000000..5008ddfcf53c02e82d7eee2e57c38e5672ef89f6 GIT binary patch literal 6148 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 literal 0 HcmV?d00001 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. + + +