From b8b08910838a4f6edcabee1e230be020e426d2ac Mon Sep 17 00:00:00 2001 From: jendib Date: Wed, 31 Jul 2013 22:04:00 +0200 Subject: [PATCH] Edition of existing tag names (client) --- docs-parent/TODO | 1 - docs-web/src/main/webapp/index.html | 1 + docs-web/src/main/webapp/js/controller/Tag.js | 7 +++ .../main/webapp/js/directive/InlineEdit.js | 56 +++++++++++++++++++ docs-web/src/main/webapp/partial/tag.html | 2 +- docs-web/src/main/webapp/style/main.less | 23 ++++++++ 6 files changed, 88 insertions(+), 2 deletions(-) create mode 100644 docs-web/src/main/webapp/js/directive/InlineEdit.js diff --git a/docs-parent/TODO b/docs-parent/TODO index f10e0f0d..7816cdce 100644 --- a/docs-parent/TODO +++ b/docs-parent/TODO @@ -1,3 +1,2 @@ - Client side search on tags -- Client side edition of existing tag names - Server side reordering files \ No newline at end of file diff --git a/docs-web/src/main/webapp/index.html b/docs-web/src/main/webapp/index.html index 7912a107..363751a2 100644 --- a/docs-web/src/main/webapp/index.html +++ b/docs-web/src/main/webapp/index.html @@ -39,6 +39,7 @@ +
diff --git a/docs-web/src/main/webapp/js/controller/Tag.js b/docs-web/src/main/webapp/js/controller/Tag.js index 38c87d33..337a32a3 100644 --- a/docs-web/src/main/webapp/js/controller/Tag.js +++ b/docs-web/src/main/webapp/js/controller/Tag.js @@ -30,4 +30,11 @@ App.controller('Tag', function($scope, $state, Tag, Restangular) { }); }); }; + + /** + * Update a tag name. + */ + $scope.updateTag = function(tag) { + Restangular.one('tag', tag.id).post('', tag); + }; }); \ No newline at end of file diff --git a/docs-web/src/main/webapp/js/directive/InlineEdit.js b/docs-web/src/main/webapp/js/directive/InlineEdit.js new file mode 100644 index 00000000..54967bfa --- /dev/null +++ b/docs-web/src/main/webapp/js/directive/InlineEdit.js @@ -0,0 +1,56 @@ +'use strict'; + +/** + * Inline edition directive. + * Thanks to http://jsfiddle.net/joshdmiller/NDFHg/ + */ +App.directive('inlineEdit', function() { + return { + restrict: 'E', + scope: { + value: '=', + editCallback: '&onEdit' + }, + template: '', + link: function (scope, element, attrs) { + // Let's get a reference to the input element, as we'll want to reference it. + var inputElement = angular.element(element.children()[1]); + var el = inputElement[0]; + + // This directive should have a set class so we can style it. + element.addClass('inline-edit'); + + // Initially, we're not editing. + scope.editing = false; + + // ng-click handler to activate edit-in-place + scope.edit = function () { + scope.editing = true; + scope.oldValue = el.value; + + // We control display through a class on the directive itself. See the CSS. + element.addClass('active'); + + // And we must focus the element. + // `angular.element()` provides a chainable array, like jQuery so to access a native DOM function, + // we have to reference the first element in the array. + el.focus(); + el.selectionStart = 0; + el.selectionEnd = el.value.length; + }; + + // When we leave the input, we're done editing. + inputElement.on('blur', function() { + scope.editing = false; + element.removeClass('active'); + + // Invoke parent scope callback + if (scope.editCallback && scope.oldValue != el.value) { + scope.$apply(function() { + scope.editCallback(); + }); + } + }); + } + }; +}); \ No newline at end of file diff --git a/docs-web/src/main/webapp/partial/tag.html b/docs-web/src/main/webapp/partial/tag.html index a6b7d499..aa170551 100644 --- a/docs-web/src/main/webapp/partial/tag.html +++ b/docs-web/src/main/webapp/partial/tag.html @@ -18,7 +18,7 @@ - + diff --git a/docs-web/src/main/webapp/style/main.less b/docs-web/src/main/webapp/style/main.less index c8cd794a..1e8ce297 100644 --- a/docs-web/src/main/webapp/style/main.less +++ b/docs-web/src/main/webapp/style/main.less @@ -23,4 +23,27 @@ input[readonly][datepicker-popup] { cursor: pointer; +} + +// Inline edition +.inline-edit { + cursor: pointer; + display: block; +} + +.inline-edit span { + display: block; +} + +.inline-edit input { + display: none; + margin-bottom: 0; +} + +.inline-edit.active span { + display: none; +} + +.inline-edit.active input { + display: inline-block; } \ No newline at end of file
{{ tag.name }}