litvinovg/vitro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

NIHVIVO-2232: Worked on cleaning template markup, adding role tags, styling template for adding and editing a menu item. Also, created js file for revealing/ unveiling custom template input field and check/unckeck all account for deletion.

Browse source
This commit is contained in:
manolobevia 2011-07-13 18:16:38 +00:00
parent 359271ba04
commit d4323b5c30
3 changed files with 81 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

9
webapp/web/css/menupage/testmenupage.css
View file

@ -10,12 +10,6 @@
#edit-menu-item p { #edit-menu-item p {
margin-top: 15px; margin-top: 15px;
} }
#add-menu-item input[type="text"],
#edit-menu-item input[type="text"],
#add-menu-item select,
#edit-menu-item select {
width: 20em;
}
#add-menu-item input[name="prettyUrl"], #add-menu-item input[name="prettyUrl"],
#edit-menu-item input[name="prettyUrl"] { #edit-menu-item input[name="prettyUrl"] {
margin-bottom: 0; margin-bottom: 0;
@ -46,3 +40,6 @@ ul#selectedClasses {
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
} }
ul#selectedClasses li {
margin-left: .4em;
}

47
webapp/web/js/menupage/menuManagementUtils.js Normal file
View file

@ -0,0 +1,47 @@
/* $This file is distributed under the terms of the license in /doc/license.txt$ */
// menu management util tools
$(document).ready(function(){
// reveal/unveil custom template field
$('input.default-template').click(function(){
if ( this.checked ) {
// If checked, hide this input element
$('#custom-template').addClass('hidden');
}
else {
// if not checked, display them
$('#custom-template').removeClass('hidden');
}
});
$('input.custom-template').click(function(){
if ( this.checked ) {
// If checked, hide this input element
$('#custom-template').removeClass('hidden');
// And clear any values entered in the password fields
//$('input[name=confirmPassword]').val("");
}
//else {
// if not checked, display them
// $('#custom-template').removeClass('hidden');
//}
});
// Check/unckeck all account for deletion
$('input:checkbox[name=allSelected]').click(function(){
if ( this.checked ) {
// if checked, select all the checkboxes
$('input:checkbox[name=classInClassGroup]').attr('checked','checked');
} else {
// if not checked, deselect all the checkboxes
$('input:checkbox[name=classInClassGroup]').removeAttr('checked');
}
});
$('input:checkbox[name=classInClassGroup]').click(function(){
$('input:checkbox[name=allSelected]').removeAttr('checked');
});
});

61
webapp/web/templates/freemarker/edit/forms/testMenuManagement.ftl
View file

@ -1,8 +1,6 @@
<#-- $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$ -->
<#--Since we are going to use one template for adding and editing a menu item, <#--Template for adding and editing menu items -->
it will be necessary to provide a freemarker variable that lets us know if you are in edit or add mode. This is up
to you Huda the way you implement it. -->
<#-- some additional processing here which shows or hides the class group selection and classes based on initial action--> <#-- some additional processing here which shows or hides the class group selection and classes based on initial action-->
<#assign existingClassGroupStyle = " " /> <#assign existingClassGroupStyle = " " />
@ -16,50 +14,51 @@
<section id="${menuAction?lower_case}-menu-item" role="region"> <section id="${menuAction?lower_case}-menu-item" role="region">
<form method="POST" action="${formUrls}" class="customForm" role="${menuAction} menu item"> <form method="POST" action="${formUrls}" class="customForm" role="${menuAction} menu item">
<input type="hidden" name="cmd" id="cmd" value="${menuAction}" /> <input type="hidden" name="cmd" id="cmd" value="${menuAction}" role="input" />
<input type="hidden" name="menuItem" id="menuItem" value="${menuItem}" /> <input type="hidden" name="menuItem" id="menuItem" value="${menuItem}" role="input" />
<input type="hidden" name="switchToDisplayModel" id="switchToDisplayModel" value="true" /> <input type="hidden" name="switchToDisplayModel" id="switchToDisplayModel" value="true" role="input" />
<label for="menu-name">Name<span class="requiredHint"> *</span></label> <label for="menu-name">Name<span class="requiredHint"> *</span></label>
<input type="text" name="menuName" value="${menuName}" /> <input type="text" name="menuName" value="${menuName}" role="input" />
<label for="pretty-url">Pretty URL<span class="requiredHint"> *</span></label> <label for="pretty-url">Pretty URL<span class="requiredHint"> *</span></label>
<input type="text" name="prettyUrl" value="${prettyUrl}" /> <input type="text" name="prettyUrl" value="${prettyUrl}" role="input" />
<p class="note">(Format: /<prettyURL> - ie. /people)</p> <p class="note">(Format: /<prettyURL> - ie. /people)</p>
<#--Commented out for now --> <#--Commented out for now -->
<p>Template<span class="requiredHint"> *</span></p> <p>Template<span class="requiredHint"> *</span></p>
<input type="radio" name="selectedTemplate" value="default" <#if selectedTemplateType = "default">checked</#if> /> <input type="radio" class="default-template" name="selectedTemplate" value="default" <#if selectedTemplateType = "default">checked</#if> role="radio" />
<label class="inline" for="default"> Default</label> <label class="inline" for="default"> Default</label>
<br /> <br />
<input type="radio" name="selectedTemplate" value="custom" <#if selectedTemplateType = "custom">checked</#if> /> <input type="radio" name="selectedTemplate" value="custom" <#if selectedTemplateType = "custom">checked</#if> role="input" />
<label class="inline" for="custom"> Custom template</label> <label class="inline" for="custom"> Custom template</label>
<#if selectedTemplateType = "custom"> <#if selectedTemplateType = "custom">
<br /> <section id="custom-template" role="region">
<input class="custom-template" type="text" name="customTemplate" value="${customTemplate}" /><span class="requiredHint"> *</span> <input class="custom-template" type="text" name="customTemplate" value="${customTemplate}" size="30" role="input" /><span class="requiredHint"> *</span>
</section>
</#if> </#if>
<section id="existingContentType" name="existingContentType" ${existingClassGroupStyle}> <section id="existingContentType" name="existingContentType" ${existingClassGroupStyle} role="region">
<p>Selected content type for the associated page</p> <p>Selected content type for the associated page</p>
<p> <p>
<span id="selectedContentTypeValue" name="selectedContentTypeValue"><em>${associatedPage}</em></span> <span id="selectedContentTypeValue" name="selectedContentTypeValue">${associatedPage}</span>
<a id="changeContentType" name="changeContentType" href="#">Change content type</a> <a href="#" id="changeContentType" name="changeContentType">Change content type</a>
</p> </p>
</section> </section>
<#-- Select class group --> <#-- Select class group -->
<section id="selectContentType" name="selectContentType" ${selectClassGroupStyle}> <section id="selectContentType" name="selectContentType" ${selectClassGroupStyle} role="region">
<label for="selectClassGroup">Select content type for the associated page<span class="requiredHint"> *</span></label> <label for="selectClassGroup">Select content type for the associated page<span class="requiredHint"> *</span></label>
<select name="selectClassGroup" id="selectClassGroup"> <select name="selectClassGroup" id="selectClassGroup" role="combobox">
<option value="-1"> </option> <option value="-1" role="option">Select one</option>
<#list classGroups as aClassGroup> <#list classGroups as aClassGroup>
<option value="${aClassGroup.URI}" <#if aClassGroup.URI = associatedPageURI>selected</#if> >${aClassGroup.publicName}</option> <option value="${aClassGroup.URI}" <#if aClassGroup.URI = associatedPageURI>selected</#if> role="option">${aClassGroup.publicName}</option>
</#list> </#list>
</select> </select>
</section> </section>
@ -67,17 +66,15 @@
<#-- Select classes in a class group --> <#-- Select classes in a class group -->
<p id="selectClassesMessage" name="selectClassesMessage" ${existingClassGroupStyle}>Select content to display</p> <p id="selectClassesMessage" name="selectClassesMessage" ${existingClassGroupStyle}>Select content to display</p>
<section id="classesInSelectedGroup" name="classesInSelectedGroup" ${existingClassGroupStyle}> <section id="classesInSelectedGroup" name="classesInSelectedGroup" ${existingClassGroupStyle}>
<ul id="selectedClasses" name="selectedClasses" role="menu">
<ul id="selectedClasses" name="selectedClasses">
<#--Adding a default class for "ALL" in case all classes selected--> <#--Adding a default class for "ALL" in case all classes selected-->
<li class="ui-state-default"> <li class="ui-state-default" role="menuitem">
<input type="checkbox" name="allSelected" id="allSelected" value="all" <#if isClassGroupPage = true || includeAllClasses = true>checked</#if> <input type="checkbox" name="allSelected" id="allSelected" value="all" <#if isClassGroupPage = true || includeAllClasses = true>checked</#if> />
<label class="inline" for="All"> All</label> <label class="inline" for="All"> All</label>
</li> </li>
<#list classGroup as classInClassGroup> <#list classGroup as classInClassGroup>
<li class="ui-state-default"> <li class="ui-state-default" role="menuitem">
<input type="checkbox" id="classInClassGroup" name="classInClassGroup" value="${classInClassGroup.URI}" <input type="checkbox" id="classInClassGroup" name="classInClassGroup" value="${classInClassGroup.URI}" <#if includeAllClasses = true>checked</#if> />
<#if includeAllClasses = true>checked</#if> />
<#if isIndividualsForClassesPage?has_content> <#if isIndividualsForClassesPage?has_content>
<#list includeClasses as includeClass> <#list includeClasses as includeClass>
<#if includeClass = classInClassGroup.URI> <#if includeClass = classInClassGroup.URI>
@ -95,19 +92,18 @@
<section id="internal-class" role="region"> <section id="internal-class" role="region">
<#if internalClass?has_content> <#if internalClass?has_content>
<#assign enableInternalClass = '' /> <#assign enableInternalClass = '' />
<#assign disableClass = '' /> <#assign disableClass = 'class="inline"' />
<#else> <#else>
<#assign enableInternalClass = '<p>To enable this option, you must first select an institutional internal class for your instance</p>' /> <#assign enableInternalClass = '<p class="note">To enable this option, you must first select an institutional internal class for your instance</p>' />
<#assign disableClass = 'class="disable"' /> <#assign disableClass = 'class="disable inline" disabled="disabled"' />
</#if> </#if>
<input type="checkbox" ${disableClass} name="display-internalClass" value="${internalClassUri}" id="display-internalClass" <#if pageInternalOnly?has_content>checked</#if> /> <input type="checkbox" ${disableClass} name="display-internalClass" value="${internalClassUri}" id="display-internalClass" <#if pageInternalOnly?has_content>checked</#if> role="input" />
<label ${disableClass} class="inline" for="display-internalClass">Only display <em>${associatedPage}</em> within my institution</label> <label ${disableClass} class="inline" for="display-internalClass">Only display <em>${associatedPage}</em> within my institution</label>
${enableInternalClass} ${enableInternalClass}
</section> </section>
<input type="submit" name="submit-${menuAction}" value="Save changes" class="submit" /> or <a class="cancel" href="${formUrls}">Cancel</a> <input type="submit" name="submit-${menuAction}" value="Save changes" class="submit" role="input" /> or <a class="cancel" href="${formUrls}">Cancel</a>
<p class="requiredHint">* required fields</p> <p class="requiredHint">* required fields</p>
</form> </form>
@ -120,3 +116,4 @@ ${stylesheets.add('<link rel="stylesheet" href="${urls.base}/edit/forms/css/cust
<#-- Add necessary javascript files associated with this page --> <#-- Add necessary javascript files associated with this page -->
${scripts.add('<script type="text/javascript" src="${urls.base}/js/menupage/menumanagement_edit.js"></script>')} ${scripts.add('<script type="text/javascript" src="${urls.base}/js/menupage/menumanagement_edit.js"></script>')}
${scripts.add('<script type="text/javascript" src="${urls.base}/js/menupage/menuManagementUtils.js"></script>')}