seed-element.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
-->
<link rel="import" href="../polymer/polymer.html">

<!--
An element providing a solution to no problem in particular.

Example:

    <seed-element></seed-element>

@group Seed Elements
@element seed-element
@demo demo/index.html
@hero hero.svg
-->
<dom-module id="seed-element">

  <style>
    :host {
      display: block;
      box-sizing: border-box;
    }

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

  <template>
    <h1>&lt;seed-element&gt;</h1>
    <content></content>
    <p class="author">
      <img src="{{author.image}}">
      Cheers,<br/>
      <span class="name">{{author.name}}</span>
    </p>
  </template>

</dom-module>

<script>

  Polymer({

    is: 'seed-element',

    properties: {

      /**
       * `fancy` indicates that the element should don a monocle and tophat,
       * while checking its pocket watch.
       */
      fancy: Boolean,

      /**
       * Describes the author of the element, but is really just an excuse to
       * show off JSDoc annotations.
       *
       * @type {{name: string, image: string}}
       */
      author: {
        type: Object,
        // Use `value` to provide a default value for a property, by setting it
        // on your element's prototype.
        //
        // If you provide a function, as we do here, Polymer will call that
        // _per element instance_.
        //
        // We do that to ensure that each element gets its own copy of the
        // value, rather than having it shared across all instances (via the
        // prototype).
        value: function() {
          return {
            name:  'Dimitri Glazkov',
            image: 'http://addyosmani.com/blog/wp-content/uploads/2013/04/unicorn.jpg',
          };
        }
      },

    },

    // Element Lifecycle

    ready: function() {
      // `ready` is called after all elements have been configured, but
      // propagates bottom-up. This element's children are ready, but parents
      // are not.
      //
      // This is the point where you should make modifications to the DOM (when
      // necessary), or kick off any processes the element wants to perform.
    },

    attached: function() {
      // `attached` 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).
    },

    detached: 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`.
    },

    // Element Behavior

    /**
     * The `seed-element-lasers` event is fired whenever `fireLasers` is called.
     *
     * @event seed-element-lasers
     * @detail {{sound: String}}
     */

    /**
     * Sometimes it's just nice to say hi.
     *
     * @param {string} greeting A positive greeting.
     * @return {string} The full greeting.
     */
    sayHello: function(greeting) {
      var response = greeting || 'Hello World!';
      return 'seed-element says, ' + response;
    },

    /**
     * Attempt to destroy this element's enemies with a beam of light!
     *
     * Or, at least, dispatch an event in the vain hope that someone else will
     * do the zapping.
     */
    fireLasers: function() {
      this.fire('seed-element-lasers', {sound: 'Pew pew!'});
    }

  });

</script>