demo-calling-card.html

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

<!-- Iron elements -->
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../iron-image/iron-image.html">
<link rel="import" href="../iron-pages/iron-pages.html">

<!-- Paper elements -->
<link rel="import" href="../paper-card/paper-card.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../paper-item/paper-item-body.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../paper-item/paper-icon-item.html">

<!-- Google elements -->
<link rel="import" href="../google-map/google-map.html">

<!-- Custom elements -->
<link rel="import" href="content-icons.html">

<!--
`demo-calling-card`

@demo demo/calling-card/index.html 
-->

<dom-module id="demo-calling-card">

  <template>

    <style>
      :host {
        display: block;
        font-family: "Roboto","Helvetica","Arial",sans-serif;
      }
      a {
        text-decoration: none;
      }
      paper-card {
        width: 100%;
        max-width: 900px;
        min-width: 372px;
      }
      paper-icon-item.widget_maps {
        padding-right: 0;
      }
      paper-item-body {
        color: #616161;
        font-size: 18px;
        line-height: 28px;
      }
      google-map {
        width: 100%;
        height: 100%;
        min-width: 300px;
        min-height: 150px;
      }
      iron-image {
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
      paper-icon-button {
        color: #616161;
      }
      iron-pages {
        width: 100%;
      }
    </style>

    <paper-card role="listbox">

      <!-- header -->
      <template is="dom-if" if="[[!header.type]]">
        <paper-item>
          <paper-item-body two-line>
            <div style="font-weight: 600;">[[header.title]]</div>
            <div secondary>[[header.secondary]]</div>
          </paper-item-body>
        </paper-item>
      </template>
      <template is="dom-if" if="[[header.type]]">
        <paper-icon-item>
          <iron-pages
            item-icon
            attr-for-selected="name"
            selected="[[header.type]]"
            fallback-selection="default">
            <iron-image
              name="profile"
              fade
              sizing="contain"
              src="[[header.media]]"></iron-image>
            <iron-icon
              name="default"
              icon="[[header.icon]]"></iron-icon>
          </iron-pages>
          <paper-item-body two-line>
            <div style="font-weight: 600;">[[header.title]]</div>
            <div secondary>[[header.secondary]]</div>
          </paper-item-body>
        </paper-icon-item>
      </template>

      <!-- items -->
      <template is="dom-repeat" items="[[items]]">
        <paper-icon-item class$="[[item.type]]">

          <iron-pages
            item-icon
            attr-for-selected="name"
            selected="[[item.type]]"
            fallback-selection="default">
            <iron-image
              name="profile"
              fade
              sizing="contain"
              src="[[item.media]]"></iron-image>
            <iron-icon
              name="default"
              icon="[[item.icon]]"></iron-icon>
          </iron-pages>

          <template is="dom-if" if="[[!_isWidget(item.type)]]">
            <paper-item-body two-line>
              <div>[[item.title]]</div>
              <div secondary>[[item.secondary]]</div>
            </paper-item-body>
          </template>
          <template is="dom-if" if="[[_isWidget(item.type)]]">
            <iron-pages
              attr-for-selected="name"
              selected="[[item.type]]">
              <google-map name="widget_maps"
                  disable-default-ui
                  draggable="false"
                  disable-zoom
                  zoom="9"
                  latitude="[[item.latitude]]"
                  longitude="[[item.longitude]]"
                  api-key="AIzaSyA4GgzXlkM8l2DULdguj8IIgDOgm0KyT-M">
                <google-map-marker
                    latitude="[[item.latitude]]"
                    longitude="[[item.longitude]]"
                    title="[[item.title]]"></google-map-marker>
              </google-map>
              <div name="widget_social">
                <template is="dom-repeat" items="[[item.links]]" as="link">
                  <a href="[[link.path]]" tabindex="-1">
                    <paper-icon-button icon="[[link.icon]]"></paper-icon-button>
                  </a>
                </template>
              </div>
          </template>

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

    </paper-card>

  </template>

  <script>
    Polymer({

      is: 'demo-calling-card',

      properties: {
        header: {
          type: Object
        },
        items: {
          type: Array
        }
      },

      behaviors: [],

      listeners: {},

      _isWidget: function(type) {
        return type.match("^widget_") ? true : false;
      }

    });
  </script>

</dom-module>