MediaWiki:Test.js

Замечание: Возможно, после публикации вам придётся очистить кэш своего браузера, чтобы увидеть изменения.

• Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl+F5 или Ctrl+R (⌘+R на Mac)
• Google Chrome: Нажмите Ctrl+Shift+R (⌘+Shift+R на Mac)
• Internet Explorer / Edge: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl+F5
• Opera: Нажмите Ctrl+F5.

(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-section').forEach(function(section){
      var cards=qa(section,'.ss-card');
      var visibleCount=0;
      cards.forEach(function(card){
        var who=card.getAttribute('data-artist');
        var show=(val==='all'||val===who);
        card.classList.toggle('ss-hidden',!show);
        if(show)visibleCount++;
      });
      // секция остаётся видимой всегда, только её карточки скрываются
      section.style.display='';
    });
  }

  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()}})
})();