Türk Telekom eSIM

`).join('') : ''; this.el.visualTrack.style.transform = 'translateX(0%)'; } renderMobile() { const list = this.getList(); if (!list || !this.el.mobileStepsTrack || !this.el.mobileIndicators) return; const steps = list.querySelectorAll('.esim-activation-step'); this.el.mobileStepsTrack.innerHTML = Array.from(steps).map(s => { const num = s.dataset.step; const title = s.querySelector('.esim-step-header h3')?.innerHTML || ''; let desc = s.querySelector('.esim-step-description')?.innerHTML || ''; const isPlatformStep = (this.state.method === 'esim-transfer' && num === '7') || (this.state.method === 'new-subscriber' && num === '12'); if (isPlatformStep && desc) { const acc = new DOMParser().parseFromString(desc, 'text/html').querySelector('.esim-platform-accordion'); if (acc) { const ios = acc.querySelector('[data-accordion="ios"]')?.nextElementSibling?.innerHTML || ''; const android = acc.querySelector('[data-accordion="android"]')?.nextElementSibling?.innerHTML || ''; const p = this.state.platform; desc = ` `; } } return ``; }).join(''); this.el.mobileIndicators.innerHTML = Array.from(steps).map((s, i) => `` ).join(''); requestAnimationFrame(() => requestAnimationFrame(() => this.initReadMore())); } renderMobileVisuals() { if (!this.el.mobileVisualTrack || this.isRendering) return; this.isRendering = true; const imgs = this.getImages(); const currentImg = this.el.mobileVisualTrack.querySelector('img'); if (currentImg && currentImg.src === imgs[0]) { this.isRendering = false; return; } this.el.mobileVisualTrack.style.transition = 'opacity 0.15s ease-out'; this.el.mobileVisualTrack.style.opacity = '0'; setTimeout(() => { this.el.mobileVisualTrack.innerHTML = imgs.length ? imgs.map(src => ``).join('') : ''; this.el.mobileVisualTrack.style.transform = 'translateX(0%)'; const newImg = this.el.mobileVisualTrack.querySelector('img'); const show = () => { this.el.mobileVisualTrack.style.opacity = '1'; setTimeout(() => { this.isRendering = false; }, 200); }; if (newImg && !newImg.complete) { newImg.onload = show; setTimeout(show, 500); } else { requestAnimationFrame(show); } }, 150); } initReadMore() { if (window.innerWidth > 990) return; document.querySelectorAll('.esim-mobile-step-card').forEach(card => { const desc = card.querySelector('.esim-mobile-step-description'); if (!desc) return; card.classList.remove('has-overflow', 'is-expanded'); card.querySelectorAll('.esim-read-more').forEach(b => b.remove()); desc.classList.add('esim-measure-height'); const naturalHeight = desc.scrollHeight; desc.classList.remove('esim-measure-height'); if (naturalHeight <= 54) return; card.classList.add('has-overflow'); const btn = document.createElement('button'); btn.className = 'esim-read-more'; btn.textContent = 'Devamını oku'; btn.addEventListener('click', e => { e.stopPropagation(); e.preventDefault(); btn.textContent = card.classList.toggle('is-expanded') ? 'Daha az göster' : 'Devamını oku'; }); card.appendChild(btn); }); } updatePlatformOnly() { this.renderDesktop(); this.renderMobileVisuals(); document.querySelectorAll('.esim-mobile-step-card.is-expanded').forEach(card => { card.classList.remove('is-expanded'); const btn = card.querySelector('.esim-read-more'); if (btn) btn.textContent = 'Devamını oku'; }); const p = this.state.platform; document.querySelectorAll('.esim-mobile-platform-btn').forEach(btn => { const active = btn.dataset.platform === p; btn.classList.toggle('esim-mobile-platform-btn--active', active); const dot = btn.querySelector('.radio-dot'); if (dot) dot.style.display = active ? 'block' : 'none'; }); document.querySelectorAll('.esim-mobile-platform-radio').forEach(radio => { const btn = radio.querySelector('.esim-mobile-platform-btn'); radio.classList.toggle('esim-mobile-platform-radio--active', btn?.dataset.platform === p); }); document.querySelectorAll('.esim-mobile-platform-content').forEach(content => content.classList.toggle('esim-mobile-platform-content--active', content.dataset.platform === p) ); } updateScrollbar() { if (!this.el.scrollable || !this.el.scrollbar) return; const max = this.el.scrollable.scrollHeight - this.el.scrollable.clientHeight; this.el.scrollbar.style.setProperty('--scroll-position', max <= 0 ? '0px' : `${(this.el.scrollable.scrollTop / max) * 328}px`); } } document.readyState === 'loading' ? document.addEventListener('DOMContentLoaded', () => new ESIMActivation()) : new ESIMActivation();