sky/framework/sky-checkbox.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-button.sky" />
<import src="sky-element.sky" />

<sky-element attributes="checked:boolean, highlight:boolean">
<template>
  <style>
    :host {
      display: flex;
      justify-content: center;
      align-items: center;
      -webkit-user-select: none;
      cursor: pointer;
      width: 30px;
      height: 30px;
    }
    #container {
      border: solid 2px;
      border-color: rgba(90, 90, 90, 0.25);
      width: 10px;
      height: 10px;
    }
    #container.highlight {
      border-radius: 10px;
      background-color: orange;
      border-color: orange;
    }
    #check {
      top: 0px;
      left: 0px;
    }
    #check.checked {
      transform: translate(2px, -15px) rotate(45deg);
      width: 10px;
      height: 20px;
      border-style: solid;
      border-top: none;
      border-left: none;
      border-right-width: 2px;
      border-bottom-width: 2px;
      border-color: #0f9d58;
    }
  </style>
  <div id="container">
    <div id="check" />
  </div>
</template>
<script>
import "dart:sky";

@Tagname('sky-checkbox')
class SkyCheckbox extends SkyButton {
  Element _container;
  Element _check;

  SkyCheckbox() {
    addEventListener('click', _handleClick);
  }

  static String _checkClassForValue(bool value) => value ? 'checked' : '';
  static String _containerClassForValue(bool value) => value ? 'highlight' : '';

  void shadowRootReady() {
    _container = shadowRoot.getElementById('container');
    _container.setAttribute('class', _containerClassForValue(highlight));
    _check = shadowRoot.getElementById('check');
    _check.setAttribute('class', _checkClassForValue(checked));
  }

  void checkedChanged(bool oldValue, bool newValue) {
    if (_check != null)
      _check.setAttribute('class', _checkClassForValue(newValue));
  }

  void highlightChanged(bool oldValue, bool newValue) {
    if (_container != null)
      _container.setAttribute('class', _containerClassForValue(newValue));
  }

  void _handleClick(_) {
    checked = !checked;
  }
}

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