diff --git a/src/content/button.js b/src/content/button.js index 5b3a7ef..f027083 100644 --- a/src/content/button.js +++ b/src/content/button.js @@ -3,7 +3,7 @@ import clipboardMdSvg from '../assets/clipboard2.svg' import checkmarkSvg from '../assets/checkmark.svg' import buttonStyle from '../styles/button.css?raw' -function createIframeButton(config, formatPreference, selectedStyle) { +function createIframeButton(config, formatPreference, selectedStyle, siteConfigs) { const iframe = document.createElement('iframe') iframe.id = `${config.buttonId}-iframe` iframe.className = `quickcite-button-iframe` @@ -28,15 +28,13 @@ function createIframeButton(config, formatPreference, selectedStyle) { // Add style to iframe const style = iframeDoc.createElement('style') - style.textContent = buttonStyle // Assuming buttonStyle contains the full CSS content + style.textContent = buttonStyle iframeDoc.head.appendChild(style) iframeDoc.body.appendChild(button) - // // Populate button content - // let icon = formatPreference === 'markdown' ? clipboardMdSvg : clipboardTextSvg - // button.className = `copy-button ${selectedStyle}` - // button.innerHTML = `Copy Info` + // Setup the button after it's been added to the DOM + setupButton(config, button, formatPreference, selectedStyle, siteConfigs) } return iframe @@ -47,19 +45,18 @@ export function injectOrUpdateButton(config, formatPreference, selectedStyle, si let button if (!iframe) { - iframe = createIframeButton(config, formatPreference, selectedStyle) + iframe = createIframeButton(config, formatPreference, selectedStyle, siteConfigs) document.body.appendChild(iframe) - - // Wait for iframe to load before accessing button - iframe.onload = () => { - button = iframe.contentDocument.getElementById(config.buttonId) - // TODO: This needs tos et the values on load!! - } } else { button = iframe.contentDocument.getElementById(config.buttonId) - button.removeEventListener('click', button.clickHandler) + if (button) { + button.removeEventListener('click', button.clickHandler) + setupButton(config, button, formatPreference, selectedStyle, siteConfigs) + } } +} +function setupButton(config, button, formatPreference, selectedStyle, siteConfigs) { // sets the button details let icon = formatPreference === 'markdown' ? clipboardMdSvg : clipboardTextSvg button.className = `copy-button ${selectedStyle}` @@ -70,7 +67,7 @@ export function injectOrUpdateButton(config, formatPreference, selectedStyle, si button.clickHandler = () => handleButtonClick(config, formatPreference, siteConfigs, button) // Add the new click event listener - console.log('settings clikc handler') + console.debug('setting click handler') button.addEventListener('click', button.clickHandler) } diff --git a/src/content/sites/trello.js b/src/content/sites/trello.js index a597a6e..96a4c2e 100644 --- a/src/content/sites/trello.js +++ b/src/content/sites/trello.js @@ -13,17 +13,17 @@ const trello = { buildPlaintext: (info, url) => `${info.boardName} - ${url}`, }, // TODO: Add card support - card: { - urlPattern: /^https:\/\/trello\.com\/c\/[a-zA-Z0-9]+(?:\/[^\/]+)?$/, - buttonId: 'trello-card-copy-button', - getInfo: () => { - const cardName = document.querySelector('h2#js-dialog-title').textContent.trim() - const boardName = document.querySelector('h1[data-testid="board-name-display"]').textContent.trim() - return { cardName, boardName } - }, - buildMarkdown: (info, url) => `[${info.cardName}](${url}) (${info.boardName})`, - buildPlaintext: (info, url) => `${info.cardName} (${info.boardName}) - ${url}`, - }, + // card: { + // urlPattern: /^https:\/\/trello\.com\/c\/[a-zA-Z0-9]+(?:\/[^\/]+)?$/, + // buttonId: 'trello-card-copy-button', + // getInfo: () => { + // const cardName = document.querySelector('h2#js-dialog-title').textContent.trim() + // const boardName = document.querySelector('h1[data-testid="board-name-display"]').textContent.trim() + // return { cardName, boardName } + // }, + // buildMarkdown: (info, url) => `[${info.cardName}](${url}) (${info.boardName})`, + // buildPlaintext: (info, url) => `${info.cardName} (${info.boardName}) - ${url}`, + // }, }, } diff --git a/src/styles/button.css b/src/styles/button.css index 6dc86c1..d71684f 100644 --- a/src/styles/button.css +++ b/src/styles/button.css @@ -1,4 +1,4 @@ -:host { +:root { --dark-bg: #1f2937; --dark-border: #4b5563; --dark-hover-bg: #374151; @@ -24,8 +24,8 @@ .copy-button { position: fixed; - bottom: 20px; - right: 20px; + bottom: 0px; + right: 0px; z-index: 9999; width: 50px; height: 50px;