Chromium Code Reviews Chromium Code Reviews
Issue 2160123002:
Converted Observatory nav-menu-item element (Closed)
Base URL: git@github.com:dart-lang/sdk.git@master| OLD | NEW |
|---|---|
| (Empty) | |
| 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 | |
| 3 // BSD-style license that can be found in the LICENSE file. | |
| 4 | |
| 5 import 'dart:html'; | |
| 6 import 'dart:async'; | |
| 7 import 'package:observatory/src/elements/helpers/tag.dart'; | |
| 8 import 'package:observatory/src/elements/helpers/rendering_scheduler.dart'; | |
| 9 | |
| 10 class NavMenuItemElement extends HtmlElement implements Renderable { | |
| 11 static final StyleElement _style = () { | |
| 12 var style = new StyleElement(); | |
| 13 style.text = 'li.nav-menu-item {' | |
|
Cutch
2016/07/19 14:20:44
use ''' quotes with new lines.
cbernaschina
2016/07/19 19:17:55
Done.
| |
| 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 | |
| 52 RenderingScheduler _r; | |
| 53 | |
| 54 Stream<RenderedEvent<NavMenuItemElement>> get onRendered => _r.onRendered; | |
| 55 | |
| 56 String _label; | |
| 57 String _link; | |
| 58 String get label => _label; | |
| 59 String get link => _link; | |
| 60 set label(String value) { | |
| 61 if (_label != value) { | |
| 62 _label = value; | |
| 63 _r.dirty(); | |
| 64 } else { | |
| 65 _r.scheduleNotification(); | |
| 66 } | |
| 67 } | |
| 68 set link(String value) { | |
| 69 if (_link != value) { | |
| 70 _link = value; | |
| 71 _r.dirty(); | |
| 72 } else { | |
| 73 _r.scheduleNotification(); | |
| 74 } | |
| 75 } | |
| 76 | |
| 77 | |
| 78 factory NavMenuItemElement(String label, {String link, | |
| 79 RenderingQueue queue}) { | |
| 80 assert(label != null); | |
| 81 NavMenuItemElement e = document.createElement(tag.name); | |
| 82 e._r = new RenderingScheduler(e, queue: queue); | |
| 83 e._label = label; | |
| 84 e._link = link; | |
| 85 return e; | |
| 86 } | |
| 87 | |
| 88 NavMenuItemElement.created() : super.created() { createShadowRoot(); } | |
| 89 | |
| 90 @override | |
| 91 void attached() { super.attached(); _r.enable(); } | |
| 92 | |
| 93 @override | |
| 94 void detached() { | |
| 95 super.detached(); _r.disable(notify: true); | |
| 96 shadowRoot.children = []; | |
| 97 } | |
| 98 | |
| 99 void render() { | |
| 100 shadowRoot.children = [ | |
| 101 _style.clone(true), | |
| 102 new LIElement() | |
| 103 ..classes = ['nav-menu-item'] | |
| 104 ..children = [ | |
| 105 new AnchorElement(href: '#$link') | |
| 106 ..text = label, | |
| 107 new UListElement() | |
| 108 ..children = [ | |
| 109 new ContentElement() | |
| 110 ] | |
| 111 ] | |
| 112 ]; | |
| 113 } | |
| 114 } | |
| OLD | NEW |
