Открыть меню
Переключить меню настроек
Открыть персональное меню
Вы не представились системе
Ваш IP-адрес будет виден всем, если вы внесёте какие-либо изменения.

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

Страница интерфейса MediaWiki
Нет описания правки
Метка: отменено
Нет описания правки
 
(не показаны 42 промежуточные версии этого же участника)
Строка 1: Строка 1:
window.CHEM_DB={
(function() {  
chemicals:{
    if (typeof mw === 'undefined' || !window.document) return;  
H2O:{name:"Вода",type:"liquid"},
   
H2:{name:"Водород",type:"gas"},
    function initCollapse() {  
O2:{name:"Кислород",type:"gas"},
        var headings = document.querySelectorAll('.chem-heading');  
NaCl:{name:"Поваренная соль",type:"solid"}
        var hi = 0;  
},
        var len = headings.length;  
gases:{
        for (; hi < len; hi++) {  
H2:{name:"Водород"},
            (function(node) {  
O2:{name:"Кислород"},
                if (node.getAttribute('data-chem-attached')) return;  
CO2:{name:"Углекислый газ"}
                node.setAttribute('data-chem-attached', '1');  
},
                node.style.cursor = 'pointer';  
botany:{
                node.addEventListener('click', function() {  
aloe:{name:"Алоэ",part:"сок"},
                    var kind = node.getAttribute('data-kind') || '';
mint:{name:"Мята",part:"листья"}
                    var wrapper = findWrapper(node, kind);  
},
                    if (!wrapper) return;  
recipes:[
                    var btn = node.querySelector('.collapse-btn');  
{id:"water-synthesis",name:"Синтез воды",yield:{item:"H2O",amount:2,unit:"мл"},
                   
reagents:[{item:"H2",amount:2,unit:"моль"},{item:"O2",amount:1,unit:"моль"}],conditions:{temp:"500°C",catalyst:"Pt"}},
                    if (wrapper.classList.contains('collapsed')) {  
{id:"saline",name:"Физиологический раствор",yield:{item:"NaCl",amount:0.9,unit:"% в H2O"},
                        wrapper.classList.remove('collapsed');  
reagents:[{item:"NaCl",amount:9,unit:"г"},{item:"H2O",amount:1000,unit:"мл"}],conditions:{sterile:true}},
                        wrapper.classList.add('expanded');  
{id:"mint-aloe-tonic",name:"Тоник мята+алое",yield:{item:"H2O",amount:100,unit:"мл"},
                        wrapper.style.maxHeight = wrapper.scrollHeight + 'px';  
reagents:[{item:"mint",amount:10,unit:"г"},{item:"aloe",amount:10,unit:"мл"},{item:"H2O",amount:100,unit:"мл"}],conditions:{infuse:"20 мин"}}
                        if (btn) btn.textContent = 'свернуть';  
]
                        var cleanup = function() {  
}
                            wrapper.style.maxHeight = '';  
 
                            wrapper.removeEventListener('transitionend', cleanup);
 
                        };  
(function(){
                        wrapper.addEventListener('transitionend', cleanup);  
if(!window.CHEM_DB)window.CHEM_DB={recipes:[],chemicals:{},gases:{},botany:{}};
                    } else {
function el(t,cls,txt){var d=document.createElement(t);if(cls)d.className=cls;if(txt)d.textContent=txt;return d}
                        var currentHeight = wrapper.scrollHeight;  
function norm(s){return String(s||"").toLowerCase()}
                        wrapper.style.maxHeight = currentHeight + 'px';  
function byId(id){return document.getElementById(id)}
                        wrapper.offsetHeight;  
function badge(txt){var b=el("span","chem-badge");b.textContent=txt;return b}
                        wrapper.classList.remove('expanded');  
function pill(txt,val,on){var p=el("span","chem-pill");p.setAttribute("role","button");p.setAttribute("tabindex","0");p.setAttribute("aria-pressed","false");p.textContent=txt;p.dataset.val=val;p.addEventListener("click",on);p.addEventListener("keypress",function(e){if(e.keyCode===13||e.keyCode===32)on.call(p,e)});return p}
                        wrapper.classList.add('collapsed');  
function lookupName(key){return(window.CHEM_DB.chemicals[key]&&window.CHEM_DB.chemicals[key].name)||(window.CHEM_DB.gases[key]&&window.CHEM_DB.gases[key].name)||(window.CHEM_DB.botany[key]&&window.CHEM_DB.botany[key].name)||key}
                        wrapper.style.maxHeight = '0px';  
function render(listWrap,recipes){listWrap.innerHTML="";if(!recipes.length){var em=el("div","chem-empty","Ничего не найдено");listWrap.appendChild(em);return}recipes.forEach(function(r){var card=el("div","chem-card");var h=el("h3",null,r.name);card.appendChild(h);var meta=el("div","chem-meta","ID: "+r.id);card.appendChild(meta);var badges=el("div","chem-badges");if(r.conditions){Object.keys(r.conditions).forEach(function(k){badges.appendChild(badge(k+": "+r.conditions[k]))})}card.appendChild(badges);var tbl=document.createElement("table");tbl.className="chem-table";var thead=document.createElement("thead");var trh=document.createElement("tr");["Компонент","Кол-во","Тип"].forEach(function(x){var th=document.createElement("th");th.textContent=x;trh.appendChild(th)});thead.appendChild(trh);tbl.appendChild(thead);var tb=document.createElement("tbody");(r.reagents||[]).forEach(function(g){var tr=document.createElement("tr");var td1=document.createElement("td");td1.textContent=lookupName(g.item);var td2=document.createElement("td");td2.textContent=(g.amount!=null?g.amount:"")+(g.unit?" "+g.unit:"");var td3=document.createElement("td");var t="";if(window.CHEM_DB.gases[g.item])t="газ";else if(window.CHEM_DB.botany[g.item])t="ботаника";else t="реагент";td3.textContent=t;tr.appendChild(td1);tr.appendChild(td2);tr.appendChild(td3);tb.appendChild(tr)});tbl.appendChild(tb);card.appendChild(tbl);var y=el("div","chem-meta","Выход: "+lookupName(r.yield&&r.yield.item)+(r.yield&&r.yield.amount!=null?" — "+r.yield.amount:"")+(r.yield&&r.yield.unit?" "+r.yield.unit:"");card.appendChild(y);listWrap.appendChild(card)})}
                        if (btn) btn.textContent = 'развернуть';  
function mount(root){var wrap=el("div","chem-wrap");var ctr=el("div","chem-controls");var input=document.createElement("input");input.className="chem-input";input.placeholder="Поиск по названию и компонентам";input.setAttribute("aria-label","Поиск рецептов");var kinds=[{k:"all",n:"Все"},{k:"chemicals",n:"Реагенты"},{k:"gases",n:"Газы"},{k:"botany",n:"Ботаника"}];var curKind="all";var bar=el("div");kinds.forEach(function(it){bar.appendChild(pill(it.n,it.k,function(){Array.prototype.forEach.call(bar.children,function(c){c.setAttribute("aria-pressed","false")});this.setAttribute("aria-pressed","true");curKind=this.dataset.val;update()}))});bar.firstChild.setAttribute("aria-pressed","true");var list=el("div","chem-list");ctr.appendChild(input);ctr.appendChild(bar);wrap.appendChild(ctr);wrap.appendChild(list);root.appendChild(wrap);function filter(){var q=norm(input.value);return window.CHEM_DB.recipes.filter(function(r){function inKind(id){if(curKind==="all")return true;return !!window.CHEM_DB[curKind][id]}var nameHit=norm(r.name).indexOf(q)>-1;var compHit=(r.reagents||[]).some(function(g){return inKind(g.item)&&(norm(lookupName(g.item)).indexOf(q)>-1||norm(g.item).indexOf(q)>-1)});return nameHit||compHit})}
                    }
function update(){render(list,filter())}
                });  
input.addEventListener("input",update);update()}
            })(headings[hi]);  
function boot(){Array.prototype.forEach.call(document.querySelectorAll(".chemistry-catalog"),mount)}
        }  
if(document.readyState==="complete"||document.readyState==="interactive")boot();else document.addEventListener("DOMContentLoaded",boot)
    }  
   
    function findWrapper(node, kind) {  
        var parent = node.parentNode;  
        if (!parent) return null;  
        var wrappers = parent.querySelectorAll('.collapsible');  
        var wi = 0;  
        var wlen = wrappers.length;  
        for (; wi < wlen; wi++) {  
            if (wrappers[wi].getAttribute('data-kind') === kind) {  
                return wrappers[wi];  
            }  
        }  
        return null;  
    }  
   
    if (document.readyState === 'complete' || document.readyState === 'interactive') {
        initCollapse();  
    } else {
        document.addEventListener('DOMContentLoaded', initCollapse);
    }
})();
})();
/* Галерея бета тест. 24 08 25 Dante/popoi
js
(function(){var root=document.getElementById('ss-art-gallery');if(!root)return;function q(a,b){return a.querySelector(b)}function qa(a,b){return Array.prototype.slice.call(a.querySelectorAll(b))}
var chips=qa(root,'.ss-chip');function setFilter(val){chips.forEach(function(c){c.classList.toggle('ss-chip-active',c.getAttribute('data-filter')===val||val==='all'&&c.getAttribute('data-filter')==='all')});qa(root,'.ss-card').forEach(function(card){var who=card.getAttribute('data-artist');card.classList.toggle('ss-hidden',!(val==='all'||val===who))})}
chips.forEach(function(ch){ch.addEventListener('click',function(){setFilter(ch.getAttribute('data-filter'))})});setFilter('all');
var modal=document.createElement('div');modal.className='ss-modal';modal.innerHTML='<div class="ss-modal-inner"><img class="ss-modal-img" alt=""/></div><div class="ss-modal-close" role="button">✖ Закрыть</div>';root.appendChild(modal);var modalImg=q(modal,'.ss-modal-img');function originalFromThumb(u){if(!u)return u;if(u.indexOf('/thumb/')>-1){var s=u.replace('/thumb/','/');s=s.replace(/\/[^\/]*$/,'');return s}return u}
qa(root,'.ss-card img').forEach(function(img){img.style.cursor='zoom-in';img.addEventListener('click',function(){var src=originalFromThumb(img.getAttribute('src'));modalImg.setAttribute('src',src||img.getAttribute('src'));modal.classList.add('open')})});
function closeModal(){modal.classList.remove('open')}modal.addEventListener('click',function(e){if(e.target===modal||e.target.classList.contains('ss-modal-close')){closeModal()}});document.addEventListener('keydown',function(e){if(e.key==='Escape'){closeModal()}})
})();
css
#ss-art-gallery.ss-wrap{--ss-bg:#0e0f14;--ss-fg:#e9e9e9;--ss-muted:#a9b0bd;--ss-accent:#dca01b;--ss-card:#171a21;--ss-ring:#2b3241;--ss-chip:#1e2330;--ss-shadow:0 10px 28px rgba(0,0,0,.4);background:var(--ss-bg);color:var(--ss-fg);padding:20px;border-radius:18px;font-family:"Segoe UI",sans-serif}
#ss-art-gallery .ss-header{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;text-align:center}
#ss-art-gallery .ss-title{font-size:30px;line-height:1.2;font-weight:700;color:var(--ss-accent)}
#ss-art-gallery .ss-sub{font-size:15px;color:var(--ss-muted)}
#ss-art-gallery .ss-filters{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:10px}
#ss-art-gallery .ss-chip{user-select:none;cursor:pointer;background:var(--ss-chip);padding:8px 14px;border-radius:999px;border:1px solid var(--ss-ring);box-shadow:var(--ss-shadow);font-size:13px;transition:all .2s ease}
#ss-art-gallery .ss-chip:hover{background:var(--ss-accent);color:#000}
#ss-art-gallery .ss-chip-active{border-color:var(--ss-accent);background:var(--ss-accent);color:#000}
#ss-art-gallery .ss-section{margin:24px 0}
#ss-art-gallery .ss-section-title{font-size:22px;font-weight:700;margin:10px 0 14px;text-align:left;color:var(--ss-accent)}
#ss-art-gallery .ss-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
#ss-art-gallery .ss-card{background:var(--ss-card);border:1px solid var(--ss-ring);border-radius:16px;box-shadow:var(--ss-shadow);padding:12px;display:flex;flex-direction:column;gap:10px;transform:translateZ(0);transition:transform .2s ease,border-color .2s ease}
#ss-art-gallery .ss-card:hover{transform:translateY(-4px);border-color:var(--ss-accent)}
#ss-art-gallery .ss-card-title{font-size:15px;color:var(--ss-muted);text-align:center}
#ss-art-gallery .ss-card img{width:100%!important;height:auto!important;border-radius:12px;display:block}
#ss-art-gallery .ss-hidden{display:none!important}
#ss-art-gallery .ss-modal{position:fixed;inset:0;background:rgba(0,0,0,.88);display:none;align-items:center;justify-content:center;z-index:9999}
#ss-art-gallery .ss-modal.open{display:flex}
#ss-art-gallery .ss-modal-inner{max-width:92vw;max-height:92vh;animation:ss-fade .25s ease}
#ss-art-gallery .ss-modal-img{max-width:92vw;max-height:92vh;border-radius:14px;box-shadow:0 0 24px rgba(0,0,0,.7)}
#ss-art-gallery .ss-modal-close{position:fixed;top:16px;right:18px;background:var(--ss-chip);border:1px solid var(--ss-ring);padding:8px 14px;border-radius:10px;cursor:pointer;transition:all .2s ease}
#ss-art-gallery .ss-modal-close:hover{background:var(--ss-accent);color:#000}
@keyframes ss-fade{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
Html
<div id="ss-art-gallery" class="ss-wrap">
<div class="ss-header">
<div class="ss-title">🎨 Арт-галерея Space Stories</div>
<div class="ss-sub">Приветствуем! Здесь собраны <span style="color:#f8d860;font-weight:700">все</span> арты, связанные с сервером <b>«Space stories»</b>.</div>
<div class="ss-filters" aria-label="Фильтр авторов">
<div class="ss-chip ss-chip-active" data-filter="all">Все авторы</div>
<div class="ss-chip" data-filter="Doner">Doner</div>
<div class="ss-chip" data-filter="Vi_Launcher">Vi_Launcher</div>
</div>
</div>
<div class="ss-section">
<div class="ss-section-title"><span style="color:#dca01b">Doner</span></div>
<div class="ss-grid">
<div class="ss-card" data-artist="Doner" data-title="Фон в лобби #1">
<div class="ss-card-title">Фон в лобби #1</div>
[[Файл:Doner fisrt art.png|400px]]
</div>
<div class="ss-card" data-artist="Doner" data-title="Фон в лобби #2">
<div class="ss-card-title">Фон в лобби #2</div>
[[Файл:Doner two.png|400px]]
</div>
<div class="ss-card" data-artist="Doner" data-title="Фон в лобби #3">
<div class="ss-card-title">Фон в лобби #3</div>
[[Файл:Doner three.png|400px]]
</div>
<div class="ss-card" data-artist="Doner" data-title="Фон в лобби #4">
<div class="ss-card-title">Фон в лобби #4</div>
[[Файл:Doner four.png|400px]]
</div>
<div class="ss-card" data-artist="Doner" data-title="Фон в лобби #5">
<div class="ss-card-title">Фон в лобби #5</div>
[[Файл:Doner five.png|400px]]
</div>
<div class="ss-card" data-artist="Doner" data-title="Фон в лобби #6">
<div class="ss-card-title">Фон в лобби #6</div>
[[Файл:Doner six.png|400px]]
</div>
<div class="ss-card" data-artist="Doner" data-title="Фон в лобби #7">
<div class="ss-card-title">Фон в лобби #7</div>
[[Файл:Doner seven.png|400px]]
</div>
</div>
</div>
<div class="ss-section">
<div class="ss-section-title"><span style="color:#dca01b">Vi_Launcher</span></div>
<div class="ss-grid">
<div class="ss-card" data-artist="Vi_Launcher" data-title="История одного детектива">
<div class="ss-card-title">История одного детектива</div>
[[Файл:Vi-Launcher one.png|400px]]
</div>
<div class="ss-card" data-artist="Vi_Launcher" data-title="Иван Петрович">
<div class="ss-card-title">Иван Петрович</div>
[[Файл:Vl Launcher two.png|400px]]
</div>
<div class="ss-card" data-artist="Vi_Launcher" data-title="S.P.A.F.">
<div class="ss-card-title">S.P.A.F.</div>
[[Файл:Vi Launcher three.png|400px]]
</div>
<div class="ss-card" data-artist="Vi_Launcher" data-title="Прибой Яков">
<div class="ss-card-title">Прибой Яков</div>
[[Файл:Vi Launcher four.png|400px]]
</div>
<div class="ss-card" data-artist="Vi_Launcher" data-title="Жупт Игоревич">
<div class="ss-card-title">Жупт Игоревич</div>
[[Файл:Vi Launcher five.png|400px]]
</div>
</div>
</div>
</div>
*/

Текущая версия от 13:10, 4 апреля 2026

(function() { 
    if (typeof mw === 'undefined' || !window.document) return; 
    
    function initCollapse() { 
        var headings = document.querySelectorAll('.chem-heading'); 
        var hi = 0; 
        var len = headings.length; 
        for (; hi < len; hi++) { 
            (function(node) { 
                if (node.getAttribute('data-chem-attached')) return; 
                node.setAttribute('data-chem-attached', '1'); 
                node.style.cursor = 'pointer'; 
                node.addEventListener('click', function() { 
                    var kind = node.getAttribute('data-kind') || ''; 
                    var wrapper = findWrapper(node, kind); 
                    if (!wrapper) return; 
                    var btn = node.querySelector('.collapse-btn'); 
                    
                    if (wrapper.classList.contains('collapsed')) { 
                        wrapper.classList.remove('collapsed'); 
                        wrapper.classList.add('expanded'); 
                        wrapper.style.maxHeight = wrapper.scrollHeight + 'px'; 
                        if (btn) btn.textContent = 'свернуть'; 
                        var cleanup = function() { 
                            wrapper.style.maxHeight = ''; 
                            wrapper.removeEventListener('transitionend', cleanup); 
                        }; 
                        wrapper.addEventListener('transitionend', cleanup); 
                    } else { 
                        var currentHeight = wrapper.scrollHeight; 
                        wrapper.style.maxHeight = currentHeight + 'px'; 
                        wrapper.offsetHeight; 
                        wrapper.classList.remove('expanded'); 
                        wrapper.classList.add('collapsed'); 
                        wrapper.style.maxHeight = '0px'; 
                        if (btn) btn.textContent = 'развернуть'; 
                    } 
                }); 
            })(headings[hi]); 
        } 
    } 
    
    function findWrapper(node, kind) { 
        var parent = node.parentNode; 
        if (!parent) return null; 
        var wrappers = parent.querySelectorAll('.collapsible'); 
        var wi = 0; 
        var wlen = wrappers.length; 
        for (; wi < wlen; wi++) { 
            if (wrappers[wi].getAttribute('data-kind') === kind) { 
                return wrappers[wi]; 
            } 
        } 
        return null; 
    } 
    
    if (document.readyState === 'complete' || document.readyState === 'interactive') { 
        initCollapse(); 
    } else { 
        document.addEventListener('DOMContentLoaded', initCollapse); 
    } 
})();