From 5dc701cca4bdb511e21ca25101452d021fd56b97 Mon Sep 17 00:00:00 2001 From: flashwave Date: Wed, 26 Jun 2024 15:36:00 +0000 Subject: [PATCH] Added dropdown to select state of the markup tags list. Also removed the button from the input bar, you can now select it from the settings side menu under Text -> Show markup buttons. --- src/mami.css/setting.css | 10 +++++++-- src/mami.js/main.js | 14 +++++++++++- src/mami.js/ui/hooks.js | 36 ++++++++++++++++++++++-------- src/mami.js/ui/input-menus.js | 42 +++++++++++++++++++++++++---------- src/mami.js/ui/view.js | 4 ++-- 5 files changed, 80 insertions(+), 26 deletions(-) diff --git a/src/mami.css/setting.css b/src/mami.css/setting.css index 5de3325..2dc49dd 100644 --- a/src/mami.css/setting.css +++ b/src/mami.css/setting.css @@ -27,13 +27,19 @@ select { margin-bottom: 6px; } -.setting__container--select .setting__input, .setting__container--number .setting__input, .setting__container--text .setting__input { width: 100%; font-size: 1.1em; line-height: 1.4em; - font-family: Verdana, Tahoma, Geneva, Arial, Helvetica, sans-serif + font-family: inherit; +} + +.setting__container--select .setting__input { + width: 100%; + font-size: inherit; + font-family: inherit; + padding: 2px; } .setting__container--range .setting__input { diff --git a/src/mami.js/main.js b/src/mami.js/main.js index 466a0f5..a323815 100644 --- a/src/mami.js/main.js +++ b/src/mami.js/main.js @@ -149,6 +149,7 @@ const MamiInit = async args => { settings.define('marqueeAllNames').default(false).create(); settings.define('dbgAnimDurationMulti').default(1).min(0).max(10).create(); settings.define('newLineOnEnter').default(false).create(); + settings.define('showMarkupSelector').type(['always', 'focus', 'never']).default('focus').create(); const noNotifSupport = !('Notification' in window); settings.define('enableNotifications').default(false).immutable(noNotifSupport).critical().create(); @@ -461,6 +462,13 @@ const MamiInit = async args => { category.setting('autoEmbedV1').title('Auto-embed media').done(); category.setting('autoEmbedPlay').title('Auto-play embedded media').done(); category.setting('newLineOnEnter').title('Swap Enter and Shift+Enter behaviour').done(); + category.setting('showMarkupSelector').title('Show markup buttons').type('select').options(() => { + return { + 'always': 'Always show', + 'focus': 'Show when focussed', + 'never': 'Never show', + }; + }).done(); }); sbSettings.category(category => { category.header('Notifications'); @@ -660,9 +668,13 @@ const MamiInit = async args => { const sbActPing = new MamiSidebarActionPing(pingIndicator, ctx.msgbox); sidebar.createAction(sbActPing); - Umi.UI.InputMenus.Add('markup', 'BB Code'); + Umi.UI.InputMenus.Add('markup'); Umi.UI.InputMenus.Add('emotes', 'Emoticons'); + settings.watch('showMarkupSelector', ev => { + Umi.UI.InputMenus.Toggle('markup', ev.detail.value === 'always'); + }); + let doUpload; ctx.eeprom = new MamiEEPROM(futami.get('eeprom2'), MamiMisuzuAuth.getLine); ctx.eeprom.init() diff --git a/src/mami.js/ui/hooks.js b/src/mami.js/ui/hooks.js index d4ea9a4..20e72ed 100644 --- a/src/mami.js/ui/hooks.js +++ b/src/mami.js/ui/hooks.js @@ -11,15 +11,34 @@ Umi.UI.Hooks = (function() { sendMessage = sendMessageFunc; }, AddHooks: function() { + const msgForm = $i('umi-msg-form'); + const msgText = $i('umi-msg-text'); + window.addEventListener('keydown', function(ev) { if((ev.ctrlKey && ev.key !== 'v') || ev.altKey) return; if(!ev.target.matches('input, textarea, select, button')) - $i('umi-msg-text').focus(); + msgText.focus(); }); - $i('umi-msg-form').addEventListener('submit', ev => { + msgForm.addEventListener('focusin', ev => { + console.info(ev); + + if(mami.settings.get('showMarkupSelector') === 'focus' && Umi.UI.InputMenus.Current() === '') + Umi.UI.InputMenus.Toggle('markup', true); + }); + msgForm.addEventListener('focusout', ev => { + console.info(ev); + + if(ev.relatedTarget instanceof Element && msgForm.contains(ev.relatedTarget)) + return; + + if(mami.settings.get('showMarkupSelector') === 'focus' && Umi.UI.InputMenus.Current() === 'markup') + Umi.UI.InputMenus.Toggle('markup', false); + }); + + msgForm.addEventListener('submit', ev => { ev.preventDefault(); if(typeof sendMessage !== 'function') @@ -36,13 +55,12 @@ Umi.UI.Hooks = (function() { } }); - $i('umi-msg-text').addEventListener('input', function(ev) { - const elemInput = $i('umi-msg-text'); - const elemParent = elemInput.parentNode; + msgText.addEventListener('input', function(ev) { + const elemParent = msgText.parentNode; let height = 40; - if(mami.settings.get('expandTextBox') && elemInput.scrollHeight > elemInput.clientHeight) - height = elemInput.scrollHeight; + if(mami.settings.get('expandTextBox') && msgText.scrollHeight > msgText.clientHeight) + height = msgText.scrollHeight; if(height > 40) elemParent.style.height = height.toString() + 'px'; @@ -50,7 +68,7 @@ Umi.UI.Hooks = (function() { elemParent.style.height = null; }); - $i('umi-msg-text').addEventListener('keydown', function(ev) { + msgText.addEventListener('keydown', function(ev) { if(ev.key === 'Tab' && (!ev.shiftKey || !ev.ctrlKey)) { ev.preventDefault(); @@ -94,7 +112,7 @@ Umi.UI.Hooks = (function() { if((ev.key === 'Enter' || ev.key === 'NumpadEnter') && ev.shiftKey === mami.settings.get('newLineOnEnter')) { ev.preventDefault(); - $i('umi-msg-form').requestSubmit(); + msgForm.requestSubmit(); return; } }); diff --git a/src/mami.js/ui/input-menus.js b/src/mami.js/ui/input-menus.js index e0b92ea..deeaa9c 100644 --- a/src/mami.js/ui/input-menus.js +++ b/src/mami.js/ui/input-menus.js @@ -10,21 +10,30 @@ Umi.UI.InputMenus = (function() { const createButtonId = id => `umi-msg-menu-btn-${id}`; - const toggle = function(baseId) { - const button = createButtonId(baseId); - const menu = 'umi-msg-menu-sub-' + baseId; + const toggle = function(baseId, force) { + if(typeof force === 'boolean' && (current === baseId) === force) + return; - if($c(inputMenuActive).length) - $c(inputMenuActive)[0].classList.remove(inputMenuActive); + const buttonId = createButtonId(baseId); + const menuId = 'umi-msg-menu-sub-' + baseId; - if($c(inputButtonActive).length) - $c(inputButtonActive)[0].classList.remove(inputButtonActive); + const activeMenus = Array.from($qa(`.${inputMenuActive}`)); + if(activeMenus.length > 0) + for(const menu of activeMenus) + menu.classList.remove(inputMenuActive); + + const activeButtons = Array.from($qa(`.${inputButtonActive}`)); + if(activeButtons.length > 0) + for(const button of activeButtons) + button.classList.remove(inputButtonActive); if(current !== baseId) { - $i(menu).classList.add(inputMenuActive); - $i(button).classList.add(inputButtonActive); + $i(`umi-msg-menu-sub-${baseId}`)?.classList.add(inputMenuActive); + $i(createButtonId(baseId))?.classList.add(inputButtonActive); current = baseId; - } else current = ''; + } else { + current = ''; + } }; const createButton = function(id, title, onClick) { @@ -43,6 +52,8 @@ Umi.UI.InputMenus = (function() { }; return { + Current: () => current, + Toggle: toggle, Add: function(baseId, title, beforeButtonId) { if(ids.includes(baseId)) return; @@ -54,9 +65,16 @@ Umi.UI.InputMenus = (function() { if(!(beforeButton instanceof Element)) beforeButton = $i('umi-msg-send'); - $i('umi-msg-container').insertBefore(createButton(baseId, title), beforeButton); + if(typeof title === 'string') + $i('umi-msg-container').insertBefore(createButton(baseId, title), beforeButton); $i('umi-msg-menu').appendChild( - $e({ attrs: { 'class': ['input__menu', 'input__menu--' + baseId], id: 'umi-msg-menu-sub-' + baseId } }) + $e({ + attrs: { + 'class': ['input__menu', 'input__menu--' + baseId], + id: 'umi-msg-menu-sub-' + baseId, + tabindex: '0', + } + }) ); }, AddButton: function(baseId, title, onClick, beforeButtonId) { diff --git a/src/mami.js/ui/view.js b/src/mami.js/ui/view.js index a24caae..9dfd40b 100644 --- a/src/mami.js/ui/view.js +++ b/src/mami.js/ui/view.js @@ -28,8 +28,8 @@ Umi.UI.View = (function() { return length; }, EnterAtCursor: function(text, overwrite) { - const value = getText(), - current = getPosition(); + const value = getText(); + const current = getPosition(); let out = ''; out += value.slice(0, current);