feat: allow directly editing other task titles and inputs on click

This commit is contained in:
Johannes Millan 2018-04-08 15:17:42 +02:00
parent 1e8aba4e77
commit cf0a68915a
4 changed files with 30 additions and 9 deletions

View file

@ -21,7 +21,7 @@
@keyframes toggle-edit-on-click-ani {
0% {
transform: scaleY(0);
transform: scaleY(0.5);
}
100% {
transform: scaleY(1);

View file

@ -29,11 +29,17 @@
};
}
function linkFn(scope, el, attrs, ngModel) {
let lastVal;
// to do this better
setTimeout(() => {
lastVal = el.html().replace(/<\S[^><]*>/g, '');
});
el[0].setAttribute('contenteditable', true);
function execCb() {
function execCb(event) {
// deselect all text
//if (window.getSelection) {
// window.getSelection().removeAllRanges();
@ -48,7 +54,8 @@
scope.editOnClickOnEditFinished({
isChanged,
newVal: curVal,
$taskEl: el[0].closest('.task')
$taskEl: el[0].closest('.task'),
event,
});
}
}
@ -59,6 +66,8 @@
curVal = curVal.replace(/<\S[^><]*>/g, '');
const isChanged = lastVal !== curVal;
console.log(curVal, lastVal, isChanged);
if (isChanged) {
ngModel.$setViewValue(curVal);
lastVal = curVal;
@ -76,15 +85,13 @@
scope.$apply(read);
});
el.bind('blur', () => {
el.bind('blur', (ev) => {
scope.$apply(read);
execCb();
execCb(ev);
});
// prevent keyboard shortcuts from firing when here
el[0].addEventListener('keydown', (ev) => {
console.log('keydown');
ev.stopPropagation();
});

View file

@ -69,7 +69,7 @@
layout="row"
layout-align="center center"
tabindex="2"
edit-on-click-on-edit-finished="$ctrl.focusTaskEl($taskEl); $ctrl.onChangeTitle(task, isChanged, newVal);"
edit-on-click-on-edit-finished="$ctrl.focusTaskEl($taskEl, event); $ctrl.onChangeTitle(task, isChanged, newVal);"
edit-on-click-ev-id="task.id"
edit-on-click
ng-model="task.title"></div>

View file

@ -14,6 +14,16 @@
const KEY_RIGHT = 39;
const KEY_DOWN = 40;
function isTargetAnInput(target) {
if (target) {
const isContentEditable = !!target.getAttribute('contenteditable');
const isInput = (target.tagName === 'INPUT') || (target.tagName === 'TEXTAREA');
return isContentEditable || isInput;
}
return false;
}
class TaskListCtrl {
/* @ngInject */
constructor(Dialogs, $rootScope, $mdToast, $timeout, Tasks, EDIT_ON_CLICK_TOGGLE_EV, $scope, ShortSyntax, $element, Jira, CheckShortcutKeyCombo, Util) {
@ -115,7 +125,11 @@
}
}
focusTaskEl(taskEl) {
focusTaskEl(taskEl, ev) {
if (ev && isTargetAnInput(ev.relatedTarget)) {
return;
}
if (taskEl) {
taskEl.focus();
}