MediaWiki:Common.js: различия между версиями

Нет описания правки
м рендер карт
Строка 11: Строка 11:
id: 'iframe1'
id: 'iframe1'
},
},
iframe2: {
iframeMapRender: {
src: '',
srcdoc: '<!DOCTYPE html><html data-bs-theme="dark" lang="ru"><head><meta charset="UTF-8"><meta content="width=device-width,initial-scale=1" name="viewport"><meta content="Просмотр карт SS14 Kerisar" name="description"><title>🗺 Просмотр карт SS14 Kerisar 🦎</title><link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" rel="stylesheet"><style>img{image-rendering:pixelated}body{background-color:#2c2c2c}.image-container{width:100%;max-width:1200px;height:600px;border:1px solid rgba(255,255,255,.1);position:relative;overflow:hidden;margin-top:20px;margin-left:auto;margin-right:auto}.image-container img{max-width:none;height:auto;position:absolute;top:0;left:0}:fullscreen .image-container{border:none}#buttonsGroupPlus{display:flex;justify-content:space-between;flex-direction:row}</style></head><body><div class="container"><h3 class="mt-4 text-center text-light">🗺 Просмотр карт SS14 Kerisar 🦎</h3><div class="mb-3 d-flex flex-wrap" id="folder-list"></div><div class="mb-3" id="file-list"></div><div class="image-container" id="image-container"><img alt="Изображение" id="panzoom-image" src=""></div><div class="m-1" id="buttonsGroupPlus"><button class="btn btn-outline-light btn-sm" id="fullscreen-toggle">Полный экран</button> <button class="btn btn-outline-light btn-sm" id="open-in-new-window">Открыть в отдельном окне</button></div></div><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"></script><script src="https://unpkg.com/@panzoom/panzoom@4.5.1/dist/panzoom.min.js"></script><script>async function fetchFolderData(e){const t=await fetch(e),n=await t.text();return{folderNames:[...n.matchAll(/{"count":{.*?},"name":"(.*?)",.*?"type":"folder"}/g)].map(e=>e[1]),fileNames:[...n.matchAll(/{"name":"(.*?)",.*?"type":"file"}/g)].map(e=>e[1])}}async function processFolder(e){const t="https://api.codetabs.com/v1/proxy/?quest=https://cloud.mail.ru/public/6P5o/RLnoP6pLa/"+e,{folderNames:n,fileNames:o}=await fetchFolderData(t),l=n.filter(e=>"MapImages"!==e);return{name:e,files:o.sort(),subfolders:await Promise.all(l.map(t=>processFolder(e+"/"+t))).then(e=>e.sort((e,t)=>e.name.localeCompare(t.name,void 0,{numeric:!0})))}}function displayFolderData(e){const t=document.createElement("div");t.classList.add("folder");const n=document.createElement("button");n.classList.add("btn","btn-outline-light","m-1","btn-sm"),n.textContent=e.name,n.onclick=(()=>loadFiles(e,n)),t.appendChild(n),document.getElementById("folder-list").appendChild(t)}function loadFiles(e,t){const n=document.getElementById("file-list");n.innerHTML="",e.files.forEach(t=>{const o=document.createElement("button");o.textContent=t,o.classList.add("btn","btn-outline-light","m-1","btn-sm"),o.onclick=(()=>showMap(e.name,t,o)),n.appendChild(o)}),document.querySelectorAll("#folder-list button").forEach(e=>e.classList.remove("active")),t.classList.add("active")}function showMap(e,t,n){const o="https://thumb.cloud.mail.ru/weblink/thumb/xw1/6P5o/RLnoP6pLa/"+e+"/"+t,l=document.getElementById("panzoom-image");l.src=o;const a=Panzoom(l,{canvas:!0}),c=l.parentElement;c.addEventListener("wheel",a.zoomWithWheel),c.addEventListener("wheel",function(e){e.shiftKey&&a.zoomWithWheel(e)});const s=document.getElementById("open-in-new-window");s.style.display="block",s.onclick=(()=>window.open(o,"_blank")),document.querySelectorAll("#file-list button").forEach(e=>e.classList.remove("active")),n.classList.add("active")}function toggleFullscreen(){const e=document.getElementById("image-container");document.fullscreenElement?document.exitFullscreen():e.requestFullscreen().catch(e=>console.log("Ошибка при попытке открыть в полноэкранном режиме"))}document.getElementById("fullscreen-toggle").addEventListener("click",toggleFullscreen),async function(){const{folderNames:e,fileNames:t}=await fetchFolderData("https://api.codetabs.com/v1/proxy/?quest=https://cloud.mail.ru/public/6P5o/RLnoP6pLa");(await Promise.all(e.filter(e=>"MapImages"!==e).map(e=>processFolder(e)))).forEach(e=>{displayFolderData(e)})}().catch(e=>{console.error("Ошибка при запросе:",e)});</script></body></html>',
srcdoc: '<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Bootstrap demo</title><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script></head><body><form><div class="mb-3"><label for="exampleInputEmail1" class="form-label">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"><div id="emailHelp" class="form-text">We ll never share your email with anyone else.</div></div><div class="mb-3"><label for="exampleInputPassword1" class="form-label">Password</label><input type="password" class="form-control" id="exampleInputPassword1"></div><div class="mb-3 form-check"><input type="checkbox" class="form-check-input" id="exampleCheck1"><label class="form-check-label" for="exampleCheck1">Check me out</label></div><button type="submit" class="btn btn-primary">Submit</button></form></body></html>',
width: '100%',
width: '600',
height: '100%',
height: '400',
name: 'iframeMapRender',
name: 'iframe2',
id: 'iframeMapRender'
allow: '',
referrerpolicy: '',
sandbox: '',
id: 'iframe2'
},
},
iframeSkillsTableRed: {
iframeSkillsTableRed: {