107 lines
3.6 KiB
JavaScript
107 lines
3.6 KiB
JavaScript
// Enhanced Sticky Price Display
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const priceDisplay = document.getElementById('priceDisplay');
|
|
const currentPrice = document.getElementById('currentPrice');
|
|
|
|
if (!priceDisplay) return;
|
|
|
|
// Show price display when calculator starts
|
|
function showPriceDisplay() {
|
|
if (priceDisplay.classList.contains('hidden')) {
|
|
priceDisplay.classList.remove('hidden');
|
|
priceDisplay.classList.add('visible');
|
|
}
|
|
}
|
|
|
|
// Enhanced scroll behavior
|
|
let scrollTimeout;
|
|
window.addEventListener('scroll', function() {
|
|
const scrollY = window.scrollY;
|
|
|
|
// Show/hide based on scroll position
|
|
if (scrollY > 100) {
|
|
showPriceDisplay();
|
|
priceDisplay.classList.add('scrolled');
|
|
} else {
|
|
priceDisplay.classList.remove('scrolled');
|
|
}
|
|
|
|
// Clear previous timeout
|
|
clearTimeout(scrollTimeout);
|
|
|
|
// Add subtle bounce effect
|
|
scrollTimeout = setTimeout(() => {
|
|
priceDisplay.style.transform = 'translateX(0) scale(1)';
|
|
}, 150);
|
|
});
|
|
|
|
// Price update animation
|
|
const originalUpdatePrice = window.updatePrice || function() {};
|
|
window.updatePrice = function(price, animate = true) {
|
|
if (currentPrice && animate) {
|
|
// Add updating animation
|
|
currentPrice.classList.add('updating');
|
|
|
|
// Update price after brief delay
|
|
setTimeout(() => {
|
|
currentPrice.textContent = price;
|
|
currentPrice.classList.remove('updating');
|
|
}, 150);
|
|
} else if (currentPrice) {
|
|
currentPrice.textContent = price;
|
|
}
|
|
|
|
// Show price display when price is calculated
|
|
showPriceDisplay();
|
|
|
|
// Call original function if it exists
|
|
if (typeof originalUpdatePrice === 'function') {
|
|
originalUpdatePrice(price, animate);
|
|
}
|
|
};
|
|
|
|
// Monitor calculator interactions
|
|
const calculator = document.querySelector('[data-calculator]') || document.querySelector('.calculator-container');
|
|
if (calculator) {
|
|
// Show price display when user interacts with calculator
|
|
const inputs = calculator.querySelectorAll('input, select, button');
|
|
inputs.forEach(input => {
|
|
input.addEventListener('change', showPriceDisplay);
|
|
input.addEventListener('click', showPriceDisplay);
|
|
});
|
|
}
|
|
|
|
// Enhanced visibility on mobile
|
|
function handleMobileVisibility() {
|
|
if (window.innerWidth <= 1024) {
|
|
priceDisplay.classList.remove('fixed');
|
|
priceDisplay.classList.add('relative');
|
|
} else {
|
|
priceDisplay.classList.remove('relative');
|
|
priceDisplay.classList.add('fixed');
|
|
}
|
|
}
|
|
|
|
// Initial check and resize listener
|
|
handleMobileVisibility();
|
|
window.addEventListener('resize', handleMobileVisibility);
|
|
|
|
// Smooth reveal animation
|
|
setTimeout(() => {
|
|
if (priceDisplay && !priceDisplay.classList.contains('hidden')) {
|
|
priceDisplay.style.transition = 'all 0.5s cubic-bezier(0.4, 0, 0.2, 1)';
|
|
}
|
|
}, 100);
|
|
|
|
// Auto-show after initial page load
|
|
setTimeout(showPriceDisplay, 1000);
|
|
});
|
|
|
|
// Helper function for other scripts to trigger price display
|
|
window.showStickyPrice = function() {
|
|
const priceDisplay = document.getElementById('priceDisplay');
|
|
if (priceDisplay) {
|
|
priceDisplay.classList.remove('hidden');
|
|
priceDisplay.classList.add('visible');
|
|
}
|
|
}; |