Skip to content

Instantly share code, notes, and snippets.

@sshadmand
Last active Oct 6, 2015
Embed
What would you like to do?
Sample Polymer 1.0 Elements
<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>
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment