Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(352)

Side by Side Diff: sky/framework/sky-input.sky

Issue 856063002: Adding keyboard service. (Closed) Base URL: https://github.com/domokit/mojo.git@master
Patch Set: Fix local variable Created 5 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « sky/engine/core/BUILD.gn ('k') | sky/viewer/document_view.cc » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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>
OLDNEW
« no previous file with comments | « sky/engine/core/BUILD.gn ('k') | sky/viewer/document_view.cc » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698