-
Notifications
You must be signed in to change notification settings - Fork 78
/
contenta-polymer.js
146 lines (129 loc) · 4.12 KB
/
contenta-polymer.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
/**
* Copyright 2018 The Pennsylvania State University
* @license Apache-2.0, see License.md for full text.
*/
import { html, Polymer } from "@polymer/polymer/polymer-legacy.js";
import "@polymer/iron-ajax/iron-ajax.js";
import "@polymer/iron-list/iron-list.js";
import "@polymer/paper-button/paper-button.js";
import "@polymer/paper-card/paper-card.js";
import "@polymer/iron-image/iron-image.js";
import "@polymer/iron-icon/iron-icon.js";
import "@polymer/iron-icons/iron-icons.js";
import "@polymer/iron-icons/av-icons.js";
import "@polymer/app-layout/app-drawer/app-drawer.js";
import "@polymer/app-layout/app-drawer-layout/app-drawer-layout.js";
import "@polymer/app-layout/app-header/app-header.js";
import "@polymer/app-layout/app-header-layout/app-header-layout.js";
import "@polymer/app-layout/app-scroll-effects/app-scroll-effects.js";
import "@polymer/app-layout/app-toolbar/app-toolbar.js";
import "@polymer/app-route/app-location.js";
import "@polymer/app-route/app-route.js";
import "@polymer/iron-pages/iron-pages.js";
import "@polymer/iron-selector/iron-selector.js";
import "@polymer/paper-icon-button/paper-icon-button.js";
/**
`contenta-polymer`
A polymer app to talk to Contenta to serve up it's content in a visually awesome way
@demo ../../demo/index.html
@microcopy - the mental model for this app
- contenta - the future of Drupal and web development, a decoupled CMS.
-
*/
let ContentaPolymer = Polymer({
_template: html`
<style>
:host {
--app-primary-color: #4285f4;
--app-secondary-color: black;
display: block;
}
app-drawer-layout:not([narrow]) [drawer-toggle] {
display: none;
}
app-header {
color: #fff;
background-color: var(--app-primary-color);
}
app-header paper-icon-button {
--paper-icon-button-ink-color: white;
}
.drawer-list {
margin: 0 20px;
}
.drawer-list a {
display: block;
padding: 0 16px;
text-decoration: none;
color: var(--app-secondary-color);
line-height: 40px;
}
.drawer-list a.iron-selected {
color: black;
font-weight: bold;
}
</style>
<app-location route="{{route}}" url-space-regex="^[[rootPath]]">
</app-location>
<app-route
route="{{route}}"
pattern="[[rootPath]]:page"
data="{{routeData}}"
tail="{{subroute}}"
>
</app-route>
<app-drawer-layout fullbleed="" narrow="{{narrow}}">
<!-- Drawer content -->
<app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]">
<app-toolbar>Menu</app-toolbar>
<iron-selector
selected="[[page]]"
attr-for-selected="name"
class="drawer-list"
role="navigation"
>
<a name="view1" href="[[rootPath]]">Home</a>
<a name="view2" href="[[rootPath]]recipes">Recipes</a>
<a
name="view3"
href="https://github.com/LRNWebComponents/contenta-polymer"
>Github</a
>
<a name="view4" href="https://www.contentacms.org/"
>ContentaCMS website</a
>
</iron-selector>
</app-drawer>
<!-- Main content -->
<app-header-layout has-scrolling-region="">
<app-header slot="header" condenses="" reveals="" effects="waterfall">
<app-toolbar>
<paper-icon-button icon="menu" drawer-toggle=""></paper-icon-button>
<div main-title="">Mmmm Cooking</div>
</app-toolbar>
</app-header>
<iron-pages
selected="[[page]]"
attr-for-selected="name"
fallback-selection="view404"
role="main"
>
<my-view1 name="view1"></my-view1>
<my-view2 name="view2"></my-view2>
<my-view404 name="view404"></my-view404>
</iron-pages>
</app-header-layout>
</app-drawer-layout>
`,
is: "contenta-polymer",
properties: {},
/**
* Simple way to convert from object to array.
*/
_toArray: function(obj) {
return Object.keys(obj).map(function(key) {
return obj[key];
});
}
});
export { ContentaPolymer };