Clean working solution - simplified JavaScript
- Simplified JavaScript to only handle year timeline sections - Fixed overflow-y: auto to enable scrolling - Remove interference with footer and other content - Keep all markdown content unchanged - Create proper story structure without breaking existing elements - Add quick navigation and interactive year sections - Clean, maintainable approach
This commit is contained in:
parent
32264deb5a
commit
45a3c27e45
2 changed files with 26 additions and 23 deletions
|
|
@ -3,7 +3,8 @@
|
||||||
background: linear-gradient(135deg, #0A1929 0%, #1A2332 50%, #0F172A 100%);
|
background: linear-gradient(135deg, #0A1929 0%, #1A2332 50%, #0F172A 100%);
|
||||||
background-attachment: fixed;
|
background-attachment: fixed;
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow-y: auto;
|
||||||
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Logo styling */
|
/* Logo styling */
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,9 @@
|
||||||
// Journey Page JavaScript - Convert markdown to interactive timeline
|
// Simple Journey Page JavaScript - Only handle year timeline
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
console.log('Journey.js loaded - DOM content loaded');
|
console.log('Journey.js loaded - DOM content loaded');
|
||||||
|
|
||||||
// Find the container with story content
|
|
||||||
const container = document.querySelector('.container') || document.querySelector('main');
|
|
||||||
if (!container) {
|
|
||||||
console.log('No container found');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('Container found, looking for year sections...');
|
|
||||||
|
|
||||||
// Find all h2 elements that contain years
|
// Find all h2 elements that contain years
|
||||||
const yearHeaders = Array.from(container.querySelectorAll('h2')).filter(h2 => {
|
const yearHeaders = Array.from(document.querySelectorAll('h2')).filter(h2 => {
|
||||||
const text = h2.textContent;
|
const text = h2.textContent;
|
||||||
return /\d{4}/.test(text);
|
return /\d{4}/.test(text);
|
||||||
});
|
});
|
||||||
|
|
@ -25,6 +16,13 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Wrap everything in story structure
|
// Wrap everything in story structure
|
||||||
|
const container = document.querySelector('.container') || document.querySelector('main');
|
||||||
|
if (!container) {
|
||||||
|
console.log('No container found');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create story structure but only wrap year sections
|
||||||
const storyPage = document.createElement('div');
|
const storyPage = document.createElement('div');
|
||||||
storyPage.className = 'story-page';
|
storyPage.className = 'story-page';
|
||||||
|
|
||||||
|
|
@ -34,17 +32,13 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||||
const storyThread = document.createElement('div');
|
const storyThread = document.createElement('div');
|
||||||
storyThread.className = 'story-thread';
|
storyThread.className = 'story-thread';
|
||||||
|
|
||||||
// Move all content to new structure
|
// Move all content from original container to new structure
|
||||||
while (container.firstChild) {
|
while (container.firstChild) {
|
||||||
storyContainer.appendChild(container.firstChild);
|
storyThread.appendChild(container.firstChild);
|
||||||
}
|
}
|
||||||
|
|
||||||
storyThread.appendChild(storyContainer);
|
// Now convert only the h2 year sections
|
||||||
storyPage.appendChild(storyThread);
|
const allH2Elements = storyThread.querySelectorAll('h2');
|
||||||
container.appendChild(storyPage);
|
|
||||||
|
|
||||||
// Now convert h2 elements to collapsible sections
|
|
||||||
const allH2Elements = storyContainer.querySelectorAll('h2');
|
|
||||||
const sections = [];
|
const sections = [];
|
||||||
|
|
||||||
allH2Elements.forEach((h2, index) => {
|
allH2Elements.forEach((h2, index) => {
|
||||||
|
|
@ -104,7 +98,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Add click handlers
|
// Add click handlers for the year sections
|
||||||
sections.forEach(section => {
|
sections.forEach(section => {
|
||||||
const header = section.querySelector('.year-header');
|
const header = section.querySelector('.year-header');
|
||||||
const content = section.querySelector('.year-content');
|
const content = section.querySelector('.year-content');
|
||||||
|
|
@ -152,7 +146,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
storyContainer.insertBefore(quickJump, storyThread);
|
storyThread.insertBefore(quickJump, storyThread);
|
||||||
|
|
||||||
// Add jump handlers
|
// Add jump handlers
|
||||||
quickJump.querySelectorAll('.jump-to-year').forEach(btn => {
|
quickJump.querySelectorAll('.jump-to-year').forEach(btn => {
|
||||||
|
|
@ -169,5 +163,13 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log('Story conversion completed with', sections.length, 'sections');
|
// Wrap everything in story structure
|
||||||
|
storyPage.appendChild(storyContainer);
|
||||||
|
storyPage.appendChild(storyThread);
|
||||||
|
|
||||||
|
// Replace the original container content with the new structure
|
||||||
|
container.innerHTML = '';
|
||||||
|
container.appendChild(storyPage);
|
||||||
|
|
||||||
|
console.log('Story conversion completed with', sections.length, 'year sections');
|
||||||
});
|
});
|
||||||
Loading…
Add table
Reference in a new issue