From 5c572a7d897e6ccac732cca69c88b3db353c8b07 Mon Sep 17 00:00:00 2001 From: Rectos VX Date: Sun, 5 May 2024 15:12:30 +0400 Subject: [PATCH] Update: changed JS to new theme system + Darkmode system --- src/main/resources/static/js/darkmode.js | 53 ++----------------- src/main/resources/static/js/homecard.js | 17 +++--- .../static/js/multitool/PdfActionsManager.js | 31 +++-------- src/main/resources/static/js/pipeline.js | 8 +-- 4 files changed, 26 insertions(+), 83 deletions(-) diff --git a/src/main/resources/static/js/darkmode.js b/src/main/resources/static/js/darkmode.js index cb119a8a..3c179d5e 100644 --- a/src/main/resources/static/js/darkmode.js +++ b/src/main/resources/static/js/darkmode.js @@ -8,7 +8,6 @@ var elements = { darkModeIcon: null, searchBar: null, formControls: null, - navbar: null, navIcons: null, navDropdownMenus: null, }; @@ -20,8 +19,6 @@ function getElements() { elements.darkModeIcon = document.getElementById("dark-mode-icon"); elements.searchBar = document.getElementById("searchBar"); elements.formControls = document.querySelectorAll(".form-control"); - elements.navbar = document.querySelectorAll("nav.navbar"); - elements.navIcons = document.querySelectorAll("nav .icon, .navbar-icon"); elements.navDropdownMenus = document.querySelectorAll(".dropdown-menu"); } function setMode(mode) { @@ -42,64 +39,20 @@ function setMode(mode) { if (mode === "on") { if (elements && elements.darkModeIcon) { - elements.darkModeIcon.src = "moon.svg"; - } - if (elements && elements.searchBar) { - elements.searchBar.classList.add("dark-mode-search"); - } - if (elements && elements.formControls) { - elements.formControls.forEach((input) => input.classList.add("bg-dark", "text-white")); - } - if (elements && elements.navbar) { - elements.navbar.forEach((navElement) => { - navElement.classList.remove("navbar-light", "bg-light"); - navElement.classList.add("navbar-dark", "bg-dark"); - }); - } - if (elements && elements.navDropdownMenus) { - elements.navDropdownMenus.forEach((menu) => menu.classList.add("dropdown-menu-dark")); - } - if (elements && elements.navIcons) { - elements.navIcons.forEach((icon) => (icon.style.filter = "invert(1)")); + elements.darkModeIcon.textContent = "dark_mode"; } var tables = document.querySelectorAll(".table"); tables.forEach((table) => { table.classList.add("table-dark"); }); - if (jumbotron) { - jumbotron.classList.add("bg-dark"); - jumbotron.classList.remove("bg-light"); - } } else if (mode === "off") { if (elements && elements.darkModeIcon) { - elements.darkModeIcon.src = "sun.svg"; - } - if (elements && elements.searchBar) { - elements.searchBar.classList.remove("dark-mode-search"); - } - if (elements && elements.formControls) { - elements.formControls.forEach((input) => input.classList.remove("bg-dark", "text-white")); - } - if (elements && elements.navbar) { - elements.navbar.forEach((navElement) => { - navElement.classList.remove("navbar-dark", "bg-dark"); - navElement.classList.add("navbar-light", "bg-light"); - }); - } - if (elements && elements.navDropdownMenus) { - elements.navDropdownMenus.forEach((menu) => menu.classList.remove("dropdown-menu-dark")); - } - if (elements && elements.navIcons) { - elements.navIcons.forEach((icon) => (icon.style.filter = "none")); + elements.darkModeIcon.textContent = "light_mode"; } var tables = document.querySelectorAll(".table-dark"); tables.forEach((table) => { table.classList.remove("table-dark"); }); - if (jumbotron) { - jumbotron.classList.remove("bg-dark"); - jumbotron.classList.add("bg-light"); - } } else if (mode === "rainbow") { if (elements && elements.darkModeIcon) { elements.darkModeIcon.src = "rainbow.svg"; @@ -147,4 +100,4 @@ document.addEventListener("DOMContentLoaded", function () { toggleDarkMode(); }); } -}); +}); \ No newline at end of file diff --git a/src/main/resources/static/js/homecard.js b/src/main/resources/static/js/homecard.js index 8ac2ef44..aacc52aa 100644 --- a/src/main/resources/static/js/homecard.js +++ b/src/main/resources/static/js/homecard.js @@ -23,15 +23,17 @@ function filterCards() { } function toggleFavorite(element) { - var img = element.querySelector("img"); + var span = element.querySelector("span.material-symbols-rounded"); var card = element.closest(".feature-card"); var cardId = card.id; - if (img.src.endsWith("star.svg")) { - img.src = "images/star-fill.svg"; + if (span.classList.contains("no-fill")) { + span.classList.remove("no-fill"); + span.classList.add("fill"); card.classList.add("favorite"); localStorage.setItem(cardId, "favorite"); } else { - img.src = "images/star.svg"; + span.classList.remove("fill"); + span.classList.add("no-fill"); card.classList.remove("favorite"); localStorage.removeItem(cardId); } @@ -40,6 +42,7 @@ function toggleFavorite(element) { filterCards(); } + function reorderCards() { var container = document.querySelector(".features-container"); var cards = Array.from(container.getElementsByClassName("feature-card")); @@ -58,13 +61,15 @@ function reorderCards() { container.appendChild(card); }); } + function initializeCards() { var cards = document.querySelectorAll(".feature-card"); cards.forEach(function (card) { var cardId = card.id; - var img = card.querySelector(".favorite-icon img"); + var span = card.querySelector(".favorite-icon span.material-symbols-rounded"); if (localStorage.getItem(cardId) === "favorite") { - img.src = "images/star-fill.svg"; + span.classList.remove("no-fill"); + span.classList.add("fill"); card.classList.add("favorite"); } }); diff --git a/src/main/resources/static/js/multitool/PdfActionsManager.js b/src/main/resources/static/js/multitool/PdfActionsManager.js index 163dff3a..8135bed3 100644 --- a/src/main/resources/static/js/multitool/PdfActionsManager.js +++ b/src/main/resources/static/js/multitool/PdfActionsManager.js @@ -92,44 +92,35 @@ class PdfActionsManager { const rightDirection = this.pageDirection === "rtl" ? "left" : "right"; const buttonContainer = document.createElement("div"); - buttonContainer.classList.add("pdf-actions_button-container", "hide-on-drag"); + buttonContainer.classList.add("btn-group", "pdf-actions_button-container", "hide-on-drag"); const moveUp = document.createElement("button"); moveUp.classList.add("pdf-actions_move-left-button", "btn", "btn-secondary"); - moveUp.innerHTML = ``; + moveUp.innerHTML = `arrow_${leftDirection}_alt`; moveUp.onclick = this.moveUpButtonCallback; buttonContainer.appendChild(moveUp); const moveDown = document.createElement("button"); moveDown.classList.add("pdf-actions_move-right-button", "btn", "btn-secondary"); - moveDown.innerHTML = ``; + moveDown.innerHTML = `arrow_${rightDirection}_alt`; moveDown.onclick = this.moveDownButtonCallback; buttonContainer.appendChild(moveDown); const rotateCCW = document.createElement("button"); rotateCCW.classList.add("btn", "btn-secondary"); - rotateCCW.innerHTML = ` - - - `; + rotateCCW.innerHTML = `rotate_left`; rotateCCW.onclick = this.rotateCCWButtonCallback; buttonContainer.appendChild(rotateCCW); const rotateCW = document.createElement("button"); rotateCW.classList.add("btn", "btn-secondary"); - rotateCW.innerHTML = ` - - - `; + rotateCW.innerHTML = `rotate_right`; rotateCW.onclick = this.rotateCWButtonCallback; buttonContainer.appendChild(rotateCW); const deletePage = document.createElement("button"); deletePage.classList.add("btn", "btn-danger"); - deletePage.innerHTML = ` - - - `; + deletePage.innerHTML = `delete`; deletePage.onclick = this.deletePageButtonCallback; buttonContainer.appendChild(deletePage); @@ -145,10 +136,7 @@ class PdfActionsManager { const insertFileButton = document.createElement("button"); insertFileButton.classList.add("btn", "btn-primary", "pdf-actions_insert-file-button"); - insertFileButton.innerHTML = ` - - - `; + insertFileButton.innerHTML = `add`; insertFileButton.onclick = this.insertFileButtonCallback; insertFileButtonContainer.appendChild(insertFileButton); @@ -164,10 +152,7 @@ class PdfActionsManager { const insertFileButtonRight = document.createElement("button"); insertFileButtonRight.classList.add("btn", "btn-primary", "pdf-actions_insert-file-button"); - insertFileButtonRight.innerHTML = ` - - - insertFileButtonRight`; + insertFileButtonRight.innerHTML = `add`; insertFileButtonRight.onclick = () => addPdfs(); insertFileButtonRightContainer.appendChild(insertFileButtonRight); diff --git a/src/main/resources/static/js/pipeline.js b/src/main/resources/static/js/pipeline.js index afe1d4d7..1c57dfd9 100644 --- a/src/main/resources/static/js/pipeline.js +++ b/src/main/resources/static/js/pipeline.js @@ -251,14 +251,14 @@ document.getElementById("addOperationBtn").addEventListener("click", function ()
${selectedOperation}
- - + + - +
`;