app-shell.html
3.8 KB
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
<link rel="import" href="../../bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="../../bower_components/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="../../bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="../../bower_components/app-router/app-router.html">
<link rel="import" href="../../bower_components/paper-toast/paper-toast.html">
<link rel="import" href="../app-styles/app-styles.html">
<link rel="import" href="../app-link/app-link.html">
<link rel="import" href="../app-logo/app-logo.html">
<link rel="import" href="../app-cart/app-cart.html">
<link rel="import" href="../app-bar/app-bar.html">
<link rel="import" href="../app-sidebar/app-sidebar.html">
<link rel="import" href="../pages/page-packages.html">
<link rel="import" href="../pages/page-browse.html">
<link rel="import" href="../pages/page-element.html">
<link rel="import" href="../pages/page-guide.html">
<link rel="import" href="../pages/page-not-found.html">
<dom-module id="app-shell">
<style>
#cartpanel::shadow > #scrim {
z-index: 4;
}
#cartpanel::shadow > #drawer {
z-index: 5;
}
paper-toast {
z-index: 5;
}
</style>
<template>
<paper-drawer-panel id="cartpanel" class="flex" force-narrow right-drawer disable-edge-swipe disable-swipe drawer-width="320px">
<div id="main" main>
<app-router id="router" class="flex" mode="pushstate" on-activate-route-end="trackPageview">
<app-route path="/" element="page-packages" bindRouter></app-route>
<app-route path="/browse" element="page-browse" bindRouter onUrlChange="updateModel"></app-route>
<app-route path="/elements/:element" element="page-element" bindRouter onUrlChange="updateModel"></app-route>
<app-route path="/guides/:name" element="page-guide" bindRouter></app-route>
<app-route path="*" element="page-not-found"></app-route>
</app-router>
</div>
<app-cart id="cart" drawer></app-cart>
</paper-drawer-panel>
</template>
</dom-module>
<script>
Polymer({
is: 'app-shell',
listeners: {
'nav': 'handleNav',
'page-meta': 'updateTitle',
'cart-close': 'cartClose',
'cart-open': 'cartOpen',
'cart-add': 'cartAdd',
'cart-remove': 'cartRemove',
'toast': 'showToast'
},
_toast: null,
toggleSearch: function() {
this.$.search.active = !this.$.search.active;
},
performSearch: function(e) {
e.preventDefault();
if (this.query.length) this.$.router.go('/elements?q=' + this.query);
},
handleNav: function(_, nav) {
this.$.router.go(nav.url);
this.$.cartpanel.closeDrawer();
},
updateTitle: function(_, detail) {
if (detail.title && detail.title.length) {
document.title = detail.title + " - Polymer Element Catalog";
} else {
document.title = "Polymer Element Catalog";
}
},
cartClose: function() {
this.$.cartpanel.closeDrawer();
},
cartOpen: function() {
this.$.cartpanel.openDrawer();
},
cartAdd: function(e, el) {
this.$.cart.add(el);
},
cartRemove: function(e, el) {
this.$.cart.remove(el);
},
showToast: function(e, detail) {
if (!this._toast) {
this._toast = document.createElement('paper-toast');
Polymer.dom(this.$.router).appendChild(this._toast);
}
this._toast.text = detail.text;
this.async(this._toast.show.bind(this._toast), 1);
},
trackPageview: function(e, detail) {
this.debounce('pageview', function() {
var loc = window.location.pathname + window.location.search;
ga('send', 'pageview', {
location: loc,
title: document.title
});
ga('set', 'page', loc);
}, 2000);
}
});
</script>