updates to associated concept and user defined concept generators, related preprocessors, css, and javascript file
This commit is contained in:
hjkhjk54
parent
c3d1d16d9b
commit
b54b8c566d
8 changed files with 645 additions and 107 deletions
|
|
@ -1,29 +1,29 @@
|
|||
/* $This file is distributed under the terms of the license in /doc/license.txt$ */
|
||||
|
||||
.terminology .column {
|
||||
.concepts .column {
|
||||
float:left;
|
||||
padding-right:3px;
|
||||
|
||||
}
|
||||
|
||||
.terminology .row {
|
||||
.concepts .row {
|
||||
clear:both;
|
||||
float:left;
|
||||
border-bottom: 1px solid #5F6464;
|
||||
}
|
||||
|
||||
.termLabel {
|
||||
.conceptLabel {
|
||||
width:220px;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
.termType {
|
||||
.conceptType {
|
||||
width: 40px;
|
||||
}
|
||||
.termDefinition{
|
||||
.conceptDefinition{
|
||||
width:400px;
|
||||
}
|
||||
|
||||
form#addTerminologyForm {
|
||||
form#addConceptForm {
|
||||
display:none;
|
||||
}
|
||||
268
productMods/edit/forms/js/addConcept.js
Normal file
268
productMods/edit/forms/js/addConcept.js
Normal file
|
|
@ -0,0 +1,268 @@
|
|||
/* $This file is distributed under the terms of the license in /doc/license.txt$ */
|
||||
|
||||
var addConceptForm = {
|
||||
|
||||
/* *** Initial page setup *** */
|
||||
|
||||
onLoad: function() {
|
||||
|
||||
if (this.disableFormInUnsupportedBrowsers()) {
|
||||
return;
|
||||
}
|
||||
this.mixIn();
|
||||
this.initObjects();
|
||||
this.initPage();
|
||||
},
|
||||
|
||||
disableFormInUnsupportedBrowsers: function() {
|
||||
var disableWrapper = $('#ie67DisableWrapper');
|
||||
|
||||
// Check for unsupported browsers only if the element exists on the page
|
||||
if (disableWrapper.length) {
|
||||
if (vitro.browserUtils.isIELessThan8()) {
|
||||
disableWrapper.show();
|
||||
$('.noIE67').hide();
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
mixIn: function() {
|
||||
// Mix in the custom form utility methods
|
||||
$.extend(this, vitro.customFormUtils);
|
||||
// Get the custom form data from the page
|
||||
$.extend(this, customFormData);
|
||||
},
|
||||
// On page load, create references for easy access to form elements.
|
||||
initObjects: function() {
|
||||
|
||||
this.form = $('#addConceptForm');
|
||||
this.showFormButtonWrapper = $('#showAddForm');
|
||||
this.submit = this.form.find(':submit');
|
||||
this.cancel = this.form.find('.cancel');
|
||||
//Add term
|
||||
this.addConceptButton = $('#showAddFormButton');
|
||||
//section where results should be displayed
|
||||
this.selectedConcept = $('#selectedConcept');
|
||||
//input for search term form
|
||||
this.searchTerm = $('#searchTerm');
|
||||
this.searchSubmit = $('#searchButton');
|
||||
this.vocabSource = $('#source');
|
||||
//Hidden inputs for eventual submission
|
||||
this.externalConceptURI = $('#conceptNode');
|
||||
this.externalConceptLabel = $('#conceptLabel');
|
||||
this.externalConceptSource = $('#conceptSource');
|
||||
//remove links
|
||||
this.removeTermLinks = $('a.remove');
|
||||
this.errors = $('#errors');
|
||||
},
|
||||
|
||||
initPage: function() {
|
||||
this.initConceptData();
|
||||
this.bindEventListeners();
|
||||
|
||||
},
|
||||
bindEventListeners: function() {
|
||||
this.searchSubmit.click(function() {
|
||||
addConceptForm.submitSearchTerm();
|
||||
addConceptForm.clearErrors();
|
||||
return false;
|
||||
});
|
||||
|
||||
this.form.submit(function() {
|
||||
return addConceptForm.prepareSubmit();
|
||||
});
|
||||
|
||||
this.addTermButton.click(function() {
|
||||
addConceptForm.initForm();
|
||||
|
||||
});
|
||||
this.removeConceptLinks.click(function() {
|
||||
addConceptForm.removeExistingConcept(this);
|
||||
return false;
|
||||
});
|
||||
},
|
||||
initForm: function() {
|
||||
// Hide the button that shows the form
|
||||
this.showFormButtonWrapper.hide();
|
||||
this.clearSearchResults();
|
||||
|
||||
this.cancel.unbind('click');
|
||||
this.cancel.bind('click', function() {
|
||||
//show only list of existing terms and hide adding term form
|
||||
addConceptForm.showConceptListOnlyView();
|
||||
return false;
|
||||
});
|
||||
|
||||
// Show the form
|
||||
this.form.show();
|
||||
},
|
||||
// On page load, associate data with each existing term element. Then we don't
|
||||
// have to keep retrieving data from or modifying the DOM as we manipulate the
|
||||
// authorships.
|
||||
initConceptData: function() {
|
||||
$('.existingConcept').each(function(index) {
|
||||
$(this).data(existingConceptsData[index]);
|
||||
$(this).data('position', index+1);
|
||||
});
|
||||
},
|
||||
clearSearchResults:function() {
|
||||
$('#selectedConcept').empty();
|
||||
},
|
||||
clearErrors:function() {
|
||||
addConceptForm.errors.empty();
|
||||
},
|
||||
showConceptListOnlyView: function() {
|
||||
this.hideForm();
|
||||
this.showFormButtonWrapper.show();
|
||||
},
|
||||
submitSearchTerm: function() {
|
||||
//Get value of search term
|
||||
var searchValue = this.searchTerm.val();
|
||||
this.entryTerm.val(searchValue);
|
||||
var dataServiceUrl = addConceptForm.dataServiceUrl + "?searchTerm=" + encodeURIComponent(searchValue);
|
||||
$.getJSON(dataServiceUrl, function(results) {
|
||||
if ( results.array.length == 0 ) {
|
||||
alert("results not correct length");
|
||||
} else {
|
||||
//array is an array of objects representing concept information
|
||||
//loop through and find all the best matches
|
||||
|
||||
var bestMatchResults = addConceptForm.parseResults(results.array);
|
||||
var numberMatches = bestMatchResults.length;
|
||||
var i;
|
||||
//For each result, display
|
||||
var htmlAdd = "";
|
||||
if(numberMatches > 0) {
|
||||
htmlAdd = "<ul class='dd' id='concepts' name='concepts'>";
|
||||
htmlAdd+= addConceptForm.addResultsHeader();
|
||||
for(i = 0; i < numberMatches; i++) {
|
||||
var conceptResult = bestMatchResults[i];
|
||||
var conceptId = conceptResult.conceptId;
|
||||
var label = conceptResult.label;
|
||||
var definition = conceptResult.definition;
|
||||
var definedBy = conceptResult.definedBy;
|
||||
var type = conceptResult.type;
|
||||
var uri = conceptResult.uri;
|
||||
htmlAdd+= addConceptForm.generateIndividualTermDisplay(uri, label, definition, type, definedBy);
|
||||
}
|
||||
htmlAdd+= "</ul>";
|
||||
} else {
|
||||
htmlAdd+= "<p>No search results found.</p>";
|
||||
}
|
||||
$('#selectedConcept').html(htmlAdd);
|
||||
}
|
||||
|
||||
});
|
||||
},
|
||||
parseResults:function(resultsArray) {
|
||||
//Loop through array and check if this is the best match
|
||||
var arrayLen = resultsArray.length;
|
||||
var bestMatchResults = new Array();
|
||||
var i;
|
||||
for(i = 0; i < arrayLen; i++) {
|
||||
var concept = resultsArray[i];
|
||||
if(concept.bestMatch == "true") {
|
||||
bestMatchResults.push(concept);
|
||||
}
|
||||
}
|
||||
return bestMatchResults;
|
||||
},
|
||||
addResultsHeader:function() {
|
||||
var htmlAdd = "<li class='terminology'><div class='row'><span class='column conceptLabel'>Label (Type) </span><span class='column conceptDefinition'>Definition</span></div></li>";
|
||||
return htmlAdd;
|
||||
},
|
||||
hideSearchResults:function() {
|
||||
this.selectedConcept.hide();
|
||||
},
|
||||
prepareSubmit:function() {
|
||||
var checkedElements = $("#CUI:checked");
|
||||
if(!addConceptForm.validateConceptSelection(checkedElements)) {
|
||||
return false;
|
||||
}
|
||||
var i;
|
||||
var len = checkedElements.length;
|
||||
var checkedConcept, checkedConceptElement, conceptLabel, conceptSource;
|
||||
var conceptNodes = [];
|
||||
var conceptLabels = [];
|
||||
var conceptSources = [];
|
||||
|
||||
checkedElements.each(function() {
|
||||
checkedConceptElement = $(this);
|
||||
checkedConcept = checkedTermElement.val();
|
||||
conceptLabel = checkedConceptElement.attr("label");
|
||||
conceptSource = checkedConceptElement.attr("conceptDefinedBy");
|
||||
conceptNodes.push(checkedConcept);
|
||||
conceptLabels.push(termLabel);
|
||||
conceptSources.push(conceptSource);
|
||||
});
|
||||
this.externalConceptURI.val(conceptNodes);
|
||||
this.externalConceptLabel.val(conceptLabels);
|
||||
this.externalConceptSource.val(conceptSources);
|
||||
return true;
|
||||
},
|
||||
generateIndividualTermDisplay: function(cuiURI, label, definition, type, definedBy) {
|
||||
var htmlAdd = "<li class='concepts'>" +
|
||||
"<div class='row'>" +
|
||||
"<span class='column conceptLabel'>" +
|
||||
"<input type='checkbox' id='CUI' name='CUI' value='" + cuiURI + "' label='" + label + "' conceptType='" + type + "' conceptDefinedBy='" + definedBy + "'/>" +
|
||||
label + " (" + type + ")</span>" +
|
||||
"<span class='column conceptDefinition'>" + definition + "</span>" +
|
||||
"</div>" +
|
||||
"</li>";
|
||||
return htmlAdd;
|
||||
}, validateConceptSelection:function(checkedElements) {
|
||||
var numberElements = checkedElements.length;
|
||||
if(numberElements < 1) {
|
||||
addConceptForm.errors.html("<p class='validationError'>Please select at least one term from search results to add or click cancel.</p>");
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}, removeExistingConcept: function(link) {
|
||||
var removeLast = false,
|
||||
message = 'Are you sure you want to remove this term?';
|
||||
|
||||
if (!confirm(message)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if ($(link)[0] === $('.remove:last')[0]) {
|
||||
removeLast = true;
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: $(link).attr('href'),
|
||||
type: 'POST',
|
||||
data: {
|
||||
deletion: $(link).parents('.existingConcept').data('conceptNodeUri')
|
||||
},
|
||||
dataType: 'json',
|
||||
context: link, // context for callback
|
||||
complete: function(request, status) {
|
||||
var existingConcept,
|
||||
conceptNodeUri;
|
||||
|
||||
if (status === 'success') {
|
||||
|
||||
existingConcept = $(this).parents('.existingConcept');
|
||||
existingConcept.fadeOut(400, function() {
|
||||
var numConcepts;
|
||||
// For undo link: add to a deletedAuthorships array
|
||||
// Remove from the DOM
|
||||
$(this).remove();
|
||||
// Actions that depend on the author having been removed from the DOM:
|
||||
numConcepts = $('.existingConcept').length; // retrieve the length after removing authorship from the DOM
|
||||
});
|
||||
|
||||
} else {
|
||||
alert('Error processing request: term not removed');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
$(document).ready(function() {
|
||||
addConceptForm.onLoad();
|
||||
});
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
<%@ page import="com.hp.hpl.jena.rdf.model.Model" %>
|
||||
<%@ page import="com.hp.hpl.jena.vocabulary.XSD" %>
|
||||
<%@ page import="com.hp.hpl.jena.vocabulary.RDFS" %>
|
||||
|
||||
<%@ page import="edu.cornell.mannlib.vitro.webapp.beans.Individual" %>
|
||||
<%@ page import="edu.cornell.mannlib.vitro.webapp.beans.DataPropertyComparator" %>
|
||||
|
|
@ -219,12 +220,12 @@ SPARQL queries for existing values. --%>
|
|||
for ( Individual termNode : terminologyAnnotationNodes ) {
|
||||
request.setAttribute("termNodeUri", termNode.getURI());
|
||||
//Get label and type only as mirroring authorship where labels but no links for individuals incoldued
|
||||
DataPropertyStatement termLabelStatement = termNode.getDataPropertyStatement(termLabelUri);
|
||||
DataPropertyStatement termLabelStatement = termNode.getDataPropertyStatement(RDFS.label.getURI());
|
||||
String termLabel = termLabelStatement.getData();
|
||||
request.setAttribute("termLabel", termLabel);
|
||||
DataPropertyStatement termTypeStatement = termNode.getDataPropertyStatement(termTypeUri);
|
||||
String termType = termTypeStatement.getData();
|
||||
request.setAttribute("termType", termType);
|
||||
//request.setAttribute("termLabel", termLabel);
|
||||
//DataPropertyStatement termTypeStatement = termNode.getDataPropertyStatement(termTypeUri);
|
||||
//String termType = termTypeStatement.getData();
|
||||
request.setAttribute("termType", "fake");
|
||||
%>
|
||||
<li class="existingTerm">
|
||||
<%-- span.author will be used in the next phase, when we display a message that the author has been
|
||||
|
|
|
|||
|
|
@ -37,20 +37,22 @@
|
|||
|
||||
|
||||
|
||||
<ul id="existingTerms" >
|
||||
<ul id="existingConcepts" >
|
||||
|
||||
<script type="text/javascript">
|
||||
var existingTermsData = [];
|
||||
var existingConceptsData = [];
|
||||
</script>
|
||||
|
||||
<#list existingConcepts as existingConcept>
|
||||
<li class="existingTerm">
|
||||
<li class="existingConcept">
|
||||
|
||||
<span class="term">
|
||||
<span class="concept">
|
||||
|
||||
<span class="termWrapper">
|
||||
<span class="termLabel">
|
||||
${existingConcept.conceptLabel}
|
||||
<span class="conceptWrapper">
|
||||
<span class="conceptLabel"> ${existingConcept.conceptLabel}
|
||||
<#if existingConcept.vocabURI?has_content && existingConcept.vocabLabel?has_content>
|
||||
(${existingConcept.vocabLabel})
|
||||
</#if>
|
||||
</span>
|
||||
</span>
|
||||
<a href="${urls.base}/edit/primitiveDelete" class="remove">Remove</a>
|
||||
|
|
@ -58,7 +60,7 @@
|
|||
</li>
|
||||
|
||||
<script type="text/javascript">
|
||||
existingTermsData.push({
|
||||
existingConceptsData.push({
|
||||
"conceptNodeUri": "${existingConcept.conceptURI}",
|
||||
"conceptLabel": "${existingConcept.conceptLabel}"
|
||||
});
|
||||
|
|
@ -74,25 +76,26 @@
|
|||
</#if>
|
||||
|
||||
<div id="showAddForm">
|
||||
<input type="submit" value="Add Term" id="showAddFormButton" name="showAddFormButton"> or
|
||||
<input type="submit" value="Add Concept" id="showAddFormButton" name="showAddFormButton"> or
|
||||
<a class="cancel" href="${cancelUrl}">Return</a>
|
||||
</div>
|
||||
<form id="addTerminologyForm" class="customForm" action="${urls.base}/edit/processTerminologyAnnotation">
|
||||
<form id="addConceptForm" class="customForm" action="${submitUrl}">
|
||||
|
||||
<#list sources as source>
|
||||
<input type="radio" name="source" value="${source.uri}" role="radio" <#if selectedSource = source.uri>checked</#if> />
|
||||
<input type="radio" id="source" name="source" value="${source.uri}" role="radio" <#if selectedSource = source.uri>checked</#if> />
|
||||
<label class="inline" for="${source.label}"> ${source.label}</label>
|
||||
<br />
|
||||
</#list>
|
||||
|
||||
<p class="inline">
|
||||
<input type="text" id="searchTerm" label="Search UMLS Terms" class="acSelector" size="35" />
|
||||
<input type="text" id="searchTerm" label="Search" class="acSelector" size="35" />
|
||||
<input type="button" id="searchButton" name="searchButton" value="Search"/>
|
||||
</p>
|
||||
<input type="hidden" id="externalConceptURI" name="externalConceptURI" value=""/> <!-- Field value populated by JavaScript -->
|
||||
<input type="hidden" id="externalConceptLabel" name="externalConceptLabel" value="" /> <!-- Field value populated by JavaScript -->
|
||||
|
||||
<div id="selectedTerm" name="selectedTerm" class="acSelection">
|
||||
<input type="hidden" id="conceptNode" name="conceptNode" value=""/> <!-- Field value populated by JavaScript -->
|
||||
<input type="hidden" id="ConceptLabel" name="conceptLabel" value="" /> <!-- Field value populated by JavaScript -->
|
||||
<!--TODO: Change this so this is populated by the javascript-->
|
||||
<input type="hidden" id="conceptSource" name="conceptSource" value="" /> <!-- Field value populated by JavaScript -->
|
||||
<div id="selectedConcept" name="selectedConcept" class="acSelection">
|
||||
<%-- RY maybe make this a label and input field. See what looks best. --%>
|
||||
<p class="inline">
|
||||
</p>
|
||||
|
|
@ -118,8 +121,12 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
${stylesheets.add('<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/smoothness/jquery-ui-1.8.9.custom.css" />')}
|
||||
${stylesheets.add('<link rel="stylesheet" href="${urls.base}/edit/forms/css/customForm.css" />')}
|
||||
|
||||
${scripts.add('<script type="text/javascript" src="${urls.base}/edit/forms/js/addTerminology.js"></script>')}
|
||||
${stylesheets.add('<link rel="stylesheet" href="${urls.base}/edit/forms/css/addConcept.css" />')}
|
||||
|
||||
${scripts.add('<script type="text/javascript" src="${urls.base}/edit/forms/js/addConcept.js"></script>')}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -11,13 +11,12 @@
|
|||
<h2>Add Your Own Concept</h2>
|
||||
|
||||
|
||||
<form id="addUserDefinedConceptForm" class="editForm" action = "${submitUrl}" method="post">
|
||||
<form id="addUserDefinedConceptForm" class="customForm noIE67" action = "${submitUrl}" method="post">
|
||||
<input type="hidden" name="editKey" id="editKey" value="${editKey}" role="input" />
|
||||
<#--Autocomplete for looking up existing skos concepts -->
|
||||
<p>
|
||||
<p>
|
||||
<label for="relatedIndLabel">Concept <span class='requiredHint'> *</span></label>
|
||||
<input class="acSelector" size="50" type="text" id="relatedIndLabel" name="conceptLabel"
|
||||
<#if (disabledVal?length > 0)>disabled="${disabledVal}"</#if> value="" />
|
||||
<input class="acSelector" size="50" type="text" id="relatedIndLabel" name="conceptLabel" value="" />
|
||||
</p>
|
||||
|
||||
<div class="acSelection">
|
||||
|
|
@ -42,13 +41,14 @@
|
|||
|
||||
</form>
|
||||
|
||||
<#assign sparqlQueryUrl = "/ajax/sparqlQuery" >
|
||||
<#assign sparqlQueryUrl = "${urls.base}/ajax/sparqlQuery" >
|
||||
|
||||
<script type="text/javascript">
|
||||
var customFormData = {
|
||||
sparqlForAcFilter: '${sparqlForAcFilter}',
|
||||
sparqlQueryUrl: '${sparqlQueryUrl}',
|
||||
acUrl: '${urls.base}/autocomplete?tokenize=true',
|
||||
acType: 'http://www.w3.org/2004/02/skos/core#Concept',
|
||||
submitButtonTextType: 'simple',
|
||||
editMode: 'add',
|
||||
defaultTypeName: 'concept' // used in repair mode to generate button text
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue