x
/
bansho
Code Issues Proposed changes

Add moving header in table component 

Change-Id: If6873fdead6942713d3aacff5e55ba9f78fc2782
This commit is contained in:
Thibault Cohen 2015-07-03 10:40:28 -04:00
parent 0a8d3c76f8
commit 2cfcd16c0b
3 changed files with 62 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/assets/sass/temporary.scss
View File

@ -319,3 +319,12 @@ input#filter__search {
font-style: italic;
}
}
// Table
thead.moving-thead {
position: fixed;
top: 0;
display: none;
z-index: 988889;
}

15
app/components/table/table.html
View File

@ -1,5 +1,18 @@
<table class="data-table" ng-controller="TableCtrl">
<thead>
<thead class="moving-thead">
<tr>
<th class="data-table__checkbox">
<md-checkbox ng-model="isCheckAll" ng-change="onCheckChange()"></md-checkbox>
</th>
<th ng-repeat="i in cellIndexes" class="data-table__{{cellsName[i]}}">
{{cellsText[i]}}
<i class="ico-up-dir"></i>
</th>
</tr>
</thead>
<thead class="static-thead">
<tr>
<th class="data-table__checkbox">
<md-checkbox ng-model="isCheckAll" ng-change="onCheckChange()"></md-checkbox>

41
app/components/table/table.js
View File

@ -17,9 +17,9 @@ angular.module('bansho.table', ['bansho.surveil',
.value('tablesConfig', [])
.controller('TableCtrl', ['$scope', '$interval', 'surveilStatus', 'tablesConfig',
.controller('TableCtrl', ['$scope', '$interval', '$window', 'surveilStatus', 'tablesConfig',
'actionbarFilters', 'promisesManager', 'tableGlobalConfig',
function ($scope, $interval, surveilStatus, tablesConfig, actionbarFilters, promisesManager, tableGlobalConfig) {
function ($scope, $interval, $window, surveilStatus, tablesConfig, actionbarFilters, promisesManager, tableGlobalConfig) {
var requestFields = [],
conf = tablesConfig[tableGlobalConfig.nextTableIndex],
getData,
@ -30,6 +30,43 @@ angular.module('bansho.table', ['bansho.surveil',
surveilStatus: surveilStatus
};
// 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.cellsText = conf.cells.text;
$scope.cellIndexes = [];