diff --git a/edit/beautify.js b/edit/beautify.js index 659046d8..20917bc9 100644 --- a/edit/beautify.js +++ b/edit/beautify.js @@ -113,9 +113,10 @@ function createBeautifyUI(scope, options) { }, }, t(scope.length === 1 ? 'undo' : 'undoGlobal')), ]), - ])); - - $('#help-popup').className = 'wide'; + ]), + { + className: 'wide', + }); $('.beautify-options').onchange = ({target}) => { const value = target.type === 'checkbox' ? target.checked : target.selectedIndex > 0; diff --git a/edit/settings.js b/edit/settings.js index 759e3e37..af1d3547 100644 --- a/edit/settings.js +++ b/edit/settings.js @@ -27,8 +27,9 @@ function StyleSettings() { $create('button', {onclick: helpPopup.close}, t('confirmClose')), createInfo({title: t('autosaveNotice')}), ]), - ])); - $('#help-popup').className = 'style-settings-popup'; + ]), { + className: 'style-settings-popup', + }); moveFocus(ui, 0); function textToList(text) { diff --git a/edit/util.js b/edit/util.js index 7035ab9e..28bd67b6 100644 --- a/edit/util.js +++ b/edit/util.js @@ -7,19 +7,26 @@ const helpPopup = { - show(title = '', body) { + /** + * @param {string} title - plain text + * @param {string|Node} body - Node, html or plain text + * @param {Node} [props] - DOM props for the popup element + * @returns {Element} the popup + */ + show(title = '', body, props) { const div = $('#help-popup'); const contents = $('.contents', div); + div.style = ''; div.className = ''; contents.textContent = ''; + Object.assign(div, props); if (body) { contents.appendChild(typeof body === 'string' ? t.HTML(body) : body); } $('.title', div).textContent = title; $('.dismiss', div).onclick = helpPopup.close; window.on('keydown', helpPopup.close, true); - // reset any inline styles - div.style = 'display: block'; + div.style.display = 'block'; helpPopup.originalFocus = document.activeElement; return div; }, @@ -172,8 +179,7 @@ function createHotkeyInput(prefId, {buttons = true, onDone}) { /* exported showCodeMirrorPopup */ function showCodeMirrorPopup(title, html, options) { - const popup = helpPopup.show(title, html); - popup.classList.add('big'); + const popup = helpPopup.show(title, html, {className: 'big'}); let cm = popup.codebox = CodeMirror($('.contents', popup), Object.assign({ mode: 'css',