mirror of
https://github.com/Theodor-Springmann-Stiftung/kgpz_web.git
synced 2025-10-29 17:15:31 +00:00
better page styling
This commit is contained in:
Simon Martens
@@ -132,10 +132,29 @@ function markCurrentPageInInhaltsverzeichnis(pageNumber) {
|
||||
}
|
||||
|
||||
function markCurrentPagesInInhaltsverzeichnis(pageNumbers) {
|
||||
// Reset all page container borders to default
|
||||
document.querySelectorAll('[data-page-container]').forEach(container => {
|
||||
if (container.hasAttribute('data-beilage')) {
|
||||
container.classList.remove('border-red-500');
|
||||
container.classList.add('border-amber-400');
|
||||
} else {
|
||||
container.classList.remove('border-red-500');
|
||||
container.classList.add('border-slate-300');
|
||||
}
|
||||
});
|
||||
|
||||
// Reset all page numbers in Inhaltsverzeichnis
|
||||
document.querySelectorAll('.page-number-inhalts').forEach(pageNum => {
|
||||
pageNum.classList.remove('bg-red-500', 'text-white');
|
||||
pageNum.classList.add('text-slate-700');
|
||||
pageNum.style.textDecoration = '';
|
||||
pageNum.style.pointerEvents = '';
|
||||
// Restore hover effects
|
||||
if (pageNum.classList.contains('bg-blue-50')) {
|
||||
pageNum.classList.add('hover:bg-blue-100');
|
||||
} else if (pageNum.classList.contains('bg-amber-50')) {
|
||||
pageNum.classList.add('hover:bg-amber-100');
|
||||
}
|
||||
// Restore original background colors
|
||||
if (pageNum.classList.contains('bg-amber-50')) {
|
||||
// Keep amber background for Beilage pages
|
||||
@@ -145,11 +164,34 @@ function markCurrentPagesInInhaltsverzeichnis(pageNumbers) {
|
||||
}
|
||||
});
|
||||
|
||||
// Reset all containers and links in Inhaltsverzeichnis
|
||||
document.querySelectorAll('.inhalts-entry').forEach(container => {
|
||||
container.classList.add('hover:bg-slate-100');
|
||||
container.style.cursor = '';
|
||||
});
|
||||
|
||||
document.querySelectorAll('.inhalts-entry .author-link').forEach(link => {
|
||||
link.style.textDecoration = '';
|
||||
link.style.pointerEvents = '';
|
||||
link.classList.remove('no-underline');
|
||||
});
|
||||
|
||||
document.querySelectorAll('.inhalts-entry a[href*="/"]').forEach(link => {
|
||||
link.style.textDecoration = '';
|
||||
link.style.pointerEvents = '';
|
||||
link.classList.remove('no-underline');
|
||||
if (link.classList.contains('bg-blue-50')) {
|
||||
link.classList.add('hover:bg-blue-100');
|
||||
}
|
||||
});
|
||||
|
||||
// Find and highlight the current page numbers
|
||||
const highlightedElements = [];
|
||||
const highlightedRanges = new Set(); // Track which ranges we've already highlighted
|
||||
|
||||
pageNumbers.forEach(pageNumber => {
|
||||
// Convert pageNumber to integer for comparison
|
||||
const currentPageNum = parseInt(pageNumber);
|
||||
// Look for all entries that should be highlighted for this page
|
||||
const allPageNumbers = document.querySelectorAll('.page-number-inhalts');
|
||||
|
||||
@@ -159,13 +201,50 @@ function markCurrentPagesInInhaltsverzeichnis(pageNumbers) {
|
||||
const rangeKey = `${startPage}-${endPage}`;
|
||||
|
||||
// Check if this page falls within this range
|
||||
if (pageNumber >= startPage && pageNumber <= endPage) {
|
||||
if (currentPageNum >= startPage && currentPageNum <= endPage) {
|
||||
// Only highlight this range once, even if multiple visible pages fall within it
|
||||
if (!highlightedRanges.has(rangeKey)) {
|
||||
pageNumElement.classList.remove('bg-blue-50', 'bg-amber-50', 'text-slate-700');
|
||||
pageNumElement.classList.remove('bg-blue-50', 'bg-amber-50', 'text-slate-700', 'hover:bg-blue-100', 'hover:bg-amber-100');
|
||||
pageNumElement.classList.add('bg-red-500', 'text-white');
|
||||
pageNumElement.style.textDecoration = 'none';
|
||||
pageNumElement.style.pointerEvents = 'none';
|
||||
highlightedElements.push(pageNumElement);
|
||||
highlightedRanges.add(rangeKey);
|
||||
|
||||
// Highlight the page container's left border
|
||||
const pageContainer = document.querySelector(`[data-page-container="${startPage}"]`);
|
||||
if (pageContainer) {
|
||||
pageContainer.classList.remove('border-slate-300', 'border-amber-400');
|
||||
pageContainer.classList.add('border-red-500');
|
||||
}
|
||||
|
||||
// Also make links in the current article non-clickable and remove hover effects
|
||||
const parentEntry = pageNumElement.closest('.mb-4');
|
||||
if (parentEntry) {
|
||||
// Remove hover effects from the container
|
||||
const entryContainers = parentEntry.querySelectorAll('.inhalts-entry');
|
||||
entryContainers.forEach(container => {
|
||||
container.classList.remove('hover:bg-slate-100');
|
||||
container.style.cursor = 'default';
|
||||
});
|
||||
|
||||
// Make all links non-clickable and remove underlines
|
||||
parentEntry.querySelectorAll('.author-link').forEach(link => {
|
||||
link.style.textDecoration = 'none';
|
||||
link.style.pointerEvents = 'none';
|
||||
link.classList.add('no-underline');
|
||||
});
|
||||
|
||||
// Also handle issue reference links
|
||||
parentEntry.querySelectorAll('a[href*="/"]').forEach(link => {
|
||||
if (link.getAttribute('aria-current') === 'page') {
|
||||
link.style.textDecoration = 'none';
|
||||
link.style.pointerEvents = 'none';
|
||||
link.classList.add('no-underline');
|
||||
link.classList.remove('hover:bg-blue-100');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -266,14 +345,13 @@ function shareCurrentPage() {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function copyToClipboard(text, button) {
|
||||
if (navigator.clipboard) {
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
// Show temporary notification
|
||||
showNotification('Link kopiert!', 'success', button);
|
||||
showSimplePopup(button, 'Link kopiert!');
|
||||
}).catch(err => {
|
||||
console.error('Failed to copy:', err);
|
||||
showNotification('Kopieren fehlgeschlagen', 'error', button);
|
||||
showSimplePopup(button, 'Kopieren fehlgeschlagen');
|
||||
});
|
||||
} else {
|
||||
// Fallback for older browsers
|
||||
@@ -282,13 +360,13 @@ function copyToClipboard(text, button) {
|
||||
document.body.appendChild(textarea);
|
||||
textarea.select();
|
||||
try {
|
||||
document.execCommand('copy');
|
||||
showNotification('Link kopiert!', 'success', button);
|
||||
const successful = document.execCommand('copy');
|
||||
showSimplePopup(button, successful ? 'Link kopiert!' : 'Kopieren fehlgeschlagen');
|
||||
} catch (err) {
|
||||
console.error('Fallback copy failed:', err);
|
||||
showNotification('Kopieren fehlgeschlagen', 'error', button);
|
||||
showSimplePopup(button, 'Kopieren fehlgeschlagen');
|
||||
} finally {
|
||||
document.body.removeChild(textarea);
|
||||
}
|
||||
document.body.removeChild(textarea);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -303,44 +381,188 @@ function generateCitation() {
|
||||
const currentDate = new Date().toLocaleDateString('de-DE');
|
||||
const citation = `Königsberger Gelehrte und Politische Zeitung (KGPZ). ${issueInfo}. Digital verfügbar unter: ${currentUrl} (Zugriff: ${currentDate}).`;
|
||||
|
||||
// Copy citation to clipboard
|
||||
copyToClipboard(citation, button);
|
||||
// Copy to clipboard
|
||||
if (navigator.clipboard) {
|
||||
navigator.clipboard.writeText(citation).then(() => {
|
||||
showSimplePopup(button, 'Zitation kopiert!');
|
||||
}).catch(err => {
|
||||
showSimplePopup(button, 'Kopieren fehlgeschlagen');
|
||||
});
|
||||
} else {
|
||||
// Fallback for older browsers
|
||||
const textarea = document.createElement('textarea');
|
||||
textarea.value = citation;
|
||||
document.body.appendChild(textarea);
|
||||
textarea.select();
|
||||
try {
|
||||
const successful = document.execCommand('copy');
|
||||
showSimplePopup(button, successful ? 'Zitation kopiert!' : 'Kopieren fehlgeschlagen');
|
||||
} catch (err) {
|
||||
showSimplePopup(button, 'Kopieren fehlgeschlagen');
|
||||
} finally {
|
||||
document.body.removeChild(textarea);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function showNotification(message, type = 'success', button) {
|
||||
// Remove any existing notifications
|
||||
const existingNotification = document.getElementById('notification');
|
||||
if (existingNotification) {
|
||||
existingNotification.remove();
|
||||
function showSimplePopup(button, message) {
|
||||
// Remove any existing popup
|
||||
const existingPopup = document.querySelector('.simple-popup');
|
||||
if (existingPopup) {
|
||||
existingPopup.remove();
|
||||
}
|
||||
|
||||
// Create notification element
|
||||
const notification = document.createElement('div');
|
||||
notification.id = 'notification';
|
||||
notification.className = `fixed px-3 py-2 rounded-md text-white text-sm font-medium z-50 transition-opacity duration-300 ${
|
||||
type === 'success' ? 'bg-green-500' : 'bg-red-500'
|
||||
}`;
|
||||
notification.textContent = message;
|
||||
// Create popup element
|
||||
const popup = document.createElement('div');
|
||||
popup.className = 'simple-popup';
|
||||
popup.textContent = message;
|
||||
|
||||
// Style the popup
|
||||
popup.style.cssText = `
|
||||
position: fixed;
|
||||
background: #374151;
|
||||
color: white;
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
white-space: nowrap;
|
||||
`;
|
||||
|
||||
// Position notification next to button if button is provided
|
||||
if (button) {
|
||||
const buttonRect = button.getBoundingClientRect();
|
||||
notification.style.left = `${buttonRect.left - 80}px`; // Position to the left of button
|
||||
notification.style.top = `${buttonRect.top + buttonRect.height / 2 - 20}px`; // Center vertically with button
|
||||
} else {
|
||||
// Fallback to top-right corner
|
||||
notification.className += ' top-4 right-4';
|
||||
}
|
||||
// Position popup next to button
|
||||
const buttonRect = button.getBoundingClientRect();
|
||||
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||
const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
|
||||
|
||||
popup.style.left = (buttonRect.left + scrollLeft - 10) + 'px';
|
||||
popup.style.top = (buttonRect.bottom + scrollTop + 8) + 'px';
|
||||
|
||||
// Add to page
|
||||
document.body.appendChild(notification);
|
||||
document.body.appendChild(popup);
|
||||
|
||||
// Auto-remove after 3 seconds
|
||||
// Fade in
|
||||
setTimeout(() => {
|
||||
notification.style.opacity = '0';
|
||||
popup.style.opacity = '1';
|
||||
}, 10);
|
||||
|
||||
// Auto-remove after 2 seconds
|
||||
setTimeout(() => {
|
||||
popup.style.opacity = '0';
|
||||
setTimeout(() => {
|
||||
notification.remove();
|
||||
}, 300);
|
||||
}, 3000);
|
||||
if (popup.parentNode) {
|
||||
popup.remove();
|
||||
}
|
||||
}, 200);
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
// Function to copy page permalink
|
||||
function copyPagePermalink(pageNumber, button, isBeilage = false) {
|
||||
let pageFragment = '';
|
||||
if (isBeilage) {
|
||||
pageFragment = `#beilage-1-page-${pageNumber}`;
|
||||
} else {
|
||||
pageFragment = `#page-${pageNumber}`;
|
||||
}
|
||||
|
||||
const currentUrl = window.location.origin + window.location.pathname + pageFragment;
|
||||
|
||||
// Copy to clipboard
|
||||
if (navigator.clipboard) {
|
||||
navigator.clipboard.writeText(currentUrl).then(() => {
|
||||
showSimplePopup(button, 'Link kopiert!');
|
||||
}).catch(err => {
|
||||
showSimplePopup(button, 'Kopieren fehlgeschlagen');
|
||||
});
|
||||
} else {
|
||||
// Fallback for older browsers
|
||||
const textarea = document.createElement('textarea');
|
||||
textarea.value = currentUrl;
|
||||
document.body.appendChild(textarea);
|
||||
textarea.select();
|
||||
try {
|
||||
const successful = document.execCommand('copy');
|
||||
showSimplePopup(button, successful ? 'Link kopiert!' : 'Kopieren fehlgeschlagen');
|
||||
} catch (err) {
|
||||
showSimplePopup(button, 'Kopieren fehlgeschlagen');
|
||||
} finally {
|
||||
document.body.removeChild(textarea);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Handle hash navigation to scroll to specific pages
|
||||
function scrollToPageFromHash() {
|
||||
const hash = window.location.hash;
|
||||
let pageNumber = '';
|
||||
let targetContainer = null;
|
||||
|
||||
if (hash.startsWith('#page-')) {
|
||||
pageNumber = hash.replace('#page-', '');
|
||||
|
||||
// Try to find exact page container first
|
||||
targetContainer = document.getElementById(`page-${pageNumber}`);
|
||||
|
||||
// If not found, try to find container that contains this page
|
||||
if (!targetContainer) {
|
||||
// Look for double-spread containers that contain this page
|
||||
const containers = document.querySelectorAll('.newspaper-page-container[data-pages]');
|
||||
for (const container of containers) {
|
||||
const pages = container.getAttribute('data-pages');
|
||||
if (pages && pages.split(',').includes(pageNumber)) {
|
||||
targetContainer = container;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// If still not found, try beilage containers
|
||||
if (!targetContainer) {
|
||||
targetContainer = document.getElementById(`beilage-1-page-${pageNumber}`) ||
|
||||
document.getElementById(`beilage-2-page-${pageNumber}`) ||
|
||||
document.querySelector(`[id*="beilage"][id*="page-${pageNumber}"]`);
|
||||
}
|
||||
} else if (hash.startsWith('#beilage-')) {
|
||||
// Handle beilage-specific hashes like #beilage-1-page-101
|
||||
const match = hash.match(/#beilage-(\d+)-page-(\d+)/);
|
||||
if (match) {
|
||||
const beilageNum = match[1];
|
||||
pageNumber = match[2];
|
||||
targetContainer = document.getElementById(`beilage-${beilageNum}-page-${pageNumber}`);
|
||||
}
|
||||
}
|
||||
|
||||
if (targetContainer && pageNumber) {
|
||||
setTimeout(() => {
|
||||
targetContainer.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
|
||||
// Highlight the specific page in the table of contents
|
||||
markCurrentPageInInhaltsverzeichnis(pageNumber);
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
|
||||
// Function to copy page permalink
|
||||
function copyPagePermalink(pageNumber, button, isBeilage = false) {
|
||||
let pageFragment = '';
|
||||
if (isBeilage) {
|
||||
pageFragment = `#beilage-1-page-${pageNumber}`;
|
||||
} else {
|
||||
pageFragment = `#page-${pageNumber}`;
|
||||
}
|
||||
|
||||
const currentUrl = window.location.origin + window.location.pathname + pageFragment;
|
||||
copyToClipboardWithMessage(currentUrl, button, 'Link kopiert!');
|
||||
}
|
||||
|
||||
// Initialize hash handling
|
||||
document.addEventListener('DOMContentLoaded', scrollToPageFromHash);
|
||||
window.addEventListener('hashchange', scrollToPageFromHash);
|
||||
</script>
|
||||
Reference in New Issue
Block a user