A Basic HTML5 Template

commit f8ef070aad59c4af4b542a8bd077e820b7ca863a Author: Hlars Date: Sun May 7 22:05:00 2023 +0200 init diff --git a/index.html b/index.html new file mode 100644 index 0000000..efd3ffb --- /dev/null +++ b/index.html @@ -0,0 +1,58 @@ + + + + + + + + + A Basic HTML5 Template + + + + + + + + + + + + + +

+ + + + +

dfjaldfjaf

+ +

+ + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..e018df5 --- /dev/null +++ b/script.js @@ -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 = "«"; + 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 = "»"; + + 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'); + }) +} \ No newline at end of file diff --git a/scss/style.scss b/scss/style.scss new file mode 100644 index 0000000..c7f49ab --- /dev/null +++ b/scss/style.scss @@ -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; + } + } + } +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..fdc249c --- /dev/null +++ b/style.css @@ -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 */ diff --git a/style.css.map b/style.css.map new file mode 100644 index 0000000..1cce80f --- /dev/null +++ b/style.css.map @@ -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"} \ No newline at end of file