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>
|
||||
|
||||
<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="middleName" label="Middle name ${initialHint}" size="20" /></p>
|
||||
<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"/>" >
|
||||
|
||||
<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">
|
||||
<%-- RY maybe make this a label and input field. See what looks best. --%>
|
||||
<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 -->
|
||||
<div class="acSelection">
|
||||
<%-- RY maybe make this a label and input field. See what looks best. --%>
|
||||
<p class="inline"><label>Selected :</label><span class="acSelectionName"></span></p>
|
||||
<input type="hidden" id="pubUri" name="pubUri" class="acReceiver" value="" /> <!-- Field value populated by JavaScript -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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$ */
|
||||
|
||||
/* 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(){
|
||||
|
||||
this.form = $('#content form');
|
||||
this.fullViewOnly = $('#fullViewOnly');
|
||||
this.button = $('#submit');
|
||||
this.or = $('span.or');
|
||||
this.requiredLegend = $('#requiredLegend');
|
||||
this.typeSelector = this.form.find('#typeSelector');
|
||||
|
||||
this.typeSelector = this.form.find('.typeSelector');
|
||||
this.acInput = this.form.find('.acInput');
|
||||
this.or = $('span.or');
|
||||
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.cancel = this.form.find('cancel');
|
||||
|
||||
|
||||
},
|
||||
|
||||
|
@ -47,30 +51,50 @@ var customFormWATS = {
|
|||
this.requiredLegend.hide();
|
||||
|
||||
this.cancel.unbind('click');
|
||||
this.cancel('click', function() {
|
||||
|
||||
});
|
||||
},
|
||||
|
||||
initFormFullView: function() {
|
||||
|
||||
this.button.show();
|
||||
this.fullViewOnly.show();
|
||||
this.or.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() {
|
||||
|
||||
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() {
|
||||
|
||||
// ac selection: disable typeSelector and acSelector
|
||||
}
|
||||
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue