break button creation up

jonfriesen · Aug 25, 2024 · 66657bb · 66657bb
1 parent 6266369
commit 66657bb
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 89 deletions.
diff --git a/src/content/button.js b/src/content/button.js
@@ -0,0 +1,55 @@
+import clipboardTextSvg from '../assets/clipboard.svg'
+import clipboardMdSvg from '../assets/clipboard2.svg'
+import checkmarkSvg from '../assets/checkmark.svg'
+
+export function injectOrUpdateButton(config, formatPreference, selectedStyle, siteConfigs) {
+	let button = document.getElementById(config.buttonId)
+
+	if (!button) {
+		button = document.createElement('button')
+		button.id = config.buttonId
+		document.body.appendChild(button)
+	}
+
+	let icon = formatPreference === 'markdown' ? clipboardMdSvg : clipboardTextSvg
+
+	button.className = `copy-button ${selectedStyle}`
+	button.innerHTML = `<img src="${chrome.runtime.getURL(icon)}" alt="Copy Info">`
+
+	button.addEventListener('click', () => handleButtonClick(config, formatPreference, siteConfigs, button))
+}
+
+function handleButtonClick(config, formatPreference, siteConfigs, button) {
+	const siteConfig = siteConfigs[config.siteKey]
+	const pageConfig = siteConfig.pages[config.pageKey]
+	const info = pageConfig.getInfo()
+	const currentUrl = window.location.href
+
+	let textToCopy =
+		formatPreference === 'markdown' ? `${config.prefix} ${pageConfig.buildMarkdown(info, currentUrl)}` : `${config.prefix} ${pageConfig.buildPlaintext(info, currentUrl)}`
+
+	navigator.clipboard
+		.writeText(textToCopy)
+		.then(() => {
+			console.debug('Copied to clipboard: ' + textToCopy)
+			updateButtonAfterCopy(button)
+		})
+		.catch((err) => {
+			console.error('Failed to copy text: ', err)
+		})
+}
+
+function updateButtonAfterCopy(button) {
+	const originalHTML = button.innerHTML
+	button.innerHTML = `<img src="${chrome.runtime.getURL(checkmarkSvg)}" alt="Copy Info">`
+	button.classList.add('success')
+	setTimeout(() => {
+		button.innerHTML = originalHTML
+		button.classList.remove('success')
+	}, 2000)
+}
+
+export function removeButtons() {
+	const buttons = document.querySelectorAll('.copy-button')
+	buttons.forEach((button) => button.remove())
+}
diff --git a/src/content/content.js b/src/content/content.js
@@ -1,94 +1,15 @@
-import siteConfigs from './config.js'
+import siteConfigs from './sites/config.js'
 import '../styles/button.css'
-import clipboardTextSvg from '../assets/clipboard.svg'
-import clipboardMdSvg from '../assets/clipboard2.svg'
-import checkmarkSvg from '../assets/checkmark.svg'
-
-let formatPreference = 'markdown'
-let selectedStyle = 'dark' // Default style
-let userSiteConfigs = {}
-let currentConfig = null
-
-function injectOrUpdateButton(config) {
-	let button = document.getElementById(config.buttonId)
-
-	if (!button) {
-		button = document.createElement('button')
-		button.id = config.buttonId
-		document.body.appendChild(button)
-	}
-
-	let icon = formatPreference === 'markdown' ? clipboardMdSvg : clipboardTextSvg
-
-	button.className = `copy-button ${selectedStyle}`
-	button.innerHTML = `<img src="${chrome.runtime.getURL(icon)}" alt="Copy Info">`
-
-	button.addEventListener('click', () => {
-		const siteConfig = siteConfigs[config.siteKey]
-		const pageConfig = siteConfig.pages[config.pageKey]
-		const info = pageConfig.getInfo()
-		const currentUrl = window.location.href
-
-		let textToCopy
-		if (formatPreference === 'markdown') {
-			textToCopy = `${config.prefix} ${pageConfig.buildMarkdown(info, currentUrl)}`
-		} else {
-			textToCopy = `${config.prefix} ${pageConfig.buildPlaintext(info, currentUrl)}`
-		}
-
-		navigator.clipboard
-			.writeText(textToCopy)
-			.then(() => {
-				console.debug('Copied to clipboard: ' + textToCopy)
-				const originalHTML = button.innerHTML
-				button.innerHTML = `<img src="${chrome.runtime.getURL(checkmarkSvg)}" alt="Copy Info">`
-				button.classList.add('success')
-				setTimeout(() => {
-					button.innerHTML = originalHTML
-					button.classList.remove('success')
-				}, 2000)
-			})
-			.catch((err) => {
-				console.error('Failed to copy text: ', err)
-			})
-	})
-}
-
-// Function to remove all buttons
-function removeButtons() {
-	const buttons = document.querySelectorAll('.copy-button')
-	buttons.forEach((button) => button.remove())
+import { setupMessageListener, checkCurrentUrl } from './messageHandler.js'
+
+// Global state
+const state = {
+	formatPreference: 'markdown',
+	selectedStyle: 'dark', // Default style
+	userSiteConfigs: {},
+	currentConfig: null,
 }
 
-// Listen for messages from the background script
-chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
-	switch (request.action) {
-		case 'updateConfig':
-			formatPreference = request.formatPreference
-			selectedStyle = request.buttonStyle
-			userSiteConfigs = request.siteConfigs
-			currentConfig = request.config
-			if (currentConfig) {
-				injectOrUpdateButton(currentConfig)
-			} else {
-				removeButtons()
-			}
-			break
-		case 'removeButtons':
-			removeButtons()
-			break
-		case 'updatePreference':
-			formatPreference = request.formatPreference
-			break
-		case 'updateStyle':
-			selectedStyle = request.buttonStyle
-			if (currentConfig) {
-				injectOrUpdateButton(currentConfig)
-			}
-			break
-	}
-})
-
 // Enable debug in development
 if (!('update_url' in chrome.runtime.getManifest())) {
 	console.log('QuickCite - verbose logging enabled')
@@ -97,5 +18,8 @@ if (!('update_url' in chrome.runtime.getManifest())) {
 	console.debug = function () {} // Disable in production
 }
 
+// Set up message listener
+setupMessageListener(state, siteConfigs)
+
 // Initial setup
-chrome.runtime.sendMessage({ action: 'checkCurrentUrl' })
+checkCurrentUrl()
diff --git a/src/content/messageHandler.js b/src/content/messageHandler.js
@@ -0,0 +1,35 @@
+import { injectOrUpdateButton, removeButtons } from './button.js'
+
+export function setupMessageListener(state, siteConfigs) {
+	chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+		switch (request.action) {
+			case 'updateConfig':
+				state.formatPreference = request.formatPreference
+				state.selectedStyle = request.buttonStyle
+				state.userSiteConfigs = request.siteConfigs
+				state.currentConfig = request.config
+				if (state.currentConfig) {
+					injectOrUpdateButton(state.currentConfig, state.formatPreference, state.selectedStyle, siteConfigs)
+				} else {
+					removeButtons()
+				}
+				break
+			case 'removeButtons':
+				removeButtons()
+				break
+			case 'updatePreference':
+				state.formatPreference = request.formatPreference
+				break
+			case 'updateStyle':
+				state.selectedStyle = request.buttonStyle
+				if (state.currentConfig) {
+					injectOrUpdateButton(state.currentConfig, state.formatPreference, state.selectedStyle, siteConfigs)
+				}
+				break
+		}
+	})
+}
+
+export function checkCurrentUrl() {
+	chrome.runtime.sendMessage({ action: 'checkCurrentUrl' })
+}