Skip to content

Commit

Permalink
refs #2834 some fixes and optimizations, for instance show tooltip on…
Browse files Browse the repository at this point in the history 
…ly if text is ellipsized
  • Loading branch information
@tsteur
tsteur committed Mar 18, 2014
1 parent 302b0cd commit 22cccda
Show file tree
Hide file tree
Showing 3 changed files with 38 additions and 67 deletions.
1 change: 0 additions & 1 deletion plugins/Actions/javascripts/actionsDataTable.js
View file
Expand Up @@ -100,7 +100,6 @@
rowsWithSubtables.css('font-weight', 'bold');

$("th:first-child", domElem).addClass('label');
$('td span.label', domElem).each(function () { self.truncate($(this)); });
var imagePlusMinusWidth = 12;
var imagePlusMinusHeight = 12;
$('td:first-child', rowsWithSubtables)
Expand Down
89 changes: 30 additions & 59 deletions plugins/CoreHome/javascripts/dataTable.js
View file
Expand Up @@ -267,7 +267,6 @@ $.extend(DataTable.prototype, UIControl.prototype, {
- such as column sorting, searching in the rows, displaying Next / Previous links, etc.
- add styles to the cells and rows (odd / even styles)
- modify some rows to add images if a span img is found, or add a link if a span urlLink is found
or truncate the labels when they are too big
- bind new events onclick / hover / etc. to trigger AJAX requests,
nice hovertip boxes for truncated cells
*/
Expand All @@ -290,29 +289,31 @@ $.extend(DataTable.prototype, UIControl.prototype, {
self.handleCellTooltips(domElem);
self.handleRelatedReports(domElem);
self.handleTriggeredEvents(domElem);
self.setFixWidthToMakeEllipsisWork(domElem);
self.handleColumnHighlighting(domElem);
self.setFixWidthToMakeEllipsisWork(domElem);
},

setFixWidthToMakeEllipsisWork: function (domElem) {
var minLabelWidth = 125;
var maxLabelWidth = 400;

var totalWidth = domElem.width();
var labelWidth = 125;
var labelWidth = minLabelWidth;

var widthOfAllOtherColumns = 0;
var rows = $('tr:nth-child(1) td:not(.label)', domElem);
rows.each(function (index, row) {
widthOfAllOtherColumns += $(row).outerWidth();
var columnsFromFirstRow = $('tr:nth-child(1) td:not(.label)', domElem);
columnsFromFirstRow.each(function (index, column) {
widthOfAllOtherColumns += $(column).outerWidth();
});

if (totalWidth - widthOfAllOtherColumns >= 125) {
if (totalWidth - widthOfAllOtherColumns >= minLabelWidth) {
labelWidth = totalWidth - widthOfAllOtherColumns;
} else if (widthOfAllOtherColumns >= totalWidth) {
labelWidth = totalWidth * 0.5;
}

if (labelWidth > 400) {
labelWidth = 400;
if (labelWidth > maxLabelWidth) {
labelWidth = maxLabelWidth;
}

var minWidthHead = $('thead .first.label', domElem).css('minWidth');
Expand All @@ -324,7 +325,9 @@ $.extend(DataTable.prototype, UIControl.prototype, {
}
}

var minWidthBody = $('tbody tr:nth-child(1) td.label', domElem).css('minWidth');
var firstLabelWithinBody = $('tbody tr:nth-child(1) td.label', domElem);

var minWidthBody = firstLabelWithinBody.css('minWidth');

if (minWidthBody) {
minWidthBody = minWidthBody.replace('px', '');
Expand All @@ -333,16 +336,16 @@ $.extend(DataTable.prototype, UIControl.prototype, {
}
}

var paddingLeft = $('tbody tr:nth-child(1) td.label', domElem).css('paddingLeft');
var paddingLeft = firstLabelWithinBody.css('paddingLeft');
if (paddingLeft) {
paddingLeft = paddingLeft.replace('px', '');
paddingLeft = ('' + paddingLeft).replace('px', '');
} else {
paddingLeft = 0;
}

var paddingRight = $('tbody tr:nth-child(1) td.label', domElem).css('paddingRight');
var paddingRight = firstLabelWithinBody.css('paddingRight');
if (paddingRight) {
paddingRight = paddingRight.replace('px', '');
paddingRight = ('' + paddingRight).replace('px', '');
} else {
paddingRight = 0;
}
Expand All @@ -352,6 +355,9 @@ $.extend(DataTable.prototype, UIControl.prototype, {
if (labelWidth) {
$('td.label', domElem).width(parseInt(labelWidth, 10));
}

var self = this;
$('td span.label', domElem).each(function () { self.tooltip($(this)); });
},

handleLimit: function (domElem) {
Expand Down Expand Up @@ -1164,61 +1170,28 @@ $.extend(DataTable.prototype, UIControl.prototype, {
widget.trigger('setParameters', parameters);
},

truncate: function (domElemToTruncate, truncationOffset) {
var self = this;

domElemToTruncate = $(domElemToTruncate);

if (typeof domElemToTruncate.data('originalText') != 'undefined') {
// truncate only once. otherwise, the tooltip will show the truncated text as well.
return;
}
tooltip: function (domElement) {
var $domElement = $(domElement);

if(domElemToTruncate.find('.truncationDisabled').length > 0) {
if ($domElement.data('tooltip') == 'enabled') {
return;
}

/*
// make the original text (before truncation) available for others.
// the .truncate plugins adds a title to the dom element but the .tooltip
// plugin removes that again.
domElemToTruncate.data('originalText', domElemToTruncate.text());
if (typeof truncationOffset == 'undefined') {
truncationOffset = 0;
}
var truncationLimit = 50;
$domElement.data('tooltip', 'enabled');

if (typeof self.param.idSubtable == 'undefined'
&& self.param.viewDataTable == 'tableAllColumns') {
// when showing all columns in a subtable, space is restricted
truncationLimit = 25;
if ($domElement && $domElement[0] && $domElement.outerWidth() >= $domElement[0].scrollWidth) {
// text is not ellipsized
return;
}

truncationLimit += truncationOffset;
domElemToTruncate.truncate(truncationLimit);
var tooltipElem = $('.truncated', domElemToTruncate),
customToolTipText = domElemToTruncate.attr('title');
*/
var customToolTipText = $domElement.attr('title') || $domElement.text();

var tooltipElem = domElemToTruncate,
customToolTipText = domElemToTruncate.text();

// if there's a title on the dom element, use this as the tooltip instead of
// the one set by the truncate plugin
if (customToolTipText) {
// make sure browser doesn't add its own tooltip for the truncated element
if (tooltipElem[0]) {
tooltipElem.removeAttr('title');
}

tooltipElem = domElemToTruncate;
tooltipElem.attr('title', customToolTipText);
$domElement.attr('title', customToolTipText);
}

// use tooltip (tooltip text determined by the 'title' attribute)
tooltipElem.tooltip({
$domElement.tooltip({
track: true,
show: false,
hide: false
Expand All @@ -1236,8 +1209,6 @@ $.extend(DataTable.prototype, UIControl.prototype, {
$("td:first-child:even", domElem).addClass('label labelodd');
$("tr:odd td", domElem).slice(1).addClass('column columnodd');
$("tr:even td", domElem).slice(1).addClass('column columneven');

$('td span.label', domElem).each(function () { self.truncate($(this)); });
},

handleColumnHighlighting: function (domElem) {
Expand Down
15 changes: 8 additions & 7 deletions plugins/Morpheus/stylesheets/theme.less
View file
Expand Up @@ -424,14 +424,15 @@ table.dataTable {
a {
text-decoration: none !important;
color: @brand-blue;

.label {
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
width: inherit;
display: inline-block;
}
}

.label {
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
width: inherit;
display: inline-block;
}
}
& td.columneven,
Expand Down

0 comments on commit 22cccda

Please sign in to comment.