Merge "Add actionbar following and refactoring"
This commit is contained in:
commit
f906f96bea
|
@ -302,6 +302,10 @@ div.ui-pnotify {
|
||||||
|
|
||||||
// Action bar
|
// Action bar
|
||||||
|
|
||||||
|
bansho-table-actionbar menu {
|
||||||
|
z-index: 988889;
|
||||||
|
}
|
||||||
|
|
||||||
input#filter__search {
|
input#filter__search {
|
||||||
border: none;
|
border: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
@ -38,6 +38,7 @@
|
||||||
"status_host_status"
|
"status_host_status"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
"headerFollow": false,
|
||||||
"inputSource": {
|
"inputSource": {
|
||||||
"service": "surveilStatus",
|
"service": "surveilStatus",
|
||||||
"config": {
|
"config": {
|
||||||
|
@ -78,6 +79,7 @@
|
||||||
"status_last_check"
|
"status_last_check"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
"headerFollow": false,
|
||||||
"inputSource": {
|
"inputSource": {
|
||||||
"service": "surveilStatus",
|
"service": "surveilStatus",
|
||||||
"config": {
|
"config": {
|
||||||
|
@ -125,6 +127,7 @@
|
||||||
"status_host_status"
|
"status_host_status"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
"headerFollow": false,
|
||||||
"inputSource": {
|
"inputSource": {
|
||||||
"service": "surveilStatus",
|
"service": "surveilStatus",
|
||||||
"config": {
|
"config": {
|
||||||
|
@ -161,6 +164,7 @@
|
||||||
"status_last_check"
|
"status_last_check"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
"headerFollow": false,
|
||||||
"inputSource": {
|
"inputSource": {
|
||||||
"service": "surveilStatus",
|
"service": "surveilStatus",
|
||||||
"config": {
|
"config": {
|
||||||
|
@ -206,6 +210,7 @@
|
||||||
"status_host_status"
|
"status_host_status"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
"headerFollow": true,
|
||||||
"inputSource": {
|
"inputSource": {
|
||||||
"service": "surveilStatus",
|
"service": "surveilStatus",
|
||||||
"config": {
|
"config": {
|
||||||
|
@ -244,6 +249,7 @@
|
||||||
"status_last_check"
|
"status_last_check"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
"headerFollow": true,
|
||||||
"inputSource": {
|
"inputSource": {
|
||||||
"service": "surveilStatus",
|
"service": "surveilStatus",
|
||||||
"config": {
|
"config": {
|
||||||
|
@ -287,6 +293,7 @@
|
||||||
"status_event"
|
"status_event"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
"headerFollow": true,
|
||||||
"inputSource": {
|
"inputSource": {
|
||||||
"service": "surveilStatus",
|
"service": "surveilStatus",
|
||||||
"config": {
|
"config": {
|
||||||
|
|
|
@ -22,9 +22,125 @@ angular.module('bansho.table', ['bansho.surveil',
|
||||||
|
|
||||||
.value('tablesConfig', [])
|
.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',
|
'actionbarFilters', 'promisesManager', 'tableGlobalConfig',
|
||||||
function ($scope, $interval, $window, surveilStatus, tablesConfig, actionbarFilters, promisesManager, tableGlobalConfig) {
|
function ($scope, $interval, headerFollow, surveilStatus, tablesConfig, actionbarFilters, promisesManager, tableGlobalConfig) {
|
||||||
var requestFields = [],
|
var requestFields = [],
|
||||||
conf = tablesConfig[tableGlobalConfig.nextTableIndex],
|
conf = tablesConfig[tableGlobalConfig.nextTableIndex],
|
||||||
getData,
|
getData,
|
||||||
|
@ -35,41 +151,12 @@ angular.module('bansho.table', ['bansho.surveil',
|
||||||
surveilStatus: surveilStatus
|
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;
|
$scope.cellsName = conf.cells.name;
|
||||||
|
@ -153,6 +240,7 @@ angular.module('bansho.table', ['bansho.surveil',
|
||||||
|
|
||||||
conf.isWrappable = JSON.parse(attrs.isWrappable);
|
conf.isWrappable = JSON.parse(attrs.isWrappable);
|
||||||
conf.noRepeatCell = attrs.noRepeatCell;
|
conf.noRepeatCell = attrs.noRepeatCell;
|
||||||
|
conf.headerFollow = scope.$eval(attrs.headerFollow);
|
||||||
tableGlobalConfig.tableId = attrs.tableId;
|
tableGlobalConfig.tableId = attrs.tableId;
|
||||||
scope.checkColumn = scope.$eval(attrs.checkColumn);
|
scope.checkColumn = scope.$eval(attrs.checkColumn);
|
||||||
|
|
||||||
|
@ -210,6 +298,7 @@ angular.module('bansho.table', ['bansho.surveil',
|
||||||
this.IsWrappable = config.isWrappable;
|
this.IsWrappable = config.isWrappable;
|
||||||
this.ContainsActionBar = config.containsActionBar;
|
this.ContainsActionBar = config.containsActionBar;
|
||||||
this.CheckColumn = config.checkColumn;
|
this.CheckColumn = config.checkColumn;
|
||||||
|
this.HeaderFollow = config.headerFollow;
|
||||||
this.NoRepeatCell = config.noRepeatCell;
|
this.NoRepeatCell = config.noRepeatCell;
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
|
@ -59,6 +59,7 @@
|
||||||
is-wrappable="{{dashboardTables[0].IsWrappable}}"
|
is-wrappable="{{dashboardTables[0].IsWrappable}}"
|
||||||
no-repeat-cell="{{dashboardTables[0].NoRepeatCell}}"
|
no-repeat-cell="{{dashboardTables[0].NoRepeatCell}}"
|
||||||
check-column="{{dashboardTables[0].CheckColumn}}"
|
check-column="{{dashboardTables[0].CheckColumn}}"
|
||||||
|
header-follow="{{dashboardTables[0].HeaderFollow}}"
|
||||||
refresh-interval="{{dashboardRefreshInterval}}"
|
refresh-interval="{{dashboardRefreshInterval}}"
|
||||||
additionnal-query-fields="{{dashboardTables[0].additionnalQueryFields}}"
|
additionnal-query-fields="{{dashboardTables[0].additionnalQueryFields}}"
|
||||||
table-id="0"></bansho-table>
|
table-id="0"></bansho-table>
|
||||||
|
@ -85,6 +86,7 @@
|
||||||
is-wrappable="{{dashboardTables[1].IsWrappable}}"
|
is-wrappable="{{dashboardTables[1].IsWrappable}}"
|
||||||
no-repeat-cell="{{dashboardTables[1].NoRepeatCell}}"
|
no-repeat-cell="{{dashboardTables[1].NoRepeatCell}}"
|
||||||
check-column="{{dashboardTables[1].CheckColumn}}"
|
check-column="{{dashboardTables[1].CheckColumn}}"
|
||||||
|
header-follow="{{dashboardTables[1].HeaderFollow}}"
|
||||||
refresh-interval="{{dashboardRefreshInterval}}"
|
refresh-interval="{{dashboardRefreshInterval}}"
|
||||||
additionnal-query-fields="{{dashboardTables[1].additionnalQueryFields}}"
|
additionnal-query-fields="{{dashboardTables[1].additionnalQueryFields}}"
|
||||||
table-id="1"></bansho-table>
|
table-id="1"></bansho-table>
|
||||||
|
@ -113,6 +115,7 @@
|
||||||
is-wrappable="{{dashboardTables[2].IsWrappable}}"
|
is-wrappable="{{dashboardTables[2].IsWrappable}}"
|
||||||
no-repeat-cell="{{dashboardTables[2].NoRepeatCell}}"
|
no-repeat-cell="{{dashboardTables[2].NoRepeatCell}}"
|
||||||
check-column="{{dashboardTables[2].CheckColumn}}"
|
check-column="{{dashboardTables[2].CheckColumn}}"
|
||||||
|
header-follow="{{dashboardTables[2].HeaderFollow}}"
|
||||||
refresh-interval="{{dashboardRefreshInterval}}"
|
refresh-interval="{{dashboardRefreshInterval}}"
|
||||||
table-id="2"></bansho-table>
|
table-id="2"></bansho-table>
|
||||||
</span>
|
</span>
|
||||||
|
@ -137,6 +140,7 @@
|
||||||
is-wrappable="{{dashboardTables[3].IsWrappable}}"
|
is-wrappable="{{dashboardTables[3].IsWrappable}}"
|
||||||
no-repeat-cell="{{dashboardTables[3].NoRepeatCell}}"
|
no-repeat-cell="{{dashboardTables[3].NoRepeatCell}}"
|
||||||
check-column="{{dashboardTables[3].CheckColumn}}"
|
check-column="{{dashboardTables[3].CheckColumn}}"
|
||||||
|
header-follow="{{dashboardTables[3].HeaderFollow}}"
|
||||||
refresh-interval="{{dashboardRefreshInterval}}"
|
refresh-interval="{{dashboardRefreshInterval}}"
|
||||||
table-id="3"></bansho-table>
|
table-id="3"></bansho-table>
|
||||||
</span>
|
</span>
|
||||||
|
|
|
@ -19,6 +19,7 @@
|
||||||
is-wrappable="{{tableConfig.IsWrappable}}"
|
is-wrappable="{{tableConfig.IsWrappable}}"
|
||||||
check-column="{{tableConfig.CheckColumn}}"
|
check-column="{{tableConfig.CheckColumn}}"
|
||||||
no-repeat-cell="{{tableConfig.NoRepeatCell}}"
|
no-repeat-cell="{{tableConfig.NoRepeatCell}}"
|
||||||
|
header-follow="{{tableConfig.HeaderFollow}}"
|
||||||
refresh-interval="{{singleTableRefreshInterval}}"
|
refresh-interval="{{singleTableRefreshInterval}}"
|
||||||
table-id="0"></bansho-table>
|
table-id="0"></bansho-table>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue