Mudanças entre as edições de "Widget:Item"
Ir para navegação
Ir para pesquisar
m |
m |
||
| Linha 3: | Linha 3: | ||
Tooltip: payload codificado em data-tip (Módulo:Item). Corpo vazio no HTML. | Tooltip: payload codificado em data-tip (Módulo:Item). Corpo vazio no HTML. | ||
JS decodifica no hover (rápido, sem API) e limpa no mouseout. | JS decodifica no hover (rápido, sem API) e limpa no mouseout. | ||
Ícone: span.item-icon + data-i codificado — sem <img> no HTML; JS hidrata | |||
background-image e remove data-i. Anti-arrastar/cópia/clique-direito leve. | |||
Defesa leve: hover real + rate limit de decodes para automação. | Defesa leve: hover real + rate limit de decodes para automação. | ||
--> | --> | ||
| Linha 33: | Linha 35: | ||
overflow: visible; | overflow: visible; | ||
filter: none; | filter: none; | ||
-webkit-user-select: none; | |||
user-select: none; | |||
-webkit-touch-callout: none; | |||
} | } | ||
.item-icon { | |||
display: block; | |||
margin: 0 auto; | |||
background-repeat: no-repeat; | |||
background-position: center; | |||
background-size: contain; | |||
filter: none; | |||
box-shadow: none; | |||
-webkit-user-select: none; | |||
user-select: none; | |||
-webkit-user-drag: none; | |||
-webkit-touch-callout: none; | |||
pointer-events: none; | |||
} | |||
/* Páginas em cache ainda com [[Arquivo:…]] → <img> legado */ | |||
.item-wrapper img { | .item-wrapper img { | ||
display: block; | display: block; | ||
| Linha 40: | Linha 61: | ||
filter: none; | filter: none; | ||
box-shadow: none; | box-shadow: none; | ||
-webkit-user-select: none; | |||
user-select: none; | |||
-webkit-user-drag: none; | |||
-webkit-touch-callout: none; | |||
pointer-events: none; | |||
} | } | ||
| Linha 358: | Linha 384: | ||
} | } | ||
} | } | ||
function getThumbUrl(filename, width) { | |||
var title = "Special:Redirect/file/" + String(filename).replace(/ /g, "_"); | |||
try { | |||
if (window.mw && mw.util && mw.util.getUrl) { | |||
return mw.util.getUrl(title, { width: width }); | |||
} | |||
} catch (e) { /* ignore */ } | |||
var scriptPath = ""; | |||
try { | |||
if (window.mw && mw.config) { | |||
scriptPath = mw.config.get("wgScriptPath") || ""; | |||
} | |||
} catch (e2) { /* ignore */ } | |||
return scriptPath + "/index.php?title=" + encodeURIComponent(title) + "&width=" + width; | |||
} | |||
function hydrateIcon(el) { | |||
if (!el || el.getAttribute("data-ready") === "1") return; | |||
var raw = el.getAttribute("data-i"); | |||
if (!raw) return; | |||
var p = decodePayload(raw); | |||
if (!p || !p.i) return; | |||
var w = p.w || 32; | |||
var h = p.h || 32; | |||
el.style.width = w + "px"; | |||
el.style.height = h + "px"; | |||
el.style.backgroundImage = 'url("' + getThumbUrl(p.i, w) + '")'; | |||
el.setAttribute("data-ready", "1"); | |||
el.removeAttribute("data-i"); | |||
} | |||
function hydrateAllIcons(root) { | |||
var scope = root || document; | |||
var icons = scope.querySelectorAll ? scope.querySelectorAll(".item-icon[data-i]") : []; | |||
for (var i = 0; i < icons.length; i++) { | |||
hydrateIcon(icons[i]); | |||
} | |||
} | |||
function protectItemWrapperEvents() { | |||
document.addEventListener("contextmenu", function (e) { | |||
if (e.target.closest && e.target.closest(".item-wrapper")) { | |||
e.preventDefault(); | |||
} | |||
}, true); | |||
document.addEventListener("dragstart", function (e) { | |||
if (e.target.closest && e.target.closest(".item-wrapper")) { | |||
e.preventDefault(); | |||
} | |||
}, true); | |||
document.addEventListener("copy", function (e) { | |||
if (e.target.closest && e.target.closest(".item-wrapper")) { | |||
e.preventDefault(); | |||
} | |||
}, true); | |||
document.addEventListener("selectstart", function (e) { | |||
if (e.target.closest && e.target.closest(".item-wrapper")) { | |||
e.preventDefault(); | |||
} | |||
}, true); | |||
} | |||
if (document.readyState === "loading") { | |||
document.addEventListener("DOMContentLoaded", function () { | |||
hydrateAllIcons(); | |||
}); | |||
} else { | |||
hydrateAllIcons(); | |||
} | |||
protectItemWrapperEvents(); | |||
function appendText(el, text) { | function appendText(el, text) { | ||