第二十四個夏天後: [Javascript] EPUB Reader？

原先想在寫一個 EPUB Reader 的，後來被建議乾脆找純 Javascript 的來做做，畢竟 HTML5 也越來越熱囉！隨意地找尋，看到有兩套：

rePublish — Pure-JavaScript ePub Reader

Monocle - Books in the browser

第一套似乎很威，可以直接從 EPUB 格式讀取資料出來，看他的 lib 裡的確也有 zip、base64 等相關字眼，只可惜初步測試好像有點問題，又很順手地找到 Monocle 這套！並且還是 MIT License ！他類似只是一個 EBook 的套版，把資料餵給他吃就行了！

Monocle 挺厲害的，在網頁上直接地 show 一本電子書，馬上就可以體驗操作介面。上面那本書則是網站上的一個範例，整個就幾乎跟 iBooks 很像啦！因此就挑他上手吧！我的工作就只剩下把 EPUB 裡頭的東西抽出來組一個資料結構來餵給 Monocle 而已啦！(另外還要先對 EPUB 做 Unzip 囉)

以下是需用到的 Javascript 元件：

DOMParser

XMLHttpRequest

快速簡單的範例：

＠index.html

<html>
   <head>
       <script type="text/javascript" src="src/monocle.js"></script>
       <script type="text/javascript" src="src/book.js"></script>
       <script type="text/javascript" src="src/compat.js"></script>
       <script type="text/javascript" src="src/component.js"></script>
       <script type="text/javascript" src="src/framer.js"></script>
       <script type="text/javascript" src="src/place.js"></script>
       <script type="text/javascript" src="src/reader.js"></script>
       <script type="text/javascript" src="src/styles.js"></script>
       <script type="text/javascript" src="src/controls/contents.js"></script>
       <script type="text/javascript" src="src/controls/magnifier.js"></script>
       <script type="text/javascript" src="src/controls/placesaver.js"></script>
       <script type="text/javascript" src="src/controls/scrubber.js"></script>
       <script type="text/javascript" src="src/controls/spinner.js"></script>
       <script type="text/javascript" src="src/flippers/instant.js"></script>
       <script type="text/javascript" src="src/flippers/legacy.js"></script>
       <script type="text/javascript" src="src/flippers/scroller.js"></script>
       <script type="text/javascript" src="src/flippers/slider.js"></script>

       <script type="text/javascript" src="UnzipEPUBParser.js"></script>

   </head>
   <body>
       <div id="reader" style="width: 300px; height: 400px"></div>
       <script>
           var test = new UnzipEPUBParser();
           test.initWithPath( 'MyTestBook' );

           var bookData = {
               getComponents: function () {
                   return test.navList;
                   return [
                       'component1.xhtml',
                       'component2.xhtml',
                       'component3.xhtml',
                       'component4.xhtml'
                   ];
               },
               getContents: function () {
                   return test.navPoint;
                   return [
                       {
                           title: "Chapter 1",
                           src: "component1.xhtml"
                       },
                       {
                           title: "Chapter 2",
                           src: "component3.xhtml#chapter-2"
                       }
                   ];
               },
               getComponent: function (componentId) {
                   var raw = test.getFileContent( test.basePath + '/' + test.navMap[componentId]['src'] );
                   if( !raw.status )
                       return null;
                   return raw.data;

                   return {
                       'component1.xhtml':'<h1>Chapter 1</h1><p>Hello world</p>',
                       'component2.xhtml':'<p>Chapter 1 continued.</p>',
                       'component3.xhtml':'<p>Chapter 1 continued again.</p>' + '<h1 id="chapter-2">Chapter 2</h1>' +'<p>Hello from the second chapter.</p>',
                       'component4.xhtml':'<p>THE END.</p>'
                   }[componentId];
               },
               getMetaData: function(key) {
                   return {
                       title: "A book",
                       creator: "Inventive Labs"
                   }[key];
               }
           }

           // Initialize the reader element.
           var reader = Monocle.Reader('reader');

           // Initialize a book object. (Of course we could have just passed it in
           // as the second argument to the reader constructor, which would also
           // obviate the need for the setBook call below. This is the scenic route.)
           var book = Monocle.Book(bookData);

           // Assign the book to the reader and go to the 3rd page.
           reader.setBook(book);
           //reader.moveTo({ page: 1 });
       </script>
   </body>
</html>

@UnzipEPUBParser.js

如此一來只要擺定好東西就能搞定啦！目錄結構：

MyTestBook/
        META-INF/
                container.xml
        ...
index.html
UnzipEPUBParser.js
src/
        book.js
        compat.js
        component.js
        controls/
                ...
        flippers/
                ...
        framer.js
        monocle.js
        place.js
        reader.js
        styles.js