diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts index 2ff4c5610..2641773a5 100644 --- a/src/livecodes/core.ts +++ b/src/livecodes/core.ts @@ -3131,45 +3131,40 @@ const registerMenuButton = (menu: HTMLElement, button: HTMLElement) => { }; const handleAppMenuProject = () => { - const menuProjectContainer = UI.getAppMenuProjectScroller(); - const menuProjectButton = UI.getAppMenuProjectButton(); - if (!menuProjectContainer || !menuProjectButton) return; - - const html = isMac() - ? menuProjectHTML.replace(/Ctrl<\/kbd>/g, '') - : menuProjectHTML; - menuProjectContainer.innerHTML = html; - translateElement(menuProjectContainer); - // adjustFontSize(menuProjectContainer); - registerMenuButton(menuProjectContainer, menuProjectButton); + setupAppMenu(UI.getAppMenuProjectScroller(), UI.getAppMenuProjectButton(), menuProjectHTML); }; const handleAppMenuSettings = () => { - const menuSettingsContainer = UI.getAppMenuSettingsScroller(); - const menuSettingsButton = UI.getAppMenuSettingsButton(); - if (!menuSettingsContainer || !menuSettingsButton) return; - - const html = isMac() - ? menuSettingsHTML.replace(/Ctrl<\/kbd>/g, '') - : menuSettingsHTML; - menuSettingsContainer.innerHTML = html; - - translateElement(menuSettingsContainer); - adjustFontSize(menuSettingsContainer); - registerMenuButton(menuSettingsContainer, menuSettingsButton); + setupAppMenu( + UI.getAppMenuSettingsScroller(), + UI.getAppMenuSettingsButton(), + menuSettingsHTML, + true, + ); }; const handleAppMenuHelp = () => { - const menuHelpContainer = UI.getAppMenuHelpScroller(); - const menuHelpButton = UI.getAppMenuHelpButton(); - if (!menuHelpContainer || !menuHelpButton) return; + setupAppMenu(UI.getAppMenuHelpScroller(), UI.getAppMenuHelpButton(), menuHelpHTML); +}; + +const setupAppMenu = ( + container: HTMLElement | null, + button: HTMLElement | null, + menuHTML: string, + shouldAdjustFontSize = false, +) => { + if (!container || !button) return; + + const html = isMac() ? menuHTML.replaceAll('Ctrl', '') : menuHTML; + + container.innerHTML = html; + translateElement(container); - const html = isMac() ? menuHelpHTML.replace(/Ctrl<\/kbd>/g, '') : menuHelpHTML; - menuHelpContainer.innerHTML = html; - menuHelpContainer.classList.add('hidden'); - translateElement(menuHelpContainer); - // adjustFontSize(menuHelpContainer); - registerMenuButton(menuHelpContainer, menuHelpButton); + if (shouldAdjustFontSize) { + adjustFontSize(container); + } + + registerMenuButton(container, button); }; /** @@ -4808,14 +4803,23 @@ const handleResultLoading = () => { eventsManager.addEventListener(window, 'message', showResultModeDrawer); }; +const createToolButton = (id: string, title: string, innerHTML: string) => { + const btn = document.createElement('div'); + btn.id = id; + btn.classList.add('tool-buttons'); + btn.title = title; + btn.style.pointerEvents = 'all'; // override setting to 'none' on toolspane bar + btn.innerHTML = innerHTML; + UI.getToolspaneTitles()?.appendChild(btn); + return btn; +}; + const handleResultPopup = () => { - const popupBtn = document.createElement('div'); - popupBtn.id = 'result-popup-btn'; - popupBtn.classList.add('tool-buttons'); - popupBtn.title = window.deps.translateString('core.result.hint', 'Show result in new window'); - popupBtn.style.pointerEvents = 'all'; // override setting to 'none' on toolspane bar - const iconCSS = ''; - popupBtn.innerHTML = ``; + const popupBtn = createToolButton( + 'result-popup-btn', + window.deps.translateString('core.result.hint', 'Show result in new window'), + ``, + ); let url: string | undefined; const openWindow = async () => { if (resultPopup && !resultPopup.closed) { @@ -4848,17 +4852,14 @@ const handleResultPopup = () => { }; const handleResultZoom = () => { - const zoomBtn = document.createElement('div'); - zoomBtn.id = 'zoom-button'; - zoomBtn.classList.add('tool-buttons'); - zoomBtn.title = window.deps.translateString('core.zoom.hint', 'Zoom') + ' (Ctrl/Cmd + Alt + Z)'; - zoomBtn.style.pointerEvents = 'all'; // override setting to 'none' on toolspane bar - zoomBtn.innerHTML = ` - `; - + const zoomBtn = createToolButton( + 'zoom-button', + window.deps.translateString('core.zoom.hint', 'Zoom') + ' (Ctrl/Cmd + Alt + Z)', + ``, + ); const toggleZoom = () => { const config = getConfig(); const currentZoom = config.zoom; @@ -4876,13 +4877,11 @@ const handleResultZoom = () => { }; const handleBroadcastStatus = () => { - const broadcastStatusBtn = document.createElement('div'); - broadcastStatusBtn.id = 'broadcast-status-btn'; - broadcastStatusBtn.classList.add('tool-buttons'); - broadcastStatusBtn.title = window.deps.translateString('core.broadcast.heading', 'Broadcast'); - broadcastStatusBtn.style.pointerEvents = 'all'; // override setting to 'none' on toolspane bar - const iconCSS = ''; - broadcastStatusBtn.innerHTML = ``; + const broadcastStatusBtn = createToolButton( + 'broadcast-status-btn', + window.deps.translateString('core.broadcast.heading', 'Broadcast'), + ``, + ); const showBroadcast = () => { showScreen('broadcast');