diff --git a/productMods/edit/forms/css/customForm.css b/productMods/edit/forms/css/customForm.css index 9f986128..403a4198 100644 --- a/productMods/edit/forms/css/customForm.css +++ b/productMods/edit/forms/css/customForm.css @@ -21,10 +21,9 @@ } #content form #existing { - float: left; - clear: none; -/* width: 300px;*/ - display: inline-block; + float: left; + clear: none; + display: inline-block; } #new { @@ -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; } \ No newline at end of file diff --git a/productMods/edit/forms/js/customForm.js b/productMods/edit/forms/js/customForm.js index bef1a21b..5105d5ca 100644 --- a/productMods/edit/forms/js/customForm.js +++ b/productMods/edit/forms/js/customForm.js @@ -1,40 +1,130 @@ /* $This file is distributed under the terms of the license in /doc/license.txt$ */ var customForm = { - + + requiredHintText: ' *', + onLoad: function() { + + // 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'), - 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(); + // 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(); - if (editType == 'add') { - // Set up form for step 1 - addNewLink.show(); - addNew.hide(); - entry.hide(); - button.val('Continue'); - - // 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(){ diff --git a/productMods/edit/forms/personHasPositionHistory.jsp b/productMods/edit/forms/personHasPositionHistory.jsp index 8557890a..e56461ac 100644 --- a/productMods/edit/forms/personHasPositionHistory.jsp +++ b/productMods/edit/forms/personHasPositionHistory.jsp @@ -125,9 +125,6 @@ - @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 @@ %> + <%-- NB This will be the button text when Javascript is disabled. --%> <% } else { // adding new entry %> - + <%-- NB This will be the button text when Javascript is disabled. --%> + <% } List customJs = new ArrayList(Arrays.asList("forms/js/customForm.js" @@ -294,12 +293,15 @@ )); request.setAttribute("customJs", customJs); - List customCss = new ArrayList(Arrays.asList("forms/css/customForm.css" - //, "forms/css/personHasPositionHistory.css" + List customCss = new ArrayList(Arrays.asList("forms/css/customForm.css", + "forms/css/personHasPositionHistory.css" )); request.setAttribute("customCss", customCss); %> + + +

${title}

@@ -314,28 +316,31 @@
- +
-
Add a New Organization
- - +
Add a New Organization
+ +
- - + + -

-

+

+

+

+ +

* required fields