<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<title>unquote</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="http://www.polymer-project.org/components/platform/platform.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/font-roboto/roboto.html">
<link rel="import" href="http://www.polymer-project.org/components/core-header-panel/core-header-panel.html">
<link rel="import" href="http://www.polymer-project.org/components/core-toolbar/core-toolbar.html">
<link rel="import" href="http://www.polymer-project.org/components/paper-tabs/paper-tabs.html">
<link rel="import" href="post-card.html">
<link rel="import" href="post-list.html">
</head>
<body unresolved touch-action="auto">
<core-header-panel>
<core-toolbar>
<paper-tabs id="tabs" selected="all" self-end>
<paper-tab name="all">ALL</paper-tab>
<paper-tab name="favorites">FAVORITES</paper-tab>
</paper-tabs>
</core-toolbar>
<div class="container" layout vertical center>
<post-card>
<img width="70" height="70" src="http://lorempixel.com/200/200/sports">
<h2>Static User 1</h2>
<p>I'm composing with shadow DOM!</p>
</post-card>
<post-card>
<img width="70" height="70" src="http://lorempixel.com/100/100/sports">
<h2>Static User 2</h2>
<p>I'm composing with shadow DOM!</p>
</post-card>
<post-list show="all"></post-list>
</div>
<!-- main page content will go here -->
</core-header-panel>
<script>
var tabs = document.querySelector('paper-tabs');
tabs.addEventListener('core-select', function() {
console.log("Selected: " + tabs.selected);
});
</script>
</body>
</html>
// Code goes here
/* Styles go here */
html,body {
height: 100%;
margin: 0;
background-color: #E5E5E5;
font-family: 'RobotoDraft', sans-serif;
}
.container {
width: 80%;
margin: 50px auto;
}
core-header-panel {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
core-toolbar {
background: #03a9f4;
color: white;
}
#tabs {
width: 100%;
margin: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
paper-tab {
cursor: pointer;
}
post-card {
margin-bottom: 20px;
}
post-card:last-child {
margin-bottom: 0;
}
# A Test for the polymer tutorial
### What it shows:
1. How to import an run polymer elements.
2. How to make ajax calls
### What elements are used:
1. offical elements
- *core-header-panel*
- *core-toolbar*
- *paper-tabs*
- *core-ajax*
2. custom elements
- *post-card*:
> renders post data
- *post-list*:
> uses the post-service to get data from a server and creates a list of posts
- *post-service*:
> uses core-ajax to get data from a server and publishs this data
!Important
----------
The body needs 100% height!
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="http://www.polymer-project.org/components/core-icon-button/core-icon-button.html">
<polymer-element name="post-card">
<template>
<style>
:host {
display: block;
position: relative;
background-color: white;
padding: 20px;
width: 100%;
font-size: 1.2rem;
font-weight: 300;
}
.card-header {
margin-bottom: 10px;
}
polyfill-next-selector {
content: '.card-header h2'; }
.card-header ::content h2 {
margin: 0;
font-size: 1.8rem;
font-weight: 300;
}
polyfill-next-selector { content: '.card-header img'; }
.card-header ::content img {
width: 70px;
border-radius: 50%;
margin: 10px;
}
core-icon-button {
position: absolute;
top: 3px;
right: 3px;
fill: #636363;
}
:host([favorite]) core-icon-button {
fill: #da4336;
}
</style>
<div class="card-header" layout horizontal center>
<content select="img"></content>
<content select="h2"></content>
</div>
<core-icon-button
id="favicon"
icon="favorite"
on-tap="{{favoriteTapped}}">
</core-icon-button>
<content></content>
</template>
<script>
Polymer({
publish: {
favorite: {
value: false,
reflect: true
}
},
favoriteTapped: function(event, detail, sender) {
console.log("Clicked");
this.favorite = !this.favorite;
this.fire('favorite-tap');
}
});
</script>
</polymer-element>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="post-service.html">
<link rel="import" href="post-card.html">
<polymer-element name="post-list" attributes="show">
<template>
<style>
:host {
display: block;
width: 100%;
}
post-card {
margin-bottom: 30px;
}
</style>
<post-service id="service" posts="{{posts}}"></post-service>
<div layout vertical center>
<template repeat="{{post in posts}}">
<post-card>
<img src="{{post.avatar}}" width="70" height="70">
<h2>{{post.username}}</h2>
<p>{{post.text}}</p>
</post-card>
</template>
</div>
</template>
<script>
Polymer({});
</script>
</polymer-element>
[
{
"uid": 1,
"text" : "Have you heard about the Web Components revolution?",
"username" : "Eric",
"avatar" : "http://lorempixel.com/100/100/sports",
"favorite": false
},
{
"uid": 2,
"text" : "Loving this Polymer thing.",
"username" : "Rob",
"avatar" : "http://lorempixel.com/150/150/sports",
"favorite": false
},
{
"uid": 3,
"text" : "So last year...",
"username" : "Dimitri",
"avatar" : "http://lorempixel.com/210/210/sports",
"favorite": false
},
{
"uid": 4,
"text" : "Pretty sure I came up with that first.",
"username" : "Ada",
"avatar" : "http://lorempixel.com/220/220/sports",
"favorite": false
},
{
"uid": 5,
"text" : "Yo, I heard you like components, so I put a component in your component.",
"username" : "Grace",
"avatar" : "http://lorempixel.com/250/250/sports",
"favorite": false
},
{
"uid": 6,
"text" : "Centralize, centrailize.",
"username" : "John",
"avatar" : "http://lorempixel.com/260/260/sports",
"favorite": false
},
{
"uid": 7,
"text" : "Has anyone seen my cat?",
"username" : "Zelda",
"avatar" : "http://lorempixel.com/270/270/sports",
"favorite": false
},
{
"uid": 8,
"text" : "Decentralize!",
"username" : "Norbert",
"avatar" : "http://lorempixel.com/280/280/sports",
"favorite": false
}
]
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="http://www.polymer-project.org/components/core-ajax/core-ajax.html">
<!--
An array of post objects, with the following format:
<table border="0">
<tr>
<td><code>uid</code></td>
<td>Number</td>
<td>Unique ID for this post.</td>
</tr>
<tr>
<td><code>username</code></td>
<td>String</td>
<td>Poster's username.</td>
</tr>
<tr>
<td><code>avatar</code></td>
<td>String</td>
<td>URL for the user's avatar.</td>
</tr>
<tr>
<td><code>text</code></td>
<td>String</td>
<td>Post text.</td>
</tr>
<tr>
<td><code>favorite</code></td>
<td>Boolean</td>
<td>True if the current user favorited this post.</td>
</tr>
</table>
@attribute posts
@type Array
@default []
-->
<polymer-element name="post-service" attributes="posts">
<template>
<style>
:host {
display: none;
}
</style>
<core-ajax id="ajax"
auto
url="posts.json"
on-core-response="{{postsLoaded}}"
handleAs="json">
</core-ajax>
</template>
<script>
Polymer('post-service', {
created: function() {
this.posts = [];
},
postsLoaded: function() {
// Make a copy of the loaded data
console.log("Posts loaded");
this.posts = this.$.ajax.response.slice(0);
},
/**
* Update the service with the current favorite value.
* (Two-way data binding updates the favorite value
* stored locally.) If this was a real service, this
* method would do something useful.
*
* @method setFavorite
* @param uid {Number} Unique ID for post.
* @param isFavorite {Boolean} True if the user marked this post as a favorite.
*/
setFavorite: function(uid, isFavorite) {
// no service backend, just log the change
console.log('Favorite changed: ' + uid + ", now: " + isFavorite);
}
});
</script>
</polymer-element>