Sample Polymer 1.0 Elements

Audio Player

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

<!--
Plays audio files.

Example:

    <audio-player></audio-player>

@demo
-->
<dom-module id="audio-player">

  <style>
    :host {

    }
  </style>



</dom-module>

<script>

  Polymer({

    is: 'audio-player',
    /**
     * Fired when audio loading is complete no matter what the result is error or success.
     * @event audio-load-complete
     */
    properties: {

      audioUrl: {
        type: String,
        computed: "_autoLoad(audioUrl)"
      },

      audioElement: {
        type: Object,
        value: null
      },

    },

    _autoLoad: function (audioUrl) {
      this.preLoad(audioUrl);
      console.log("AUTO LOAD");
      return audioUrl;
    },

    preLoad: function(audio_url) {
      if ( (this.audioElement === null || this.audioElement.src !== audio_url) && audio_url) {
        var audioElement = new Audio();
        audioElement.setAttribute('src', audio_url);

        var self = this;
        audioElement.addEventListener('canplay', function(){
          self.fire("audio-load-complete", "canplay");
        });

        // trying to figure out how to get safari to know data loaded
        // canplay does not work on ios
        // audioElement.addEventListener('loadeddata', function(){
        //   self.fire("audio-load-complete", "loadeddata");
        // });
        audioElement.addEventListener('ended', function(){
          self.fire("audio-load-complete", "ended");
        });
        audioElement.addEventListener('error', function(){
          self.fire("audio-load-complete", "error");
        });

        this.audioElement = audioElement;

        this.play();
        this.audioElement.pause();

      }
    },

    play: function(audio_url) {
      // console.log("ASKED TO PLAY", audio_url, this.audioUrl);
      if (audio_url !== undefined) {
        this.preLoad(audio_url);
      }
      this.audioElement.play();
    }



  });

</script>

Fake Element

<link rel="import" href="../../bower_components/polymer/polymer.html">
<!--
An element providing a solution to no problem in particular.

Example:

    <fake-element></fake-element>

@demo
-->
<dom-module id="fake-element">

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

  <template>
      <h1>Header</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: 'fake-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,
        value: function() {
          return {
            name:  'Dimitri Glazkov',
            image: 'http://addyosmani.com/blog/wp-content/uploads/2013/04/unicorn.jpg',
          };
        }
      },

    },

    /**
     * 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 'fake-element says, ' + response;
    },

    fireLasers: function() {
      this.fire('fake-element-lasers', {sound: 'Pew pew!'});
    }

  });

</script>