NIHVIVO-725 Publication form html, css, and javascript
This commit is contained in:
parent
a66e3b2d89
commit
fb19508325
4 changed files with 64 additions and 22 deletions
|
@ -388,7 +388,7 @@ SPARQL queries for existing values. --%>
|
||||||
|
|
||||||
<h3>Add an Author</h3>
|
<h3>Add an Author</h3>
|
||||||
|
|
||||||
<p class="inline"><v:input type="text" id="lastName" label="Last name ${requiredHint}" cssClass="acInput" size="30" /></p>
|
<p class="inline"><v:input type="text" id="lastName" label="Last name ${requiredHint}" cssClass="acSelector" size="30" /></p>
|
||||||
<p class="inline"><v:input type="text" id="firstName" label="First name ${requiredHint} ${initialHint}" size="20" /></p>
|
<p class="inline"><v:input type="text" id="firstName" label="First name ${requiredHint} ${initialHint}" size="20" /></p>
|
||||||
<p class="inline"><v:input type="text" id="middleName" label="Middle name ${initialHint}" size="20" /></p>
|
<p class="inline"><v:input type="text" id="middleName" label="Middle name ${initialHint}" size="20" /></p>
|
||||||
<input type="hidden" id="label" name="label" value="" /> <!-- Field value populated by JavaScript -->
|
<input type="hidden" id="label" name="label" value="" /> <!-- Field value populated by JavaScript -->
|
||||||
|
|
|
@ -209,14 +209,16 @@ SPARQL queries for existing values. --%>
|
||||||
|
|
||||||
<form id="addPublicationForm" action="<c:url value="/edit/processRdfForm2.jsp"/>" >
|
<form id="addPublicationForm" action="<c:url value="/edit/processRdfForm2.jsp"/>" >
|
||||||
|
|
||||||
<v:input type="select" label="Publication type" name="pubType" id="typeSelector" />
|
<p class="inline"><v:input type="select" label="Publication Type" name="pubType" id="typeSelector" /></p>
|
||||||
|
|
||||||
<v:input type="text" id="title" label="title" cssClass="acInput newIndLabel" size="50" />
|
<div id="fullViewOnly">
|
||||||
|
<v:input type="text" id="label" name="title" label="Title" cssClass="acSelector" size="50" />
|
||||||
|
|
||||||
<div class="acSelection">
|
<div class="acSelection">
|
||||||
<%-- RY maybe make this a label and input field. See what looks best. --%>
|
<%-- RY maybe make this a label and input field. See what looks best. --%>
|
||||||
<p class="inline"><label>Selected :</label><span class="acSelectionName"></span></p>
|
<p class="inline"><label>Selected :</label><span class="acSelectionName"></span></p>
|
||||||
<input type="hidden" id="pubUri" name="pubUri" cssClass="existingIndUri" value="" /> <!-- Field value populated by JavaScript -->
|
<input type="hidden" id="pubUri" name="pubUri" class="acReceiver" value="" /> <!-- Field value populated by JavaScript -->
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p class="submit"><v:input type="submit" id="submit" value="Create Publication" cancel="true" /></p>
|
<p class="submit"><v:input type="submit" id="submit" value="Create Publication" cancel="true" /></p>
|
||||||
|
|
|
@ -1 +1,17 @@
|
||||||
/* $This file is distributed under the terms of the license in /doc/license.txt$ */
|
/* $This file is distributed under the terms of the license in /doc/license.txt$ */
|
||||||
|
|
||||||
|
/* Although Javascript hides these on page load, hide here as well to avoid the flash on page load.
|
||||||
|
This needs to be removed to support a non-JS version of the form. */
|
||||||
|
#fullViewOnly,
|
||||||
|
#submit,
|
||||||
|
.or,
|
||||||
|
#requiredLegend {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content form p.inline label {
|
||||||
|
display: inline;
|
||||||
|
clear: none;
|
||||||
|
float: none;
|
||||||
|
margin-right: 1em;
|
||||||
|
}
|
||||||
|
|
|
@ -20,14 +20,18 @@ var customFormWATS = {
|
||||||
initObjects: function(){
|
initObjects: function(){
|
||||||
|
|
||||||
this.form = $('#content form');
|
this.form = $('#content form');
|
||||||
|
this.fullViewOnly = $('#fullViewOnly');
|
||||||
this.button = $('#submit');
|
this.button = $('#submit');
|
||||||
this.or = $('span.or');
|
|
||||||
this.requiredLegend = $('#requiredLegend');
|
this.requiredLegend = $('#requiredLegend');
|
||||||
|
this.typeSelector = this.form.find('#typeSelector');
|
||||||
|
|
||||||
this.typeSelector = this.form.find('.typeSelector');
|
this.or = $('span.or');
|
||||||
this.acInput = this.form.find('.acInput');
|
this.cancel = this.form.find('.cancel');
|
||||||
|
|
||||||
|
// These are classed rather than id'd in case we want more than one autocomplete on a form.
|
||||||
|
this.acSelector = this.form.find('.acSelector');
|
||||||
this.acSelection = this.form.find('.acSelection');
|
this.acSelection = this.form.find('.acSelection');
|
||||||
this.cancel = this.form.find('cancel');
|
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -47,30 +51,50 @@ var customFormWATS = {
|
||||||
this.requiredLegend.hide();
|
this.requiredLegend.hide();
|
||||||
|
|
||||||
this.cancel.unbind('click');
|
this.cancel.unbind('click');
|
||||||
this.cancel('click', function() {
|
|
||||||
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
|
|
||||||
initFormFullView: function() {
|
initFormFullView: function() {
|
||||||
|
|
||||||
this.button.show();
|
this.fullViewOnly.show();
|
||||||
this.or.show();
|
this.or.show();
|
||||||
this.requiredLegend.show();
|
this.requiredLegend.show();
|
||||||
|
this.button.show();
|
||||||
|
this.button.val('Create Publication');
|
||||||
|
|
||||||
this.cancel.unbind('click');
|
this.cancel.click(function() {
|
||||||
this.cancel('click', function() {
|
customFormWATS.initFormTypeView();
|
||||||
|
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
// Bind event listeners that apply to all form views
|
// Bind event listeners that can persist over the life of the page.
|
||||||
bindEventListeners: function() {
|
bindEventListeners: function() {
|
||||||
|
|
||||||
|
this.typeSelector.change(function() {
|
||||||
|
var labelField,
|
||||||
|
labelFieldLabel,
|
||||||
|
labelText,
|
||||||
|
selectedText;
|
||||||
|
|
||||||
|
if ($(this).val().length) {
|
||||||
|
|
||||||
|
// Set label for label field
|
||||||
|
labelField = $('#label');
|
||||||
|
labelFieldLabel = $('label[for=' + labelField.attr('id') + ']');
|
||||||
|
labelText = labelFieldLabel.html();
|
||||||
|
selectedText = $(this).find(':selected').html();
|
||||||
|
labelFieldLabel.html(selectedText + ' ' + labelText);
|
||||||
|
|
||||||
|
customFormWATS.initFormFullView();
|
||||||
|
|
||||||
|
// set ac type
|
||||||
|
}
|
||||||
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
initAutocomplete: function() {
|
initAutocomplete: function() {
|
||||||
|
|
||||||
|
// ac selection: disable typeSelector and acSelector
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue