«ميدياويكي:Script/Modal.js»: الفرق بين المراجعتين
سطر ٦٦: | سطر ٦٦: | ||
function initializeSpawnLayers(spawnLayerContainers) { | function initializeSpawnLayers(spawnLayerContainers) { | ||
const optionMapping = { | const optionMapping = { | ||
− | 0: "🟥 | + | 0: "🟥 أحمر", |
− | 50: "🟫 | + | 50: "🟫 بني", |
− | 140: "🟩 | + | 140: "🟩 أخضر", |
− | 230: "🟦 | + | 230: "🟦 أزرق", |
− | 290: "🟪 | + | 290: "🟪 بنفسجي", |
− | black: "⬛ | + | black: "⬛ أسود", |
− | white: "⬜ | + | white: "⬜ أبيض" |
} | } | ||
const styleMapping = { | const styleMapping = { |
المراجعة الحالية بتاريخ ١٥:٠٣، ١٤ يوليو ٢٠٢٤
const SPAWN_LAYER_COLOR = "spawnLayerColor";
function createModalInteraction(content) {
const boutonModal = content.querySelector(".button");
const modalContent = content.querySelector(".modal");
const boutonClose = content.querySelector(".close");
const openModal = () => {
boutonModal.classList.add("tabber-active");
modalContent.classList.add("gen-active");
window.addEventListener("click", handleClickOutside);
};
const closeModal = () => {
boutonModal.classList.remove("tabber-active");
modalContent.classList.remove("gen-active");
window.removeEventListener("click", handleClickOutside);
};
const handleClickOutside = (event) => {
if (event.target === modalContent) {
closeModal();
}
};
boutonModal.addEventListener("click", openModal);
boutonClose.addEventListener("click", closeModal);
}
function changeSpawnLayerColor(value, selects, spawnLayers, optionMapping) {
if (!optionMapping.hasOwnProperty(value)) {
return;
}
let filter;
if (value === "black") {
filter = "invert(1) brightness(0) contrast(100%)";
} else if (value === "white") {
filter = "invert(1) sepia(1) saturate(100%) brightness(3)";
} else {
filter = `hue-rotate(${value}deg)`;
}
selects.forEach(select => select.value = value);
spawnLayers.forEach(spawnLayer => spawnLayer.style.filter = filter);
localStorage.setItem(SPAWN_LAYER_COLOR, value);
}
function createSelectColor(optionMapping, styleMapping) {
const select = document.createElement("select");
Object.entries(optionMapping).forEach(([key, value]) => {
const option = document.createElement("option");
option.value = key;
option.textContent = value;
select.appendChild(option);
});
Object.entries(styleMapping).forEach(([property, value]) => {
select.style[property] = value;
});
return select;
}
function initializeSpawnLayers(spawnLayerContainers) {
const optionMapping = {
0: "🟥 أحمر",
50: "🟫 بني",
140: "🟩 أخضر",
230: "🟦 أزرق",
290: "🟪 بنفسجي",
black: "⬛ أسود",
white: "⬜ أبيض"
}
const styleMapping = {
position: "absolute",
left: "0",
margin: "0",
background: "#434242b3",
color: "white",
borderRadius: "5px",
}
const selects = [];
const spawnLayers = [];
const spawnLayerColor = localStorage.getItem(SPAWN_LAYER_COLOR);
spawnLayerContainers.forEach((spawnLayerContainer) => {
const spawnLayer = spawnLayerContainer.querySelector("img");
if (spawnLayer) {
const selectColor = createSelectColor(optionMapping, styleMapping);
spawnLayerContainer.appendChild(selectColor);
selects.push(selectColor);
spawnLayers.push(spawnLayer);
}
});
const handleChange = (event) => {
changeSpawnLayerColor(event.target.value, selects, spawnLayers, optionMapping);
};
selects.forEach(select => {
select.addEventListener("change", handleChange);
});
if (spawnLayerColor) {
changeSpawnLayerColor(spawnLayerColor, selects, spawnLayers, optionMapping);
}
}
(() => {
const modalContainers = document.querySelectorAll("div#mw-content-text div.modalContainer");
const spawnLayerContainers = content.querySelectorAll("div.modalContainer .spawn-layer");
modalContainers.forEach(createModalInteraction);
if (spawnLayerContainers.length) {
initializeSpawnLayers(spawnLayerContainers);
}
})();