diff --git a/app/assets/sass/temporary.scss b/app/assets/sass/temporary.scss index 35625ba..1a5ab38 100644 --- a/app/assets/sass/temporary.scss +++ b/app/assets/sass/temporary.scss @@ -302,6 +302,10 @@ div.ui-pnotify { // Action bar +bansho-table-actionbar menu { + z-index: 988889; +} + input#filter__search { border: none; width: 100%; diff --git a/app/components/config/config.json b/app/components/config/config.json index 9df662e..7cac146 100644 --- a/app/components/config/config.json +++ b/app/components/config/config.json @@ -38,6 +38,7 @@ "status_host_status" ] }, + "headerFollow": false, "inputSource": { "service": "surveilStatus", "config": { @@ -78,6 +79,7 @@ "status_last_check" ] }, + "headerFollow": false, "inputSource": { "service": "surveilStatus", "config": { @@ -125,6 +127,7 @@ "status_host_status" ] }, + "headerFollow": false, "inputSource": { "service": "surveilStatus", "config": { @@ -161,6 +164,7 @@ "status_last_check" ] }, + "headerFollow": false, "inputSource": { "service": "surveilStatus", "config": { @@ -206,6 +210,7 @@ "status_host_status" ] }, + "headerFollow": true, "inputSource": { "service": "surveilStatus", "config": { @@ -244,6 +249,7 @@ "status_last_check" ] }, + "headerFollow": true, "inputSource": { "service": "surveilStatus", "config": { @@ -287,6 +293,7 @@ "status_event" ] }, + "headerFollow": true, "inputSource": { "service": "surveilStatus", "config": { diff --git a/app/components/table/table.js b/app/components/table/table.js index 1e458b2..d5abfe1 100644 --- a/app/components/table/table.js +++ b/app/components/table/table.js @@ -22,9 +22,125 @@ angular.module('bansho.table', ['bansho.surveil', .value('tablesConfig', []) - .controller('TableCtrl', ['$scope', '$interval', '$window', 'surveilStatus', 'tablesConfig', + .service('headerFollow', ['$window', function ($window){ + var isFollowing = false, staticHead, followingHead, actionBar = false, actionBarEl, staticActionBar, + staticActionBarYOffset, staticHeadYOffset, yThreshold, yOffset; + + function enableFollowingMode() { + isFollowing = true; + setFollowingModeCss(); + } + + function setFollowingModeCss() { + // We need to show moving head + followingHead.css("display", "table-header-group"); + // Resize thead col width + var thList = staticHead.children("tr").children("th"); + angular.forEach(thList, function(th, key) { + $(followingHead.children("tr").children("th")[key]).css("width", $(th).css("width")); + }); + // If we have an actionbar + if (actionBar) { + // Set actionbar css + staticActionBar.css("top", "0"); + staticActionBar.css("position", "fixed"); + if (followingHead.css("width") != "0px") { + staticActionBar.css("width", followingHead.css("width")); + } + // Set top css to moving head + followingHead.css("top", staticActionBar.css("height")); + } + } + + function disableFollowingMode(){ + isFollowing = false; + setStaticModeCss(); + } + + function setStaticModeCss(){ + // We need to hide moving head + followingHead.css("display", "none"); + // Resize thead col width + var thList = staticHead.children("tr").children("th"); + angular.forEach(thList, function(th, key) { + $(followingHead.children("tr").children("th")[key]).css("width", "auto"); + }); + // If we have an actionbar + if (actionBar) { + // We need to fix moving actionbar + staticActionBar.css("position", "relative"); + if (followingHead.css("width") != "0px") { + staticActionBar.css("width", "auto"); + } + } + } + + function calculateThreshold() { + // Get YThreshold + staticHeadYOffset = $(staticHead).position().top; + if (actionBar) { + yThreshold = Math.min(staticActionBarYOffset, staticHeadYOffset); + } + else { + yThreshold = staticHeadYOffset; + } + } + + function scrollEvent() { + yOffset = $window.pageYOffset; + + if (!isFollowing) { + // Get init data + staticHead = $("thead.static-thead"); + followingHead = $(staticHead).parent().children("thead.moving-thead"); + // Prepare action bar + if (actionBar) { + staticActionBar = actionBarEl.children("menu"); + staticActionBarYOffset = $(staticActionBar).position().top; + } + calculateThreshold(); + } + + if (yOffset >= yThreshold){ + enableFollowingMode(); + } + else { + disableFollowingMode(); + } + } + this.activate = function () { + // Handle header fixed + angular.element(document).ready(function () { + + // Prepare action bar + actionBarEl = $("bansho-table-actionbar"); + if (actionBarEl.length > 0) { + actionBar = true; + } + + // Handle scroll event + angular.element(document).on("scroll", scrollEvent); + + // Handle resize event + $($window).resize(function() { + if (isFollowing) { + setFollowingModeCss(); + } + else { + setStaticModeCss(); + } + }); + }); + }; + + this.deactivate = function () { + angular.element(document).off("scroll", scrollEvent); + }; + }]) + + .controller('TableCtrl', ['$scope', '$interval', 'headerFollow', 'surveilStatus', 'tablesConfig', 'actionbarFilters', 'promisesManager', 'tableGlobalConfig', - function ($scope, $interval, $window, surveilStatus, tablesConfig, actionbarFilters, promisesManager, tableGlobalConfig) { + function ($scope, $interval, headerFollow, surveilStatus, tablesConfig, actionbarFilters, promisesManager, tableGlobalConfig) { var requestFields = [], conf = tablesConfig[tableGlobalConfig.nextTableIndex], getData, @@ -35,41 +151,12 @@ angular.module('bansho.table', ['bansho.surveil', surveilStatus: surveilStatus }; + if (conf.headerFollow) { + headerFollow.activate(); + } else { + headerFollow.deactivate(); + } - // Handle header fixed - angular.element(document).ready(function () { - // Get init data - var staticHead = angular.element(document.querySelector('thead.static-thead')); - var theadYOffset = $(staticHead).position().top; - var movingHead = $(staticHead).parent().children("thead.moving-thead"); - // Handle scroll event - angular.element(document).bind("scroll", function() { - var winheight = $window.innerHeight; - var yoffset = $window.pageYOffset; - if (yoffset > theadYOffset){ - // We need to show moving head - movingHead.css("display", "inherit"); - // Resize thead col width - var thList = staticHead.children("tr").children("th"); - angular.forEach(thList, function(th, key) { - $(movingHead.children("tr").children("th")[key]).css("width", $(th).css("width")); - }); - } - else { - // We need to show moving head - movingHead.css("display", "none"); - } - }); - - // Handle resize event - $($window).resize(function() { - // Resize thead col width - var thList = staticHead.children("tr").children("th"); - angular.forEach(thList, function(th, key) { - $(movingHead.children("tr").children("th")[key]).css("width", $(th).css("width")); - }); - }); - }); $scope.cellsName = conf.cells.name; @@ -153,6 +240,7 @@ angular.module('bansho.table', ['bansho.surveil', conf.isWrappable = JSON.parse(attrs.isWrappable); conf.noRepeatCell = attrs.noRepeatCell; + conf.headerFollow = scope.$eval(attrs.headerFollow); tableGlobalConfig.tableId = attrs.tableId; scope.checkColumn = scope.$eval(attrs.checkColumn); @@ -210,6 +298,7 @@ angular.module('bansho.table', ['bansho.surveil', this.IsWrappable = config.isWrappable; this.ContainsActionBar = config.containsActionBar; this.CheckColumn = config.checkColumn; + this.HeaderFollow = config.headerFollow; this.NoRepeatCell = config.noRepeatCell; }) diff --git a/app/templates/dashboard/dashboard.html b/app/templates/dashboard/dashboard.html index 8940e17..10fb905 100644 --- a/app/templates/dashboard/dashboard.html +++ b/app/templates/dashboard/dashboard.html @@ -59,6 +59,7 @@ is-wrappable="{{dashboardTables[0].IsWrappable}}" no-repeat-cell="{{dashboardTables[0].NoRepeatCell}}" check-column="{{dashboardTables[0].CheckColumn}}" + header-follow="{{dashboardTables[0].HeaderFollow}}" refresh-interval="{{dashboardRefreshInterval}}" additionnal-query-fields="{{dashboardTables[0].additionnalQueryFields}}" table-id="0"> @@ -85,6 +86,7 @@ is-wrappable="{{dashboardTables[1].IsWrappable}}" no-repeat-cell="{{dashboardTables[1].NoRepeatCell}}" check-column="{{dashboardTables[1].CheckColumn}}" + header-follow="{{dashboardTables[1].HeaderFollow}}" refresh-interval="{{dashboardRefreshInterval}}" additionnal-query-fields="{{dashboardTables[1].additionnalQueryFields}}" table-id="1"> @@ -113,6 +115,7 @@ is-wrappable="{{dashboardTables[2].IsWrappable}}" no-repeat-cell="{{dashboardTables[2].NoRepeatCell}}" check-column="{{dashboardTables[2].CheckColumn}}" + header-follow="{{dashboardTables[2].HeaderFollow}}" refresh-interval="{{dashboardRefreshInterval}}" table-id="2"> @@ -137,6 +140,7 @@ is-wrappable="{{dashboardTables[3].IsWrappable}}" no-repeat-cell="{{dashboardTables[3].NoRepeatCell}}" check-column="{{dashboardTables[3].CheckColumn}}" + header-follow="{{dashboardTables[3].HeaderFollow}}" refresh-interval="{{dashboardRefreshInterval}}" table-id="3"> diff --git a/app/templates/single_table/single_table.html b/app/templates/single_table/single_table.html index 2890327..8ac649d 100644 --- a/app/templates/single_table/single_table.html +++ b/app/templates/single_table/single_table.html @@ -19,6 +19,7 @@ is-wrappable="{{tableConfig.IsWrappable}}" check-column="{{tableConfig.CheckColumn}}" no-repeat-cell="{{tableConfig.NoRepeatCell}}" + header-follow="{{tableConfig.HeaderFollow}}" refresh-interval="{{singleTableRefreshInterval}}" table-id="0">