Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 248 lines (224 sloc) 8.464 kb
51f80ba @dglazkov Added Tab Manager example, not working yet.
authored
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Tab Manager Component</title>
5 <link rel="stylesheet" type="text/css" href="../../src/debug.css">
6 </head>
7 <body>
8 <element name="tabs" extends="article" constructor="TabsControl">
9 <template>
d2f5c79 @coonsta Update tab demo with flexbox changes and Shadow DOM style scoping cha…
coonsta authored
10 <style id="exportedStyle">
51f80ba @dglazkov Added Tab Manager example, not working yet.
authored
11 h2:nth-of-type(1) {
12 background: white;
13 color: black;
14 -webkit-user-select: none;
15 text-shadow: 0 0 1px black
16 }
17
18 h2 {
19 font-family: 'Open Sans';
20 font-size: 16px;
21 line-height: 22px;
22 font-weight: 400;
23 padding: 5px 15px;
24 margin: 0 5px 0 0;
25 text-align: center;
26 text-overflow: ellipsis;
27 overflow: hidden;
28 cursor: pointer;
29 -webkit-user-select: none;
30 border-top-left-radius: 6px;
31 border-top-right-radius: 6px;
32 background: rgb(242, 242, 242);
33 color: rgb(64, 64, 64);
34 box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
35 }
36
37 h2:nth-of-type(n+7) {
38 text-align: left;
39 box-shadow: none;
40 border-radius: 0;
41 background: white;
42 }
43
44 h2:nth-of-type(n+7):hover {
45 background: rgba(0 0 0 .1);
46 }
47
48 </style>
1b10448 @dglazkov Moved font loading into its own style, unbroke the sample.
authored
49 <style>
50 @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
51 </style>
d2f5c79 @coonsta Update tab demo with flexbox changes and Shadow DOM style scoping cha…
coonsta authored
52 <style>
51f80ba @dglazkov Added Tab Manager example, not working yet.
authored
53 div.container {
d2f5c79 @coonsta Update tab demo with flexbox changes and Shadow DOM style scoping cha…
coonsta authored
54 display: -webkit-flex;
51f80ba @dglazkov Added Tab Manager example, not working yet.
authored
55 -webkit-flex-direction: column;
d2f5c79 @coonsta Update tab demo with flexbox changes and Shadow DOM style scoping cha…
coonsta authored
56 -webkit-align-items: stretch;
51f80ba @dglazkov Added Tab Manager example, not working yet.
authored
57 background: -webkit-linear-gradient(rgb(230, 230, 230), rgb(200, 200, 200));
58 padding: 10px; -webkit-font-smoothing: antialiased;
59 }
60
61 .tab-strip {
d2f5c79 @coonsta Update tab demo with flexbox changes and Shadow DOM style scoping cha…
coonsta authored
62 display: -webkit-flex;
63 -webkit-justify-content: space-between;
51f80ba @dglazkov Added Tab Manager example, not working yet.
authored
64 padding: 0 5px;
65 -webkit-user-select: none;
66 }
67
68 .tab-wrapper {
d2f5c79 @coonsta Update tab demo with flexbox changes and Shadow DOM style scoping cha…
coonsta authored
69 display: -webkit-flex;
51f80ba @dglazkov Added Tab Manager example, not working yet.
authored
70 height: 30px;
71 }
72
73 div.overflow {
74 position: relative
75 }
76
77 div.overflow .tab-wrapper {
78 overflow: hidden;
79 }
80
81 div.more {
d2f5c79 @coonsta Update tab demo with flexbox changes and Shadow DOM style scoping cha…
coonsta authored
82 display: -webkit-flex;
83 -webkit-justify-content: space-between;
51f80ba @dglazkov Added Tab Manager example, not working yet.
authored
84 padding: 0 5px;
85 -webkit-user-select: none;
86 }
87
88 div.overflow>div.closed {
89 display:none;
90 }
91
92 div.overflow>div.open {
93 position:absolute;
94 background: #fff;
95 border: 1px solid #999;
96 padding: 2px 0 2px 2px;
97 right: 0;
98 width: 300px;
99 }
100
101 .contents {
102 box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
103 background: white;
104 border-radius: 3px;
105 padding: 5px 20px;
106 font-family: 'Open Sans';
107 font-size: 14px;
108 line-height: 20px;
109 overflow: auto;
110 height: 600px;
111 }
112
113 .help {
114 background-color: #eee;
115 padding: 5px 10px;
116 margin: 2px 0 0 0;
117 font-family: 'Open Sans';
118 font-size: 11px;
119 border-radius: 3px;
120 box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
121 }
122
123 </style>
124 <div class="container">
125 <div class="tab-strip">
126 <div class="tab-wrapper">
127 <content class="strip" select="h2:nth-of-type(-n+6)"></content>
128 </div>
129 <div class="overflow">
130 <div class="tab-wrapper">
131 <div class="more">&hellip;</div>
132 </div>
133 <div class="closed">
134 <content class="overflow" select="h2:nth-of-type(n+6)"></content>
135 </div>
136 </div>
137 </div>
138 <div class="contents">
139 <content class="current" select="section:nth-of-type(1)"></content>
140 </div>
141 <div class="help">
142 Use <code>Ctrl+&lt;Number&gt;</code> to select the tab directly <code>Ctrl+{</code> or <code>Ctrl+}</code> to cycle between tabs. Click on "&hellip;" to see more tabs.
143 </div>
144 </div>
145 </template>
146 <script>
147
67faefe @dglazkov Added fallback guards to the component code.
authored
148 if (this !== window) {
149
51f80ba @dglazkov Added Tab Manager example, not working yet.
authored
150 this.lifecycle({
6c9f674 @dglazkov Fixed morph to actually start working.
authored
151 created: function(root) {
51f80ba @dglazkov Added Tab Manager example, not working yet.
authored
152 this.root = root;
d2f5c79 @coonsta Update tab demo with flexbox changes and Shadow DOM style scoping cha…
coonsta authored
153
154 var exportedStyle = this.root.querySelector('#exportedStyle');
155 exportedStyle = this.appendChild(exportedStyle);
156 this.outerStylesheet = exportedStyle.sheet;
157
51f80ba @dglazkov Added Tab Manager example, not working yet.
authored
158 this.currentIndex = 1;
159 this.moreOpened = false;
160 this.current = this.root.querySelector('content.current');
161 var overflow = this.root.querySelector('.overflow');
162 overflow.addEventListener('click', this.onClickOverflow.bind(this));
163 this.more = overflow.querySelector('.more');
164 this.menu = overflow.lastElementChild;
165 this.updateCurrent();
166 this.root.host.addEventListener('click', this.onClickTab.bind(this));
167 window.addEventListener('click', this.onClickWindow.bind(this));
168 window.addEventListener('keydown', this.onKeyDown.bind(this));
169 }
170 });
171
172 TabsControl.prototype = {
173 onKeyDown: function(evt) {
174 if (!evt.ctrlKey)
175 return;
176
177 if (evt.keyCode == 221) {
178 this.cycle(1);
179 } else if (evt.keyCode == 219) {
180 this.cycle(-1);
181 } else if (evt.keyCode > 48 && evt.keyCode < 58) {
182 this.currentIndex = evt.keyCode - 48;
183 this.updateCurrent();
184 }
185 },
186 onClickTab: function(evt) {
187 if (evt.target.nodeName == 'H2') {
188 this.currentIndex = this.indexOf(evt.target) || this.currentIndex;
189 this.updateCurrent();
190 }
191 },
192 openMore: function() {
193 this.menu.className = 'open';
194 this.moreOpened = true;
195 },
196 closeMore: function() {
197 this.menu.className = 'closed';
198 this.moreOpened = false;
199 },
200 onClickOverflow: function(evt) {
201 if (evt.target.className != 'more')
202 return;
203
204 if (this.moreOpened)
205 this.closeMore();
206 else
207 this.openMore();
208 evt.stopPropagation();
209 },
210 onClickWindow: function(evt) {
211 if (this.moreOpened)
212 this.closeMore();
213 },
214 indexOf: function(header) {
215 var index = 0;
216 return [].slice.call(this.root.host.querySelectorAll('h2')).indexOf(header) + 1;
217 },
218 updateCurrent: function() {
219 this.current.select = 'section:nth-of-type(' + this.currentIndex + ')';
6c9f674 @dglazkov Fixed morph to actually start working.
authored
220 var styleAttributes = this.outerStylesheet.cssRules[0].style.cssText;
221 this.outerStylesheet.deleteRule(0);
222 this.outerStylesheet.insertRule('h2:nth-of-type(' + this.currentIndex + '){' + styleAttributes + '}', 0);
51f80ba @dglazkov Added Tab Manager example, not working yet.
authored
223 },
224 sectionCount: function() {
225 return this.root.host.querySelectorAll('section').length;
226 },
227 cycle: function(delta) {
228 this.currentIndex += delta;
229 var sectionCount = this.sectionCount();
230 if (this.currentIndex > sectionCount) {
231 this.currentIndex = sectionCount;
232 return;
233 }
234 else if (this.currentIndex == 0) {
235 this.currentIndex = 1;
236 return;
237 }
238 this.updateCurrent();
239 }
9b73f7d @coonsta Fix JavaScript style errors identified by js2-mode.
coonsta authored
240 };
51f80ba @dglazkov Added Tab Manager example, not working yet.
authored
241
67faefe @dglazkov Added fallback guards to the component code.
authored
242 }
243
51f80ba @dglazkov Added Tab Manager example, not working yet.
authored
244 </script>
245 </element>
246 </body>
247 </html>
Something went wrong with that request. Please try again.