From af2919f363cc26f0d4f8ad226225674e88aa5078 Mon Sep 17 00:00:00 2001 From: flashwave Date: Fri, 9 Feb 2024 00:56:27 +0000 Subject: [PATCH] UI code cleanups. --- src/mami.js/main.js | 32 +----- src/mami.js/messages.js | 10 +- src/mami.js/title.js | 77 +++++++++++++ src/mami.js/ui/chat-input-main.js | 1 + src/mami.js/ui/chat-input.js | 2 + src/mami.js/ui/elems.js | 11 -- src/mami.js/ui/emotes.js | 1 + src/mami.js/ui/hooks.js | 179 +++++++++++++++--------------- src/mami.js/ui/input-menus.js | 25 ++--- src/mami.js/ui/markup.js | 4 +- src/mami.js/ui/menus.js | 28 ++--- src/mami.js/ui/messages.jsx | 8 +- src/mami.js/ui/title.js | 45 -------- src/mami.js/ui/toggles.js | 10 +- src/mami.js/ui/view.js | 50 ++++----- 15 files changed, 238 insertions(+), 245 deletions(-) create mode 100644 src/mami.js/title.js delete mode 100644 src/mami.js/ui/elems.js delete mode 100644 src/mami.js/ui/title.js diff --git a/src/mami.js/main.js b/src/mami.js/main.js index 63456fa..9d9355d 100644 --- a/src/mami.js/main.js +++ b/src/mami.js/main.js @@ -17,7 +17,6 @@ const Umi = { UI: {} }; #include sound/umisound.js #include ui/chat-layout.js #include ui/domaintrans.jsx -#include ui/elems.js #include ui/hooks.js #include ui/input-menus.js #include ui/loading-overlay.jsx @@ -25,7 +24,6 @@ const Umi = { UI: {} }; #include ui/menus.js #include ui/view.js #include ui/settings.jsx -#include ui/title.js #include ui/toggles.js #include ui/uploads.js @@ -84,24 +82,6 @@ const Umi = { UI: {} }; }, 600000); - lo.setMessage('Getting element references...'); - - // should be dynamic when possible - const layout = new Umi.UI.ChatLayout; - await views.unshift(layout); - - Umi.UI.Elements.Chat = layout.getElement(); - - Umi.UI.Elements.Messages = $i('umi-messages'); - Umi.UI.Elements.Menus = $i('umi-menus'); - Umi.UI.Elements.Icons = $i('umi-menu-icons'); - Umi.UI.Elements.Toggles = $i('umi-toggles'); - Umi.UI.Elements.MessageContainer = $i('umi-msg-container'); - Umi.UI.Elements.MessageInput = $i('umi-msg-text'); - Umi.UI.Elements.MessageSend = $i('umi-msg-send'); - Umi.UI.Elements.MessageMenus = $i('umi-msg-menu'); - - lo.setMessage('Loading settings...'); const settings = new MamiSettings('umi-'); @@ -254,12 +234,12 @@ const Umi = { UI: {} }; lo.setMessage('Preparing UI...'); - Umi.UI.Title.Set(futami.get('title')); + // should be dynamic when possible + const layout = new Umi.UI.ChatLayout; + await views.unshift(layout); + Umi.UI.View.AccentReload(); - Umi.UI.Hooks.AddMessageHooks(); - Umi.UI.Hooks.AddUserHooks(); - Umi.UI.Hooks.AddChannelHooks(); - Umi.UI.Hooks.AddTextHooks(); + Umi.UI.Hooks.AddHooks(); settings.watch('style', (v, n, i) => { if(!i) Umi.UI.View.AccentReload(); }); settings.watch('compactView', (v, n, i) => { if(!i) Umi.UI.View.AccentReload(); }); @@ -515,7 +495,7 @@ const Umi = { UI: {} }; Umi.UI.InputMenus.AddButton('upload', 'Upload', () => uploadForm.click()); - Umi.UI.Elements.MessageInput.onpaste = ev => { + $i('umi-msg-text').onpaste = ev => { if(ev.clipboardData && ev.clipboardData.files.length > 0) for(const file of ev.clipboardData.files) doUpload(file); diff --git a/src/mami.js/messages.js b/src/mami.js/messages.js index e833362..21273a2 100644 --- a/src/mami.js/messages.js +++ b/src/mami.js/messages.js @@ -4,22 +4,14 @@ Umi.Messages = (function() { const msgs = new Map; - const onSend = [], - onAdd = [], + const onAdd = [], onRemove = [], onClear = []; return { - OnSend: onSend, OnAdd: onAdd, OnRemove: onRemove, OnClear: onClear, - Send: function(text) { - text = text.replace(/\t/g, ' '); - Umi.Server.sendMessage(text); - for(const i in onSend) - onSend[i](text); - }, Add: function(msg) { const msgId = msg.getId(); if(!msgs.has(msgId)) { diff --git a/src/mami.js/title.js b/src/mami.js/title.js new file mode 100644 index 0000000..c1b7378 --- /dev/null +++ b/src/mami.js/title.js @@ -0,0 +1,77 @@ +#include args.js + +const MamiWindowTitle = function(options) { + options = MamiArguments.verify(options, [ + MamiArguments.type('getName', 'function', () => ''), + MamiArguments.type('setTitle', 'function', text => document.title = text), + MamiArguments.check('strobeInterval', 500, val => { + const valType = typeof val; + return val === 'number' || val === 'function'; + }), + MamiArguments.check('strobeRepeat', 5, val => { + const valType = typeof val; + return val === 'number' || val === 'function'; + }), + ]); + + const getName = options.getName; + + const setTitleImpl = options.setTitle; + const setTitle = text => { + if(text === undefined || text === null) + text = ''; + else if(typeof text !== 'string') + text = text.toString(); + + setTitleImpl(text); + }; + + const defaultStrobeInterval = typeof options.strobeInterval === 'function' ? options.strobeInterval : () => options.strobeInterval; + const defaultStrobeRepeat = typeof options.strobeRepeat === 'function' ? options.strobeRepeat : () => options.strobeRepeat; + + let activeStrobe; + + const clearTitle = () => { + if(activeStrobe === undefined) + return; + + clearInterval(activeStrobe); + activeStrobe = undefined; + + setTitle(getName()); + }; + + const strobeTitle = (titles, interval, repeat) => { + if(!Array.isArray(titles)) + throw 'titles must be an array of strings'; + if(titles.length < 1) + throw 'titles must contain at least one item'; + if(typeof interval !== 'number') + interval = defaultStrobeInterval(); + if(typeof repeat !== 'number') + repeat = defaultStrobeRepeat(); + + const target = titles.length * repeat; + let round = 0; + + clearTitle(); + setTitle(titles[0]); + + activeStrobe = setInterval(() => { + if(round >= target) { + clearTitle(); + setTitle(getName()); + return; + } + + ++round; + setTitle(titles[round % titles.length]); + }, interval); + }; + + return { + set: setTitle, + clear: clearTitle, + strobe: strobeTitle, + }; +}; diff --git a/src/mami.js/ui/chat-input-main.js b/src/mami.js/ui/chat-input-main.js index 9f46e12..4dd0f98 100644 --- a/src/mami.js/ui/chat-input-main.js +++ b/src/mami.js/ui/chat-input-main.js @@ -11,6 +11,7 @@ Umi.UI.ChatInputMain = function() { tag: 'textarea', attrs: { id: 'umi-msg-text', + name: 'text', className: 'input__text', autofocus: true, }, diff --git a/src/mami.js/ui/chat-input.js b/src/mami.js/ui/chat-input.js index f05b9e6..f8931be 100644 --- a/src/mami.js/ui/chat-input.js +++ b/src/mami.js/ui/chat-input.js @@ -7,7 +7,9 @@ Umi.UI.ChatInput = function() { main = new Umi.UI.ChatInputMain; const html = $e({ + tag: 'form', attrs: { + id: 'umi-msg-form', className: 'input', }, child: [ diff --git a/src/mami.js/ui/elems.js b/src/mami.js/ui/elems.js deleted file mode 100644 index e702d35..0000000 --- a/src/mami.js/ui/elems.js +++ /dev/null @@ -1,11 +0,0 @@ -Umi.UI.Elements = { - Messages: null, - Menus: null, - Icons: null, - Toggles: null, - MessageContainer: null, - MessageInput: null, - MessageSend: null, - MessageMenus: null, - Chat: null, -}; diff --git a/src/mami.js/ui/emotes.js b/src/mami.js/ui/emotes.js index 640ff6a..f8301f0 100644 --- a/src/mami.js/ui/emotes.js +++ b/src/mami.js/ui/emotes.js @@ -14,6 +14,7 @@ Umi.UI.Emoticons = (function() { menu.appendChild($e({ tag: 'button', attrs: { + type: 'button', className: 'emoticon emoticon--button', title: emote.strings[0], dataset: { diff --git a/src/mami.js/ui/hooks.js b/src/mami.js/ui/hooks.js index 993813f..0058e17 100644 --- a/src/mami.js/ui/hooks.js +++ b/src/mami.js/ui/hooks.js @@ -1,21 +1,27 @@ #include channels.js #include common.js +#include server.js +#include title.js #include user.js +#include utility.js #include sound/umisound.js #include ui/channels.js -#include ui/elems.js #include ui/messages.jsx -#include ui/title.js #include ui/users.js #include ui/view.js Umi.UI.Hooks = (function() { return { - AddMessageHooks: function() { - Umi.Messages.OnSend.push(function(msg) { - Umi.UI.View.SetText(''); + AddHooks: function() { + const title = new MamiWindowTitle({ + getName: () => futami.get('title'), }); + window.addEventListener('focus', function() { + title.clear(); + }); + + Umi.Messages.OnRemove.push(function(msg) { Umi.UI.Messages.Remove(msg); }); @@ -24,28 +30,29 @@ Umi.UI.Hooks = (function() { Umi.UI.Messages.RemoveAll(); }); - window.addEventListener('focus', function() { - Umi.UI.Title.Clear(); - }); - Umi.Messages.OnAdd.push(function(msg) { Umi.UI.Channels.Unread(msg.getChannel()); Umi.UI.Messages.Add(msg); - const settings = mami.getSettings(); - - if(!document.hidden && settings.get('flashTitle')) + if(!document.hidden) return; - let title = ' ' + msg.getUser().getName(), - channel = Umi.Channels.Current() || null; - if(msg.getUser().isBot() && settings.get('showServerMsgInTitle')) - title = ' ' + msg.getText(); + const settings = mami.getSettings(); - if(channel !== null && channel.getName() !== msg.getChannel()) - title += ' @ ' + channel.getName(); + if(settings.get('flashTitle')) { + let titleText = ' ' + msg.getUser().getName(), + channel = Umi.Channels.Current() || null; + if(msg.getUser().isBot() && settings.get('showServerMsgInTitle')) + titleText = ' ' + msg.getText(); - Umi.UI.Title.Flash(['[ @]' + title, '[@ ]' + title]); + if(channel !== null && channel.getName() !== msg.getChannel()) + titleText += ' @ ' + channel.getName(); + + title.strobe([ + `[ @] ${titleText}`, + `[@ ] ${titleText}`, + ]); + } if(settings.get('enableNotifications') && Umi.User.getCurrentUser() !== null) { const triggers = (settings.get('notificationTriggers') || '').toLowerCase().split(' '), @@ -76,8 +83,8 @@ Umi.UI.Hooks = (function() { } } }); - }, - AddUserHooks: function() { + + Umi.Users.OnAdd.push(function(user) { Umi.UI.Users.Add(user); }); @@ -93,8 +100,8 @@ Umi.UI.Hooks = (function() { Umi.Users.OnUpdate.push(function(id, user) { Umi.UI.Users.Update(user); }); - }, - AddChannelHooks: function() { + + Umi.Channels.OnAdd.push(function(channel) { Umi.UI.Channels.Add(channel); }); @@ -114,29 +121,33 @@ Umi.UI.Hooks = (function() { Umi.Channels.OnSwitch.push(function(name, channel) { Umi.UI.Channels.Reload(name === null); }); - }, - AddTextHooks: function() { - window.addEventListener('keydown', function(ev) { - if(ev.ctrlKey || ev.altKey || ev.metaKey) - return; - const tagName = ev.target.tagName.toLowerCase(); - if(tagName !== 'textarea' && tagName !== 'input') - Umi.UI.Elements.MessageInput.focus(); + + window.addEventListener('keydown', function(ev) { + if(!ev.target.matches('input, textarea')) + $i('umi-msg-text').focus(); }); - Umi.UI.Elements.MessageInput.addEventListener('input', function(ev) { - const elemInput = Umi.UI.Elements.MessageInput, elemParent = elemInput.parentNode; + $i('umi-msg-form').addEventListener('submit', ev => { + ev.preventDefault(); + + const textField = ev.target.elements.namedItem('text'); + if(textField instanceof HTMLTextAreaElement) { + let text = textField.value; + textField.value = ''; + + text = text.replace(/\t/g, ' '); + Umi.Server.sendMessage(text); + } + }); + + $i('umi-msg-text').addEventListener('input', function(ev) { + const elemInput = $i('umi-msg-text'); + const elemParent = elemInput.parentNode; let height = 40; - if(mami.getSettings().get('expandTextBox') && elemInput.scrollHeight > elemInput.clientHeight) { - /*const cols = Math.floor(elemInput.clientWidth / 8), - rows = Math.floor(elemInput.textLength / cols); - - if(rows > 1) - height = 15.5 * (rows + 1);*/ + if(mami.getSettings().get('expandTextBox') && elemInput.scrollHeight > elemInput.clientHeight) height = elemInput.scrollHeight; - } if(height > 40) elemParent.style.height = height.toString() + 'px'; @@ -144,61 +155,53 @@ Umi.UI.Hooks = (function() { elemParent.style.height = null; }); - Umi.UI.Elements.MessageInput.addEventListener('keydown', function(ev) { - switch(ev.key) { - case 'Tab': - if(!ev.shiftKey || !ev.ctrlKey) { - ev.preventDefault(); + $i('umi-msg-text').addEventListener('keydown', function(ev) { + if(ev.key === 'Tab' && (!ev.shiftKey || !ev.ctrlKey)) { + ev.preventDefault(); - const text = Umi.UI.View.GetText(); - if(text.length > 0) { - const start = Umi.UI.View.GetPosition(); - let position = start, - snippet = ''; - while(position >= 0 && text.charAt(position - 1) !== ' ' && text.charAt(position - 1) !== "\n") { - --position; - snippet = text.charAt(position) + snippet; - } + const text = Umi.UI.View.GetText(); + if(text.length < 1) + return; - let insertText = undefined; + const start = Umi.UI.View.GetPosition(); + let position = start, + snippet = ''; + while(position >= 0 && text.charAt(position - 1) !== ' ' && text.charAt(position - 1) !== "\n") { + --position; + snippet = text.charAt(position) + snippet; + } - if(snippet.indexOf(':') === 0) { - let emoteRank = 0; - if(Umi.User.hasCurrentUser()) - emoteRank = Umi.User.getCurrentUser().getRank(); - const emotes = MamiEmotes.findByName(emoteRank, snippet.substring(1), true); - if(emotes.length > 0) - insertText = ':' + emotes[0] + ':'; - } else { - const users = Umi.Users.Find(snippet); - if(users.length === 1) - insertText = users[0].getName(); - } + let insertText = undefined; - if(insertText !== undefined) { - Umi.UI.View.SetText(text.slice(0, start - snippet.length) + text.slice(start)); - Umi.UI.View.SetPosition(start - snippet.length); - Umi.UI.View.EnterAtCursor(insertText); - Umi.UI.View.SetPosition(Umi.UI.View.GetPosition() + insertText.length); - Umi.UI.View.SetPosition(Umi.UI.View.GetPosition(), true); - } - } - } - break; + if(snippet.indexOf(':') === 0) { + let emoteRank = 0; + if(Umi.User.hasCurrentUser()) + emoteRank = Umi.User.getCurrentUser().getRank(); + const emotes = MamiEmotes.findByName(emoteRank, snippet.substring(1), true); + if(emotes.length > 0) + insertText = ':' + emotes[0] + ':'; + } else { + const users = Umi.Users.Find(snippet); + if(users.length === 1) + insertText = users[0].getName(); + } - case 'Enter': - case 'NumpadEnter': - if(!ev.shiftKey) { - ev.preventDefault(); - Umi.Messages.Send(Umi.UI.Elements.MessageInput.value); - return; - } - break; + if(insertText !== undefined) { + Umi.UI.View.SetText(text.slice(0, start - snippet.length) + text.slice(start)); + Umi.UI.View.SetPosition(start - snippet.length); + Umi.UI.View.EnterAtCursor(insertText); + Umi.UI.View.SetPosition(Umi.UI.View.GetPosition() + insertText.length); + Umi.UI.View.SetPosition(Umi.UI.View.GetPosition(), true); + } + + return; } - }); - Umi.UI.Elements.MessageSend.addEventListener('click', function(ev) { - Umi.Messages.Send(Umi.UI.Elements.MessageInput.value); + if((ev.key === 'Enter' || ev.key === 'NumpadEnter') && !ev.shiftKey) { + ev.preventDefault(); + $i('umi-msg-form').requestSubmit(); + return; + } }); }, }; diff --git a/src/mami.js/ui/input-menus.js b/src/mami.js/ui/input-menus.js index fa037c8..76906cc 100644 --- a/src/mami.js/ui/input-menus.js +++ b/src/mami.js/ui/input-menus.js @@ -1,5 +1,4 @@ #include utility.js -#include ui/elems.js #include ui/input-menus.js Umi.UI.InputMenus = (function() { @@ -10,8 +9,8 @@ Umi.UI.InputMenus = (function() { inputButtonActive = 'input__button--active'; const toggle = function(baseId) { - const button = Umi.UI.Elements.MessageMenus.id + '-btn-' + baseId, - menu = Umi.UI.Elements.MessageMenus.id + '-sub-' + baseId; + const button = 'umi-msg-menu-btn-' + baseId, + menu = 'umi-msg-menu-sub-' + baseId; if($c(inputMenuActive).length) $c(inputMenuActive)[0].classList.remove(inputMenuActive); @@ -30,7 +29,8 @@ Umi.UI.InputMenus = (function() { return $e({ tag: 'button', attrs: { - id: Umi.UI.Elements.MessageMenus.id + '-btn-' + id, + type: 'button', + id: 'umi-msg-menu-btn-' + id, classList: ['input__button', 'input__button--' + id], title: title, onclick: onClick || (function() { @@ -44,30 +44,27 @@ Umi.UI.InputMenus = (function() { Add: function(baseId, title) { if(ids.indexOf(baseId) < 0) { ids.push(baseId); - Umi.UI.Elements.MessageContainer.insertBefore(createButton(baseId, title), Umi.UI.Elements.MessageSend); - Umi.UI.Elements.MessageMenus.appendChild( - $e({ attrs: { 'class': ['input__menu', 'input__menu--' + baseId], id: Umi.UI.Elements.MessageMenus.id + '-sub-' + baseId } }) + $i('umi-msg-container').insertBefore(createButton(baseId, title), $i('umi-msg-send')); + $i('umi-msg-menu').appendChild( + $e({ attrs: { 'class': ['input__menu', 'input__menu--' + baseId], id: 'umi-msg-menu-sub-' + baseId } }) ); } }, AddButton: function(baseId, title, onClick) { if(ids.indexOf(baseId) < 0) { ids.push(baseId); - Umi.UI.Elements.MessageContainer.insertBefore( - createButton(baseId, title, onClick), - Umi.UI.Elements.MessageSend - ); + $i('umi-msg-container').insertBefore(createButton(baseId, title, onClick), $i('umi-msg-send')); } }, Get: function(baseId, button) { - const id = Umi.UI.Elements.MessageMenus.id + '-' + (button ? 'btn' : 'sub') + '-' + baseId; + const id = 'umi-msg-menu-' + (button ? 'btn' : 'sub') + '-' + baseId; if(ids.indexOf(baseId) >= 0) return $i(id); return null; }, Remove: function(baseId) { - $ri(Umi.UI.Elements.MessageMenus.id + '-btn-' + baseId); - $ri(Umi.UI.Elements.MessageMenus.id + '-sub-' + baseId); + $ri('umi-msg-menu-btn-' + baseId); + $ri('umi-msg-menu-sub-' + baseId); }, Toggle: toggle, CreateButton: createButton, diff --git a/src/mami.js/ui/markup.js b/src/mami.js/ui/markup.js index fb644a9..e75b640 100644 --- a/src/mami.js/ui/markup.js +++ b/src/mami.js/ui/markup.js @@ -2,7 +2,6 @@ #include common.js #include utility.js #include colpick/picker.jsx -#include ui/elems.js #include ui/input-menus.js #include ui/markup.js #include ui/view.js @@ -47,7 +46,8 @@ Umi.UI.Markup = (function() { Umi.UI.InputMenus.Get('markup').appendChild($e({ tag: 'button', attrs: { - id: Umi.UI.Elements.MessageMenus.id + '-markup-btn-' + name, + type: 'button', + id: 'umi-msg-menu-markup-btn-' + name, classList: ['markup__button', 'markup__button--' + name], dataset: { umiTagName: name, diff --git a/src/mami.js/ui/menus.js b/src/mami.js/ui/menus.js index f852744..21cee08 100644 --- a/src/mami.js/ui/menus.js +++ b/src/mami.js/ui/menus.js @@ -1,5 +1,4 @@ #include utility.js -#include ui/elems.js Umi.UI.Menus = (function() { const ids = []; @@ -16,7 +15,7 @@ Umi.UI.Menus = (function() { if(mode === undefined) mode = true; - const element = $i(Umi.UI.Elements.Icons.id + '-' + baseId); + const element = $i('umi-menu-icons-' + baseId); element.classList.remove(sidebarSelectorModeHidden); if(mode && !element.classList.contains(sidebarSelectorModeAttention) && !element.classList.contains('active')) @@ -26,8 +25,8 @@ Umi.UI.Menus = (function() { }; const activate = function(baseId) { - const icon = Umi.UI.Elements.Icons.id + '-' + baseId, - menu = Umi.UI.Elements.Menus.id + '-' + baseId; + const icon = 'umi-menu-icons-' + baseId, + menu = 'umi-menus-' + baseId; const menuToggle = Umi.UI.Toggles.Get('menu-toggle'); if(menuToggle.className.indexOf('closed') !== -1) @@ -47,10 +46,13 @@ Umi.UI.Menus = (function() { if(ids.indexOf(baseId) < 0) { ids.push(baseId); - const menuClass = [sidebarMenu, sidebarMenu + '--' + baseId], - iconClass = [sidebarSelectorMode, sidebarSelectorMode + '--' + baseId]; + const menuClass = [sidebarMenu, sidebarMenu + '--' + baseId]; + const iconClass = [sidebarSelectorMode, sidebarSelectorMode + '--' + baseId]; - if(Umi.UI.Elements.Menus.children.length < 1) { + const menus = $i('umi-menus'); + const icons = $i('umi-menu-icons'); + + if(menus.children.length < 1) { menuClass.push(sidebarMenuActive); iconClass.push(sidebarSelectorModeActive); } @@ -60,9 +62,9 @@ Umi.UI.Menus = (function() { iconClass.push(sidebarSelectorModeHidden); } - Umi.UI.Elements.Icons.appendChild($e({ + icons.appendChild($e({ attrs: { - id: Umi.UI.Elements.Icons.id + '-' + baseId, + id: 'umi-menu-icons-' + baseId, classList: iconClass, title: title, onclick: function() { @@ -71,19 +73,19 @@ Umi.UI.Menus = (function() { }, })); - Umi.UI.Elements.Menus.appendChild($e({ attrs: { 'class': menuClass, id: Umi.UI.Elements.Menus.id + '-' + baseId } })); + menus.appendChild($e({ attrs: { 'class': menuClass, id: 'umi-menus-' + baseId } })); } }, Get: function(baseId, icon) { - const id = (icon ? Umi.UI.Elements.Icons : Umi.UI.Elements.Menus).id + '-' + baseId; + const id = (icon ? 'umi-menu-icons' : 'umi-menus') + '-' + baseId; if(ids.indexOf(baseId) >= 0) return $i(id); return null; }, Remove: function(baseId) { - $ri(Umi.UI.Elements.Icons.id + '-' + baseId); - $ri(Umi.UI.Elements.Menus.id + '-' + baseId); + $ri('umi-menu-icons-' + baseId); + $ri('umi-menus-' + baseId); }, Activate: activate, Attention: attention, diff --git a/src/mami.js/ui/messages.jsx b/src/mami.js/ui/messages.jsx index 4188f1a..ed737d3 100644 --- a/src/mami.js/ui/messages.jsx +++ b/src/mami.js/ui/messages.jsx @@ -204,7 +204,9 @@ Umi.UI.Messages = (function() { .replace('{resolution}', avatarSize).replace('{user:avatar_change}', avatarUser.getAvatarTime().toString())); } else eAvatar.classList.add('message__avatar--disabled'); - Umi.UI.Elements.Messages.appendChild(eBase); + const msgsList = $i('umi-messages'); + + msgsList.appendChild(eBase); lastMsgUser = sender.getId(); lastMsgChannel = msg.getChannel(); @@ -216,7 +218,7 @@ Umi.UI.Messages = (function() { } if(settings.get('autoScroll')) - Umi.UI.Elements.Messages.scrollTop = Umi.UI.Elements.Messages.scrollHeight; + msgsList.scrollTop = msgsList.scrollHeight; if(window.CustomEvent) window.dispatchEvent(new CustomEvent('umi:ui:message_add', { @@ -236,7 +238,7 @@ Umi.UI.Messages = (function() { lastMsgUser = null; lastMsgChannel = null; lastWasTiny = null; - Umi.UI.Elements.Messages.innerHTML = ''; + $i('umi-messages').innerHTML = ''; }, }; })(); diff --git a/src/mami.js/ui/title.js b/src/mami.js/ui/title.js deleted file mode 100644 index 38f2376..0000000 --- a/src/mami.js/ui/title.js +++ /dev/null @@ -1,45 +0,0 @@ -#include common.js - -Umi.UI.Title = (function() { - let activeFlash = null; - - const setTitle = function(text) { - document.title = text; - }; - - const clearTitle = function() { - if(activeFlash !== null) { - clearInterval(activeFlash); - activeFlash = null; - setTitle(futami.get('title')); - } - }; - - const flashTitle = function(titles, interval, repeat) { - if(interval === undefined) interval = 500; - if(repeat === undefined) repeat = 5; - - let round = 0; - const target = titles.length * repeat; - - clearTitle(); - setTitle(titles[0]); - - activeFlash = setInterval(function() { - if(round >= target) { - clearTitle(); - setTitle(futami.get('title')); - return; - } - - ++round; - setTitle(titles[round % titles.length]); - }, interval); - }; - - return { - Set: setTitle, - Clear: clearTitle, - Flash: flashTitle, - }; -})(); diff --git a/src/mami.js/ui/toggles.js b/src/mami.js/ui/toggles.js index c2e9a2d..f879073 100644 --- a/src/mami.js/ui/toggles.js +++ b/src/mami.js/ui/toggles.js @@ -1,5 +1,4 @@ #include utility.js -#include ui/elems.js Umi.UI.Toggles = (function() { const ids = []; @@ -11,7 +10,7 @@ Umi.UI.Toggles = (function() { const toggle = $e({ attrs: { - id: Umi.UI.Elements.Toggles.id + '-' + baseId, + id: 'umi-toggles-' + baseId, classList: ['sidebar__selector-mode', 'sidebar__selector-mode--' + baseId], title: title, }, @@ -20,17 +19,18 @@ Umi.UI.Toggles = (function() { for(const i in eventHandlers) toggle.addEventListener(i, eventHandlers[i]); - Umi.UI.Elements.Toggles.insertBefore(toggle, Umi.UI.Elements.Toggles.firstChild); + const toggles = $i('umi-toggles'); + toggles.insertBefore(toggle, toggles.firstChild); } }, Get: function(baseId, icon) { - const id = Umi.UI.Elements.Toggles.id + '-' + baseId; + const id = 'umi-toggles-' + baseId; if(ids.indexOf(baseId) >= 0) return $i(id); return null; }, Remove: function(baseId) { - $ri(Umi.UI.Elements.Toggles.id + '-' + baseId); + $ri('umi-toggles-' + baseId); }, }; })(); diff --git a/src/mami.js/ui/view.js b/src/mami.js/ui/view.js index e5b1758..276d81f 100644 --- a/src/mami.js/ui/view.js +++ b/src/mami.js/ui/view.js @@ -1,5 +1,5 @@ #include themes.js -#include ui/elems.js +#include utility.js Umi.UI.View = (function() { const accentColours = { @@ -11,54 +11,46 @@ Umi.UI.View = (function() { }; const getPosition = function(end) { - return Umi.UI.Elements.MessageInput[end ? 'selectionEnd' : 'selectionStart']; + return $i('umi-msg-text')[end ? 'selectionEnd' : 'selectionStart']; }; const setPosition = function(pos, end) { - Umi.UI.Elements.MessageInput[end ? 'selectionEnd' : 'selectionStart'] = pos; + $i('umi-msg-text')[end ? 'selectionEnd' : 'selectionStart'] = pos; }; const getText = function() { - return Umi.UI.Elements.MessageInput.value; + return $i('umi-msg-text').value; }; const setText = function(text) { - Umi.UI.Elements.MessageInput.value = text; + $i('umi-msg-text').value = text; }; return { AccentColours: accentColours, AccentReload: function() { - const settings = mami.getSettings(), - available = Object.keys(accentColours), - name = settings.get('style'), - compact = 'chat--compact', - classes = ['views-item', 'umi']; + const settings = mami.getSettings() + const style = settings.get('style'); - if(available.indexOf(name) < 0) + if(!accentColours.hasOwnProperty(style)) return; // should probably be moved elsewhere eventually // the entire AccentReload function should probably be axed - UmiThemeApply(name); + UmiThemeApply(style); - if(!settings.get('tmpDisableOldThemeSys')) - classes.push('umi--' + name); + const chat = $i('umi-chat'); + if(chat instanceof Element) { + const compactView = settings.get('compactView'); + chat.classList.toggle('chat--compact', compactView); + $i('umi-messages').classList.toggle('chat--compact', compactView); - if(Umi.UI.Elements.Chat.className.indexOf('hidden') >= 0) - classes.push('hidden'); - - Umi.UI.Elements.Chat.className = ''; - Umi.UI.Elements.Chat.classList.add.apply(Umi.UI.Elements.Chat.classList, classes); - if(settings.get('compactView')) { - if(Umi.UI.Elements.Chat.className.indexOf(compact) < 0) - Umi.UI.Elements.Messages.classList.add(compact); - } else - Umi.UI.Elements.Messages.classList.remove(compact); - - if(settings.get('autoScroll')) - Umi.UI.Elements.Messages.scrollTop = Umi.UI.Elements.Messages.scrollHeight; + const forceOldOff = settings.get('tmpDisableOldThemeSys'); + for(const name in accentColours) + if(accentColours.hasOwnProperty(name)) + chat.classList.toggle(`umi--${name}`, !forceOldOff && name === style); + } }, Focus: function() { - Umi.UI.Elements.MessageInput.focus(); + $i('umi-msg-text').focus(); }, SetPosition: setPosition, GetPosition: getPosition, @@ -66,7 +58,7 @@ Umi.UI.View = (function() { setPosition(0); }, GoToEnd: function() { - setPosition(Umi.UI.Elements.MessageInput.value.length); + setPosition($i('umi-msg-text').value.length); }, GetSelectionLength: function() { let length = getPosition(true) - getPosition();