Last active
November 23, 2015 15:09
-
-
Save jpetto/fa3517ab182931b4481c to your computer and use it in GitHub Desktop.
EWT FA 2015 - WK11: Polymer
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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><ewt-element></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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment