Hlars/html-test
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

changes

Browse Source
This commit is contained in:
Hlars 2023-05-08 21:24:03 +02:00
parent f8ef070aad
commit ba3d62a4c0
5 changed files with 215 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -22,7 +22,7 @@
<div id="tracking"> <div id="tracking">
<div class="table"> <div class="table">
<div></div> <div class="header">&nbsp;</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
View File

@ -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 = "&nbsp;";
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 = "&laquo"; left.innerHTML = "&laquo";
left.addEventListener('click', (evt) => { left.addEventListener('click', (evt) => {
@ -130,30 +155,34 @@ function createPagination() {
}); });
right.innerHTML = "&raquo;"; right.innerHTML = "&raquo;";
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) => {

63
scss/style.scss
View File

@ -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;
@ -62,3 +106,4 @@
} }
} }
} }
}

58
style.css
View File

@ -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;
} }

2
style.css.map
View File

@ -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"}