forked from unbug/docs
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdocs-menu.html
More file actions
112 lines (106 loc) · 5.76 KB
/
docs-menu.html
File metadata and controls
112 lines (106 loc) · 5.76 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="../components/polymer/polymer.html">
<link rel="import" href="../components/polymer-ui-menu/polymer-ui-menu.html">
<link rel="import" href="../components/polymer-ui-menu-item/polymer-ui-menu-item.html">
<link rel="import" href="../components/polymer-ui-submenu-item/polymer-ui-submenu-item.html">
<!-- <link rel="import" href="ui-color-icon.html"> -->
<polymer-element name="docs-menu" attributes="menu"> <!-- cache-csstext> -->
<template>
<link rel="stylesheet" href="../css/polymer.css">
<style>
:host {
display: block;
}
polymer-ui-submenu-item ^^ polymer-ui-menu-item {
font-size: 14px !important;
font-weight: 600;
line-height: 32px !important;
letter-spacing: 0.01em;
padding: 0;
/*&:hover {
background-color: #fff;
}
&.polymer-selected {
background-color: #eee;
}*/
}
:host ^^ polymer-ui-icon {
background-size: 48px !important;
}
#mainmenu > polymer-ui-submenu-item {
display: none;
}
.show {
display: block !important;
}
</style>
<polymer-ui-menu id="mainmenu">
<polymer-ui-submenu-item class="{{ {show: menu == 'start'} | tokenList}}" id="gettingstartedmenu" label="Getting started" src="/images/picons/ic_polymer_source.svg">
<!-- <ui-color-icon src="/images/picons/ic_polymer_source.svg"></ui-color-icon> -->
<polymer-ui-menu-item href="/getting-the-code.html">Get the code</polymer-ui-menu-item>
<polymer-ui-menu-item href="/getting-started.html">Getting started</polymer-ui-menu-item>
</polymer-ui-submenu-item>
<polymer-ui-submenu-item id="elementsmenu" label="Elements" class="elements-using {{ {show: menu == 'docs'} | tokenList}}" src="/images/picons/ic_polymer_source.svg">
<polymer-ui-menu-item href="/docs/elements/polymer-elements.html">Polymer elements</polymer-ui-menu-item>
<polymer-ui-menu-item href="/docs/elements/polymer-ui-elements.html">Polymer UI elements</polymer-ui-menu-item>
<polymer-ui-menu-item href="/docs/elements/other.html">Other</polymer-ui-menu-item>
</polymer-ui-submenu-item>
<polymer-ui-submenu-item id="coremenu" label="Core" class="elements-creating {{ {show: menu == 'docs'} | tokenList}}" src="/images/picons/ic_polymer_source.svg">
<polymer-ui-menu-item id="articles" href="/articles/">Articles</polymer-ui-menu-item>
<polymer-ui-menu-item href="/docs/polymer/polymer.html">API reference</polymer-ui-menu-item>
<polymer-ui-menu-item href="/docs/polymer/styling.html">Styling reference</polymer-ui-menu-item>
<polymer-ui-submenu-item label="Data-binding ▾">
<polymer-ui-menu-item href="/docs/polymer/databinding.html">Introduction</polymer-ui-menu-item>
<polymer-ui-menu-item href="/docs/polymer/expressions.html">Expressions</polymer-ui-menu-item>
<polymer-ui-menu-item href="/docs/polymer/filters.html">Filters</polymer-ui-menu-item>
</polymer-ui-submenu-item>
<polymer-ui-menu-item href="/docs/polymer/runtime-config.html">Runtime configuration</polymer-ui-menu-item>
</polymer-ui-submenu-item>
<polymer-ui-submenu-item id="platformmenu" label="Platform" class="platform {{ {show: menu == 'docs'} | tokenList}}" src="/images/picons/ic_polymer_source.svg">
<polymer-ui-menu-item href="/platform/custom-elements.html">Custom Elements</polymer-ui-menu-item>
<polymer-ui-menu-item href="/platform/shadow-dom.html">Shadow DOM</polymer-ui-menu-item>
<polymer-ui-menu-item href="/platform/html-imports.html">HTML Imports</polymer-ui-menu-item>
<polymer-ui-menu-item href="/platform/pointer-events.html">Pointer Events</polymer-ui-menu-item>
<polymer-ui-menu-item href="/platform/web-animations.html">Web Animations</polymer-ui-menu-item>
<polymer-ui-menu-item href="/platform/template.html">Template Binding</polymer-ui-menu-item>
<polymer-ui-menu-item href="/platform/node_bind.html">Node.bind()</polymer-ui-menu-item>
</polymer-ui-submenu-item>
<polymer-ui-submenu-item label="Resources" class="{{ {show: menu == 'other' || menu == ''} | tokenList}}" src="/images/picons/ic_polymer_source.svg">
<polymer-ui-menu-item href="/tooling-strategy.html">Tools & testing</polymer-ui-menu-item>
<polymer-ui-menu-item href="/compatibility.html">Browser compatibility</polymer-ui-menu-item>
<polymer-ui-menu-item href="/build/">Build status</polymer-ui-menu-item>
<polymer-ui-menu-item href="/changelog.html">Releases</polymer-ui-menu-item>
<polymer-ui-menu-item href="/faq.html">FAQ</polymer-ui-menu-item>
</polymer-ui-submenu-item>
<!-- <polymer-ui-nav-arrow target="{{item}}" borderColor="rgba(0, 0, 0,0.15)"></polymer-ui-nav-arrow> -->
</polymer-ui-menu>
</template>
<script>
Polymer('docs-menu', {
ready: function() {
this.highlightItemWithURL(location.pathname);
},
highlightItemWithURL: function(href) {
if (href.match(/\/articles\//)) {
this.$.mainmenu.selected = this.$.mainmenu.items.indexOf(this.$.coremenu);
this.$.coremenu.selected = this.$.coremenu.items.indexOf(this.$.articles);
return;
}
var item = this.shadowRoot.querySelector('[href$="' + href + '"]');
if (item) {
var submenu = item.parentElement;
submenu.selected = submenu.items.indexOf(item);
if (submenu.parentElement.localName == 'polymer-ui-submenu-item') {
do {
submenu.parentElement.selected = submenu.parentElement.items.indexOf(submenu);
submenu = submenu.parentElement;
} while (submenu && submenu.localName == 'polymer-ui-submenu-item');
} else {
this.$.mainmenu.selected = this.$.mainmenu.items.indexOf(submenu);
}
} else {
this.$.mainmenu.selected = 0;
}
}
});
</script>
</polymer-element>