Skip to content
This repository was archived by the owner on May 29, 2019. It is now read-only.

Commit 9e79ce6

Browse files
ebidelebidel
committed
Merge pull request #3 from Polymer/pw-shell
Import pw-shell
2 parents 0ce9f7e + 37b28bb commit 9e79ce6

File tree

8 files changed

+357
-8
lines changed

8 files changed

+357
-8
lines changed

‎app/1.0/devguide/index.md

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
---
2+
title: Developer Guide
3+
---
4+
5+
<!-- toc -->
6+
7+
# Developer Guide
8+
9+
```html
10+
<dom-module id="dom-element">
11+
<template>
12+
<p>I'm a DOM element. This is my local DOM!</p>
13+
</template>
14+
<script>
15+
Polymer({
16+
is: "dom-element"
17+
});
18+
</script>
19+
</dom-module>
20+
```
21+
22+
List:
23+
24+
- one
25+
- two
26+
- three
27+
28+
## Another header
29+
30+
### Subheading
31+
32+
#### Sub-Subheading

‎app/1.0/start/index.md

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
---
2+
title: Getting Started
3+
---
4+
5+
<!-- toc -->
6+
7+
# Getting Started
8+
9+
```html
10+
<dom-module id="dom-element">
11+
<template>
12+
<p>I'm a DOM element. This is my local DOM!</p>
13+
</template>
14+
<script>
15+
Polymer({
16+
is: "dom-element"
17+
});
18+
</script>
19+
</dom-module>
20+
```
21+
22+
List:
23+
24+
- one
25+
- two
26+
- three
27+
28+
## Another header
29+
30+
### Subheading
31+
32+
#### Sub-Subheading

‎app/elements/elements.html

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
<link rel="import" href="../bower_components/polymer/polymer.html">
22
<link rel="import" href="../bower_components/paper-button/paper-button.html">
33
<link rel="import" href="../bower_components/iron-flex-layout/classes/iron-flex-layout.html">
4+
<link rel="import" href="pw-shell.html">

‎app/elements/icons.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!--
2+
@license
3+
Copyright (c) 2016 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+
<link rel="import" href="../bower_components/iron-icon/iron-icon.html">
11+
<link rel="import" href="../bower_components/iron-iconset-svg/iron-iconset-svg.html">
12+
13+
<iron-iconset-svg size="24" name="pw-icons">
14+
<svg><defs>
15+
<g id="menu"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></g>
16+
<g id="search"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></g>
17+
</defs></svg>
18+
</iron-iconset-svg>

‎app/elements/pw-shell.html

+270
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,270 @@
1+
<!--
2+
@license
3+
Copyright (c) 2016 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+
<link rel="import" href="../bower_components/polymer/polymer.html">
11+
<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">
12+
<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
13+
<link rel="import" href="../bower_components/app-layout/helpers/helpers.html">
14+
<link rel="import" href="../bower_components/carbon-route/carbon-location.html">
15+
<link rel="import" href="../bower_components/carbon-route/carbon-route.html">
16+
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
17+
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
18+
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
19+
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
20+
<link rel="import" href="icons.html">
21+
22+
<dom-module id="pw-shell">
23+
<style include="iron-flex iron-positioning"></style>
24+
<style>
25+
26+
:host {
27+
display: block;
28+
margin-top: 64px;
29+
30+
-moz-user-select: none;
31+
-ms-user-select: none;
32+
-webkit-user-select: none;
33+
34+
--app-header-z-index: calc(1 + var(--base-z-index, 100));
35+
--app-drawer-z-index: calc(2 + var(--base-z-index, 100));
36+
}
37+
38+
a {
39+
color: #999;
40+
text-decoration: none;
41+
}
42+
43+
a.iron-selected {
44+
color: #333;
45+
}
46+
47+
.drawer {
48+
display: none;
49+
z-index: var(--app-drawer-z-index);
50+
}
51+
52+
.drawer-contents {
53+
height: 100%;
54+
overflow-y: auto;
55+
}
56+
57+
.drawer-contents a,
58+
.drawer-contents img {
59+
display: block;
60+
padding: 16px;
61+
}
62+
63+
.drawer-contents a.iron-selected {
64+
border-left: 4px solid #F22C5A;
65+
}
66+
67+
.drawer-contents img {
68+
height: 24px;
69+
}
70+
71+
.drawer-toggle {
72+
display: none;
73+
}
74+
75+
.header {
76+
position: fixed;
77+
top: 0;
78+
right: 0;
79+
left: 0;
80+
background-color: #FFF;
81+
z-index: var(--app-header-z-index);
82+
}
83+
84+
.header-toolbar {
85+
padding: 0 8px;
86+
}
87+
88+
.header-toolbar .logo-link {
89+
padding: 16px 8px;
90+
height: 32px;
91+
}
92+
93+
.header-toolbar .logo-link img {
94+
height: 32px;
95+
}
96+
97+
.sections-tabs {
98+
height: 64px;
99+
padding: 0 8px;
100+
}
101+
102+
.sections-tabs a {
103+
display: inline-block;
104+
margin: 0 12px;
105+
padding-top: 24px;
106+
height: 100%;
107+
box-sizing: border-box;
108+
}
109+
110+
.sections-tabs a.iron-selected {
111+
border-bottom: 4px solid #F22C5A;
112+
}
113+
114+
.search-box {
115+
width: 100%;
116+
height: 100%;
117+
padding: 0 12px;
118+
font-size: 16px;
119+
border: none;
120+
box-sizing: border-box;
121+
-webkit-transform: translate3d(100%, 0, 0);
122+
transform: translate3d(100%, 0, 0);
123+
transition: -webkit-transform 0.2s;
124+
transition: transform 0.2s;
125+
}
126+
127+
.search-box:focus {
128+
-webkit-transform: translate3d(0, 0, 0);
129+
transform: translate3d(0, 0, 0);
130+
}
131+
132+
/* Mobile viewports */
133+
@media (max-width: 767px) {
134+
:host {
135+
margin-top: 56px;
136+
}
137+
138+
.drawer {
139+
display: block;
140+
}
141+
142+
.drawer-toggle {
143+
display: block;
144+
}
145+
146+
.header-toolbar .logo-link {
147+
height: 24px;
148+
}
149+
150+
.header-toolbar .logo-link img {
151+
height: 24px;
152+
}
153+
154+
.sections-tabs {
155+
display: none;
156+
}
157+
}
158+
159+
</style>
160+
161+
<template>
162+
163+
<carbon-location route="{{_sectionRoute}}"></carbon-location>
164+
<carbon-route route="{{_sectionRoute}}" pattern="/1.0/:section" data="{{_sectionData}}" tail="{{_subsectionRoute}}"></carbon-route>
165+
166+
<!--
167+
TODO: This will make a XHR request even for the first load, which we don't need since
168+
the light DOM will be pre-filled by the server-side templater (jinja)
169+
-->
170+
<iron-ajax url="[[_sectionRoute.path]]" handle-as="document" on-response="_handleResponse" auto></iron-ajax>
171+
172+
<app-drawer id="drawer" class="drawer" swipe-open>
173+
<div class="drawer-contents">
174+
<img src="../images/logos/p-logo.svg" alt="Polymer Logo">
175+
176+
<!--
177+
TODO: Using iron-selector/carbon-route to highlight the current section may not work since
178+
sections may not follow this directory structure (e.g. start -> /1.0/docs/start/, but
179+
tools -> /1.0/tools/). The below links are hypothetical and will need to be changed.
180+
-->
181+
<iron-selector class="sections-list" attr-for-selected="name" activate-event="" selected="[[_sectionData.section]]" on-click="_closeDrawer">
182+
<a href="/1.0/start/" name="start">Getting Started</a>
183+
<a href="/1.0/devguide/" name="devguide">Developer Guide</a>
184+
<a href="https://elements.polymer-project.org/" target="_blank" name="catalog">Element Catalog</a>
185+
<a href="/1.0/tools/" name="tools">Tools</a>
186+
<a href="/1.0/toolkits/" name="toolkits">Toolkits</a>
187+
<a href="/1.0/articles/" name="articles">Articles</a>
188+
</iron-selector>
189+
</div>
190+
</app-drawer>
191+
192+
<app-header class="header" reveals snaps shadow>
193+
<div class="header-toolbar layout horizontal center">
194+
<paper-icon-button class="drawer-toggle" icon="pw-icons:menu" on-click="_toggleDrawer"></paper-icon-button>
195+
196+
<a href="/1.0/" class="logo-link">
197+
<img src="../images/logos/p-logo.svg" alt="Polymer Logo">
198+
</a>
199+
200+
<div class="flex"></div>
201+
202+
<iron-selector class="sections-tabs" attr-for-selected="name" activate-event="" selected="[[_sectionData.section]]">
203+
<a href="/1.0/start/" name="start">Getting Started</a>
204+
<a href="/1.0/devguide/" name="devguide">Developer Guide</a>
205+
<a href="https://elements.polymer-project.org/" target="_blank" name="catalog">Element Catalog</a>
206+
<a href="/1.0/tools/" name="tools">Tools</a>
207+
<a href="/1.0/toolkits/" name="toolkits">Toolkits</a>
208+
<a href="/1.0/articles/" name="articles">Articles</a>
209+
</iron-selector>
210+
211+
<paper-icon-button icon="pw-icons:search" on-click="_focusSearch" tabindex="-1"></paper-icon-button>
212+
</div>
213+
214+
<input id="searchBox" type="search" class="search-box fit" placeholder="Search Polymer Site">
215+
</app-header>
216+
217+
<content></content>
218+
219+
<footer>
220+
<div class="layout horizontal">
221+
<div class="flex">&copy; 2016 Polymer Authors.</div>
222+
<a href="#" on-click="_smoothScrollToTop">Back to Top</a>
223+
</div>
224+
</footer>
225+
</template>
226+
227+
<script>
228+
Polymer({
229+
is: 'pw-shell',
230+
231+
_toggleDrawer: function() {
232+
this.$.drawer.toggle();
233+
},
234+
235+
_closeDrawer: function() {
236+
this.$.drawer.close();
237+
},
238+
239+
_focusSearch: function() {
240+
this.$.searchBox.focus();
241+
},
242+
243+
_smoothScrollToTop: function() {
244+
Polymer.AppLayout.scroll({ behavior: 'smooth' });
245+
},
246+
247+
_handleResponse: function(event) {
248+
var doc = event.detail.response;
249+
document.title = doc.title;
250+
Polymer.dom(this).innerHTML = doc.querySelector('pw-shell').innerHTML;
251+
this.async(this._resetScrollPosition);
252+
},
253+
254+
_resetScrollPosition: function() {
255+
// TODO: Need to scroll to element for hash links within the same page
256+
// (which don't cause a XHR).
257+
var hash = window.location.hash;
258+
if (hash) {
259+
var elem = document.querySelector(hash);
260+
if (elem) {
261+
elem.scrollIntoView();
262+
return;
263+
}
264+
}
265+
266+
Polymer.AppLayout.scroll();
267+
}
268+
});
269+
</script>
270+
</dom-module>

‎app/sass/_main.scss

-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
99

1010
* {
1111
box-sizing: border-box;
12-
margin: 0;
1312
}
1413

1514
header, footer {

‎bower.json

+2
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@
1010
"tests"
1111
],
1212
"devDependencies": {
13+
"app-layout": "PolymerLabs/app-layout#^0.0.14",
14+
"carbon-route": "PolymerElements/carbon-route#master",
1315
"iron-elements": "PolymerElements/iron-elements#^1.0.4",
1416
"paper-elements": "PolymerElements/paper-elements#^1.0.5"
1517
}

0 commit comments

Comments
 (0)