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

init

Browse Source
This commit is contained in:
Hlars 2023-05-07 22:05:00 +02:00
commit f8ef070aad
5 changed files with 338 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
index.html Normal file
View File

@ -0,0 +1,58 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>A Basic HTML5 Template</title>
<meta name="description" content="A simple HTML5 Template for new projects.">
<meta name="author" content="SitePoint">
<meta property="og:title" content="A Basic HTML5 Template">
<meta property="og:type" content="website">
<meta property="og:description" content="A simple HTML5 Template for new projects.">
<link rel="stylesheet" href="style.css?v=1.0">
</head>
<body>
<div id="tracking">
<div class="table">
<div></div>
<div class="header">H1</div>
<div class="header">H2</div>
<div class="header">H3</div>
<div class="header">H4</div>
<div class="open-button"></div>
<div>dfjaldfjaf</div>
<div>dfjaldfjaf</div>
<div>dfjaldfjaf</div>
<div>dfjaldfjaf</div>
<div class="details">dfjaldfjaf</div>
<div class="open-button open"></div>
<div>dfjaldfjaf</div>
<div>dfjaldfjaf</div>
</div>
<div>
<div class="pagination"></div>
<div>
<select class="items-per-page">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
</div>
</div>
<!-- your content here... -->
<script src="script.js"></script>
</body>
</html>

166
script.js Normal file
View File

@ -0,0 +1,166 @@
console.log("HI ME");
let data = [
{ h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
{ h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
{ h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
{ h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
{ h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
{ h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
{ h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
{ h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
{ h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
{ h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
{ h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
{ h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
]
for (i = 0; i < 1000; i++) {
data[i] = {
h1: `bla ${i}`, h2: `uh ${i}`, h3: `ah ${i}`, h4: `bah ${i}`
};
}
let itemsPerPage = 10;
let currentPage = 1;
drawData();
addItemsPerPageEventListener();
function addItemsPerPageEventListener() {
document.querySelector("#tracking .items-per-page").addEventListener('change', (evt) => {
console.log(evt.target.value);
});
}
function drawData() {
let table = document.querySelector("#tracking .table");
let lastHeader = [...table.querySelectorAll("#tracking .table .header")].at(-1);
// remove current data
let nextSibling = lastHeader.nextSibling;
while (nextSibling) {
nextSibling.remove();
nextSibling = lastHeader.nextSibling;
}
for (let [index, item] of data.entries()) {
let row = index + 1;
let page = Math.floor((row - 1) / itemsPerPage) + 1;
let moreButton = document.createElement('div');
moreButton.dataset.row = row;
moreButton.dataset.page = page;
moreButton.classList.add("open-button");
let details = document.createElement('div');
details.dataset.row = row;
details.dataset.page = page;
details.classList.add("details");
details.innerText = "A LOT OF DETAILS";
let h1 = document.createElement('div');
h1.dataset.row = row;
h1.dataset.page = page;
h1.innerText = item.h1;
let h2 = document.createElement('div');
h2.dataset.row = row;
h2.dataset.page = page;
h2.innerText = item.h2;
let h3 = document.createElement('div');
h3.dataset.row = row;
h3.dataset.page = page;
h3.innerText = item.h3;
let h4 = document.createElement('div');
h4.dataset.row = row;
h4.dataset.page = page;
h4.innerText = item.h4;
if (row > itemsPerPage) {
moreButton.classList.add("hidden")
h1.classList.add("hidden")
h2.classList.add("hidden")
h3.classList.add("hidden")
h4.classList.add("hidden")
details.classList.add("hidden")
}
table.append(moreButton);
table.append(h1);
table.append(h2);
table.append(h3);
table.append(h4);
table.append(details);
}
addDetailEventListeners();
createPagination();
}
function addDetailEventListeners() {
document.querySelectorAll("#tracking .open-button").forEach(item => {
item.addEventListener('click', (evt) => {
item.classList.toggle("open");
const details = document.evaluate("following-sibling::div[contains(@class, 'details')]", item, null,
XPathResult.FIRST_ORDERED_NODE_TYPE).singleNodeValue;
// toggle details panel
if (details.style.maxHeight) {
details.style.maxHeight = null;
} else {
details.style.maxHeight = details.scrollHeight + "px";
}
});
});
}
function createPagination() {
let container = document.querySelector("#tracking .pagination");
let left = document.createElement('div');
left.innerHTML = "&laquo";
left.addEventListener('click', (evt) => {
let activatedPage = parseInt(currentPage);
if (activatedPage > 1)
activatePage(activatedPage - 1);
});
let right = document.createElement('div');
right.addEventListener('click', (evt) => {
let activatedPage = parseInt(currentPage);
if (activatedPage < data.length / itemsPerPage)
activatePage(activatedPage + 1);
});
right.innerHTML = "&raquo;";
container.append(left);
for (i = 1; i <= data.length / itemsPerPage; i++) {
let mark = document.createElement('div');
mark.innerText = i;
mark.dataset.pagination = i;
container.append(mark);
mark.addEventListener('click', (evt) => {
activatePage(evt.target.innerText);
})
}
container.append(right);
}
function activatePage(page) {
let table = document.querySelector('#tracking .table');
// change active state
document.querySelectorAll("#tracking .pagination div").forEach(item => {
item.classList.remove('active');
});
document.querySelector(`#tracking .pagination div[data-pagination="${page}"]`).classList.add('active');
currentPage = page;
// hide all rows
table.querySelectorAll('[data-row]').forEach((rowItem) => {
rowItem.classList.add('hidden');
});
// display rows of selected page
table.querySelectorAll(`[data-page="${page}"]`).forEach(rowItem => {
rowItem.classList.remove('hidden');
})
}

64
scss/style.scss Normal file
View File

@ -0,0 +1,64 @@
#tracking {
.table {
display: grid;
grid-template-columns: 2rem repeat(4, auto);
align-items: center;
.hidden {
display: none;
}
.open-button {
&::after {
// content: "\25B6";
content: "\02795";
font-size: 13px;
color: #000;
float: right;
margin-right: 0.35rem;
}
&.open::after {
// content: "\25BC";
content: "\02796";
}
&:hover {
cursor: pointer;
}
}
.details {
grid-column: 1 / 6;
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
}
.pagination {
div {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color 0.3s;
&:hover {
cursor: pointer;
&:not(.active) {
background-color: #ddd;
}
}
&.active {
background-color: #4caf50;
color: white;
}
}
}
}

49
style.css Normal file
View File

@ -0,0 +1,49 @@
@charset "UTF-8";
#tracking .table {
display: grid;
grid-template-columns: 2rem repeat(4, auto);
align-items: center;
}
#tracking .table .hidden {
display: none;
}
#tracking .table .open-button::after {
content: "➕";
font-size: 13px;
color: #000;
float: right;
margin-right: 0.35rem;
}
#tracking .table .open-button.open::after {
content: "➖";
}
#tracking .table .open-button:hover {
cursor: pointer;
}
#tracking .table .details {
grid-column: 1/6;
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
#tracking .pagination div {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color 0.3s;
}
#tracking .pagination div:hover {
cursor: pointer;
}
#tracking .pagination div:hover:not(.active) {
background-color: #ddd;
}
#tracking .pagination div.active {
background-color: #4caf50;
color: white;
}
/*# sourceMappingURL=style.css.map */

1
style.css.map Normal file
View File

@ -0,0 +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"}