OLD | NEW |
1 // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file | 1 // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file |
2 // for details. All rights reserved. Use of this source code is governed by a | 2 // for details. All rights reserved. Use of this source code is governed by a |
3 // BSD-style license that can be found in the LICENSE file. | 3 // BSD-style license that can be found in the LICENSE file. |
4 | 4 |
5 import 'dart:html'; | 5 import 'dart:html'; |
6 import 'dart:async'; | 6 import 'dart:async'; |
7 import 'package:observatory/src/elements/helpers/tag.dart'; | 7 import 'package:observatory/src/elements/helpers/tag.dart'; |
8 import 'package:observatory/src/elements/helpers/rendering_scheduler.dart'; | 8 import 'package:observatory/src/elements/helpers/rendering_scheduler.dart'; |
9 | 9 |
10 class NavMenuItemElement extends HtmlElement implements Renderable { | 10 class NavMenuItemElement extends HtmlElement implements Renderable { |
11 static final StyleElement _style = () { | 11 static const tag = const Tag<NavMenuItemElement>('nav-menu-item'); |
12 var style = new StyleElement(); | |
13 style.text = '''li.nav-menu-item { | |
14 float: none; | |
15 border-top: 1px solid #677; | |
16 border-bottom: 1px solid #556; position: relative; | |
17 } | |
18 li.nav-menu-item:hover { | |
19 background: #455; | |
20 } | |
21 li.nav-menu-item > a { | |
22 display: block; | |
23 padding: 12px 12px; | |
24 color: white; | |
25 text-decoration: none; | |
26 } | |
27 li.nav-menu-item > ul { | |
28 display: none; | |
29 position: absolute; | |
30 top:0; | |
31 left: 100%; | |
32 list-style: none; | |
33 padding: 0; | |
34 margin-left: 0; | |
35 width: auto; | |
36 z-index: 1000; | |
37 font: 400 16px \'Montserrat\', sans-serif; | |
38 color: white; | |
39 background: #567; | |
40 } | |
41 li.nav-menu-item > ul:after { | |
42 content: ""; clear: both; display: block; | |
43 } | |
44 li.nav-menu-item:hover > ul { | |
45 display: block; | |
46 }'''; | |
47 return style; | |
48 }(); | |
49 | |
50 static const tag = const Tag<NavMenuItemElement>('nav-menu-item-wrapped'); | |
51 | 12 |
52 RenderingScheduler _r; | 13 RenderingScheduler _r; |
53 | 14 |
54 Stream<RenderedEvent<NavMenuItemElement>> get onRendered => _r.onRendered; | 15 Stream<RenderedEvent<NavMenuItemElement>> get onRendered => _r.onRendered; |
55 | 16 |
56 String _label; | 17 String _label; |
57 String _link; | 18 String _link; |
| 19 Iterable<Element> _content = const []; |
58 | 20 |
59 String get label => _label; | 21 String get label => _label; |
60 String get link => _link; | 22 String get link => _link; |
61 | 23 Iterable<Element> get content => _content; |
| 24 |
62 set label(String value) => _label = _r.checkAndReact(_label, value); | 25 set label(String value) => _label = _r.checkAndReact(_label, value); |
63 set link(String value) => _link = _r.checkAndReact(_link, value); | 26 set link(String value) => _link = _r.checkAndReact(_link, value); |
| 27 set content(Iterable<Element> value) { |
| 28 _content = value.toList(); |
| 29 _r.dirty(); |
| 30 } |
64 | 31 |
65 | 32 |
66 factory NavMenuItemElement(String label, {String link, | 33 factory NavMenuItemElement(String label, {String link, |
67 RenderingQueue queue}) { | 34 RenderingQueue queue}) { |
68 assert(label != null); | 35 assert(label != null); |
69 NavMenuItemElement e = document.createElement(tag.name); | 36 NavMenuItemElement e = document.createElement(tag.name); |
70 e._r = new RenderingScheduler(e, queue: queue); | 37 e._r = new RenderingScheduler(e, queue: queue); |
71 e._label = label; | 38 e._label = label; |
72 e._link = link; | 39 e._link = link; |
73 return e; | 40 return e; |
74 } | 41 } |
75 | 42 |
76 NavMenuItemElement.created() : super.created() { createShadowRoot(); } | 43 NavMenuItemElement.created() : super.created(); |
77 | 44 |
78 @override | 45 @override |
79 void attached() { | 46 void attached() { |
80 super.attached(); | 47 super.attached(); |
81 _r.enable(); | 48 _r.enable(); |
82 } | 49 } |
83 | 50 |
84 @override | 51 @override |
85 void detached() { | 52 void detached() { |
86 super.detached(); | 53 super.detached(); |
87 _r.disable(notify: true); | 54 _r.disable(notify: true); |
88 shadowRoot.children = []; | 55 children = []; |
89 } | 56 } |
90 | 57 |
91 void render() { | 58 void render() { |
92 shadowRoot.children = [ | 59 children = [ |
93 _style.clone(true), | |
94 new LIElement() | 60 new LIElement() |
95 ..classes = ['nav-menu-item'] | 61 ..classes = ['nav-menu-item'] |
96 ..children = [ | 62 ..children = [ |
97 new AnchorElement(href: link) | 63 new AnchorElement(href: link) |
98 ..text = label, | 64 ..text = label, |
99 new UListElement() | 65 new UListElement() |
100 ..children = [ | 66 ..children = _content |
101 new ContentElement() | |
102 ] | |
103 ] | 67 ] |
104 ]; | 68 ]; |
105 } | 69 } |
106 } | 70 } |
OLD | NEW |