https://wiki.atlax2.com/index.php?action=history&feed=atom&title=MediaWiki%3AScript%2FTabber.js
MediaWiki:Script/Tabber.js - Histórico de revisões
2026-06-17T12:43:03Z
Histórico de edições para esta página nesta wiki
MediaWiki 1.45.1
https://wiki.atlax2.com/index.php?title=MediaWiki:Script/Tabber.js&diff=676&oldid=prev
Tmbt1ag0: Criou a página com "function changeDisplay(button, textContainer, method) { button.classList[method]("tabber-active"); textContainer.children[button.dataset.position].classList[method]("tabber-active"); } function globalChange(button, allButton, allText, toggleButton, changeUrl, bool = false) { var activeButton = allButton.querySelector(".tabber-active"); if (toggleButton || button !== activeButton) { if (bool && changeUrl) { var newHash = "#"+button.id; history.p..."
2026-03-29T20:55:15Z
<p>Criou a página com "function changeDisplay(button, textContainer, method) { button.classList[method]("tabber-active"); textContainer.children[button.dataset.position].classList[method]("tabber-active"); } function globalChange(button, allButton, allText, toggleButton, changeUrl, bool = false) { var activeButton = allButton.querySelector(".tabber-active"); if (toggleButton || button !== activeButton) { if (bool && changeUrl) { var newHash = "#"+button.id; history.p..."</p>
<p><b>Nova página</b></p><div>function changeDisplay(button, textContainer, method) {<br />
button.classList[method]("tabber-active");<br />
textContainer.children[button.dataset.position].classList[method]("tabber-active");<br />
}<br />
<br />
function globalChange(button, allButton, allText, toggleButton, changeUrl, bool = false) {<br />
var activeButton = allButton.querySelector(".tabber-active");<br />
if (toggleButton || button !== activeButton) {<br />
if (bool && changeUrl) {<br />
var newHash = "#"+button.id;<br />
history.pushState({}, "", newHash);<br />
}<br />
changeDisplay(button, allText, "toggle");<br />
if (button !== activeButton && activeButton !== null) {<br />
changeDisplay(activeButton, allText, "remove");<br />
}<br />
}<br />
}<br />
<br />
function updateTabber(buttonContainer, textContainer, toggleButton, changeUrl) {<br />
var targetButton = buttonContainer.querySelector(":target");<br />
if (targetButton !== null && targetButton.classList.contains("button")) {<br />
globalChange(targetButton, buttonContainer, textContainer, false, false);<br />
}<br />
buttonContainer.addEventListener("click", function(event) {<br />
var target = event.target.closest(".button");<br />
if (target) {<br />
globalChange(target, buttonContainer, textContainer, toggleButton, changeUrl, true);<br />
}<br />
});<br />
}<br />
<br />
function updateTabberWithUrlChange() {<br />
window.addEventListener("hashchange", function(e) {<br />
var newHash = e.target.location.hash;<br />
if (newHash !== "") {<br />
var targetButton = document.getElementById(newHash.slice(1));<br />
if (targetButton) {<br />
if (targetButton.classList.contains("button")) {<br />
var [buttonContainer, textContainer] = targetButton.parentElement.parentElement.children;<br />
globalChange(targetButton, buttonContainer, textContainer, false, false);<br />
}<br />
}<br />
}<br />
});<br />
}<br />
<br />
(function() {<br />
var tabberContainer = document.querySelectorAll("div.tabber-container");<br />
tabberContainer.forEach(function(tabber) {<br />
var [buttonContainer, textContainer] = tabber.children;<br />
var toggleButton = tabber.dataset.toggle === "1";<br />
var changeUrl = tabber.dataset.url === "1";<br />
updateTabber(buttonContainer, textContainer, toggleButton, changeUrl);<br />
});<br />
updateTabberWithUrlChange();<br />
})();<br />
<br />
/* NOVO */<br />
<br />
class SpawnLayerManager {<br />
static SPAWN_COLOR_KEY = "mt2.spawn.color";<br />
static OPTION_MAPPING = {<br />
0: "🟥 Vermelho",<br />
50: "🟫 Castanho",<br />
140: "🟩 Verde",<br />
230: "🟦 Azul",<br />
290: "🟪 Roxo",<br />
black: "⬛ Preto",<br />
white: "⬜ Branco",<br />
};<br />
static STYLE_MAPPING = {<br />
position: "absolute",<br />
top: "0",<br />
left: "0",<br />
margin: "4px",<br />
background: "#434242b3",<br />
color: "white",<br />
borderRadius: "5px",<br />
cursor: "pointer",<br />
border: "1px white solid",<br />
};<br />
<br />
constructor(containerSelector = ".spawn-map-container") {<br />
this.containerSelector = containerSelector;<br />
this.currentFilter = null;<br />
this.selects = [];<br />
this.spawnLayers = [];<br />
this.isClipboardImageSupported = this._isClipboardImageSupported();<br />
this._initialize();<br />
}<br />
<br />
_isClipboardImageSupported() {<br />
const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);<br />
return !!(navigator.clipboard?.write && window.ClipboardItem) && !isSafari;<br />
}<br />
<br />
_initialize() {<br />
const containers = this._getContainers();<br />
if (!containers.length) return;<br />
<br />
containers.forEach((container) => this._setupContainer(container));<br />
<br />
const savedColor = this._getSavedColor();<br />
if (savedColor) this._applyColor(savedColor);<br />
}<br />
<br />
_getContainers() {<br />
return document.querySelectorAll(this.containerSelector);<br />
}<br />
<br />
_getSavedColor() {<br />
return localStorage.getItem(SpawnLayerManager.SPAWN_COLOR_KEY);<br />
}<br />
<br />
_saveColor(value) {<br />
localStorage.setItem(SpawnLayerManager.SPAWN_COLOR_KEY, value);<br />
}<br />
<br />
_setupContainer(container) {<br />
const [mapContainer, spawnContainer] = container.children;<br />
<br />
if (!mapContainer || !spawnContainer) return;<br />
<br />
const map = mapContainer.querySelector("img");<br />
const spawnLayer = spawnContainer.querySelector("img");<br />
<br />
if (!map || !spawnLayer) return;<br />
<br />
const select = this._createColorSelect();<br />
spawnContainer.appendChild(select);<br />
<br />
this.selects.push(select);<br />
this.spawnLayers.push(spawnLayer);<br />
<br />
select.addEventListener("change", (e) => this._onColorChange(e));<br />
<br />
if (this.isClipboardImageSupported) {<br />
this._setupCopyButton(spawnContainer, map, spawnLayer);<br />
}<br />
}<br />
<br />
_createColorSelect() {<br />
const select = document.createElement("select");<br />
<br />
for (const [value, label] of Object.entries(<br />
SpawnLayerManager.OPTION_MAPPING<br />
)) {<br />
const option = document.createElement("option");<br />
option.value = value;<br />
option.textContent = label;<br />
select.appendChild(option);<br />
}<br />
<br />
Object.assign(select.style, SpawnLayerManager.STYLE_MAPPING);<br />
return select;<br />
}<br />
<br />
_onColorChange(event) {<br />
const value = event.target.value;<br />
this._applyColor(value);<br />
}<br />
<br />
_applyColor(value) {<br />
if (!SpawnLayerManager.OPTION_MAPPING.hasOwnProperty(value)) return;<br />
<br />
const filter = this._getFilterForValue(value);<br />
this.currentFilter = filter;<br />
<br />
this.selects.forEach((select) => (select.value = value));<br />
this.spawnLayers.forEach((layer) => (layer.style.filter = filter));<br />
this._saveColor(value);<br />
}<br />
<br />
_getFilterForValue(value) {<br />
switch (value) {<br />
case "black":<br />
return "invert(1) brightness(0) contrast(100%)";<br />
case "white":<br />
return "invert(1) sepia(1) saturate(100%) brightness(3)";<br />
default:<br />
return `hue-rotate(${value}deg)`;<br />
}<br />
}<br />
<br />
_setupCopyButton(spawnContainer, map, spawnLayer) {<br />
const copyButton = spawnContainer.querySelector(".copy-to-clipboard");<br />
<br />
if (!copyButton) return;<br />
<br />
const defaultEmoji = copyButton.querySelector("[data-default]");<br />
const clickedEmoji = copyButton.querySelector("[data-clicked]");<br />
<br />
if (!defaultEmoji || !clickedEmoji) return;<br />
<br />
showElement(copyButton);<br />
<br />
copyButton.addEventListener("click", () => {<br />
this._copyCombinedImageToClipboard(map, spawnLayer);<br />
this._copyAnimation(defaultEmoji, clickedEmoji);<br />
});<br />
}<br />
<br />
_copyCombinedImageToClipboard(map, spawnLayer) {<br />
const canvas = document.createElement("canvas");<br />
canvas.width = Math.max(map.naturalWidth, spawnLayer.naturalWidth);<br />
canvas.height = Math.max(map.naturalHeight, spawnLayer.naturalHeight);<br />
<br />
const ctx = canvas.getContext("2d");<br />
ctx.drawImage(map, 0, 0);<br />
<br />
const filteredLayer = this._drawFilteredLayer(spawnLayer);<br />
ctx.drawImage(filteredLayer, 0, 0);<br />
<br />
this._copyCanvasContentsToClipboard(canvas);<br />
}<br />
<br />
_drawFilteredLayer(layer) {<br />
const canvas = document.createElement("canvas");<br />
canvas.width = layer.naturalWidth;<br />
canvas.height = layer.naturalHeight;<br />
<br />
const ctx = canvas.getContext("2d");<br />
ctx.filter = this.currentFilter || "none";<br />
ctx.drawImage(layer, 0, 0);<br />
<br />
return canvas;<br />
}<br />
<br />
async _getBlobFromCanvas(canvas) {<br />
return new Promise((resolve, reject) => {<br />
canvas.toBlob((blob) => {<br />
if (blob) {<br />
resolve(blob);<br />
} else {<br />
reject(new Error("Canvas toBlob failed"));<br />
}<br />
});<br />
});<br />
}<br />
<br />
async _copyCanvasContentsToClipboard(canvas) {<br />
try {<br />
const blob = await this._getBlobFromCanvas(canvas);<br />
const data = [new ClipboardItem({ [blob.type]: blob })];<br />
await navigator.clipboard.write(data);<br />
} catch (error) {<br />
console.error(error);<br />
}<br />
}<br />
<br />
_copyAnimation(defaultEmoji, clickedEmoji) {<br />
hideElement(defaultEmoji);<br />
showElement(clickedEmoji);<br />
<br />
setTimeout(() => {<br />
hideElement(clickedEmoji);<br />
showElement(defaultEmoji);<br />
}, 1500);<br />
}<br />
}<br />
<br />
new SpawnLayerManager();</div>
Tmbt1ag0