OLD | NEW |
(Empty) | |
| 1 // Copyright (c) 2013, the Dart project authors. Please see the AUTHORS file |
| 2 // for details. All rights reserved. Use of this source code is governed by a |
| 3 // BSD-style license that can be found in the LICENSE file. |
| 4 |
| 5 library editable_label; |
| 6 |
| 7 import 'dart:html'; |
| 8 import 'package:polymer/polymer.dart'; |
| 9 |
| 10 /** |
| 11 * Label whose [value] can be edited by double clicking. When editing, it |
| 12 * displays a form and input element, otherwise it displays the label. |
| 13 */ |
| 14 class EditableLabel extends PolymerElement with ObservableMixin { |
| 15 @observable bool editing = false; |
| 16 @observable String value = ''; |
| 17 bool get applyAuthorStyles => true; |
| 18 |
| 19 InputElement get _editBox => getShadowRoot("editable-label").query('#edit'); |
| 20 |
| 21 void edit() { |
| 22 editing = true; |
| 23 |
| 24 // This causes _editBox to be inserted. |
| 25 performMicrotaskCheckpoint(); |
| 26 |
| 27 // For IE and Firefox: use .focus(), then reset the value to move the |
| 28 // cursor to the end. |
| 29 _editBox.focus(); |
| 30 _editBox.value = ''; |
| 31 _editBox.value = value; |
| 32 } |
| 33 |
| 34 void update(Event e) { |
| 35 e.preventDefault(); // don't submit the form |
| 36 if (!editing) return; // bail if user canceled |
| 37 value = _editBox.value; |
| 38 editing = false; |
| 39 } |
| 40 |
| 41 void maybeCancel(KeyboardEvent e) { |
| 42 if (e.keyCode == KeyCode.ESC) { |
| 43 editing = false; |
| 44 } |
| 45 } |
| 46 } |
| 47 |
| 48 @polymerInitMethod |
| 49 void _init() { |
| 50 registerPolymerElement('editable-label', () => new EditableLabel()); |
| 51 } |
OLD | NEW |