sky/framework/elements/sky-input.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-element.sky" />

<sky-element name="sky-input" attributes="value:string">
<template>
  <style>
  :host {
    display: flex;
  }
  #control {
    margin: 8px;
    padding: 8px;
    border-bottom: 1px solid #E7E7E7;
    flex: 1;
    align-self: center;
    height: 1.2em;
    white-space: nowrap;
    overflow: hidden;
  }
  #control.focused {
    padding-bottom: 7px;
    border-bottom: 2px solid #009cf3;
  }
  </style>
  <div id="control" contenteditable />
</template>
<script>
import "dart:sky";

// TODO(abarth): Connect to the mojo:keyboard service.

@Tagname('sky-input')
class SkyInput extends SkyElement {
  Element _control;

  static String _textForValue(String value) => value == null ? '' : value;

  shadowRootReady() {
    _control = shadowRoot.getElementById('control');
    _control.setChild(new Text(_textForValue(getAttribute('text'))));
    _control.addEventListener('focus', _handleFocus);
    _control.addEventListener('blur', _handleBlur);
    _control.addEventListener('keydown', _handleKeyDown);
  }

  String get text => _control == null ? null : _control.textContent;

  void textChanged(String oldValue, String newValue) {
    if (_control != null)
      _control.setChild(new Text(_textForValue(newValue)));
  }

  void _handleKeyDown(KeyboardEvent event) {
    // TODO(abarth): You can still get newlines if the user pastes them.
    if (event.key == 0xD)
      event.preventDefault();
  }

  void _handleFocus(_) {
    if (_control)
      _control.setAttribute('class', 'focused');
    // TODO(abarth): Show the keyboard.
  }

  void _handleBlur(_) {
    if (_control)
      _control.removeAttribute('class');
    // TODO(abarth): Hide the keyboard.
  }
}

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