make focusing edit-on-click less complicated

This commit is contained in:
Johannes Millan 2017-01-11 18:06:42 +01:00
parent cc167a1828
commit a4e0d50e8a
3 changed files with 10 additions and 24 deletions

View file

@ -22,8 +22,8 @@
controllerAs: 'vm',
restrict: 'A',
scope: {
editOnClickEvId: '@',
editOnClick: '=',
editOnClickToggle: '=',
editOnClickType: '@',
editOnClickOnChange: '&'
}
@ -48,15 +48,8 @@
}
};
$scope.$on(EDIT_ON_CLICK_TOGGLE_EV, (ev, data) => {
console.log(data);
// for some weird reason we have to wait for vm.editOnClick to be ready
if (!angular.isUndefined(vm.editOnClick)) {
if (ev.defaultPrevented) {
return;
}
ev.preventDefault();
$scope.$on(EDIT_ON_CLICK_TOGGLE_EV, (ev, eventId) => {
if (eventId === vm.editOnClickEvId) {
vm.toggleShowEdit();
}
});

View file

@ -32,7 +32,7 @@
<span class="text"
tabindex="2"
edit-on-click-toggle="task.showEdit"
edit-on-click-ev-id="{{ task.id }}"
edit-on-click="task.title">{{ task.title }}</span>
</div>

View file

@ -37,7 +37,7 @@
}
/* @ngInject */
function TaskListCtrl(Dialogs, $mdToast, $timeout, $window, Tasks, EDIT_ON_CLICK_TOGGLE_EV) {
function TaskListCtrl(Dialogs, $mdToast, $timeout, $window, Tasks, EDIT_ON_CLICK_TOGGLE_EV, $scope) {
let vm = this;
vm.estimateTime = (task) => {
@ -146,8 +146,7 @@
}
// enter
if ($event.keyCode === 13) {
let taskScope = angular.element($event.target).scope();
taskScope.$broadcast(EDIT_ON_CLICK_TOGGLE_EV);
$scope.$broadcast(EDIT_ON_CLICK_TOGGLE_EV, task.id);
}
// moving items via shift+ctrl+keyUp/keyDown
@ -177,7 +176,7 @@
}
};
vm.addSubTask = (task, $event) => {
vm.addSubTask = (task) => {
if (!task.subTasks) {
task.subTasks = [];
// save original values for potential later re-initialization
@ -190,16 +189,10 @@
// edit title right away
task.subTasks.push(subTask);
// super complicated way of focusing the new element to edit it right away
// TODO fix this super complication by using the task id instead and passing it to edit-on-click
// focus the new element to edit it right away
// timeout is needed to wait for dom to update
$timeout(() => {
let buttonEl = $event.currentTarget || $event.srcElement || $event.originalTarget;
buttonEl = angular.element(buttonEl);
let taskEl = buttonEl.parent().parent().parent().parent();
let subTaskEls = taskEl.find('li');
let lastSubTasksEl = subTaskEls[subTaskEls.length - 1];
let subTaskScope = angular.element(lastSubTasksEl).scope();
subTaskScope.$broadcast(EDIT_ON_CLICK_TOGGLE_EV);
$scope.$broadcast(EDIT_ON_CLICK_TOGGLE_EV, subTask.id);
});
// if parent was current task, mark sub task as current now