64 lines
1.3 KiB
JavaScript
64 lines
1.3 KiB
JavaScript
|
/* global VT */
|
||
|
|
window.VT = window.VT || {};
|
||
|
|
|
||
|
|
VT.TodoItemInput = function (el) {
|
||
|
|
var saveOnBlur = true;
|
||
|
|
|
||
|
|
el.innerHTML = [
|
||
|
|
'<input type="text" class="input use-focus-other">',
|
||
|
|
'<button class="app-button save"><i class="app-icon" data-id="plus-24"></i></button>',
|
||
|
|
].join('\n');
|
||
|
|
|
||
|
|
var inputEl = el.querySelector('.input');
|
||
|
|
var saveEl = el.querySelector('.save');
|
||
|
|
|
||
|
|
el.querySelectorAll('.app-icon').forEach(VT.AppIcon);
|
||
|
|
|
||
|
|
inputEl.addEventListener('keyup', function (e) {
|
||
|
|
switch (e.keyCode) {
|
||
|
|
case 13: // enter
|
||
|
|
save();
|
||
|
|
break;
|
||
|
|
case 27: // escape
|
||
|
|
clear();
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
inputEl.addEventListener('blur', function () {
|
||
|
|
if (saveOnBlur) save();
|
||
|
|
saveOnBlur = true;
|
||
|
|
});
|
||
|
|
|
||
|
|
inputEl.addEventListener('focusOther', save);
|
||
|
|
|
||
|
|
saveEl.addEventListener('mousedown', function () {
|
||
|
|
saveOnBlur = false;
|
||
|
|
});
|
||
|
|
|
||
|
|
saveEl.addEventListener('click', function () {
|
||
|
|
save();
|
||
|
|
inputEl.focus();
|
||
|
|
});
|
||
|
|
|
||
|
|
function save() {
|
||
|
|
var label = inputEl.value.trim();
|
||
|
|
|
||
|
|
if (label === '') return;
|
||
|
|
|
||
|
|
inputEl.value = '';
|
||
|
|
|
||
|
|
el.dispatchEvent(
|
||
|
|
new CustomEvent('addItem', {
|
||
|
|
detail: { label: label },
|
||
|
|
bubbles: true,
|
||
|
|
})
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
function clear() {
|
||
|
|
inputEl.value = '';
|
||
|
|
inputEl.blur();
|
||
|
|
}
|
||
|
|
};
|