From ee81f45917f1a795d73e7a528743dc8b85338a97 Mon Sep 17 00:00:00 2001 From: cdtank Date: Tue, 11 Jan 2011 22:42:56 +0000 Subject: [PATCH] 1. Code cleanup & refactor of temporal graph front-end. 2. Added the feature that top 3 entities are always selected by default when page is loaded. --- .../visualization/entitycomparison/layout.css | 15 ++ .../js/visualization/entitycomparison/util.js | 45 +--- .../entityComparisonStandaloneActivator.ftl | 207 ++++++++++-------- 3 files changed, 140 insertions(+), 127 deletions(-) diff --git a/productMods/css/visualization/entitycomparison/layout.css b/productMods/css/visualization/entitycomparison/layout.css index 2fbbe8ad..15bc301c 100644 --- a/productMods/css/visualization/entitycomparison/layout.css +++ b/productMods/css/visualization/entitycomparison/layout.css @@ -110,6 +110,21 @@ position: inherit; color:red; } +.ellipsis { + white-space: nowrap; + overflow: hidden; +} + +.entity-label-url { + width: 125px; + margin-right: 10px; + display:inline-block; +} + +.ellipsis.multiline { + white-space: normal; +} + #searchresult { margin-top: 50px; } diff --git a/productMods/js/visualization/entitycomparison/util.js b/productMods/js/visualization/entitycomparison/util.js index 4bf63285..781200a4 100644 --- a/productMods/js/visualization/entitycomparison/util.js +++ b/productMods/js/visualization/entitycomparison/util.js @@ -212,10 +212,13 @@ function calcZeroLessMinAndMax(jsonObject, year) { } } - if (globalMinYear > minYear) + if (globalMinYear > minYear) { globalMinYear = minYear; - if (globalMaxYear < maxYear) + } + + if (globalMaxYear < maxYear) { globalMaxYear = maxYear; + } }); @@ -327,8 +330,10 @@ function calcSumOfComparisonParameter(jsonObject) { function contains(objectArray, object) { var i = 0, flag = 0; for (i = 0; i < objectArray.length; i++) { - if (objectArray[i] == object) + if (objectArray[i] == object) { flag = i; + } + } return flag; } @@ -387,9 +392,7 @@ function createLegendRow(entity, bottomDiv) { var parentP = $('

'); parentP.attr('id', slugify(entity.label)); - console.log("entity label in create", entity.label); - - var labelDiv = $('

') + var labelDiv = $('
'); labelDiv.attr('class', 'easy-deselect-label'); labelDiv.html('
'); labelDiv.append(''); @@ -438,7 +441,7 @@ function renderBarAndLabel(entity, divBar, divLabel, spanElement) { var entityLabelForLegend = divLabel.find(".entity-label-url"); entityLabelForLegend.html(entity.label); entityLabelForLegend.ellipsis(); - entityLabelForLegend.wrap(""); + entityLabelForLegend.wrap(""); spanElement.text(sum).css("font-size", "0.8em").css("color", "#595B5B"); @@ -589,17 +592,6 @@ function getNextFreeColor(entity){ colors[entity.label] = colorToAssign; } -function createVIVOProfileImage(url){ - - var vivoImage = $(url); - -/* vivoImage.html("profile"); - vivoImage.css("background-color","#727272" ); - vivoImage.css("color", "white"); -*/ - vivoImage.css("padding", "2px"); -} - function getNormalizedWidth(entity, sum){ var maxValueOfComparisonParameter = calcMaxOfComparisonParameter(labelToEntityRecord); @@ -775,13 +767,11 @@ function prepareTableForDataTablePagination(jsonData){ var labelTD = $(''); labelTD.css("width", "100px"); labelTD.html(index); -// labelTD.autoEllipsis(); var publicationCountTD = $(''); publicationCountTD.html(calcSumOfComparisonParameter(val)); var entityTypeTD = $(''); - //entityTypeTD.html(val.organizationType.join(", ")); entityTypeTD.html(entityTypesWithoutStopWords); row.append(checkboxTD); @@ -793,8 +783,6 @@ function prepareTableForDataTablePagination(jsonData){ checkboxCount++; }); -// console.log('creating '+ checkboxCount + ' checkboxes inside the data table'); - table.append(tbody); tableDiv.append(table); @@ -811,17 +799,6 @@ function prepareTableForDataTablePagination(jsonData){ // "aLengthMenu" : [5,10,15], "fnDrawCallback": function () { - /* - * To highlight the rows belonging to selected entities. - * */ - $('input.if_clicked_on_school').bind('click', function () { - if ($(this).is(':checked')) { - $(this).closest("tr").addClass('datatablerowhighlight') - } else { - $(this).closest("tr").removeClass('datatablerowhighlight') - } - }); - /* We check whether max number of allowed comparisions (currently 10) is reached * here as well becasue the only function that is guaranteed to be called during * page navigation is this. No need to bind it to the nav-buttons becuase 1. It is over-ridden @@ -834,6 +811,7 @@ function prepareTableForDataTablePagination(jsonData){ // "bAutoWidth": false }); + var searchInputBox = $("." + searchBarParentContainerDIVClass).find("input[type=text]"); searchInputBox.after("X"); @@ -920,7 +898,6 @@ function disableUncheckedEntities(){ * Note that the usual Error message will still display if the user tries to click on the white box * (or a disabled checkbox in case of non-IE browsers). * */ - if ($("#datatable").data("isEntitySelectionAllowed")) { if ($.browser.msie) { createNotification("warning-notification", { title:'Information', diff --git a/productMods/templates/freemarker/visualization/entitycomparison/entityComparisonStandaloneActivator.ftl b/productMods/templates/freemarker/visualization/entitycomparison/entityComparisonStandaloneActivator.ftl index 9b663122..78d170a2 100644 --- a/productMods/templates/freemarker/visualization/entitycomparison/entityComparisonStandaloneActivator.ftl +++ b/productMods/templates/freemarker/visualization/entitycomparison/entityComparisonStandaloneActivator.ftl @@ -94,8 +94,6 @@ var subOrganizationTemporalGraphURL = "${subOrganizationTemporalGraphURL}"; $(document).ready(function() { - //$(".ellipsis").ellipsis(); - var jsonString = '${jsonContent}'; var organizationLabel = '${organizationLabel}'; @@ -163,108 +161,135 @@ var subOrganizationTemporalGraphURL = "${subOrganizationTemporalGraphURL}"; //parse the json object and pass it to loadData jsonObject.prepare(jQuery.parseJSON(jsonString)); + + function performEntityCheckboxUnselectedActions(entity, checkboxValue, checkbox) { + + removeUsedColor(entity); + removeEntityUnChecked(renderedObjects, entity); + removeLegendRow(checkbox); + removeCheckBoxFromGlobalSet(checkbox); + + checkbox.closest("tr").removeClass('datatablerowhighlight'); + + } + + function performEntityCheckboxSelectedActions(entity, checkboxValue, checkbox) { + + getNextFreeColor(entity); + //Generate the bar, checkbox and label for the legend. + createLegendRow(entity, $("#bottom")); + + renderLineGraph(renderedObjects, entity); + labelToCheckedEntities[checkboxValue] = checkbox; + + /* + * To highlight the rows belonging to selected entities. + * */ + checkbox.closest("tr").addClass('datatablerowhighlight'); + + } + + function performEntityCheckboxClickedRedrawActions() { + + setTickSizeOfAxes(); + checkIfColorLimitIsReached(); + displayLineGraphs(); + updateCounter(); + + } + /* * function to populate the labelToEntityRecord object with the * values from the json file and * dynamically generate checkboxes */ - function loadData(jsonData){ - - // var yearRange; - - $.each(jsonData, function(index, val){ - setOfLabels.push(val.label); - labelToEntityRecord[val.label] = val; - }); - - getEntityVisMode(jsonData); - prepareTableForDataTablePagination(jsonData); - setEntityLevel(); - // calcMinandMaxYears(labelToEntityRecord, year); - //yearRange = (year.max - year.min); - - // setLineWidthAndTickSize(yearRange, FlotOptions); - //setTickSizeOfYAxis(calcMaxOfComparisonParameter(labelToEntityRecord), FlotOptions); - - - $(".disabled-checkbox-event-receiver").live("click", function() { - - if ($(this).next().is(':disabled')) { - - createNotification("error-notification", { title:'Error', - text:'A Maximum 10 entities can be compared. Please remove some & try again.' },{ - custom: true, - expires: 3500 - }); + function loadData(jsonData) { - } - - - }); - - /* - * When the elements in the paginated div - * are clicked this event handler is called - */ - $("input.if_clicked_on_school").live('click', function(){ - - var checkbox = $(this); - var checkboxValue = $(this).attr("value"); - var entity = labelToEntityRecord[checkboxValue]; - - if (checkbox.is(':checked')) { - - getNextFreeColor(entity); - - //Dynamically generate the bar, checkbox and label. - createLegendRow(entity, $("#bottom")); - - renderLineGraph(renderedObjects, entity); - labelToCheckedEntities[checkboxValue] = checkbox; - - } else if (!checkbox.is(':checked')) { + // var yearRange; + $.each(jsonData, function (index, val) { + setOfLabels.push(val.label); + labelToEntityRecord[val.label] = val; + }); - removeUsedColor(entity); - removeEntityUnChecked(renderedObjects, entity); - removeLegendRow(checkbox); - removeCheckBoxFromGlobalSet(checkbox); - - } - //console.log('Number of checked entities: ' + getSize(labelToCheckedEntities)); - //disableUncheckedEntities(); - setTickSizeOfAxes(); - checkIfColorLimitIsReached(); - //populateMapOfCheckedEntities(); - displayLineGraphs(); - updateCounter(); + getEntityVisMode(jsonData); + prepareTableForDataTablePagination(jsonData); + setEntityLevel(); + + /* + calcMinandMaxYears(labelToEntityRecord, year); + yearRange = (year.max - year.min); + + setLineWidthAndTickSize(yearRange, FlotOptions); + setTickSizeOfYAxis(calcMaxOfComparisonParameter(labelToEntityRecord), FlotOptions); + */ + + $(".disabled-checkbox-event-receiver").live("click", function () { + + if ($(this).next().is(':disabled')) { + + createNotification("error-notification", { + title: 'Error', + text: 'A Maximum 10 entities can be compared. Please remove some & try again.' + }, { + custom: true, + expires: 3500 + }); + + } }); - } + + /* + * When the elements in the paginated div + * are clicked this event handler is called + */ + $("input.if_clicked_on_school").live('click', function () { + + var checkbox = $(this); + var checkboxValue = $(this).attr("value"); + var entity = labelToEntityRecord[checkboxValue]; + + if (checkbox.is(':checked')) { + + performEntityCheckboxSelectedActions(entity, checkboxValue, checkbox); + + } else { + + performEntityCheckboxUnselectedActions(entity, checkboxValue, checkbox); + + } + + performEntityCheckboxClickedRedrawActions(); + + }); + } + + /* + This will make sure that top 3 entites are selected by default when the page loads. + + */ + $.each($("input.if_clicked_on_school"), function(index, checkbox) { + + if (index > 2) { + return false; + } + + $(this).attr('checked', true); + + var checkboxValue = $(this).attr("value"); + var entity = labelToEntityRecord[checkboxValue]; + + performEntityCheckboxSelectedActions(entity, checkboxValue, $(this)); + + performEntityCheckboxClickedRedrawActions(); + + }); }); - -

@@ -336,9 +361,5 @@ var subOrganizationTemporalGraphURL = "${subOrganizationTemporalGraphURL}"; id="total">10 schools to compare.

-
- - -
\ No newline at end of file