OLD | NEW |
1 <!-- | 1 <!-- |
2 // Copyright 2015 The Chromium Authors. All rights reserved. | 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 | 3 // Use of this source code is governed by a BSD-style license that can be |
4 // found in the LICENSE file. | 4 // found in the LICENSE file. |
5 --> | 5 --> |
| 6 <import src="/sky/framework/shell.sky" as="shell" /> |
6 <import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement" /> | 7 <import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement" /> |
| 8 <import src="/mojo/services/keyboard/public/interfaces/keyboard.mojom.sky" as="k
eyboard" /> |
7 | 9 |
8 <sky-element name="sky-input" attributes="value:string"> | 10 <sky-element name="sky-input" attributes="value:string"> |
9 <template> | 11 <template> |
10 <style> | 12 <style> |
11 :host { | 13 :host { |
12 display: flex; | 14 display: flex; |
13 border: 1px solid blue; | 15 border: 1px solid blue; |
14 margin: 5px; | 16 margin: 5px; |
15 padding: 4px; | 17 padding: 4px; |
16 } | 18 } |
17 #control { | 19 #control { |
18 flex: 1; | 20 flex: 1; |
19 align-self: center; | 21 align-self: center; |
20 height: 1.2em; | 22 height: 1.2em; |
21 white-space: nowrap; | 23 white-space: nowrap; |
22 overflow: hidden; | 24 overflow: hidden; |
23 } | 25 } |
24 </style> | 26 </style> |
25 <div id="control" contenteditable on-keydown="handleKeyDown">{{ value }}</div> | 27 <div id="control" contenteditable |
| 28 on-focus="handleFocus" |
| 29 on-blur="handleBlur" |
| 30 on-keydown="handleKeyDown">{{ value }}</div> |
26 </template> | 31 </template> |
27 <script> | 32 <script> |
| 33 var keyboard = shell.connectToService("mojo:keyboard", keyboard.Keyboard); |
28 module.exports = class extends SkyElement { | 34 module.exports = class extends SkyElement { |
29 shadowRootReady() { | 35 shadowRootReady() { |
30 var control = this.shadowRoot.getElementById('control'); | 36 var control = this.shadowRoot.getElementById('control'); |
31 var text = control.firstChild; | 37 var text = control.firstChild; |
32 | 38 |
33 var observer = new MutationObserver(function() { | 39 var observer = new MutationObserver(function() { |
34 // contenteditable might remove the text node, but we need to keep it | 40 // contenteditable might remove the text node, but we need to keep it |
35 // since that's where the data binding is connected to. | 41 // since that's where the data binding is connected to. |
36 if (!text.parentNode) | 42 if (!text.parentNode) |
37 control.appendChild(text); | 43 control.appendChild(text); |
38 if (this.value == control.textContent) | 44 if (this.value == control.textContent) |
39 return; | 45 return; |
40 this.value = control.textContent; | 46 this.value = control.textContent; |
41 this.dispatchEvent(new CustomEvent('change', { | 47 this.dispatchEvent(new CustomEvent('change', { |
42 bubbles: true, | 48 bubbles: true, |
43 })); | 49 })); |
44 }.bind(this)); | 50 }.bind(this)); |
45 | 51 |
46 observer.observe(control, { | 52 observer.observe(control, { |
47 subtree: true, | 53 subtree: true, |
48 characterData: true, | 54 characterData: true, |
49 childList: true, | 55 childList: true, |
50 }); | 56 }); |
51 } | 57 } |
52 handleKeyDown(event) { | 58 handleKeyDown(event) { |
53 // TODO(abarth): You can still get newlines if the user pastes them. | 59 // TODO(abarth): You can still get newlines if the user pastes them. |
54 if (event.keyCode == 0xD) | 60 if (event.keyCode == 0xD) |
55 event.preventDefault(); | 61 event.preventDefault(); |
56 } | 62 } |
| 63 handleFocus(event) { |
| 64 keyboard.show(); |
| 65 } |
| 66 handleBlur(event) { |
| 67 keyboard.hide(); |
| 68 } |
57 }.register(); | 69 }.register(); |
58 </script> | 70 </script> |
59 </sky-element> | 71 </sky-element> |
OLD | NEW |