GDG Sunshine Polymer 1.0 Element

README.txt

# git clone  https://github.com/PolymerElements/polymer-starter-kit.git

# cd polymer-starter-kit

# git tag -l
v0.1.0
v0.1.1
v1.0.0
v1.0.1
v1.0.2

# git checkout v1.0.2

# npm install -g gulp bower

# npm install

# bower install

:: NOTE: MAX OS X, error because of low ulimit:
# ulimit -n 
256

:: Setting higher ulimit
::: -n : The maximum number of open file descriptors
::: -u : The maximum number of processes available to a single user
# ulimit -n 1024
# ulimit -u 1024

# gulp serve

localhost:3000
localhost:3001 (browser-sync)

:: Create gdg-sunshine folder in /app/elements
:: Create gdg-sunshine.hmlt file in /app/elements/gdg-sunshine/


:: Add <link rel="import" href="gdg-sunshine/gdg-sunshine.html"> to:
/app/elements/elements.html

:: Edit /app/index.html, adding the <gdg-sunshine></gdg-sunshine> element.

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');


  // gdg-sunshine paper-input default value
  app.zip = 95691;

  app.displayInstalledToast = function() {
    document.querySelector('#caching-complete').show();
  };

  // 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();
    }
  };

})(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/paper-input/paper-input.html">

<!-- Platinum elements -->
<link rel="import" href="../bower_components/platinum-sw/platinum-sw-cache.html">
<link rel="import" href="../bower_components/platinum-sw/platinum-sw-register.html">

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

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

gdg-sunshine.html

<link rel="import" href="/bower_components/polymer/polymer.html">

<link rel="import" href="/bower_components/iron-ajax/iron-ajax.html">

<!--
    REST API : http://api.openweathermap.org/data/2.5/weather
-->

<dom-module id="gdg-sunshine">

    <style>

        :host {
            display: block;
            margin: 16px;
        }
        .card {
            padding: 16px;
            max-width: 400px;
            max-height: 300px;
            background-color: #fff;
            box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.24);
        }
        .sunrise, .sunset {
            margin-top: 16px;
        }
        .weather-icon {
            height: 50px;
            vertical-align: middle;
        }

    </style>

    <template>

        <iron-ajax
                id="weather-ajax"
                method="GET"
                url="http://api.openweathermap.org/data/2.5/weather"
                handle-as="json"
                on-response="handleResponse"
                on-error="handleError">
        </iron-ajax>

        <div class="card">

            <div>
                <span>{{cityName}}</span> (<span>{{zip}}</span>)
            </div>
            <div>
                <img class="weather-icon" src$="{{weatherIconUrl}}"> <span class="description">{{description}}</span>
            </div>
            <div>
                <span>{{temp}}</span>
            </div>
            <div class="sunrise">Sunrise: <span>{{sunrise}}</span></div>
            <div class="sunset">Sunset: <span>{{sunset}}</span></div>
        </div>

    </template>

    <script>

        (function() {

            Polymer({

                is: 'gdg-sunshine',

                /*
                 * Polymer element properties
                 */
                properties: {

                    zip: {
                        type: Number,
                        value: 95691,
                        notify: true // this will trigger the "zip-changed" event
                    }
                },

                /*
                 * Polymer element event listener
                 */
                listeners: {

                    'zip-changed' : 'onChangedZip'
                },

                /*
                 * Polymer 'ready' lifecycle callback
                 */
                ready: function() {

                    this.cityName;
                    this.weatherIconUrl;
                    this.temp;
                    this.description;
                    this.sunrise;
                    this.sunset;

                    if(this.zip) {

                        this.weatherAjax = this.$["weather-ajax"];
                        this.weatherAjax.params = {"zip": this.zip + ",us", "units": "imperial"};
                        this.weatherAjax.generateRequest();
                    }
                },

                /*
                 * Called when the gdg-sunshine element "zip" attribute/property changes
                 */
                onChangedZip: function(event) {

                    // NOTE: "this" references the element

                    var newZip = event.detail.value;

                    if(newZip && 5 === newZip.length) {

                        var weatherAjax = this.$["weather-ajax"];
                        weatherAjax.params = {"zip": newZip + ",us", "units": "imperial"};
                        weatherAjax.generateRequest();
                    }
                },

                /*
                 * Called when the weather ajax call returns
                 */
                handleResponse: function(request) {

                    var res = request.detail.response;
                    var weather = res.weather[0];

                    this.cityName = res.name;
                    this.weatherIconUrl = "http://openweathermap.org/img/w/" + weather.icon + ".png";
                    this.description = weather.description;
                    this.temp = res.main.temp + " F";
                    this.sunrise = (new Date(res.sys.sunrise * 1000)).toLocaleTimeString();
                    this.sunset = (new Date(res.sys.sunset * 1000)).toLocaleTimeString();
                },

                /*
                 * Called when the weather ajax call retruns with an error
                 */
                handleError: function(request, error) {

                    console.error("ERROR: ajax : handleError : ", error);
                }
            });
        })();

    </script>

</dom-module>

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="users" href="/users">
                <iron-icon icon="info"></iron-icon>
                <span>Users</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">

            <!-- GDG Sunshine -->
            <!-- Listens for `input` event and sets "zip" to <input>.value -->
            <paper-input type="number" label="City ZIP Code" value="{{zip::input}}"></paper-input>
            <gdg-sunshine zip="{{zip}}"></gdg-sunshine>
            
            <gdg-sunshine zip="95616"></gdg-sunshine>

            </section>

            <section data-route="users">
              <paper-material elevation="1">
                <h2 class="paper-font-display2">Users</h2>
                <p>This is the users section</p>
                <a href="/users/Rob">Rob</a>
              </paper-material>
            </section>

            <section data-route="user-info">
              <paper-material elevation="1">
                <h2 class="paper-font-display2">
                User:<span>{{params.name}}</span>
                </h2>
                <div>This is <span>{{params.name}}</span>'s section</div>
              </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>

    <paper-toast id="caching-complete"
                 duration="6000"
                 text="Caching complete! This app will work offline.">
    </paper-toast>

    <platinum-sw-register auto-register
                          clients-claim
                          skip-waiting
                          on-service-worker-installed="displayInstalledToast">
      <platinum-sw-cache default-cache-strategy="networkFirst"
                         precache-file="precache.json">
      </platinum-sw-cache>
    </platinum-sw-register>

  </template>

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

</html>