UI code cleanups.

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.AddHooks();
-    Umi.UI.Hooks.AddUserHooks();
-    Umi.UI.Hooks.AddChannelHooks();
-    Umi.UI.Hooks.AddTextHooks();
 
     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);

src/mami.js/messages.js

@@ -4,22 +4,14 @@
 Umi.Messages = (function() {
     const msgs = new Map;
 
-    const onSend = [],
+    const onAdd = [],
-        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)) {

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,
+    };
+};

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,
                 },

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: [

src/mami.js/ui/elems.js

@@ -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,
-};

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: {

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() {
+        AddHooks: function() {
-            Umi.Messages.OnSend.push(function(msg) {
+            const title = new MamiWindowTitle({
-                Umi.UI.View.SetText('');
+                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)
-
-                if(!document.hidden && settings.get('flashTitle'))
                     return;
 
-                let title = ' ' + msg.getUser().getName(),
+                const settings = mami.getSettings();
+
+                if(settings.get('flashTitle')) {
+                    let titleText = ' ' + msg.getUser().getName(),
                         channel = Umi.Channels.Current() || null;
                     if(msg.getUser().isBot() && settings.get('showServerMsgInTitle'))
-                    title = ' ' + msg.getText();
+                        titleText = ' ' + msg.getText();
 
                     if(channel !== null && channel.getName() !== msg.getChannel())
-                    title += ' @ ' + channel.getName();
+                        titleText += ' @ ' + channel.getName();
 
-                Umi.UI.Title.Flash(['[ @]' + title, '[@ ]' + title]);
+                    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') 
+            window.addEventListener('keydown', function(ev) {
-                    Umi.UI.Elements.MessageInput.focus();
+                if(!ev.target.matches('input, textarea'))
+                    $i('umi-msg-text').focus();
             });
 
-            Umi.UI.Elements.MessageInput.addEventListener('input', function(ev) {
+            $i('umi-msg-form').addEventListener('submit', ev => {
-                const elemInput = Umi.UI.Elements.MessageInput, elemParent = elemInput.parentNode;
+                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) {
+                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);*/
                     height = elemInput.scrollHeight;
-                }
 
                 if(height > 40)
                     elemParent.style.height = height.toString() + 'px';
@@ -144,14 +155,14 @@ Umi.UI.Hooks = (function() {
                     elemParent.style.height = null;
             });
 
-            Umi.UI.Elements.MessageInput.addEventListener('keydown', function(ev) {
+            $i('umi-msg-text').addEventListener('keydown', function(ev) {
-                switch(ev.key) {
+                if(ev.key === 'Tab' && (!ev.shiftKey || !ev.ctrlKey)) {
-                    case 'Tab':
-                        if(!ev.shiftKey || !ev.ctrlKey) {
                     ev.preventDefault();
 
                     const text = Umi.UI.View.GetText();
-                            if(text.length > 0) {
+                    if(text.length < 1)
+                        return;
+
                     const start = Umi.UI.View.GetPosition();
                     let position = start,
                         snippet = '';
@@ -182,23 +193,15 @@ Umi.UI.Hooks = (function() {
                         Umi.UI.View.SetPosition(Umi.UI.View.GetPosition() + insertText.length);
                         Umi.UI.View.SetPosition(Umi.UI.View.GetPosition(), true);
                     }
-                            }
-                        }
-                        break;
 
-                    case 'Enter':
-                    case 'NumpadEnter':
-                        if(!ev.shiftKey) {
-                            ev.preventDefault();
-                            Umi.Messages.Send(Umi.UI.Elements.MessageInput.value);
                     return;
                 }
-                        break;
-                }
-            });
 
-            Umi.UI.Elements.MessageSend.addEventListener('click', function(ev) {
+                if((ev.key === 'Enter' || ev.key === 'NumpadEnter') && !ev.shiftKey) {
-                Umi.Messages.Send(Umi.UI.Elements.MessageInput.value);
+                    ev.preventDefault();
+                    $i('umi-msg-form').requestSubmit();
+                    return;
+                }
             });
         },
     };

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,
+        const button = 'umi-msg-menu-btn-' + baseId,
-            menu = Umi.UI.Elements.MessageMenus.id + '-sub-' + 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);
+                $i('umi-msg-container').insertBefore(createButton(baseId, title), $i('umi-msg-send'));
-                Umi.UI.Elements.MessageMenus.appendChild(
+                $i('umi-msg-menu').appendChild(
-                    $e({ attrs: { 'class': ['input__menu', 'input__menu--' + baseId], id: Umi.UI.Elements.MessageMenus.id + '-sub-' + baseId } })
+                    $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(
+                $i('umi-msg-container').insertBefore(createButton(baseId, title, onClick), $i('umi-msg-send'));
-                    createButton(baseId, title, onClick),
-                    Umi.UI.Elements.MessageSend
-                );
             }
         },
         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-msg-menu-btn-' + baseId);
-            $ri(Umi.UI.Elements.MessageMenus.id + '-sub-' + baseId);
+            $ri('umi-msg-menu-sub-' + baseId);
         },
         Toggle: toggle,
         CreateButton: createButton,

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,

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,
+        const icon = 'umi-menu-icons-' + baseId,
-            menu = Umi.UI.Elements.Menus.id + '-' + 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],
+                const menuClass = [sidebarMenu, sidebarMenu + '--' + baseId];
-                    iconClass = [sidebarSelectorMode, sidebarSelectorMode + '--' + 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-menu-icons-' + baseId);
-            $ri(Umi.UI.Elements.Menus.id + '-' + baseId);
+            $ri('umi-menus-' + baseId);
         },
         Activate: activate,
         Attention: attention,

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 = '';
         },
     };
 })();

src/mami.js/ui/title.js

@@ -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,
-    };
-})();

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);
         },
     };
 })();

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(),
+            const settings = mami.getSettings()
-                available = Object.keys(accentColours),
+            const style = settings.get('style');
-                name = settings.get('style'),
-                compact = 'chat--compact',
-                classes = ['views-item', 'umi'];
 
-            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'))
+            const chat = $i('umi-chat');
-                classes.push('umi--' + name);
+            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)
+                const forceOldOff = settings.get('tmpDisableOldThemeSys');
-                classes.push('hidden');
+                for(const name in accentColours)
-
+                    if(accentColours.hasOwnProperty(name))
-            Umi.UI.Elements.Chat.className = '';
+                        chat.classList.toggle(`umi--${name}`, !forceOldOff && name === style);
-            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;
         },
         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();