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 class="table">
<div></div>
<div class="header">&nbsp;</div>
<div class="header">H1</div>
<div class="header">H2</div>
<div class="header">H3</div>
@ -38,7 +38,7 @@
<div>dfjaldfjaf</div>
</div>
<div>
<div class="page-navigation">
<div class="pagination"></div>
<div>
<select class="items-per-page">

141
script.js
View File

@ -1,23 +1,23 @@
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" },
{ h1: "bla", h2: "üh", h3: "ah", h4: "bah" },
{ h1: "bla", h2: "üh", h3: "ah", h4: "bah" },
{ h1: "bla", h2: "üh", h3: "ah", h4: "bah" },
{ h1: "bla", h2: "üh", h3: "ah", h4: "bah" },
{ h1: "bla", h2: "üh", h3: "ah", h4: "bah" },
{ h1: "bla", h2: "üh", h3: "ah", h4: "bah" },
{ h1: "bla", h2: "üh", h3: "ah", h4: "bah" },
{ h1: "bla", h2: "üh", h3: "ah", h4: "bah" },
{ h1: "bla", h2: "üh", h3: "ah", h4: "bah" },
{ h1: "bla", h2: "üh", h3: "ah", h4: "bah" },
{ h1: "bla", h2: "üh", h3: "ah", h4: "bah" },
{ h1: "bla", h2: "üh", h3: "ah", h4: "bah" },
]
for (i = 0; i < 1000; 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() {
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 page = Math.floor((row - 1) / itemsPerPage) + 1;
let rowContainer = document.createElement('div');
rowContainer.classList.add("row");
let moreButton = document.createElement('div');
moreButton.dataset.row = row;
moreButton.dataset.page = page;
moreButton.innerHTML = "&nbsp;";
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";
// details.innerText = "A LOT OF DETAILS";
details.innerHTML = "<div>A LOT OF DETAILS</div>"
let h1 = document.createElement('div');
h1.dataset.row = row;
@ -84,12 +103,14 @@ function drawData() {
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);
rowContainer.append(moreButton);
rowContainer.append(h1);
rowContainer.append(h2);
rowContainer.append(h3);
rowContainer.append(h4);
rowContainer.append(details);
table.append(rowContainer);
}
addDetailEventListeners();
@ -97,16 +118,17 @@ function drawData() {
}
function addDetailEventListeners() {
document.querySelectorAll("#tracking .open-button").forEach(item => {
document.querySelectorAll("#tracking .row").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;
// const details = document.evaluate("following-sibling::div[contains(@class, 'details')]", item, null,
// XPathResult.FIRST_ORDERED_NODE_TYPE).singleNodeValue;
const details = item.querySelector(".details");
// toggle details panel
if (details.style.maxHeight) {
details.style.maxHeight = null;
} else {
details.style.maxHeight = details.scrollHeight + "px";
details.style.maxHeight = details.scrollHeight + 18 + "px";
}
});
});
@ -114,46 +136,53 @@ function addDetailEventListeners() {
function createPagination() {
let container = document.querySelector("#tracking .pagination");
let paginator = [];
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;";
// only create pagination if necessary
if (data.length > itemsPerPage) {
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);
paginator.push(left);
for (i = 1; i <= Math.ceil(data.length / itemsPerPage); i++) {
let mark = document.createElement('div');
mark.innerText = i;
mark.dataset.pagination = i;
paginator.push(mark);
mark.addEventListener('click', (evt) => {
activatePage(evt.target.innerText);
})
mark.addEventListener('click', (evt) => {
activatePage(evt.target.innerText);
})
}
paginator.push(right);
}
container.append(right);
container.replaceChildren(...paginator);
}
function activatePage(page) {
let table = document.querySelector('#tracking .table');
let paginator = document.querySelector('#tracking .pagination');
// 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;
// change active state (only if paginator is not empty)
if (paginator.hasChildNodes()) {
paginator.childNodes.forEach(item => {
item.classList.remove('active');
});
paginator.querySelector(`div[data-pagination="${page}"]`).classList.add('active');
currentPage = page;
}
// hide all rows
table.querySelectorAll('[data-row]').forEach((rowItem) => {

117
scss/style.scss
View File

@ -4,60 +4,105 @@
grid-template-columns: 2rem repeat(4, auto);
align-items: center;
.row {
display: contents;
&:hover div {
cursor: pointer;
}
&:not(.open):hover div {
background: whitesmoke;
}
&.open {
.open-button::after {
// content: "\25BC";
content: "\02796";
}
}
.open-button {
&::after {
// content: "\25B6";
content: "\02795";
font-size: 13px;
color: #000;
float: right;
margin-right: 0.35rem;
}
}
}
div {
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;
}
.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;
box-sizing: border-box;
padding: 0 18px;
// padding: 0 18px;
// padding: 0.4rem 0;
padding: 0;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #0000001f;
div {
padding: 2rem;
}
}
}
.pagination {
div {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color 0.3s;
.page-navigation {
display: flex;
margin-top: 3rem;
justify-content: flex-end;
align-items: center;
&:hover {
cursor: pointer;
.pagination {
margin-right: 2rem;
&:not(.active) {
background-color: #ddd;
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;
&.active {
background-color: #4caf50;
color: white;
}
}
}
}

58
style.css
View File

@ -4,44 +4,78 @@
grid-template-columns: 2rem repeat(4, auto);
align-items: center;
}
#tracking .table .hidden {
display: none;
#tracking .table .row {
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: "➕";
font-size: 13px;
color: #000;
float: right;
margin-right: 0.35rem;
}
#tracking .table .open-button.open::after {
content: "➖";
#tracking .table div {
position: relative;
display: flex;
align-items: center;
padding: 0.5rem 0;
}
#tracking .table .open-button:hover {
cursor: pointer;
#tracking .table div.header {
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 {
grid-column: 1/6;
padding: 0 18px;
box-sizing: border-box;
padding: 0;
background-color: white;
max-height: 0;
overflow: hidden;
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;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color 0.3s;
}
#tracking .pagination div:hover {
#tracking .page-navigation .pagination div:hover {
cursor: pointer;
}
#tracking .pagination div:hover:not(.active) {
#tracking .page-navigation .pagination div:hover:not(.active) {
background-color: #ddd;
}
#tracking .pagination div.active {
#tracking .page-navigation .pagination div.active {
background-color: #4caf50;
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"}