GUI -- Allows for col-width="_px" to be specified in the html of table headers.
- Refactored table.js code
- Added helper functions to FnService.
- Deleted "sortable" from html in columns where sorting doesn't make sense (icons).
- Updated unit tests to reflect changes
Change-Id: I425101071bd5c7f237d64d98084a726cfce1d016
diff --git a/web/gui/src/main/webapp/app/fw/util/fn.js b/web/gui/src/main/webapp/app/fw/util/fn.js
index 3c810a5..aa546e1 100644
--- a/web/gui/src/main/webapp/app/fw/util/fn.js
+++ b/web/gui/src/main/webapp/app/fw/util/fn.js
@@ -150,6 +150,7 @@
return found;
}
+ // return true if the object is empty, return false otherwise
function isEmptyObject(obj) {
var key;
for (key in obj) {
@@ -165,6 +166,16 @@
});
}
+ // return the parameter without a px suffix
+ function noPx(num) {
+ return Number(num.replace(/px$/, ''));
+ }
+
+ // return an element's given style property without px suffix
+ function noPxStyle(elem, prop) {
+ return Number(elem.style(prop).replace(/px$/, ''));
+ }
+
angular.module('onosUtil')
.factory('FnService', ['$window', function (_$window_) {
$window = _$window_;
@@ -183,7 +194,9 @@
inArray: inArray,
removeFromArray: removeFromArray,
isEmptyObject: isEmptyObject,
- cap: cap
+ cap: cap,
+ noPx: noPx,
+ noPxStyle: noPxStyle
};
}]);
diff --git a/web/gui/src/main/webapp/app/fw/widget/table.js b/web/gui/src/main/webapp/app/fw/widget/table.js
index 285d21d..003b73c 100644
--- a/web/gui/src/main/webapp/app/fw/widget/table.js
+++ b/web/gui/src/main/webapp/app/fw/widget/table.js
@@ -20,45 +20,74 @@
(function () {
'use strict';
- var $log, $window, fs, is,
- currCol = {},
- prevCol = {},
- tableIconTdSize = 33,
- bottomMargin = 200;
+ // injected refs
+ var $log, $window, fs, is;
+
+ // constants
+ var tableIconTdSize = 33,
+ bottomMargin = 200,
+ colWidth = 'col-width',
+ tableIcon = 'table-icon';
+
+ // internal state
+ var currCol = {},
+ prevCol = {};
// Functions for creating a fixed header on a table (Angular Directive)
- function setTableWidth(t) {
- var tHeaders, tdElement, colWidth, numIcons, numNonIcons,
- winWidth = fs.windowSize().width;
+ function setElemWidth(elem, size) {
+ elem.style('width', size + 'px')
+ }
- tHeaders = t.selectAll('th');
- numIcons = 0;
- numNonIcons = 0;
+ function setColWidth(th, td, size) {
+ setElemWidth(th, size);
+ setElemWidth(td, size);
+ }
- // FIXME: This should observe custom-set width from the HTML
+ // count number of headers of
+ // - assigned width,
+ // - icon width,
+ // - and default width
+ // assumes assigned width is not given to icons
+ // returns the width of all columns that are not icons have an assigned width
+ function getDefaultWidth(headers) {
+ var winWidth = fs.windowSize().width,
+ iconCols = 0,
+ regCols = 0,
+ cstmColWidth = 0;
- tHeaders.each(function(thElement, index) {
- thElement = d3.select(this);
- if (thElement.classed('table-icon')) {
- numIcons = numIcons + 1;
+ headers.each(function (d, i) {
+ var thElement = d3.select(this),
+ cstmWidth = thElement.attr(colWidth);
+
+ if (cstmWidth) {
+ cstmColWidth += fs.noPx(cstmWidth);
+ } else if (thElement.classed(tableIcon)) {
+ iconCols += 1;
} else {
- numNonIcons = numNonIcons + 1;
+ regCols += 1;
}
});
- colWidth = Math.floor((winWidth - (numIcons * tableIconTdSize)) / numNonIcons);
+ return Math.floor((winWidth - cstmColWidth -
+ (iconCols * tableIconTdSize)) / regCols);
+ }
- tHeaders.each(function(thElement, index) {
- thElement = d3.select(this);
- tdElement = t.select('td:nth-of-type(' + (index + 1) + ')');
+ function setTableWidth(t) {
+ var tHeaders = t.selectAll('th'),
+ defaultColWidth = getDefaultWidth(tHeaders);
- if (thElement.classed('table-icon')) {
- thElement.style('width', tableIconTdSize + 'px');
- tdElement.style('width', tableIconTdSize + 'px');
+ tHeaders.each(function (d, i) {
+ var thElement = d3.select(this),
+ tdElement = t.select('td:nth-of-type(' + (i + 1) + ')'),
+ custWidth = thElement.attr(colWidth);
+
+ if (custWidth) {
+ setColWidth(thElement, tdElement, fs.noPx(custWidth));
+ } else if (thElement.classed(tableIcon)) {
+ setColWidth(thElement, tdElement, tableIconTdSize);
} else {
- thElement.style('width', colWidth + 'px');
- tdElement.style('width', colWidth + 'px');
+ setColWidth(thElement, tdElement, defaultColWidth);
}
});
}
diff --git a/web/gui/src/main/webapp/app/fw/widget/toolbar.js b/web/gui/src/main/webapp/app/fw/widget/toolbar.js
index 74867e5..7b9b6b0 100644
--- a/web/gui/src/main/webapp/app/fw/widget/toolbar.js
+++ b/web/gui/src/main/webapp/app/fw/widget/toolbar.js
@@ -75,11 +75,6 @@
return null;
}
- function noPxWidth(elem) {
- return Number(elem.style('width').replace(/px$/, ''));
- }
-
-
// ==================================
function createToolbar(id, opts) {
@@ -119,7 +114,7 @@
}
function adjustWidth(btnWidth) {
- if (noPxWidth(currentRow) >= maxWidth) {
+ if (fs.noPxStyle(currentRow, 'width') >= maxWidth) {
tbWidth += btnWidth;
maxWidth = tbWidth;
}