gdg-polymer-apod

app.js

/*
 Copyright (c) 2015 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
 */

(function (document) {
    'use strict';

    // Grab a reference to our auto-binding template
    // and give it some initial binding values
    // Learn more about auto-binding templates at http://goo.gl/Dx1u2g
    var app = document.querySelector('#app');

    // Listen for template bound event to know when bindings
    // have resolved and content has been stamped to the page
    app.addEventListener('dom-change', function () {
        console.log('Our app is ready to rock!');
    });

    // See https://github.com/Polymer/polymer/issues/1381
    window.addEventListener('WebComponentsReady', function () {
        // imports are loaded and elements have been registered
    });

    // Close drawer after menu item is selected if drawerPanel is narrow
    app.onMenuSelect = function () {
        var drawerPanel = document.querySelector('#paperDrawerPanel');
        if (drawerPanel.narrow) {
            drawerPanel.closeDrawer();
        }
    };

    app.showImage = true;
})(document);

elements.html

<!--
@license
Copyright (c) 2015 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
-->

<!-- Iron elements -->
<link rel="import" href="../bower_components/iron-flex-layout/classes/iron-flex-layout.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">

<!-- Paper elements -->
<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="../bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="../bower_components/paper-material/paper-material.html">
<link rel="import" href="../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../bower_components/paper-styles/paper-styles-classes.html">
<link rel="import" href="../bower_components/paper-toast/paper-toast.html">
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html">

<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../bower_components/iron-image/iron-image.html">
<link rel="import" href="../bower_components/paper-toggle-button/paper-toggle-button.html">

<!-- Add your elements here -->
<link rel="import" href="../styles/app-theme.html">

<!-- Configure your routes here -->
<link rel="import" href="routing.html">

index.html

<!--
@license
Copyright (c) 2015 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
-->

<!doctype html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="generator" content="Polymer Starter Kit"/>
    <title>Polymer Starter Kit</title>
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

    <!-- Chrome for Android theme color -->
    <meta name="theme-color" content="#303F9F">

    <!-- Web Application Manifest -->
    <link rel="manifest" href="manifest.json">

    <!-- Tile color for Win8 -->
    <meta name="msapplication-TileColor" content="#3372DF">

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="application-name" content="Polymer Starter Kit">
    <link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Polymer Starter Kit">
    <link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png">

    <!-- Tile icon for Win8 (144x144) -->
    <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">

    <!-- build:css styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild-->

    <!-- build:js bower_components/webcomponentsjs/webcomponents-lite.min.js -->
    <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    <!-- endbuild -->

    <!-- will be replaced with elements/elements.vulcanized.html -->
    <link rel="import" href="elements/elements.html">
    <!-- endreplace-->
</head>

<body unresolved class="fullbleed layout vertical">
<span id="browser-sync-binding"></span>
<template is="dom-bind" id="app">

    <paper-drawer-panel id="paperDrawerPanel">
        <div drawer>

            <!-- Drawer Toolbar -->
            <paper-toolbar id="drawerToolbar">
                <span class="paper-font-title">Menu</span>
            </paper-toolbar>

            <!-- Drawer Content -->
            <paper-menu class="list" attr-for-selected="data-route" selected="{{route}}" on-iron-select="onMenuSelect">
                <a data-route="home" href="/">
                    <iron-icon icon="home"></iron-icon>
                    <span>Home</span>
                </a>

                <a data-route="contact" href="/contact">
                    <iron-icon icon="mail"></iron-icon>
                    <span>Contact</span>
                </a>
            </paper-menu>
        </div>
        <paper-header-panel main mode="waterfall-tall">

            <!-- Main Toolbar -->
            <paper-toolbar id="mainToolbar">
                <paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
                <span class="flex"></span>

                <!-- Toolbar icons -->
                <paper-icon-button icon="refresh"></paper-icon-button>
                <paper-icon-button icon="search"></paper-icon-button>

                <!-- Application name -->
                <div class="middle paper-font-display2 app-name">Polymer Starter Kit</div>

                <!-- Application sub title -->
                <div class="bottom title"></div>

            </paper-toolbar>

            <!-- Main Content -->
            <div class="content">
                <iron-pages attr-for-selected="data-route" selected="{{route}}">

                    <section data-route="home">
                        <paper-material elevation="1">
                            <iron-ajax
                                auto
                                url="https://api.nasa.gov/planetary/apod"
                                params='{"api_key":"JGYsVu1tmOXJ2DB5mQc7DoMApvTrULO7csTyODBM"}'
                                handle-as="json"
                                last-response="{{ajaxResponse}}"></iron-ajax>

                            <h4>[[ajaxResponse.title]]</h4>

                            <div>
                                <paper-toggle-button checked="{{showImage}}"></paper-toggle-button> Display Image
                            </div>
                            <br>

                            <iron-image src="[[ajaxResponse.url]]" class="fitted" sizing="[[imageSizing]]" hidden="[[!showImage]]"></iron-image>

                            <p>[[ajaxResponse.explanation]]</p>
                        </paper-material>

                    </section>

                    <section data-route="contact">
                        <paper-material elevation="1">
                            <h2 class="paper-font-display2">Contact</h2>

                            <p>This is the contact section</p>
                        </paper-material>
                    </section>

                </iron-pages>
            </div>
        </paper-header-panel>
    </paper-drawer-panel>

</template>

<!-- build:js scripts/app.js -->
<script src="scripts/app.js"></script>
<!-- endbuild-->
</body>

</html>

main.css

/*
Copyright (c) 2015 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
*/

body {
  background: #fafafa;
  font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #333;
}

.fitted {
    max-width: 100%;
    width: 100%;
    height: 600px;
}