OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <!-- | 2 <!-- |
3 Copyright (c) 2012, the Dart project authors. Please see the AUTHORS file | 3 Copyright (c) 2012, the Dart project authors. Please see the AUTHORS file |
4 for details. All rights reserved. Use of this source code is governed by a | 4 for details. All rights reserved. Use of this source code is governed by a |
5 BSD-style license that can be found in the LICENSE file. | 5 BSD-style license that can be found in the LICENSE file. |
6 --> | 6 --> |
7 <html> | 7 <html> |
8 <body> | 8 <body> |
9 <element name="x-editable-label" extends="div" apply-author-styles> | 9 <element name="x-editable-label" extends="div" apply-author-styles> |
10 <template> | 10 <template> |
11 <template if="!editing"> | 11 <template if="!editing"> |
12 <label class='edit-label' on-double-click="edit()">{{value}}</label> | 12 <label class='edit-label' on-double-click="edit()">{{value}}</label> |
13 </template> | 13 </template> |
14 <template if="editing"> | 14 <template if="editing"> |
15 <form on-submit="update($event)"> | 15 <form on-submit="update($event)"> |
16 <input id="edit" class="edit {{editing ? 'editing' : ''}}" | 16 <input id="edit" class="edit {{editing ? 'editing' : ''}}" |
17 on-blur="update($event)" | 17 on-blur="update($event)" |
18 on-key-up="maybeCancel($event)"> | 18 on-key-up="maybeCancel($event)"> |
19 </form> | 19 </form> |
20 </template> | 20 </template> |
21 </template> | 21 </template> |
22 <script type="application/dart"> | 22 <script type="application/dart"> |
23 import 'dart:html'; | 23 import 'dart:html'; |
24 import 'package:web_components/web_components.dart'; | 24 import 'package:web_ui/web_ui.dart'; |
25 | 25 |
26 /** | 26 /** |
27 * Label whose [value] can be edited by double clicking. When editing, it | 27 * Label whose [value] can be edited by double clicking. When editing, it |
28 * displays a form and input element, otherwise it displays the label. You | 28 * displays a form and input element, otherwise it displays the label. You |
29 * can enable two-way binding like this: | 29 * can enable two-way binding like this: |
30 * | 30 * |
31 * <x-editable-label bind-value="{{dartAsignableValue}}"> | 31 * <x-editable-label bind-value="{{dartAsignableValue}}"> |
32 * </x-editable-label> | 32 * </x-editable-label> |
33 */ | 33 */ |
34 class EditableLabel extends WebComponent { | 34 class EditableLabel extends WebComponent { |
(...skipping 29 matching lines...) Expand all Loading... |
64 void maybeCancel(KeyboardEvent e) { | 64 void maybeCancel(KeyboardEvent e) { |
65 if (e.keyCode == KeyCode.ESC) { | 65 if (e.keyCode == KeyCode.ESC) { |
66 editing = false; | 66 editing = false; |
67 } | 67 } |
68 } | 68 } |
69 } | 69 } |
70 </script> | 70 </script> |
71 </element> | 71 </element> |
72 </body> | 72 </body> |
73 </html> | 73 </html> |
OLD | NEW |