Merge pull request #1 from IanKBovard/tests

Tests

README.md

@@ -1,3 +1,9 @@
+Ian Bovard Code Challenge
+
+Work can be seen in the book-view folder, the my-app.js file, and the test folder in the book-view.html file.
+
+Comments in each file have been added to clarify what each component is for, and if I had any difficulties.
+
 # Polymer App Toolbox - Starter Kit
 
 [![Build Status](https://travis-ci.org/Polymer/polymer-starter-kit.svg?branch=master)](https://travis-ci.org/Polymer/polymer-starter-kit)

index.html

@@ -96,7 +96,7 @@
         font-family: "Roboto", "Noto", sans-serif;
         line-height: 1.5;
         min-height: 100vh;
-        background-color: #eeeeee;
+        background-color: white;
       }
     </style>
   </head>

package.json

@@ -18,6 +18,7 @@
     "@polymer/iron-ajax": "^3.0.1",
     "@polymer/iron-flex-layout": "^3.0.0-pre.15",
     "@polymer/iron-iconset-svg": "^3.0.0-pre.15",
+    "@polymer/iron-image": "^3.0.1",
     "@polymer/iron-media-query": "^3.0.0-pre.15",
     "@polymer/iron-pages": "^3.0.0-pre.15",
     "@polymer/iron-selector": "^3.0.0-pre.15",

src/book-view/book-description.js

@@ -0,0 +1,55 @@
+/**
+ * @license
+ * Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
+ * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+ * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+ * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+ * Code distributed by Google as part of the polymer project is also
+ * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+ */
+
+// This component is responsible for rendering the Cover, ISBN, and Authors of the book. Data is passed into this component from the main book view component index.js
+import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
+import '@polymer/iron-image/iron-image.js';
+
+class BookDescription extends PolymerElement {
+  static get template() {
+    return html`
+      <style>
+        :host {
+          margin-left: 1%;
+          margin-right: 1%;
+          float: left;
+        }
+        iron-image {
+          border-radius: 5px;
+        }
+        .book-details {
+          font-family: Aspira-Bold, Helvetica, Arial, Sans-serif;
+          color: #000;
+          font-size: 12px
+
+        }
+        .meta-desc {
+          font-weight: Bold;
+        }
+
+      </style>
+      <div>
+        <iron-image src="https://d1re4mvb3lawey.cloudfront.net/pg1017/cover.jpg"></iron-image>
+        <div class="book-details">
+          <span class="meta-desc">ISBN:</span>
+          <span class=meta-data>{{isbn}}</span>
+        </div>
+        <div class="book-details">
+          <template is="dom-repeat" items="[[authors]]">
+            <span class="meta-desc">Authors:</span>
+            <span class="meta-data">{{item}}</span>
+          </template>
+        </div>
+      </div>
+    `;
+  }
+}
+
+window.customElements.define('book-description', BookDescription);

src/book-title.js → src/book-view/book-title.js

@@ -8,20 +8,34 @@
  * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  */
 
+
+// This component is responsible for rendering the Title of the book. Data is passed into this component from the main book view component index.js
 import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
-import './shared-styles.js';
 
 class BookTitle extends PolymerElement {
   static get template() {
     return html`
-      <style include="shared-styles">
+      <style>
         :host {
           text-align: left;
         }
+        .title {
+          font-family: Aspira-Medium, Helvetica, Arial, Sans-serif;
+          font-size: 25px;
+          color: #333;
+          margin-left: 1%;
+        }
+        .title-container {
+          border-right: 2px solid #ccc;
+          padding-right: 15px;
+          margin-right: 7px;
+        }
       </style>
-      <div>
-        <h1>{{title}}</h1>
-      </div>
+      <h1>
+        <span class="title-container">
+          <span class="title">{{title}}</span>
+        </span>
+      </h1>
     `;
   }
 }

src/book-view/index.js

@@ -0,0 +1,48 @@
+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';
+
+
+//This is the main book view component. It is responsible for making the AJAX request and passing relevent data to each component.
+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);

src/book-view/table-of-contents.js

@@ -0,0 +1,78 @@
+/**
+ * @license
+ * Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
+ * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+ * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+ * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+ * Code distributed by Google as part of the polymer project is also
+ * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+ */
+
+// This component is responsible for rendering the Table of Contents. Data is passed into this component from the main book view component index.js
+import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
+
+class TableOfContents extends PolymerElement {
+  static get template() {
+    return html`
+      <style>
+        :host {
+        }
+        .toc-container {
+          position: relative;
+          display: inline-block;
+          width: 500px;
+          height: 252px;
+          font-family: Aspira-Bold, Helvetica, Arial, Sans-serif;
+          color: #000;
+        }
+        .toc-text {
+          font-weight: bold;
+          font-size: 18px;
+          position: relative;
+          display: inline-block;
+          padding-left: 20px;
+          padding-top: 20px;
+        }
+        .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">
+          <ol>
+            <template is="dom-repeat" items="[[toc]]">
+                  <li>
+                  <a href="{{item.file}}">Title should go here</a>
+                  </li>
+            </template>
+          </ol>
+        </div>
+      </div>
+    `;
+  }
+}
+
+window.customElements.define('table-of-contents', TableOfContents);
+
+// NOTES
+
+// The title property for the table of contents is an empty string. If it were not, between the a tag where the string "Title should go here" I would put {{item.title}}
+
+// Links do not work, but are using the correct property item.file

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);
@@ -29,33 +26,9 @@ class MyApp extends PolymerElement {
         :host {
         }
       </style>
-      <iron-ajax
-        auto
-        url="https://d1re4mvb3lawey.cloudfront.net/pg1017/index.json"
-        handle-as="json"
-        on-response="handleResponse">
-      </iron-ajax>
-      <div>
-        <book-title title="{{bookData.title}}">
-        </book-title>
-        <book-description isbn="{{bookData.isbn}}" authors="{{bookData.contributors}}">
-        </book-description>
-        <table-of-contents tableOfContents="{{tableOfContents}}">
-        </table-of-contents>
-      </div>
+      <book-view></book-view>
     `;
   }
-    handleResponse(res){
-    this.bookData = res.detail.response
-    this.tableOfContents = this.bookData.toc
-    console.log(this)
-    return
-  }
-    constructor() {
-    super();
-    this.bookData = {}
-    this.tableOfContents = []
-  }
 }
 
 window.customElements.define('my-app', MyApp);