Skip to content

Commit

Permalink
Merge pull request #9 from GooglyBlox/master
Browse files Browse the repository at this point in the history
  • Loading branch information
@SuperFola
SuperFola authored Aug 16, 2024
2 parents b7b9769 + 6d5f3c6 commit dbe8195
Show file tree
Hide file tree
Showing 5 changed files with 151 additions and 13 deletions.
52 changes: 52 additions & 0 deletions assets/css/dark-mode.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
body.dark-mode {
background-color: #333;
color: #f0f0f0;
}

.dark-mode .navbar {
background-color: #222 !important;
}

.dark-mode .navbar-brand,
.dark-mode .nav-link {
color: #f0f0f0 !important;
}

.dark-mode .table {
color: #f0f0f0;
}

.dark-mode .modal-content {
background-color: #333;
color: #f0f0f0;
}

.dark-mode .btn-outline-secondary {
color: #f0f0f0;
border-color: #f0f0f0;
}

.dark-mode .btn-outline-secondary:hover {
background-color: #f0f0f0;
color: #333;
}

.dark-mode #darkModeToggle {
background-color: #f0f0f0;
color: #333;
}

.dark-mode .form-select,
.dark-mode .form-control {
background-color: #444;
color: #f0f0f0;
border-color: #555;
}

.dark-mode .form-select option {
background-color: #444;
}

.dark-mode .table th[scope="row"] {
color: #333 !important;
}
28 changes: 28 additions & 0 deletions assets/js/dark-mode.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
function toggleDarkMode() {
document.body.classList.toggle('dark-mode');
const darkModeEnabled = document.body.classList.contains('dark-mode');
localStorage.setItem('darkMode', darkModeEnabled);
updateDarkModeButton(darkModeEnabled);
}

function updateDarkModeButton(darkModeEnabled) {
const button = document.getElementById('darkModeToggle');
if (darkModeEnabled) {
button.innerHTML = '<i class="fas fa-sun"></i> Light Mode';
} else {
button.innerHTML = '<i class="fas fa-moon"></i> Dark Mode';
}
}

function initDarkMode() {
const darkModeEnabled = localStorage.getItem('darkMode') === 'true';
if (darkModeEnabled) {
document.body.classList.add('dark-mode');
}
updateDarkModeButton(darkModeEnabled);
}

document.addEventListener('DOMContentLoaded', () => {
initDarkMode();
document.getElementById('darkModeToggle').addEventListener('click', toggleDarkMode);
});
39 changes: 38 additions & 1 deletion assets/js/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,37 @@
function generateTierNameInputs(count) {
const tierNamesContainer = document.getElementById('tierNames');
tierNamesContainer.innerHTML = '';

for (let i = 0; i < count; i++) {
const inputGroup = document.createElement('div');
inputGroup.classList.add('input-group', 'mb-2');

const input = document.createElement('input');
input.type = 'text';
input.classList.add('form-control');
input.id = `tierName${i}`;
input.placeholder = `Tier ${i + 1} name`;

input.addEventListener('input', () => {
updateTierName(i, input.value);
});

inputGroup.appendChild(input);
tierNamesContainer.appendChild(inputGroup);
}
updateTierNames();
}

function updateTierName(index, newName) {
const rows = document.querySelectorAll('#tableBody tr');
if (rows[index]) {
const tierHeader = rows[index].querySelector('th');
if (tierHeader) {
tierHeader.innerText = newName;
}
}
}

document.onreadystatechange = () => {
if (document.readyState !== 'complete') {
return;
Expand All @@ -7,6 +41,7 @@ document.onreadystatechange = () => {

selectRowCount.addEventListener('change', (evt) => {
const selected = parseInt(evt.target.value);
generateTierNameInputs(selected);
generateTable('tableBody', selected);
});

Expand All @@ -15,10 +50,12 @@ document.onreadystatechange = () => {

let option = document.createElement('option');
option.setAttribute('value', position.toString());
option.innerText = `${name} - ${position}`;
option.innerText = `${position}`;
selectRowCount.appendChild(option);
});
selectRowCount.selectedIndex = tiers.length - 1;

generateTierNameInputs(tiers.length);
generateTable('tableBody');

document.getElementById('btn-export').addEventListener('click', export2image);
Expand Down
32 changes: 22 additions & 10 deletions assets/js/tier-table.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const tiers = [
'E',
'F',
'G',
]
];

const spacing = () => {
let span = document.createElement('span');
Expand Down Expand Up @@ -49,6 +49,7 @@ function moveRowUp(row_id, table_id) {

row.parentElement.removeChild(row);
table.insertBefore(row, previous);
updateTierNames();
}

function moveRowDown(row_id, table_id) {
Expand All @@ -63,10 +64,22 @@ function moveRowDown(row_id, table_id) {
row.parentElement.removeChild(row);
table.appendChild(row);
}
updateTierNames();
}

function updateTierNames() {
const rows = document.querySelectorAll('#tableBody tr');
rows.forEach((row, index) => {
const tierHeader = row.querySelector('th');
const tierNameInput = document.getElementById(`tierName${index}`);
if (tierHeader && tierNameInput) {
tierNameInput.value = tierHeader.innerText;
}
});
}

function addElementInRow(row_id, table_id) {
const tier = tiers.filter((value) => value.toLowerCase() === row_id.replace(/^tier-/, ''))[0];
const tier = document.getElementById(row_id).firstChild.innerText;
document.getElementById('addContentModalTitle').innerText = `Add content to tier ${tier}`;

const tier_color = window.getComputedStyle(document.getElementById(row_id).firstChild)
Expand Down Expand Up @@ -111,20 +124,18 @@ function createSettingsTd(row_id, table_id) {
return container;
}

function generateTable(identifier, count=-1) {
function generateTable(identifier, count = -1) {
if (count === -1) {
count = tiers.length;
}

const table_body = document.getElementById(identifier);
table_body.innerHTML = '';

tiers.forEach((value, index) => {
// early return if we displayed enough
if (index >= count)
return;

const row_name = value.toLowerCase();
for (let i = 0; i < count; i++) {
const tierNameInput = document.getElementById(`tierName${i}`);
const value = tierNameInput && tierNameInput.value !== '' ? tierNameInput.value : tiers[i];
const row_name = tiers[i].toLowerCase();
const row_identifier = `tier-${row_name}`;

const tier_th = document.createElement('th');
Expand Down Expand Up @@ -175,5 +186,6 @@ function generateTable(identifier, count=-1) {
row.appendChild(settings);

table_body.appendChild(row);
});
}
updateTierNames();
}
13 changes: 11 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,15 @@

<link href="./assets/css/colors.css" rel="stylesheet">
<link href="./assets/css/custom.css" rel="stylesheet">
<link href="./assets/css/dark-mode.css" rel="stylesheet">

<script src="./assets/js/html2canvas.min.js" defer></script>
<script src="./assets/js/utils.js" defer></script>
<script src="./assets/js/export2image.js" defer></script>
<script src="./assets/js/saveModal.js" defer></script>
<script src="./assets/js/tier-table.js" defer></script>
<script src="./assets/js/main.js" defer></script>
<script src="./assets/js/dark-mode.js" defer></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
Expand Down Expand Up @@ -50,6 +52,11 @@
</a>
</li>
</ul>
<div class="nav-item ms-auto">
<button id="darkModeToggle" class="btn btn-outline-secondary">
<i class="fas fa-moon"></i> Dark Mode
</button>
</div>
</div>
</div>
</nav>
Expand All @@ -76,6 +83,9 @@
<div class="w-max-25 p-2">
Number of rows
<select class="form-select" aria-label="Row count" id="selectRowCount"></select>
<div id="tierNames" class="mt-3">
<!-- Tier name inputs will be dynamically added here -->
</div>
<hr>
<p>Click on an image to remove it.</p>
<p>Drag and drop images between tiers to reorder them.</p>
Expand Down Expand Up @@ -120,5 +130,4 @@ <h5 class="modal-title" id="addContentModalTitle"></h5>
</div>
</div>
</body>
</html>

</html>

0 comments on commit dbe8195

Please sign in to comment.