NIHVIVO-2232 Refactor markup and javascript for menu item edit form.

This commit is contained in:
cappadona 2011-07-14 23:35:43 +00:00
parent 2919efead0
commit e71628ae6b
2 changed files with 33 additions and 47 deletions

View file

@ -16,14 +16,14 @@ var menuManagementEdit = {
this.selectClassGroupDropdown = $('#selectClassGroup'); this.selectClassGroupDropdown = $('#selectClassGroup');
this.classesForClassGroup = $('#classesInSelectedGroup'); this.classesForClassGroup = $('#classesInSelectedGroup');
this.selectedGroupForPage = $('#selectedContentTypeValue'); this.selectedGroupForPage = $('#selectedContentTypeValue');
this.selectClassesMessage = $('#selectClassesMessage'); // this.selectClassesMessage = $('#selectClassesMessage');
this.allClassesSelectedCheckbox = $('#allSelected'); this.allClassesSelectedCheckbox = $('#allSelected');
}, },
bindEventListeners: function() { bindEventListeners: function() {
// Listeners for vClass switching // Listeners for vClass switching
this.changeContentType.click(function() { this.changeContentType.click(function() {
menuManagementEdit.showClassGroups(); menuManagementEdit.showClasses();
return false; return false;
}); });
this.selectClassGroupDropdown.change(function() { this.selectClassGroupDropdown.change(function() {
@ -42,22 +42,10 @@ var menuManagementEdit = {
menuManagementEdit.customTemplate.removeClass('hidden'); menuManagementEdit.customTemplate.removeClass('hidden');
}); });
}, },
showClassGroups: function() { showClasses: function() {
if(!this.existingContentType.hasClass("hidden")) { this.classesForClassGroup.addClass("hidden");
this.existingContentType.addClass("hidden");
this.selectClassesMessage.addClass("hidden");
this.classesForClassGroup.addClass("hidden");
}
this.selectContentType.removeClass("hidden");
}, },
hideClassGroups: function() { hideClasses: function() {
if(!this.selectContentType.hasClass("hidden")) {
this.selectContentType.addClass("hidden");
}
this.existingContentType.removeClass("hidden");
this.selectClassesMessage.removeClass("hidden");
this.classesForClassGroup.removeClass("hidden"); this.classesForClassGroup.removeClass("hidden");
}, },
toggleClassSelection: function() { toggleClassSelection: function() {
@ -99,28 +87,25 @@ var menuManagementEdit = {
} else { } else {
//update existing content type with correct class group name and hide class group select again //update existing content type with correct class group name and hide class group select again
var _this = menuManagementEdit; var _this = menuManagementEdit;
menuManagementEdit.hideClassGroups(); menuManagementEdit.hideClasses();
menuManagementEdit.selectedGroupForPage.html(results.classGroupName); menuManagementEdit.selectedGroupForPage.html(results.classGroupName);
//retrieve classes for class group and display with all selected //retrieve classes for class group and display with all selected
menuManagementEdit.classesForClassGroup.empty(); var selectedClassesList = menuManagementEdit.classesForClassGroup.children('ul#selectedClasses');
var appendHtml = '<ul id="selectedClasses" name="selectedClasses">';
appendHtml += '<ul id="selectedClasses" name="selectedClasses">'; selectedClassesList.empty();
appendHtml += '<li class="ui-state-default">' + selectedClassesList.append('<li class="ui-state-default"> <input type="checkbox" name="allSelected" id="allSelected" value="all" checked="checked" /> <label class="inline" for="All"> All</label> </li>');
'<input type="checkbox" name="allSelected" id="allSelected" value="all" checked="checked" />' +
'<label class="inline" for="All"> All</label>' +
'</li>';
$.each(results.classes, function(i, item) { $.each(results.classes, function(i, item) {
var thisClass = results.classes[i]; var thisClass = results.classes[i];
var thisClassName = thisClass.name; var thisClassName = thisClass.name;
//When first selecting new content type, all classes should be selected //When first selecting new content type, all classes should be selected
appendHtml += ' <li class="ui-state-default">' + appendHtml = ' <li class="ui-state-default">' +
'<input type="checkbox" checked="checked" name="classInClassGroup" value="' + thisClass.URI + '" />' + '<input type="checkbox" checked="checked" name="classInClassGroup" value="' + thisClass.URI + '" />' +
'<label class="inline" for="' + thisClassName + '"> ' + thisClassName + '</label>' + '<label class="inline" for="' + thisClassName + '"> ' + thisClassName + '</label>' +
'</li>'; '</li>';
selectedClassesList.append(appendHtml);
}); });
appendHtml += "</ul>";
menuManagementEdit.classesForClassGroup.append(appendHtml);
menuManagementEdit.toggleClassSelection(); menuManagementEdit.toggleClassSelection();
} }

View file

@ -57,27 +57,28 @@
</select> </select>
</section> </section>
<#-- Select classes in a class group -->
<p id="selectClassesMessage" name="selectClassesMessage" ${existingClassGroupStyle}>Select content to display</p>
<section id="classesInSelectedGroup" name="classesInSelectedGroup" ${existingClassGroupStyle}> <section id="classesInSelectedGroup" name="classesInSelectedGroup" ${existingClassGroupStyle}>
<#-- Select classes in a class group -->
<p id="selectClassesMessage" name="selectClassesMessage">Select content to display</p>
<section id="internal-class" role="region">
<#if internalClass?has_content>
<#assign enableInternalClass = '' />
<#assign disableClass = 'class="inline"' />
<#else>
<#assign enableInternalClass = '<p class="note">To enable this option, you must first select an <a href="${urls.base}/processInstitutionalInternalClass">institutional internal class</a> for your instance</p>' />
<#assign disableClass = 'class="disable inline" disabled="disabled"' />
</#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>
${enableInternalClass}
</section>
<ul id="selectedClasses" name="selectedClasses" role="menu"> <ul id="selectedClasses" name="selectedClasses" role="menu">
<section id="internal-class" role="region">
<#if internalClass?has_content>
<#assign enableInternalClass = '' />
<#assign disableClass = 'class="inline"' />
<#else>
<#assign enableInternalClass = '<p class="note">To enable this option, you must first select an <a href="${urls.base}/processInstitutionalInternalClass">institutional internal class</a> for your instance</p>' />
<#assign disableClass = 'class="disable inline" disabled="disabled"' />
</#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>
${enableInternalClass}
</section>
<#--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" role="menuitem"> <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> />