class FloatingControls extends HTMLElement {
constructor() {
super();
this.hasFile = false;
}
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
`;
this.setupEventListeners();
this.updateState();
}
setupEventListeners() {
// Listen for events from script.js to know when file is loaded
document.addEventListener('file-selected', () => {
this.hasFile = true;
this.updateState();
});
document.addEventListener('reset-app', () => {
this.hasFile = false;
this.updateState();
});
// Button click handlers
this.shadowRoot.getElementById('analyze-btn').addEventListener('click', () => {
this.dispatchEvent(new CustomEvent('analyze-pdf', { bubbles: true, composed: true }));
});
this.shadowRoot.getElementById('ocr-btn').addEventListener('click', () => {
this.dispatchEvent(new CustomEvent('ocr-thai', { bubbles: true, composed: true }));
});
this.shadowRoot.getElementById('copy-btn').addEventListener('click', () => {
this.dispatchEvent(new CustomEvent('copy-all', { bubbles: true, composed: true }));
});
this.shadowRoot.getElementById('export-json-btn').addEventListener('click', () => {
this.dispatchEvent(new CustomEvent('export-json', { bubbles: true, composed: true }));
});
this.shadowRoot.getElementById('export-csv-btn').addEventListener('click', () => {
this.dispatchEvent(new CustomEvent('export-csv', { bubbles: true, composed: true }));
});
this.shadowRoot.getElementById('export-excel-btn').addEventListener('click', () => {
this.dispatchEvent(new CustomEvent('export-excel', { bubbles: true, composed: true }));
});
this.shadowRoot.getElementById('export-html-btn').addEventListener('click', () => {
this.dispatchEvent(new CustomEvent('export-html', { bubbles: true, composed: true }));
});
}
updateState() {
const container = this.shadowRoot.getElementById('controls-container');
if (this.hasFile) {
container.classList.remove('disabled');
} else {
container.classList.add('disabled');
}
}
// Make the controls always visible by removing the disabled class
showControls() {
const container = this.shadowRoot.getElementById('controls-container');
container.classList.remove('disabled');
}
}
customElements.define('floating-controls', FloatingControls);