Skip to content

Commit

Permalink
Convert script to module
Browse files Browse the repository at this point in the history
  • Loading branch information
@agatemosu
agatemosu committed Jul 24, 2024
1 parent aa1a1f3 commit e3f2dcf
Show file tree
Hide file tree
Showing 2 changed files with 88 additions and 138 deletions.
152 changes: 39 additions & 113 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<title>Tier list creator</title>
<link rel="icon" href="./assets/icon.svg" />
<link rel="stylesheet" href="./styles/main.css" />
<script defer src="./script.js"></script>
<script src="./script.js" type="module"></script>

<link rel="preload" href="./assets/check.svg" as="image" />
<style id="dynamic-styles"></style>
Expand All @@ -24,7 +24,7 @@
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
</head>
<body>
<div id="blackout" data-visibility="hidden" onclick="hideBlackout()"></div>
<div id="blackout" data-visibility="hidden"></div>

<main>
<div class="row">
Expand All @@ -42,25 +42,13 @@
<div class="tier-options" data-html2canvas-ignore>
<div class="options-container">
<div class="option delete">
<img
src="./assets/trash.svg"
alt="Delete"
onclick="deleteRow(this)"
/>
<img src="./assets/trash.svg" alt="Delete" />
</div>
<div class="option">
<img
src="./assets/chevron-up.svg"
alt="Up"
onclick="moveRow(this, -1)"
/>
<div class="option up">
<img src="./assets/chevron-up.svg" alt="Up" />
</div>
<div class="option">
<img
src="./assets/chevron-down.svg"
alt="Down"
onclick="moveRow(this, 1)"
/>
<div class="option down">
<img src="./assets/chevron-down.svg" alt="Down" />
</div>
</div>
</div>
Expand All @@ -81,25 +69,13 @@
<div class="tier-options" data-html2canvas-ignore>
<div class="options-container">
<div class="option delete">
<img
src="./assets/trash.svg"
alt="Delete"
onclick="deleteRow(this)"
/>
<img src="./assets/trash.svg" alt="Delete" />
</div>
<div class="option">
<img
src="./assets/chevron-up.svg"
alt="Up"
onclick="moveRow(this, -1)"
/>
<div class="option up">
<img src="./assets/chevron-up.svg" alt="Up" />
</div>
<div class="option">
<img
src="./assets/chevron-down.svg"
alt="Down"
onclick="moveRow(this, 1)"
/>
<div class="option down">
<img src="./assets/chevron-down.svg" alt="Down" />
</div>
</div>
</div>
Expand All @@ -120,25 +96,13 @@
<div class="tier-options" data-html2canvas-ignore>
<div class="options-container">
<div class="option delete">
<img
src="./assets/trash.svg"
alt="Delete"
onclick="deleteRow(this)"
/>
<img src="./assets/trash.svg" alt="Delete" />
</div>
<div class="option">
<img
src="./assets/chevron-up.svg"
alt="Up"
onclick="moveRow(this, -1)"
/>
<div class="option up">
<img src="./assets/chevron-up.svg" alt="Up" />
</div>
<div class="option">
<img
src="./assets/chevron-down.svg"
alt="Down"
onclick="moveRow(this, 1)"
/>
<div class="option down">
<img src="./assets/chevron-down.svg" alt="Down" />
</div>
</div>
</div>
Expand All @@ -159,25 +123,13 @@
<div class="tier-options" data-html2canvas-ignore>
<div class="options-container">
<div class="option delete">
<img
src="./assets/trash.svg"
alt="Delete"
onclick="deleteRow(this)"
/>
<img src="./assets/trash.svg" alt="Delete" />
</div>
<div class="option">
<img
src="./assets/chevron-up.svg"
alt="Up"
onclick="moveRow(this, -1)"
/>
<div class="option up">
<img src="./assets/chevron-up.svg" alt="Up" />
</div>
<div class="option">
<img
src="./assets/chevron-down.svg"
alt="Down"
onclick="moveRow(this, 1)"
/>
<div class="option down">
<img src="./assets/chevron-down.svg" alt="Down" />
</div>
</div>
</div>
Expand All @@ -198,25 +150,13 @@
<div class="tier-options" data-html2canvas-ignore>
<div class="options-container">
<div class="option delete">
<img
src="./assets/trash.svg"
alt="Delete"
onclick="deleteRow(this)"
/>
<img src="./assets/trash.svg" alt="Delete" />
</div>
<div class="option">
<img
src="./assets/chevron-up.svg"
alt="Up"
onclick="moveRow(this, -1)"
/>
<div class="option up">
<img src="./assets/chevron-up.svg" alt="Up" />
</div>
<div class="option">
<img
src="./assets/chevron-down.svg"
alt="Down"
onclick="moveRow(this, 1)"
/>
<div class="option down">
<img src="./assets/chevron-down.svg" alt="Down" />
</div>
</div>
</div>
Expand All @@ -237,61 +177,47 @@
<div class="tier-options" data-html2canvas-ignore>
<div class="options-container">
<div class="option delete">
<img
src="./assets/trash.svg"
alt="Delete"
onclick="deleteRow(this)"
/>
<img src="./assets/trash.svg" alt="Delete" />
</div>
<div class="option">
<img
src="./assets/chevron-up.svg"
alt="Up"
onclick="moveRow(this, -1)"
/>
<div class="option up">
<img src="./assets/chevron-up.svg" alt="Up" />
</div>
<div class="option">
<img
src="./assets/chevron-down.svg"
alt="Down"
onclick="moveRow(this, 1)"
/>
<div class="option down">
<img src="./assets/chevron-down.svg" alt="Down" />
</div>
</div>
</div>
</div>
</main>

<div class="buttons-container">
<button class="button" type="button" onclick="addRow()">New tier</button>
<button type="button" class="button" id="new-tier">New tier</button>

<button class="button" type="button" onclick="selectImages()">
<button type="button" class="button" id="select-images">
Select images
</button>

<input type="checkbox" id="square-img" onchange="dynamicStyle(this)" />
<input type="checkbox" class="dynamic-style" id="square-img" />
<label for="square-img">Square images</label>

<button class="button" type="button" onclick="exportImage()">
<button type="button" class="button" id="export-image">
Export image
</button>
</div>

<div id="images-bar" class="images-bar sort"></div>
<div class="images-bar sort" id="images-bar"></div>

<div
id="export-container"
class="export-container"
id="export-container"
data-visibility="hidden"
>
<div class="exported-image-container">
<img id="exported-image" alt="Exported image" />
</div>

<div class="export-button-container">
<button class="button" type="button" onclick="saveImage()">
Save image
</button>
<button type="button" class="button" id="save-image">Save image</button>
</div>
</div>
</body>
Expand Down
74 changes: 49 additions & 25 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,18 +20,25 @@ const exportContainer = document.querySelector("#export-container");
const exportedImage = document.querySelector("#exported-image");
const blackout = document.querySelector("#blackout");

document.querySelectorAll(".tooltip").forEach((tooltip, index) => {
const defaultColor = defaultColors[index];
const colorPicker = tooltip.querySelector(".color-picker");

createColorPicker(colorPicker, tooltip.parentNode, defaultColor);
document.querySelector("#new-tier").onclick = () => addRow();
document.querySelector("#select-images").onclick = () => selectImages();
document.querySelector("#export-image").onclick = () => exportImage();
document.querySelector("#save-image").onclick = () => saveImage();
blackout.onclick = () => hideBlackout();

document.querySelectorAll(".row").forEach((row, index) => {
addRowListeners(row, defaultColors[index]);
});

for (const checkbox of document.querySelectorAll(".dynamic-style")) {
checkbox.addEventListener("change", () => dynamicStyle(checkbox));
}

document.addEventListener(
"touchmove",
(event) => {
(e) => {
if (!scrollable) {
event.preventDefault();
e.preventDefault();
}
},
{
Expand Down Expand Up @@ -79,6 +86,8 @@ function createColorPicker(colorPicker, tierLabel, defaultColor) {

pickr.hide();
});

return pickr;
}

function addRow(tierName = "New tier", defaultColor = clearColor) {
Expand Down Expand Up @@ -120,29 +129,24 @@ function addRow(tierName = "New tier", defaultColor = clearColor) {
const deleteImage = document.createElement("img");
deleteImage.src = "assets/trash.svg";
deleteImage.alt = "Delete";
deleteImage.setAttribute("onclick", "deleteRow(this)");

const upButton = document.createElement("div");
upButton.className = "option";
upButton.className = "option up";

const upImage = document.createElement("img");
upImage.src = "assets/chevron-up.svg";
upImage.alt = "Up";
upImage.setAttribute("onclick", "moveRow(this, -1)");

const downButton = document.createElement("div");
downButton.className = "option";
downButton.className = "option down";

const downImage = document.createElement("img");
downImage.src = "assets/chevron-down.svg";
downImage.alt = "Down";
downImage.setAttribute("onclick", "moveRow(this, 1)");

// Add divs to the row / main container
tooltip.appendChild(colorPicker);

createColorPicker(colorPicker, tierLabelDiv, defaultColor);

tierLabelDiv.appendChild(paragraph);
tierLabelDiv.appendChild(tooltip);

Expand All @@ -162,25 +166,45 @@ function addRow(tierName = "New tier", defaultColor = clearColor) {

mainContainer.appendChild(newRow);

addRowListeners(newRow, defaultColor);

initializeDragula();
}

function deleteRow(element) {
element.closest(".row").remove();
function addRowListeners(row, defaultColor) {
const colorPicker = row.querySelector(".color-picker");
const tierLabel = row.querySelector(".tier-label");

const deleteButton = row.querySelector(".option.delete img");
const upButton = row.querySelector(".option.up img");
const downButton = row.querySelector(".option.down img");

const pickr = createColorPicker(colorPicker, tierLabel, defaultColor);

deleteButton.onclick = () => {
pickr.destroyAndRemove();
row.remove();
};
upButton.onclick = () => {
moveRow(row, -1);
};
downButton.onclick = () => {
moveRow(row, 1);
};
}

function moveRow(button, direction) {
const row = button.closest(".row");

const currentIndex = Array.from(row.parentNode.children).indexOf(row);
function moveRow(row, direction) {
const rows = Array.from(mainContainer.children);
const currentIndex = rows.indexOf(row);
const newIndex = currentIndex + direction;

if (newIndex >= 0) {
row.parentNode.insertBefore(
row,
row.parentNode.children[newIndex + (direction === 1 ? 1 : 0)],
);
if (newIndex < 0 || newIndex >= rows.length) {
return;
}

const rowBefore = direction === -1 ? rows[newIndex] : rows[newIndex + 1];

mainContainer.insertBefore(row, rowBefore);
}

function selectImages() {
Expand Down

0 comments on commit e3f2dcf

Please sign in to comment.