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

NIHVIVO-2232: Nick fixed the issue I had for showing and hiding the custom template field, and another issue selecting/deselecting classes in a class group.

Browse source
This commit is contained in:
manolobevia 2011-07-14 16:41:38 +00:00
parent d37b526ad8
commit 4fca7d702e
3 changed files with 98 additions and 125 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,47 +0,0 @@
/* $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');
});
});

143
webapp/web/js/menupage/menumanagement_edit.js
View file

@ -2,18 +2,22 @@
var menuManagementEdit = { var menuManagementEdit = {
onLoad: function() { onLoad: function() {
this.initObjects(); this.initObjects();
this.bindEventListeners(); this.bindEventListeners();
this.toggleClassSelection();
}, },
initObjects: function() { initObjects: function() {
this.changeContentType = $('#changeContentType'); this.defaultTemplateRadio = $('input.default-template');
this.selectContentType = $('#selectContentType'); this.customTemplateRadio = $('input.custom-template');
this.existingContentType = $('#existingContentType'); this.customTemplate = $('#custom-template');
this.selectClassGroupDropdown = $('#selectClassGroup'); this.changeContentType = $('#changeContentType');
this.classesForClassGroup = $('#classesInSelectedGroup'); this.selectContentType = $('#selectContentType');
this.selectedGroupForPage = $('#selectedContentTypeValue'); this.existingContentType = $('#existingContentType');
this.selectClassesMessage = $('#selectClassesMessage'); this.selectClassGroupDropdown = $('#selectClassGroup');
this.allClassesSelectedCheckbox = $('#allSelected'); this.classesForClassGroup = $('#classesInSelectedGroup');
this.selectedGroupForPage = $('#selectedContentTypeValue');
this.selectClassesMessage = $('#selectClassesMessage');
this.allClassesSelectedCheckbox = $('#allSelected');
}, },
bindEventListeners: function() { bindEventListeners: function() {
@ -23,81 +27,104 @@ var menuManagementEdit = {
return false; return false;
}); });
this.selectClassGroupDropdown.change(function() { this.selectClassGroupDropdown.change(function() {
menuManagementEdit.chooseClassGroup(); menuManagementEdit.chooseClassGroup();
}); });
this.allClassesSelectedCheckbox.change(function() { // this.allClassesSelectedCheckbox.change(function() {
menuManagementEdit.toggleClassSelection(); // menuManagementEdit.toggleClassSelection();
// });
// Listeners for template field
this.defaultTemplateRadio.click(function(){
menuManagementEdit.customTemplate.addClass('hidden');
});
this.customTemplateRadio.click(function(){
// If checked, hide this input element
menuManagementEdit.customTemplate.removeClass('hidden');
}); });
}, },
showClassGroups: function() { showClassGroups: function() {
if(!this.existingContentType.hasClass("hidden")) { if(!this.existingContentType.hasClass("hidden")) {
this.existingContentType.addClass("hidden"); this.existingContentType.addClass("hidden");
this.selectClassesMessage.addClass("hidden"); this.selectClassesMessage.addClass("hidden");
this.classesForClassGroup.addClass("hidden"); this.classesForClassGroup.addClass("hidden");
} }
this.selectContentType.removeClass("hidden"); this.selectContentType.removeClass("hidden");
}, },
hideClassGroups: function() { hideClassGroups: function() {
if(!this.selectContentType.hasClass("hidden")) { if(!this.selectContentType.hasClass("hidden")) {
this.selectContentType.addClass("hidden"); this.selectContentType.addClass("hidden");
} }
this.existingContentType.removeClass("hidden"); this.existingContentType.removeClass("hidden");
this.selectClassesMessage.removeClass("hidden"); this.selectClassesMessage.removeClass("hidden");
this.classesForClassGroup.removeClass("hidden"); this.classesForClassGroup.removeClass("hidden");
}, },
toggleClassSelection:function() { toggleClassSelection: function() {
/*To do: please fix so selecting all selects all classes and deselecting /*To do: please fix so selecting all selects all classes and deselecting
* any class will deselect all * any class will deselect all
*/ */
/* /*
if(this.allClassesSelectedCheckbox.is(':checked')) { if(this.allClassesSelectedCheckbox.is(':checked')) {
$('#classInClassGroup').attr('checked', 'checked'); $('#classInClassGroup').attr('checked', 'checked');
} else { } else {
$('#classInClassGroup').removeAttr('checked'); $('#classInClassGroup').removeAttr('checked');
}*/ }*/
// Check/unckeck all classes for selection
$('input:checkbox[name=allSelected]').click(function(){
// alert($('input:checkbox[name=classInClassGroup]'));
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');
});
}, },
chooseClassGroup: function() { chooseClassGroup: function() {
var url = "dataservice?getVClassesForVClassGroup=1&classgroupUri=";
var vclassUri = this.selectClassGroupDropdown.val();
url += encodeURIComponent(vclassUri);
//Make ajax call to retrieve vclasses
$.getJSON(url, function(results) {
var url = "dataservice?getVClassesForVClassGroup=1&classgroupUri="; if ( results.classes.length == 0 ) {
var vclassUri = this.selectClassGroupDropdown.val();
url += encodeURIComponent(vclassUri);
//Make ajax call to retrieve vclasses
$.getJSON(url, function(results) {
if ( results.classes.length == 0 ) {
} 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.hideClassGroups();
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(); menuManagementEdit.classesForClassGroup.empty();
var appendHtml = '<ul id="selectedClasses" name="selectedClasses">'; var appendHtml = '<ul id="selectedClasses" name="selectedClasses">';
appendHtml += '<ul id="selectedClasses" name="selectedClasses">'; appendHtml += '<ul id="selectedClasses" name="selectedClasses">';
appendHtml += '<li class="ui-state-default">' + appendHtml += '<li class="ui-state-default">' +
'<input type="checkbox" name="allSelected" id="allSelected" value="all" checked="checked" />' + '<input type="checkbox" name="allSelected" id="allSelected" value="all" checked="checked" />' +
'<label class="inline" for="All"> All</label>' + '<label class="inline" for="All"> All</label>' +
'</li>'; '</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>';
}); });
appendHtml += "</ul>"; appendHtml += "</ul>";
menuManagementEdit.classesForClassGroup.append(appendHtml); menuManagementEdit.classesForClassGroup.append(appendHtml);
menuManagementEdit.toggleClassSelection();
} }
}); });
} }
}; };

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

@ -25,23 +25,17 @@
<input type="text" name="prettyUrl" value="${prettyUrl}" role="input" /> <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 -->
<p>Template<span class="requiredHint"> *</span></p> <p>Template<span class="requiredHint"> *</span></p>
<input type="radio" class="default-template" name="selectedTemplate" value="default" <#if selectedTemplateType = "default">checked</#if> role="radio" /> <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" class="custom-template" value="custom" <#if selectedTemplateType = "custom">checked</#if> role="input" /> <input type="radio" name="selectedTemplate" class="custom-template" 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"> <section id="custom-template" <#if selectedTemplateType != 'custom'>class="hidden" </#if>role="region">
<section id="custom-template" role="region"> <input type="text" name="customTemplate" value="${customTemplate!}" size="30" role="input" /><span class="requiredHint"> *</span>
<input type="text" name="customTemplate" value="${customTemplate}" size="30" role="input" /><span class="requiredHint"> *</span> </section>
</section>
</#if>
<section id="existingContentType" name="existingContentType" ${existingClassGroupStyle} role="region"> <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>
@ -116,4 +110,3 @@ ${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>')}