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

Страница интерфейса MediaWiki
Нет описания правки
Метка: отменено
Нет описания правки
 
(не показано 30 промежуточных версий этого же участника)
Строка 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 emptyMsg=q(section,'.ss-empty');
var count=Math.max(30,Math.floor(w/30));
      var visibleCount=0;
for(var i=0;i<count;i++){
      cards.forEach(function(card){
flakes.push({
        var who=card.getAttribute('data-artist');
x:rand(0,w),
        var show=(val==='all'||val===who);
y:rand(-h, h),
        card.classList.toggle('ss-hidden',!show);
r:rand(0.8,2.6),
        if(show)visibleCount++;
vx:rand(-0.3,0.3),
      });
vy:rand(0.4,1.2),
      if(!emptyMsg){
o:rand(0.3,0.9)
        emptyMsg=document.createElement('div');
});
        emptyMsg.className='ss-empty';
}
        emptyMsg.innerHTML='Нет артов у этого автора';
}
        section.appendChild(emptyMsg);
var raf=window.requestAnimationFrame||window.webkitRequestAnimationFrame||function(fn){setTimeout(fn,16);};
      }
function loop(){
      emptyMsg.style.display=visibleCount===0?'block':'none';
ctx.clearRect(0,0,w,h);
    });
ctx.beginPath();
  }
for(var i=0;i<flakes.length;i++){
 
var f=flakes[i];
  chips.forEach(function(ch){
f.x+=f.vx;
    ch.addEventListener('click',function(){
f.y+=f.vy;
      setFilter(ch.getAttribute('data-filter'))
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);
  setFilter('all');
f.y=-10;
 
f.vx=rand(-0.3,0.3);
  var modal=document.createElement('div');
f.vy=rand(0.4,1.2);
  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>';
ctx.moveTo(f.x,f.y);
  root.appendChild(modal);
ctx.arc(f.x,f.y,f.r,0,Math.PI*2);
  var modalImg=q(modal,'.ss-modal-img');
}
  function originalFromThumb(u){
ctx.fillStyle='rgba(255,255,255,0.9)';
    if(!u)return u;
ctx.fill();
    if(u.indexOf('/thumb/')>-1){
raf(loop);
      var s=u.replace('/thumb/','/');
}
      s=s.replace(/\/[^\/]*$/,'');
window.addEventListener('resize',resize);
      return s
resize();
    }
loop();
    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()}})
})();
})();

Текущая версия от 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();
})();