Mudanças entre as edições de "Widget:Teste"
Ir para navegação
Ir para pesquisar
m Etiqueta: Revertido |
m Etiqueta: Revertido |
||
| Linha 1: | Linha 1: | ||
<script> | <script> | ||
(function(){ | (function(){ | ||
var css = ".gx-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:2147483647}"+ | var css = | ||
".gx-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:2147483647}"+ | |||
".gx-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.86)}"+ | |||
".gx-modal{position:relative;display:flex;align-items:center;justify-content:center;pointer-events:none}"+ | |||
".gx-box{position:relative;display:inline-block;background:#000;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.5);overflow:hidden;pointer-events:auto}"+ | |||
".gx-img{display:block;max-width:min(92vw,1200px);max-height:92vh;width:auto;height:auto}"+ | |||
".gx-close{position:absolute;top:6px;right:6px;width:34px;height:34px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.38);color:#fff;font-size:22px;line-height:32px;text-align:center;cursor:pointer}"+ | |||
".gifbox{cursor:pointer;text-decoration:underline;color:#0645ad}"+ | |||
".gifbox:visited{color:#0b0080}"+ | |||
var style = document.createElement("style"); | ".gx-open{overflow:hidden!important}"; | ||
var style=document.createElement("style");style.type="text/css";style.appendChild(document.createTextNode(css));document.head.appendChild(style); | |||
var overlay = document.createElement("div"); | var overlay=document.createElement("div"); | ||
overlay.className = "gx-overlay"; | overlay.className="gx-overlay";overlay.setAttribute("role","dialog");overlay.setAttribute("aria-modal","true"); | ||
overlay.innerHTML='<div class="gx-backdrop"></div><div class="gx-modal"><div class="gx-box"><button class="gx-close" type="button" aria-label="Fechar">×</button><img class="gx-img" src="" alt="" loading="eager" decoding="async" referrerpolicy="no-referrer"></div></div>'; | |||
overlay.innerHTML = '<div class="gx-backdrop"></div><div class="gx-modal" | |||
document.body.appendChild(overlay); | document.body.appendChild(overlay); | ||
var backdrop = overlay.querySelector(".gx-backdrop"); | var backdrop=overlay.querySelector(".gx-backdrop"); | ||
var | var box=overlay.querySelector(".gx-box"); | ||
var | var img=overlay.querySelector(".gx-img"); | ||
var | var closeBtn=overlay.querySelector(".gx-close"); | ||
var lastActive = null; | var lastActive=null; | ||
function openBox(url, altText){ | function openBox(url,altText){ | ||
if(!url) return; | if(!url)return; | ||
lastActive = document.activeElement; | lastActive=document.activeElement; | ||
document.body.classList.add("gx-open"); | document.body.classList.add("gx-open"); | ||
img.removeAttribute("width");img.removeAttribute("height"); | |||
img.src=url; img.alt=altText||""; | |||
overlay.style.display = "flex"; | overlay.style.display="flex"; | ||
// garante centralização mesmo antes do load | |||
box.style.width="auto"; box.style.height="auto"; | |||
// após carregar, não deixa “caixa maior que o necessário” | |||
if(img.complete){fit()} else {img.addEventListener("load",fit,{once:true});} | |||
closeBtn.focus(); | |||
} | |||
function fit(){ | |||
// nada de tamanhos fixos: a caixa segue a imagem escalada | |||
box.style.width="auto"; box.style.height="auto"; | |||
} | } | ||
function closeBox(){ | function closeBox(){ | ||
overlay.style.display = "none"; | overlay.style.display="none"; | ||
document.body.classList.remove("gx-open"); | document.body.classList.remove("gx-open"); | ||
img.src=""; img.alt=""; | |||
if(lastActive && lastActive.focus) lastActive.focus(); | if(lastActive && lastActive.focus) lastActive.focus(); | ||
} | } | ||
overlay.addEventListener("click", function(e){ | overlay.addEventListener("click",function(e){ | ||
if(e.target === overlay || e.target === backdrop) closeBox(); | if(e.target===overlay||e.target===backdrop) closeBox(); | ||
}); | }); | ||
closeBtn.addEventListener("click",closeBox); | |||
document.addEventListener("keydown", function(e){ if(e.key === "Escape") closeBox(); }); | document.addEventListener("keydown",function(e){ if(e.key==="Escape") closeBox(); }); | ||
document.addEventListener("click", function(e){ | document.addEventListener("click",function(e){ | ||
var t = e.target; | var t=e.target; | ||
while(t && t !== document){ | while(t && t!==document){ | ||
if(t.classList && t.classList.contains("gifbox")) break; | if(t.classList && t.classList.contains("gifbox")) break; | ||
t = t.parentNode; | t=t.parentNode; | ||
} | } | ||
if(!t || t === document) return; | if(!t || t===document) return; | ||
e.preventDefault(); | e.preventDefault(); | ||
var url = t.getAttribute("data-gif") || t.getAttribute("href"); | var url=t.getAttribute("data-gif")||t.getAttribute("href"); | ||
var alt = t.getAttribute("data-alt") || t.textContent.trim(); | var alt=t.getAttribute("data-alt")||t.textContent.trim(); | ||
if(!url) return; | if(!url) return; | ||
openBox(url, alt); | openBox(url,alt); | ||
}, false); | },false); | ||
})(); | })(); | ||
</script> | </script> | ||
Edição das 02h50min de 14 de agosto de 2025
<script> (function(){
var css =
".gx-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:2147483647}"+
".gx-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.86)}"+
".gx-modal{position:relative;display:flex;align-items:center;justify-content:center;pointer-events:none}"+
".gx-box{position:relative;display:inline-block;background:#000;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.5);overflow:hidden;pointer-events:auto}"+
".gx-img{display:block;max-width:min(92vw,1200px);max-height:92vh;width:auto;height:auto}"+
".gx-close{position:absolute;top:6px;right:6px;width:34px;height:34px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.38);color:#fff;font-size:22px;line-height:32px;text-align:center;cursor:pointer}"+
".gifbox{cursor:pointer;text-decoration:underline;color:#0645ad}"+
".gifbox:visited{color:#0b0080}"+
".gx-open{overflow:hidden!important}";
var style=document.createElement("style");style.type="text/css";style.appendChild(document.createTextNode(css));document.head.appendChild(style);
var overlay=document.createElement("div");
overlay.className="gx-overlay";overlay.setAttribute("role","dialog");overlay.setAttribute("aria-modal","true");
overlay.innerHTML='
<button class="gx-close" type="button" aria-label="Fechar">×</button><img class="gx-img" src="" alt="" loading="eager" decoding="async" referrerpolicy="no-referrer">
';
document.body.appendChild(overlay);
var backdrop=overlay.querySelector(".gx-backdrop");
var box=overlay.querySelector(".gx-box");
var img=overlay.querySelector(".gx-img");
var closeBtn=overlay.querySelector(".gx-close");
var lastActive=null;
function openBox(url,altText){
if(!url)return;
lastActive=document.activeElement;
document.body.classList.add("gx-open");
img.removeAttribute("width");img.removeAttribute("height");
img.src=url; img.alt=altText||"";
overlay.style.display="flex";
// garante centralização mesmo antes do load
box.style.width="auto"; box.style.height="auto";
// após carregar, não deixa “caixa maior que o necessário”
if(img.complete){fit()} else {img.addEventListener("load",fit,{once:true});}
closeBtn.focus();
}
function fit(){
// nada de tamanhos fixos: a caixa segue a imagem escalada
box.style.width="auto"; box.style.height="auto";
}
function closeBox(){
overlay.style.display="none";
document.body.classList.remove("gx-open");
img.src=""; img.alt="";
if(lastActive && lastActive.focus) lastActive.focus();
}
overlay.addEventListener("click",function(e){
if(e.target===overlay||e.target===backdrop) closeBox();
});
closeBtn.addEventListener("click",closeBox);
document.addEventListener("keydown",function(e){ if(e.key==="Escape") closeBox(); });
document.addEventListener("click",function(e){
var t=e.target;
while(t && t!==document){
if(t.classList && t.classList.contains("gifbox")) break;
t=t.parentNode;
}
if(!t || t===document) return;
e.preventDefault();
var url=t.getAttribute("data-gif")||t.getAttribute("href");
var alt=t.getAttribute("data-alt")||t.textContent.trim();
if(!url) return;
openBox(url,alt);
},false);
})(); </script>