Skip to content

Commit e1926b1

Browse files
aomarksaomarks
committed
Add Polymer shack-app element
1 parent 3d6fe54 commit e1926b1

File tree

4 files changed

+257
-201
lines changed

4 files changed

+257
-201
lines changed

‎polymer/polymer/shack/elements/shack-app.js‎

Lines changed: 239 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,239 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2019 The Polymer Project Authors. All rights reserved.
4+
* This code may only be used under the BSD style license found at
5+
* http://polymer.github.io/LICENSE.txt The complete set of authors may be found
6+
* at http://polymer.github.io/AUTHORS.txt The complete set of contributors may
7+
* be found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by
8+
* Google as part of the polymer project is also subject to an additional IP
9+
* rights grant found at http://polymer.github.io/PATENTS.txt
10+
*/
11+
12+
import './shack-item.js';
13+
import './shack-cart.js';
14+
import '@polymer/polymer/lib/elements/dom-repeat.js';
15+
import {html, PolymerElement} from '@polymer/polymer';
16+
17+
class ShackApp extends PolymerElement {
18+
static get properties() {
19+
return {
20+
page: {type: String},
21+
cart: {type: Array},
22+
categories: {type: Object},
23+
24+
categoryList: {
25+
computed: 'computeCategoryList(categories)',
26+
},
27+
categoryPageTitle: {
28+
computed: 'computeCategoryPageTitle(page, categories)',
29+
},
30+
categoryItems: {
31+
computed: 'computeCategoryItems(page, categories)',
32+
},
33+
categoryNumItems: {
34+
computed: 'computeCategoryNumItems(page, categories)',
35+
}
36+
};
37+
}
38+
39+
static get template() {
40+
return html`
41+
<style>
42+
:host {
43+
font-family: "Arial", sans-serif;
44+
display: flex;
45+
flex-direction: column;
46+
align-items: center;
47+
}
48+
49+
#pageHeader {
50+
flex-basis: 130px;
51+
flex-shrink: 0;
52+
display: flex;
53+
flex-direction: column;
54+
align-items: center;
55+
}
56+
57+
#logo {
58+
margin: 26px 0 0 0;
59+
font-size: 16px;
60+
letter-spacing: 4px;
61+
color: #202020;
62+
}
63+
64+
shack-cart {
65+
position: absolute;
66+
right: 20px;
67+
top: 20px;
68+
}
69+
70+
#categoryNav {
71+
display: flex;
72+
justify-content: center;
73+
margin-top: 46px;
74+
}
75+
76+
#categoryNav > a {
77+
margin: 0 20px;
78+
text-decoration: none;
79+
color: #202020;
80+
font-size: 13px;
81+
padding-bottom: 9px;
82+
min-width: 110px;
83+
text-align: center;
84+
cursor: pointer;
85+
}
86+
87+
#categoryNav > a[active] {
88+
border-bottom: 2px solid #172c50;
89+
}
90+
91+
main {
92+
display: flex;
93+
flex-direction: column;
94+
align-items: center;
95+
min-width: 500px;
96+
flex-grow: 1;
97+
width: 100%;
98+
}
99+
100+
#hero {
101+
width: 100%;
102+
flex-basis: 320px;
103+
flex-shrink: 0;
104+
background-color: #e7e7e7;
105+
}
106+
107+
#categoryTitle {
108+
font-size: 16px;
109+
font-weight: normal;
110+
margin: 37px 0 0 0;
111+
}
112+
113+
#numItems {
114+
color: #757575;
115+
font-size: 13px;
116+
margin-top: 8px;
117+
}
118+
119+
#list {
120+
max-width: 1000px;
121+
display: flex;
122+
flex-direction: row;
123+
flex-wrap: wrap;
124+
margin: 0;
125+
padding: 0;
126+
}
127+
128+
shack-item {
129+
flex-basis: 33%;
130+
margin-top: 43px;
131+
}
132+
133+
shack-item:nth-child(7n+1) {
134+
--shack-item-placeholder-color: #d1fdb5;
135+
}
136+
shack-item:nth-child(7n+2) {
137+
--shack-item-placeholder-color: #ffe7a6;
138+
}
139+
shack-item:nth-child(7n+3) {
140+
--shack-item-placeholder-color: #ffe4fe;
141+
}
142+
shack-item:nth-child(7n+4) {
143+
--shack-item-placeholder-color: #cfffff;
144+
}
145+
shack-item:nth-child(7n+5) {
146+
--shack-item-placeholder-color: #feff9b;
147+
}
148+
shack-item:nth-child(7n+6) {
149+
--shack-item-placeholder-color: #d0ebff;
150+
}
151+
shack-item:nth-child(7n+7) {
152+
--shack-item-placeholder-color: #ffd9d9;
153+
}
154+
155+
#demoNotice {
156+
background-color: #202020;
157+
color: white;
158+
font-size: 12px;
159+
padding: 12px 24px;
160+
margin-top: 30px;
161+
}
162+
</style>
163+
164+
<header id="pageHeader">
165+
<h1 id="logo">SHACK</h1>
166+
<shack-cart items=[[cart]]></shack-cart>
167+
168+
<nav id="categoryNav">
169+
<dom-repeat items=[[categoryList]]>
170+
<template>
171+
<a active$="[[categoryIsActive(page, item.slug)]]"
172+
on-click="clickCategory">
173+
[[item.title]]
174+
</a>
175+
</template>
176+
</dom-repeat>
177+
</nav>
178+
</header>
179+
180+
<main id="categoryList">
181+
<div id="hero"></div>
182+
<h2 id="categoryTitle">[[categoryTitle]]</h2>
183+
<span id="numItems">([[categoryNumItems]] items)</span>
184+
185+
<div id="list">
186+
<dom-repeat items=[[categoryItems]]>
187+
<template>
188+
<shack-item title=[[item.title]]
189+
price=[[item.price]]
190+
on-click="clickItem"
191+
</shack-item>
192+
</template>
193+
</dom-repeat>
194+
</div>
195+
</main>
196+
197+
<footer id="footer">
198+
<div id="demoNotice">DEMO ONLY</div>
199+
</footer>
200+
`;
201+
}
202+
203+
constructor() {
204+
super();
205+
this.cart = [];
206+
}
207+
208+
computeCategoryList() {
209+
return Object.values(this.categories);
210+
}
211+
212+
computeCategoryPageTitle() {
213+
return this.categories[this.page].title;
214+
}
215+
216+
computeCategoryItems() {
217+
return this.categories[this.page].items;
218+
}
219+
220+
computeCategoryNumItems() {
221+
return this.categories[this.page].items.length;
222+
}
223+
224+
categoryIsActive(category, active) {
225+
return category === active;
226+
}
227+
228+
clickCategory(event) {
229+
event.preventDefault();
230+
this.page = event.model.item.slug;
231+
}
232+
233+
clickItem(event) {
234+
event.preventDefault();
235+
this.cart = [event.model.item.title, ...this.cart];
236+
}
237+
}
238+
239+
customElements.define('shack-app', ShackApp);

‎polymer/polymer/shack/index.html‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,11 @@
33
<head>
44
<title>polymer shack benchmark</title>
55
<script type="module" src="./index.js"></script>
6-
<link rel="stylesheet" href="./style.css"></link>
6+
<style>
7+
body {
8+
margin: 0;
9+
}
10+
</style>
711
</head>
8-
<body>
9-
</body>
12+
<body></body>
1013
</html>

‎polymer/polymer/shack/index.js‎

Lines changed: 12 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,7 @@
1-
/**
2-
* @license
3-
* Copyright (c) 2019 The Polymer Project Authors. All rights reserved.
4-
* This code may only be used under the BSD style license found at
5-
* http://polymer.github.io/LICENSE.txt The complete set of authors may be found
6-
* at http://polymer.github.io/AUTHORS.txt The complete set of contributors may
7-
* be found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by
8-
* Google as part of the polymer project is also subject to an additional IP
9-
* rights grant found at http://polymer.github.io/PATENTS.txt
10-
*/
1+
import './elements/shack-app.js';
112

12-
import './elements/shack-item';
13-
import './elements/shack-cart';
14-
15-
import {html, render} from '../node_modules/lit-html/lit-html.js';
16-
17-
const data = {
18-
page: 'mens_tshirts',
19-
categories: {
3+
(async function() {
4+
const categories = {
205
'mens_outerwear': {
216
title: 'Men\'s Outerwear',
227
},
@@ -29,70 +14,20 @@ const data = {
2914
'ladies_tshirts': {
3015
title: 'Ladies T-Shirts',
3116
},
32-
},
33-
cart: [],
34-
};
35-
36-
const renderPage = () => render(body(), document.body);
37-
38-
const body = () => html`
39-
<header id="pageHeader">${pageHeader()}</header>
40-
<main id="categoryList">${categoryList()}</main>
41-
<footer id="footer">${footer()}</footer>
42-
`;
43-
44-
const pageHeader = () => html`
45-
<h1 id="logo">SHACK</h1>
46-
<shack-cart .items=${data.cart}></shack-cart>
47-
<nav id="categoryNav">${categoryNav()}</nav>
48-
`;
49-
50-
const categoryNav = () =>
51-
Object.keys(data.categories)
52-
.map(
53-
(c) => html`<a ?active=${data.page === c} @click=${
54-
(e) => selectCategory(c, e)}>${data.categories[c].title}</a>`);
55-
56-
const selectCategory = (page, event) => {
57-
event.preventDefault();
58-
data.page = page;
59-
renderPage();
60-
};
17+
};
6118

62-
const categoryList = () => html`
63-
<div id="hero"></div>
64-
<h2 id="categoryTitle">${data.categories[data.page].title}</h2>
65-
<span id="numItems">(${data.categories[data.page].items.length} items)</span>
66-
67-
<div id="list">
68-
${data.categories[data.page].items.map(listItem)}
69-
</div>
70-
`;
71-
72-
const listItem = (item) => html`
73-
<shack-item .title=${item.title} .price=${item.price}
74-
@click=${(e) => clickItem(item, e)}>
75-
</shack-item>
76-
`;
77-
78-
const clickItem = (item, event) => {
79-
event.preventDefault();
80-
data.cart = [item.title, ...data.cart];
81-
renderPage();
82-
};
83-
84-
const footer = () => html`
85-
<div id="demoNotice">DEMO ONLY</div>
86-
`;
87-
88-
(async function() {
8919
const promises = [];
90-
for (const c in data.categories) {
20+
for (const c in categories) {
9121
promises.push((async () => {
9222
const resp = await fetch(`./${c}.json`);
93-
data.categories[c].items = await resp.json();
23+
categories[c].items = await resp.json();
24+
categories[c].slug = c;
9425
})());
9526
}
9627
await Promise.all(promises);
97-
renderPage();
28+
29+
const app = document.createElement('shack-app');
30+
app.page = 'mens_tshirts';
31+
app.categories = categories;
32+
document.body.appendChild(app);
9833
})();

0 commit comments

Comments
 (0)