/* Create a new file grid.html and copy/paste the following code. */
<html>
<head>
<style>
table{width:100%;overflow:hidden}
table th{text-align:left}
tbody{background-color:#eee;cursor:pointer;border-bottom: 15px solid white}
tbody:nth-of-type(2n){background-color:#ccc}
th{position:relative;}
table{border-collapse:collapse}
thead{background:#000;color:#fff}
td,th{padding:5px 15px;border:1px solid #fff}
#col3{width:100%}
td:nth-child(3) {
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-all;
word-break: break-word;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th id="col1"><input type="checkbox" id="checkBoxSelectAll"></th>
<th id="col2">Size</th>
<th id="col3">File</th>
</tr>
</thead>
</table>
<script>
var table = document.getElementsByTagName('table')[0],
columnDivs = [];
document.querySelectorAll('tbody tr').forEach(tr => {
makeRowSelectable(tr);
});
function makeRowSelectable(a){
//return;
a.addEventListener('click', e => {
let c = a.querySelector('input');
if (c.disabled === true) return;
let regularRow = (a) => { a.style.backgroundColor = ''
a.style.color = ''},
selectedRow = (a) => {a.style.backgroundColor = 'red'
a.style.color = 'white'};
if (c !== e.target){
if (c.checked){
regularRow(a);
c.checked = false;
} else{
selectedRow(a);
c.checked = true;
}} else {
c.checked ? selectedRow(a) : regularRow(a);
}
})};
//Resizable grid method
((function () {
var tableHeight = table.offsetHeight,
col3 = document.querySelector('#col3'),
row = table.getElementsByTagName('tr')[0],
cols = row ? row.children : undefined;
table.style.overflow = 'hidden';
col3.style.width = col3.offsetWidth;
for (var i=0;i<cols.length;i++){
var div = createDiv(tableHeight);
cols[i].appendChild(div);
cols[i].style.position = 'relative';
columnDivs.push(div);
setListeners(div);
}
function setListeners(div){
var pageX,curCol,nxtCol,curColWidth,nxtColWidth;
div.addEventListener('mousedown', function (e) {
curCol = e.target.parentElement;
nxtCol = curCol.nextElementSibling;
pageX = e.pageX;
var padding = paddingDiff(curCol);
curColWidth = curCol.offsetWidth - padding;
if (nxtCol)
nxtColWidth = nxtCol.offsetWidth - padding;
});
div.addEventListener('mouseover', function (e) {
e.target.style.borderRight = '2px solid #0000ff';
})
div.addEventListener('mouseout', function (e) {
e.target.style.borderRight = '';
})
document.addEventListener('mousemove', function (e) {
if (curCol) {
var diffX = e.pageX - pageX;
if (nxtCol)
nxtCol.style.width = (nxtColWidth - (diffX))+'px';
curCol.style.width = (curColWidth + diffX)+'px';
}
});
document.addEventListener('mouseup', function (e) {
curCol = undefined;
nxtCol = undefined;
pageX = undefined;
nxtColWidth = undefined;
curColWidth = undefined
});
}
function createDiv(height){
var div = document.createElement('div');
div.style.top = 0;
div.style.right = 0;
div.style.width = '5px';
div.style.position = 'absolute';
div.style.cursor = 'col-resize';
div.style.userSelect = 'none';
div.style.height = height + 'px';
return div;
}
function paddingDiff(col){
if (getStyleVal(col,'box-sizing') == 'border-box'){
return 0;
}
var padLeft = getStyleVal(col,'padding-left');
var padRight = getStyleVal(col,'padding-right');
return (parseInt(padLeft) + parseInt(padRight));
}
function getStyleVal(elm,css){
return (window.getComputedStyle(elm, null).getPropertyValue(css))
}
})());
var tbodys = [];
function addRows(data) {
if (!data) return;
var tbody = tbodys[data.id];
var size = data.size;
if (size > 1073741823){
size = (size/1073741824).toFixed(2)+'GB';
}else if (size > 1048575){
size = (size/1048576).toFixed(2) + 'MB';
} else if (size > 1023){
size = (size/1024).toFixed(2)+'KB';
}
if (tbody === undefined){
tbody = table.createTBody();
tbody.id = data.id;
tbodys[data.id] = tbody;
}
data.files.forEach(file => {
var tr = tbody.insertRow();
makeRowSelectable(tr);
var td1 = tr.insertCell(),
td2 = tr.insertCell(),
td3 = tr.insertCell(),
cb = document.createElement('input');
cb.type = 'checkbox';
td1.appendChild(cb);
cb.value = file;
var sz = document.createTextNode(size);
td2.appendChild(sz);
var ph = document.createTextNode(file);
td3.appendChild(ph);
});
var tableHeight = table.offsetHeight;
columnDivs.forEach(div => {div.style.height = tableHeight+'px'});
return ((document.body.scrollHeight+50)+'px');
}
</script>
</body>
</html>