updates for page management - code.

This commit is contained in:
hjkhjk54 2012-05-29 21:40:09 +00:00
parent 4a9f6a6f28
commit 3646a214a5
12 changed files with 450 additions and 177 deletions

View file

@ -1,18 +1,33 @@
/* $This file is distributed under the terms of the license in /doc/license.txt$ */
var pageManagementUtils = {
dataGetterLabelToURI:null,//initialized by custom data
processDataGetterUtils:processDataGetterUtils,//an external class that should exist before this one
// on initial page setup
onLoad:function(){
if (this.disableFormInUnsupportedBrowsers()) {
return;
}
this.mixIn();
this.initDataGetterProcessors(),
this.initObjects();
this.bindEventListeners();
this.initDisplay();
},
initDataGetterProcessors:function() {
//data getter processor map should come in from custom data
//Go through each and initialize with their class
if(pageManagementUtils.processDataGetterUtils != null) {
var dataGetterProcessorMap = pageManagementUtils.processDataGetterUtils.dataGetterProcessorMap;
$.each(dataGetterProcessorMap, function(key, dataGetterProcessorObject) {
//passes class name from data getter label to uri to processor
dataGetterProcessorObject.initProcessor(pageManagementUtils.dataGetterLabelToURI[key]);
})
}
},
disableFormInUnsupportedBrowsers: function() {
var disableWrapper = $('#ie67DisableWrapper');
@ -28,6 +43,7 @@ var pageManagementUtils = {
},
mixIn: function() {
//Data getter process list input should be retrieved from the custom data
// Mix in the custom form utility methods
$.extend(this, vitro.customFormUtils);
// Get the custom form data from the page
@ -38,8 +54,9 @@ var pageManagementUtils = {
this.contentTypeSelect = $("#typeSelect");
//list of options
this.contentTypeSelectOptions = $('select#typeSelect option');
this.classGroupSection = $("section#classGroup");
this.nonClassGroupSection = $("section#nonClassGroup");
this.classGroupSection = $("section#browseClassGroup");
this.sparqlQuerySection = $("section#sparqlQuery");
this.fixedHTMLSection = $("section#fixedHtml");
//From original menu management edit
this.defaultTemplateRadio = $('input.default-template');
this.customTemplateRadio = $('input.custom-template');
@ -54,6 +71,13 @@ var pageManagementUtils = {
this.allClassesSelectedCheckbox = $('#allSelected');
this.displayInternalMessage = $('#internal-class label em');
this.pageContentSubmissionInputs = $("#pageContentSubmissionInputs");
this.headerBar = $("section#headerBar");
this.moreContentButton = $("input#moreContent");
this.isMenuCheckbox = $("input#menuCheckbox");
this.menuSection = $("section#menu");
this.submitButton = $("input#submit");
this.leftSideDiv = $("div#leftSide");
this.rightSideDiv = $("div#ri;ghtSide")
},
initDisplay: function(){
//right side components
@ -62,43 +86,45 @@ var pageManagementUtils = {
//Why would you want to hide this? This hides everything
// $("section#pageDetails").hide();
$("section#headerBar").hide();
this.headerBar.hide();
this.classGroupSection.hide();
this.nonClassGroupSection.hide();
$("section#classesInSelectedGroup").addClass('hidden');
$("input#moreContent").hide();
this.sparqlQuerySection.hide();
this.fixedHTMLSection.hide();
this.classesForClassGroup.addClass('hidden');
this.moreContentButton.hide();
//left side components
$("input.default-template").attr('checked',true);
$("input#menuCheckbox").attr('checked',false);
$("section#menu").hide();
this.defaultTemplateRadio.attr('checked',true);
this.isMenuCheckbox.attr('checked',false);
this.menuSection.hide();
},
bindEventListeners:function(){
$("input.default-template").click( function() {
$("section#custom-template").addClass('hidden');
this.defaultTemplateRadio.click( function() {
pageManagementUtils.customTemplateRadio.addClass('hidden');
});
$("input.custom-template").click( function() {
$("section#custom-template").removeClass('hidden');
this.customTemplateRadio.click( function() {
pageManagementUtils.defaultTemplateRadio.removeClass('hidden');
});
$("input#menuCheckbox").click( function() {
if ( $("section#menu").is(':hidden') ) {
$("section#menu").show();
this.isMenuCheckbox.click( function() {
if ( pageManagementUtils.menuSection.is(':hidden') ) {
pageManagementUtils.menuSection.show();
}
else {
$("section#menu").hide();
pageManagementUtils.menuSection.hide();
}
});
$("input#submit").click( function() {
this.submitButton.click( function() {
$("section#pageDetails").show();
});
//Collapses the current content and creates a new section of content
//Resets the content to be cloned to default settings
$("input#moreContent").click( function() {
this.moreContentButton.click( function() {
var selectedType = pageManagementUtils.contentTypeSelect.val();
var selectedTypeText = $("#typeSelect option:selected").text();
//Not sure why selected group here? This won't always be true for more content
@ -106,21 +132,22 @@ var pageManagementUtils = {
//Aren't these already hidden?
//Hide both sections
$("section#classGroup").hide();
$("section#nonClassGroup").hide();
pageManagementUtils.classGroupSection.hide();
pageManagementUtils.fixedHTMLSection.hide();
pageManagementUtils.sparqlQuerySection.hide();
//Reset class group
pageManagementUtils.resetClassGroupSection();
pageManagementUtils.contentTypeSelectOptions.eq(0).attr('selected', 'selected');
$("input#moreContent").hide();
if ( $("div#leftSide").css("height") != undefined ) {
$("div#leftSide").css("height","");
if ( $("div#leftSide").height() < $("div#rightSide").height() ) {
$("div#leftSide").css("height",$("div#rightSide").height() + "px");
pageManagementUtils.moreContentButton.hide();
if ( pageManagementUtils.leftSideDiv.css("height") != undefined ) {
pageManagementUtils.leftSideDiv.css("height","");
if ( pageManagementUtils.leftSideDiv.height() < pageManagementUtils.rightSideDiv.height() ) {
pageManagementUtils.leftSideDiv.css("height",pageManagementUtils.rightSideDiv.height() + "px");
}
}
$("section#headerBar").hide();
$("section#headerBar").text("");
pageManagementUtils.headerBar.hide();
pageManagementUtils.headerBar.text("");
//pageManagementUtils.cloneContentArea(selectedType,selectedGroup);
pageManagementUtils.cloneContentArea(selectedType, selectedTypeText);
pageManagementUtils.contentTypeSelect.focus();
@ -146,20 +173,22 @@ var pageManagementUtils = {
}
}
});*/
//TODO: These will all change
$("select#typeSelect").change( function() {
_this = pageManagementUtils;
$('input#variable').val("");
$('textarea#textArea').val("");
if ( $("#typeSelect").val() == "browseClassGroup" ) {
$("section#classGroup").show();
$("section#nonClassGroup").hide();
if ( _this.contentTypeSelect.val() == "browseClassGroup" ) {
pageManagementUtils.classGroupSection.show();
pageManagementUtils.fixedHTMLSection.hide();
pageManagementUtils.sparqlQuerySection.hide();
$("input#moreContent").hide();
$("section#headerBar").text("Browse Class Group - ");
$("section#headerBar").show();
}
if ( $("#typeSelect").val() == "fixedHtml" || $("#typeSelect").val() == "sparqlQuery" ) {
$("section#classGroup").hide();
if ( $("#typeSelect").val() == "fixedHtml" ) {
if ( _this.contentTypeSelect.val() == "fixedHtml" || _this.contentTypeSelect.val() == "sparqlQuery" ) {
pageManagementUtils.classGroupSection.hide();
if ( _this.contentTypeSelect.val() == "fixedHtml" ) {
$('span#taSpan').text("Enter fixed HTML here");
$("section#headerBar").text("Fixed HTML - ");
}
@ -167,13 +196,20 @@ var pageManagementUtils = {
$('span#taSpan').text("Enter SPARQL query here");
$("section#headerBar").text("SPARQL Query Results - ");
}
$("section#nonClassGroup").show();
//if fixhed html show that, otherwise show sparq
if(_this.contentTypeSelect.val() == "fixedHtml") {
pageManagementUtils.fixedHTMLSection.show();
pageManagementUtils.sparqlQuerySection.hide();
} else {
pageManagementUtils.sparqlQuerySection.show();
pageManagementUtils.fixedHTMLSection.hide();
}
$("section#headerBar").show();
$('select#selectClassGroup option').eq(0).attr('selected', 'selected');
$("section#classesInSelectedGroup").addClass('hidden');
$("input#moreContent").show();
}
if ( $("#typeSelect").val() == "" ) {
if ( _this.contentTypeSelect.val() == "" ) {
$("section#classGroup").hide();
$("section#nonClassGroup").hide();
$("input#moreContent").hide();
@ -199,8 +235,11 @@ var pageManagementUtils = {
if (validationError == "") {
//Create the appropriate json objects
pageManagementUtils.createPageContentForSubmission();
return true;
//return true;
//For testing, not submitting anything
return false;
} else{
$('#error-alert').removeClass('hidden');
$('#error-alert p').html(validationError);
//TODO: Check why scrolling appears to be a problem
@ -214,64 +253,25 @@ var pageManagementUtils = {
cloneContentArea: function(contentType, contentTypeLabel) {
var ctr = pageManagementUtils.counter;
var counter = pageManagementUtils.counter;
var varOrClas;
var varOrClass;
//Clone the object, renaming ids and copying text area values as well
$newContentObj = pageManagementUtils.createCloneObject(contentType, counter);
if ( contentType == "fixedHTML" || contentType == "sparqlQuery" ) {
var taValue = $('textarea#textArea').val();
alert("original text area value is " + taValue);
var $newContentObj = $('section#nonClassGroup').clone();
$newContentObj.addClass("pageContent");
varOrClass = $newContentObj.find('input').val();
$newContentObj.show();
//Save content type
$newContentObj.attr("contentType", contentType);
$newContentObj.attr("id", contentType + counter);
$newContentObj.find('input#variable').attr("id","variable" + counter);
$newContentObj.find('textarea#textArea').attr("id","textArea" + counter);
$newContentObj.find('label#variableLabel').attr("id","variableLabel" + counter);
$newContentObj.find('label#taLabel').attr("id","taLabel" + counter);
//Keep the name of the inputs the same
// $newContentObj.find('input#variable').attr("name","variable" + counter);
// $newContentObj.find('textarea#textArea').attr("name","textArea" + counter);
// There's a jquery bug when cloning textareas: the value doesn't
// get cloned. So
// copy the value "manually."
$newContentObj.find("textarea[name='textArea']").val(taValue);
if ( contentType == "fixedHTML" || contentType == "sparqlQuery") {
varOrClass = $newContentObj.find('input#saveToVar').val();
}
else if ( contentType == "browseClassGroup" ) {
var $newContentObj = $('section#classGroup').clone();
$newContentObj.addClass("pageContent");
$newContentObj.show();
$newContentObj.attr("contentType", contentType);
$newContentObj.attr("id", "classGroup" + counter);
$newContentObj.find('section#selectContentType').attr("id", "selectContentType" + counter);
$newContentObj.find('select#selectClassGroup').val(groupValue);
$newContentObj.find('select#selectClassGroup').attr("id","selectClassGroup" + counter);
$newContentObj.find('select#selectClassGroup' + counter).attr("name","selectClassGroup" + counter);
$newContentObj.find('section#classesInSelectedGroup').attr("id","classesInSelectedGroup" + counter);
$newContentObj.find('section#classesInSelectedGroup' + counter).removeClass('hidden');
$newContentObj.find('p#selectClassesMessage').attr("id","selectClassesMessage" + counter);
// Will need to uncomment this and find a way to apply the css style
// $newContentObj.find('section#internal-class').attr("id","internal-class" +
// counter);
$newContentObj.find("input[name='display-internalClass']").attr("name","display-internalClass" + counter);
$newContentObj.find('ul#selectedClasses').attr("id","selectedClasses" + counter);
$newContentObj.find('ul#selectedClasses' + counter).attr("name","selectedClasses" + counter);
$newContentObj.find('ul#selectedClasses' + counter).children("li").each( function(i,abc) {
var $theCheckbox = $(this).find('input');
$theCheckbox.attr("name", $theCheckbox.attr("name") + counter);
});
varOrClass = $newContentObj.find('select#selectClassGroup' + counter + ' option:selected').text();
$newContentObj.find('section#classesInSelectedGroup' + counter).removeClass('hidden');
varOrClass = $newContentObj.find('select#selectClassGroup' + counter + ' option:selected').text();
}
pageManagementUtils.createClonedContentContainer($newContentObj, counter, contentTypeLabel, varOrClass);
//previously increased by 10, just increasing by 1 here
counter++;
},
createClonedContentContainer:function($newContentObj, counter, contentTypeLabel, varOrClass) {
//Create the container for the new content
$newDivContainer = $("<div></div>", {
id: "divContainer" + counter,
"class": "pageContentContainer",
@ -281,10 +281,20 @@ var pageManagementUtils = {
+ "' class='pageContentWrapper'><input id='remove" + counter
+ "' type='button' class='delete' value='Delete' class='deleteButton' /></div>"
});
var $clickableSpan = $newDivContainer.children('span#clickable' + counter);
//Hide inner div
var $innerDiv = $newDivContainer.children('div#innerContainer' + counter);
$innerDiv.hide();
//Expand/collapse toggle
//Bind event listers for the new content for display/removal etc.
pageManagementUtils.bindClonedContentContainerEvents($newDivContainer, counter);
//Append the new container to the section storing these containers
$newDivContainer.appendTo($('section#contentDivs'));
//place new content object
$newContentObj.prependTo($innerDiv);
},
bindClonedContentContainerEvents:function($newDivContainer, counter) {
var $clickableSpan = $newDivContainer.children('span#clickable' + counter);
var $innerDiv = $newDivContainer.children('div#innerContainer' + counter);
//Expand/collapse toggle
$clickableSpan.click(function() {
if ( $innerDiv.is(':visible') ) {
$innerDiv.slideUp(222);
@ -302,26 +312,17 @@ var pageManagementUtils = {
}
window.setTimeout('pageManagementUtils.adjustSaveButtonHeight()', 223);
});
//remove button
$newRemoveButton = $innerDiv.find('input#remove' + counter);
// this will have to disable submitted fields as well as hide them.
$newRemoveButton.click(function() {
$innerDiv.parent("div").css("display","none");
pageManagementUtils.adjustSaveButtonHeight();
});
$newDivContainer.appendTo($('section#contentDivs'));
$newContentObj.prependTo($innerDiv);
counter = counter + 10;
},
resetClassGroupSection:function() {
$('select#selectClassGroup option').eq(0).attr('selected', 'selected');
$("section#classesInSelectedGroup").addClass('hidden');
},
//finalize later, but basically use same attribute across page content and use attribute instead of id
//Attribute would be what keeps track of content, so contentCounter or something like that
toggleArrow:function() {
},
//Adjust save button height
adjustSaveButtonHeight:function() {
@ -345,7 +346,6 @@ var pageManagementUtils = {
} else {
//update existing content type with correct class group name and hide class group select again
var _this = pageManagementUtils;
// pageManagementUtils.hideClassGroups();
pageManagementUtils.selectedGroupForPage.html(results.classGroupName);
@ -390,24 +390,6 @@ var pageManagementUtils = {
});
},
/*
showClassGroups: function() { //User has clicked change content type
//Show the section with the class group dropdown
this.selectContentType.removeClass("hidden");
//Hide the "change content type" section which shows the selected class group
this.existingContentType.addClass("hidden");
//Hide the checkboxes for classes within the class group
this.classesForClassGroup.addClass("hidden");
},
hideClassGroups: function() { //User has selected class group/content type, page should show classes for class group and 'existing' type with change link
//Hide the class group dropdown
this.selectContentType.addClass("hidden");
//Show the "change content type" section which shows the selected class group
this.existingContentType.removeClass("hidden");
//Show the classes in the class group
this.classesForClassGroup.removeClass("hidden");
},*/
toggleClassSelection: function() {
// Check/unckeck all classes for selection
$('input:checkbox[name=allSelected]').click(function(){
@ -482,29 +464,62 @@ var pageManagementUtils = {
//Create a new hidden input with a specific name and assign value per page content
pageManagementUtils.createPageContentInputForSubmission(jsonObjectString);
});
//in this case it's a sparql data getter, but what about the others
/*
var len = pageContentSections.length;
var i;
for(i = 0; i < len; i++) {
var pageContentSection = $(pageContentSections[i]);
var pageContentSectionId = pageContentSection.attr("id");
var jsonObject = pageManagementUtils.processPageContentSection(pageContentSection);
var jsonObjectString = JSON.stringify(jsonObject);
//Create a new hidden input with a specific name and assign value per page content
pageManagementUtils.createPageContentInputForSubmission(jsonObjectString);
}*/
},
createPageContentInputForSubmission: function(inputValue) {
$("<input type='hidden' name='pageContentUnit' value='" + inputValue + "'>").appendTo(pageManagementUtils.pageContentSubmissionInputs);
},
//returns a json object with the data getter information required
processPageContentSection:function(pageContentSection) {
var variableValue = pageContentSection.find("input[name='variable']").val();
var queryValue = pageContentSection.find("textarea[name='textArea']").val();
var returnObject = {saveToVar:variableValue, query:queryValue, dataGetterClass:pageManagementUtils.dataGetterLabelToURI["sparqlDataGetter"], queryModel:"vitro:contextDisplayModel"};
return returnObject;
//This processing should be specific to the type and so that content type's specific processor will
//return the json object required
if(pageManagementUtils.processDataGetterUtils != null) {
var dataGetterType = pageManagementUtils.processDataGetterUtils.selectDataGetterType(pageContentSection);
if(dataGetterProcessorMap != null) {
var dataGetterProcessor = dataGetterProcessorMap[dataGetterType];
dataGetterProcessor.processPageContentSection(pageContentSection);
return dataGetterProcessor;
} else {
//ERROR handling
alert("An error has occurred and the map of processors for this content is missing. Please contact the administrator");
return null;
}
}
alert("An error has occurred and the code for processing this content is missing a component. Please contact the administrator.");
//Error handling here
return null;
},
//clones and returns cloned object for content type
createCloneObject:function(contentType, counter) {
var originalObjectPath = 'section#' + contentType;
var $newContentObj = $(originalObjectPath).clone();
$newContentObj.addClass("pageContent");
//Save content type
$newContentObj.attr("contentType", contentType);
//Set id for object
$newContentObj.attr("id", "contentType" + counter);
$newContentObj.show();
pageManagementUtils.renameIdsInClone($newContentObj, counter);
// pageManagementUtils.cloneTextAreaValues(originalObjectPath, $newContentObj);
return $newContentObj;
},
//This is specifically for cloning text area values
//May not need this if implementing the jquery fix
///would need a similar function for select as well
cloneTextAreaValues:function(originalAncestorPath, $newAncestorObject) {
$(originalAncestorPath + " textarea").each(function(index, el) {
var originalTextAreaValue = $(this).val();
var originalTextAreaName = $(this).attr("name");
$newAncestorObject.find("textarea[name='" + originalTextAreaName + "']").val(originalTextAreaValue);
});
},
//given an object and a counter, rename all the ids
renameIdsInClone:function($newContentObj, counter) {
$newContentObj.find("[id]").each(function(index, el) {
var originalId = $(this).attr["id"];
var newId = originalId + counter;
$(this).attr(newId);
});
}
};