Safak/SWE
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Javascript in neue Dateien ausgelagert

Browse Source
This commit is contained in:
Matthias Grief
2024-11-19 13:17:01 +01:00
parent 0b87c1fc7c
commit bd173d296d
4 changed files with 118 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
webseite/assets/js/search.js Normal file
View File

@@ -0,0 +1,31 @@
// Update search function with fallback animation
function handleSearch() {
const searchTerm = document.getElementById('searchInput').value.toLowerCase();
const topicCards = document.querySelectorAll('.topic-card');
topicCards.forEach(card => {
const title = card.querySelector('.topic-title')?.textContent.toLowerCase() || '';
const description = card.querySelector('.topic-description')?.textContent.toLowerCase() || '';
const relatedTopics = Array.from(card.querySelectorAll('.related-topics li'))
.map(li => li.textContent.toLowerCase())
.join(' ');
const content = `${title} ${description} ${relatedTopics}`;
if (content.includes(searchTerm)) {
card.style.display = 'block';
if (window.gsap) {
gsap.to(card, {
opacity: 1,
y: 0,
duration: 0.3
});
} else {
card.style.opacity = 1;
card.style.transform = 'translateY(0)';
}
} else {
card.style.display = 'none';
}
});
}

83
webseite/assets/js/sidebar.js Normal file
View File

@@ -0,0 +1,83 @@
document.addEventListener('DOMContentLoaded', () => {
const menuToggle = document.querySelector('.menu-toggle');
const sidebar = document.querySelector('.sidebar');
// Function to handle sidebar toggle
function toggleSidebar() {
sidebar.classList.toggle('active');
// Add overlay when sidebar is active on mobile/tablet
if (window.innerWidth <= 1024) {
if (sidebar.classList.contains('active')) {
addOverlay();
} else {
removeOverlay();
}
}
}
// Function to add overlay
function addOverlay() {
const overlay = document.createElement('div');
overlay.className = 'sidebar-overlay';
overlay.style.cssText = `
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 45;
transition: opacity 0.3s ease;
`;
document.body.appendChild(overlay);
// Close sidebar when clicking overlay
overlay.addEventListener('click', () => {
sidebar.classList.remove('active');
removeOverlay();
});
// Fade in
requestAnimationFrame(() => {
overlay.style.opacity = '1';
});
}
// Function to remove overlay
function removeOverlay() {
const overlay = document.querySelector('.sidebar-overlay');
if (overlay) {
overlay.style.opacity = '0';
setTimeout(() => overlay.remove(), 300);
}
}
// Add click event to menu toggle
menuToggle.addEventListener('click', toggleSidebar);
// Handle window resize
let resizeTimer;
window.addEventListener('resize', () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
if (window.innerWidth > 1024) {
sidebar.classList.remove('active');
removeOverlay();
}
}, 250);
});
});
// Add this right after your existing toggleSidebar function
function updateMenuVisibility() {
const menuToggle = document.querySelector('.menu-toggle');
if (window.innerWidth <= 768) { // Smartphone breakpoint
menuToggle.style.display = 'flex';
} else {
menuToggle.style.display = 'none';
}
}
// Add event listeners
window.addEventListener('resize', updateMenuVisibility);

122
webseite/subject.php
View File

@@ -25,6 +25,8 @@ $topics = $subjectData->topics;
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script src="assets/js/sidebar.js"></script>
<script src="assets/js/search.js"></script>
</head>
<body>
@@ -51,7 +53,7 @@ $topics = $subjectData->topics;
oninput="handleSearch()">
</div>
<div class="main-content">
<div class="main-content max-w-7xl">
<div class="container">
<?php
@@ -122,124 +124,6 @@ $topics = $subjectData->topics;
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const menuToggle = document.querySelector('.menu-toggle');
const sidebar = document.querySelector('.sidebar');
// Function to handle sidebar toggle
function toggleSidebar() {
sidebar.classList.toggle('active');
// Add overlay when sidebar is active on mobile/tablet
if (window.innerWidth <= 1024) {
if (sidebar.classList.contains('active')) {
addOverlay();
} else {
removeOverlay();
}
}
}
// Function to add overlay
function addOverlay() {
const overlay = document.createElement('div');
overlay.className = 'sidebar-overlay';
overlay.style.cssText = `
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 45;
transition: opacity 0.3s ease;
`;
document.body.appendChild(overlay);
// Close sidebar when clicking overlay
overlay.addEventListener('click', () => {
sidebar.classList.remove('active');
removeOverlay();
});
// Fade in
requestAnimationFrame(() => {
overlay.style.opacity = '1';
});
}
// Function to remove overlay
function removeOverlay() {
const overlay = document.querySelector('.sidebar-overlay');
if (overlay) {
overlay.style.opacity = '0';
setTimeout(() => overlay.remove(), 300);
}
}
// Add click event to menu toggle
menuToggle.addEventListener('click', toggleSidebar);
// Handle window resize
let resizeTimer;
window.addEventListener('resize', () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
if (window.innerWidth > 1024) {
sidebar.classList.remove('active');
removeOverlay();
}
}, 250);
});
});
// Add this right after your existing toggleSidebar function
function updateMenuVisibility() {
const menuToggle = document.querySelector('.menu-toggle');
if (window.innerWidth <= 768) { // Smartphone breakpoint
menuToggle.style.display = 'flex';
} else {
menuToggle.style.display = 'none';
}
}
// Add event listeners
window.addEventListener('resize', updateMenuVisibility);
// Update search function with fallback animation
function handleSearch() {
const searchTerm = document.getElementById('searchInput').value.toLowerCase();
const topicCards = document.querySelectorAll('.topic-card');
topicCards.forEach(card => {
const title = card.querySelector('.topic-title')?.textContent.toLowerCase() || '';
const description = card.querySelector('.topic-description')?.textContent.toLowerCase() || '';
const relatedTopics = Array.from(card.querySelectorAll('.related-topics li'))
.map(li => li.textContent.toLowerCase())
.join(' ');
const content = `${title} ${description} ${relatedTopics}`;
if (content.includes(searchTerm)) {
card.style.display = 'block';
if (window.gsap) {
gsap.to(card, {
opacity: 1,
y: 0,
duration: 0.3
});
} else {
card.style.opacity = 1;
card.style.transform = 'translateY(0)';
}
} else {
card.style.display = 'none';
}
});
}
</script>
<!-- Code injected by live-server -->
</body>
</html>

86
webseite/topic.php
View File

@@ -31,6 +31,7 @@ if (!isset($topicData)) {
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script src="assets/js/sidebar.js"></script>
</head>
<body>
<button class="menu-toggle fixed top-4 left-4 z-50 bg-white h-12 w-12 border-2 p-1 hover:border-[<?php echo($subjectData->color); ?>]">
@@ -106,91 +107,6 @@ if (!isset($topicData)) {
</ul>
</div>
</main>
<script>
document.addEventListener('DOMContentLoaded', () => {
const menuToggle = document.querySelector('.menu-toggle');
const sidebar = document.querySelector('.sidebar');
// Function to handle sidebar toggle
function toggleSidebar() {
sidebar.classList.toggle('active');
// Add overlay when sidebar is active on mobile/tablet
if (window.innerWidth <= 1024) {
if (sidebar.classList.contains('active')) {
addOverlay();
} else {
removeOverlay();
}
}
}
// Function to add overlay
function addOverlay() {
const overlay = document.createElement('div');
overlay.className = 'sidebar-overlay';
overlay.style.cssText = `
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 45;
transition: opacity 0.3s ease;
`;
document.body.appendChild(overlay);
// Close sidebar when clicking overlay
overlay.addEventListener('click', () => {
sidebar.classList.remove('active');
removeOverlay();
});
// Fade in
requestAnimationFrame(() => {
overlay.style.opacity = '1';
});
}
// Function to remove overlay
function removeOverlay() {
const overlay = document.querySelector('.sidebar-overlay');
if (overlay) {
overlay.style.opacity = '0';
setTimeout(() => overlay.remove(), 300);
}
}
// Add click event to menu toggle
menuToggle.addEventListener('click', toggleSidebar);
// Handle window resize
let resizeTimer;
window.addEventListener('resize', () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
if (window.innerWidth > 1024) {
sidebar.classList.remove('active');
removeOverlay();
}
}, 250);
});
});
// Add this right after your existing toggleSidebar function
function updateMenuVisibility() {
const menuToggle = document.querySelector('.menu-toggle');
if (window.innerWidth <= 768) { // Smartphone breakpoint
menuToggle.style.display = 'flex';
} else {
menuToggle.style.display = 'none';
}
}
// Add event listeners
window.addEventListener('resize', updateMenuVisibility);
</script>
</body>
</html>