UI code cleanups.
This commit is contained in:
parent
4671eeca57
commit
af2919f363
15 changed files with 238 additions and 245 deletions
|
@ -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);
|
||||
|
|
|
@ -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)) {
|
||||
|
|
77
src/mami.js/title.js
Normal file
77
src/mami.js/title.js
Normal file
|
@ -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,
|
||||
};
|
||||
};
|
|
@ -11,6 +11,7 @@ Umi.UI.ChatInputMain = function() {
|
|||
tag: 'textarea',
|
||||
attrs: {
|
||||
id: 'umi-msg-text',
|
||||
name: 'text',
|
||||
className: 'input__text',
|
||||
autofocus: true,
|
||||
},
|
||||
|
|
|
@ -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: [
|
||||
|
|
|
@ -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,
|
||||
};
|
|
@ -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: {
|
||||
|
|
|
@ -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(),
|
||||
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')
|
||||
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,14 +155,14 @@ 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) {
|
||||
$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) {
|
||||
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) {
|
||||
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;
|
||||
}
|
||||
});
|
||||
},
|
||||
};
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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 = '';
|
||||
},
|
||||
};
|
||||
})();
|
||||
|
|
|
@ -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,
|
||||
};
|
||||
})();
|
|
@ -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);
|
||||
},
|
||||
};
|
||||
})();
|
||||
|
|
|
@ -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();
|
||||
|
|
Loading…
Reference in a new issue