Skip to content

Commit 92345b8

Browse files
omarakhmedov-webomarakhmedov-web
authored
Update script.js
1 parent f2a1fa0 commit 92345b8

1 file changed

Lines changed: 76 additions & 51 deletions

File tree

‎script.js‎

Lines changed: 76 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -648,61 +648,86 @@ document.querySelectorAll('.cta-bot').forEach(a => { a.href='https://t.me/Metrid
648648
window.addEventListener('load', function(){ setTimeout(boot, 50); });
649649
})();
650650

651-
/* === AURUM-DELTA MIN: reliable close for zoom === */
652-
(function(){
653-
// Lock scroll when any .mdx-lightbox is open
654-
const body = document.body;
655-
function lock(){ body && body.classList.add('mdx-locked'); }
656-
function unlock(){ body && body.classList.remove('mdx-locked'); }
657-
// Observe lightbox open/close to toggle body lock
658-
const lb = document.querySelector('.mdx-lightbox');
659-
if(lb){
660-
const obs = new MutationObserver(()=>{
661-
if(lb.classList.contains('open')) lock(); else unlock();
662-
});
663-
obs.observe(lb, {attributes:true, attributeFilter:['class']});
664-
}
665-
// Universal close handler (capture to beat bubbling)
666-
function doClose(box){
667-
if(!box) return;
668-
box.classList.remove('open');
669-
box.setAttribute('hidden','');
670-
unlock();
671-
}
672-
document.addEventListener('click', function(e){
673-
const closeBtn = e.target.closest && e.target.closest('.mdx-lightbox .mdx-close, .mdx-lightbox [data-close]');
674-
if(closeBtn){
675-
e.preventDefault(); e.stopPropagation();
676-
doClose(closeBtn.closest('.mdx-lightbox'));
677-
} else {
678-
// click on backdrop closes
679-
const box = e.target.classList && e.target.classList.contains('mdx-lightbox') ? e.target : null;
680-
if(box){ e.preventDefault(); e.stopPropagation(); doClose(box); }
681-
}
682-
}, true);
683-
document.addEventListener('keydown', function(e){
684-
const box = document.querySelector('.mdx-lightbox.open');
685-
if(!box) return;
686-
if(e.key === 'Escape'){ e.preventDefault(); e.stopPropagation(); doClose(box); }
687-
}, true);
688-
})();
689651

690652

691-
// === Lightbox harden (2025-10-02) ===
653+
654+
// === SG v1 (2025-10-02) — screens block rebuilt cleanly ===
692655
(function(){
693-
const lb = document.querySelector('.mdx-lightbox');
694-
if(!lb) return;
695-
// Always attach to body to avoid stacking-context issues
696-
if(lb.parentElement !== document.body){
656+
// Build (or reuse) a single lightbox in <body>
657+
let lb = document.querySelector('.sg-lightbox');
658+
if(!lb){
659+
lb = document.createElement('div');
660+
lb.className = 'sg-lightbox';
661+
lb.setAttribute('hidden','');
662+
lb.innerHTML = [
663+
'<button class="sg-close" aria-label="Close">✕</button>',
664+
'<button class="sg-lb-prev" aria-label="Prev">❮</button>',
665+
'<img class="sg-lb-img" alt="Preview">',
666+
'<button class="sg-lb-next" aria-label="Next">❯</button>'
667+
].join('');
697668
document.body.appendChild(lb);
669+
}else{
670+
// Ensure correct inner markup
671+
lb.innerHTML = [
672+
'<button class="sg-close" aria-label="Close">✕</button>',
673+
'<button class="sg-lb-prev" aria-label="Prev">❮</button>',
674+
'<img class="sg-lb-img" alt="Preview">',
675+
'<button class="sg-lb-next" aria-label="Next">❯</button>'
676+
].join('');
698677
}
699678
const body = document.body;
700-
const lbImg = lb.querySelector('.mdx-lb-img');
701-
const btnClose = lb.querySelector('.mdx-close');
702-
const btnPrev = lb.querySelector('.mdx-lb-prev');
703-
const btnNext = lb.querySelector('.mdx-lb-next');
704-
705-
// If previous handlers exist, remove by cloning (simple reset)
706-
const lbClone = lb.cloneNode(true);
707-
lb.replaceWith(lbClone);
679+
const imgEl = lb.querySelector('.sg-lb-img');
680+
const btnClose = lb.querySelector('.sg-close');
681+
const btnPrev = lb.querySelector('.sg-lb-prev');
682+
const btnNext = lb.querySelector('.sg-lb-next');
683+
684+
let groups = {};
685+
let current = { key:null, i:-1 };
686+
687+
// Init carousels
688+
document.querySelectorAll('#screens .sg-card').forEach(card => {
689+
const key = card.getAttribute('data-group') || 'G';
690+
const imgs = Array.from(card.querySelectorAll('.sg-track img')).map(x => x.getAttribute('src'));
691+
groups[key] = imgs;
692+
693+
// Click to open
694+
card.querySelectorAll('.sg-track img').forEach((im, i) => {
695+
im.addEventListener('click', () => openLB(key, i));
696+
});
697+
698+
// Arrows: scroll container by card width
699+
const track = card.querySelector('.sg-track');
700+
card.querySelector('.sg-prev').addEventListener('click', () => track.scrollBy({ left: -track.clientWidth, behavior: 'smooth' }));
701+
card.querySelector('.sg-next').addEventListener('click', () => track.scrollBy({ left: track.clientWidth, behavior: 'smooth' }));
702+
});
703+
704+
function openLB(key, i){
705+
current.key = key; current.i = i;
706+
imgEl.setAttribute('src', groups[key][i]);
707+
lb.classList.add('open');
708+
lb.removeAttribute('hidden');
709+
body.classList.add('sg-no-scroll');
710+
}
711+
function closeLB(){
712+
lb.classList.remove('open');
713+
lb.setAttribute('hidden','');
714+
body.classList.remove('sg-no-scroll');
715+
}
716+
function step(d){
717+
const arr = groups[current.key] || [];
718+
if(!arr.length) return;
719+
current.i = (current.i + d + arr.length) % arr.length;
720+
imgEl.setAttribute('src', arr[current.i]);
721+
}
722+
723+
btnClose.addEventListener('click', closeLB);
724+
btnPrev.addEventListener('click', () => step(-1));
725+
btnNext.addEventListener('click', () => step(1));
726+
lb.addEventListener('click', (e) => { if(e.target === lb) closeLB(); });
727+
document.addEventListener('keydown', (e) => {
728+
if(!lb.classList.contains('open')) return;
729+
if(e.key === 'Escape') closeLB();
730+
if(e.key === 'ArrowLeft') step(-1);
731+
if(e.key === 'ArrowRight') step(1);
732+
});
708733
})();

0 commit comments

Comments
 (0)