84 lines
2.4 KiB
JavaScript
84 lines
2.4 KiB
JavaScript
// Shared UI components for keyword grabber extension
|
|
|
|
// Create and manage a progress dialog
|
|
class ProgressDialog {
|
|
constructor() {
|
|
this.dialog = null;
|
|
this.messageElement = null;
|
|
}
|
|
|
|
create() {
|
|
// Create dialog if it doesn't exist
|
|
if (!this.dialog) {
|
|
this.dialog = document.createElement('div');
|
|
this.dialog.style.cssText = `
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
background: white;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
padding: 15px 20px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
z-index: 10000;
|
|
font-family: Arial, sans-serif;
|
|
min-width: 200px;
|
|
`;
|
|
|
|
// Add progress message
|
|
this.messageElement = document.createElement('div');
|
|
this.messageElement.style.cssText = `
|
|
margin-bottom: 10px;
|
|
color: #333;
|
|
font-size: 14px;
|
|
`;
|
|
this.dialog.appendChild(this.messageElement);
|
|
|
|
// Add spinner
|
|
const spinner = document.createElement('div');
|
|
spinner.style.cssText = `
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 2px solid #f3f3f3;
|
|
border-top: 2px solid #3498db;
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
margin: 10px auto;
|
|
`;
|
|
this.dialog.appendChild(spinner);
|
|
|
|
// Add spinner animation
|
|
const style = document.createElement('style');
|
|
style.textContent = `
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
|
|
document.body.appendChild(this.dialog);
|
|
}
|
|
return this;
|
|
}
|
|
|
|
updateProgress(message) {
|
|
if (this.messageElement) {
|
|
this.messageElement.textContent = message;
|
|
}
|
|
}
|
|
|
|
remove() {
|
|
if (this.dialog && this.dialog.parentNode) {
|
|
this.dialog.parentNode.removeChild(this.dialog);
|
|
this.dialog = null;
|
|
this.messageElement = null;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Export for use in other scripts
|
|
window.KeywordGrabberUI = {
|
|
ProgressDialog
|
|
};
|