vmario/docs
1
0
Fork 0
mirror of https://github.com/sismics/docs.git synced 2024-11-22 05:57:57 +01:00
Code Issues Packages Projects Releases Wiki Activity

Edition of existing tag names (client)

Browse Source
This commit is contained in:
jendib 2013-07-31 22:04:00 +02:00
parent 6c1354a2f6
commit b8b0891083
6 changed files with 88 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs-parent/TODO
View File

@ -1,3 +1,2 @@
- Client side search on tags
- Client side edition of existing tag names
- Server side reordering files

1
docs-web/src/main/webapp/index.html
View File

@ -39,6 +39,7 @@
<script src="js/filter/Newline.js" type="text/javascript"></script>
<script src="js/directive/File.js" type="text/javascript"></script>
<script src="js/directive/SelectTag.js" type="text/javascript"></script>
<script src="js/directive/InlineEdit.js" type="text/javascript"></script>
</head>
<body>
<div class="navbar" ng-controller="Navigation">

7
docs-web/src/main/webapp/js/controller/Tag.js
View File

@ -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);
};
});

56
docs-web/src/main/webapp/js/directive/InlineEdit.js Normal file
View File

@ -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: '<span ng-click="edit()" ng-bind="value"></span><input type="text" ng-model="value" />',
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();
});
}
});
}
};
});

2
docs-web/src/main/webapp/partial/tag.html
View File

@ -18,7 +18,7 @@
<table class="table table-striped table-hover table-tags">
<tbody>
<tr ng-repeat="tag in tags | filter:search">
<td>{{ tag.name }}</td>
<td><inline-edit value="tag.name" on-edit="updateTag(tag)" /></td>
<td><button class="btn btn-danger pull-right" ng-click="deleteTag(tag)"><span class="icon-trash icon-white"></span></button></td>
</tr>
</tbody>

23
docs-web/src/main/webapp/style/main.less
View File

@ -24,3 +24,26 @@
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;
}