NIHVIVO-193 Added Javascript functionality to custom form for person has position
This commit is contained in:
rjy7
parent
43a7454db8
commit
f1ab7cd78d
3 changed files with 172 additions and 53 deletions
|
|
@ -23,7 +23,6 @@
|
|||
#content form #existing {
|
||||
float: left;
|
||||
clear: none;
|
||||
/* width: 300px;*/
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
|
@ -32,13 +31,24 @@
|
|||
border: 1px solid #9c9c9c;
|
||||
}
|
||||
|
||||
/* #content form p.inline span,*/
|
||||
#content form p.inline input {
|
||||
margin-right: 50em;
|
||||
margin-top: -1.75em;
|
||||
float: right;
|
||||
clear: right;
|
||||
}
|
||||
|
||||
#content form p.inline.year input {
|
||||
margin-right: 46em;
|
||||
margin-top: -1.75em;
|
||||
}
|
||||
|
||||
/*
|
||||
#content form p.inline.year span.hint {
|
||||
margin-right: 38.5em;
|
||||
margin-top: -2.4em;
|
||||
}
|
||||
*/
|
||||
|
||||
input,
|
||||
select,
|
||||
#content form p {
|
||||
|
|
@ -46,10 +56,24 @@ select,
|
|||
}
|
||||
|
||||
/* This div starts off hidden in case Javascript is disabled. Javascript will show it. */
|
||||
.addNewLink {
|
||||
#addNewLink {
|
||||
display: none;
|
||||
}
|
||||
|
||||
option {
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
#content form .hint {
|
||||
color: #9c9c9c;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#content form .requiredHint {
|
||||
color: #ff7700;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#content form #requiredLegend {
|
||||
font-style: italic;
|
||||
}
|
||||
|
|
@ -2,39 +2,129 @@
|
|||
|
||||
var customForm = {
|
||||
|
||||
requiredHintText: ' <span class="requiredHint"> *</span>',
|
||||
|
||||
onLoad: function() {
|
||||
|
||||
var button = $('#submit');
|
||||
var addNewLink = $('#addNewLink');
|
||||
var existing = $('#existing');
|
||||
var addNew = $('#new');
|
||||
var entry = $('#entry');
|
||||
var editType = $("input[name='editType']").val();
|
||||
var entryType = $("input[name='entryType']").val();
|
||||
// Create references to form elements.
|
||||
// NB must be done after document has loaded, else the elements aren't present
|
||||
// in the DOM yet.
|
||||
this.form = $('#content form'),
|
||||
this.button = $('#submit'),
|
||||
this.addNewLink = $('#addNewLink'),
|
||||
this.existing = $('#existing'),
|
||||
this.addNew = $('#new'),
|
||||
this.entry = $('#entry'),
|
||||
this.cancel = this.form.children('.cancel'),
|
||||
this.requiredLegend = $('#requiredLegend'),
|
||||
this.requiredHints = $('.requiredHint'),
|
||||
|
||||
if (editType == 'add') {
|
||||
// Set up form for step 1
|
||||
addNewLink.show();
|
||||
addNew.hide();
|
||||
entry.hide();
|
||||
button.val('Continue');
|
||||
// Read values used to control display
|
||||
this.editType = $("input[name='editType']").val(),
|
||||
this.entryType = $("input[name='entryType']").val().capitalize(),
|
||||
this.newType = $("input[name='newType']").val().capitalize();
|
||||
|
||||
// Add event listeners
|
||||
button.bind('click', function() {
|
||||
entry.show();
|
||||
addNewLink.hide();
|
||||
$(this).val('Create ' + entryType);
|
||||
$(this).unbind('click');
|
||||
return false;
|
||||
if (this.editType == 'add') { //adding a new entry
|
||||
this.initAddForm();
|
||||
|
||||
});
|
||||
} else { // editing existing entry
|
||||
|
||||
this.initEditForm();
|
||||
}
|
||||
},
|
||||
|
||||
// Restore the form to its initial state when returning to step 1
|
||||
resetAddForm: function() {
|
||||
|
||||
// Clear all form data and error messages
|
||||
$('input:text').val('');
|
||||
$('.error').text('');
|
||||
// Remove previously bound event handlers
|
||||
//this.cancel.unbind('click');
|
||||
this.button.unbind('click');
|
||||
|
||||
initAddForm();
|
||||
},
|
||||
|
||||
// Set up add form on page load, or when returning to initial state
|
||||
// (The latter is not yet implemented, but we are preparing for it. Note
|
||||
// that initializations to occur ONLY on page load are done in the onLoad() method.)
|
||||
// RY *** SOME of this will be shared with the edit form - figure out which
|
||||
initAddForm: function() {
|
||||
|
||||
// Step 1 of the form
|
||||
this.addNewLink.show();
|
||||
this.existing.show();
|
||||
this.addNew.hide();
|
||||
this.entry.hide();
|
||||
this.requiredLegend.hide();
|
||||
this.button.val('Continue');
|
||||
|
||||
// Assign event listeners
|
||||
// add new link => step 2b
|
||||
this.addNewLink.bind('click', function() {
|
||||
$(this).hide();
|
||||
customForm.existing.hide();
|
||||
customForm.showFields(customForm.addNew);
|
||||
customForm.entry.show();
|
||||
customForm.requiredLegend.show();
|
||||
customForm.button.val('Create ' + customForm.entryType + ' & ' + customForm.newType);
|
||||
customForm.button.unbind('click');
|
||||
|
||||
// RY This would return us to step 1, but it's not working
|
||||
//customForm.cancel.unbind('click');
|
||||
//customForm.cancel.bind('click', customForm.resetAddForm);
|
||||
});
|
||||
|
||||
// button => step 2a
|
||||
this.button.bind('click', function() {
|
||||
customForm.entry.show();
|
||||
customForm.showFields(customForm.existing);
|
||||
customForm.addNewLink.hide();
|
||||
customForm.requiredLegend.show();
|
||||
$(this).val('Create ' + customForm.entryType);
|
||||
$(this).unbind('click');
|
||||
|
||||
// RY This would return us to step 1, but it's not working
|
||||
//customForm.cancel.bind('click', customForm.resetAddForm);
|
||||
|
||||
return false;
|
||||
});
|
||||
},
|
||||
|
||||
initEditForm: function() {
|
||||
|
||||
},
|
||||
|
||||
// Add required hints to required fields.
|
||||
// Use when the non-Javascript version should not show the required hint,
|
||||
// because the field is not required in that version.
|
||||
addRequiredHints: function(el) {
|
||||
|
||||
var labelText;
|
||||
|
||||
el.children('label.required').each(function() {
|
||||
labelText = $(this).html();
|
||||
$(this).html(labelText + customForm.requiredHintText);
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
// We will need to remove some of the required hints when we return to step 1.
|
||||
// Not used for now.
|
||||
removeRequiredHints: function(el) {
|
||||
var labelText;
|
||||
|
||||
el.children('label.required').each(function() {
|
||||
labelText = $(this).html();
|
||||
$(this).html(labelText.replace(customForm.requiredHintText, ''));
|
||||
});
|
||||
},
|
||||
|
||||
showFields: function(el) {
|
||||
el.show();
|
||||
this.addRequiredHints(el);
|
||||
},
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
$(document).ready(function(){
|
||||
|
|
|
|||
|
|
@ -125,9 +125,6 @@
|
|||
</v:jsonset>
|
||||
|
||||
<v:jsonset var="n3ForNewOrg">
|
||||
@prefix rdf: <${rdf}> .
|
||||
@prefix rdfs: <${rdfs}> .
|
||||
|
||||
?newOrg <${label}> ?newOrgName .
|
||||
?newOrg <${type}> ?newOrgType .
|
||||
?positionUri <${positionInOrgPred}> ?newOrg .
|
||||
|
|
@ -150,7 +147,7 @@
|
|||
"n3required" : [ "${n3ForStmtToPerson}", "${titleAssertion}", "${startYearAssertion}" ],
|
||||
|
||||
"n3optional" : [ "${organizationUriAssertion}",
|
||||
"${n3ForNewOrg}", "${newOrgNameAsertion}", "${newOrgTypeAssertion}",
|
||||
"${n3ForNewOrg}", "${newOrgNameAssertion}", "${newOrgTypeAssertion}",
|
||||
"${endYearAssertion}"],
|
||||
|
||||
"newResources" : { "positionUri" : "${defaultNamespace}",
|
||||
|
|
@ -221,10 +218,10 @@
|
|||
"newOrgType" : {
|
||||
"newResource" : "false",
|
||||
"validators" : [ ],
|
||||
"optionsType" : "INDIVIDUALS_VIA_VCLASS",
|
||||
"optionsType" : "CHILD_VCLASSES",
|
||||
"literalOptions" : [ "Select one" ],
|
||||
"predicateUri" : "",
|
||||
"objectClassUri" : "${organizationClass}",
|
||||
"objectClassUri" : "${orgClassUriJson}",
|
||||
"rangeDatatypeUri" : "",
|
||||
"rangeLang" : "",
|
||||
"assertions" : [ "${newOrgTypeAssertion}" ]
|
||||
|
|
@ -280,13 +277,15 @@
|
|||
%>
|
||||
<c:set var="editType" value="edit" />
|
||||
<c:set var="title" value="Edit position entry for ${subjectName}" />
|
||||
<%-- NB This will be the button text when Javascript is disabled. --%>
|
||||
<c:set var="submitLabel" value="Save changes" />
|
||||
<%
|
||||
} else { // adding new entry
|
||||
%>
|
||||
<c:set var="editType" value="add" />
|
||||
<c:set var="title" value="Create a new position entry for ${subjectName}" />
|
||||
<c:set var="submitLabel" value="position" />
|
||||
<%-- NB This will be the button text when Javascript is disabled. --%>
|
||||
<c:set var="submitLabel" value="Create position" />
|
||||
<% }
|
||||
|
||||
List<String> customJs = new ArrayList<String>(Arrays.asList("forms/js/customForm.js"
|
||||
|
|
@ -294,12 +293,15 @@
|
|||
));
|
||||
request.setAttribute("customJs", customJs);
|
||||
|
||||
List<String> customCss = new ArrayList<String>(Arrays.asList("forms/css/customForm.css"
|
||||
//, "forms/css/personHasPositionHistory.css"
|
||||
List<String> customCss = new ArrayList<String>(Arrays.asList("forms/css/customForm.css",
|
||||
"forms/css/personHasPositionHistory.css"
|
||||
));
|
||||
request.setAttribute("customCss", customCss);
|
||||
%>
|
||||
|
||||
<c:set var="yearHint" value="<span class='hint'> (YYYY)</span>" />
|
||||
<c:set var="requiredHint" value="<span class='requiredHint'> *</span>" />
|
||||
|
||||
<jsp:include page="${preForm}" />
|
||||
|
||||
<h2>${title}</h2>
|
||||
|
|
@ -314,28 +316,31 @@
|
|||
</c:if>
|
||||
|
||||
<div id="existing">
|
||||
<v:input type="select" label="Organization" id="organizationUri" />
|
||||
<v:input type="select" label="Organization" labelClass="required" id="organizationUri" />
|
||||
</div>
|
||||
|
||||
<div id="new">
|
||||
<h6>Add a New Organization</h6>
|
||||
<v:input type="text" label="Organization Name" id="newOrgName" />
|
||||
<v:input type="select" label="Select Organization Type" id="newOrgType" />
|
||||
<h5>Add a New Organization</h5>
|
||||
<v:input type="text" label="Organization Name" labelClass="required" id="newOrgName" />
|
||||
<v:input type="select" label="Select Organization Type" labelClass="required" id="newOrgType" />
|
||||
</div>
|
||||
|
||||
<div id="entry">
|
||||
<v:input type="text" label="Position Title" id="title" size="30" />
|
||||
<v:input type="select" label="Position Type" id="positionType" />
|
||||
<v:input type="text" label="Position Title ${requiredHint}" id="title" size="30" />
|
||||
<v:input type="select" label="Position Type ${requiredHint}" id="positionType" />
|
||||
|
||||
<p class="inline"><v:input type="text" label="Start Year" id="startYear" size="4" /></p>
|
||||
<p class="inline"><v:input type="text" label="End Year" id="endYear" size="4" /></p>
|
||||
<p class="inline year"><v:input type="text" label="Start Year ${requiredHint} ${yearHint}" id="startYear" size="4" /></p>
|
||||
<p class="inline year"><v:input type="text" label="End Year ${yearHint}" id="endYear" size="4" /></p>
|
||||
</div>
|
||||
|
||||
<!-- For Javascript -->
|
||||
<input type="hidden" name="editType" value="add" />
|
||||
<input type="hidden" name="entryType" value="position" />
|
||||
<input type="hidden" name="newType" value="organization" />
|
||||
|
||||
<p class="submit"><v:input type="submit" id="submit" value="${submitLabel}" cancel="${param.subjectUri}"/></p>
|
||||
|
||||
<p id="requiredLegend" class="requiredHint">* required fields</p>
|
||||
</form>
|
||||
|
||||
<jsp:include page="${postForm}"/>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue