joseph / Monocle

A silky, tactile browser-based ebook JavaScript library.
http://monocle.inventivelabs.com.au
MIT License
743 stars 200 forks source link

Suggestion: one line invocation of some kind of basic reader #34

Closed ptsefton closed 12 years ago

ptsefton commented 13 years ago

I tried Monocle on the recommendation of Liza Daly as part of a project I'm working on: http://jiscpub.blogs.edina.ac.uk/2011/04/14/introducing-epub2html-adding-a-plain-html-view-to-an-epub/

I wanted to be able to add an index.html to an epub file that could be used as a pure HTML reader but I have had trouble understanding how to get Monocle working. I looked at the examples in the componentry branch but it seems like an awful lot of code is need to get something working.

Some suggestions: Would it be possible to provide some kind of basic useful default reader that can be invoked using a very small number of lines of code rather than the several in the test example? Bonus points if it only needs one div element in the HTML to anchor it.

Could this use a JSON table of contents specified declaratively rather than every implementation having to re-write the http loading code?

I am happy to help but at the moment I'm finding the README file quite challenging - I have no idea what spinners or flippers are or what a control might actually look like or why I might need Rake and I was not able to get the reader to work in my application in the limited amount of time I spent on it. (Worked OK when I pulled in the application from here: http://monocle.inventivelabs.com.au/books/dubliners but that had bugs and I wanted to have the files served locally)

joseph commented 13 years ago

At the top of the README, code is shown — 1 script inclusion, 1 line of JavaScript and 1 div — that gives you a working reader. What is missing?

ptsefton commented 13 years ago

Thanks for the prompt response.

monocle-min.js is not included in the stuff I cloned as far as I can see. I am assuming I would have to build it. I gather that the minified file referred to in the README is monocle-min. It would be useful to have an example of how to use the code without having to go through that step.

If I did have monocle-min.js I want something that works with this stuff I cooked [1] up that works with your Dubliners example, but that has oldbook and stuff that is missing from the latest code .

The way I see it I would like to set up my data in a bookdata variable and invoke the reader like this:

Without having to write something to load the data myself.

[1] var bookData = { getComponents: function () { return ["OEBPS/index.html", "OEBPS/index.html", "OEBPS/ar01s02.html", "OEBPS/ar01s03.html"]; }, getContents: function () { return [{"src": "OEBPS/index.html", "children": [{"src": "OEBPS/index.html#anchor-1", "children": [], "title": "1. Part 1"}, {"src": "OEBPS/ar01s02.html", "children": [], "title": "2. Part 2"}, {"src": "OEBPS/ar01s03.html", "children": [], "title": "3. Part 3"}], "title": "Simple test file for Paquete"}]; }, getComponent: function (componentId) { return this.getViaAjax(componentId); }, getMetaData: function(key) { return { title: "Simple test file for Paquete", creator: "Unknown" }[key]; },

joseph commented 13 years ago

Every example (other than dogfood) shows how to load the basic Monocle scripts unminified. Unminified Monocle isn't recommended for production purposes — of course you're welcome to minify it your own way if you don't like Rake.

Wouldn't this bookdata variable look almost exactly like the bookdata object you've included above? Other than getComponent (where you've chosen to use Ajax), isn't every other line just data? Are you just suggesting that:

 getComponents: function() { return ["OEBPS/index.html", "OEBPS/index.html", "OEBPS/ar01s02.html", "OEBPS/ar01s03.html"]; },
 getContents: function () { return [{"src": "OEBPS/index.html", "children": [{"src": "OEBPS/index.html#anchor-1", "children": [], "title": "1. Part 1"}, {"src": "OEBPS/ar01s02.html", "children": [], "title": "2. Part 2"}, {"src": "OEBPS/ar01s03.html", "children": [], "title": "3. Part 3"}], "title": "Simple test file for Paquete"}]; },
 getMetaData: function(key) { return { title: "Simple test file for Paquete", creator: "Unknown"}[key]; }

should become

 components:  ["OEBPS/index.html", "OEBPS/index.html", "OEBPS/ar01s02.html", "OEBPS/ar01s03.html"],
 contents:  [{"src": "OEBPS/index.html", "children": [{"src": "OEBPS/index.html#anchor-1", "children": [], "title": "1. Part 1"}, {"src": "OEBPS/ar01s02.html", "children": [], "title": "2. Part 2"}, {"src": "OEBPS/ar01s03.html", "children": [], "title": "3. Part 3"}], "title": "Simple test file for Paquete"}],
 metadata: { title: "Simple test file for Paquete", creator: "Unknown" }

etc?

That's fine, but it's not a very significant saving in complexity, given how much it reduces flexibility. It might save you writing getComponent, but every deployment of Monocle I've seen has had a different approach to getComponent, so I'm not sure what a cookie-cutter version would look like.

I'm happy to contemplate a simplified layer over bookData, but it's not clear to me what simplification you're suggesting.

joseph commented 12 years ago

I'm closing this as 'answered'. Please re-open if there are remaining queries related to this, or open new tickets for specific documentation gaps. Thanks!