// CryptoVista Header Component
class CustomHeader extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
`;
this.initializeComponent();
}
initializeComponent() {
setTimeout(() => {
this.setupEventListeners();
if (window.feather) {
window.feather.replace();
}
}, 0);
}
setupEventListeners() {
// Search functionality
const searchInput = this.shadowRoot.getElementById('cryptoSearch');
const searchResults = this.shadowRoot.getElementById('searchResults');
if (searchInput && searchResults) {
searchInput.addEventListener('input', this.handleSearch.bind(this));
// Hide results when clicking outside
document.addEventListener('click', (e) => {
if (!this.shadowRoot.contains(e.target)) {
searchResults.classList.add('hidden');
}
});
}
// Refresh button
const refreshButton = this.shadowRoot.querySelectorAll('.btn-icon')[0];
if (refreshButton) {
refreshButton.addEventListener('click', () => {
// Add loading animation
const icon = refreshButton.querySelector('i[data-feather]');
refreshButton.disabled = true;
// Dispatch refresh event
document.dispatchEvent(new CustomEvent('dashboard:refresh'));
// Re-enable after 2 seconds
setTimeout(() => {
refreshButton.disabled = false;
}, 2000);
});
}
// Download button
const downloadButton = this.shadowRoot.querySelectorAll('.btn-icon')[1];
if (downloadButton) {
downloadButton.addEventListener('click', () => {
// Simulate download
this.generateReport();