changes
This commit is contained in:
parent
f8ef070aad
commit
ba3d62a4c0
|
|
@ -22,7 +22,7 @@
|
||||||
|
|
||||||
<div id="tracking">
|
<div id="tracking">
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<div></div>
|
<div class="header"> </div>
|
||||||
<div class="header">H1</div>
|
<div class="header">H1</div>
|
||||||
<div class="header">H2</div>
|
<div class="header">H2</div>
|
||||||
<div class="header">H3</div>
|
<div class="header">H3</div>
|
||||||
|
|
@ -38,7 +38,7 @@
|
||||||
<div>dfjaldfjaf</div>
|
<div>dfjaldfjaf</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div class="page-navigation">
|
||||||
<div class="pagination"></div>
|
<div class="pagination"></div>
|
||||||
<div>
|
<div>
|
||||||
<select class="items-per-page">
|
<select class="items-per-page">
|
||||||
|
|
|
||||||
95
script.js
95
script.js
|
|
@ -1,23 +1,23 @@
|
||||||
console.log("HI ME");
|
console.log("HI ME");
|
||||||
|
|
||||||
let data = [
|
let data = [
|
||||||
{ h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
|
{ h1: "bla", h2: "üh", h3: "ah", h4: "bah" },
|
||||||
{ h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
|
{ h1: "bla", h2: "üh", h3: "ah", h4: "bah" },
|
||||||
{ h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
|
{ h1: "bla", h2: "üh", h3: "ah", h4: "bah" },
|
||||||
{ h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
|
{ h1: "bla", h2: "üh", h3: "ah", h4: "bah" },
|
||||||
{ h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
|
{ h1: "bla", h2: "üh", h3: "ah", h4: "bah" },
|
||||||
{ h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
|
{ h1: "bla", h2: "üh", h3: "ah", h4: "bah" },
|
||||||
{ h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
|
{ h1: "bla", h2: "üh", h3: "ah", h4: "bah" },
|
||||||
{ h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
|
{ h1: "bla", h2: "üh", h3: "ah", h4: "bah" },
|
||||||
{ h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
|
{ h1: "bla", h2: "üh", h3: "ah", h4: "bah" },
|
||||||
{ h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
|
{ h1: "bla", h2: "üh", h3: "ah", h4: "bah" },
|
||||||
{ h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
|
{ h1: "bla", h2: "üh", h3: "ah", h4: "bah" },
|
||||||
{ h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
|
{ h1: "bla", h2: "üh", h3: "ah", h4: "bah" },
|
||||||
]
|
]
|
||||||
|
|
||||||
for (i = 0; i < 1000; i++) {
|
for (i = 0; i < 1000; i++) {
|
||||||
data[i] = {
|
data[i] = {
|
||||||
h1: `bla ${i}`, h2: `uh ${i}`, h3: `ah ${i}`, h4: `bah ${i}`
|
h1: `bla ${i}`, h2: `üh ${i}`, h3: `ah ${i}`, h4: `bah ${i}`
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -29,7 +29,21 @@ addItemsPerPageEventListener();
|
||||||
|
|
||||||
function addItemsPerPageEventListener() {
|
function addItemsPerPageEventListener() {
|
||||||
document.querySelector("#tracking .items-per-page").addEventListener('change', (evt) => {
|
document.querySelector("#tracking .items-per-page").addEventListener('change', (evt) => {
|
||||||
console.log(evt.target.value);
|
let table = document.querySelector("#tracking .table");
|
||||||
|
let firstRowOfPage = itemsPerPage * currentPage - itemsPerPage;
|
||||||
|
itemsPerPage = parseInt(evt.target.value);
|
||||||
|
|
||||||
|
// reassign page to row
|
||||||
|
table.querySelectorAll('[data-row]').forEach((rowItem, index) => {
|
||||||
|
let row = rowItem.dataset.row;
|
||||||
|
let page = Math.floor((row - 1) / itemsPerPage) + 1;
|
||||||
|
|
||||||
|
rowItem.dataset.page = page;
|
||||||
|
});
|
||||||
|
|
||||||
|
createPagination();
|
||||||
|
// console.log(firstRowOfPage, Math.floor((firstRowOfPage) / itemsPerPage) + 1);
|
||||||
|
activatePage(Math.floor((firstRowOfPage) / itemsPerPage) + 1);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -48,16 +62,21 @@ function drawData() {
|
||||||
let row = index + 1;
|
let row = index + 1;
|
||||||
let page = Math.floor((row - 1) / itemsPerPage) + 1;
|
let page = Math.floor((row - 1) / itemsPerPage) + 1;
|
||||||
|
|
||||||
|
let rowContainer = document.createElement('div');
|
||||||
|
rowContainer.classList.add("row");
|
||||||
|
|
||||||
let moreButton = document.createElement('div');
|
let moreButton = document.createElement('div');
|
||||||
moreButton.dataset.row = row;
|
moreButton.dataset.row = row;
|
||||||
moreButton.dataset.page = page;
|
moreButton.dataset.page = page;
|
||||||
|
moreButton.innerHTML = " ";
|
||||||
moreButton.classList.add("open-button");
|
moreButton.classList.add("open-button");
|
||||||
|
|
||||||
let details = document.createElement('div');
|
let details = document.createElement('div');
|
||||||
details.dataset.row = row;
|
details.dataset.row = row;
|
||||||
details.dataset.page = page;
|
details.dataset.page = page;
|
||||||
details.classList.add("details");
|
details.classList.add("details");
|
||||||
details.innerText = "A LOT OF DETAILS";
|
// details.innerText = "A LOT OF DETAILS";
|
||||||
|
details.innerHTML = "<div>A LOT OF DETAILS</div>"
|
||||||
|
|
||||||
let h1 = document.createElement('div');
|
let h1 = document.createElement('div');
|
||||||
h1.dataset.row = row;
|
h1.dataset.row = row;
|
||||||
|
|
@ -84,12 +103,14 @@ function drawData() {
|
||||||
h4.classList.add("hidden")
|
h4.classList.add("hidden")
|
||||||
details.classList.add("hidden")
|
details.classList.add("hidden")
|
||||||
}
|
}
|
||||||
table.append(moreButton);
|
rowContainer.append(moreButton);
|
||||||
table.append(h1);
|
rowContainer.append(h1);
|
||||||
table.append(h2);
|
rowContainer.append(h2);
|
||||||
table.append(h3);
|
rowContainer.append(h3);
|
||||||
table.append(h4);
|
rowContainer.append(h4);
|
||||||
table.append(details);
|
rowContainer.append(details);
|
||||||
|
|
||||||
|
table.append(rowContainer);
|
||||||
}
|
}
|
||||||
|
|
||||||
addDetailEventListeners();
|
addDetailEventListeners();
|
||||||
|
|
@ -97,16 +118,17 @@ function drawData() {
|
||||||
}
|
}
|
||||||
|
|
||||||
function addDetailEventListeners() {
|
function addDetailEventListeners() {
|
||||||
document.querySelectorAll("#tracking .open-button").forEach(item => {
|
document.querySelectorAll("#tracking .row").forEach(item => {
|
||||||
item.addEventListener('click', (evt) => {
|
item.addEventListener('click', (evt) => {
|
||||||
item.classList.toggle("open");
|
item.classList.toggle("open");
|
||||||
const details = document.evaluate("following-sibling::div[contains(@class, 'details')]", item, null,
|
// const details = document.evaluate("following-sibling::div[contains(@class, 'details')]", item, null,
|
||||||
XPathResult.FIRST_ORDERED_NODE_TYPE).singleNodeValue;
|
// XPathResult.FIRST_ORDERED_NODE_TYPE).singleNodeValue;
|
||||||
|
const details = item.querySelector(".details");
|
||||||
// toggle details panel
|
// toggle details panel
|
||||||
if (details.style.maxHeight) {
|
if (details.style.maxHeight) {
|
||||||
details.style.maxHeight = null;
|
details.style.maxHeight = null;
|
||||||
} else {
|
} else {
|
||||||
details.style.maxHeight = details.scrollHeight + "px";
|
details.style.maxHeight = details.scrollHeight + 18 + "px";
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
@ -114,7 +136,10 @@ function addDetailEventListeners() {
|
||||||
|
|
||||||
function createPagination() {
|
function createPagination() {
|
||||||
let container = document.querySelector("#tracking .pagination");
|
let container = document.querySelector("#tracking .pagination");
|
||||||
|
let paginator = [];
|
||||||
|
|
||||||
|
// only create pagination if necessary
|
||||||
|
if (data.length > itemsPerPage) {
|
||||||
let left = document.createElement('div');
|
let left = document.createElement('div');
|
||||||
left.innerHTML = "«";
|
left.innerHTML = "«";
|
||||||
left.addEventListener('click', (evt) => {
|
left.addEventListener('click', (evt) => {
|
||||||
|
|
@ -130,30 +155,34 @@ function createPagination() {
|
||||||
});
|
});
|
||||||
right.innerHTML = "»";
|
right.innerHTML = "»";
|
||||||
|
|
||||||
container.append(left);
|
paginator.push(left);
|
||||||
for (i = 1; i <= data.length / itemsPerPage; i++) {
|
for (i = 1; i <= Math.ceil(data.length / itemsPerPage); i++) {
|
||||||
let mark = document.createElement('div');
|
let mark = document.createElement('div');
|
||||||
mark.innerText = i;
|
mark.innerText = i;
|
||||||
mark.dataset.pagination = i;
|
mark.dataset.pagination = i;
|
||||||
container.append(mark);
|
paginator.push(mark);
|
||||||
|
|
||||||
mark.addEventListener('click', (evt) => {
|
mark.addEventListener('click', (evt) => {
|
||||||
activatePage(evt.target.innerText);
|
activatePage(evt.target.innerText);
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
container.append(right);
|
paginator.push(right);
|
||||||
|
}
|
||||||
|
container.replaceChildren(...paginator);
|
||||||
}
|
}
|
||||||
|
|
||||||
function activatePage(page) {
|
function activatePage(page) {
|
||||||
let table = document.querySelector('#tracking .table');
|
let table = document.querySelector('#tracking .table');
|
||||||
|
let paginator = document.querySelector('#tracking .pagination');
|
||||||
|
|
||||||
// change active state
|
// change active state (only if paginator is not empty)
|
||||||
document.querySelectorAll("#tracking .pagination div").forEach(item => {
|
if (paginator.hasChildNodes()) {
|
||||||
|
paginator.childNodes.forEach(item => {
|
||||||
item.classList.remove('active');
|
item.classList.remove('active');
|
||||||
});
|
});
|
||||||
document.querySelector(`#tracking .pagination div[data-pagination="${page}"]`).classList.add('active');
|
paginator.querySelector(`div[data-pagination="${page}"]`).classList.add('active');
|
||||||
currentPage = page;
|
currentPage = page;
|
||||||
|
}
|
||||||
|
|
||||||
// hide all rows
|
// hide all rows
|
||||||
table.querySelectorAll('[data-row]').forEach((rowItem) => {
|
table.querySelectorAll('[data-row]').forEach((rowItem) => {
|
||||||
|
|
|
||||||
|
|
@ -4,8 +4,22 @@
|
||||||
grid-template-columns: 2rem repeat(4, auto);
|
grid-template-columns: 2rem repeat(4, auto);
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.hidden {
|
.row {
|
||||||
display: none;
|
display: contents;
|
||||||
|
|
||||||
|
&:hover div {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.open):hover div {
|
||||||
|
background: whitesmoke;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.open {
|
||||||
|
.open-button::after {
|
||||||
|
// content: "\25BC";
|
||||||
|
content: "\02796";
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.open-button {
|
.open-button {
|
||||||
|
|
@ -17,29 +31,59 @@
|
||||||
float: right;
|
float: right;
|
||||||
margin-right: 0.35rem;
|
margin-right: 0.35rem;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
&.open::after {
|
|
||||||
// content: "\25BC";
|
|
||||||
content: "\02796";
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
div {
|
||||||
cursor: pointer;
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
|
||||||
|
&.header {
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
border-bottom-style: solid;
|
||||||
|
border-bottom-color: #0000001f;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.details {
|
.details {
|
||||||
grid-column: 1 / 6;
|
grid-column: 1 / 6;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
padding: 0 18px;
|
// padding: 0 18px;
|
||||||
|
// padding: 0.4rem 0;
|
||||||
|
padding: 0;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
max-height: 0;
|
max-height: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition: max-height 0.2s ease-out;
|
transition: max-height 0.2s ease-out;
|
||||||
|
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
border-bottom-style: solid;
|
||||||
|
border-bottom-color: #0000001f;
|
||||||
|
|
||||||
|
div {
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.page-navigation {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 3rem;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
.pagination {
|
.pagination {
|
||||||
|
margin-right: 2rem;
|
||||||
|
|
||||||
div {
|
div {
|
||||||
color: black;
|
color: black;
|
||||||
float: left;
|
float: left;
|
||||||
|
|
@ -61,4 +105,5 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
58
style.css
58
style.css
|
|
@ -4,44 +4,78 @@
|
||||||
grid-template-columns: 2rem repeat(4, auto);
|
grid-template-columns: 2rem repeat(4, auto);
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
#tracking .table .hidden {
|
#tracking .table .row {
|
||||||
display: none;
|
display: contents;
|
||||||
}
|
}
|
||||||
#tracking .table .open-button::after {
|
#tracking .table .row:hover div {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
#tracking .table .row:not(.open):hover div {
|
||||||
|
background: whitesmoke;
|
||||||
|
}
|
||||||
|
#tracking .table .row.open .open-button::after {
|
||||||
|
content: "➖";
|
||||||
|
}
|
||||||
|
#tracking .table .row .open-button::after {
|
||||||
content: "➕";
|
content: "➕";
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: #000;
|
color: #000;
|
||||||
float: right;
|
float: right;
|
||||||
margin-right: 0.35rem;
|
margin-right: 0.35rem;
|
||||||
}
|
}
|
||||||
#tracking .table .open-button.open::after {
|
#tracking .table div {
|
||||||
content: "➖";
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.5rem 0;
|
||||||
}
|
}
|
||||||
#tracking .table .open-button:hover {
|
#tracking .table div.header {
|
||||||
cursor: pointer;
|
font-weight: bold;
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
border-bottom-style: solid;
|
||||||
|
border-bottom-color: rgba(0, 0, 0, 0.1215686275);
|
||||||
|
}
|
||||||
|
#tracking .table .hidden {
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
#tracking .table .details {
|
#tracking .table .details {
|
||||||
grid-column: 1/6;
|
grid-column: 1/6;
|
||||||
padding: 0 18px;
|
box-sizing: border-box;
|
||||||
|
padding: 0;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
max-height: 0;
|
max-height: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition: max-height 0.2s ease-out;
|
transition: max-height 0.2s ease-out;
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
border-bottom-style: solid;
|
||||||
|
border-bottom-color: rgba(0, 0, 0, 0.1215686275);
|
||||||
}
|
}
|
||||||
#tracking .pagination div {
|
#tracking .table .details div {
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
#tracking .page-navigation {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 3rem;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
#tracking .page-navigation .pagination {
|
||||||
|
margin-right: 2rem;
|
||||||
|
}
|
||||||
|
#tracking .page-navigation .pagination div {
|
||||||
color: black;
|
color: black;
|
||||||
float: left;
|
float: left;
|
||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
transition: background-color 0.3s;
|
transition: background-color 0.3s;
|
||||||
}
|
}
|
||||||
#tracking .pagination div:hover {
|
#tracking .page-navigation .pagination div:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
#tracking .pagination div:hover:not(.active) {
|
#tracking .page-navigation .pagination div:hover:not(.active) {
|
||||||
background-color: #ddd;
|
background-color: #ddd;
|
||||||
}
|
}
|
||||||
#tracking .pagination div.active {
|
#tracking .page-navigation .pagination div.active {
|
||||||
background-color: #4caf50;
|
background-color: #4caf50;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1 +1 @@
|
||||||
{"version":3,"sourceRoot":"","sources":["scss/style.scss"],"names":[],"mappings":";AACI;EACI;EACA;EACA;;AAEA;EACI;;AAIA;EAEI;EACA;EACA;EACA;EACA;;AAGJ;EAEI;;AAGJ;EACI;;AAIR;EACI;EAEA;EACA;EACA;EACA;EACA;;AAKJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;;AAIR;EACI;EACA","file":"style.css"}
|
{"version":3,"sourceRoot":"","sources":["scss/style.scss"],"names":[],"mappings":";AACI;EACI;EACA;EACA;;AAEA;EACI;;AAEA;EACI;;AAGJ;EACI;;AAIA;EAEI;;AAKJ;EAEI;EACA;EACA;EACA;EACA;;AAKZ;EACI;EACA;EACA;EACA;;AAEA;EACI;EAEA;EACA;EACA;;AAIR;EACI;;AAGJ;EACI;EACA;EAIA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACI;;AAKZ;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;;AAIR;EACI;EACA","file":"style.css"}
|
||||||
Loading…
Reference in New Issue