/**
* R10 Modern Theme - JavaScript
* MyBB 1.8.x için interaktif özellikler
*/
(function() {
'use strict';
// ---- Dark/Light Mode Toggle (gelecekte kullanılabilir) ----
const ThemeManager = {
init: function() {
this.bindEvents();
},
bindEvents: function() {
// Scroll-based navbar effect
window.addEventListener('scroll', this.handleScroll.bind(this));
// Mobile menu toggle
const mobileToggle = document.querySelector('.mobile-menu-toggle');
if (mobileToggle) {
mobileToggle.addEventListener('click', this.toggleMobileMenu.bind(this));
}
// Search expand
const searchInput = document.querySelector('.search-box input');
if (searchInput) {
searchInput.addEventListener('focus', function() {
this.parentElement.classList.add('active');
});
searchInput.addEventListener('blur', function() {
if (!this.value) {
this.parentElement.classList.remove('active');
}
});
}
// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
const target = document.querySelector(this.getAttribute('href'));
if (target) {
e.preventDefault();
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
});
// Post action buttons
this.initPostActions();
// Lazy load images
this.initLazyLoad();
// Notification dropdown
this.initNotifications();
},
handleScroll: function() {
const nav = document.getElementById('top-nav');
if (!nav) return;
if (window.scrollY > 10) {
nav.style.boxShadow = '0 4px 20px rgba(0,0,0,0.3)';
} else {
nav.style.boxShadow = 'none';
}
},
toggleMobileMenu: function(e) {
e.preventDefault();
const navLinks = document.querySelector('.nav-links');
if (navLinks) {
navLinks.classList.toggle('mobile-open');
}
},
initPostActions: function() {
// Quote button functionality
document.querySelectorAll('.post-action-btn[data-action="quote"]').forEach(btn => {
btn.addEventListener('click', function(e) {
e.preventDefault();
const postId = this.closest('.post').dataset.postId;
if (postId) {
this.showToast('Alıntı hazırlanıyor...', 'info');
}
});
});
// Like/Thanks button
document.querySelectorAll('.post-action-btn[data-action="like"]').forEach(btn => {
btn.addEventListener('click', function(e) {
e.preventDefault();
this.classList.toggle('active');
const icon = this.querySelector('.icon');
if (this.classList.contains('active')) {
this.style.background = 'rgba(63, 185, 80, 0.2)';
this.style.borderColor = 'rgba(63, 185, 80, 0.3)';
this.style.color = '#3fb950';
this.showToast('Teşekkür edildi!', 'success');
} else {
this.style.background = '';
this.style.borderColor = '';
this.style.color = '';
}
});
});
},
initLazyLoad: function() {
if ('IntersectionObserver' in window) {
const imageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
if (img.dataset.src) {
img.src = img.dataset.src;
img.removeAttribute('data-src');
img.classList.add('loaded');
}
observer.unobserve(img);
}
});
});
document.querySelectorAll('img[data-src]').forEach(img => {
imageObserver.observe(img);
});
}
},
initNotifications: function() {
const bell = document.querySelector('.notification-bell');
if (!bell) return;
let dropdown = null;
bell.addEventListener('click', function(e) {
e.preventDefault();
if (dropdown) {
dropdown.remove();
dropdown = null;
return;
}
dropdown = document.createElement('div');
dropdown.className = 'notification-dropdown';
dropdown.innerHTML = `
`;
dropdown.style.cssText = `
position: absolute;
top: calc(100% + 8px);
right: 0;
width: 320px;
background: #1c2128;
border: 1px solid #30363d;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
z-index: 1000;
overflow: hidden;
`;
bell.style.position = 'relative';
bell.appendChild(dropdown);
// Close on outside click
setTimeout(() => {
document.addEventListener('click', function closeDropdown(e) {
if (!bell.contains(e.target)) {
if (dropdown) {
dropdown.remove();
dropdown = null;
}
document.removeEventListener('click', closeDropdown);
}
});
}, 10);
});
},
showToast: function(message, type = 'info') {
const toast = document.createElement('div');
toast.className = `toast toast-${type}`;
toast.textContent = message;
toast.style.cssText = `
position: fixed;
bottom: 24px;
right: 24px;
padding: 12px 20px;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
z-index: 9999;
animation: slideIn 0.3s ease;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
`;
const colors = {
success: 'background: rgba(63, 185, 80, 0.9); color: #fff;',
error: 'background: rgba(248, 81, 73, 0.9); color: #fff;',
warning: 'background: rgba(211, 153, 34, 0.9); color: #fff;',
info: 'background: rgba(88, 166, 255, 0.9); color: #fff;'
};
toast.style.cssText += colors[type] || colors.info;
document.body.appendChild(toast);
setTimeout(() => {
toast.style.animation = 'slideOut 0.3s ease';
setTimeout(() => toast.remove(), 300);
}, 3000);
}
};
// ---- Forum Statistics Animation ----
const StatsAnimator = {
init: function() {
const stats = document.querySelectorAll('.stat-number, .profile-stat-item .value');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
this.animateNumber(entry.target);
observer.unobserve(entry.target);
}
});
}, { threshold: 0.5 });
stats.forEach(stat => observer.observe(stat));
},
animateNumber: function(element) {
const finalValue = parseInt(element.textContent.replace(/[^0-9]/g, '')) || 0;
if (finalValue === 0) return;
const duration = 1000;
const start = performance.now();
const prefix = element.textContent.match(/^[^0-9]*/)?.[0] || '';
const suffix = element.textContent.match(/[^0-9]*$/)?.[0] || '';
const animate = (currentTime) => {
const elapsed = currentTime - start;
const progress = Math.min(elapsed / duration, 1);
const easeOut = 1 - Math.pow(1 - progress, 3);
const current = Math.floor(finalValue * easeOut);
element.textContent = prefix + current.toLocaleString() + suffix;
if (progress < 1) {
requestAnimationFrame(animate);
}
};
requestAnimationFrame(animate);
}
};
// ---- Thread Preview on Hover ----
const ThreadPreview = {
init: function() {
document.querySelectorAll('.thread-title a').forEach(link => {
link.addEventListener('mouseenter', this.showPreview.bind(this));
link.addEventListener('mouseleave', this.hidePreview.bind(this));
});
},
showPreview: function(e) {
// Placeholder for future implementation
// Could fetch and show thread preview via AJAX
},
hidePreview: function(e) {
// Placeholder for future implementation
}
};
// ---- Initialize Everything ----
document.addEventListener('DOMContentLoaded', function() {
ThemeManager.init();
StatsAnimator.init();
ThreadPreview.init();
// Add slide animations
const style = document.createElement('style');
style.textContent = `
@keyframes slideIn {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOut {
from { transform: translateX(0); opacity: 1; }
to { transform: translateX(100%); opacity: 0; }
}
`;
document.head.appendChild(style);
});
})();