Skip to content

Commit f3cde93

Browse files
keanuleekeanulee
committed
Sort effects
1 parent d947f73 commit f3cde93

File tree

3 files changed

+284
-3
lines changed

3 files changed

+284
-3
lines changed

‎app-scroll-effects/app-scroll-effects.html

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,10 @@
88
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
99
-->
1010

11-
<link rel="import" href="effects/waterfall.html">
12-
<link rel="import" href="effects/resize-title.html">
1311
<link rel="import" href="effects/blend-background.html">
14-
<link rel="import" href="effects/parallax-background.html">
1512
<link rel="import" href="effects/fade-background.html">
1613
<link rel="import" href="effects/material.html">
14+
<link rel="import" href="effects/parallax-background.html">
15+
<link rel="import" href="effects/resize-snapped-title.html">
16+
<link rel="import" href="effects/resize-title.html">
17+
<link rel="import" href="effects/waterfall.html">

‎templates/cities/index.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!--
2+
@license
3+
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5+
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6+
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7+
Code distributed by Google as part of the polymer project is also
8+
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
9+
-->
10+
11+
<!doctype html>
12+
<html>
13+
<head>
14+
<meta charset="utf-8">
15+
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
16+
<meta name="theme-color" content="#00AA8D">
17+
18+
<title>Cities</title>
19+
20+
<link rel="manifest" href="manifest.json">
21+
22+
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
23+
24+
<link rel="import" href="../../../iron-ajax/iron-ajax.html">
25+
<link rel="import" href="src/cities-app.html">
26+
27+
<style>
28+
29+
body {
30+
margin: 0;
31+
font-family: sans-serif;
32+
background-color: #f5f5f5;
33+
}
34+
35+
</style>
36+
37+
</head>
38+
<body unresolved>
39+
40+
<cities-app></cities-app>
41+
42+
</body>
43+
</html>

‎templates/cities/src/cities-app.html

Lines changed: 237 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,237 @@
1+
<!--
2+
@license
3+
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5+
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6+
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7+
Code distributed by Google as part of the polymer project is also
8+
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
9+
-->
10+
11+
<link rel="import" href="../../../../polymer/polymer.html">
12+
13+
<link rel="import" href="../../../../iron-iconset-svg/iron-iconset-svg.html">
14+
15+
<link rel="import" href="../../../../paper-icon-button/paper-icon-button.html">
16+
<link rel="import" href="../../../../paper-checkbox/paper-checkbox.html">
17+
18+
<link rel="import" href="../../../app-drawer-layout/app-drawer-layout.html">
19+
<link rel="import" href="../../../app-drawer/app-drawer.html">
20+
<link rel="import" href="../../../app-header-layout/app-header-layout.html">
21+
<link rel="import" href="../../../app-header/app-header.html">
22+
<link rel="import" href="../../../app-scroll-effects/app-scroll-effects.html">
23+
<link rel="import" href="../../../app-toolbar/app-toolbar.html">
24+
25+
<link rel="import" href="../../../demo/sample-content.html">
26+
27+
<iron-iconset-svg name="app" size="24">
28+
<svg><defs>
29+
<g id="menu"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></g>
30+
</defs></svg>
31+
</iron-iconset-svg>
32+
33+
<dom-module id="cities-app">
34+
35+
<template>
36+
37+
<style>
38+
39+
app-drawer section {
40+
height: 100%;
41+
overflow-y: auto;
42+
-webkit-overflow-scrolling: touch;
43+
}
44+
45+
app-drawer h2 {
46+
margin: 8px 0 0;
47+
padding: 18px;
48+
font-size: 18px;
49+
}
50+
51+
app-drawer paper-checkbox {
52+
display: block;
53+
padding: 18px;
54+
}
55+
56+
app-header {
57+
color: #fff;
58+
background-color: #3f51b5;
59+
--app-header-background-front-layer: {
60+
background-image: url(//app-layout-assets.appspot.com/assets/PharrellWilliams.jpg);
61+
};
62+
}
63+
64+
div[title] {
65+
font-size: 2em;
66+
}
67+
68+
</style>
69+
70+
<app-drawer-layout>
71+
72+
<app-drawer swipe-open>
73+
<section>
74+
<h2>app-header Properties</h2>
75+
<paper-checkbox checked="{{condenses}}">
76+
condenses
77+
</paper-checkbox>
78+
<paper-checkbox checked="{{fixed}}">
79+
fixed
80+
</paper-checkbox>
81+
<paper-checkbox checked="{{reveals}}">
82+
reveals
83+
</paper-checkbox>
84+
<paper-checkbox checked="{{shadow}}">
85+
shadow
86+
</paper-checkbox>
87+
88+
<h2>app-header Effects</h2>
89+
<paper-checkbox checked="{{blendBackground}}">
90+
blend-background
91+
</paper-checkbox>
92+
<paper-checkbox checked="{{fadeBackground}}">
93+
fade-background
94+
</paper-checkbox>
95+
<paper-checkbox checked="{{parallaxBackground}}">
96+
parallax-background
97+
</paper-checkbox>
98+
<paper-checkbox checked="{{resizeSnappedTitle}}">
99+
resize-snapped-title
100+
</paper-checkbox>
101+
<paper-checkbox checked="{{resizeTitle}}">
102+
resize-title
103+
</paper-checkbox>
104+
<paper-checkbox checked="{{waterfall}}">
105+
waterfall
106+
</paper-checkbox>
107+
</section>
108+
</app-drawer>
109+
110+
<app-header-layout>
111+
112+
<app-header
113+
condenses="[[condenses]]"
114+
fixed="[[fixed]]"
115+
reveals="[[reveals]]"
116+
shadow="[[shadow]]"
117+
effects="[[_computeEffects(blendBackground, fadeBackground, parallaxBackground, resizeSnappedTitle, resizeTitle, waterfall)]]">
118+
119+
<app-toolbar>
120+
<paper-icon-button icon="app:menu" drawer-toggle></paper-icon-button>
121+
<div condensed-title>San Francisco, California</div>
122+
</app-toolbar>
123+
124+
<app-toolbar></app-toolbar>
125+
126+
<app-toolbar>
127+
<div title spacer>San Francisco</div>
128+
</app-toolbar>
129+
130+
</app-header>
131+
132+
<sample-content size="100"></sample-content>
133+
134+
</app-header-layout>
135+
136+
</app-drawer-layout>
137+
138+
</template>
139+
140+
<script>
141+
142+
Polymer({
143+
144+
is: 'cities-app',
145+
146+
properties: {
147+
148+
condenses: {
149+
type: Boolean,
150+
value: true
151+
},
152+
153+
fixed: {
154+
type: Boolean,
155+
value: true
156+
},
157+
158+
reveals: {
159+
type: Boolean,
160+
value: false
161+
},
162+
163+
shadow: {
164+
type: Boolean,
165+
value: false
166+
},
167+
168+
blendBackground: {
169+
type: Boolean,
170+
value: true
171+
},
172+
173+
fadeBackground: {
174+
type: Boolean,
175+
value: false
176+
},
177+
178+
parallaxBackground: {
179+
type: Boolean,
180+
value: true
181+
},
182+
183+
resizeSnappedTitle: {
184+
type: Boolean,
185+
value: false
186+
},
187+
188+
resizeTitle: {
189+
type: Boolean,
190+
value: true
191+
},
192+
193+
waterfall: {
194+
type: Boolean,
195+
value: true
196+
}
197+
198+
},
199+
200+
observers: [
201+
'_removeIf("fixed", reveals)',
202+
'_removeIf("reveals", fixed)',
203+
'_removeIf("shadow", waterfall)',
204+
'_removeIf("blendBackground", fadeBackground)',
205+
'_removeIf("fadeBackground", blendBackground)',
206+
'_removeIf("resizeSnappedTitle", resizeTitle)',
207+
'_removeIf("resizeTitle", resizeSnappedTitle)',
208+
'_removeIf("waterfall", shadow)'
209+
],
210+
211+
_computeEffects: function() {
212+
return [
213+
this.blendBackground ? 'blend-background ' : '',
214+
this.fadeBackground ? 'fade-background ' : '',
215+
this.parallaxBackground ? 'parallax-background ' : '',
216+
this.resizeSnappedTitle ? 'resize-snapped-title ' : '',
217+
this.resizeTitle ? 'resize-title ' : '',
218+
this.waterfall ? 'waterfall ' : ''
219+
].join('');
220+
},
221+
222+
_removeIf: function(propName) {
223+
if (this[propName]) {
224+
var mutexPropValues = Array.prototype.slice.call(arguments, 1);
225+
var isAnyMutexPropTrue = mutexPropValues.some(function(v) { return v; });
226+
227+
if (isAnyMutexPropTrue) {
228+
this[propName] = false;
229+
}
230+
}
231+
}
232+
233+
});
234+
235+
</script>
236+
237+
</dom-module>

0 commit comments

Comments
 (0)