refactor: remove old Twitter loading code, add Gibby dialogue and slideshow functionality

This commit is contained in:
Billy Wang
2025-04-21 18:23:27 +08:00
parent 04f7f840aa
commit 8a248f99de
3 changed files with 43 additions and 105 deletions

View File

@@ -1,70 +1,4 @@
window.onload = function () {
// Hide the loading message when tweets are loaded
var hideLoadingMessage = function () {
var loadingMessage = document.getElementById('loadingMessage');
if (loadingMessage) {
loadingMessage.style.display = 'none';
}
};
// Check if the Twitter widgets script is loaded
if (typeof twttr !== 'undefined') {
twttr.widgets.load(
document.getElementById("twitter-feed")
);
twttr.events.bind('loaded', function (event) {
// Hide loading message
hideLoadingMessage();
// Find all twitter tweets and show them
var tweets = document.querySelectorAll('.twitter-tweet');
tweets.forEach(function (tweet) {
tweet.classList.add('twitter-tweet-loaded');
});
// Unhide the twitter feed
var loadingMessage = document.getElementById('twitter-feed');
if (loadingMessage) {
loadingMessage.style.display = 'block';
}
});
} else {
var loadingMessage = document.getElementById('twitter-feed');
if (loadingMessage) {
loadingMessage.style.display = 'none';
}
}
// New Twitter navigation code
const initTwitterNavigation = () => {
const twitterPosts = document.querySelector('.twitter-posts');
const prevButton = document.querySelector('.twitter-nav-prev');
const nextButton = document.querySelector('.twitter-nav-next');
if (twitterPosts && prevButton && nextButton) {
const tweetWidth = 300; // Width of each tweet
const scrollAmount = tweetWidth + 16; // Width + gap
prevButton.addEventListener('click', () => {
twitterPosts.scrollBy({
left: -scrollAmount,
behavior: 'smooth'
});
});
nextButton.addEventListener('click', () => {
twitterPosts.scrollBy({
left: scrollAmount,
behavior: 'smooth'
});
});
}
};
// Initialize after a short delay to ensure tweets are loaded
setTimeout(initTwitterNavigation, 200);
};
// Gibby dialogue functionality
document.addEventListener('DOMContentLoaded', function () {
const dialogue = document.querySelector('.gibby-dialogue');

View File

@@ -1,38 +0,0 @@
document.addEventListener('DOMContentLoaded', function() {
const form = document.getElementById('subscribe-form');
const message = document.getElementById('form-message');
form.addEventListener('submit', function(event) {
event.preventDefault();
// Set the source input to the current page's domain (protocol + domain + port)
const sourceInput = form.querySelector('input[name="source"]');
sourceInput.value = window.location.origin;
const formData = new FormData(form);
const data = {};
formData.forEach((value, key) => { data[key] = value; });
fetch('https://script.google.com/macros/s/AKfycbwBqXSVZWT5GBsq5bPyz6xqF_RR7JZhK9PyszpvcztgZf3HbXhB4bUFALgkNq-DBpp2/exec', {
method: 'POST',
mode: 'no-cors',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: new URLSearchParams(data).toString(),
})
.then(response => {
message.style.display = 'block';
message.style.color = '#df4d3f';
message.textContent = 'Thank you for subscribing!';
form.reset();
setTimeout(() => { message.style.display = 'none'; }, 5000);
})
.catch(error => {
message.style.display = 'block';
message.style.color = 'red';
message.textContent = 'Error subscribing. Please try again.';
console.error('Error:', error);
});
});
});

42
src/js/twitter-tweet.js Normal file
View File

@@ -0,0 +1,42 @@
// Gibby dialogue functionality
document.addEventListener('DOMContentLoaded', function () {
const dialogue = document.querySelector('.gibby-dialogue');
function toggleDialogue() {
dialogue.style.display = 'block';
setTimeout(() => {
dialogue.style.display = 'none';
setTimeout(toggleDialogue, 2000); // Wait 2 seconds before showing again
}, 20000); // Show for 20 seconds
}
// Start the cycle after 1 second
setTimeout(toggleDialogue, 1000);
});
// Slideshow functionality
document.addEventListener("DOMContentLoaded", function () {
let slideIndex = 0;
showSlides();
function showSlides() {
const slides = document.getElementsByClassName("slides");
// Hide all slides
for (let i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
// Increment slide index and reset if needed
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}
// Show the current slide
slides[slideIndex - 1].style.display = "block";
// Change slide every 6 seconds
setTimeout(showSlides, 6000);
}
});