forked from vyla-entertainment/home-frontend
55 lines
1.9 KiB
JavaScript
55 lines
1.9 KiB
JavaScript
import { qs, isMobileViewport } from '../utils/dom.js';
|
|
import { copyToClipboard, flashFeedback, flashClass } from '../utils/clipboard.js';
|
|
import { typewriterReveal } from '../animations/typewriter.js';
|
|
import { initFluidByteField } from '../animations/fluid-byte-field.js';
|
|
import { DISCORD_LOADER_SCRIPT, COPY_FEEDBACK_DURATION_MS } from '../config/constants.js';
|
|
|
|
const HERO_GREETING = 'Vyla Home';
|
|
|
|
function initHeroTitle() {
|
|
const heroTitle = qs('.hero-title');
|
|
if (heroTitle) typewriterReveal(heroTitle, HERO_GREETING);
|
|
}
|
|
|
|
function initDiscordCopyBar() {
|
|
const copyBtn = document.getElementById('copy-discord-btn');
|
|
const copyLabel = document.getElementById('copy-discord-label');
|
|
const copyIcon = document.getElementById('copy-discord-icon');
|
|
if (!copyBtn) return;
|
|
|
|
copyBtn.addEventListener('click', async () => {
|
|
await copyToClipboard(DISCORD_LOADER_SCRIPT);
|
|
if (copyIcon) flashClass(copyIcon, 'copied', COPY_FEEDBACK_DURATION_MS);
|
|
});
|
|
}
|
|
|
|
function initHeroCopyButton() {
|
|
const heroCopyScriptBtn = document.getElementById('hero-copy-script-btn');
|
|
if (!heroCopyScriptBtn) return;
|
|
|
|
heroCopyScriptBtn.addEventListener('click', async () => {
|
|
await copyToClipboard(DISCORD_LOADER_SCRIPT);
|
|
flashFeedback(heroCopyScriptBtn, 'Copied!', COPY_FEEDBACK_DURATION_MS);
|
|
});
|
|
}
|
|
|
|
function initCtaCopyButton() {
|
|
const ctaCopyScriptBtn = document.getElementById('cta-copy-script-btn');
|
|
if (!ctaCopyScriptBtn) return;
|
|
|
|
ctaCopyScriptBtn.addEventListener('click', async () => {
|
|
await copyToClipboard(DISCORD_LOADER_SCRIPT);
|
|
flashFeedback(ctaCopyScriptBtn, 'Copied!', COPY_FEEDBACK_DURATION_MS);
|
|
});
|
|
}
|
|
|
|
export function initHeroSection() {
|
|
initHeroTitle();
|
|
initDiscordCopyBar();
|
|
initHeroCopyButton();
|
|
initCtaCopyButton();
|
|
if (!isMobileViewport()) {
|
|
initFluidByteField('hero-byte-overlay');
|
|
initFluidByteField('cta-byte-overlay');
|
|
}
|
|
} |