Bri Prebilic Cole | 093739a | 2015-01-23 10:22:50 -0800 | [diff] [blame] | 1 | /* |
| 2 | * Copyright 2015 Open Networking Laboratory |
| 3 | * |
| 4 | * Licensed under the Apache License, Version 2.0 (the "License"); |
| 5 | * you may not use this file except in compliance with the License. |
| 6 | * You may obtain a copy of the License at |
| 7 | * |
| 8 | * http://www.apache.org/licenses/LICENSE-2.0 |
| 9 | * |
| 10 | * Unless required by applicable law or agreed to in writing, software |
| 11 | * distributed under the License is distributed on an "AS IS" BASIS, |
| 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| 13 | * See the License for the specific language governing permissions and |
| 14 | * limitations under the License. |
| 15 | */ |
| 16 | |
| 17 | /* |
| 18 | ONOS GUI -- Widget -- Table Service |
| 19 | */ |
| 20 | (function () { |
| 21 | 'use strict'; |
| 22 | |
Bri Prebilic Cole | 08d08d4 | 2015-04-01 14:37:02 -0700 | [diff] [blame] | 23 | // injected refs |
Bri Prebilic Cole | 264c5ec | 2015-04-07 10:22:26 -0700 | [diff] [blame] | 24 | var $log, $window, fs, mast, is; |
Bri Prebilic Cole | 08d08d4 | 2015-04-01 14:37:02 -0700 | [diff] [blame] | 25 | |
| 26 | // constants |
| 27 | var tableIconTdSize = 33, |
Bri Prebilic Cole | 9a5e006 | 2015-05-11 17:20:57 -0700 | [diff] [blame] | 28 | pdg = 22, |
Bri Prebilic Cole | 08d08d4 | 2015-04-01 14:37:02 -0700 | [diff] [blame] | 29 | colWidth = 'col-width', |
Bri Prebilic Cole | 3d4d01c | 2015-04-30 13:48:36 -0700 | [diff] [blame] | 30 | tableIcon = 'table-icon', |
| 31 | asc = 'asc', |
| 32 | desc = 'desc', |
| 33 | none = 'none'; |
Bri Prebilic Cole | 08d08d4 | 2015-04-01 14:37:02 -0700 | [diff] [blame] | 34 | |
| 35 | // internal state |
| 36 | var currCol = {}, |
Bri Prebilic Cole | 3d4d01c | 2015-04-30 13:48:36 -0700 | [diff] [blame] | 37 | prevCol = {}, |
Bri Prebilic Cole | b3a6afe | 2015-06-24 14:10:41 -0700 | [diff] [blame] | 38 | cstmWidths = {}, |
Bri Prebilic Cole | 3d4d01c | 2015-04-30 13:48:36 -0700 | [diff] [blame] | 39 | sortIconAPI; |
Bri Prebilic Cole | 093739a | 2015-01-23 10:22:50 -0800 | [diff] [blame] | 40 | |
Bri Prebilic Cole | b3a6afe | 2015-06-24 14:10:41 -0700 | [diff] [blame] | 41 | // Functions for resizing a tabular view to the window |
Bri Prebilic Cole | 9ca0f9c | 2015-01-29 15:44:20 -0800 | [diff] [blame] | 42 | |
Bri Prebilic Cole | e568ead | 2015-05-01 09:51:28 -0700 | [diff] [blame] | 43 | function _width(elem, width) { |
| 44 | elem.style('width', width); |
Bri Prebilic Cole | 08d08d4 | 2015-04-01 14:37:02 -0700 | [diff] [blame] | 45 | } |
Bri Prebilic Cole | 9ca0f9c | 2015-01-29 15:44:20 -0800 | [diff] [blame] | 46 | |
Bri Prebilic Cole | b3a6afe | 2015-06-24 14:10:41 -0700 | [diff] [blame] | 47 | function findCstmWidths(table) { |
| 48 | var headers = table.select('.table-header').selectAll('td'); |
| 49 | |
| 50 | headers.each(function (d, i) { |
| 51 | var h = d3.select(this), |
| 52 | index = i.toString(); |
| 53 | if (h.classed(tableIcon)) { |
| 54 | cstmWidths[index] = tableIconTdSize + 'px'; |
| 55 | } |
| 56 | if (h.attr(colWidth)) { |
| 57 | cstmWidths[index] = h.attr(colWidth); |
| 58 | } |
| 59 | }); |
| 60 | if (fs.debugOn('widget')) { |
| 61 | $log.debug('Headers with custom widths: ', cstmWidths); |
| 62 | } |
Bri Prebilic Cole | 08d08d4 | 2015-04-01 14:37:02 -0700 | [diff] [blame] | 63 | } |
Thomas Vachuska | 0fa583c | 2015-03-30 23:07:41 -0700 | [diff] [blame] | 64 | |
Bri Prebilic Cole | b3a6afe | 2015-06-24 14:10:41 -0700 | [diff] [blame] | 65 | function setTdWidths(elem, width) { |
| 66 | var tds = elem.select('tr:first-child').selectAll('td'); |
| 67 | _width(elem, width + 'px'); |
Bri Prebilic Cole | 9ca0f9c | 2015-01-29 15:44:20 -0800 | [diff] [blame] | 68 | |
Bri Prebilic Cole | b3a6afe | 2015-06-24 14:10:41 -0700 | [diff] [blame] | 69 | tds.each(function (d, i) { |
| 70 | var td = d3.select(this), |
| 71 | index = i.toString(); |
| 72 | if (cstmWidths.hasOwnProperty(index)) { |
| 73 | _width(td, cstmWidths[index]); |
Simon Hunt | 4deb0e8 | 2015-06-10 16:18:25 -0700 | [diff] [blame] | 74 | } |
Bri Prebilic Cole | b3a6afe | 2015-06-24 14:10:41 -0700 | [diff] [blame] | 75 | }); |
| 76 | } |
| 77 | |
| 78 | function setHeight(thead, body, height) { |
| 79 | var h = height - (mast.mastHeight() + |
| 80 | fs.noPxStyle(d3.select('.tabular-header'), 'height') + |
| 81 | fs.noPxStyle(thead, 'height') + pdg); |
| 82 | body.style('height', h + 'px'); |
| 83 | } |
| 84 | |
| 85 | function adjustTable(haveItems, tableElems, width, height) { |
| 86 | if (haveItems) { |
| 87 | setTdWidths(tableElems.thead, width); |
| 88 | setTdWidths(tableElems.tbody, width); |
| 89 | setHeight(tableElems.thead, tableElems.table.select('.table-body'), height); |
| 90 | } else { |
| 91 | setTdWidths(tableElems.thead, width); |
| 92 | _width(tableElems.tbody, width + 'px'); |
Bri Prebilic Cole | e568ead | 2015-05-01 09:51:28 -0700 | [diff] [blame] | 93 | } |
Bri Prebilic Cole | 9ca0f9c | 2015-01-29 15:44:20 -0800 | [diff] [blame] | 94 | } |
| 95 | |
Bri Prebilic Cole | 3d4d01c | 2015-04-30 13:48:36 -0700 | [diff] [blame] | 96 | // Functions for sorting table rows by header |
Bri Prebilic Cole | e1bda3f | 2015-02-13 17:01:49 -0800 | [diff] [blame] | 97 | |
Bri Prebilic Cole | 3d4d01c | 2015-04-30 13:48:36 -0700 | [diff] [blame] | 98 | function updateSortDirection(thElem) { |
| 99 | sortIconAPI.sortNone(thElem.select('div')); |
| 100 | currCol.div = thElem.append('div'); |
Bri Prebilic Cole | 902cb04 | 2015-02-11 14:04:15 -0800 | [diff] [blame] | 101 | currCol.colId = thElem.attr('colId'); |
| 102 | |
| 103 | if (currCol.colId === prevCol.colId) { |
Bri Prebilic Cole | 3d4d01c | 2015-04-30 13:48:36 -0700 | [diff] [blame] | 104 | (currCol.dir === desc) ? currCol.dir = asc : currCol.dir = desc; |
| 105 | prevCol.dir = currCol.dir; |
Bri Prebilic Cole | 902cb04 | 2015-02-11 14:04:15 -0800 | [diff] [blame] | 106 | } else { |
Bri Prebilic Cole | 3d4d01c | 2015-04-30 13:48:36 -0700 | [diff] [blame] | 107 | currCol.dir = asc; |
| 108 | prevCol.dir = none; |
Bri Prebilic Cole | 902cb04 | 2015-02-11 14:04:15 -0800 | [diff] [blame] | 109 | } |
Bri Prebilic Cole | 3d4d01c | 2015-04-30 13:48:36 -0700 | [diff] [blame] | 110 | (currCol.dir === asc) ? |
| 111 | sortIconAPI.sortAsc(currCol.div) : sortIconAPI.sortDesc(currCol.div); |
Bri Prebilic Cole | 902cb04 | 2015-02-11 14:04:15 -0800 | [diff] [blame] | 112 | |
Bri Prebilic Cole | 3d4d01c | 2015-04-30 13:48:36 -0700 | [diff] [blame] | 113 | if (prevCol.colId && prevCol.dir === none) { |
| 114 | sortIconAPI.sortNone(prevCol.div); |
Bri Prebilic Cole | 902cb04 | 2015-02-11 14:04:15 -0800 | [diff] [blame] | 115 | } |
| 116 | |
| 117 | prevCol.colId = currCol.colId; |
Bri Prebilic Cole | 3d4d01c | 2015-04-30 13:48:36 -0700 | [diff] [blame] | 118 | prevCol.div = currCol.div; |
Bri Prebilic Cole | 902cb04 | 2015-02-11 14:04:15 -0800 | [diff] [blame] | 119 | } |
| 120 | |
Bri Prebilic Cole | 19a32dd | 2015-03-26 18:00:03 -0700 | [diff] [blame] | 121 | function sortRequestParams() { |
| 122 | return { |
| 123 | sortCol: currCol.colId, |
Bri Prebilic Cole | 3d4d01c | 2015-04-30 13:48:36 -0700 | [diff] [blame] | 124 | sortDir: currCol.dir |
Bri Prebilic Cole | 19a32dd | 2015-03-26 18:00:03 -0700 | [diff] [blame] | 125 | }; |
Bri Prebilic Cole | 902cb04 | 2015-02-11 14:04:15 -0800 | [diff] [blame] | 126 | } |
| 127 | |
Bri Prebilic Cole | c244976 | 2015-05-29 14:30:51 -0700 | [diff] [blame] | 128 | function resetSort() { |
Bri Prebilic Cole | 3d4d01c | 2015-04-30 13:48:36 -0700 | [diff] [blame] | 129 | if (currCol.div) { |
| 130 | sortIconAPI.sortNone(currCol.div); |
| 131 | } |
| 132 | if (prevCol.div) { |
| 133 | sortIconAPI.sortNone(prevCol.div); |
| 134 | } |
| 135 | currCol = {}; |
| 136 | prevCol = {}; |
| 137 | } |
| 138 | |
Bri Prebilic Cole | 093739a | 2015-01-23 10:22:50 -0800 | [diff] [blame] | 139 | angular.module('onosWidget') |
Bri Prebilic Cole | b3a6afe | 2015-06-24 14:10:41 -0700 | [diff] [blame] | 140 | .directive('onosTableResize', ['$log','$window', |
Bri Prebilic Cole | e568ead | 2015-05-01 09:51:28 -0700 | [diff] [blame] | 141 | 'FnService', 'MastService', |
| 142 | |
| 143 | function (_$log_, _$window_, _fs_, _mast_) { |
Bri Prebilic Cole | e4d5c6c | 2015-02-02 15:52:45 -0800 | [diff] [blame] | 144 | return function (scope, element) { |
Bri Prebilic Cole | e568ead | 2015-05-01 09:51:28 -0700 | [diff] [blame] | 145 | $log = _$log_; |
Bri Prebilic Cole | e4d5c6c | 2015-02-02 15:52:45 -0800 | [diff] [blame] | 146 | $window = _$window_; |
| 147 | fs = _fs_; |
Bri Prebilic Cole | 264c5ec | 2015-04-07 10:22:26 -0700 | [diff] [blame] | 148 | mast = _mast_; |
| 149 | |
Bri Prebilic Cole | 068814d | 2015-05-14 16:06:38 -0700 | [diff] [blame] | 150 | var table = d3.select(element[0]), |
Bri Prebilic Cole | b3a6afe | 2015-06-24 14:10:41 -0700 | [diff] [blame] | 151 | tableElems = { |
| 152 | table: table, |
| 153 | thead: table.select('.table-header').select('table'), |
| 154 | tbody: table.select('.table-body').select('table') |
| 155 | }, |
| 156 | wsz; |
Bri Prebilic Cole | 9ca0f9c | 2015-01-29 15:44:20 -0800 | [diff] [blame] | 157 | |
Bri Prebilic Cole | b3a6afe | 2015-06-24 14:10:41 -0700 | [diff] [blame] | 158 | findCstmWidths(table); |
| 159 | |
| 160 | // adjust table on window resize |
Bri Prebilic Cole | 068814d | 2015-05-14 16:06:38 -0700 | [diff] [blame] | 161 | scope.$watchCollection(function () { |
Bri Prebilic Cole | e4d5c6c | 2015-02-02 15:52:45 -0800 | [diff] [blame] | 162 | return { |
Bri Prebilic Cole | e568ead | 2015-05-01 09:51:28 -0700 | [diff] [blame] | 163 | h: $window.innerHeight, |
| 164 | w: $window.innerWidth |
Bri Prebilic Cole | e4d5c6c | 2015-02-02 15:52:45 -0800 | [diff] [blame] | 165 | }; |
Bri Prebilic Cole | e568ead | 2015-05-01 09:51:28 -0700 | [diff] [blame] | 166 | }, function () { |
Bri Prebilic Cole | b3a6afe | 2015-06-24 14:10:41 -0700 | [diff] [blame] | 167 | wsz = fs.windowSize(0, 30); |
| 168 | adjustTable( |
| 169 | scope.tableData.length, |
| 170 | tableElems, |
| 171 | wsz.width, wsz.height |
| 172 | ); |
| 173 | }); |
Bri Prebilic Cole | 9ca0f9c | 2015-01-29 15:44:20 -0800 | [diff] [blame] | 174 | |
Bri Prebilic Cole | b3a6afe | 2015-06-24 14:10:41 -0700 | [diff] [blame] | 175 | // adjust table when data changes |
| 176 | scope.$watchCollection('tableData', function () { |
| 177 | adjustTable( |
| 178 | scope.tableData.length, |
| 179 | tableElems, |
| 180 | wsz.width, wsz.height |
| 181 | ); |
| 182 | }); |
Simon Hunt | 0c2c4c5 | 2015-04-02 17:42:45 -0700 | [diff] [blame] | 183 | |
Bri Prebilic Cole | b3a6afe | 2015-06-24 14:10:41 -0700 | [diff] [blame] | 184 | scope.$on('$destroy', function () { |
| 185 | cstmWidths = {}; |
Bri Prebilic Cole | e4d5c6c | 2015-02-02 15:52:45 -0800 | [diff] [blame] | 186 | }); |
| 187 | }; |
Bri Prebilic Cole | 1f93be2 | 2015-02-10 17:16:46 -0800 | [diff] [blame] | 188 | }]) |
| 189 | |
| 190 | .directive('onosSortableHeader', ['$log', 'IconService', |
| 191 | function (_$log_, _is_) { |
Bri Prebilic Cole | 0c41ba2 | 2015-07-06 15:09:48 -0700 | [diff] [blame] | 192 | return function (scope, element) { |
| 193 | $log = _$log_; |
| 194 | is = _is_; |
| 195 | var header = d3.select(element[0]); |
| 196 | sortIconAPI = is.sortIcons(); |
Bri Prebilic Cole | 1f93be2 | 2015-02-10 17:16:46 -0800 | [diff] [blame] | 197 | |
Bri Prebilic Cole | 0c41ba2 | 2015-07-06 15:09:48 -0700 | [diff] [blame] | 198 | header.selectAll('td').on('click', function () { |
| 199 | var col = d3.select(this); |
Bri Prebilic Cole | 1f93be2 | 2015-02-10 17:16:46 -0800 | [diff] [blame] | 200 | |
Bri Prebilic Cole | 0c41ba2 | 2015-07-06 15:09:48 -0700 | [diff] [blame] | 201 | if (col.attr('sortable') === '') { |
| 202 | updateSortDirection(col); |
| 203 | scope.sortParams = sortRequestParams(); |
| 204 | scope.sortCallback(scope.sortParams); |
| 205 | } |
| 206 | }); |
Bri Prebilic Cole | 3d4d01c | 2015-04-30 13:48:36 -0700 | [diff] [blame] | 207 | |
Bri Prebilic Cole | 0c41ba2 | 2015-07-06 15:09:48 -0700 | [diff] [blame] | 208 | scope.$on('$destroy', function () { |
| 209 | resetSort(); |
| 210 | }); |
| 211 | } |
Bri Prebilic Cole | e4d5c6c | 2015-02-02 15:52:45 -0800 | [diff] [blame] | 212 | }]); |
Bri Prebilic Cole | 093739a | 2015-01-23 10:22:50 -0800 | [diff] [blame] | 213 | |
| 214 | }()); |