NIHVIVO-725 Publication form html, css, and javascript

This commit is contained in:
rjy7 2010-07-08 20:40:58 +00:00
parent a66e3b2d89
commit fb19508325
4 changed files with 64 additions and 22 deletions

View file

@ -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 -->

View file

@ -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>

View file

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

View file

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