yetangitu/epub.js
1
0
Fork 0
mirror of https://github.com/futurepress/epub.js.git synced 2025-10-04 15:09:16 +02:00
Code Issues Releases Wiki Activity

poylmer example updates, chapter event details

Browse source
This commit is contained in:
Fred Chasen 2013-07-18 18:46:01 -07:00
parent 61fa786325
commit ea4e08d6d6
189 changed files with 11716 additions and 259 deletions
Download patch file Download diff file Expand all files Collapse all files

9
build/epub.js
View file

@ -1055,7 +1055,8 @@ EPUBJS.EpubCFI = function(cfiStr){
EPUBJS.EpubCFI.prototype.generateChapter = function(spineNodeIndex, pos, id) {
var spineNodeIndex = spineNodeIndex + 1,
var pos = parseInt(pos),
spineNodeIndex = spineNodeIndex + 1,
cfi = '/'+spineNodeIndex+'/';
cfi += (pos + 1) * 2;
@ -1739,8 +1740,8 @@ EPUBJS.Renderer.prototype.setIframeSrc = function(url){
renderer.currentLocationCfi = renderer.getPageCfi();
renderer.trigger("renderer:chapterDisplayed");
renderer.book.trigger("renderer:chapterDisplayed");
renderer.trigger("renderer:chapterDisplayed", renderer.currentChapter);
renderer.book.trigger("renderer:chapterDisplayed", renderer.currentChapter);
renderer.visible(true);
@ -1795,7 +1796,7 @@ EPUBJS.Renderer.prototype.formatSpread = function(){
this.spreadWidth = (this.colWidth + this.gap) * divisor;
if(this.bodyEl) this.bodyEl.style.margin = 0;
// if(this.bodyEl) this.bodyEl.style.margin = 0;
// this.bodyEl.style.fontSize = localStorage.getItem("fontSize") || "medium";
//-- Clear Margins

4
build/epub.min.js vendored
View file

File diff suppressed because one or more lines are too long

4
demo/js/epub.min.js vendored
View file

File diff suppressed because one or more lines are too long

2
examples/annotator.html
View file

@ -11,7 +11,7 @@
<link rel="stylesheet" href="basic.css">
<!-- EPUBJS Renderer -->
<script src="/build/epub.min.js"></script>
<script src="../build/epub.min.js"></script>
<!-- jQuery -->
<script src="../libs/jquery/jquery-1.9.0.js"></script>

2
examples/basic.html
View file

@ -10,7 +10,7 @@
<!-- EPUBJS Renderer -->
<script src="/build/epub.min.js"></script>
<script src="../build/epub.min.js"></script>
<style type="text/css">

2
examples/contained.html
View file

@ -10,7 +10,7 @@
<link rel="stylesheet" href="basic.css">
<!-- EPUBJS Renderer -->
<script src="/build/epub.min.js"></script>
<script src="../build/epub.min.js"></script>
<!-- Zip JS -->
<script src="/demo/js/libs/zip.min.js"></script>

2
examples/custom-elements.html
View file

@ -12,7 +12,7 @@
<script src="../libs/polymer/custom-elements.min.js"></script>
<!-- EPUBJS Renderer -->
<script src="/build/epub.min.js"></script>
<script src="../build/epub.min.js"></script>
<link rel="stylesheet" href="basic.css">

2
examples/fixed.html
View file

@ -10,7 +10,7 @@
<!-- EPUBJS Renderer -->
<script src="/build/epub.min.js"></script>
<script src="../build/epub.min.js"></script>
<link rel="stylesheet" href="basic.css">

2
examples/hypothesis.html
View file

@ -10,7 +10,7 @@
<!-- EPUBJS Renderer -->
<script src="/build/epub.min.js"></script>
<script src="../build/epub.min.js"></script>
<link rel="stylesheet" href="basic.css">

18
examples/polymer/epub-controls.html
View file

@ -1,18 +0,0 @@
<polymer-element name="epub-controls" attributes="items">
<template>
<div id="controls">
<a id="network"><img id="store" src="../../demo/img/save.png" save="../../demo/img/save.png" data-saved="../../demo/img/saved.png"></a>
<a id="setting"><img id="settings" src="../../demo/img/settings.png"></a>
<a id="bookmark"><img id="bookmarks" src="../../demo/img/star.png"></a>
</div>
</template>
<script>
Polymer('epub-controls', {
ready: function() {
}
});
</script>
</polymer-element>

84
examples/polymer/epub-js.html
View file

@ -1,84 +0,0 @@
<script src="/build/epub.min.js"></script>
<script type="text/javascript">
//-- Setups
</script>
<polymer-element name="epub-js" attributes="src width height restore spreads">
<template>
<style>
@host {
* {
display: block;
}
}
#area {
width: 100%;
height: 100%;
}
iframe {
border: none;
}
</style>
<div id="area"></div>
</template>
<script>
Polymer('epub-js', {
src: '',
ready: function() {
},
prevPage: function() {
if (this.Book) this.Book.prevPage();
},
nextPage: function() {
if (this.Book) this.Book.nextPage();
},
srcChanged: function() {
var src = this.src,
width = this.width || false,
height = this.height || false,
spreads = this.spreads != null ? true : false,
restore = this.restore != null ? true : false;
if(this.Book) this.Book.destroy();
this.Book = new EPUBJS.Book(src, {
width: width,
height: height,
spreads : spreads,
restore : restore
});
this.events();
this.Book.renderTo(this.$.area);
},
events: function() {
var element = this;
var ready = new CustomEvent('book-ready', { "bubbles" : true, "cancelable" : true }),
displayed = new CustomEvent('book-displayed', { "bubbles" : true, "cancelable" : true }),
unloaded = new CustomEvent('book-unloaded', { "bubbles" : true, "cancelable" : true });
this.Book.on("book:ready", function() {
element.dispatchEvent(ready);
});
this.Book.on("renderer:chapterDisplayed", function() {
element.dispatchEvent(displayed);
});
this.Book.on("renderer:chapterUnloaded", function() {
element.dispatchEvent(unloaded);
});
},
hi: function(){
console.log("confused")
}
});
</script>
</polymer-element>

45
examples/polymer/epub-reader.html
View file

@ -1,45 +0,0 @@
<link rel="import" href="epub-sidebar.html">
<link rel="import" href="epub-titlebar.html">
<link rel="import" href="epub-viewer.html">
<polymer-element name="epub-reader" attributes="src">
<template>
<link rel="stylesheet" href="../../demo/css/main.css">
<link rel="stylesheet" href="../../demo/css/popup.css">
<style>
@host {
}
epub-viewer {
width: 80%;
height: 80%;
margin: 0 auto;
max-width: 1250px;
}
</style>
<epub-sidebar></epub-sidebar>
<div id="main">
<epub-titlebar></epub-titlebar>
<epub-viewer on-book-ready="bookReady" src="{{src}}"></epub-viewer>
</div>
</template>
<script>
Polymer('epub-reader', {
src: '',
ready: function() {
},
bookReady: function(){
console.log("book is ready")
}
});
</script>
</polymer-element>

BIN
examples/polymer/epub-reader/assets/add.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 660 B

BIN
examples/polymer/epub-reader/assets/fullscreen.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3 KiB

BIN
examples/polymer/epub-reader/assets/settings.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.5 KiB

53
examples/polymer/epub-reader/epub-controls.html Normal file
View file

@ -0,0 +1,53 @@
<polymer-element name="epub-controls" attributes="items">
<template>
<style>
@host {
* {
background: #4e4e4e;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 25px;
padding: 10px 0;
display: block;
}
}
#controls a {
float: left;
margin-left: 12px;
opacity: .5;
}
#controls img:hover {
opacity: .8;
}
#controls img:active {
opacity: 1;
}
</style>
<div id="controls">
<!-- <a id="network"><img id="store" src="../../../demo/img/save.png" save="../../../demo/img/save.png" data-saved="../../../demo/img/saved.png"></a>
<a id="setting"><img id="settings" src="../../../demo/img/settings.png"></a>
<a id="bookmark"><img id="bookmarks" src="../../../demo/img/star.png"></a> -->
</div>
</template>
<script>
Polymer('epub-controls', {
ready: function() {
}
});
</script>
</polymer-element>

108
examples/polymer/epub-reader/epub-js.html Normal file
View file

@ -0,0 +1,108 @@
<script src="../../../build/epub.min.js"></script>
<script type="text/javascript">
//-- Setups
</script>
<polymer-element name="epub-js" attributes="src chapter width height restore spreads">
<template>
<style>
@host {
* {
display: block;
}
}
#area {
width: 100%;
height: 100%;
}
iframe {
border: none;
}
</style>
<div id="area"></div>
</template>
<script>
Polymer('epub-js', {
src: '',
shown: false,
ready: function() {
},
prevPage: function() {
if (this.Book) this.Book.prevPage();
},
nextPage: function() {
if (this.Book) this.Book.nextPage();
},
goto: function(url) {
if (this.Book) this.Book.goto(url);
},
srcChanged: function() {
var src = this.src,
width = this.width || false,
height = this.height || false,
spreads = this.spreads != null ? true : false,
restore = this.restore != null ? true : false;
if(this.Book) this.Book.destroy();
this.Book = new EPUBJS.Book(src, {
width: width,
height: height,
spreads : spreads,
restore : restore
});
this.events();
this.Book.renderTo(this.$.area);
},
chapterChanged: function() {
if(this.Book) this.Book.goto(this.chapter);
console.log(this.chapter)
},
events: function() {
var element = this;
this.Book.on("book:ready", function() {
var ready = new CustomEvent('book-ready', { "bubbles" : true, "cancelable" : true });
element.dispatchEvent(ready);
});
this.Book.on("renderer:chapterDisplayed", function(e) {
if(element.shown == false){
var bookdisplayed = new CustomEvent('book-displayed', { "bubbles" : true, "cancelable" : true });
element.dispatchEvent(bookdisplayed);
shown = true;
}
var chapterdisplayed = new CustomEvent('chapter-displayed', { "bubbles" : true, "cancelable" : true, "detail" : {"chapter" : e} });
element.dispatchEvent(chapterdisplayed);
});
this.Book.on("renderer:chapterUnloaded", function(e) {
var unloaded = new CustomEvent('chapter-unloaded', { "bubbles" : true, "cancelable" : true });
element.dispatchEvent(unloaded);
});
this.Book.getMetadata().then(function(meta){
var metadata = new CustomEvent('book-metadata', { "bubbles" : true, "cancelable" : true, "detail" : {"meta" : meta} });
element.dispatchEvent(metadata);
});
this.Book.getToc().then(function(toc){
var toc = new CustomEvent('book-toc', { "bubbles" : true, "cancelable" : true, "detail": {"toc" : toc} });
element.dispatchEvent(toc);
});
}
});
</script>
</polymer-element>

155
examples/polymer/epub-reader/epub-reader.html Normal file
View file

@ -0,0 +1,155 @@
<link rel="import" href="epub-sidebar.html">
<link rel="import" href="epub-titlebar.html">
<link rel="import" href="epub-viewer.html">
<!-- <link rel="import" href="../polymer-ui-elements/polymer-ui-toggle-button/polymer-ui-toggle-button.html"> -->
<link rel="import" href="../polymer-ui-elements/polymer-ui-icon-button/polymer-ui-icon-button.html">
<link rel="import" href="../polymer-ui-elements/polymer-ui-toolbar/polymer-ui-toolbar.html">
<link rel="import" href="../toolkit-ui/elements/g-menu-item.html">
<link rel="import" href="../toolkit-ui/elements/g-menu.html">
<link rel="import" href="../toolkit-ui/elements/g-menu-button.html">
<link rel="stylesheet" href="../polymer-ui-elements/basic.css">
<polymer-element name="epub-reader" attributes="src">
<template>
<!-- <link rel="stylesheet" href="../../demo/css/main.css"> -->
<!-- <link rel="stylesheet" href="../ ../../demo/css/popup.css"> -->
<style>
@host {
* {
background: #6b6b6b;
}
}
epub-viewer {
width: 80%;
height: 80%;
margin: 2.5% auto;
max-width: 1250px;
}
#main {
position: absolute;
width: 100%;
height: 100%;
border-radius: 5px;
background: #fff;
overflow: hidden;
-webkit-transition: -webkit-transform .5s;
-moz-transition: -moz-transform .5s;
-moz-box-shadow: inset 0 0 50px rgba(0,0,0,.08);
-webkit-box-shadow: inset 0 0 50px rgba(0,0,0,.08);
box-shadow: inset 0 0 50px rgba(0,0,0,.08);
}
#main.closed {
-webkit-transform: translate(300px, 0);
-moz-transform: translate(300px, 0);
}
#opener {
padding: 10px 10px;
float: left;
}
#opener #open {
width: 25px;
}
polymer-ui-toolbar {
font-size: 16px !important;
background-color: none;
border: none !important;
padding: 0 6px;
}
</style>
<epub-sidebar id="sidebar"
toc="{{ toc }}"
current="{{ chapter }}"
on-chapter-selected="chapterSelected" >
</epub-sidebar>
<div id="main">
<polymer-ui-toolbar>
<!-- <polymer-ui-icon-button icon="drawer"></polymer-ui-icon-button> -->
<polymer-ui-icon-button icon="menu" on-click="toggleDrawer"></polymer-ui-icon-button>
<epub-titlebar flex author="{{ author }}" title="{{ title }}"></epub-titlebar>
<!-- <polymer-ui-icon-button icon="add"></polymer-ui-icon-button> -->
<!-- <polymer-ui-icon-button icon="settings"></polymer-ui-icon-button> -->
<g-menu-button responsive="true" selectedClass="" src="assets/settings.png" valign="right" on-activate="menuActivate">
<g-menu-item src="assets/add.png" on-tap="publishElement">Bookmark</g-menu-item>
<g-menu-item src="assets/fullscreen.png" on-tap="clearElement">Fullscreen</g-menu-item>
</g-menu-button>
</g-toolbar>
</polymer-ui-toolbar>
<!-- <polymer-ui-toggle-button></polymer-ui-toggle-button> -->
<!-- <div id="opener"> -->
<!-- <a id="open"><img src="../../../demo/img/menu-icon.png" data-close="../../../demo/img/close.png" data-open="../../../demo/img/menu-icon.png"></a> -->
<!-- </div> -->
<epub-viewer id="viewer"
src="{{ src }}"
chapter="{{ chapter }}"
on-book-ready="bookReady"
on-book-metadata="bookMetadata"
on-book-toc="bookToc"
on-chapter-displayed="chapterDisplayed" >
</epub-viewer>
</div>
</template>
<script>
Polymer('epub-reader', {
src: '',
drawOpen: false,
ready: function() {
},
bookReady: function(e){
// console.log("book is ready")
},
bookMetadata: function(e){
this.meta = e.detail.meta;
this.title = this.meta.bookTitle;
this.author = this.meta.creator;
document.title = this.title+" – "+this.meta.creator;
},
bookToc: function(e){
this.toc = e.detail.toc;
},
toggleDrawer: function(e) {
this.drawOpen = !this.drawOpen;
this.$.main.classList.toggle("closed");
},
chapterSelected: function(e) {
// this.chapter = e.detail.url;
this.$.viewer.goto(e.detail.url);
this.$.main.classList.toggle("closed");
},
chapterDisplayed: function(e) {
this.chapter = e.detail.chapter.id;
}
});
</script>
</polymer-element>

0
examples/polymer/epub-settings.html → examples/polymer/epub-reader/epub-settings.html
View file

38
examples/polymer/epub-reader/epub-sidebar.html Normal file
View file

@ -0,0 +1,38 @@
<link rel="import" href="epub-controls.html">
<link rel="import" href="epub-settings.html">
<link rel="import" href="epub-toc.html">
<polymer-element name="epub-sidebar" attributes="toc current">
<template>
<style>
@host {
* {
display: block;
background: #6b6b6b;
position: absolute;
top: 0;
width: 300px;
height: 100%;
-webkit-transition: -webkit-transform .3s;
-moz-transition: -moz-transform .3s;
overflow: hidden;
}
}
</style>
<!-- <epub-controls></epub-controls> -->
<epub-toc items="{{ toc }}" current="{{ current }}"></epub-toc>
<!-- <epub-setting></epub-setting> -->
</template>
<script>
Polymer('epub-controls', {
ready: function() {
}
});
</script>
</polymer-element>

44
examples/polymer/epub-reader/epub-titlebar.html Normal file
View file

@ -0,0 +1,44 @@
<polymer-element name="epub-titlebar" attributes="author title">
<template>
<style>
@host {
* {
/*height: 8%;*/
min-height: 20px;
padding: 10px 0 10px 0;
margin: 0 50px 0 50px;
text-align: center;
color: #4f4f4f;
font-weight: 100;
font-family: Georgia, "Times New Roman", Times, serif;
opacity: .5;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
display: block;
}
*:hover {
opacity: 1;
}
}
#book-title {
font-weight: 600;
}
</style>
<span id="book-title">{{ title }}</span>
<span id="title-seperator">&nbsp;&nbsp;–&nbsp;&nbsp;</span>
<span id="author">{{ author }}</span>
</template>
<script>
Polymer('epub-titlebar', {
ready: function() {
}
});
</script>
</polymer-element>

144
examples/polymer/epub-reader/epub-toc.html Normal file
View file

@ -0,0 +1,144 @@
<polymer-element name="epub-toc" attributes="items current">
<template>
<style>
@host {
* {
overflow-x: hidden;
overflow-y: auto;
width: 300px;
height: 100%;
/*visibility: hidden;*/
-webkit-transition: visibility 0 ease .5s;
-moz-transition: visibility 0 ease .5s;
display: block;
}
}
#sidebar.open #toc {
overflow-y: auto;
visibility: visible;
-webkit-transition: visibility 0 ease 0;
-moz-transition: visibility 0 ease 0;
}
#toclist > ul{
margin-top: 15px;
margin-bottom: 50px;
padding-left: 20px;
display: block;
}
#toclist li {
margin-bottom:10px;
width: 225px;
font-family: Georgia, "Times New Roman", Times, serif;
list-style: none;
text-transform: capitalize;
}
#toclist li:active,
#toclist li.currentChapter
{
list-style: none;
}
#toclist a {
color: #AAA;
text-decoration: none;
}
#toclist a.chapter {
font-size: 1em;
}
#toclist a.section {
font-size: .8em;
}
#toclist li.currentChapter > a,
#toclist li a:hover {
color: #f1f1f1
}
#toclist li.openChapter > a,
#toclist li a:hover {
color: #E2E2E2;
}
#toclist li ul {
padding-left:10px;
margin-top: 8px;
display: none;
}
#toclist li.currentChapter > ul,
#toclist li.openChapter > ul {
display: block;
}
#toclist h3 {
display: inline-block;
color: #ccc;
margin: 0;
padding: 0;
margin: 15px 0 0 20px;
}
</style>
<div id="toclist">
<h3>Table of Contents</h3>
<ul>
<template id="tocTemplate" repeat="{{ items }}">
<li id="toc-{{ id }}">
<a href="#/{{ href }}" ref="{{ href }}" on-click="selectChapter" class="toc_link{{ type }}">{{ label }}</a>
<ul>
<template ref="tocTemplate" repeat="{{ subitems }}"></template>
</ul>
</li>
</template>
</ul>
</div>
</div>
</template>
<script>
Polymer('epub-toc', {
selectedItem: false,
ready: function() {
},
itemsChanged: function() {
// console.log("toc", this.items)
},
selectChapter: function(e){
var selected = new CustomEvent('chapter-selected', {
"bubbles" : true,
"cancelable" : true,
"detail": {
"url" : e.toElement.getAttribute("ref")
}
});
this.dispatchEvent(selected);
if(this.selectedItem) this.selectedItem.classList.remove("currentChapter");
},
currentChanged: function() {
this.selectedItem = this.shadowRoot.getElementById("toc-"+this.current);
this.selectedItem.classList.add("currentChapter");
}
});
</script>
</polymer-element>

45
examples/polymer/epub-viewer.html → examples/polymer/epub-reader/epub-viewer.html
View file

@ -37,6 +37,7 @@
color: #777;
}
.arrow.active,
.arrow:active {
color: #000;
}
@ -45,7 +46,7 @@
position: absolute;
width: 1px;
border-right: 1px #000 solid;
height: 80%;
height: 82%;
z-index: 1;
left: 50%;
top: 10%;
@ -66,28 +67,30 @@
margin: -33px 0 0 -33px;
}
</style>
<div id="divider"></div>
<div id="prev" on-click="prev" class="arrow">‹</div>
<epub-js id="book" src="{{ src }}" restore spreads
<epub-js id="book" restore spreads
src="{{ src }}"
chapter="{{ chapter }}"
on-book-ready="bookReady"
on-book-displayed="bookDisplayed"
on-book-unloaded="bookUnloaded"
></epub-js>
on-book-unloaded="bookUnloaded" >
</epub-js>
<div id="next" on-click="next" class="arrow">›</div>
<div id="loader"><img src="../../demo/img/loader.gif"></div>
<div id="loader"><img src="../../../demo/img/loader.gif"></div>
</template>
<script>
Polymer('epub-viewer', {
src: '',
ready: function() {
// this.$.book.addEventListener("ready", this.bookReady.bind(this), false);
// this.$.book.addEventListener("bookDisplayed", this.bookDisplayed.bind(this), false);
// this.$.book.addEventListener("bookUnloaded", this.bookUnloaded.bind(this), false);
document.addEventListener('keydown', this.arrowKeys.bind(this), false);
},
prev: function() {
this.$.book.prevPage();
@ -106,8 +109,32 @@
},
srcChanged: function() {
//-- change epub src
},
goto: function(url){
this.$.book.goto(url);
},
arrowKeys: function(e){
if (e.keyCode == 37) {
this.$.book.prevPage();
this.$.prev.classList.add("active");
this.lock = true;
setTimeout(function(){
this.lock = false;
this.$.prev.classList.remove("active");
}.bind(this), 100);
return false;
}
if (e.keyCode == 39) {
this.$.book.nextPage();
this.$.next.classList.add("active");
this.lock = true;
setTimeout(function(){
this.lock = false;
this.$.next.classList.remove("active");
}.bind(this), 100);
return false;
}
}
});

22
examples/polymer/epub-sidebar.html
View file

@ -1,22 +0,0 @@
<link rel="import" href="epub-controls.html">
<link rel="import" href="epub-settings.html">
<link rel="import" href="epub-toc.html">
<polymer-element name="epub-sidebar" attributes="items">
<template>
<div id="sidebar">
<epub-controls></epub-controls>
<epub-toc items="{{ toc }}"></epub-toc>
<epub-setting></epub-setting>
</div>
</template>
<script>
Polymer('epub-controls', {
ready: function() {
}
});
</script>
</polymer-element>

22
examples/polymer/epub-titlebar.html
View file

@ -1,22 +0,0 @@
<polymer-element name="epub-titlebar" attributes="items">
<template>
<div id="opener">
<a id="open"><img src="../../demo/img/menu-icon.png" data-close="../../demo/img/close.png" data-open="../../demo/img/menu-icon.png"></a>
</div>
<div id="titlebar">
<span id="book-title"></span>
<span id="title-seperator">&nbsp;&nbsp;–&nbsp;&nbsp;</span>
<span id="chapter-title"> </span>
</div>
</template>
<script>
Polymer('epub-settings', {
ready: function() {
}
});
</script>
</polymer-element>

30
examples/polymer/epub-toc.html
View file

@ -1,30 +0,0 @@
<polymer-element name="epub-toc" attributes="items">
<template>
<div id="toc">
<ul>
<template id="tocTemplate" repeat="{{ toc }}">
<li id="toc-{{ id }}">
<a href="{{ href }}" class="toc_link{{ type }}">{{ label }}</a>
<ul>
<template ref="tocTemplate" repeat="{{ subitems }}"></template>
</ul>
<li>
</template>
</ul>
</div>
</div>
</template>
<script>
Polymer('epub-toc', {
src: '',
ready: function() {
}
});
</script>
</polymer-element>

4
examples/polymer/index.html
View file

@ -6,7 +6,7 @@
<meta charset="UTF-8">
<script src="../../libs/polymer/polymer.min.js"></script>
<link rel="import" href="epub-reader.html">
<link rel="import" href="epub-reader/epub-reader.html">
<link rel="stylesheet" href="../../demo/css/normalize.css">
@ -14,7 +14,7 @@
</style>
</head>
<body>
<body style="background: #6b6b6b;">
<epub-reader id="reader" src="/demo/moby-dick/"></epub-reader>
</body>
</html>

9
examples/polymer/polymer-elements/AUTHORS Normal file
View file

@ -0,0 +1,9 @@
# Names should be added to this file with this pattern:
#
# For individuals:
# Name <email address>
#
# For organizations:
# Organization <fnmatch pattern>
#
Google Inc. <*@google.com>

27
examples/polymer/polymer-elements/LICENSE Normal file
View file

@ -0,0 +1,27 @@
// Copyright (c) 2012 The Polymer Authors. All rights reserved.
//
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are
// met:
//
// * Redistributions of source code must retain the above copyright
// notice, this list of conditions and the following disclaimer.
// * Redistributions in binary form must reproduce the above
// copyright notice, this list of conditions and the following disclaimer
// in the documentation and/or other materials provided with the
// distribution.
// * Neither the name of Google Inc. nor the names of its
// contributors may be used to endorse or promote products derived from
// this software without specific prior written permission.
//
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

23
examples/polymer/polymer-elements/PATENTS Normal file
View file

@ -0,0 +1,23 @@
Additional IP Rights Grant (Patents)
"This implementation" means the copyrightable works distributed by
Google as part of the Polymer project.
Google hereby grants to You a perpetual, worldwide, non-exclusive,
no-charge, royalty-free, irrevocable (except as stated in this section)
patent license to make, have made, use, offer to sell, sell, import,
transfer and otherwise run, modify and propagate the contents of this
implementation of Polymer, where such license applies only to those
patent claims, both currently owned or controlled by Google and acquired
in the future, licensable by Google that are necessarily infringed by
this implementation of Polymer. This grant does not include claims
that would be infringed only as a consequence of further modification of
this implementation. If you or your agent or exclusive licensee
institute or order or agree to the institution of patent litigation
against any entity (including a cross-claim or counterclaim in a
lawsuit) alleging that this implementation of Polymer or any code
incorporated within this implementation of Polymer constitutes
direct or contributory patent infringement, or inducement of patent
infringement, then any patent rights granted to you under this License
for this implementation of Polymer shall terminate as of the date
such litigation is filed.

30
examples/polymer/polymer-elements/polymer-ajax/index.html Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<title>polymer-ajax</title>
<script src="../../polymer/polymer.js"></script>
<link rel="import" href="polymer-ajax.html">
</head>
<body>
<polymer-ajax auto url="http://gdata.youtube.com/feeds/api/videos/"
params='{"alt":"json", "q":"chrome"}'
handleAs="json"></polymer-ajax>
<template repeat="{{response.feed.entry}}">
<div>{{title.$t}}</div>
</template>
<script>
document.addEventListener('WebComponentsReady', function() {
var ajax = document.querySelector("polymer-ajax");
ajax.addEventListener("polymer-response",
function(e) {
document.querySelector('template').model = {
response: e.detail.response
};
}
);
});
</script>
</body>
</html>

179
examples/polymer/polymer-elements/polymer-ajax/polymer-ajax.html Normal file
View file

@ -0,0 +1,179 @@
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<!--
/**
* @module Polymer Elements
*/
/**
* polymer-ajax can be used to perform XMLHttpRequests.
*
* Example:
*
* <polymer-ajax auto url="http://gdata.youtube.com/feeds/api/videos/"
* params='{"alt":"json", "q":"chrome"}'
* handleAs="json"
* on-polymer-response="handleResponse">
* </polymer-ajax>
*
* @class polymer-ajax
*/
/**
* Fired when a response is received.
*
* @event polymer-response
*/
/**
* Fired when an error is received.
*
* @event polymer-error
*/
/**
* Fired whenever a response or an error is received.
*
* @event polymer-complete
*/
-->
<link rel="import" href="polymer-xhr.html">
<polymer-element name="polymer-ajax" attributes="url handleAs auto params response">
<script>
Polymer('polymer-ajax', {
/**
* The URL target of the request.
*
* @attribute url
* @type string
* @default ''
*/
url: '',
/**
* Specifies what data to store in the 'response' property, and
* to deliver as 'event.response' in 'response' events.
*
* One of:
*
* `text`: uses XHR.responseText
*
* `xml`: uses XHR.responseXML
*
* `json`: uses XHR.responseText parsed as JSON
*
* @attribute handleAs
* @type string
* @default 'text'
*/
handleAs: '',
/**
* If true, automatically performs an Ajax request when either url or params has changed.
*
* @attribute auto
* @type boolean
* @default false
*/
auto: false,
/**
* Parameters to send to the specified URL, as JSON.
*
* @attribute params
* @type string (JSON)
* @default ''
*/
params: '',
/**
* Returns the response object.
*
* @attribute response
* @type Object
* @default null
*/
ready: function() {
this.xhr = document.createElement('polymer-xhr');
},
response: '',
receive: function(response, xhr) {
if (this.isSuccess(xhr)) {
this.processResponse(xhr);
} else {
this.error(xhr);
}
this.complete(xhr);
},
isSuccess: function(xhr) {
var status = xhr.status || 0;
return !status || (status >= 200 && status < 300);
},
processResponse: function(xhr) {
var response = this.evalResponse(xhr);
this.response = response;
this.fire('polymer-response', {response: response, xhr: xhr});
},
error: function(xhr) {
var response = xhr.status + ': ' + xhr.responseText;
this.fire('polymer-error', {response: response, xhr: xhr});
},
complete: function(xhr) {
this.fire('polymer-complete', {response: xhr.status, xhr: xhr});
},
evalResponse: function(xhr) {
return this[(this.handleAs || 'text') + 'Handler'](xhr);
},
xmlHandler: function(xhr) {
return xhr.responseXML;
},
textHandler: function(xhr) {
return xhr.responseText;
},
jsonHandler: function(xhr) {
var r = xhr.responseText;
try {
return JSON.parse(r);
} catch (x) {
return r;
}
},
urlChanged: function() {
if (!this.handleAs) {
var ext = String(this.url).split('.').pop();
switch (ext) {
case 'json':
this.handleAs = 'json';
break;
}
}
this.autoGo();
},
paramsChanged: function() {
this.autoGo();
},
autoChanged: function() {
this.autoGo();
},
// TODO(sorvell): multiple side-effects could call autoGo
// during one micro-task, use a job to have only one action
// occur
autoGo: function() {
if (this.auto) {
this.goJob = this.job(this.goJob, this.go, 0);
}
},
/**
* Performs an Ajax request to the url specified.
*
* @method go
*/
go: function() {
var args = {};
args.params = this.params || null;
if (args.params && typeof(args.params) == 'string') {
args.params = JSON.parse(args.params);
}
args.callback = this.receive.bind(this);
args.url = this.url;
return args.url && this.xhr.request(args);
}
});
</script>
</polymer-element>

96
examples/polymer/polymer-elements/polymer-ajax/polymer-xhr.html Normal file
View file

@ -0,0 +1,96 @@
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<!--
/**
* @module Polymer Elements
*/
/**
* polymer-xhr can be used to perform XMLHttpRequests.
* Example:
*
* <polymer-xhr id="xhr"></polymer-xhr>
* ...
* this.$.xhr.request({url: url, params: params, callback: callback});
*
* @class polymer-xhr
*/
-->
<polymer-element name="polymer-xhr">
<template>
<style>
@host {
* {
display: none;
}
}
</style>
</template>
<script>
Polymer('polymer-xhr', {
makeReadyStateHandler: function(xhr, callback) {
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
callback && callback.call(null, xhr.response, xhr);
}
};
},
setRequestHeaders: function(xhr, headers) {
if (headers) {
for (var name in headers) {
xhr.setRequestHeader(name, headers[name]);
}
}
},
toQueryString: function(params) {
var r = [];
for (var n in params) {
var v = params[n];
n = encodeURIComponent(n);
r.push(v == null ? n : (n + '=' + encodeURIComponent(v)));
}
return r.join('&');
},
/**
* Sends a HTTP request to the server and returns the XHR object.
*
* @method request
* @param {Object} inOptions
* @param {String} inOptions.url The url to which the request is sent.
* @param {String} inOptions.method The HTTP method to use, default is GET.
* @param {boolean} inOptions.sync By default, all requests are sent asynchronously.
* To send synchronous requests, set to true.
* @param {Object} inOptions.params Data to be sent to the server.
* @param {Object} inOptions.body The content for the request body for POST method.
* @param {Object} inOptions.headers HTTP request headers.
* @param {String} inOptions.responseType The response type. Default is 'text'.
* @param {Object} inOptions.callback Called when request is completed.
* @returns {Object} XHR object.
*/
request: function(options) {
var xhr = new XMLHttpRequest();
var url = options.url;
var method = options.method || 'GET';
var async = !options.sync;
var params = this.toQueryString(options.params);
if (params && method == 'GET') {
url += (url.indexOf('?') > 0 ? '&' : '?') + params;
}
if (options.responseType) {
xhr.responseType = options.responseType;
}
xhr.open(method, url, async);
this.makeReadyStateHandler(xhr, options.callback);
this.setRequestHeaders(options.headers);
xhr.send(method == 'POST' ? (options.body || params) : null);
if (!async) {
xhr.onreadystatechange(xhr);
}
return xhr;
}
});
</script>
</polymer-element>

86
examples/polymer/polymer-elements/polymer-animation/index.html Normal file
View file

@ -0,0 +1,86 @@
<!DOCTYPE html>
<html>
<head>
<title>Polymer Animation Components</title>
<link rel="import" href="polymer-animation.html">
<link rel="import" href="polymer-animation-group.html">
<link rel="import" href="polymer-blink.html">
<link rel="import" href="polymer-bounce.html">
<link rel="import" href="polymer-fadein.html">
<link rel="import" href="polymer-fadeout.html">
<link rel="import" href="polymer-flip.html">
<link rel="import" href="polymer-shake.html">
<script src="../../polymer/polymer.js"></script>
<style>
body {
text-align: center;
font-family: Helvetica, sans-serif;
}
div#target {
display: inline-block;
background-color: dimgrey;
border-radius: 5px;
padding: 5px 10px;
margin: 50px;
font-size: 30px;
color: white;
}
div.animations > * {
display: inline-block;
background-color: darkgrey;
border-radius: 5px;
padding: 5px 10px;
margin: 5px;
color: white;
}
</style>
</head>
<body>
<div id="target">animated!</div>
<div class="animations">
<polymer-animation duration="1">
raw
<polymer-animation-prop name="opacity" easing="ease-in-out">
<polymer-animation-keyframe value="1"></polymer-animation-keyframe>
<polymer-animation-keyframe value="0.3"></polymer-animation-keyframe>
<polymer-animation-keyframe value="1"></polymer-animation-keyframe>
</polymer-animation-prop>
</polymer-animation>
<polymer-animation-group type="seq">
raw group
<polymer-animation duration="0.3">
<polymer-animation-prop name="opacity" easing="ease-in-out">
<polymer-animation-keyframe value="1"></polymer-animation-keyframe>
<polymer-animation-keyframe value="0.3"></polymer-animation-keyframe>
<polymer-animation-keyframe value="1"></polymer-animation-keyframe>
</polymer-animation-prop>
</polymer-animation>
<polymer-animation duration="0.3">
<polymer-animation-prop name="transform" easing="ease-in-out">
<polymer-animation-keyframe value="scale(1)"></polymer-animation-keyframe>
<polymer-animation-keyframe value="scale(1.2)"></polymer-animation-keyframe>
<polymer-animation-keyframe value="scale(1)"></polymer-animation-keyframe>
</polymer-animation-prop>
</polymer-animation>
</polymer-animation-group>
<polymer-bounce duration="1">bounce</polymer-bounce>
<polymer-shake>shake</polymer-shake>
<polymer-shake duration="Infinity">shake forever</polymer-shake>
<polymer-flip>flip X</polymer-flip>
<polymer-flip axis="y">flip Y</polymer-flip>
<polymer-blink>blink</polymer-blink>
<polymer-fadein>fade in</polymer-fadein>
<polymer-fadeout>fade out</polymer-fadeout>
</div>
<script>
document.addEventListener('WebComponentsReady', function() {
document.querySelector('.animations').addEventListener('click',
function(e) {
var animation = e.target;
animation.target = target;
animation.play();
});
});
</script>
</body>
</html>

100
examples/polymer/polymer-elements/polymer-animation/polymer-animation-group.html Normal file
View file

@ -0,0 +1,100 @@
<link rel="import" href="polymer-animation.html">
<polymer-element name="polymer-animation-group" extends="polymer-animation" on-animationchange="onAnimationChange">
<script>
(function() {
var ANIMATION_GROUPS = {
'par': ParGroup,
'seq': SeqGroup
};
/**
* @module Animation
*/
/**
* Component for a group of animations.
*
* A fade in and move animation in sequence:
*
* <polymer-animation-group type="seq">
* <polymer-animation>
* <polymer-animation-prop name="opacity">
* <polymer-animation-keyframe value="0.5" offset="0"></polymer-animation-keyframe>
* <polymer-animation-keyframe value="1" offset="1"></polymer-animation-keyframe>
* <polymer-animation-prop>
* </polymer-animation>
* <polymer-animation>
* <polymer-animation-prop name="transform">
* <polymer-animation-keyframe value="translateX(0)" offset="0"></polymer-animation-keyframe>
* <polymer-animation-keyframe value="translateX(100px)" offset="1"></polymer-animation-keyframe>
* <polymer-animation-prop>
* </polymer-animation>
* </polymer-animation-group>
* @class polymer-animation-group
*/
Polymer('polymer-animation-group', {
/**
* If specified the target will be assigned to all child animations.
* @property target
* @type HTMLElement|Node
* @optional
*/
publish: {
targetSelector: '',
target: null,
duration: null,
/**
* Group type. 'par' for parallel and 'seq' for sequence.
* @property type
* @type String
*/
type: 'par'
},
ready: function() {
// TODO: need to do this for now.
this.super();
},
makeAnimation: function() {
return new ANIMATION_GROUPS[this.type](this.childAnimations, this.timingProps);
},
completeApply: function() {
this.doOnChildren(function(c) {
c.completeApply();
});
Platform.flush();
this.super();
},
onAnimationChange: function(inEvent, inSender) {
if (inSender !== this) {
this.asyncApply();
}
},
typeChanged: function() {
this.asyncApply();
},
targetChanged: function() {
this.doOnChildren(function(c) {
c.target = this.target;
}.bind(this));
},
doOnChildren: function(inFn) {
var children = this.children;
if (!children.length) {
children = this.webkitShadowRoot ? this.webkitShadowRoot.childNodes : [];
}
Array.prototype.forEach.call(children, function(c) {
// TODO <template> in the way
c.apply && inFn(c);
}, this);
},
get childAnimations() {
var list = [];
this.doOnChildren(function(c) {
if (c.animation) {
list.push(c.animation);
}
});
return list;
}
});
})();
</script>
</polymer-element>

41
examples/polymer/polymer-elements/polymer-animation/polymer-animation-keyframe.html Normal file
View file

@ -0,0 +1,41 @@
<polymer-element name="polymer-animation-keyframe" attributes="offset value easing">
<script>
/**
* Defines the value at a keyframe for the containing `polymer-animation-prop`.
* @class polymer-animation-keyframe
*/
/**
* From 0 to 1.
* @property offset
* @type Number
* @required
*/
/**
* Property value at the animation offset.
* @property value
* @type String
* @required
*/
/**
* @property easing
* @type String
*/
Polymer('polymer-animation-keyframe', {
get properties() {
var props = {
// TODO bug in webanimations polyfill
value: String(this.value) || "",
};
var more = this.offset !== null || this.easing;
if (this.offset !== null) {
props.offset = this.offset;
}
if (this.easing) {
props.timingFunction = this.easing;
}
return more ? props : String(this.value);
}
});
</script>
</polymer-element>

25
examples/polymer/polymer-elements/polymer-animation/polymer-animation-prop.html Normal file
View file

@ -0,0 +1,25 @@
<link rel="import" href="polymer-animation-keyframe.html">
<polymer-element name="polymer-animation-prop" attributes="name">
<script>
/**
* An animated property. Its children should be `<polymer-animation-keyframe>`
* elements specifying the keyframe values.
*
* Declaring an property to move down and then right:
*
* <polymer-animation-prop name="transform">
* <polymer-animation-keyframe offset="0" value="translate(0,0)"></polymer-animation-keyframe>
* <polymer-animation-keyframe offset="0.5" value="translate(0,100px)"></polymer-animation-keyframe>
* <polymer-animation-keyframe offset="1" value="translate(100px,100px)"></polymer-animation-keyframe>
* </polymer-animation-prop>
* @class polymer-animation-prop
*/
/**
* CSS property name.
* @property name
* @type String
* @required
*/
Polymer('polymer-animation-prop');
</script>
</polymer-element>

295
examples/polymer/polymer-elements/polymer-animation/polymer-animation.html Normal file
View file

@ -0,0 +1,295 @@
<link rel="import" href="web-animations.html">
<link rel="import" href="polymer-animation-keyframe.html">
<link rel="import" href="polymer-animation-prop.html">
<polymer-element name="polymer-animation">
<script>
(function() {
function findTarget(inSelector, inNode) {
var p = inNode;
var target;
while (p && !p.host && p !== document) {
p = p.parentNode;
}
if (p) {
target = p.querySelector(inSelector);
}
if (!target && p.host) {
target = findTarget(inSelector, p.host);
}
return target;
};
function toNumber(value, allowInfinity) {
return (allowInfinity && value === 'Infinity') ? Number.POSITIVE_INFINITY : Number(value);
};
/**
* WebAnimations module.
* @module Animation
* @main animation
* @example toolkitchen/labs/animation2/grid-fade.html
* @example toolkitchen/labs/animation2/group.html
*/
/**
* Component for a single animation.
*
* A animation component to fade out an element:
*
* <polymer-animation id="fadeout">
* <polymer-animation-prop name="opacity">
* <polymer-animation-keyframe value="0" offset="0"></polymer-animation-keyframe>
* <polymer-keyframe value="1" offset="1"></polymer-animation-keyframe>
* <polymer-animation-prop>
* </polymer-animation>
* @class polymer-animation
*/
/**
* Fired when an animation completes
* @event complete
*/
Polymer('polymer-animation', {
publish: {
/**
* The node being animated.
* @property target
* @type HTMLElement|Node
*/
target: null,
/**
* Selector for the node being animated.
* @property targetSelector
* @type String
*/
targetSelector: null,
// animation
/**
* Animation properties specified as a dictionary of
* <css properties>:<array of values>. For example,
* `{opacity: ['0','1']}` specifies animating the opacity
* from 0 to 1.
* The values must be strings.
* (https://github.com/web-animations/web-animations-js/issues/178)
* @property properties
* @type Object
*/
properties: null,
//accumulate: null, // not working in polyfill
/**
* The composition behavior. "replace", "add" or "merge".
* @property composite
* @type String
*/
composite: 'replace',
// timing
/**
* Animation duration in milliseconds or 'infinity'.
* @property duration
* @type Number|'Infinity'
*/
duration: 0.5,
/**
* "none", "forwards", "backwards" or "both".
* @property fillMode
* @type String
*/
fillMode: 'forwards',
/**
* A transition timing function.
* @property easing
* @type String
*/
easing: 'linear',
/**
* Number of iterations into the timed item in which to begin
* the animation. e.g. 0.5 will cause the animation to begin
* halfway through the first iteration.
* @property iterationStart
* @type Number
*/
iterationStart: 0,
/**
* @property iterationCount
* @type Number|'Infinity'
*/
iterationCount: 1,
/**
* Start delay in milliseconds.
* @property startDelay
* @type Number
*/
startDelay: 0,
/**
* "normal", "reverse", "alternate" or "alternate-reverse".
* @property direction
* @type String
*/
direction: 'normal',
/**
* @property autoplay
* @type Boolean
*/
autoplay: false
},
animation: false,
ready: function() {
this.asyncApply();
},
/**
* Plays the animation.
* @method play
*/
play: function() {
// need to flush to make sure all side effects are applied
// before playing the animation.
Platform.flush();
this.asyncMethod(function() {
this.completeApply();
//this.animation && console.log('play', this.animation);
if (this.animation) {
this.cancel();
this.player = document.timeline.play(this.animation);
this.player.paused = false;
this.player.currentTime = 0;
this.monitor();
}
});
},
/**
* Stops the animation.
* @method cancel
*/
cancel: function() {
if (this.player) {
this.player.source = null;
}
},
apply: function() {
this.cancelApply();
this.animation = null;
this.animation = this.makeAnimation();
if (this.autoplay && this.animation) {
this.play();
}
return this.animation;
},
makeAnimation: function() {
//this.target && console.log('makeAnimation target', this.target, 'animation', this.animationProps, 'timing', this.timingProps);
return this.target ? new Animation(this.target, this.animationProps, this.timingProps) : null;
},
asyncApply: function() {
this.cancelApply();
this.applyJob = this.job(this.applyJob, this.apply);
},
cancelApply: function() {
this.applyJob && this.applyJob.stop();
this.applyJob = null;
},
completeApply: function() {
this.applyJob && this.applyJob.complete();
},
animationChanged: function() {
// TODO: attributes are not case sensitive.
// TODO: Sending 'this' with the event because if the children is
// in ShadowDOM the sender becomes the shadow host.
this.fire('animationchange', this);
},
targetChanged: function() {
this.asyncApply();
},
targetSelectorChanged: function() {
if (this.targetSelector) {
this.target = findTarget(this.targetSelector, this);
}
},
propertiesChanged: function() {
this.asyncApply();
},
compositeChanged: function() {
this.asyncApply();
},
durationChanged: function() {
this.asyncApply();
},
fillModeChanged: function() {
this.asyncApply();
},
easingChanged: function() {
this.asyncApply();
},
iterationCountChanged: function() {
this.asyncApply();
},
startDelayChanged: function() {
this.asyncApply();
},
directionChanged: function() {
this.asyncApply();
},
autoplayChanged: function() {
this.asyncApply();
},
doOnChildren: function(inFn) {
var children = this.children;
if (!children.length) {
children = this.webkitShadowRoot ? this.webkitShadowRoot.childNodes : [];
}
Array.prototype.forEach.call(children, inFn, this);
},
get timingProps() {
var props = {};
var timing = {
fillMode: {},
easing: {property: 'timingFunction'},
startDelay: {isNumber: true},
iterationCount: {isNumber: true, allowInfinity: true},
direction: {},
duration: {isNumber: true}
};
for (t in timing) {
if (this[t] !== null) {
var name = timing[t].property || t;
props[name] = timing[t].isNumber ? toNumber(this[t], timing[t].allowInfinity) : this[t];
}
}
return props;
},
get animationProps() {
var props = {};
if (!this.properties) {
this.doOnChildren(function(c) {
if (c.tagName && c.tagName.toLowerCase() === 'polymer-animation-prop') {
var property = c.name;
var values = [];
this.doOnChildren.call(c, function(f) {
values.push(f.properties);
});
props[property] = values;
}
});
} else {
for (k in this.properties) {
if (this.properties.hasOwnProperty(k)) {
props[k] = this.properties[k];
}
}
}
if (this.composite) {
props.operation = this.composite;
}
return props;
},
monitor: function() {
// TODO(sorvell): adding brittle support for an end event
if (this.player && this.player.source &&
this.player.source._isPastEndOfActiveInterval()) {
this.complete();
} else {
requestAnimationFrame(this.monitor.bind(this));
}
},
// intended for user implementation
complete: function() {
this.fire('complete');
}
});
})();
</script>
</polymer-element>

14
examples/polymer/polymer-elements/polymer-animation/polymer-blink.html Normal file
View file

@ -0,0 +1,14 @@
<link rel="import" href="polymer-animation.html">
<polymer-element name="polymer-blink" extends="polymer-animation">
<script>
Polymer('polymer-blink', {
targetSelector: '',
duration: 0.7,
iterationCount: 'Infinity',
easing: 'cubic-bezier(1.0,0,0,1.0)',
properties: {
opacity: ["1","0"]
}
});
</script>
</polymer-element>

31
examples/polymer/polymer-elements/polymer-animation/polymer-bounce.html Normal file
View file

@ -0,0 +1,31 @@
<link rel="import" href="polymer-animation.html">
<polymer-element name="polymer-bounce" extends="polymer-animation">
<script>
Polymer('polymer-bounce', {
targetSelector: '',
duration: 1,
magnitude: '-30px',
ready: function() {
this.super();
this.magnitudeChanged();
},
magnitudeChanged: function() {
this.generate();
},
generate: function() {
var parsed = this.magnitude.match(/([\-0-9]+)(.*)/);
this.properties = {
transform: [
{offset: 0, value: 'translateY(0)'},
{offset: 0.2, value: 'translateY(0)'},
{offset: 0.4, value: 'translateY(' + this.magnitude + ')'},
{offset: 0.5, value: 'translateY(0)'},
{offset: 0.6, value:'translateY(' + Number(parsed[1]) / 2 + parsed[2] + ')'},
{offset: 0.8, value: 'translateY(0)'},
{offset: 1, value: 'translateY(0)'}
]
};
}
});
</script>
</polymer-element>

17
examples/polymer/polymer-elements/polymer-animation/polymer-fadein.html Normal file
View file

@ -0,0 +1,17 @@
<link rel="import" href="polymer-animation.html">
<polymer-element name="polymer-fadein" extends="polymer-animation">
<template>
<polymer-animation-prop name="opacity">
<polymer-animation-keyframe value="0"></polymer-animation-keyframe>
<polymer-animation-keyframe value="1"></polymer-animation-keyframe>
</polymer-animation-prop>
<content></content>
</template>
<script>
Polymer('polymer-fadein', {
publish: {
targetSelector: ''
}
});
</script>
</polymer-element>

13
examples/polymer/polymer-elements/polymer-animation/polymer-fadeout.html Normal file
View file

@ -0,0 +1,13 @@
<link rel="import" href="polymer-animation.html">
<polymer-element name="polymer-fadeout" extends="polymer-animation">
<script>
Polymer('polymer-fadeout', {
publish: {
properties: {
targetSelector: '',
opacity: ["1", "0"]
}
}
});
</script>
</polymer-element>

46
examples/polymer/polymer-elements/polymer-animation/polymer-flip.html Normal file
View file

@ -0,0 +1,46 @@
<link rel="import" href="polymer-animation.html">
<polymer-element name="polymer-flip" extends="polymer-animation">
<script>
Polymer('polymer-flip', {
publish: {
targetSelector: '',
duration: 0.5,
axis: 'x',
},
ready: function() {
this.generate();
},
axisChanged: function() {
this.generate();
},
generate: function() {
var isY = this.axis === 'y' || this.axis === 'Y';
var rotate = isY ? 'rotateY' : 'rotateX';
var transZ = isY ? '150px' : '50px';
this.properties = {
transform: [{
easing: 'ease-out',
offset: 0,
value: 'perspective(400px) translateZ(0px) ' + rotate + '(0deg) scale(1)'
}, {
easing: 'ease-out',
offset: 0.4,
value: 'perspective(400px) translateZ(' + transZ + ') ' + rotate + '(170deg) scale(1)'
}, {
easing: 'ease-in',
offset: 0.5,
value: 'perspective(400px) translateZ(' + transZ + ') ' + rotate + '(190deg) scale(1)'
}, {
easing: 'ease-in',
offset: 0.8,
value: 'perspective(400px) translateZ(0px) ' + rotate + '(360deg) scale(.95)'
}, {
easing: 'ease-in',
offset: 1,
value: 'perspective(400px) translateZ(0px) ' + rotate + '(360deg) scale(1)'
}]
}
}
});
</script>
</polymer-element>

59
examples/polymer/polymer-elements/polymer-animation/polymer-shake.html Normal file
View file

@ -0,0 +1,59 @@
<link rel="import" href="polymer-animation-group.html">
<polymer-element name="polymer-shake" extends="polymer-animation-group">
<template>
<polymer-animation duration="{{period}}">
<polymer-animation-prop name="transform">
<polymer-animation-keyframe value="translateX(0px)"></polymer-animation-keyframe>
<polymer-animation-keyframe value="{{negTransform}}"></polymer-animation-keyframe>
</polymer-animation-prop>
</polymer-animation>
<polymer-animation duration="{{shakeDuration}}" iterationCount="{{shakeIterations}}">
<polymer-animation-prop name="transform">
<polymer-animation-keyframe value="{{negTransform}}"></polymer-animation-keyframe>
<polymer-animation-keyframe value="{{posTransform}}"></polymer-animation-keyframe>
<polymer-animation-keyframe value="{{negTransform}}"></polymer-animation-keyframe>
</polymer-animation-prop>
</polymer-animation>
<polymer-animation duration="{{period}}">
<polymer-animation-prop name="transform">
<polymer-animation-keyframe value="{{negTransform}}"></polymer-animation-keyframe>
<polymer-animation-keyframe value="translateX(0px)"></polymer-animation-keyframe>
</polymer-animation-prop>
</polymer-animation>
<content></content>
</template>
<script>
Polymer('polymer-shake', {
type: 'seq',
targetSelector: '',
duration: 0.3,
magnitude: '10px',
period: 0.1,
easing: 'ease-in',
ready: function() {
this.super();
this.magnitudeChanged();
this.periodChanged();
},
durationChanged: function() {
this.super();
this.generate();
},
magnitudeChanged: function() {
this.generate();
},
periodChanged: function() {
this.generate();
},
generate: function() {
this.negTransform = 'translateX(-' + this.magnitude + ')';
this.posTransform = 'translateX(' + this.magnitude + ')';
this.shakeDuration = this.period * 2;
this.shakeIterations = this.duration === 'Infinity' ? this.duration : Math.ceil(this.duration / this.shakeDuration);
},
get timingProps() {
return {};
}
});
</script>
</polymer-element>

41
examples/polymer/polymer-elements/polymer-animation/polymer-translate.html Normal file
View file

@ -0,0 +1,41 @@
<link rel="import" href="polymer-animation.html">
<polymer-element name="polymer-translate" extends="polymer-animation">
<template>
<!--
<g-property name="transform">
<g-keyframe value="translate({{fromX}},{{fromY}})"></g-keyframe>
<g-keyframe value="translate({{toX}},{{toY}})"></g-keyframe>
</g-property>
//-->
</template>
<script>
Polymer('polymer-translate', {
publish: {
fromX: '0',
fromY: '0',
toX: '0',
toY: '0'
},
fromXChanged: function() {
this.generate();
},
fromYChanged: function() {
this.generate();
},
toXChanged: function() {
this.generate();
},
toYChanged: function() {
this.generate();
},
generate: function() {
this.properties = {
transform: [
'translate(' + this.fromX + ',' + this.fromY + ')',
'translate(' + this.toX + ',' + this.toY + ')'
]
};
}
});
</script>
</polymer-element>

1
examples/polymer/polymer-elements/polymer-animation/web-animations.html Normal file
View file

@ -0,0 +1 @@
<script src="../../web-animations-js/web-animations.js"></script>

52
examples/polymer/polymer-elements/polymer-collapse/index.html Normal file
View file

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html>
<head>
<title>polymer-collapse</title>
<script src="../../polymer/polymer.js"></script>
<link rel="import" href="polymer-collapse.html">
<style>
.box {
background: #eee;
}
.content {
margin: 10px;
}
section {
padding: 10px;
}
</style>
</head>
<body>
<section style="background: blue; width: 800px;">
<button onclick="document.querySelector('#collapse1').toggle()">toggle collapse</button>
<div id="box1" class="box">
<div class="content">Forma temperiemque cornua sidera dissociata cornua recessit innabilis ligavit: solidumque coeptis nullus caelum sponte phoebe di regat mentisque tanta austro capacius amphitrite sui quin postquam semina fossae liquidum umor galeae coeptis caligine liberioris quin liquidum matutinis invasit posset: flexi glomeravit radiis certis invasit oppida postquam onerosior inclusum dominari opifex terris pace finxit quam aquae nunc sine altae auroram quam habentem homo totidemque scythiam in pondus ensis tegit caecoque poena lapidosos humanas coeperunt poena aetas totidem nec natura aethera locavit caelumque distinxit animalibus phoebe cingebant moderantum porrexerat terrae possedit sua sole diu summaque obliquis melioris orbem</div>
</div>
<polymer-collapse id="collapse1" closed targetId="box1"></polymer-collapse>
</section>
<section style="background: green; width: 800px;">
<button onclick="document.querySelector('#collapse2').toggle()">toggle collapse</button>
<div id="box2" class="box">
<div class="content">Coercuit iunctarum vix sic aberant spisso imagine litem cetera nubes ambitae tanta usu circumfuso fulminibus umentia rectumque iuga pluviaque meis semina regat ne campoque meis coeperunt nix cura iunctarum ligavit: secant ventos seductaque permisit sic iunctarum locoque his coeptis tum terras animalia recepta aethera cornua invasit tollere videre tonitrua humanas otia tuba alta dissociata sanctius adsiduis inclusum caesa ita onus sine pluviaque litem manebat fixo extendi ubi inposuit cum sublime membra undas orba forma deducite aethera turba coercuit retinebat obliquis bracchia nisi mentisque origine peregrinum manebat</div>
<section style="background: lightgreen;">
<button onclick="document.querySelector('#collapse3').toggle()">toggle collapse</button>
<div id="box3" class="box">
<div class="content">Forma temperiemque cornua sidera dissociata cornua recessit innabilis ligavit: solidumque coeptis nullus caelum sponte phoebe di regat mentisque tanta austro capacius amphitrite sui quin postquam semina fossae liquidum umor galeae coeptis caligine liberioris quin liquidum matutinis invasit posset: flexi glomeravit radiis certis invasit oppida postquam onerosior inclusum dominari opifex terris pace finxit quam aquae nunc sine altae auroram quam habentem homo totidemque scythiam in pondus ensis tegit caecoque poena lapidosos humanas coeperunt poena aetas totidem nec natura aethera locavit caelumque distinxit animalibus phoebe cingebant moderantum porrexerat terrae possedit sua sole diu summaque obliquis melioris orbem</div>
<section style="background: #00FF99;">
<button onclick="document.querySelector('#collapse4').toggle()">toggle collapse</button>
<div id="box4" class="box">
<div class="content">Forma temperiemque cornua sidera dissociata cornua recessit innabilis ligavit: solidumque coeptis nullus caelum sponte phoebe di regat mentisque tanta austro capacius amphitrite sui quin postquam semina fossae liquidum umor galeae coeptis caligine liberioris quin liquidum matutinis invasit posset: flexi glomeravit radiis certis invasit oppida postquam onerosior inclusum dominari opifex terris pace finxit quam aquae nunc sine altae auroram quam habentem homo totidemque scythiam in pondus ensis tegit caecoque poena lapidosos humanas coeperunt poena aetas totidem nec natura aethera locavit caelumque distinxit animalibus phoebe cingebant moderantum porrexerat terrae possedit sua sole diu summaque obliquis melioris orbem</div>
</div>
<polymer-collapse id="collapse4" closed targetId="box4"></polymer-collapse>
</section>
</div>
<polymer-collapse id="collapse3" closed targetId="box3"></polymer-collapse>
</section>
<div class="content">Obstabatque cingebant nitidis rapidisque cepit moderantum discordia habentia frigore solidumque fert inter caecoque sine coeperunt corpore quarum fluminaque coercuit vultus animal austro quem os sectamque animus origo solidumque quoque melioris adspirate recepta utramque rapidisque caelumque orba unus pluviaque erant mutastis gravitate illic quisque alta calidis speciem mixtam ante contraria duae</div>
</div>
<polymer-collapse id="collapse2" closed targetId="box2"></polymer-collapse>
</section>
</body>
</html>

188
examples/polymer/polymer-elements/polymer-collapse/polymer-collapse.html Normal file
View file

@ -0,0 +1,188 @@
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<!--
/**
* @module Polymer Elements
*/
/**
* polymer-collapse is used to add collapsible behavior to another element.
*
* Example:
*
* <button on-click="toggle">toggle collapse</button>
* <div id="demo">
* ...
* </div>
* <polymer-collapse id="collapse" targetId="demo"></polymer-collapse>
*
* ...
*
* toggle: function() {
* this.$.collapse.toggle();
* }
*
* @class polymer-collapse
*/
-->
<polymer-element name="polymer-collapse" attributes="targetId target horizontal closed duration fixedSize">
<template>
<style>
@host {
* {
display: none;
}
}
</style>
</template>
<script>
Polymer('polymer-collapse', {
/**
* The id of the target element.
*
* @attribute targetId
* @type string
* @default ''
*/
targetId: '',
/**
* The target element.
*
* @attribute target
* @type object
* @default null
*/
target: null,
/**
* If true, the orientation is horizontal; otherwise is vertical.
*
* @attribute horizontal
* @type boolean
* @default false
*/
horizontal: false,
/**
* If true, the target element is hidden/collapsed.
*
* @attribute closed
* @type boolean
* @default false
*/
closed: false,
/**
* Collapsing/expanding animation duration in second.
*
* @attribute duration
* @type number
* @default 0.5
*/
duration: 0.5,
/**
* If true, the size of the target element is fixed and is set
* on the element. Otherwise it will try to
* use auto to determine the natural size to use
* for collapsing/expanding.
*
* @attribute fixedSize
* @type boolean
* @default false
*/
fixedSize: false,
size: null,
removed: function() {
this.removeListeners(this.target);
},
targetIdChanged: function() {
var p = this.parentNode;
while (p.parentNode) {
p = p.parentNode;
}
this.target = p.querySelector('#' + this.targetId);
},
targetChanged: function(old) {
if (old) {
this.removeListeners(old);
}
this.horizontalChanged();
if (this.target) {
this.addListeners(this.target);
}
if (this.closed) {
this.update();
}
},
addListeners: function(node) {
node.addEventListener('webkitTransitionEnd', this.transitionEnd.bind(this));
node.addEventListener('transitionend', this.transitionEnd.bind(this));
},
removeListeners: function(node) {
node.removeEventListener('webkitTransitionEnd', this.transitionEnd.bind(this));
node.removeEventListener('transitionend', this.transitionEnd.bind(this));
},
horizontalChanged: function() {
this.dimension = this.horizontal ? 'width' : 'height';
},
closedChanged: function() {
this.update();
},
toggle: function() {
this.closed = !this.closed;
},
setTransitionDuration: function(duration) {
var s = this.target.style;
s.webkitTransition = s.transition = duration ? (this.dimension + ' ' + duration + 's') : null;
if (duration === 0) {
this.asyncMethod('transitionEnd');
}
},
transitionEnd: function() {
if (!this.closed && !this.size) {
this.updateSize('auto', null);
}
this.setTransitionDuration(null);
},
updateSize: function(size, duration) {
this.setTransitionDuration(duration);
this.target.style[this.dimension] = size;
},
update: function() {
if (!this.target) {
return;
}
this.horizontalChanged();
this.prepare();
this[this.closed ? 'hide' : 'show']();
},
calcSize: function() {
return this.target.getBoundingClientRect()[this.dimension] + 'px';
},
prepare: function() {
if (this.fixedSize && this.closed) {
this.size = getComputedStyle(this.target)[this.dimension];
}
this.target.style.overflow = 'hidden';
if (!this.size) {
this.updateSize(this.calcSize(), null);
}
},
show: function() {
if (!this.size) {
var orig = this.calcSize();
this.updateSize('auto', null);
var s = this.calcSize();
this.updateSize(orig, null);
}
this.asyncMethod(function() {
this.updateSize(this.size || s, this.duration);
});
},
hide: function() {
this.asyncMethod(function() {
this.updateSize(0, this.duration);
}, null, 1);
}
});
</script>
</polymer-element>

27
examples/polymer/polymer-elements/polymer-file/index.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<title>polymer-file</title>
<script src="../../polymer/polymer.js"></script>
<link rel="import" href="polymer-file.html">
</head>
<body>
<polymer-file auto readas="text"></polymer-file>
<p>Read result:</p>
<textarea cols="20" rows="5"></textarea>
<script>
document.addEventListener('WebComponentsReady', function() {
var pfile = document.querySelector('polymer-file');
pfile.blob = new Blob(['abc123'], {type: 'text/plain'});
//pfile.auto = true;
//pfile.read();
pfile.addEventListener('polymer-result', function(e) {
document.querySelector('textarea').value = e.detail.result;
});
});
</script>
</body>
</html>

138
examples/polymer/polymer-elements/polymer-file/polymer-file.html Normal file
View file

@ -0,0 +1,138 @@
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<!--
/**
* @module Polymer Elements
*/
/**
* @class polymer-file
*
* polymer-file provides File API operations.
*
* Examples:
*
* <polymer-file id="file" readas="dataurl"
on-polymer-result="handleResult"></polymer-file>
* ...
* this.$.file.blob = new Blob(['abc', {type: 'text/plain'}]);
* this.$.file.read();
*
* ---
*
* <polymer-file id="file" readas="arraybuffer" auto
* result="{{result}}"></polymer-file>
* ...
* this.$.file.blob = new Blob(['abc', {type: 'text/plain'}]);
*/
/**
* Fired when a file read has complete.
*
* @event polymer-result
* @param {Object} detail
* @param {Object} detail.result The result of the read.
*/
/**
* Fired if there is an error in the file read.
*
* @event polymer-error
* @param {Object} detail
* @param {Object} detail.error Information on the error.
*/
-->
<polymer-element name="polymer-file" attributes="blob result auto readas">
<template>
<style>
@host {
:scope { display: none; }
}
</style>
</template>
<script>
Polymer('polymer-file', {
/**
* Contains the result of a read operation.
*
* @attribute result
* @type Blob|File
* @default null
*/
result: null,
/**
* The Blob-like object to read.
*
* @attribute blob
* @type Blob|File
* @default null
*/
blob: null,
/**
* If true, automatically performs the file read (if a blob has been set).
*
* @attribute auto
* @type boolean
* @default false
*/
auto: false,
/**
* The format the result should be returned as. One of 'arraybuffer', 'text',
* 'dataurl', 'binarystring'.
*
* @attribute readas
* @type string
* @default 'text'
*/
readas: 'text',
blobChanged: function() {
// result is set at end of microtask in read. This won't call resultChanged.
this.result = null;
if (this.auto) {
this.read();
}
},
resultChanged: function() {
this.fire('polymer-result', {result: this.result});
},
read: function() {
// Send back same result if blob hasn't changed.
if (this.result || !this.blob) {
// Wrap in asyncMethod for situations where read() is called immediately.
this.asyncMethod(function() {
this.fire('polymer-result', {result: this.result});
});
return;
}
// TODO: reader.abort() a in-flight read.
var reader = new FileReader();
reader.onload = function(e) {
this.result = e.target.result;
}.bind(this);
reader.onerror = function(e) {
this.fire('polymer-error', {error: e.target.error});
}.bind(this);
switch(this.readas) {
case 'dataurl':
reader.readAsDataURL(this.blob);
break;
case 'arraybuffer':
reader.readAsArrayBuffer(this.blob);
break;
case 'binarystring':
reader.readAsBinaryString(this.blob);
break;
case 'text':
// Default to text.
default:
reader.readAsText(this.blob);
break;
}
}
});
</script>
</polymer-element>

129
examples/polymer/polymer-elements/polymer-flex-layout/index.html Normal file
View file

@ -0,0 +1,129 @@
<!DOCTYPE html>
<html>
<head>
<title>polymer-flex-layout</title>
<script src="../../polymer/polymer.js"></script>
<link rel="import" href="polymer-flex-layout.html">
<style>
body {
font-size: 20px;
}
flex-css, flex-container, flex-nonvisual {
height: 300px;
}
</style>
</head>
<body>
<polymer-element name="flex-css">
<template>
<link rel="stylesheet" href="polymer-flex-layout.css">
<style>
div {
box-sizing: border-box;
-moz-box-sizing: border-box;
border: 2px solid #ccc;
}
</style>
<div class="flexbox" flex>
<div>Hi I'm some content</div>
<div class="flexbox column" flex>
<div class="flexbox align-center">
<h3>Title</h3>
<button>hello</button>
</div>
<div class="flexbox" flex>
<div flex>Main content</div>
<div>Sidebar content</div>
</div>
<div>Some more stuffs...</div>
<div class="flexbox justify-end">
<b>Footer</b>
</div>
</div>
<div>A last bit, like a panel</div>
</div>
</template>
<script>
Polymer('flex-css', {
ready: function() {
this.classList.add('flexbox');
}
});
</script>
</polymer-element>
<polymer-element name="flex-container" extends="polymer-flex-layout" isContainer>
<template>
<style>
div, polymer-flex-layout {
box-sizing: border-box;
-moz-box-sizing: border-box;
border: 2px solid #ccc;
}
</style>
<div>Hi I'm some content</div>
<polymer-flex-layout isContainer vertical flex>
<polymer-flex-layout isContainer align="center">
<h3>Title</h3>
<button>hello</button>
</polymer-flex-layout>
<polymer-flex-layout isContainer flex>
<div flex>Main content</div>
<div>Sidebar content</div>
</polymer-flex-layout>
<div>Some more stuffs...</div>
<polymer-flex-layout isContainer justify="end">
<b>Footer</b>
</polymer-flex-layout>
</polymer-flex-layout>
<div>A last bit, like a panel</div>
</template>
</polymer-element>
<polymer-element name="flex-nonvisual">
<template>
<style>
div {
box-sizing: border-box;
-moz-box-sizing: border-box;
border: 2px solid #ccc;
}
</style>
<polymer-flex-layout></polymer-flex-layout>
<div flex>
<polymer-flex-layout></polymer-flex-layout>
<div>Hi I'm some content</div>
<div flex>
<polymer-flex-layout vertical></polymer-flex-layout>
<div>
<polymer-flex-layout align="center"></polymer-flex-layout>
<h3>Title</h3>
<button>hello</button>
</div>
<div flex>
<polymer-flex-layout></polymer-flex-layout>
<div flex>Main content</div>
<div>Sidebar content</div>
</div>
<div>Some more stuffs...</div>
<div>
<polymer-flex-layout justify="end"></polymer-flex-layout>
<b>Footer</b>
</div>
</div>
<div>A last bit, like a panel</div>
</div>
</template>
</polymer-element>
<h3>Using CSS class from polymer-flex-layout.css</h3>
<flex-css></flex-css>
<br>
<h3>polymer-flex-layout as a flexbox container</h3>
<flex-container></flex-container>
<br>
<h3>Using polymer-flex-layout to add flexbox behavior to the parent node</h3>
<flex-nonvisual></flex-nonvisual>
</body>
</html>

179
examples/polymer/polymer-elements/polymer-flex-layout/polymer-flex-layout.css Normal file
View file

@ -0,0 +1,179 @@
.flexbox {
display: -webkit-box !important;
display: -ms-flexbox !important;
display: -moz-flex !important;
display: -webkit-flex !important;
display: flex !important;
}
.flexbox.row {
-webkit-box-orient: horizontal;
-ms-flex-direction: row;
-moz-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
}
.flexbox.column {
-webkit-box-orient: vertical;
-ms-flex-direction: column;
-moz-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
.flex, [flex], [fit] {
-webkit-box-flex: 1;
-ms-flex: 1;
-moz-flex: 1;
-webkit-flex: 1;
flex: 1;
}
content::-webkit-distributed(.flex),
content::-webkit-distributed([flex]),
content::-webkit-distributed([fit]) {
-webkit-box-flex: 1;
-ms-flex: 1;
-moz-flex: 1;
-webkit-flex: 1;
flex: 1;
}
.flexbox.align-start {
-webkit-box-align: start;
-ms-flex-align: start;
-moz-align-items: flex-start;
-webkit-align-items: flex-start;
align-items: flex-start;
}
.flexbox.align-end {
-webkit-box-align: end;
-ms-flex-align: end;
-moz-align-items: flex-end;
-webkit-align-items: flex-end;
align-items: flex-end;
}
.flexbox.align-center {
-webkit-box-align: center;
-ms-flex-align: center;
-moz-align-items: center;
-webkit-align-items: center;
align-items: center;
}
.flexbox.justify-start {
-webkit-box-pack: start;
-ms-flex-pack: start;
-moz-justify-content: flex-start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
.flexbox.justify-end {
-webkit-box-pack: end;
-ms-flex-pack: end;
-moz-justify-content: flex-end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
.flexbox.justify-center {
-webkit-box-pack: center;
-ms-flex-pack: center;
-moz-justify-content: center;
-webkit-justify-content: center;
justify-content: center;
}
.flexbox.justify-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-moz-justify-content: space-between;
-webkit-justify-content: space-between;
justify-content: space-between;
}
@host {
.flexbox {
display: -webkit-box !important;
display: -ms-flexbox !important;
display: -moz-flex !important;
display: -webkit-flex !important;
display: flex !important;
}
.flexbox.row {
-webkit-box-orient: horizontal;
-ms-flex-direction: row;
-moz-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
}
.flexbox.column {
-webkit-box-orient: vertical;
-ms-flex-direction: column;
-moz-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
.flexbox.align-start {
-webkit-box-align: start;
-ms-flex-align: start;
-moz-align-items: flex-start;
-webkit-align-items: flex-start;
align-items: flex-start;
}
.flexbox.align-end {
-webkit-box-align: end;
-ms-flex-align: end;
-moz-align-items: flex-end;
-webkit-align-items: flex-end;
align-items: flex-end;
}
.flexbox.align-center {
-webkit-box-align: center;
-ms-flex-align: center;
-moz-align-items: center;
-webkit-align-items: center;
align-items: center;
}
.flexbox.justify-start {
-webkit-box-pack: start;
-ms-flex-pack: start;
-moz-justify-content: flex-start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
.flexbox.justify-end {
-webkit-box-pack: end;
-ms-flex-pack: end;
-moz-justify-content: flex-end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
.flexbox.justify-center {
-webkit-box-pack: center;
-ms-flex-pack: center;
-moz-justify-content: center;
-webkit-justify-content: center;
justify-content: center;
}
.flexbox.justify-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-moz-justify-content: space-between;
-webkit-justify-content: space-between;
justify-content: space-between;
}
}

47
examples/polymer/polymer-elements/polymer-flex-layout/polymer-flex-layout.html Normal file
View file

@ -0,0 +1,47 @@
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<polymer-element name="polymer-flex-layout" attributes="vertical align justify isContainer">
<template>
<link rel="stylesheet" polymer-scope="controller" href="polymer-flex-layout.css">
<link rel="stylesheet" href="polymer-flex-layout.css">
<content></content>
</template>
<script>
Polymer('polymer-flex-layout', {
vertical: false,
isContainer: false,
inserted: function() {
this.installControllerStyles();
this.layoutContainer = this.isContainer ?
this : (this.parentNode.host || this.parentNode);
if (!this.isContainer) {
this.style.display = 'none';
}
this.layoutContainer.classList.add('flexbox');
this.verticalChanged();
this.alignChanged();
this.justifyChanged();
},
switchContainerClass: function(prefix, old, name) {
if (this.layoutContainer && name) {
this.layoutContainer.classList.switch(
prefix + old, prefix + name);
}
},
verticalChanged: function() {
if (this.layoutContainer) {
this.layoutContainer.classList.toggle('column', this.vertical);
}
},
alignChanged: function(old) {
this.switchContainerClass('align-', old, this.align);
},
justifyChanged: function(old) {
this.switchContainerClass('justify-', old, this.justify);
}
});
</script>
</polymer-element>

25
examples/polymer/polymer-elements/polymer-google-jsapi/index.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="../../polymer/polymer.js"></script>
<link rel="import" href="polymer-google-jsapi.html">
</head>
<body>
<polymer-google-jsapi id="jsapi"></polymer-google-jsapi>
<script>
jsapi.addEventListener('polymer-google-jsapi-loaded', function() {
google.load("feeds", "1", {callback: feedsLoaded});
});
function feedsLoaded() {
alert("feeds loaded");
}
</script>
</body>
</html>

56
examples/polymer/polymer-elements/polymer-google-jsapi/polymer-google-jsapi.html Normal file
View file

@ -0,0 +1,56 @@
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<polymer-element name="polymer-google-jsapi">
<script>
Polymer('polymer-google-jsapi', {
ready: function() {
switch (state) {
case '':
load();
state = 'pending';
case 'pending':
instances.push(this);
break;
case 'ready':
this.provide();
break;
}
},
provide: function() {
this.asyncMethod('notify');
},
notify: function() {
this.fire('polymer-google-jsapi-loaded');
},
get google() {
return api;
}
});
var state = '', instances = [], f;
function load() {
f = document.createElement('iframe');
f.style.display = 'none';
document.body.appendChild(f);
var d = f.contentWindow ? f.contentWindow.document : (f.contentDocument.document ? f.contentDocument.document : f.contentDocument);
d.open();
d.write(loader);
d.close();
}
var api;
loaded = function(google) {
window.__polymer_google_jsapi = undefined;
window.google = api = google;
instances.forEach(function(i) {
i.notify();
});
}
var loader =
'<script type="text/javascript" src="https://www.google.com/jsapi"></scr' + 'ipt>' +
'<script>top.__polymer_google_jsapi(google);</scr' + 'ipt>'
;
window.__polymer_google_jsapi = loaded;
</script>
</polymer-element>

28
examples/polymer/polymer-elements/polymer-jsonp/index.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<title>polymer-jsonp</title>
<script src="../../polymer/polymer.js"></script>
<link rel="import" href="polymer-jsonp.html">
</head>
<body>
<polymer-jsonp auto url="https://clients1.google.com/finance/info?q=GOOG&client=ig&callback="></polymer-jsonp>
<template bind="{{stockquote}}">
<div>quote: {{l}}</div>
</template>
<script>
document.addEventListener('WebComponentsReady', function() {
var jsonp = document.querySelector("polymer-jsonp");
jsonp.addEventListener("polymer-response",
function(e) {
document.querySelector('template').model = {
stockquote: e.detail.response[0]
};
}
);
});
</script>
</body>
</html>

93
examples/polymer/polymer-elements/polymer-jsonp/polymer-jsonp.html Normal file
View file

@ -0,0 +1,93 @@
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<!--
/**
* @module Polymer Elements
*/
/**
* polymer-jsonp can be used to perform JSONP requests.
* Example:
*
* <polymer-jsonp url="https://clients1.google.com/finance/info?q=GOOG&client=ig&callback="
* response="{{data}}"></polymer-jsonp>
*
* @class polymer-jsonp
*/
/**
* Fired when a response is received.
*
* @event polymer-response
*/
-->
<polymer-element name="polymer-jsonp" attributes="url response auto bustCache">
<script>
(function() {
Polymer('polymer-jsonp', {
/**
* The URL target of the request.
*
* @attribute url
* @type string
* @default ''
*/
url: '',
/**
* Returns the response object.
*
* @attribute response
* @type Object
* @default null
*/
response: null,
bustCache: false,
auto: false,
urlChanged: function() {
if (this.url && this.auto) {
this.go();
}
},
/**
* Performs a JSONP request to the url specified.
*
* @method go
*/
go: function() {
if (!this.isInFlight()) {
this.callbackFunc = JSONP_CALLBACK_FUNC_NAME + callbackId++;
window[this.callbackFunc] = this.respond.bind(this);
var url = this.url + this.callbackFunc + (this.bustCache ? '&' + Math.random() : '');
this.addScript(url);
}
},
isInFlight: function() {
return !!this.script;
},
addScript: function(inSrc) {
this.script = document.createElement('script');
this.script.src = inSrc;
this.script.onerror = this.respond.bind(this);
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(this.script, s);
},
removeScript: function() {
if (this.script.parentNode) {
this.script.parentNode.removeChild(this.script);
}
this.script = null;
},
respond: function(inResponse) {
this.response = inResponse;
this.removeScript();
delete window[this.callbackFunc];
this.fire('polymer-response', {response: inResponse});
}
});
var JSONP_CALLBACK_FUNC_NAME = '_polymer_jsonp_callback_';
var callbackId = 0;
})();
</script>
</polymer-element>

13
examples/polymer/polymer-elements/polymer-key-helper/polymer-key-helper.html Normal file
View file

@ -0,0 +1,13 @@
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<polymer-element name="polymer-key-helper">
<script>
Polymer('polymer-key-helper', {
ENTER_KEY: 13,
ESCAPE_KEY: 27
});
</script>
</polymer-element>

43
examples/polymer/polymer-elements/polymer-layout/index.html Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../../polymer/polymer.js"></script>
<link rel="import" href="polymer-layout.html">
<link rel="import" href="polymer-slide.html">
<style>
div {
padding: 8px;
border: 3px solid lightblue;
-webkit-transition: all 0.3s;
}
[vertical] ~ div {
border: 3px solid orange;
}
</style>
</head>
<body>
<div style="height: 600px; overflow: hidden;">
<polymer-layout></polymer-layout>
<div id="left">Hi I'm some content</div>
<div id="left2" onclick="leftSlide.closed = !leftSlide.closed;">Click Me First</div>
<div onclick="leftSlide2.closed = !leftSlide2.closed;">Click Me Second</div>
<div fit>
<polymer-layout vertical></polymer-layout>
<div id="top">Gribble gribble</div>
<div onclick="topSlide.closed = !topSlide.closed;">Click Me</div>
<div fit>Squids!</div>
<div onclick="bottomSlide.closed = !bottomSlide.closed;">Click Me</div>
<div>More is more</div>
<div id="bottom">Squids are larger than they appear.</div>
</div>
<div onclick="rightSlide.closed = !rightSlide.closed;">Click me</div>
<div id="right">A last bit, like a panel</div>
</div>
<polymer-slide id="leftSlide" targetid="left"></polymer-slide>
<polymer-slide id="leftSlide2" targetid="left2"></polymer-slide>
<polymer-slide id="rightSlide" targetid="right"></polymer-slide>
<polymer-slide id="topSlide" vertical targetid="top"></polymer-slide>
<polymer-slide id="bottomSlide" vertical targetid="bottom"></polymer-slide>
</body>
</html>

125
examples/polymer/polymer-elements/polymer-layout/polymer-layout.html Normal file
View file

@ -0,0 +1,125 @@
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<polymer-element name="polymer-layout" attributes="vertical">
<template>
<style>
@host {
* {
display: none;
}
}
</style>
</template>
<script>
Polymer('polymer-layout', {
vertical: false,
ready: function() {
this.setAttribute('nolayout', '');
},
inserted: function() {
this.asyncMethod(function() {
this.prepare();
this.layout();
});
},
prepare: function() {
var parent = this.parentNode.host || this.parentNode;
// may recalc
var cs = window.getComputedStyle(parent);
if (cs.position === 'static') {
parent.style.position = 'relative';
}
parent.style.overflow = 'hidden';
// changes will cause another recalc at next validation step
var vertical;
this.parentNode.childNodes.forEach(function(c, i) {
if (c.nodeType === Node.ELEMENT_NODE && !c.hasAttribute('nolayout')) {
stylize(c, {
position: 'absolute',
boxSizing: 'border-box',
MozBoxSizing: 'border-box',
});
// test for auto-vertical
if (vertical === undefined) {
vertical = (c.offsetWidth == 0 && c.offsetHeight !== 0);
}
}
});
this.vertical = this.vertical || vertical;
},
layout: function() {
var parent = this.parentNode.host || this.parentNode;
var vertical = this.vertical;
var ww = 0, hh = 0, pre = [], fit, post = [];
var list = pre;
// gather element information (at most one recalc)
this.parentNode.childNodes.forEach(function(c, i) {
if (c.nodeType===Node.ELEMENT_NODE && !c.hasAttribute('nolayout')) {
var info = {
element: c,
w: c.offsetWidth,
h: c.offsetHeight
};
if (!c.hasAttribute('fit')) {
ww += c.offsetWidth;
hh += c.offsetHeight;
list.push(info);
} else {
fit = c;
list = post;
ww = hh = 0;
}
}
});
// update layout styles (invalidate, no recalc)
var v = 0;
var mxp = 0, myp = 0;
pre.forEach(function(info) {
if (vertical) {
stylize(info.element, {
top: v + 'px', right: mxp, height: info.h + 'px', left: mxp
});
} else {
stylize(info.element, {
top: myp, width: info.w + 'px', bottom: myp, left: v + 'px'
});
}
v += vertical ? info.h : info.w;
});
if (fit) {
if (vertical) {
stylize(fit, {
top: v + 'px', right: mxp, bottom: hh + 'px', left: mxp
});
} else {
stylize(fit, {
top: myp, right: ww + 'px', bottom: myp, left: v + 'px'
});
}
v = vertical ? hh : ww;
post.forEach(function(info) {
v -= vertical ? info.h : info.w;
if (vertical) {
stylize(info.element, {
height: info.h + 'px', right: mxp, bottom: v + 'px', left: mxp
});
} else {
stylize(info.element, {
top: myp, right: v + 'px', bottom: myp, width: info.w + 'px'
});
}
});
}
}
});
function stylize(element, styles) {
var style = element.style;
Object.keys(styles).forEach(function(k){
style[k] = styles[k];
});
}
</script>
</polymer-element>

155
examples/polymer/polymer-elements/polymer-layout/polymer-slide.html Normal file
View file

@ -0,0 +1,155 @@
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<polymer-element name="polymer-slide" attributes="open closed vertical target targetId">
<template>
<style>
@host {
* {
display: none;
}
}
</style>
</template>
<script>
Polymer('polymer-slide', {
closed: false,
open: true,
vertical: false,
targetId: '',
target: null,
ready: function() {
this.setAttribute('nolayout', '');
},
inserted: function() {
this.target = this.parentNode;
},
targetIdChanged: function() {
var p = this.parentNode;
while (p.parentNode) {p = p.parentNode;};
this.target = p.querySelector('#' + this.targetId);
},
targetChanged: function() {
if (this.closed) {
this.asyncMethod(this.update);
}
},
toggle: function() {
this.open = !this.open;
},
closedChanged: function() {
this.open = !this.closed;
},
openChanged: function() {
this.asyncMethod(this.update);
},
update: function() {
this.closed = !this.open;
if (this.target) {
if (this.vertical) {
if (this.target.style.top !== '') {
this.updateTop();
} else {
this.updateBottom();
}
} else {
if (this.target.style.left !== '') {
this.updateLeft();
} else {
this.updateRight();
}
}
}
},
updateLeft: function() {
var w = this.target.offsetWidth;
var l = this.open ? 0 : -w;
this.target.style.left = l + 'px';
var s = this.target.nextElementSibling;
while (s) {
if (!s.hasAttribute('nolayout')) {
if (s.style.left === '' && s.style.right !== '') {
break;
}
l += w;
s.style.left = l + 'px';
w = s.offsetWidth;
}
s = s.nextElementSibling;
}
},
updateRight: function() {
var w = this.target.offsetWidth;
var r = this.open ? 0 : -w;
this.target.style.right = r + 'px';
//var s = this.target.previousElementSibling;
var s = previousElementSibling(this.target);
while (s) {
if (!s.hasAttribute('nolayout')) {
if (s.style.right === '' && s.style.left !== '') {
break;
}
r += w;
s.style.right = r + 'px';
w = s.offsetWidth;
}
//if (s == s.previousElementSibling) {
// console.error(s.localName + ' is its own sibling', s);
// break;
//}
//s = s.previousElementSibling;
s = previousElementSibling(s);
}
},
updateTop: function() {
var h = this.target.offsetHeight;
var t = this.open ? 0 : -h;
this.target.style.top = t + 'px';
var s = this.target.nextElementSibling;
while (s) {
if (!s.hasAttribute('nolayout')) {
if (s.style.top === '' && s.style.bottom !== '') {
break;
}
t += h;
s.style.top = t + 'px';
h = s.offsetHeight;
}
s = s.nextElementSibling;
}
},
updateBottom: function() {
var h = this.target.offsetHeight;
var b = this.open ? 0 : -h;
this.target.style.bottom = b + 'px';
//var s = this.target.previousElementSibling;
var s = previousElementSibling(this.target);
while (s) {
if (!s.hasAttribute('nolayout')) {
if (s.style.bottom === '' && s.style.top !== '') {
break;
}
b = b + h;
s.style.bottom = b + 'px';
h = s.offsetHeight;
}
//if (s == s.previousElementSibling) {
// console.error(s.localName + ' is its own sibling', s);
// break;
//}
//s = s.previousElementSibling;
s = previousElementSibling(s);
}
}
});
// TODO(sjmiles): temporary workaround for b0rked property in ShadowDOMPolyfill
function previousElementSibling(e) {
do {
e = e.previousSibling;
} while (e && e.nodeType !== Node.ELEMENT_NODE);
return e;
};
</script>
</polymer-element>

22
examples/polymer/polymer-elements/polymer-localstorage/index.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<title>polymer-localstorage</title>
<script src="../../polymer/polymer.js"></script>
<link rel="import" href="polymer-localstorage.html">
</head>
<body>
<polymer-element name="x-test">
<template>
string entered below will be stored in localStorage and automatically retrived from localStorage when the page is reloaded<br>
<input value="{{value}}">
<polymer-localstorage name="polymer-localstorage-test2" useRaw value="{{value}}"></polymer-localstorage>
</template>
<script>
Polymer('x-test');
</script>
</polymer-element>
<x-test></x-test>
</body>
</html>

75
examples/polymer/polymer-elements/polymer-localstorage/polymer-localstorage.html Normal file
View file

@ -0,0 +1,75 @@
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<!--
/**
* @module Polymer Elements
*/
/**
* polymer-localstorage provides access to localStorage. The "name" property
* is the key to the data ("value" property) stored in localStorage.
*
* Example:
*
* <polymer-localstorage name="my-app-storage" value="{{value}}"></polymer-localstorage>
*
* @class polymer-localstorage
*/
-->
<polymer-element name="polymer-localstorage" attributes="name value useRaw">
<template>
<style>
@host {
* {
display: none;
}
}
</style>
</template>
<script>
Polymer('polymer-localstorage', {
/**
* The key to the data stored in localStorage.
*
* @attribute name
* @type string
* @default null
*/
/**
* The data associated with the specified name.
*
* @attribute value
* @type object
* @default null
*/
/**
* If true, the value is stored and retrieved without JSON processing.
*
* @attribute useRaw
* @type boolean
* @default false
*/
useRaw: false,
ready: function() {
this.load();
},
valueChanged: function() {
this.save();
},
load: function() {
var s = window.localStorage.getItem(this.name);
if (s && !this.useRaw) {
this.value = JSON.parse(s);
} else {
this.value = s;
}
},
save: function() {
window.localStorage.setItem(this.name,
this.useRaw ? this.value : JSON.stringify(this.value));
}
});
</script>
</polymer-element>

36
examples/polymer/polymer-elements/polymer-media-query/index.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Polymer match media</title>
<script type="text/javascript" src="../../polymer/polymer.js"></script>
<link rel="import" href="polymer-media-query.html" />
</head>
<body>
<polymer-element name="match-example">
<template>
<polymer-media-query query="{{query}}" queryMatches="{{matches}}"></polymer-media-query>
My query of "{{query}}" {{matches ? "matches" : "doesn't match"}}
</template>
<script>
Polymer('match-example', {
query: 'min-width: 600px'
});
</script>
</polymer-element>
<match-example id="me"></match-example>
<pre id="output">
Log of 'mediachange' events on document, from polymer-match-media:
</pre>
<script>
var output = document.querySelector('#output');
// on-mediachange would give true or false as second param to the handler
document.addEventListener('polymer-mediachange', function(e) {
output.textContent += '\nevent: ' + e.type + ' query: ' + e.detail.media + ' matches: ' + e.detail.matches;
});
</script>
</body>
</html>

43
examples/polymer/polymer-elements/polymer-media-query/polymer-media-query.html Normal file
View file

@ -0,0 +1,43 @@
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<!--
/**
* @module Polymer Elements
*/
-->
<polymer-element name="polymer-media-query" attributes="query queryMatches">
<template>
<style>
@host {
* {
display: none;
}
}
</style>
</template>
<script>
Polymer('polymer-media-query', {
queryMatches: false,
query: '',
ready: function() {
this._mqHandler = this.queryHandler.bind(this);
this._mq = null;
},
queryChanged: function() {
if (this._mq) {
this._mq.removeListener(this._mqHandler);
}
this._mq = window.matchMedia('(' + this.query + ')');
this._mq.addListener(this._mqHandler);
this.queryHandler(this._mq);
},
queryHandler: function(mq) {
this.queryMatches = mq.matches;
this.asyncFire('polymer-mediachange', mq);
}
});
</script>
</polymer-element>

35
examples/polymer/polymer-elements/polymer-meta/index.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<title>polymer-meta</title>
<script src="../../polymer/polymer.js"></script>
<link rel="import" href="polymer-meta.html">
</head>
<body>
<polymer-meta id="x-foo" label="foo"></polymer-meta>
<polymer-meta id="x-bar" label="bar"></polymer-meta>
<polymer-meta id="x-zot" label="zot">
<template>
<div>[zot's metadata]</div>
</template>
</polymer-meta>
<template repeat="{{metadata}}">
<div>{{label}}</div>
</template>
<hr>
<script>
document.addEventListener('WebComponentsReady', function() {
var meta = document.createElement('polymer-meta');
document.querySelector('template[repeat]').model = {
metadata: meta.list
};
var archetype = meta.byId('x-zot').archetype;
document.body.appendChild(archetype.createInstance().querySelector('*'));
});
</script>
</body>
</html>

55
examples/polymer/polymer-elements/polymer-meta/polymer-meta.html Normal file
View file

@ -0,0 +1,55 @@
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<!--
/**
* @module Polymer Elements
*/
/**
* polymer-meta is used to manage metadata. When an instance of polymer-meta
* is created, it's automatically registered and add to the metaData storage given an id
* is set on the element. Use byId() to retrive a specific polymer-meta and
* the property "list" to retrieve all registered polymer-meta's.
*
* @class polymer-meta
*/
-->
<polymer-element name="polymer-meta" attributes="list label">
<script>
(function() {
var SKIP_ID = 'meta';
var metaData = {}, metaArray = [];
Polymer('polymer-meta', {
ready: function() {
this.idChanged();
},
idChanged: function(old) {
if (this.id && this.id !== SKIP_ID) {
this.unregister(this, old);
metaData[this.id] = this;
metaArray.push(this);
}
},
unregister: function(meta, id) {
delete metaData[id || meta.id];
var i = metaArray.indexOf(meta);
if (i >= 0) {
metaArray.splice(i, 1);
}
},
get list() {
return metaArray;
},
get archetype() {
return this.querySelector('template');
},
byId: function(id) {
return metaData[id];
}
});
})();
</script>
</polymer-element>

126
examples/polymer/polymer-elements/polymer-overlay/index.html Normal file
View file

@ -0,0 +1,126 @@
<!DOCTYPE html>
<html>
<head>
<title>polymer-overlay</title>
<link rel="import" href="polymer-overlay.html">
<script src="../../polymer/polymer.js"></script>
<style>
.dialog {
box-sizing: border-box;
-moz-box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
-webkit-user-select: none;
-moz-user-select: none;
overflow: hidden;
background: white;
padding:30px 42px;
outline: 1px solid rgba(0,0,0,0.2);
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
#dialog, #dialog2 {
top: 72px;
left: 50%;
width: 512px;
margin-left: -256px;
}
#confirmation {
position: absolute;
left: 50%;
top: 100px;
text-align: center;
width: 150px;
margin-left: -75px;
}
</style>
</head>
<body>
<button overlay="#dialog">Toggle Dialog</button>
( open styling:
<select onchange="changeOpening(event)">
<option>polymer-overlay-scale-slideup</option>
<option>polymer-overlay-shake</option>
<option>polymer-overlay-fade</option>
<option>none</option>
</select>,
<label>modal: <input type="checkbox" onchange="modalChange(event)"></label>
<label>scrim: <input type="checkbox" onchange="scrimChange(event)"></label>
)
<br>
<div id="dialog" class="dialog polymer-overlay-scale-slideup">
<polymer-overlay></polymer-overlay>
<h2>Dialog</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla sapien sed enim sollicitudin laoreet. Suspendisse suscipit, metus ac volutpat sodales, libero magna semper lacus, molestie fringilla massa orci ut arcu. Nullam sodales urna sit amet odio vehicula mattis.</div><br><br>
<div>Ut aliquam vulputate congue. Vestibulum pretium pretium nulla quis sollicitudin. Praesent lacinia congue erat nec mattis. Fusce commodo lacus est. Duis turpis eros, ultrices sed aliquet non, blandit egestas velit. Integer a augue nec lorem tristique hendrerit. Curabitur imperdiet risus id enim bibendum vestibulum. Integer id magna at arcu faucibus fermentum vel a augue. Sed fringilla venenatis dolor, in blandit magna molestie luctus. Vestibulum dignissim posuere ultrices. Aenean urna nisl, tincidunt vitae iaculis ut, pharetra nec eros.</div><br><br>
<div>
<input placeholder="say something..." autofocus oninput="somethingCheck()"></input><br>
I agree with this wholeheartedly.
<div id="confirmation" class="dialog">
<polymer-overlay></polymer-overlay>
Thank you.
</div>
</div><br><br>
<button overlay-toggle>OK</button>
</div>
<br><br>
<button overlay="#dialog2">Toggle Dialog 2</button>
<div id="dialog2" class="dialog polymer-overlay-shake" autoCloseDisabled="true">
<polymer-overlay></polymer-overlay>
<div>
<h2>Dialog 2</h2>
I'm dizzy.
</div>
<br><br>
<button overlay-toggle>OK</button>
</div>
<script>
setupOverlays = function() {
var overlays = document.querySelectorAll('polymer-overlay');
Array.prototype.forEach.call(overlays, function(o) {
o.target = o.parentNode;
});
}
document.addEventListener('WebComponentsReady', function() {
setupOverlays();
});
$ = document.querySelector.bind(document);
somethingCheck = function() {
$('#confirmation').querySelector('polymer-overlay').opened = (event.target.value == 'something');
}
changeOpening = function(e) {
var s = e.target.selectedOptions[0];
if (s) {
dialog.className = dialog.className.replace(/polymer-[^\s]*/, '')
dialog.classList.add(s.textContent);
}
}
modalChange = function(e) {
dialog.autoCloseDisabled = e.target.checked;
}
scrimChange = function(e) {
dialog.scrim = e.target.checked;
}
var overlayButtons = document.querySelectorAll('button[overlay]');
Array.prototype.forEach.call(overlayButtons, function(b) {
b.addEventListener('tap', function(e) {
var overlay = document.querySelector(e.target.getAttribute('overlay'));
if (overlay) {
overlay.querySelector('polymer-overlay').toggle();
}
})
});
</script>
</body>
</html>

129
examples/polymer/polymer-elements/polymer-overlay/polymer-overlay-global.css Normal file
View file

@ -0,0 +1,129 @@
/*
* Copyright 2013 The Polymer Authors. All rights reserved.
* Use of this source code is governed by a BSD-style
* license that can be found in the LICENSE file.
*/
.polymer-overlay {
position: fixed;
z-index: 10;
outline: none;
display: none;
opacity: 0.99;
-webkit-transition: opacity 0.001s;
transition: opacity 0.001s;
}
/*
The revealed class exists because it's necessary to 'show' a node
before applying a transition. When an overlay is opened, it is
immediately revealed (display: block) and then asynchronously the
opened or closing classes are added.
Because we don't want to actually show the node before a transition
or animation is applied, when the node is
revealed, it is made display: block but visibility: hidden.
It is then made visibility: visible when it is opened.
*/
.polymer-overlay.revealed {
display: block;
visibility: hidden;
}
.polymer-overlay.revealed.opened {
opacity: 1;
display: block;
visibility: visible;
}
.polymer-overlay.revealed.closing {
display: block;
visibility: visible;
}
@-webkit-keyframes polymer-overlay-shakeFadeIn {
0% {
opacity: 0;
-webkit-transform: translateX(0);
}
10% {
-webkit-transform: translateX(-50px);
}
30% {
-webkit-transform: translateX(50px);
}
50% {
-webkit-transform: translateX(-25px);
}
70% {
-webkit-transform: translateX(25px);
}
90% {
-webkit-transform: translateX(-13px);
}
100% {
-webkit-transform: translateX(0);
opacity: 1;
}
}
@keyframes polymer-overlay-shakeFadeIn {
0% {
opacity: 0;
transform: translateX(0);
}
10% {
transform: translateX(-50px);
}
30% {
transform: translateX(50px);
}
50% {
transform: translateX(-25px);
}
70% {
transform: translateX(25px);
}
90% {
transform: translateX(-13px);
}
100% {
transform: translateX(0);
opacity: 1;
}
}
@-webkit-keyframes polymer-overlay-shakeFadeOut {
0% {
opacity: 1;
-webkit-transform: translateX(0);
}
10% {
-webkit-transform: translateX(-50px);
}
30% {
-webkit-transform: translateX(50px);
}
100% {
-webkit-transform: translateX(-100%);
opacity: 0;
}
}
@keyframes polymer-overlay-shakeFadeOut {
0% {
opacity: 1;
transform: translateX(0);
}
10% {
transform: translateX(-50px);
}
30% {
transform: translateX(50px);
}
100% {
transform: translateX(-100%);
opacity: 0;
}
}

131
examples/polymer/polymer-elements/polymer-overlay/polymer-overlay.css Normal file
View file

@ -0,0 +1,131 @@
/*
* Copyright 2013 The Polymer Authors. All rights reserved.
* Use of this source code is governed by a BSD-style
* license that can be found in the LICENSE file.
*/
/*
TODO(sorvell): include a reasonable set of default overlay opening
animations. What's here right now is ad hoc.
*/
/*
Styling a polymer-overlay:
1. use the 'opened' class to style the overlay when it is open.
A transition or animation can be applied to animate the overlay into place.
Note: there's no need to set the display property of an overlay. That's
managed automatically.
2. To apply a different animation when the overlay closes, use the
'closing' class.
*/
/* Note that trbl: 0 + position: fixed will not 'fit to window'
if a transform is applied to a parent of this element. That parent
becomes the containing block; see:
http://dev.w3.org/csswg/css3-transforms/#transform-rendering
We address this by using script based positioning =(
*/
@host {
* {
position: fixed;
z-index: 10;
outline: none;
display: none;
opacity: 0.99;
-webkit-transition: opacity 0.001s;
transition: opacity 0.001s;
}
/*
The revealed class exists because it's necessary to 'show' a node
before applying a transition. When an overlay is opened, it is
immediately revealed (display: block) and then asynchronously the
opened or closing classes are added.
Because we don't want to actually show the node before a transition
or animation is applied, when the node is
revealed, it is made display: block but visibility: hidden.
It is then made visibility: visible when it is opened.
*/
.revealed {
display: block;
visibility: hidden;
}
.revealed.opened {
opacity: 1;
display: block;
visibility: visible;
}
.revealed.closing {
display: block;
visibility: visible;
}
/*
When an animation is detected (via an animationstart event) this class
is applied to remove any transition. This ensures only 1 animation end event
will be processed.
NOTE: if a rule such as a media query changes an overlay from using a css
animation to a transition, the animation class must be altered or removed.
*/
.animation {
-webkit-transition: none;
transition: none;
}
.polymer-overlay-fade {
opacity: 0;
-webkit-transition: all 0.218s;
transition: all 0.218s;
}
.polymer-overlay-fade.opened {
opacity: 1;
}
.polymer-overlay-scale-slideup {
opacity: 0.0;
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
.polymer-overlay-scale-slideup.opened {
opacity: 1.0;
-webkit-transform: scale(1.0);
transform: scale(1.0);
-webkit-transition: all 0.218s;
transition: all 0.218s;
}
.polymer-overlay-scale-slideup.closing {
opacity: 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: all 0.4s;
transition: all 0.4s;
}
.polymer-overlay-shake.opened {
-webkit-animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
-webkit-animation-name: polymer-overlay-shakeFadeIn;
animation-duration: 0.5s;
animation-fill-mode: both;
animation-name: polymer-overlay-shakeFadeIn;
}
.polymer-overlay-shake.closing {
-webkit-animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
-webkit-animation-name: polymer-overlay-shakeFadeOut;
animation-duration: 0.5s;
animation-fill-mode: both;
animation-name: polymer-overlay-shakeFadeOut;
}
}

330
examples/polymer/polymer-elements/polymer-overlay/polymer-overlay.html Normal file
View file

@ -0,0 +1,330 @@
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<link rel="import" href="../polymer-key-helper/polymer-key-helper.html">
<!--
/**
* @module Polymer Elements
*/
/**
* polymer-overlay displays overlayed on top of other content. It starts
* out hidden and is displayed by setting it's opened property to true.
* A polymer-overlay's opened state can be toggled by calling the toggle
* method.
*
* It's common to want a polymer-overlay to animate to its opened
* position. A number of helper css classes provide some basic open/close
* animations. For example, assigning the class polymer-overlay-fade to a
* polymer-overlay will make it fade into and out of view as it opens and
* closes. Note, if multiple polymer-overlay's are opened, they should
* stack on top of each other.
*
* Styling: The size and position of a polymer-overlay should be setup
* via css.
* polymer-overlay is natually sized around its content. When a
* polymer-overlay is opened it is shown and the 'opened' class is added
* to it. This is typically where css transitions and animations are
* applied. When the polymer-overlay is closed, the 'opened' class is
* removed and a 'closing' class is added. Use 'closing' to customize
* the closing animation.
*
* Classes for animating polymer-overlay:
*
* * polymer-overlay-fade: fade in/out when opened/closed
* * polymer-overlay-scale-slideup: open: fade in and shrink;
* close: slide up
* * polymer-overlay-shake: open: fly in and shake; close: shake and
* fly out.
*
* It's common to use polymer-overlay to gather user input, for example
* a login dialog. To facilitate this, polymer-overlay supports automatic
* focusing of a specific element when it's opened. The element to be
* focused should be given an autofocus attribute.
*
* An element that should close the polymer-overlay will automatically
* do so if it is given the overlay-toggle attribute. Please note that
* polymer-overlay will close whenever the user taps outside it or
* presses the escape key. The behavior can be turned off via the
* autoCloseDisabled property.
*
* <div>
* <polymer-overlay></polymer-overlay>
* <h2>Dialog</h2>
* <input placeholder="say something..." autofocus"></input>
* <div>I agree with this wholeheartedly.</div>
* <button overlay-toggle>OK</button>
* </div>
*
*
* @class polymer-overlay
*/
/**
* Fired when the polymer-overlay opened property is set.
*
* @event open
* @param {Object} inDetail
* @param {Object} inDetail.opened the opened state
*/
-->
<polymer-element name="polymer-overlay" attributes="target opened autoCloseDisabled">
<template>
<link rel="stylesheet" href="polymer-overlay.css">
<link rel="stylesheet" polymer-scope="global" href="polymer-overlay-global.css">
<style>
@host {
* {
display: none;
}
}
</style>
<polymer-key-helper id="keyHelper"></polymer-key-helper>
</template>
<script>
(function() {
// track overlays for z-index and focus managemant
var overlays = [];
var trackOverlays = function(inOverlay) {
if (inOverlay.opened) {
var z0 = currentOverlayZ();
overlays.push(inOverlay);
var z1 = currentOverlayZ();
if (z1 <= z0) {
applyOverlayZ(inOverlay, z0);
}
} else {
var i = overlays.indexOf(inOverlay);
if (i >= 0) {
overlays.splice(i, 1);
setZ(inOverlay, null);
}
}
}
var applyOverlayZ = function(inOverlay, inAboveZ) {
setZ(inOverlay.target, inAboveZ + 2);
}
var setZ = function(inNode, inZ) {
inNode.style.zIndex = inZ;
}
var currentOverlay = function() {
return overlays[overlays.length-1];
}
var DEFAULT_Z = 10;
var currentOverlayZ = function() {
var z;
var current = currentOverlay();
if (current) {
var z1 = window.getComputedStyle(current.target).zIndex;
if (!isNaN(z1)) {
z = Number(z1);
}
}
return z || DEFAULT_Z;
}
var focusOverlay = function() {
var current = currentOverlay();
if (current) {
current.applyFocus();
}
}
Polymer('polymer-overlay', {
/**
* The target element.
*
* @attribute target
* @type Object
*/
target: null,
/**
* Set opened to true to show an overlay and to false to hide it.
* A polymer-overlay may be made intially opened by setting its
* opened attribute.
* @attribute opened
* @type boolean
* @default false
*/
opened: false,
/**
* By default an overlay will close automatically if the user
* taps outside it or presses the escape key. Disable this
* behavior by setting the autoCloseDisabled property to true.
* @attribute autoCloseDisabled
* @type boolean
* @default false
*/
autoCloseDisabled: false,
timeout: 1000,
captureEventType: 'tap',
ready: function() {
if (this.tabIndex === undefined) {
this.tabIndex = -1;
}
this.setAttribute('touch-action', 'none');
},
/**
* Toggle the opened state of the overlay.
* @method toggle
*/
toggle: function() {
this.opened = !this.opened;
},
targetChanged: function(old) {
if (this.target) {
if (this.target.tabIndex === undefined) {
this.target.tabIndex = -1;
}
this.target.classList.add('polymer-overlay');
this.addListeners(this.target);
}
if (old) {
old.classList.remove('polymer-overlay');
this.removeListeners(this.target);
}
},
listeners: {
'webkitAnimationStart': 'openedAnimationStart',
'animationStart': 'openedAnimationStart',
'webkitAnimationEnd': 'openedAnimationEnd',
'animationEnd': 'openedAnimationEnd',
'webkitTransitionEnd': 'openedTransitionEnd',
'transitionEnd': 'openedTransitionEnd',
'tap': 'tapHandler',
'keydown': 'keydownHandler'
},
addListeners: function(node) {
for (e in this.listeners) {
node.addEventListener(e, this[this.listeners[e]].bind(this));
}
},
removeListeners: function(node) {
for (e in this.listeners) {
node.removeEventListener(e, this[this.listeners[e]].bind(this));
}
},
openedChanged: function() {
this.renderOpened();
trackOverlays(this);
if (!this.autoCloseDisabled) {
this.enableCaptureHandler(this.opened);
}
this.enableResizeHandler(this.opened);
this.fire('opened', this.opened);
},
enableHandler: function(inEnable, inMethodName, inNode, inEventName, inCapture) {
var m = 'bound' + inMethodName;
this[m] = this[m] || this[inMethodName].bind(this);
inNode[inEnable ? 'addEventListener' : 'removeEventListener'](
inEventName, this[m], inCapture);
},
enableResizeHandler: function(inEnable) {
this.enableHandler(inEnable, 'resizeHandler', window,
'resize');
},
enableCaptureHandler: function(inEnable) {
this.enableHandler(inEnable, 'captureHandler', document,
this.captureEventType, true);
},
getFocusNode: function() {
return this.target.querySelector('[autofocus]') || this.target;
},
// TODO(sorvell): nodes stay focused when they become un-focusable
// due to an ancestory becoming display: none; file bug.
applyFocus: function() {
var focusNode = this.getFocusNode();
if (this.opened) {
focusNode.focus();
} else {
focusNode.blur();
focusOverlay();
}
},
renderOpened: function() {
this.target.classList.remove('closing');
this.target.classList.add('revealed');
// continue styling after delay so display state can change
// without aborting transitions
this.asyncMethod('continueRenderOpened');
},
continueRenderOpened: function() {
this.target.classList.toggle('opened', this.opened);
this.target.classList.toggle('closing', !this.opened);
//this.animating = this.asyncMethod('completeOpening', null, this.timeout);
},
completeOpening: function() {
//clearTimeout(this.animating);
this.animating = null;
this.target.classList.remove('closing');
this.target.classList.toggle('revealed', this.opened);
this.applyFocus();
},
openedAnimationEnd: function(e) {
if (!this.opened) {
this.target.classList.remove('animation');
}
// same steps as when a transition ends
this.openedTransitionEnd(e);
},
openedTransitionEnd: function(e) {
// TODO(sorvell): Necessary due to
// https://bugs.webkit.org/show_bug.cgi?id=107892
// Remove when that bug is addressed.
if (e.target == this.target) {
this.completeOpening();
e.stopPropagation();
e.cancelBubble = true;
}
},
openedAnimationStart: function(e) {
this.target.classList.add('animation');
e.stopPropagation();
e.cancelBubble = true;
},
tapHandler: function(e) {
if (e.target && e.target.hasAttribute('overlay-toggle')) {
this.toggle();
} else {
if (this.autoCloseJob) {
this.autoCloseJob.stop();
this.autoCloseJob = null;
}
}
},
// TODO(sorvell): This approach will not work with modal. For
// this we need a scrim.
captureHandler: function(e) {
if (!this.autoCloseDisabled && (currentOverlay() == this) && (this
!= e.target) && !(this.contains(e.target))) {
this.autoCloseJob = this.job(this.autoCloseJob, function() {
this.opened = false;
});
}
},
keydownHandler: function(e) {
if (!this.autoCloseDisabled && (e.keyCode == this.$.keyHelper.ESCAPE_KEY)) {
this.opened = false;
e.stopPropagation();
e.cancelBubble = true;
}
},
/**
* Extensions of polymer-overlay should implement the resizeHandler
* method to adjust the size and position of the overlay when the
* browser window resizes.
* @method resizeHandler
*/
resizeHandler: function() {
}
});
})();
</script>
</polymer-element>

17
examples/polymer/polymer-elements/polymer-page/polymer-page.html Normal file
View file

@ -0,0 +1,17 @@
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<polymer-element name="polymer-page" attributes="fullbleed">
<script>
Polymer('polymer-page', {
fullbleed: true,
inserted: function() {
document.head.style.cssText += 'height: 100%; overflow: hidden; margin: 0;';
document.body.style.cssText += 'position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; margin: 0;';
document.body.style.transition = 'all 0.3s';
}
});
</script>
</polymer-element>

45
examples/polymer/polymer-elements/polymer-selector/index.html Normal file
View file

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html>
<head>
<title>polymer-selector</title>
<script src="../../polymer/polymer.js"></script>
<link rel="import" href="polymer-selector.html">
<style>
polymer-selector {
display: block;
border: 1px solid #ccc;
border-bottom: none;
background: #666;
color: white;
}
polymer-selector > * {
height: 40px;
line-height: 40px;
padding: 0 20px;
border-bottom: 1px solid #ccc;
}
polymer-selector > *.polymer-selected {
background: #333;
}
</style>
</head>
<body>
<polymer-selector>
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
</polymer-selector>
<h2>Multi-select</h2>
<polymer-selector multi>
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
</polymer-selector>
</body>
</html>

64
examples/polymer/polymer-elements/polymer-selector/polymer-selection.html Normal file
View file

@ -0,0 +1,64 @@
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<!--
/**
* @module Polymer Elements
*/
-->
<polymer-element name="polymer-selection" attributes="multi">
<template>
<style>
@host {
* {
display: none !important;
}
}
</style>
</template>
<script>
Polymer('polymer-selection', {
multi: false,
ready: function() {
this.clear();
},
clear: function() {
this.selection = [];
},
getSelection: function() {
return this.multi ? this.selection : this.selection[0];
},
isSelected: function(item) {
return this.selection.indexOf(item) >= 0;
},
setItemSelected: function(item, isSelected) {
if (item) {
if (isSelected) {
this.selection.push(item);
} else {
var i = this.selection.indexOf(item);
if (i >= 0) {
this.selection.splice(i, 1);
}
}
// TODO(sjmiles): consider replacing with summary
// notifications (asynchronous job)
this.asyncFire("polymer-select", {isSelected: isSelected, item: item});
}
},
select: function(item) {
if (this.multi) {
this.toggle(item);
} else if (this.getSelection() !== item) {
this.setItemSelected(this.getSelection(), false);
this.setItemSelected(item, true);
}
},
toggle: function(item) {
this.setItemSelected(item, !this.isSelected(item));
}
});
</script>
</polymer-element>

197
examples/polymer/polymer-elements/polymer-selector/polymer-selector.html Normal file
View file

@ -0,0 +1,197 @@
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<!--
/**
* @module Polymer Elements
*/
/**
* polymer-selector is used to display a list of elements that can be selected.
* The attribute "selected" indicates which element is being selected.
* Tapping on the element to change selection would fire "polymer-activate"
* event.
*
* Example:
*
* <polymer-selector selected="0" on-polymer-activate="activateAction">
* <div>Item 1</div>
* <div>Item 2</div>
* <div>Item 3</div>
* </polymer-selector>
*
* polymer-selector is not styled. So one needs to use "selected" CSS class
* to style the selected element.
*
* <style>
* .item.polymer-selected {
* background: #eee;
* }
* </style>
* ...
* <polymer-selector>
* <div class="item">Item 1</div>
* <div class="item">Item 2</div>
* <div class="item">Item 3</div>
* </polymer-selector>
*
* @class polymer-selector
*/
/**
* Fired when an element is selected via tap.
*
* @event activate
* @param {Object} detail
* @param {Object} detail.item the selected element
*/
-->
<link rel="import" href="polymer-selection.html">
<polymer-element name="polymer-selector" on-tap="activateHandler" touch-action="none"
attributes="selected multi valueattr selectedClass setectedProperty selectedModel notap">
<template>
<polymer-selection id="selection" multi="{{multi}}" on-polymer-select="selectionSelect"></polymer-selection>
<content id="items" select="*"></content>
</template>
<script>
Polymer('polymer-selector', {
/**
* Gets or sets the selected element. Default is to use the index
* of the currently selected element.
*
* If you want a specific attribute value of the selected element to be
* used instead of index, set "valueattr" to that attribute name.
*
* Example:
*
* <polymer-selector valueattr="label" selected="foo">
* <div label="foo"></div>
* <div label="bar"></div>
* <div label="zot"></div>
* </polymer-selector>
*
* @attribute selected
* @type string
* @default null
*/
selected: null,
/**
* If true, multiple selections are allowed.
*
* @attribute multi
* @type boolean
* @default false
*/
multi: false,
/**
* Specifies the attribute to be used for "selected" attribute.
*
* @attribute valueattr
* @type string
* @default 'name'
*/
valueattr: 'name',
/**
* Specifies the CSS class to be used to add to the selected element.
*
* @attribute selectedClass
* @type string
* @default 'polymer-selected'
*/
selectedClass: 'polymer-selected',
/**
* Specifies the property to be used to set on the selected element
* to indicate its active state.
*
* @attribute selectedProperty
* @type string
* @default 'active'
*/
setectedProperty: 'active',
/**
* Returns the model associated with the selected element.
*
* @attribute selectedModel
* @type Object
* @default null
*/
selectedModel: null,
get items() {
var nodes = this.$.items.getDistributedNodes();
return Array.prototype.filter.call(nodes, function(n) {
return n && n.localName !== 'template';
});
},
get selection() {
return this.$.selection.getSelection();
},
selectedChanged: function() {
this.valueToSelection(this.selected);
},
valueToSelection: function(value) {
var item = this.items[this.valueToIndex(value)];
this.selectedItem = item;
this.$.selection.select(item);
},
selectedItemChanged: function() {
if (this.selectedItem) {
var t = this.selectedItem.templateInstance;
this.selectedModel = t ? t.model : undefined;
} else {
this.selectedModel = null;
}
},
valueToIndex: function(value) {
// find an item with value == value and return it's index
for (var i=0, items=this.items, c; (c=items[i]); i++) {
if (this.valueForNode(c) == value) {
return i;
}
}
// if no item found, the value itself is probably the index
return value;
},
valueForNode: function(node) {
return node[this.valueattr] || node.getAttribute(this.valueattr);
},
// events fired from <polymer-selection> object
selectionSelect: function(e, detail) {
if (detail.item) {
if (this.selectedClass) {
detail.item.classList.toggle(this.selectedClass, detail.isSelected);
}
if (this.setectedProperty) {
detail.item[this.setectedProperty] = detail.isSelected;
}
}
},
// event fired from host
activateHandler: function(e) {
if (!this.notap) {
var i = this.findDistributedTarget(e.target, this.items);
if (i >= 0) {
var selected = this.valueForNode(this.items[i]) || i;
if (this.multi) {
this.valueToSelection(selected);
} else {
this.selected = selected;
}
this.asyncFire('polymer-activate', {item: this.items[i]});
}
}
},
findDistributedTarget: function(target, nodes) {
// find first ancestor of target (including itself) that
// is in inNodes, if any
while (target && target != this) {
var i = Array.prototype.indexOf.call(nodes, target);
if (i >= 0) {
return i;
}
target = target.parentNode;
}
}
});
</script>
</polymer-element>

20
examples/polymer/polymer-elements/polymer-view-source-link/index.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<html>
<head>
<title>polymer-view-source-link</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- load polymer -->
<script src="../../polymer/polymer.js"></script>
<!-- import element-->
<link rel="import" href="polymer-view-source-link.html">
</head>
<body>
<a is="polymer-view-source-link" href="http://example.com">View Source</a>
</body>
</html>

15
examples/polymer/polymer-elements/polymer-view-source-link/polymer-view-source-link.html Normal file
View file

@ -0,0 +1,15 @@
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<polymer-element name="polymer-view-source-link" target="_blank" extends="a">
<script>
Polymer('polymer-view-source-link', {
ready: function() {
var href = this.getAttribute('href') || window.location;
this.setAttribute('href', 'view-source:' + href);
}
});
</script>
</polymer-element>

9
examples/polymer/polymer-ui-elements/AUTHORS Normal file
View file

@ -0,0 +1,9 @@
# Names should be added to this file with this pattern:
#
# For individuals:
# Name <email address>
#
# For organizations:
# Organization <fnmatch pattern>
#
Google Inc. <*@google.com>

27
examples/polymer/polymer-ui-elements/LICENSE Normal file
View file

@ -0,0 +1,27 @@
// Copyright (c) 2012 The Polymer Authors. All rights reserved.
//
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are
// met:
//
// * Redistributions of source code must retain the above copyright
// notice, this list of conditions and the following disclaimer.
// * Redistributions in binary form must reproduce the above
// copyright notice, this list of conditions and the following disclaimer
// in the documentation and/or other materials provided with the
// distribution.
// * Neither the name of Google Inc. nor the names of its
// contributors may be used to endorse or promote products derived from
// this software without specific prior written permission.
//
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

23
examples/polymer/polymer-ui-elements/PATENTS Normal file
View file

@ -0,0 +1,23 @@
Additional IP Rights Grant (Patents)
"This implementation" means the copyrightable works distributed by
Google as part of the Polymer project.
Google hereby grants to You a perpetual, worldwide, non-exclusive,
no-charge, royalty-free, irrevocable (except as stated in this section)
patent license to make, have made, use, offer to sell, sell, import,
transfer and otherwise run, modify and propagate the contents of this
implementation of Polymer, where such license applies only to those
patent claims, both currently owned or controlled by Google and acquired
in the future, licensable by Google that are necessarily infringed by
this implementation of Polymer. This grant does not include claims
that would be infringed only as a consequence of further modification of
this implementation. If you or your agent or exclusive licensee
institute or order or agree to the institution of patent litigation
against any entity (including a cross-claim or counterclaim in a
lawsuit) alleging that this implementation of Polymer or any code
incorporated within this implementation of Polymer constitutes
direct or contributory patent infringement, or inducement of patent
infringement, then any patent rights granted to you under this License
for this implementation of Polymer shall terminate as of the date
such litigation is filed.

BIN
examples/polymer/polymer-ui-elements/assets/action-icons.pdn Normal file
View file

Binary file not shown.

BIN
examples/polymer/polymer-ui-elements/assets/action-icons.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 9.6 KiB

BIN
examples/polymer/polymer-ui-elements/assets/ribbon-icons.pdn Normal file
View file

Binary file not shown.

BIN
examples/polymer/polymer-ui-elements/assets/ribbon-icons.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.6 KiB

70
examples/polymer/polymer-ui-elements/basic.css Normal file
View file

@ -0,0 +1,70 @@
/*
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
*/
.polymer-ui-full-bleed {
height: 100%;
overflow: hidden;
margin: 0;
}
.polymer-ui-fit {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.polymer-ui-light-bg {
background: #f2f2f2 -webkit-linear-gradient(left, rgba(197,197,197,0), rgba(197,197,197,0.05));
background: #f2f2f2 -moz-linear-gradient(left, rgba(197,197,197,0), rgba(197,197,197,0.05));
background: #f2f2f2 -ms-linear-gradient(left, rgba(197,197,197,0), rgba(197,197,197,0.05));
background: #f2f2f2 linear-gradient(left, rgba(197,197,197,0), rgba(197,197,197,0.05));
color: #333333;
}
.polymer-ui-dark-bg {
background: #333333 -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.35));
background: #333333 -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.35));
background: #333333 -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.35));
background: #333333 linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.35));
color: #ededed;
}
.polymer-ui-body-text {
font: 16px 'Helvetica Neue', Helvetica, Arial, Roboto;
}
/*
.polymer-ui-light-bg {
background-color: #d9d9d9;
color: #333;
}
.polymer-ui-dark-bg {
background-color: #262626;
color: #eee;
}
.polymer-ui-bg-gray {
background-color: #d9d9d9;
}
.polymer-ui-bg-jl-dark-theme {
background-color: #4d4d4d;
}
.polymer-ui-header-gray {
background-color: #262626;
}
.polymer-ui-header-jl-dark-theme {
background-color: #262626;
}
.polymer-ui-header {
background-color: #f3f3f0;
}
*/

55
examples/polymer/polymer-ui-elements/polymer-ui-accordion/index.html Normal file
View file

@ -0,0 +1,55 @@
<!doctype html>
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<html>
<head>
<title>polymer-ui-accordion</title>
<script src="../../polymer/polymer.js"></script>
<link rel="import" href="polymer-ui-accordion.html">
<link rel="stylesheet" href="../basic.css">
<style>
polymer-ui-collapsible {
margin-bottom: 2px;
border: 1px solid #ddd;
border-radius: 3px;
}
.polymer-ui-collapsible-header {
padding: 10px;
border-bottom: 1px solid #bcbcbc;
font-weight: bold;
cursor: pointer;
}
.content {
padding: 10px;
}
</style>
</head>
<body class="polymer-ui-body-text">
<polymer-ui-accordion selected="0">
<polymer-ui-collapsible>
<div class="polymer-ui-collapsible-header">Header 1</div>
<div class="content">
Forma temperiemque cornua sidera dissociata cornua recessit innabilis ligavit: solidumque coeptis nullus caelum sponte phoebe di regat mentisque tanta austro capacius amphitrite sui quin postquam semina fossae liquidum umor galeae coeptis caligine liberioris quin liquidum matutinis invasit posset: flexi glomeravit radiis certis invasit oppida postquam onerosior inclusum dominari opifex terris pace finxit quam aquae nunc sine altae auroram quam habentem homo totidemque scythiam in pondus ensis tegit caecoque poena lapidosos humanas coeperunt poena aetas totidem nec natura aethera locavit caelumque distinxit animalibus phoebe cingebant moderantum porrexerat terrae possedit sua sole diu summaque obliquis melioris orbem
</div>
</polymer-ui-collapsible>
<polymer-ui-collapsible>
<div class="polymer-ui-collapsible-header">Header 2</div>
<div class="content">
Coercuit iunctarum vix sic aberant spisso imagine litem cetera nubes ambitae tanta usu circumfuso fulminibus umentia rectumque iuga pluviaque meis semina regat ne campoque meis coeperunt nix cura iunctarum ligavit: secant ventos seductaque permisit sic iunctarum locoque his coeptis tum terras animalia recepta aethera cornua invasit tollere videre tonitrua humanas otia tuba alta dissociata sanctius adsiduis inclusum caesa ita onus sine pluviaque litem manebat fixo extendi ubi inposuit cum sublime membra undas orba forma deducite aethera turba coercuit retinebat obliquis bracchia nisi mentisque origine peregrinum manebat
</div>
</polymer-ui-collapsible>
<polymer-ui-collapsible>
<div class="polymer-ui-collapsible-header">Header 3</div>
<div class="content">
Forma temperiemque cornua sidera dissociata cornua recessit innabilis ligavit: solidumque coeptis nullus caelum sponte phoebe di regat mentisque tanta austro capacius amphitrite sui quin postquam semina fossae liquidum umor galeae coeptis caligine liberioris quin liquidum matutinis invasit posset: flexi glomeravit radiis certis invasit oppida postquam onerosior inclusum dominari opifex terris pace finxit quam aquae nunc sine altae auroram quam habentem homo totidemque scythiam in pondus ensis tegit caecoque poena lapidosos humanas coeperunt poena aetas totidem nec natura aethera locavit caelumque
</div>
</polymer-ui-collapsible>
</polymer-ui-accordion>
</body>
</html>

11
examples/polymer/polymer-ui-elements/polymer-ui-accordion/polymer-ui-accordion.css Normal file
View file

@ -0,0 +1,11 @@
/*
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
*/
@host {
* {
display: block;
}
}

44
examples/polymer/polymer-ui-elements/polymer-ui-accordion/polymer-ui-accordion.html Normal file
View file

@ -0,0 +1,44 @@
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<!--
/**
* @module Polymer UI Elements
*/
/**
* polymer-ui-accordion is a simple accordion style element. It should
* be used in conjunction with polymer-ui-collapsible. By default
* only one collapsible stays open at a time. To have multiple
* collapsibles open set "multi" property on the accordion.
*
* Example:
*
* <polymer-ui-accordion selected="0">
* <polymer-ui-collapsible>
* <div class="polymer-ui-collapsible-header">Header 1</div>
* <div>....</div>
* </polymer-ui-collapsible>
* <polymer-ui-collapsible>
* <div class="polymer-ui-collapsible-header">Header 2</div>
* <div>....</div>
* </polymer-ui-collapsible>
* <polymer-ui-collapsible>
* <div class="polymer-ui-collapsible-header">Header 3</div>
* <div>....</div>
* </polymer-ui-collapsible>
* </polymer-ui-accordion>
*
* @class polymer-ui-accordion
*/
-->
<link rel="import" href="../../polymer-elements/polymer-selector/polymer-selector.html">
<link rel="import" href="../polymer-ui-collapsible/polymer-ui-collapsible.html">
<polymer-element name="polymer-ui-accordion" extends="polymer-selector">
<template>
<link rel="stylesheet" href="polymer-ui-accordion.css">
<shadow></shadow>
</template>
</polymer-element>

40
examples/polymer/polymer-ui-elements/polymer-ui-collapsible/index.html Normal file
View file

@ -0,0 +1,40 @@
<!doctype html>
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<html>
<head>
<title>polymer-ui-collapsible</title>
<script src="../../polymer/polymer.js"></script>
<link rel="import" href="polymer-ui-collapsible.html">
<link rel="stylesheet" href="../basic.css">
<style>
polymer-ui-collapsible {
margin-bottom: 2px;
border: 1px solid #ddd;
border-radius: 3px;
}
.polymer-ui-collapsible-header {
padding: 10px;
border-bottom: 1px solid #bcbcbc;
font-weight: bold;
cursor: pointer;
}
.content {
padding: 10px;
}
</style>
</head>
<body class="polymer-ui-body-text"">
<polymer-ui-collapsible>
<div class="polymer-ui-collapsible-header">Header 1</div>
<div class="content">
Forma temperiemque cornua sidera dissociata cornua recessit innabilis ligavit: solidumque coeptis nullus caelum sponte phoebe di regat mentisque tanta austro capacius amphitrite sui quin postquam semina fossae liquidum umor galeae coeptis caligine liberioris quin liquidum matutinis invasit posset: flexi glomeravit radiis certis invasit oppida postquam onerosior inclusum dominari opifex terris pace finxit quam aquae nunc sine altae auroram quam habentem homo totidemque scythiam in pondus ensis tegit caecoque poena lapidosos humanas coeperunt poena aetas totidem nec natura aethera locavit caelumque distinxit animalibus phoebe cingebant moderantum porrexerat terrae possedit sua sole diu summaque obliquis melioris orbem
</div>
</polymer-ui-collapsible>
</body>
</html>

15
examples/polymer/polymer-ui-elements/polymer-ui-collapsible/polymer-ui-collapsible.css Normal file
View file

@ -0,0 +1,15 @@
/*
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
*/
@host {
* {
display: block;
}
}
#collapsibleBody {
height: 0;
}

48
examples/polymer/polymer-ui-elements/polymer-ui-collapsible/polymer-ui-collapsible.html Normal file
View file

@ -0,0 +1,48 @@
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<!--
/**
* @module Polymer UI Elements
*/
/**
* polymer-ui-collapsible has a header and a body and the body appears or
* disappears based on "active" property. Tapping on the header will toggle
* the active state. User needs to put the class "polymer-ui-collapsible-header"
* on the element to indicate it represents a header.
*
* Example:
*
* <polymer-ui-collapsible>
* <div class="polymer-ui-collapsible-header">Title</div>
* <div>
* some content...
* </div>
* </polymer-ui-collapsible>
*
* @class polymer-ui-collapsible
*/
-->
<link rel="import" href="../../polymer-elements/polymer-collapse/polymer-collapse.html">
<polymer-element name="polymer-ui-collapsible" attributes="active">
<template>
<link rel="stylesheet" href="polymer-ui-collapsible.css">
<div on-tap="toggle">
<content select=".polymer-ui-collapsible-header"></content>
</div>
<div id="collapsibleBody">
<content></content>
</div>
<polymer-collapse targetId="collapsibleBody" closed="{{!active}}"></polymer-collapse>
</template>
<script>
Polymer('polymer-ui-collapsible', {
toggle: function() {
this.active = !this.active;
}
});
</script>
</polymer-element>

BIN
examples/polymer/polymer-ui-elements/polymer-ui-icon-button/btn_light.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.6 KiB

55
examples/polymer/polymer-ui-elements/polymer-ui-icon-button/index.html Normal file
View file

@ -0,0 +1,55 @@
<!doctype html>
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<html>
<head>
<title>polymer-ui-icon-button</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- load toolkit -->
<script src="../../polymer/polymer.js"></script>
<!-- import elements-->
<link rel="import" href="polymer-ui-icon-button.html">
<!-- -->
<link rel="stylesheet" href="../basic.css">
</head>
<body class="polymer-ui-body-text">
<div>
<polymer-ui-icon-button icon="drawer"></polymer-ui-icon-button>
<polymer-ui-icon-button icon="menu"></polymer-ui-icon-button>
<polymer-ui-icon-button icon="search"></polymer-ui-icon-button>
<polymer-ui-icon-button icon="dropdown"></polymer-ui-icon-button>
<polymer-ui-icon-button icon="close"></polymer-ui-icon-button>
<polymer-ui-icon-button icon="add"></polymer-ui-icon-button>
<polymer-ui-icon-button icon="trash"></polymer-ui-icon-button>
<polymer-ui-icon-button icon="settings"></polymer-ui-icon-button>
<polymer-ui-icon-button icon="dialog"></polymer-ui-icon-button>
</div>
<div theme="polymer-ui-light-theme">
<polymer-ui-icon-button icon="drawer"></polymer-ui-icon-button>
<polymer-ui-icon-button icon="menu"></polymer-ui-icon-button>
<polymer-ui-icon-button icon="search"></polymer-ui-icon-button>
<polymer-ui-icon-button icon="dropdown"></polymer-ui-icon-button>
<polymer-ui-icon-button icon="close"></polymer-ui-icon-button>
<polymer-ui-icon-button icon="add"></polymer-ui-icon-button>
<polymer-ui-icon-button icon="trash"></polymer-ui-icon-button>
<polymer-ui-icon-button icon="settings"></polymer-ui-icon-button>
<polymer-ui-icon-button icon="dialog"></polymer-ui-icon-button>
</div>
<div theme="polymer-ui-dark-theme" class="polymer-ui-dark-bg">
<polymer-ui-icon-button icon="drawer"></polymer-ui-icon-button>
<polymer-ui-icon-button icon="menu"></polymer-ui-icon-button>
<polymer-ui-icon-button icon="search"></polymer-ui-icon-button>
<polymer-ui-icon-button icon="dropdown"></polymer-ui-icon-button>
<polymer-ui-icon-button icon="close"></polymer-ui-icon-button>
<polymer-ui-icon-button icon="add"></polymer-ui-icon-button>
<polymer-ui-icon-button icon="trash"></polymer-ui-icon-button>
<polymer-ui-icon-button icon="settings"></polymer-ui-icon-button>
<polymer-ui-icon-button icon="dialog"></polymer-ui-icon-button>
</div>
</body>
</html>

35
examples/polymer/polymer-ui-elements/polymer-ui-icon-button/polymer-ui-icon-button.css Normal file
View file

@ -0,0 +1,35 @@
/*
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
*/
@host {
* {
display: inline-block;
box-sizing: border-box;
-moz-box-sizing: border-box;
width: 44px;
height: 44px;
padding: 10px;
vertical-align: middle;
cursor: pointer;
background: url(btn_light.png) top left no-repeat;
background-size: cover;
}
*:hover {
background-position: 0 -44px;
}
*.selected {
background-position: 0 -88px;
}
*:active, *.selected:active {
background-position: 0 -132px;
}
}
polymer-ui-icon {
display: block !important;
}

77
examples/polymer/polymer-ui-elements/polymer-ui-icon-button/polymer-ui-icon-button.html Normal file
View file

@ -0,0 +1,77 @@
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<!--
/**
* @module Polymer UI Elements
*/
/**
* polymer-ui-icon-button enables you to place an image centered in a button.
*
* Example:
*
* <polymer-ui-icon-button src="star.png"></polymer-ui-icon-button>
*
* Polymer includes an icon set. The property "icon" can be used
* to specify which icon to use.
*
* Example:
*
* <polymer-ui-icon-button icon="menu"></polymer-ui-icon-button>
*
* @class polymer-ui-icon-button
*/
-->
<link rel="import" href="../polymer-ui-icon/polymer-ui-icon.html">
<polymer-element name="polymer-ui-icon-button" attributes="src index icon active">
<template>
<link rel="stylesheet" href="polymer-ui-icon-button.css">
<polymer-ui-icon src="{{src}}" index="{{index}}" icon="{{icon}}"></polymer-ui-icon>
</template>
<script>
Polymer('polymer-ui-icon-button', {
/**
* The URL of an image for the icon.
*
* @attribute src
* @type string
* @default ''
*/
src: '',
/**
* If true, border is placed around the button to indicate
* active state.
*
* @attribute active
* @type boolean
* @default false
*/
active: false,
/**
* Specifies the icon from the Polymer icon set.
*
* @attribute icon
* @type string
* @default ''
*/
icon: '',
/**
* If a theme is applied that includes an icon set, the index of the
* icon to display.
*
* @attribute index
* @type number
* @default -1
*/
index: -1,
activeChanged: function() {
// TODO(sjmiles): sugar this common case
this.classList.toggle('selected', this.active);
}
});
</script>
</polymer-element>

55
examples/polymer/polymer-ui-elements/polymer-ui-icon/index.html Normal file
View file

@ -0,0 +1,55 @@
<!doctype html>
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<html>
<head>
<title>polymer-ui-icon</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- load toolkit -->
<script src="../../polymer/polymer.js"></script>
<!-- import elements-->
<link rel="import" href="polymer-ui-icon.html">
<!-- -->
<link rel="stylesheet" href="../basic.css">
</head>
<body class="polymer-ui-body-text">
<div>
<polymer-ui-icon icon="drawer"></polymer-ui-icon>
<polymer-ui-icon icon="menu"></polymer-ui-icon>
<polymer-ui-icon icon="search"></polymer-ui-icon>
<polymer-ui-icon icon="dropdown"></polymer-ui-icon>
<polymer-ui-icon icon="close"></polymer-ui-icon>
<polymer-ui-icon icon="add"></polymer-ui-icon>
<polymer-ui-icon icon="trash"></polymer-ui-icon>
<polymer-ui-icon icon="settings"></polymer-ui-icon>
<polymer-ui-icon icon="dialog"></polymer-ui-icon>
</div>
<div theme="polymer-ui-light-theme">
<polymer-ui-icon icon="drawer"></polymer-ui-icon>
<polymer-ui-icon icon="menu"></polymer-ui-icon>
<polymer-ui-icon icon="search"></polymer-ui-icon>
<polymer-ui-icon icon="dropdown"></polymer-ui-icon>
<polymer-ui-icon icon="close"></polymer-ui-icon>
<polymer-ui-icon icon="add"></polymer-ui-icon>
<polymer-ui-icon icon="trash"></polymer-ui-icon>
<polymer-ui-icon icon="settings"></polymer-ui-icon>
<polymer-ui-icon icon="dialog"></polymer-ui-icon>
</div>
<div theme="polymer-ui-dark-theme" class="polymer-ui-dark-bg">
<polymer-ui-icon icon="drawer"></polymer-ui-icon>
<polymer-ui-icon icon="menu"></polymer-ui-icon>
<polymer-ui-icon icon="search"></polymer-ui-icon>
<polymer-ui-icon icon="dropdown"></polymer-ui-icon>
<polymer-ui-icon icon="close"></polymer-ui-icon>
<polymer-ui-icon icon="add"></polymer-ui-icon>
<polymer-ui-icon icon="trash"></polymer-ui-icon>
<polymer-ui-icon icon="settings"></polymer-ui-icon>
<polymer-ui-icon icon="dialog"></polymer-ui-icon>
</div>
</body>
</html>

25
examples/polymer/polymer-ui-elements/polymer-ui-icon/polymer-ui-icon.css Normal file
View file

@ -0,0 +1,25 @@
/*
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
*/
@host {
* {
display: inline-block;
vertical-align: middle;
cursor: pointer;
background-repeat: no-repeat;
}
.polymer-ui-dark-icon, .polymer-ui-light-theme {
background-position: -24px 0;
}
.polymer-ui-light-icon, .polymer-ui-dark-theme {
background-position: -72px 0;
}
.polymer-ui-icons {
background-image: url(../assets/action-icons.png);
}
}

116
examples/polymer/polymer-ui-elements/polymer-ui-icon/polymer-ui-icon.html Normal file
View file

@ -0,0 +1,116 @@
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<!--
/**
* Polymer-UI Elements
*
* @module Polymer-UI Elements
*/
/**
* polymer-ui-icon is a 24x24 glyph expressed as a background-image.
*
* Example:
*
* <polymer-ui-icon src="star.png"></polymer-ui-icon>
*
* Optionally can use other size like 32x32 by setting the attribute "size" to "32":
*
* <polymer-ui-icon src="big_star.png" size="32"></polymer-ui-icon>
*
* Polymer includes an icon set. The property "icon" can be used
* to specify which icon to use.
*
* Example:
*
* <polymer-ui-icon icon="menu"></polymer-ui-icon>
*
* @class polymer-ui-icon
*/
-->
<link rel="import" href="../polymer-ui-theme-aware/polymer-ui-theme-aware.html">
<polymer-element name="polymer-ui-icon" extends="polymer-ui-theme-aware" attributes="src size index icon">
<template>
<link rel="stylesheet" href="polymer-ui-icon.css">
</template>
<script>
(function() {
Polymer('polymer-ui-icon', {
/**
* The URL of an image for the icon.
*
* @attribute src
* @type string
* @default ''
*/
src: '',
/**
* Specifies the size of the icon.
*
* @attribute size
* @type string
* @default 24
*/
size: 24,
/**
* Specifies the icon from the Polymer icon set.
*
* @attribute icon
* @type string
* @default ''
*/
icon: '',
bx: 0,
by: 0,
ready: function() {
this.sizeChanged();
},
sizeChanged: function() {
this.style.width = this.style.height = this.size + 'px';
},
iconChanged: function() {
this.index = this.icon in icons ? icons[this.icon] : -1;
},
indexChanged: function() {
this.classList.add('polymer-ui-icons');
this.by = -this.size * this.index;
this.updateIcon();
},
srcChanged: function() {
this.classList.remove('polymer-ui-icons');
this.style.backgroundImage = 'url(' + this.src + ')';
this.updateIcon();
},
themeChanged: function(old) {
this.style.backgroundPosition = '';
this.classList.switch(old, this.theme);
this.asyncMethod('updateIcon');
},
updateIcon: function() {
if (this.src) {
this.style.backgroundPosition = 'center';
} else {
this.bx = parseFloat(getComputedStyle(this).backgroundPosition.split(' ').shift());
this.style.backgroundPosition = (this.bx + 'px') + ' ' + (this.by + 'px');
}
}
});
var icons = {
drawer: 0,
menu: 1,
search: 2,
dropdown: 3,
close: 4,
add: 5,
trash: 6,
refresh: 7,
settings: 8,
dialog: 9
};
})();
</script>
</polymer-element>

33
examples/polymer/polymer-ui-elements/polymer-ui-menu-item/index.html Normal file
View file

@ -0,0 +1,33 @@
<!doctype html>
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<html>
<head>
<title>polymer-ui-menu-item</title>
<script src="../../polymer/polymer.js"></script>
<link rel="import" href="../polymer-ui-menu-item/polymer-ui-menu-item.html">
<link rel="stylesheet" href="../basic.css">
<style>
section {
width: 300px;
padding: 10px;
}
</style>
</head>
<body class="polymer-ui-body-text">
<h2>polymer-ui-light-theme</h2>
<section theme="polymer-ui-light-theme">
<polymer-ui-menu-item icon="settings" label="Settings"></polymer-ui-menu-item>
<polymer-ui-menu-item icon="dialog" active label="Dialog"></polymer-ui-menu-item>
</section>
<h2>polymer-ui-dark-theme</h2>
<section class="polymer-ui-dark-bg" theme="polymer-ui-dark-theme">
<polymer-ui-menu-item icon="settings" label="Settings"></polymer-ui-menu-item>
<polymer-ui-menu-item icon="dialog" active label="Dialog"></polymer-ui-menu-item>
</section>
</body>
</html>

81
examples/polymer/polymer-ui-elements/polymer-ui-menu-item/polymer-ui-menu-item.css Normal file
View file

@ -0,0 +1,81 @@
/*
Copyright 2013 The Toolkitchen Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
*/
@host {
* {
display: block;
}
}
/* item */
#item {
display: block;
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 40px;
line-height: 35px;
padding: 0 10px;
border: 1px solid transparent;
border-radius: 3px;
white-space: nowrap;
cursor: pointer;
opacity: 0.5;
}
#item:hover {
opacity: 0.9;
}
#item[active] {
opacity: 1;
}
#item.polymer-ui-light-theme[active] {
background: #f2f2f2;
border: 1px solid rgba(0, 0, 0, 0.15);
}
#item.polymer-ui-dark-theme {
color: #b3b3b3;
}
#item.polymer-ui-dark-theme:hover {
color: rgba(255, 255, 255, 0.9);
}
#item.polymer-ui-dark-theme[active] {
background-color: #000;
border: 1px solid rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.9);
}
#item[active].no-active-bg {
background-color: transparent;
border: 1px solid transparent;
}
/* icon and label */
polymer-ui-icon:not([showing]) {
display: none !important;
}
#item polymer-ui-icon {
margin-right: 16px;
}
#label {
vertical-align: middle;
padding-right: 20px;
}
/* menu */
#menu {
margin-left: 44px;
height: 0;
/* override @host style on polymer-ui-menu */
background-image: none !important;
padding: 0 !important;
}

Some files were not shown because too many files have changed in this diff Show more