GreenPolyProducts/polymer
5
0
Fork 0
mirror of https://github.com/Polymer/polymer.git synced 2026-08-19 01:14:44 -05:00
Code Issues Packages Projects Releases Wiki Activity

update apps, only call CustomElements.upgradeSubtree if it exists

Browse Source
This commit is contained in:
Scott J. Miles
2014-10-16 22:28:12 -07:00
parent 4aa978f4a9
commit 8f5bf3c6ae
10 changed files with 165 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+2
View File
@@ -4,3 +4,5 @@ neoprene
Experimental Super Spy Stuff
![](http://www.glydeamerica.com/wp-content/uploads/2013/08/top_secret.gif)
https://gist.github.com/sjmiles/c10a0d3ee33371b18b16
neoprene/polymer/features/template.html
+1 -1
View File
@@ -18,7 +18,7 @@
},
stampTemplate: function(template) {
this._stampTemplate(template || this._template, this.root);
if (window.CustomElements) {
if (window.CustomElements && window.CustomElements.upgradeSubtree) {
CustomElements.upgradeSubtree(this.root);
}
},
projects/mail/app-xplat.html
+35
View File
@@ -0,0 +1,35 @@
<!doctype html>
<html>
<head>
<title>WheeMail</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../../perf-lib/perf.js"></script>
<script src="../../../../components-git/webcomponentsjs/HTMLImports.js"></script>
<script src="../../../../components-git/webcomponentsjs/CustomElements.js"></script>
<link rel="import" href="src/elements.html">
<link rel="stylesheet" href="src/app.css">
<link rel="import" href="assets/icons.html">
<link rel="import" href="assets/data.html">
<script>
//Polymer.log.events = true;
</script>
</head>
<body fullbleed vertical layout>
<script>console.perf();</script>
<x-app flex></x-app>
<script>console.perfEnd();</script>
</body>
</html>
projects/mail/app.html
+7 -119
View File
@@ -2,142 +2,30 @@
<html>
<head>
<script src="../../perf-lib/perf.js"></script>
<meta charset="utf-8">
<title>WheeMail</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="import" href="../../neoprene/polymer.html">
<link rel="import" href="../../neoprene/elements/x-overlay.html">
<link rel="import" href="../../neoprene/elements/x-icon.html">
<link rel="import" href="../../neoprene/elements/x-icon-button.html">
<link rel="import" href="../../neoprene/elements/x-toolbar.html">
<link rel="import" href="../../neoprene/elements/x-pages.html">
<link rel="import" href="../../neoprene/elements/x-selector.html">
<link rel="import" href="../../neoprene/elements/x-search-input.html">
<link rel="import" href="../../neoprene/elements/x-drop-button.html">
<link rel="import" href="../../neoprene/elements/x-repeater.html">
<link rel="import" href="../../neoprene/elements/paper-button.html">
<script src="../../perf-lib/perf.js"></script>
<link rel="import" href="elements/elements.html">
<link rel="import" href="src/elements.html">
<link rel="stylesheet" href="src/app.css">
<link rel="import" href="assets/icons.html">
<link rel="import" href="assets/data.html">
<link rel="stylesheet" href="app.css">
<script>
//Polymer.log.events = true;
</script>
</head>
<body fullbleed vertical layout>
<script>console.perf();</script>
<script>
//Polymer.log.events = true;
</script>
<x-app flex></x-app>
<style>
x-app {
display: block;
}
x-app > #otherBars {
margin-right: 16px;
}
x-app > #columns {
margin-left: 32px;
overflow: hidden;
}
x-app #leftColumn {
width: 200px;
margin-right: 8px;
}
x-app #selector > [selected] {
background-color: #FAF0E8 !important;
}
x-app #reader {
padding: 24px;
}
</style>
<template>
<!-- appbar -->
<x-appbar></x-appbar>
<!-- other bars -->
<div id="otherBars">
<x-mailbar id="mailbar"></x-mailbar>
<x-composebar></x-composebar>
</div>
<!-- columns -->
<div id="columns" flex horizontal layout>
<!-- left column -->
<div id="leftColumn" vertical layout>
<x-repeater id="labels" kind="x-label"></x-repeater>
<x-contactbar></x-contactbar>
<x-repeater id="contacts" kind="x-contact-item" flex scroll></x-repeater>
</div>
<!-- main column -->
<x-pages id="pages" flex vertical layout>
<x-selector id="selector" flex scroll>
<x-repeater id="mail" kind="x-item"></x-repeater>
</x-selector>
<div id="reader" flex>And now for something completely different...</div>
</x-pages>
</div>
</template>
<script>
Polymer({
name: 'x-app',
hostAttributes: 'vertical layout',
listeners: {
'reader.click': 'mailListAction',
'mailbar-back': 'mailListAction',
'selected': 'selectedAction'
},
created: function() {
this.$.mail.items = data.items;
this.$.labels.items = data.items.slice(0, 10);
this.$.contacts.items = data.items.slice(20, 35);
this.selectedPage = 0;
},
selectedAction: function(e) {
this.selectedPage = 1;
},
mailListAction: function(e) {
this.selectedPage = 0;
},
set selectedPage(page) {
this.$.mailbar.selected = page;
this.$.pages.selected = page;
}
});
</script>
<script>console.perfEnd();</script>
</body>
projects/mail/elements/x-item.html
+5 -12
View File
@@ -67,6 +67,11 @@
'box.click': 'click'
},
bind: {
item: 'renderItem',
icon: 'box.icon'
},
created: function() {
this.icon = 'box';
},
@@ -76,18 +81,6 @@
this.icon = (this.icon === 'box') ? 'checked' : 'box';
},
set item(item) {
this.renderItem(item);
},
set icon(icon) {
this._icon = this.$.box.icon = icon;
},
get icon() {
return this._icon;
},
renderItem: function(item) {
this.$.wrapper.className = this.computeItemClass(item);
this.$.from.textContent = item.from;
projects/mail/app.css → projects/mail/src/app.css
View File
projects/mail/src/elements.html
+15
View File
@@ -0,0 +1,15 @@
<link rel="import" href="../../../neoprene/polymer.html">
<link rel="import" href="../../../neoprene/elements/x-overlay.html">
<link rel="import" href="../../../neoprene/elements/x-icon.html">
<link rel="import" href="../../../neoprene/elements/x-icon-button.html">
<link rel="import" href="../../../neoprene/elements/x-toolbar.html">
<link rel="import" href="../../../neoprene/elements/x-pages.html">
<link rel="import" href="../../../neoprene/elements/x-selector.html">
<link rel="import" href="../../../neoprene/elements/x-search-input.html">
<link rel="import" href="../../../neoprene/elements/x-drop-button.html">
<link rel="import" href="../../../neoprene/elements/x-repeater.html">
<link rel="import" href="../../../neoprene/elements/paper-button.html">
<link rel="import" href="../elements/elements.html">
<link rel="import" href="x-app.html">
projects/mail/src/x-app.html
+100
View File
@@ -0,0 +1,100 @@
<style>
x-app {
display: block;
}
x-app > #otherBars {
margin-right: 16px;
}
x-app > #columns {
margin-left: 32px;
overflow: hidden;
}
x-app #leftColumn {
width: 200px;
margin-right: 8px;
}
x-app #selector > [selected] {
background-color: #FAF0E8 !important;
}
x-app #reader {
padding: 24px;
}
</style>
<template>
<!-- appbar -->
<x-appbar></x-appbar>
<!-- other bars -->
<div id="otherBars">
<x-mailbar id="mailbar"></x-mailbar>
<x-composebar></x-composebar>
</div>
<!-- columns -->
<div id="columns" flex horizontal layout>
<!-- left column -->
<div id="leftColumn" vertical layout>
<x-repeater id="labels" kind="x-label"></x-repeater>
<x-contactbar></x-contactbar>
<x-repeater id="contacts" kind="x-contact-item" flex scroll></x-repeater>
</div>
<!-- main column -->
<x-pages id="pages" flex vertical layout>
<x-selector id="selector" flex scroll>
<x-repeater id="mail" kind="x-item"></x-repeater>
</x-selector>
<div id="reader" flex>And now for something completely different...</div>
</x-pages>
</div>
</template>
<script>
Polymer({
name: 'x-app',
hostAttributes: 'vertical layout',
listeners: {
'reader.click': 'mailListAction',
'mailbar-back': 'mailListAction',
'selected': 'selectedAction'
},
created: function() {
this.$.mail.items = data.items;
this.$.labels.items = data.items.slice(0, 10);
this.$.contacts.items = data.items.slice(20, 35);
this.selectedPage = 0;
},
selectedAction: function(e) {
this.selectedPage = 1;
},
mailListAction: function(e) {
this.selectedPage = 0;
},
set selectedPage(page) {
this.$.mailbar.selected = page;
this.$.pages.selected = page;
}
});
</script>
projects/sampler/x.html → projects/sampler/app-xplat.html
View File
projects/sampler/index.html → projects/sampler/app.html
View File