NIHVIVO-646 Reorder authorships through drag-and-drop. Handle success and failure cases. Reset element positions after a removal.
This commit is contained in:
rjy7
parent
ca27bf877e
commit
5c9de606d0
2 changed files with 98 additions and 86 deletions
|
|
@ -299,6 +299,7 @@ SPARQL queries for existing values. --%>
|
|||
<%
|
||||
|
||||
int rank = 0;
|
||||
int index = 0;
|
||||
for ( Individual authorship : authorships ) {
|
||||
String rankDatatypeUri = "";
|
||||
DataPropertyStatement rankStmt = authorship.getDataPropertyStatement(rankPredicateUri);
|
||||
|
|
@ -309,6 +310,7 @@ SPARQL queries for existing values. --%>
|
|||
|
||||
Individual author = authorship.getRelatedIndividual(linkedAuthorProperty);
|
||||
if ( author != null ) {
|
||||
index++;
|
||||
request.setAttribute("authorName", author.getName());
|
||||
// Doesn't seem to need urlencoding to add as id attribute value
|
||||
//request.setAttribute("authorUri", URLEncoder.encode(author.getURI(), "UTF-8"));
|
||||
|
|
@ -317,15 +319,21 @@ SPARQL queries for existing values. --%>
|
|||
request.setAttribute("rankValue", rank + "_" + rankDatatypeUri);
|
||||
request.setAttribute("rank", rank);
|
||||
|
||||
// This value is used to replace a moved element after a failed reorder.
|
||||
// It's not the same as rank, because ranks may have gaps. It's easier to
|
||||
// reposition the element using ordering.
|
||||
request.setAttribute("position", index);
|
||||
|
||||
%>
|
||||
<c:url var="authorHref" value="/individual">
|
||||
<c:param name="uri" value="${authorUri}"/>
|
||||
</c:url>
|
||||
<c:url var="deleteAuthorshipHref" value="/edit/primitiveRdfDelete" />
|
||||
<c:url var="deleteAuthorshipHref" value="/edit/primitiveDelete" />
|
||||
|
||||
<%-- <c:url var="undoHref" value="/edit/addAuthorToInformationResource" /> --%>
|
||||
<li class="authorship" id="${authorshipUri}">
|
||||
<span class="rank" id="${rankValue}" /> <%-- ${rankDatatypeUri}</span>--%>
|
||||
<span class="rank" id="${rankValue}"></span>
|
||||
<span class="position" id="${position}"></span>
|
||||
<%-- This span will be used in the next phase, when we display a message that the author has been
|
||||
removed. That text will replace the a.authorLink. --%>
|
||||
<span class="author"><a href="${authorHref}" id="${authorUri}" class="authorLink">${authorName}</a>
|
||||
|
|
|
|||
|
|
@ -118,9 +118,15 @@ var addAuthorForm = {
|
|||
// var authorLink = author.children('a.authorLink');
|
||||
// var authorName = authorLink.html();
|
||||
if (status === 'success') {
|
||||
// Reset the position value of each succeeding authorship
|
||||
authorship.next().each(function() {
|
||||
var pos = parseInt($(this).children('.position').attr('id'));
|
||||
$(this).children('.position').attr('id', pos-1);
|
||||
});
|
||||
authorship.fadeOut(400, function() {
|
||||
$(this).remove();
|
||||
});
|
||||
|
||||
// $(this).hide();
|
||||
// $(this).siblings('.undo').show();
|
||||
// author.html(authorName + ' has been removed');
|
||||
|
|
@ -275,73 +281,88 @@ var addAuthorForm = {
|
|||
|
||||
initAuthorReordering: function() {
|
||||
$('#authorships').sortable({
|
||||
update: function() {
|
||||
addAuthorForm.reorderAuthorships();
|
||||
}
|
||||
});
|
||||
},
|
||||
stop: function(event, ui) {
|
||||
var predicateUri = '<' + $('#rankPred').val() + '>',
|
||||
rankXsdType = $('#rankXsdType').val(),
|
||||
additions = '',
|
||||
retractions = '',
|
||||
authorships = [];
|
||||
|
||||
reorderAuthorships: function() {
|
||||
$('li.authorship').each(function(index) {
|
||||
var uri = $(this).attr('id'),
|
||||
subjectUri = '<' + uri + '>',
|
||||
oldRankVal = $(this).children('.rank').attr('id'),
|
||||
newRank = index + 1,
|
||||
newRankForN3,
|
||||
oldRank,
|
||||
oldRankType,
|
||||
oldRankForN3,
|
||||
rankVals;
|
||||
|
||||
var predicateUri = '<' + $('#rankPred').val() + '>',
|
||||
rankXsdType = $('#rankXsdType').val(),
|
||||
additions = '',
|
||||
retractions = '',
|
||||
authorships = [];
|
||||
rankVals = oldRankVal.split('_'); // e.g., 1_http://www.w3.org/2001/XMLSchema#int
|
||||
oldRank = rankVals[0];
|
||||
oldRankType = rankVals[1];
|
||||
oldRankForN3 = addAuthorForm.makeRankDataPropVal(oldRank, oldRankType);
|
||||
|
||||
$('li.authorship').each(function(index) {
|
||||
var uri = $(this).attr('id'),
|
||||
subjectUri = '<' + uri + '>',
|
||||
oldRankVal = $(this).children('.rank').attr('id'),
|
||||
newRank = index + 1,
|
||||
newRankForN3,
|
||||
oldRank,
|
||||
oldRankType,
|
||||
oldRankForN3,
|
||||
rankVals;
|
||||
newRankForN3 = addAuthorForm.makeRankDataPropVal(newRank, rankXsdType);
|
||||
|
||||
rankVals = oldRankVal.split('_'); // e.g., 1_http://www.w3.org/2001/XMLSchema#int
|
||||
oldRank = rankVals[0];
|
||||
oldRankType = rankVals[1];
|
||||
oldRankForN3 = addAuthorForm.makeRankDataPropVal(oldRank, oldRankType);
|
||||
additions += subjectUri + ' ' + predicateUri + ' ' + newRankForN3 + ' .';
|
||||
retractions += subjectUri + ' ' + predicateUri + ' ' + oldRankForN3 + ' .';
|
||||
|
||||
newRankForN3 = addAuthorForm.makeRankDataPropVal(newRank, rankXsdType);
|
||||
// This data will be used to modify the page after successful completion
|
||||
// of the Ajax request.
|
||||
authorship = {
|
||||
uri: uri,
|
||||
newRank: newRank + '_' + rankXsdType
|
||||
};
|
||||
authorships.push(authorship);
|
||||
|
||||
additions += subjectUri + ' ' + predicateUri + ' ' + newRankForN3 + ' .';
|
||||
retractions += subjectUri + ' ' + predicateUri + ' ' + oldRankForN3 + ' .';
|
||||
});
|
||||
|
||||
// This object will be used to modify the page after success or failure of the
|
||||
// Ajax request.
|
||||
authorship = {
|
||||
uri: uri,
|
||||
oldRank: oldRank,
|
||||
newRank: newRank + '_' + rankXsdType
|
||||
};
|
||||
authorships.push(authorship);
|
||||
// console.log(authorships)
|
||||
// console.log("additions: " + additions);
|
||||
// console.log("retractions: " + retractions);
|
||||
|
||||
});
|
||||
$.ajax({
|
||||
url: $('#reorderUrl').val(),
|
||||
data: {
|
||||
additions: additions,
|
||||
retractions: retractions
|
||||
},
|
||||
authorships: authorships,
|
||||
processData: 'false',
|
||||
dataType: 'json',
|
||||
type: 'POST',
|
||||
movedItem: ui.item,
|
||||
success: function(data, status, request) {
|
||||
$.each(authorships, function(index, obj) {
|
||||
// find the element with this uri as id
|
||||
var el = $('li[id=' + obj.uri + ']'),
|
||||
rank = obj.newRank,
|
||||
pos = rank.split('_')[0];
|
||||
// set the new rank for this element
|
||||
el.children('.rank').attr('id', rank);
|
||||
el.children('.position').attr('id', pos);
|
||||
});
|
||||
},
|
||||
error: function(request, status, error) {
|
||||
// Put the moved item back to its original position.
|
||||
// Seems we need to do this by hand. Can't see any way to do it with jQuery UI. ??
|
||||
var pos = ui.item.children('.position').attr('id'),
|
||||
nextpos = parseInt(pos) + 1,
|
||||
authorships = $('#authorships'),
|
||||
next = authorships.find('.position[id=' + nextpos + ']').parent();
|
||||
|
||||
// console.log(authorships)
|
||||
// console.log("additions: " + additions);
|
||||
// console.log("retractions: " + retractions);
|
||||
if (next.length > 0) {
|
||||
ui.item.insertBefore(next);
|
||||
} else {
|
||||
ui.item.appendTo(authorships);
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: $('#reorderUrl').val(),
|
||||
data: {
|
||||
additions: additions,
|
||||
retractions: retractions
|
||||
},
|
||||
authorships: authorships,
|
||||
processData: 'false',
|
||||
dataType: 'json',
|
||||
type: 'POST',
|
||||
success: function(data, status, request) {
|
||||
addAuthorForm.updateRanks(this.authorships);
|
||||
},
|
||||
error: function(request, status, error) {
|
||||
addAuthorForm.resetOrder(this.authorships);
|
||||
alert('Reordering of author ranks failed.');
|
||||
}
|
||||
alert('Reordering of authors failed.');
|
||||
}
|
||||
});
|
||||
} // end stop callback
|
||||
});
|
||||
},
|
||||
|
||||
|
|
@ -353,23 +374,6 @@ var addAuthorForm = {
|
|||
return rankVal;
|
||||
},
|
||||
|
||||
// After drag-and-drop reorder, update the rank vals stored with the authorships;
|
||||
// otherwise, additional reorderings will issue incorrect retractions in the request.
|
||||
updateRanks: function(authorships) {
|
||||
$.each(authorships, function(index, obj) {
|
||||
// find the element with this uri as id
|
||||
var el = $('li[id=' + obj.uri + ']');
|
||||
// set the new rank for this element
|
||||
el.children('.rank').attr('id', obj.newRank);
|
||||
});
|
||||
},
|
||||
|
||||
// After drag-and-drop failure, reset to original order
|
||||
resetOrder: function(authorships) {
|
||||
// restore existing rankings after reordering failure
|
||||
// use span.rank id attr value to determine
|
||||
},
|
||||
|
||||
initAutocomplete: function() {
|
||||
|
||||
var cache = {};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue