|
Метки: очистка ручная отмена |
| Строка 1: |
Строка 1: |
| (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=(val==='all' || visibleCount>0)?'block':'none';
| |
| });
| |
| }
| |
|
| |
| 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(e){
| |
| e.preventDefault();
| |
| var src=originalFromThumb(img.getAttribute('src'));
| |
| modalImg.setAttribute('src',src||img.getAttribute('src'));
| |
| modalImg.style.maxWidth='90vw';
| |
| modalImg.style.maxHeight='90vh';
| |
| 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()}})
| |
| })();
| |
