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

Страница интерфейса MediaWiki
Нет описания правки
Метка: отменено
Нет описания правки
 
(не показана 31 промежуточная версия этого же участника)
Строка 1: Строка 1:
(function(){
(function(){
  var root=document.getElementById('ss-art-gallery');
var canvas=document.createElement('canvas');
  if(!root)return;
canvas.style.position='fixed';
  function q(a,b){return a.querySelector(b)}
canvas.style.left='0';
  function qa(a,b){return Array.prototype.slice.call(a.querySelectorAll(b))}
canvas.style.top='0';
  var chips=qa(root,'.ss-chip');
canvas.style.width='100%';
 
canvas.style.height='100%';
  function setFilter(val){
canvas.style.pointerEvents='none';
    chips.forEach(function(c){
canvas.style.zIndex='9999';
      c.classList.toggle('ss-chip-active',
document.documentElement.appendChild(canvas);
        c.getAttribute('data-filter')===val || (val==='all'&&c.getAttribute('data-filter')==='all')
var ctx=canvas.getContext('2d');
      );
var w=0,h=0,flakes=[];
    });
function resize(){w=canvas.width=window.innerWidth;h=canvas.height=window.innerHeight;initFlakes();}
 
function rand(a,b){return Math.random()*(b-a)+a;}
    qa(root,'.ss-section').forEach(function(section){
function initFlakes(){
      var cards=qa(section,'.ss-card');
flakes=[];
      var visibleCount=0;
var count=Math.max(30,Math.floor(w/30));
      cards.forEach(function(card){
for(var i=0;i<count;i++){
        var who=card.getAttribute('data-artist');
flakes.push({
        var show=(val==='all'||val===who);
x:rand(0,w),
        card.classList.toggle('ss-hidden',!show);
y:rand(-h, h),
        if(show)visibleCount++;
r:rand(0.8,2.6),
      });
vx:rand(-0.3,0.3),
      // секция остаётся видимой всегда, только её карточки скрываются
vy:rand(0.4,1.2),
      section.style.display='';
o:rand(0.3,0.9)
    });
});
  }
}
 
}
  chips.forEach(function(ch){
var raf=window.requestAnimationFrame||window.webkitRequestAnimationFrame||function(fn){setTimeout(fn,16);};
    ch.addEventListener('click',function(){
function loop(){
      setFilter(ch.getAttribute('data-filter'))
ctx.clearRect(0,0,w,h);
    })
ctx.beginPath();
  });
for(var i=0;i<flakes.length;i++){
  setFilter('all');
var f=flakes[i];
 
f.x+=f.vx;
  var modal=document.createElement('div');
f.y+=f.vy;
  modal.className='ss-modal';
f.vx+=Math.sin((Date.now()+i*100)%6000/6000*Math.PI*2)*0.005;
  modal.innerHTML='<div class="ss-modal-inner"><img class="ss-modal-img" alt=""/></div><div class="ss-modal-close" role="button">✖ Закрыть</div>';
if(f.y>h+10||f.x<-50||f.x>w+50){
  root.appendChild(modal);
f.x=rand(0,w);
  var modalImg=q(modal,'.ss-modal-img');
f.y=-10;
  function originalFromThumb(u){
f.vx=rand(-0.3,0.3);
    if(!u)return u;
f.vy=rand(0.4,1.2);
    if(u.indexOf('/thumb/')>-1){
}
      var s=u.replace('/thumb/','/');
ctx.moveTo(f.x,f.y);
      s=s.replace(/\/[^\/]*$/,'');
ctx.arc(f.x,f.y,f.r,0,Math.PI*2);
      return s
}
    }
ctx.fillStyle='rgba(255,255,255,0.9)';
    return u
ctx.fill();
  }
raf(loop);
  qa(root,'.ss-card img').forEach(function(img){
}
    img.style.cursor='zoom-in';
window.addEventListener('resize',resize);
    img.addEventListener('click',function(){
resize();
      var src=originalFromThumb(img.getAttribute('src'));
loop();
      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()}})
})();
})();

Текущая версия от 23:41, 22 ноября 2025

(function(){
var canvas=document.createElement('canvas');
canvas.style.position='fixed';
canvas.style.left='0';
canvas.style.top='0';
canvas.style.width='100%';
canvas.style.height='100%';
canvas.style.pointerEvents='none';
canvas.style.zIndex='9999';
document.documentElement.appendChild(canvas);
var ctx=canvas.getContext('2d');
var w=0,h=0,flakes=[];
function resize(){w=canvas.width=window.innerWidth;h=canvas.height=window.innerHeight;initFlakes();}
function rand(a,b){return Math.random()*(b-a)+a;}
function initFlakes(){
flakes=[];
var count=Math.max(30,Math.floor(w/30));
for(var i=0;i<count;i++){
flakes.push({
x:rand(0,w),
y:rand(-h, h),
r:rand(0.8,2.6),
vx:rand(-0.3,0.3),
vy:rand(0.4,1.2),
o:rand(0.3,0.9)
});
}
}
var raf=window.requestAnimationFrame||window.webkitRequestAnimationFrame||function(fn){setTimeout(fn,16);};
function loop(){
ctx.clearRect(0,0,w,h);
ctx.beginPath();
for(var i=0;i<flakes.length;i++){
var f=flakes[i];
f.x+=f.vx;
f.y+=f.vy;
f.vx+=Math.sin((Date.now()+i*100)%6000/6000*Math.PI*2)*0.005;
if(f.y>h+10||f.x<-50||f.x>w+50){
f.x=rand(0,w);
f.y=-10;
f.vx=rand(-0.3,0.3);
f.vy=rand(0.4,1.2);
}
ctx.moveTo(f.x,f.y);
ctx.arc(f.x,f.y,f.r,0,Math.PI*2);
}
ctx.fillStyle='rgba(255,255,255,0.9)';
ctx.fill();
raf(loop);
}
window.addEventListener('resize',resize);
resize();
loop();
})();