Javascript in neue Dateien ausgelagert
This commit is contained in:
Matthias Grief
31
webseite/assets/js/search.js
Normal file
31
webseite/assets/js/search.js
Normal 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
83
webseite/assets/js/sidebar.js
Normal 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);
|
||||||
@@ -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://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||||
<script src="https://cdn.tailwindcss.com"></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 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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
@@ -51,7 +53,7 @@ $topics = $subjectData->topics;
|
|||||||
oninput="handleSearch()">
|
oninput="handleSearch()">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="main-content">
|
<div class="main-content max-w-7xl">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|
||||||
<?php
|
<?php
|
||||||
@@ -122,124 +124,6 @@ $topics = $subjectData->topics;
|
|||||||
</div>
|
</div>
|
||||||
</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 -->
|
<!-- Code injected by live-server -->
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -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://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||||
<script src="https://cdn.tailwindcss.com"></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 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>
|
</head>
|
||||||
<body>
|
<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); ?>]">
|
<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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user