From 42303df0dccd24a8ddba8cf934ba419c9ed8b914 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Barrag=C3=A1n=20Merino?= Date: Sat, 25 Oct 2014 15:00:50 +0200 Subject: [PATCH] fix an strange visual behavior with tg-tag-line directive --- app/coffee/modules/common/tags.coffee | 91 ++++++++++++++++----------- app/partials/issues-detail.jade | 8 ++- app/partials/task-detail.jade | 8 ++- app/partials/us-detail.jade | 5 +- 4 files changed, 66 insertions(+), 46 deletions(-) diff --git a/app/coffee/modules/common/tags.coffee b/app/coffee/modules/common/tags.coffee index 70e258df..1e9b16d2 100644 --- a/app/coffee/modules/common/tags.coffee +++ b/app/coffee/modules/common/tags.coffee @@ -118,6 +118,7 @@ LbTagLineDirective = ($rs) -> """) # TODO: i18n link = ($scope, $el, $attrs, $model) -> + ## Render renderTags = (tags, tagsColors) -> ctx = { tags: _.map(tags, (t) -> {name: t, color: tagsColors[t]}) @@ -132,6 +133,7 @@ LbTagLineDirective = ($rs) -> $el.find("input").val("") $el.find("input").autocomplete("close") + ## Aux methods addValue = (value) -> value = trim(value.toLowerCase()) return if value.length == 0 @@ -143,6 +145,16 @@ LbTagLineDirective = ($rs) -> $scope.$apply -> $model.$setViewValue(tags) + deleteValue = (value) -> + value = trim(value.toLowerCase()) + return if value.length == 0 + + tags = _.clone($model.$modelValue, false) + tags = _.pull(tags, value) + + $scope.$apply -> + $model.$setViewValue(tags) + saveInputTag = () -> value = $el.find("input").val() @@ -150,6 +162,7 @@ LbTagLineDirective = ($rs) -> resetInput() hideSaveButton() + ## Events $el.on "keypress", "input", (event) -> return if event.keyCode != ENTER_KEY event.preventDefault() @@ -167,18 +180,14 @@ LbTagLineDirective = ($rs) -> $el.on "click", ".save", (event) -> event.preventDefault() - saveInputTag + saveInputTag() $el.on "click", ".icon-delete", (event) -> event.preventDefault() target = angular.element(event.currentTarget) value = target.siblings(".tag-name").text() - tags = _.clone($model.$modelValue, false) - tags = _.pull(tags, value) - - $scope.$apply -> - $model.$setViewValue(tags) + deleteValue(value) bindOnce $scope, "project", (project) -> positioningFunction = (position, elements) -> @@ -249,6 +258,7 @@ TagLineDirective = ($rootScope, $repo, $rs, $confirm) -> isEditable = -> return $scope.project.my_permissions.indexOf($attrs.requiredPerm) != -1 + ## Render renderTags = (tags, tagsColors) -> ctx = { tags: _.map(tags, (t) -> {name: t, color: tagsColors[t]}) @@ -277,26 +287,45 @@ TagLineDirective = ($rootScope, $repo, $rs, $confirm) -> $el.find("input").val("") $el.find("input").autocomplete("close") + ## Aux methods addValue = (value) -> value = trim(value.toLowerCase()) return if value.length == 0 - tags = _.clone($model.$modelValue, false) + tags = _.clone($model.$modelValue.tags, false) tags = [] if not tags? tags.push(value) if value not in tags - $scope.$apply -> - $model.$setViewValue(tags) + model = $model.$modelValue.clone() + model.tags = tags + $model.$setViewValue(model) - autosaveModel = $scope.$eval($attrs.autosaveModel) - if autosaveModel - onSuccess = -> - $rootScope.$broadcast("history:reload") - onError = -> - $confirm.notify("error") - $scope.$apply -> - autosaveModel.revert() - $repo.save(autosaveModel).then(onSuccess, onError) + onSuccess = -> + $rootScope.$broadcast("history:reload") + onError = -> + $confirm.notify("error") + model.revert() + $model.$setViewValue(model) + $repo.save(model).then(onSuccess, onError) + + deleteValue = (value) -> + value = trim(value.toLowerCase()) + return if value.length == 0 + + tags = _.clone($model.$modelValue.tags, false) + tags = _.pull(tags, value) + + model = $model.$modelValue.clone() + model.tags = tags + $model.$setViewValue(model) + + onSuccess = -> + $rootScope.$broadcast("history:reload") + onError = -> + $confirm.notify("error") + model.revert() + $model.$setViewValue(model) + $repo.save(model).then(onSuccess, onError) saveInputTag = () -> value = $el.find("input").val() @@ -305,6 +334,7 @@ TagLineDirective = ($rootScope, $repo, $rs, $confirm) -> resetInput() hideSaveButton() + ## Events $el.on "keypress", "input", (event) -> return if event.keyCode not in [ENTER_KEY, ESC_KEY] event.preventDefault() @@ -339,21 +369,7 @@ TagLineDirective = ($rootScope, $repo, $rs, $confirm) -> target = angular.element(event.currentTarget) value = target.siblings(".tag-name").text() - tags = _.clone($model.$modelValue, false) - tags = _.pull(tags, value) - - $scope.$apply -> - $model.$setViewValue(tags) - - autosaveModel = $scope.$eval($attrs.autosaveModel) - if autosaveModel - onSuccess = -> - $rootScope.$broadcast("history:reload") - onError = -> - $confirm.notify("error") - $scope.$apply -> - autosaveModel.revert() - $repo.save(autosaveModel).then(onSuccess, onError) + deleteValue(value) bindOnce $scope, "project", (project) -> if not isEditable() @@ -380,17 +396,16 @@ TagLineDirective = ($rootScope, $repo, $rs, $confirm) -> ui.item.value = "" }) - $scope.$watch $attrs.ngModel, (tags) -> - return if not tags + $scope.$watch $attrs.ngModel, (model) -> + return if not model - if tags.length + if model.tags.length hideAddTagButtonText() else showAddTagButtonText() tagsColors = $scope.project?.tags_colors or [] - renderTags(tags, tagsColors) - + renderTags(model.tags, tagsColors) $scope.$on "$destroy", -> $el.off() diff --git a/app/partials/issues-detail.jade b/app/partials/issues-detail.jade index 709cfdf9..dc88a0eb 100644 --- a/app/partials/issues-detail.jade +++ b/app/partials/issues-detail.jade @@ -28,10 +28,12 @@ block content span.block-description(tg-bind-html="issue.blocked_note || 'This issue is blocked'") div.issue-nav - a.icon.icon-arrow-left(ng-show="previousUrl", tg-bo-href="previousUrl", title="previous issue") - a.icon.icon-arrow-right(ng-show="nextUrl", tg-bo-href="nextUrl", title="next issue") + a.icon.icon-arrow-left(ng-show="previousUrl", tg-bo-href="previousUrl", + title="previous issue") + a.icon.icon-arrow-right(ng-show="nextUrl", tg-bo-href="nextUrl", + title="next issue") - div.tags-block(tg-tag-line, autosave-model="issue", ng-model="issue.tags", required-perm="modify_issue") + div.tags-block(tg-tag-line, ng-model="issue", required-perm="modify_issue") section.duty-content.wysiwyg(tg-editable-description, ng-model="issue", required-perm="modify_issue") diff --git a/app/partials/task-detail.jade b/app/partials/task-detail.jade index a05e434d..c1a83251 100644 --- a/app/partials/task-detail.jade +++ b/app/partials/task-detail.jade @@ -31,10 +31,12 @@ block content span.block-description-title Blocked span.block-description(tg-bind-html="task.blocked_note || 'This task is blocked'") div.issue-nav - a.icon.icon-arrow-left(ng-show="previousUrl", tg-bo-href="previousUrl", title="previous task") - a.icon.icon-arrow-right(ng-show="nextUrl", tg-bo-href="nextUrl", title="next task") + a.icon.icon-arrow-left(ng-show="previousUrl", tg-bo-href="previousUrl", + title="previous task") + a.icon.icon-arrow-right(ng-show="nextUrl", tg-bo-href="nextUrl", + title="next task") - div.tags-block(tg-tag-line, autosave-model="task", ng-model="task.tags", required-perm="modify_task") + div.tags-block(tg-tag-line, ng-model="task", required-perm="modify_task") section.duty-content.wysiwyg(tg-editable-description, ng-model="task", required-perm="modify_task") diff --git a/app/partials/us-detail.jade b/app/partials/us-detail.jade index 4319618b..83b3b5ca 100644 --- a/app/partials/us-detail.jade +++ b/app/partials/us-detail.jade @@ -34,9 +34,10 @@ block content div.issue-nav a.icon.icon-arrow-left(ng-show="previousUrl", tg-bo-href="previousUrl", title="previous user story") - a.icon.icon-arrow-right(ng-show="nextUrl", tg-bo-href="nextUrl", title="next user story") + a.icon.icon-arrow-right(ng-show="nextUrl", tg-bo-href="nextUrl", + title="next user story") - div.tags-block(tg-tag-line, autosave-model="us", ng-model="us.tags", required-perm="modify_us") + div.tags-block(tg-tag-line, ng-model="us", required-perm="modify_us") section.duty-content.wysiwyg(tg-editable-description, ng-model="us", required-perm="modify_us")