sky/framework/sky-radio.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="selected:boolean, group:string, highlight:boolean">
<template>
  <style>
    :host {
      display: inline-block;
      -webkit-user-select: none;
      width: 14px;
      height: 14px;
      border-radius: 7px;
      border: 1px solid blue;
      margin: 0 5px;
    }
    dot {
      -webkit-user-select: none;
      width: 10px;
      height: 10px;
      border-radius: 5px;
      background-color: black;
      margin: 2px;
    }
  </style>
  <dot />
</template>
<script>
import "dart:sky";

final Map<Node, _RadioGroupController> _controllerMap = new Map();

class _RadioGroupController {
  static _RadioGroupController forRadio(radio) {
    Node owner = radio.owner;
    return _controllerMap.putIfAbsent(owner, () =>
        new _RadioGroupController(owner));
  }

  final Node _scope;
  final Set<SkyRadio> _radios = new Set<SkyRadio>();

  _RadioGroupController(this._scope);

  void addRadio(SkyRadio radio) {
    _radios.add(radio);
    // If this new radio is default-selected, take selection from the group.
    if (radio.selected)
      takeSelectionFromGroup(radio);
  }

  void removeRadio(SkyRadio radio) {
    _radios.remove(radio);
    if (_radios.isEmpty)
      _controllerMap.remove(_scope);
  }

  void takeSelectionFromGroup(SkyRadio selectedRadio) {
    String group = selectedRadio.group;
    if (group == null)
      return;
    _radios.forEach((SkyRadio radio) {
      if (selectedRadio == radio)
        return;
      if (radio.group != group)
        return;
      radio.selected = false;
    });
  }
}

@Tagname('sky-radio')
class SkyRadio extends SkyButton {
  _RadioGroupController _controller;
  Element _dot;

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

  void shadowRootReady() {
    _dot = shadowRoot.querySelector('dot');
    _dot.style['display'] = selected ? 'block' : 'none';
  }

  void attached() {
    super.attached();
    _controller = _RadioGroupController.forRadio(this);
    _controller.addRadio(this);
  }

  void detached() {
    super.detached();
    _controller.removeRadio(this);
    _controller = null;
  }

  void selectedChanged(bool oldValue, bool newValue) {
    if (_dot != null)
      _dot.style['display'] = newValue ? 'block' : 'none';
    if (newValue && _controller != null)
      _controller.takeSelectionFromGroup(this);
  }

  void groupChanged(String oldValue, String newValue) {
    if (selected && _controller != null)
      _controller.takeSelectionFromGroup(this);
  }

  _handleClick(_) {
    this.selected = true;
  }
}

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