diff --git a/productMods/css/visualization/entitycomparison/layout.css b/productMods/css/visualization/entitycomparison/layout.css index 1591ff8d..2fbbe8ad 100644 --- a/productMods/css/visualization/entitycomparison/layout.css +++ b/productMods/css/visualization/entitycomparison/layout.css @@ -91,13 +91,25 @@ position: inherit; #checkbox{ float:left; } -#label { + +.easy-deselect-label { float: left; font-size: 12px; width: 160px; text-align: right; } +.easy-deselect-label a, #text { + text-decoration: none; + color: black; + font-family: Helvetica; + font-size: 1em; +} + +.easy-deselect-label .entity-label { + color:red; +} + #searchresult { margin-top: 50px; } @@ -127,13 +139,6 @@ position: inherit; font-weight: normal; } -#label a,#text { -/* text-decoration: none; */ - color: black; - font-family: Helvetica; - font-size: 1em; -} - #rightblock { float:right; margin-right:5%; diff --git a/productMods/js/visualization/entitycomparison/util.js b/productMods/js/visualization/entitycomparison/util.js index 89fe7788..4bf63285 100644 --- a/productMods/js/visualization/entitycomparison/util.js +++ b/productMods/js/visualization/entitycomparison/util.js @@ -1,4 +1,41 @@ /* $This file is distributed under the terms of the license in /doc/license.txt$ */ +(function ($) { + $.fn.ellipsis = function () { + return this.each(function () { + var el = $(this); + + if (el.css("overflow") == "hidden") { + + var text = el.html(); + + var multiline = el.hasClass('multiline'); + var t = $(this.cloneNode(true)).hide().css('position', 'absolute').css('overflow', 'visible').width(multiline ? el.width() : 'auto').height(multiline ? 'auto' : el.height()); + + el.after(t); + + function height() { + return t.height() > el.height(); + }; + + function width() { + return t.width() > el.width(); + }; + + var func = multiline ? height : width; + + + while (text.length > 0 && func()) { + text = text.substr(0, text.length - 1); + t.html(text + "..."); + } + + el.html(t.html()); + t.remove(); + } + }); + }; +})(jQuery); + /** @@ -336,6 +373,7 @@ function setTickSizeOfYAxis(maxValue, flotOptions){ flotOptions.yaxis.tickSize = 10; } } + /** * Create a div that represents the rectangular bar A hidden input class that is * used to pass the value and a label beside the checkbox. @@ -343,70 +381,68 @@ function setTickSizeOfYAxis(maxValue, flotOptions){ * @param {Object} * entityLabel */ -function createGraphic(entity, bottomDiv) { - var parentP = $('

'); - parentP.attr('id', slugify(entity.label)); +function createLegendRow(entity, bottomDiv) { - var labelDiv = $('

') - labelDiv.attr('id', 'label'); - labelDiv.html(''); -// labelDiv.children('a').after(''); - labelDiv.children('a').after(''); - - var checkbox = $(''); - checkbox.attr('type','checkbox'); - checkbox.attr('checked', true); - checkbox.attr('id','checkbox'); - checkbox.attr('class', 'easyDeselectCheckbox'); - checkbox.attr('value', entity.label); - - var hiddenLabel = $('