«ميدياويكي:Script/Modal.js»: الفرق بين المراجعتين
(أنشأ الصفحة ب'function createModalInteraction(content){ var boutonModal = content.querySelector(".button"); var modalContent = content.querySelector(".modal"); var boutonClos...') |
|||
(٣ مراجعات متوسطة بواسطة نفس المستخدم غير معروضة) | |||
سطر ١: | سطر ١: | ||
− | function createModalInteraction(content){ | + | 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"); | boutonModal.classList.remove("tabber-active"); | ||
modalContent.classList.remove("gen-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); | ||
+ | } | ||
})(); | })(); |
المراجعة الحالية بتاريخ ١٥:٠٣، ١٤ يوليو ٢٠٢٤
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);
}
})();