OLD | NEW |
| (Empty) |
1 <!-- | |
2 // Copyright 2015 The Chromium Authors. All rights reserved. | |
3 // Use of this source code is governed by a BSD-style license that can be | |
4 // found in the LICENSE file. | |
5 --> | |
6 <import src="/sky/framework/elements/sky-drawer-header.sky" /> | |
7 <import src="/sky/framework/elements/sky-drawer.sky" /> | |
8 <import src="/sky/framework/elements/sky-element.sky" /> | |
9 <import src="/sky/framework/elements/sky-icon.sky" /> | |
10 <import src="/sky/framework/elements/sky-menu-divider.sky" /> | |
11 <import src="/sky/framework/elements/sky-menu-item.sky" /> | |
12 <import src="/sky/framework/elements/sky-scrollable.sky" /> | |
13 <import src="/sky/framework/elements/sky-toolbar.sky" /> | |
14 <import src="stock.sky" as='view'/> | |
15 | |
16 <sky-element> | |
17 <template> | |
18 <style> | |
19 :host { | |
20 display: flex; | |
21 flex-direction: column; | |
22 height: -webkit-fill-available; | |
23 font-family: 'Roboto Regular', 'Helvetica'; | |
24 font-size: 16px; | |
25 } | |
26 sky-drawer { | |
27 position: absolute; | |
28 z-index: 2; | |
29 top: 0; | |
30 left: 0; | |
31 bottom: 0; | |
32 right: 0; | |
33 } | |
34 sky-toolbar { | |
35 z-index: 1; | |
36 background-color: #3F51B5; | |
37 color: white; | |
38 } | |
39 sky-icon { | |
40 padding: 8px; | |
41 margin: 0 4px; | |
42 } | |
43 #title { | |
44 flex: 1; | |
45 margin: 0 4px; | |
46 } | |
47 sky-scrollable { | |
48 flex: 1; | |
49 } | |
50 </style> | |
51 <sky-drawer id="drawer" level="3"> | |
52 <sky-drawer-header> | |
53 Stocks | |
54 </sky-drawer-header> | |
55 <sky-menu-item icon="content/inbox">Inbox</sky-menu-item> | |
56 <sky-menu-item icon="content/drafts">Drafts</sky-menu-item> | |
57 <sky-menu-divider /> | |
58 <sky-menu-item icon="action/settings">Settings</sky-menu-item> | |
59 <sky-menu-item icon="action/help">Help & feedback</sky-menu-item> | |
60 </sky-drawer> | |
61 <sky-toolbar level="2"> | |
62 <sky-icon id="menu" type="navigation/menu_white" size="24" /> | |
63 <div id="title">I am a stocks app</div> | |
64 <sky-icon type="action/search_white" size="24" /> | |
65 <sky-icon type="navigation/more_vert_white" size="24" /> | |
66 </sky-toolbar> | |
67 <sky-scrollable id='stock_list'> | |
68 </sky-scrollable> | |
69 </template> | |
70 <script> | |
71 import "dart:sky"; | |
72 import "dart:math"; | |
73 import "../stocks-fn/lib/stock_data.dart" as model; | |
74 | |
75 List pick(List list, int count) { | |
76 var rng = new Random(); | |
77 List picked = new List(); | |
78 for (int i = 0; i < count; i++) { | |
79 picked.add(list[rng.nextInt(list.length)]); | |
80 } | |
81 return picked; | |
82 } | |
83 | |
84 @Tagname('stocks') | |
85 class Stocks extends SkyElement { | |
86 Element _drawer; | |
87 | |
88 void shadowRootReady() { | |
89 _drawer = shadowRoot.getElementById('drawer'); | |
90 Element menu = shadowRoot.getElementById('menu'); | |
91 menu.addEventListener('click', _handleMenuClick); | |
92 populateStockList(); | |
93 } | |
94 | |
95 void populateStockList() { | |
96 Element stockList = shadowRoot.getElementById('stock_list'); | |
97 // Limit to 100 to avoid taking seconds to load. | |
98 List<model.Stock> picked = pick(model.oracle.stocks, 100); | |
99 picked.sort((a, b) => a.symbol.compareTo(b.symbol)); | |
100 for (model.Stock stock in picked) { | |
101 stockList.appendChild(new view.Stock()..model = stock); | |
102 } | |
103 } | |
104 | |
105 void _handleMenuClick(_) { | |
106 _drawer.toggle(); | |
107 } | |
108 } | |
109 | |
110 _init(script) => register(script, Stocks); | |
111 </script> | |
112 </sky-element> | |
OLD | NEW |