color and stlying for toc complete

IanKBovard · Sep 18, 2018 · cc534af · cc534af
1 parent 29d49e3
commit cc534af
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 35 deletions.
diff --git a/src/book-description.js → src/book-view/book-description.js b/src/book-description.js → src/book-view/book-description.js
diff --git a/src/book-title.js → src/book-view/book-title.js b/src/book-title.js → src/book-view/book-title.js
diff --git a/src/book-view/index.js b/src/book-view/index.js
@@ -0,0 +1,46 @@
+import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
+import '@polymer/iron-ajax/iron-ajax.js';
+import'./book-description.js';
+import'./table-of-contents.js';
+import'./book-title.js';
+
+class BookView extends PolymerElement {
+  static get template() {
+    return html`
+      <style>
+        :host {
+        }
+        .book-data {
+          width: 100%;
+          overflow: hidden;
+          white-space: nowrap;
+        }
+      </style>
+      <iron-ajax
+        auto
+        url="https://d1re4mvb3lawey.cloudfront.net/pg1017/index.json"
+        handle-as="json"
+        on-response="handleResponse">
+      </iron-ajax>
+      <div class="book-data">
+        <book-title title="{{bookData.title}}">
+        </book-title>
+        <book-description isbn="{{bookData.isbn}}" authors="{{bookData.contributors}}">
+        </book-description>
+        <table-of-contents toc="{{bookData.toc}}">
+        </table-of-contents>
+      </div>
+    `;
+  }
+    handleResponse(res){
+    this.bookData = res.detail.response
+    console.log(this.bookData.toc)
+    return
+  }
+    constructor() {
+    super();
+    this.bookData = {}
+  }
+}
+
+window.customElements.define('book-view', BookView);
diff --git a/src/table-of-contents.js → src/book-view/table-of-contents.js b/src/table-of-contents.js → src/book-view/table-of-contents.js
@@ -35,15 +35,33 @@ class TableOfContents extends PolymerElement {
         .toc-content {
           position: relative;
           padding-left: 30px;
-
+          white-space: nowrap;
+        }
+        ol {
+          display: block;
+          list-style-type: decimal;
+        }
+        li {
+          display: list-item;
+        }
+        a {
+          color: inherit;
+          text-decoration: none;
+        }
+        a:hover {
+          background-color: #FFD700;
         }
       </style>
       <div class="toc-container">
         <span class="toc-text">Contents</span>
         <div class="toc-content">
-          <template is="dom-repeat" items="[[toc]]">
-            <p>{{item}}</p>
-          </template>
+          <ol>
+            <template is="dom-repeat" items="[[toc]]">
+                  <li>
+                  <a href="{{item.file}}">Title should go here</a>
+                  </li>
+            </template>
+          </ol>
         </div>
       </div>
     `;

diff --git a/src/my-app.js b/src/my-app.js
@@ -10,10 +10,7 @@
 
 import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
 import { setPassiveTouchGestures, setRootPath } from '@polymer/polymer/lib/utils/settings.js';
-import '@polymer/iron-ajax/iron-ajax.js';
-import'./book-description.js';
-import'./table-of-contents.js';
-import'./book-title.js';
+import './book-view/index.js';
 // Gesture events like tap and track generated from touch will not be
 // preventable, allowing for better scrolling performance.
 setPassiveTouchGestures(true);
@@ -28,36 +25,10 @@ class MyApp extends PolymerElement {
       <style>
         :host {
         }
-        .book-data {
-          width: 100%;
-          overflow: hidden;
-          white-space: nowrap;
-        }
       </style>
-      <iron-ajax
-        auto
-        url="https://d1re4mvb3lawey.cloudfront.net/pg1017/index.json"
-        handle-as="json"
-        on-response="handleResponse">
-      </iron-ajax>
-      <div class="book-data">
-        <book-title title="{{bookData.title}}">
-        </book-title>
-        <book-description isbn="{{bookData.isbn}}" authors="{{bookData.contributors}}">
-        </book-description>
-        <table-of-contents toc="{{bookData.toc}}">
-        </table-of-contents>
-      </div>
+      <book-view></book-view>
     `;
   }
-    handleResponse(res){
-    this.bookData = res.detail.response
-    return
-  }
-    constructor() {
-    super();
-    this.bookData = {}
-  }
 }
 
 window.customElements.define('my-app', MyApp);