You've already forked Openterface_assets
mirror of
https://github.com/TechxArtisanStudio/Openterface_assets.git
synced 2025-06-10 16:33:42 -07:00
refactor: remove old Twitter loading code, add Gibby dialogue and slideshow functionality
This commit is contained in:
@@ -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');
|
||||
|
||||
|
@@ -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
42
src/js/twitter-tweet.js
Normal 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);
|
||||
}
|
||||
});
|
Reference in New Issue
Block a user