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-element.sky" /> | |
7 | |
8 <sky-element name="sky-input" attributes="value:string"> | |
9 <template> | |
10 <style> | |
11 :host { | |
12 display: flex; | |
13 flex-direction: row; | |
14 } | |
15 #control { | |
16 margin: 8px; | |
17 padding: 8px; | |
18 border-bottom: 1px solid #E7E7E7; | |
19 flex: 1; | |
20 align-self: center; | |
21 height: 1.2em; | |
22 white-space: nowrap; | |
23 overflow: hidden; | |
24 } | |
25 #control.focused { | |
26 padding-bottom: 7px; | |
27 border-bottom: 2px solid #009cf3; | |
28 } | |
29 </style> | |
30 <div id="control" contenteditable /> | |
31 </template> | |
32 <script> | |
33 import "dart:sky"; | |
34 | |
35 // TODO(abarth): Connect to the mojo:keyboard service. | |
36 | |
37 @Tagname('sky-input') | |
38 class SkyInput extends SkyElement { | |
39 Element _control; | |
40 | |
41 static String _textForValue(String value) => value == null ? '' : value; | |
42 | |
43 shadowRootReady() { | |
44 _control = shadowRoot.getElementById('control'); | |
45 _control.setChild(new Text(_textForValue(getAttribute('text')))); | |
46 _control.addEventListener('focus', _handleFocus); | |
47 _control.addEventListener('blur', _handleBlur); | |
48 _control.addEventListener('keydown', _handleKeyDown); | |
49 } | |
50 | |
51 String get text => _control == null ? null : _control.textContent; | |
52 | |
53 void textChanged(String oldValue, String newValue) { | |
54 if (_control != null) | |
55 _control.setChild(new Text(_textForValue(newValue))); | |
56 } | |
57 | |
58 void _handleKeyDown(KeyboardEvent event) { | |
59 // TODO(abarth): You can still get newlines if the user pastes them. | |
60 if (event.key == 0xD) | |
61 event.preventDefault(); | |
62 } | |
63 | |
64 void _handleFocus(_) { | |
65 if (_control) | |
66 _control.setAttribute('class', 'focused'); | |
67 // TODO(abarth): Show the keyboard. | |
68 } | |
69 | |
70 void _handleBlur(_) { | |
71 if (_control) | |
72 _control.removeAttribute('class'); | |
73 // TODO(abarth): Hide the keyboard. | |
74 } | |
75 } | |
76 | |
77 _init(script) => register(script, SkyInput); | |
78 </script> | |
79 </sky-element> | |
OLD | NEW |