EWT FA 2015 - WK11: Polymer

ewt-element.html

<!-- Import polymer component as basic building block. -->
<link rel="import" href="bower_components/polymer/polymer.html">

<!-- Declare the custom element. -->
<dom-module id="ewt-element">
  <!-- Create a template (no need for an id). -->
  <template>
    <style>
      :host {
        display: block;
        box-sizing: border-box;
      }

      .author img {
        display: block;
        float: left;
        margin-right: 5px;
        max-height: 100px;
        max-width: 100px;
      }
    </style>

    <h1>&lt;ewt-element&gt;</h1>
    <!-- Content placeholders work just like standard web components. -->
    <content select=".title"></content>
    <!--
    When combining properties and standard values in an attribute, you need to
    use the '$=' operator. This tells Polymer to concatenate the property.
    -->
    <p class="author" style$="color: {{ color }}">
      <!--
      Double curly braces denote a data-bound property. The author.image value
      of the element will automatically be inserted below.
      -->
      <img src="{{ author.image }}">
      Cheers,<br/>
      <!-- More data-bound properties. -->
      <span id="authorName" class="name">{{ author.name }}</span>
      My score is {{score}}.
    </p>
    <content select=".shoutout"></content>
  </template>

  <script>
    // Register the custom element.
    Polymer({
      // This is the tag name of the element, and should match the id of the
      // <dom-module> above.
      is: 'ewt-element',

      // These are public properties of the element.
      properties: {
        // A simple property just has a name and a type.
        fancy: Boolean,
        color: String,
        // A complex property.
        score: {
          // Specify the data type.
          type: Number,
          // Specify the default value.
          value: function() {
            return 0;
          }
        },
        author: {
          type: Object,
          value: function() {
            return {
              name:  'Hans Moleman',
              image: 'https://upload.wikimedia.org/wikipedia/en/e/e7/Hans_Moleman.png',
            };
          }
        },
      },

      // Called when the element's DOM is ready. Can generally be used in place
      // of 'createdCallback'.
      ready: function() {
        // Access any element in the template with an id via this.$ hash.
        this.$.authorName.setAttribute('style', 'font-weight: bold;')

        // To find nodes in template, use this.$$.
        this.$$('h1').setAttribute('style', 'color: red;');

        // Note that $ and $$ are *not* jQuery. I'm not sure why Google decided
        // to use the same symbol.
      },

      // Other lifecycle methods are available, too:

      // Just like 'createdCallback' in native web components, this is called
      // when the element has been created.
      created: function() {
      },

      // Fires once the element and its parents have been inserted
      // into a document.
      //
      // This is a good place to perform any work related to your element's
      // visual state or active behavior (measuring sizes, beginning animations,
      // loading resources, etc).
      attached: function() {
      },

      // The analog to `attached`, `detached` fires when the element has been
      // removed from a document.
      //
      // Use this to clean up anything you did in `attached`.
      detached: function() {
      },

      // A behavioral function of the element.
      sayHello: function(greeting) {
        var response = greeting || 'Hello World!';
        return 'ewt-element says, ' + response;
      },

      // Dispatch/broadcast an event. Outside scripts can listen for this event
      // and take action when it occurs.
      fireLasers: function() {
        this.fire('ewt-element-lasers', {sound: 'Pew pew!'});
      }
    });
  </script>
</dom-module>