43 lines
1.4 KiB
JavaScript
43 lines
1.4 KiB
JavaScript
|
import { BaseItem } from './base-item';
|
||
|
|
export class EditItem extends BaseItem {
|
||
|
|
constructor(id, title, initialText, isPassword = false) {
|
||
|
|
super(id, title);
|
||
|
|
this.initialText = initialText;
|
||
|
|
this.isPassword = isPassword;
|
||
|
|
this.contents = initialText;
|
||
|
|
}
|
||
|
|
getDOMNode() {
|
||
|
|
const node = document.createElement('div');
|
||
|
|
const label = document.createElement('label');
|
||
|
|
label.setAttribute('for', `edit_${this.id}`);
|
||
|
|
label.textContent = this.title;
|
||
|
|
const editField = document.createElement('input');
|
||
|
|
editField.id = `edit_${this.id}`;
|
||
|
|
editField.value = this.contents;
|
||
|
|
editField.addEventListener('keydown', this.onChange.bind(this));
|
||
|
|
editField.addEventListener('focus', this.onFocus.bind(this));
|
||
|
|
if (this.isPassword) {
|
||
|
|
editField.type = 'password';
|
||
|
|
}
|
||
|
|
node.appendChild(label);
|
||
|
|
node.appendChild(editField);
|
||
|
|
node.addEventListener('focus', this.onFocus.bind(this));
|
||
|
|
this.editField = editField;
|
||
|
|
this.label = label;
|
||
|
|
this.container = node;
|
||
|
|
return node;
|
||
|
|
}
|
||
|
|
getContents() {
|
||
|
|
return this.editField.value;
|
||
|
|
}
|
||
|
|
onChange(event) {
|
||
|
|
this.emit('update', {
|
||
|
|
type: 'edit',
|
||
|
|
value: this.editField.value
|
||
|
|
});
|
||
|
|
}
|
||
|
|
focus() {
|
||
|
|
this.editField && this.editField.focus();
|
||
|
|
}
|
||
|
|
}
|