engineering/uncloseai.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: ensure CSS loads before creating floating button

Browse source 
- Wait for CSS to load via onload event before creating button
- Prevents button appearing unstyled on initial page load
- Fallback to direct modal opening if toggleUncloseaiEmbeddedModal not available
- Refactored button creation into separate function for better flow control
This commit is contained in:
Russell Ballestrini 2025-07-10 07:03:48 -04:00
parent 675b8fefd1
commit d9ee717d13
1 changed files with 41 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

74
src/ui.js
View file

@ -317,27 +317,13 @@ export function addReadPageButton() {
// File upload functionality moved to file-upload.js
// Function to create floating AI button
export function createFloatingAIButton() {
console.log("uncloseai.js: createFloatingAIButton() called.");
// Helper function to create and append the floating button
function createAndAppendFloatingButton() {
console.log("uncloseai.js: createAndAppendFloatingButton() called.");
// Ensure ChunkFive font is loaded
initializeChunkFiveFont();
// Load CSS for floating button if not already loaded
const hasPicoCSS = document.querySelector('link[href*="pico"]') !== null;
const cssFile = hasPicoCSS ? 'uncloseai-modal-pico.css' : 'uncloseai-modal-builtin.css';
let cssLoaded = false;
if (!document.querySelector(`link[href*="${cssFile}"]`)) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = `https://uncloseai.com/src/${cssFile}`;
document.head.appendChild(link);
console.log(`uncloseai.js: Loaded ${cssFile} for floating button styles.`);
cssLoaded = true;
}
// Remove any existing floating button first
const existingButton = document.getElementById("floating-ai-button");
if (existingButton) {
@ -384,22 +370,45 @@ export function createFloatingAIButton() {
.addEventListener("change", updateButtonTheme);
}
// Hover effects
// Hover effects now handled by CSS
// Hover effects handled by CSS
// Set up self-contained click handler
setupFloatingButtonHandler(floatingButton);
// If we just loaded CSS, wait a bit before showing button
if (cssLoaded) {
setTimeout(() => {
document.body.appendChild(floatingButton);
console.log("uncloseai.js: Appended floating button to document.body after CSS load delay.");
}, 100);
} else {
document.body.appendChild(floatingButton);
console.log("uncloseai.js: Appended floating button to document.body.");
document.body.appendChild(floatingButton);
console.log("uncloseai.js: Appended floating button to document.body.");
}
// Function to create floating AI button
export function createFloatingAIButton() {
console.log("uncloseai.js: createFloatingAIButton() called.");
// Load CSS for floating button if not already loaded
const hasPicoCSS = document.querySelector('link[href*="pico"]') !== null;
const cssFile = hasPicoCSS ? 'uncloseai-modal-pico.css' : 'uncloseai-modal-builtin.css';
if (!document.querySelector(`link[href*="${cssFile}"]`)) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = `https://uncloseai.com/src/${cssFile}`;
// Create button only after CSS loads
link.onload = () => {
console.log(`uncloseai.js: ${cssFile} loaded, creating floating button.`);
createAndAppendFloatingButton();
};
link.onerror = () => {
console.error(`uncloseai.js: Failed to load ${cssFile}, creating button anyway.`);
createAndAppendFloatingButton();
};
document.head.appendChild(link);
return; // Exit early, button will be created after CSS loads
}
// CSS already loaded, create button immediately
createAndAppendFloatingButton();
}
// Set up click handler for floating button (self-contained)
@ -448,10 +457,9 @@ function setupFloatingButtonHandler(floatingButton) {
console.log("Calling modal function");
await modalFunction();
} else {
console.error(
"toggleUncloseaiEmbeddedModal function not available in any form",
);
alert(getUIText("aiModalNotAvailable"));
// Fallback: directly open the modal
console.log("Using fallback to directly open modal");
await openUncloseaiEmbeddedModal();
}
} catch (error) {
console.error("Error opening modal:", error);