Skip to content

Commit

Permalink
Refactor JS
Browse files Browse the repository at this point in the history
  • Loading branch information
@agatemosu
agatemosu committed Dec 28, 2024
1 parent 1128ba6 commit fe414ed
Show file tree
Hide file tree
Showing 5 changed files with 210 additions and 245 deletions.
6 changes: 0 additions & 6 deletions .hintrc
View file

This file was deleted.

119 changes: 6 additions & 113 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,119 +11,12 @@
</head>
<body>
<main>
<div class="row">
<div class="tier-label" style="background-color: #ff7f7e">
<div class="label-text" contenteditable="true">
<span>S (秀)</span>
</div>
<div class="tooltip" data-visibility="hidden">
<div class="color-picker"></div>
</div>
</div>
<div class="tier sort"></div>
<div class="tier-options">
<div class="options-container">
<div class="option delete"><i></i></div>
<div class="option up"><i></i></div>
<div class="option down"><i></i></div>
</div>
</div>
</div>

<div class="row">
<div class="tier-label" style="background-color: #ffbf7f">
<div class="label-text" contenteditable="true">
<span>A (優)</span>
</div>
<div class="tooltip" data-visibility="hidden">
<div class="color-picker"></div>
</div>
</div>
<div class="tier sort"></div>
<div class="tier-options">
<div class="options-container">
<div class="option delete"><i></i></div>
<div class="option up"><i></i></div>
<div class="option down"><i></i></div>
</div>
</div>
</div>

<div class="row">
<div class="tier-label" style="background-color: #feff7f">
<div class="label-text" contenteditable="true">
<span>B (良)</span>
</div>
<div class="tooltip" data-visibility="hidden">
<div class="color-picker"></div>
</div>
</div>
<div class="tier sort"></div>
<div class="tier-options">
<div class="options-container">
<div class="option delete"><i></i></div>
<div class="option up"><i></i></div>
<div class="option down"><i></i></div>
</div>
</div>
</div>

<div class="row">
<div class="tier-label" style="background-color: #7eff80">
<div class="label-text" contenteditable="true">
<span>C (可)</span>
</div>
<div class="tooltip" data-visibility="hidden">
<div class="color-picker"></div>
</div>
</div>
<div class="tier sort"></div>
<div class="tier-options">
<div class="options-container">
<div class="option delete"><i></i></div>
<div class="option up"><i></i></div>
<div class="option down"><i></i></div>
</div>
</div>
</div>

<div class="row">
<div class="tier-label" style="background-color: #7fffff">
<div class="label-text" contenteditable="true">
<span>D (認)</span>
</div>
<div class="tooltip" data-visibility="hidden">
<div class="color-picker"></div>
</div>
</div>
<div class="tier sort"></div>
<div class="tier-options">
<div class="options-container">
<div class="option delete"><i></i></div>
<div class="option up"><i></i></div>
<div class="option down"><i></i></div>
</div>
</div>
</div>

<div class="row">
<div class="tier-label" style="background-color: #807fff">
<div class="label-text" contenteditable="true">
<span>F (不可)</span>
</div>
<div class="tooltip" data-visibility="hidden">
<div class="color-picker"></div>
</div>
</div>
<div class="tier sort"></div>
<div class="tier-options">
<div class="options-container">
<div class="option delete"><i></i></div>
<div class="option up"><i></i></div>
<div class="option down"><i></i></div>
</div>
</div>
</div>
<tier-row color="#ff7f7e" name="S (秀)"></tier-row>
<tier-row color="#ffbf7f" name="A (優)"></tier-row>
<tier-row color="#feff7f" name="B (良)"></tier-row>
<tier-row color="#7eff80" name="C (可)"></tier-row>
<tier-row color="#7fffff" name="D (認)"></tier-row>
<tier-row color="#807fff" name="F (不可)"></tier-row>
</main>

<div class="list-options">
Expand Down
2 changes: 1 addition & 1 deletion src/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ body {
user-select: none;
}

.row {
tier-row {
display: flex;
}

Expand Down
173 changes: 48 additions & 125 deletions src/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,7 @@
import Pickr from "@simonwep/pickr";
import Sortable from "sortablejs";
import TierRow from "./tier-row.js";

const defaultColors = [
"#ff7f7e",
"#ffbf7f",
"#feff7f",
"#7eff80",
"#7fffff",
"#807fff",
"#ff7ffe",
];
const clearColor = "#778899";

const mainContainer = document.querySelector("main");
const imagesBar = document.querySelector("#images-bar");

addContainerDrag(imagesBar);

document.querySelector("#new-tier").addEventListener("click", addRow);

document.querySelector("#select-images").addEventListener("change", (e) => {
const input = /** @type {HTMLInputElement} */ (e.target);
uploadImages(input.files);
});

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

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

document.addEventListener("drop", (e) => {
e.preventDefault();
Expand Down Expand Up @@ -70,126 +41,78 @@ document.addEventListener("mousedown", (e) => {
}
});

function createColorPicker(colorPicker, tierLabel, defaultColor) {
const pickr = new Pickr({
el: colorPicker,
theme: "monolith",
default: defaultColor,
swatches: defaultColors,
components: {
preview: true,
hue: true,
interaction: {
input: true,
clear: true,
save: true,
},
},
});

pickr.on("save", (color) => {
if (color === null) {
pickr.setColor(clearColor);
return;
}

const hsl = color.toHSLA();
const lightness = hsl[2];
// #endregion

tierLabel.style.backgroundColor = color.toHEXA().toString();
tierLabel.style.color = lightness < 50 ? "white" : "black";
// #region Specific handlers

pickr.hide();
});

return pickr;
}
function addNewTier() {
const mainContainer = document.querySelector("main");
const newTier = new TierRow();

function addRow() {
const newRow = document.createElement("div");
newRow.className = "row";
newRow.innerHTML = /* HTML */ `
<div class="tier-label" style="background-color: ${clearColor}">
<div class="label-text" contenteditable="true">
<span>New tier</span>
</div>
<div class="tooltip" data-visibility="hidden">
<div class="color-picker"></div>
</div>
</div>
<div class="tier sort"></div>
<div class="tier-options">
<div class="options-container">
<div class="option delete"><i></i></div>
<div class="option up"><i></i></div>
<div class="option down"><i></i></div>
</div>
</div>
`;

mainContainer.appendChild(newRow);
addRowListeners(newRow, clearColor);
mainContainer.appendChild(newTier);
}

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

const tierSort = row.querySelector(".sort");

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

const pickr = createColorPicker(colorPicker, tierLabel, defaultColor);
const dragInstance = addContainerDrag(tierSort);

deleteButton.onclick = () => {
pickr.destroyAndRemove();
dragInstance.destroy();
row.remove();
};
upButton.onclick = () => {
if (row.previousElementSibling) {
row.parentElement.insertBefore(row, row.previousElementSibling);
}
};
downButton.onclick = () => {
if (row.nextElementSibling) {
row.parentElement.insertBefore(row.nextElementSibling, row);
}
};
/**
* @param {Event} e
*/
function selectImages(e) {
const input = /** @type {HTMLInputElement} */ (e.target);
uploadImages(input.files);
}

/**
* @param {FileList} files
*/
function uploadImages(files) {
if (!files) {
return;
}
const imagesBar = document.querySelector("#images-bar");

for (const file of files) {
if (file.type.split("/")[0] !== "image") {
continue;
}

const image = new Image();
image.src = URL.createObjectURL(file);

const imageEl = document.createElement("div");
imageEl.classList.add("tier-element");
imagesBar.appendChild(imageEl);

const image = new Image();
image.onload = () => {
imageEl.style.aspectRatio = `${image.width} / ${image.height}`;
imageEl.style.backgroundImage = `url("${image.src}")`;
imageEl.style.minHeight = `${Math.min(image.height, 80)}px`;
};
image.src = URL.createObjectURL(file);
}
}

function addContainerDrag(container) {
return new Sortable(container, { group: "tiers" });
/**
* @param {Event} e
*/
function dynamicStyle(e) {
const checkbox = /** @type {HTMLInputElement} */ (e.target);
document.body.classList.toggle(checkbox.id, checkbox.checked);
}

function dynamicStyle(checkbox) {
document.body.classList.toggle(checkbox.id, checkbox.checked);
// #endregion

// #region Setup

function main() {
const newTierButton = document.querySelector("#new-tier");
const selectImagesButton = document.querySelector("#select-images");
const imagesBar = document.querySelector("#images-bar");
const checkboxes = document.querySelectorAll(".dynamic-style");

newTierButton.addEventListener("click", addNewTier);
selectImagesButton.addEventListener("change", selectImages);

Sortable.create(imagesBar, { group: TierRow.sortableGroup });

for (const checkbox of checkboxes) {
checkbox.addEventListener("change", dynamicStyle);
}
}

main();

// #endregion
Loading

0 comments on commit fe414ed

Please sign in to comment.