Merge pull request #10 from InfiniteLibrary/toc

Toc

Author: egardner

app/app.scss

@@ -1,5 +1,8 @@
 $family-primary: 'Helvetica Neue', 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, sans-serif;
 $super-color: #ffca29;
+$link-color: #00d1b2;
+$link-hover: darken($link-color, 0.5);
+
 @import '~bulma/bulma.sass';
 
 .input {

app/components/Epub/index.js

@@ -44,6 +44,10 @@ class Epub extends Component {
       }
     });
 
+    this.book.loaded.navigation.then((nav) => {
+      if (this.props.onNavigationReady) this.props.onNavigationReady(nav.toc);
+    });
+
     this.keyListener = (e) => {
       // Left Key
       if ((e.keyCode || e.which) === 37) {
@@ -72,6 +76,24 @@ class Epub extends Component {
     document.removeEventListener('keyup', this.keyListener, false);
   }
 
+  componentWillUpdate(nextProps) {
+    if (nextProps.location !== this.props.location) {
+      this.rendition.display(nextProps.location);
+    }
+
+    if (nextProps.theme !== this.props.theme) {
+      this.rendition.themes.apply(nextProps.theme);
+    }
+
+    if (nextProps.fontSize !== this.props.fontSize) {
+      this.rendition.themes.fontSize(nextProps.fontSize);
+    }
+  }
+
+  display(what) {
+    this.rendition && this.rendition.display(what);
+  }
+
   render() {
     return (
       <div className="epub__container">

app/components/Reader/Reader.scss

@@ -1,5 +1,10 @@
+@import '../../variables.scss';
+
+$toc-menu-width: 300px;
+
 .reader__container {
   background-color: #fcfcfc;
+  padding: 25px;
 }
 
 .reader__controls {
@@ -10,3 +15,28 @@
   width: 100vw;
   z-index: 500;
 }
+
+.reader__toc {
+  background-color: $dark-gray;
+  color: #fff;
+  height: 100vh;
+  -webkit-overflow-scrolling: touch;
+  overflow-y: auto;
+  padding: $base-spacing $small-spacing;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: auto;
+  transform: translateX(-100%);
+  transition: all 0.1s ease-in-out;
+  width: $toc-menu-width;
+  z-index: 600;
+
+  &.is-visible { transform: translateX(0%); }
+
+  &__item {
+    a {}
+    a:hover { color: #fff; }
+  }
+}

app/components/Reader/index.js

@@ -11,19 +11,63 @@ class Reader extends Component {
     this.handleReady = this.handleReady.bind(this);
   }
 
+  _navigationReady(nav) {
+    this.setState({ ...this.state, nav });
+  }
+
+  _onNavClick(item) {
+    this.setState({ ...this.state, location: item.href });
+  }
+
+  handleReady() {
+    this.setState({ ...this.state, isLoading: false });
+  }
+
+  tocToggle() {
+    let navMenu = document.getElementById('toc-nav');
+
+    if (navMenu.classList.contains('is-visible')) {
+      navMenu.classList.remove('is-visible');
+    } else {
+      navMenu.classList.add('is-visible');
+    }
+
+  }
+
   state = {
-    isLoading: true
+    isLoading: true,
+    nav: [],
+    location : 0
   };
 
   handleReady() {
-    this.setState({ isLoading: false });
+    this.setState({ ...this.state, isLoading: false });
   }
 
   render() {
     const { book } = this.props;
     const download = encodeURIComponent(book.download);
     return (
       <div className="reader__container">
+        <div id="toc-nav" className="reader__toc">
+          <ul>
+            <h2>Table of Contents</h2>
+            {
+              this.state.nav.map((item, index) =>
+                <li>
+                  <a key={`navitem_${index}`}
+                     className="reader__toc__item"
+                     onClick={() => {
+                         this._onNavClick(item)
+                         this.tocToggle()
+                       }}>
+                    {item.label}
+                  </a>
+                </li>
+              )
+            }
+          </ul>
+        </div>
         <nav className="nav is-fixed">
           <div className="nav-left">
             <Link to="/" className="nav-item">
@@ -38,17 +82,20 @@ class Reader extends Component {
             </div>
           </div>
           <div className="nav-right">
-            <div className="nav-item">
+            <a className="nav-item" onClick={() => { this.tocToggle()}}>
               <span className="icon">
                 <i className="fa fa-navicon" />
               </span>
-            </div>
+            </a>
           </div>
         </nav>
         {this.state.isLoading && <Loader />}
         <Epub
-          onReady={this.handleReady}
           src={`${getStreamHost()}/${book.id}/${download}/`}
+          onNavigationReady={ this._navigationReady.bind(this) }
+          onLocationChanged={(location) => console.log(location)}
+          onReady={ this.handleReady.bind(this) }
+          location={this.state.location}
         />
       </div>
     );