MediaWiki:Common.js: различия между версиями
Pok (обсуждение | вклад) Нет описания правки |
Kerisar (обсуждение | вклад) м рендер карт |
||
| Строка 11: | Строка 11: | ||
id: 'iframe1' | id: 'iframe1' | ||
}, | }, | ||
iframeMapRender: { | |||
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: '<! | width: '100%', | ||
width: ' | height: '100%', | ||
height: ' | name: 'iframeMapRender', | ||
name: ' | id: 'iframeMapRender' | ||
id: ' | |||
}, | }, | ||
iframeSkillsTableRed: { | iframeSkillsTableRed: { | ||