Polymer Japan Meet up

gistfile1.md

[0] => bower.json(ファイル全体上書き)

{
  "name": "handson",
  "main": "index.html",
  "dependencies": {
    "polymer": "Polymer/polymer#^2.0.0",
    "paper-tabs": "PolymerElements/paper-tabs#^2.0.0",
    "paper-input": "PolymerElements/paper-input#^2.0.2",
    "paper-item": "PolymerElements/paper-item#^2.0.0",
    "paper-card": "PolymerElements/paper-card#^2.0.0",
    "iron-icons": "PolymerElements/iron-icons#^2.0.1",
    "iron-icon": "PolymerElements/iron-icon#^2.0.1",
    "google-map": "GoogleWebComponents/google-map#^2.0.2",
    "paper-fab": "PolymerElements/paper-fab#^2.0.0"
  },
  "devDependencies": {
    "web-component-tester": "Polymer/web-component-tester#^6.0.0",
    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
  }
}

[1] => index.html(headerタグ内の一番下へ)

    <style>
      * {
        box-sizing: border-box;
      }
      html, body {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: 0;
        padding: 0;
        border: 0;
        font-family: 'Roboto', Arial, sans-serif;
      }
    </style>

[2] => src/handson-app/handson-app.html(ファイル全体上書き)

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

<dom-module id="handson-app">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
  </template>
  <script>
    /**
     * @customElement
     * @polymer
     */
    class HandsonApp extends Polymer.Element {
      static get is() { return 'handson-app'; }
      static get properties() {
        return {
        };
      }
    }
    window.customElements.define(HandsonApp.is, HandsonApp);
  </script>
</dom-module>

[3] => src/handson-app/handson-app.html(polymer-element.htmlの下)

<link rel="import" href="../../bower_components/google-map/google-map.html">
<link rel="import" href="../../bower_components/google-map/google-map-directions.html">
<link rel="import" href="../../bower_components/font-roboto/roboto.html"> 
<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../../bower_components/iron-icons/maps-icons.html">
<link rel="import" href="../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../bower_components/paper-item/paper-item.html">
<link rel="import" href="../../bower_components/paper-item/paper-icon-item.html">
<link rel="import" href="../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">

[4] => src/handson-app/handson-app.html(template内のスタイルタグの下)

    <google-map map="{{map}}" 
                latitude="37.779"
                longitude="-122.3892"
                zoom="13" 
                api-key="Google MAP API KEYを入力">
    </google-map>

[5] => src/handson-app/handson-app.html(template内のstyleタグの内)

      :host {
        display: block;
        height: 100%;
      }

[6] => src/handson-app/handson-app.html(template内のgoogle-mapの下)

    <google-map-directions map="[[map]]" 
                           start-address="[[start]]" 
                           end-address="[[end]]" 
                           travel-mode="[[travelMode]]" 
                           api-key="Google MAP API KEYを入力">
    </google-map-directions>

[7] => src/handson-app/handson-app.html(template内のgoogle-map-directionsの下)

    <paper-card elevation="2">

    </paper-card>

[8] => src/handson-app/handson-app.html(template内のstyleタグ内)

      paper-card {
        position: absolute;
        bottom: 24px;
        left: 24px;
        z-index: 1;
      }

[9] => src/handson-app/handson-app.html(template内のpaper-card内)

      <paper-icon-item>

      </paper-icon-item>
      <paper-icon-item>

      </paper-icon-item>

[10] => src/handson-app/handson-app.html(template内のpaper-card内)

      <paper-icon-item>
        <iron-icon icon="search" slot="item-icon"></iron-icon>
        <paper-input label="Start address" value="{{start}}" autofocus></paper-input>
      </paper-icon-item>
      <paper-icon-item>
        <iron-icon icon="search" slot="item-icon"></iron-icon>
        <paper-input label="End address" value="{{end}}"></paper-input>
      </paper-icon-item>

[11] => src/handson-app/handson-app.html(template内のpaper-card内)

      <paper-tabs selected="{{travelMode}}" attr-for-selected="label">
        <paper-tab label="DRIVING">
          <iron-icon icon="maps:directions-car"></iron-icon>
          <span>DRIVING</span>
        </paper-tab>
        <paper-tab label="WALKING">
          <iron-icon icon="maps:directions-walk"></iron-icon>
          <span>WALKING</span>
        </paper-tab>
        <paper-tab label="BICYCLING">
          <iron-icon icon="maps:directions-bike"></iron-icon>
          <span>BICYCLING</span>
        </paper-tab>
        <paper-tab label="TRANSIT">
          <iron-icon icon="maps:directions-transit"></iron-icon>
          <span>TRANSIT</span>
        </paper-tab>
      </paper-tabs>

[12] => src/handson-app/handson-app.html(template内のstyleタグ内)

      paper-tabs {
        --paper-tabs-selection-bar-color: #0D47A1;
        margin-top: 16px;
      }
      paper-tab iron-icon {
        margin-right: 10px;
      }
      paper-tab {
        --paper-tab-ink: #BBDEFB;
      }
      paper-tab.iron-selected {
        background: rgba(66, 133, 244, 0.7);
        color: #fff;
      }

[13]

      static get properties() {
        return {
          travelMode: {
            type: String, 
            value: "DRIVING"
          },
          start: {
            type: String,
            value: "SF"
          },
          end: {
            type: String,
            value: "Oakland"
          }
        };
      }