sky/examples/stocks/stocks.sky

<!--
// Copyright 2015 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-->
<import src="/sky/framework/elements/sky-drawer-header.sky" />
<import src="/sky/framework/elements/sky-drawer.sky" />
<import src="/sky/framework/elements/sky-element.sky" />
<import src="/sky/framework/elements/sky-icon.sky" />
<import src="/sky/framework/elements/sky-menu-divider.sky" />
<import src="/sky/framework/elements/sky-menu-item.sky" />
<import src="/sky/framework/elements/sky-scrollable.sky" />
<import src="/sky/framework/elements/sky-toolbar.sky" />
<import src="stock.sky" as='view'/>

<sky-element>
<template>
  <style>
    :host {
      display: flex;
      flex-direction: column;
      height: -webkit-fill-available;
      font-family: 'Roboto Regular', 'Helvetica';
      font-size: 16px;
    }
    sky-drawer {
      position: absolute;
      z-index: 2;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
    }
    sky-toolbar {
      z-index: 1;
      background-color: #3F51B5;
      color: white;
    }
    sky-icon {
      padding: 8px;
      margin: 0 4px;
    }
    #title {
      flex: 1;
      margin: 0 4px;
    }
    sky-scrollable {
      flex: 1;
    }
  </style>
  <sky-drawer id="drawer" level="3">
    <sky-drawer-header>
      Stocks
    </sky-drawer-header>
    <sky-menu-item icon="content/inbox">Inbox</sky-menu-item>
    <sky-menu-item icon="content/drafts">Drafts</sky-menu-item>
    <sky-menu-divider />
    <sky-menu-item icon="action/settings">Settings</sky-menu-item>
    <sky-menu-item icon="action/help">Help &amp; feedback</sky-menu-item>
  </sky-drawer>
  <sky-toolbar level="2">
    <sky-icon id="menu" type="navigation/menu_white" size="24" />
    <div id="title">I am a stocks app</div>
    <sky-icon type="action/search_white" size="24" />
    <sky-icon type="navigation/more_vert_white" size="24" />
  </sky-toolbar>
  <sky-scrollable id='stock_list'>
  </sky-scrollable>
</template>
<script>
import "dart:sky";
import "dart:math";
import "../data/stocks.dart" as model;

List pick(List list, int count) {
  var rng = new Random();
  List picked = new List();
  for (int i = 0; i < count; i++) {
    picked.add(list[rng.nextInt(list.length)]);
  }
  return picked;
}

@Tagname('stocks')
class Stocks extends SkyElement {
  Element _drawer;

  void shadowRootReady() {
    _drawer = shadowRoot.getElementById('drawer');
    Element menu = shadowRoot.getElementById('menu');
    menu.addEventListener('click', _handleMenuClick);
    populateStockList();
  }

  void populateStockList() {
    Element stockList = shadowRoot.getElementById('stock_list');
    // Limit to 100 to avoid taking seconds to load.
    List<model.Stock> picked = pick(model.oracle.stocks, 100);
    picked.sort((a, b) => a.symbol.compareTo(b.symbol));
    for (model.Stock stock in picked) {
      stockList.appendChild(new view.Stock()..model = stock);
    }
  }

  void _handleMenuClick(_) {
    _drawer.toggle();
  }
}

_init(script) => register(script, Stocks);
</script>
</sky-element>