`; /*]+src="([^"]+)"/g)].map(m => m[1]); const images = rawLinks.map(url => { if (url.includes('googleusercontent.com') || url.includes('blogspot.com')) { return url.replace(/\/s\d+(-c)?\//, "/s1600/").replace(/=s\d+(-c)?/, "=s0"); } return url; }); // 2. STATE const state = { totalPages: images.length, currentPage: 0, modes: ['long-strip', 'single-page', 'double-page'], modeIdx: 0, fits: ['fit-width', 'fit-height', 'original'], fitIdx: 0 }; // 3. SELECTORS const wrapper = doc.getElementById('manga-system-wrapper'); const reader = doc.getElementById('zeist-manga-reader'); const readerParent = doc.getElementById('zeist-manga-reader-parent'); const bottomUI = doc.getElementById('bottom-nav-system'); const segmentContainer = doc.getElementById('segmented-progress-container'); const counter = doc.getElementById('page-counter'); // 4. RENDERER & SEGMENT INITIALIZER function renderImages() { if (images.length === 0) return; reader.innerHTML = ''; images.forEach((src, i) => { const div = doc.createElement('div'); div.className = "manga-page-wrapper relative w-full flex items-center justify-center bg-black overflow-hidden"; div.dataset.index = i; const img = doc.createElement('img'); img.dataset.src = src; img.className = "max-w-full h-auto block transition-opacity duration-500 opacity-0"; img.onload = () => img.classList.remove('opacity-0'); div.appendChild(img); reader.appendChild(div); }); initProgressSegments(); setupObservers(); applySettings(); } function initProgressSegments() { if (!segmentContainer) return; segmentContainer.innerHTML = ''; for (let i = 0; i < state.totalPages; i++) { const seg = doc.createElement('div'); // Gunakan h-full agar mengisi container h-2 (8px) seg.className = "h-full flex-1 cursor-pointer transition-all duration-200 segment-item border-x border-transparent"; seg.dataset.target = i; seg.onclick = (e) => { e.preventDefault(); state.currentPage = i; applySettings(); win.scrollTo({ top: readerParent.offsetTop - 10, behavior: 'smooth' }); }; segmentContainer.appendChild(seg); } } // 5. SETTINGS LOGIC function applySettings() { const mode = state.modes[state.modeIdx]; const fit = state.fits[state.fitIdx]; const pages = reader.querySelectorAll('.manga-page-wrapper'); if (mode === 'long-strip') { bottomUI.classList.add('hidden'); wrapper.classList.remove('pb-24'); } else { bottomUI.classList.remove('hidden'); wrapper.classList.add('pb-24'); } pages.forEach((page, i) => { const img = page.querySelector('img'); if (!img) return; if (mode === 'long-strip') { page.style.display = 'block'; page.style.width = '100%'; page.style.marginBottom = '4px'; } else if (mode === 'single-page') { page.style.display = (i === state.currentPage) ? 'flex' : 'none'; page.style.width = '100%'; } else if (mode === 'double-page') { const start = state.currentPage % 2 === 0 ? state.currentPage : state.currentPage - 1; const isShown = (i === start || i === start + 1); page.style.display = isShown ? 'inline-flex' : 'none'; page.style.width = isShown ? '50%' : '100%'; } img.style.maxHeight = (fit === 'fit-height') ? 'calc(100vh - 150px)' : 'none'; img.style.objectFit = (fit === 'fit-height') ? 'contain' : 'initial'; img.style.width = (fit === 'original') ? 'auto' : '100%'; img.style.maxWidth = (fit === 'original') ? 'none' : '100%'; }); updateUI(); } // 6. UI UPDATER (Segment Colors) function updateUI() { const modeMeta = { 'long-strip': 'view_day', 'single-page': 'description', 'double-page': 'auto_awesome_motion' }; const modeText = { 'long-strip': 'Long Strip', 'single-page': 'Single Page', 'double-page': 'Double Page' }; const fitMeta = { 'fit-width': 'fit_screen', 'fit-height': 'height', 'original': 'photo_size_select_actual' }; const fitText = { 'fit-width': 'Fit Width', 'fit-height': 'Fit Height', 'original': 'Original' }; doc.getElementById('mode-icon').innerText = modeMeta[state.modes[state.modeIdx]]; doc.getElementById('mode-text').innerText = modeText[state.modes[state.modeIdx]]; doc.getElementById('fit-icon').innerText = fitMeta[state.fits[state.fitIdx]]; doc.getElementById('fit-text').innerText = fitText[state.fits[state.fitIdx]]; counter.innerText = `${state.currentPage + 1} / ${state.totalPages}`; // Update Segments Styling const segments = doc.querySelectorAll('.segment-item'); segments.forEach((seg, idx) => { const targetIdx = parseInt(seg.dataset.target); // Reset classes seg.className = "h-full flex-1 cursor-pointer transition-all duration-200 segment-item"; const isCurrent = (targetIdx === state.currentPage); const isRead = (targetIdx < state.currentPage); const isDoubleActive = (state.modes[state.modeIdx] === 'double-page' && targetIdx === state.currentPage + 1 && state.currentPage % 2 === 0); if (isCurrent || isDoubleActive) { // ACTIVE STATE seg.classList.add('bg-(--accent)', 'z-10'); seg.style.opacity = "1"; } else if (isRead) { // READ STATE seg.classList.add('bg-(--accent)'); seg.style.opacity = "0.3"; } else { // UNREAD STATE seg.classList.add('bg-(--shade-13)'); seg.style.opacity = "1"; } }); } // 7. NAVIGATION function navigate(dir) { const mode = state.modes[state.modeIdx]; const step = (mode === 'double-page') ? 2 : 1; if (dir === 'next') { if (state.currentPage + step < state.totalPages) state.currentPage += step; } else { if (state.currentPage - step >= 0) state.currentPage -= step; } applySettings(); if (mode !== 'long-strip') win.scrollTo({ top: readerParent.offsetTop - 10, behavior: 'smooth' }); } // 8. OBSERVERS function setupObservers() { const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target.querySelector('img'); if (img && img.dataset.src) { img.src = img.dataset.src; delete img.dataset.src; } if (state.modes[state.modeIdx] === 'long-strip') { state.currentPage = parseInt(entry.target.dataset.index); updateUI(); } } }); }, { rootMargin: '1200px', threshold: 0.1 }); doc.querySelectorAll('.manga-page-wrapper').forEach(p => observer.observe(p)); } // 9. EVENTS function initEvents() { doc.getElementById('width-range').addEventListener('input', (e) => { const val = e.target.value; readerParent.style.maxWidth = `${400 + (val / 100) * 1200}px`; doc.getElementById('width-value').innerText = `${val}%`; }); doc.getElementById('mode-toggle').onclick = (e) => { e.preventDefault(); state.modeIdx = (state.modeIdx + 1) % state.modes.length; applySettings(); }; doc.getElementById('fit-toggle').onclick = (e) => { e.preventDefault(); state.fitIdx = (state.fitIdx + 1) % state.fits.length; applySettings(); }; doc.getElementById('btn-prev').onclick = () => navigate('prev'); doc.getElementById('btn-next').onclick = () => navigate('next'); doc.addEventListener('keydown', (e) => { if (e.key === 'ArrowRight' || e.key === 'd') navigate('next'); if (e.key === 'ArrowLeft' || e.key === 'a') navigate('prev'); }); } doc.addEventListener('DOMContentLoaded', () => { renderImages(); initEvents(); }); })(document, window); /*]]>*/