141 lines
4.4 KiB
JavaScript
141 lines
4.4 KiB
JavaScript
function getResponse() {
|
|
const userText = document.querySelector('#textInput').value;
|
|
|
|
// If nothing is written don't do anything
|
|
if (userText === '') {
|
|
return;
|
|
}
|
|
|
|
// Create chat message from received data
|
|
const article = document.createElement('article');
|
|
article.className = 'msg-container msg-self';
|
|
|
|
article.innerHTML = messageTemplates.userTemplate;
|
|
|
|
const postTime = article.querySelector('.post-time');
|
|
if (postTime) {
|
|
postTime.innerText = getPostTime();
|
|
}
|
|
|
|
const msg = article.querySelector('.msg');
|
|
if (msg) {
|
|
msg.innerText = userText;
|
|
}
|
|
|
|
// Appends the message to the main chat box (shows the message)
|
|
showChatMessage(article);
|
|
|
|
twitch.sendMessage(userText);
|
|
|
|
// Empty input box after sending message
|
|
document.body.querySelector('#textInput').value = '';
|
|
}
|
|
|
|
// Function that will execute when you press 'enter' in the message box
|
|
document.body.querySelector('#textInput').addEventListener('keydown', (e) => {
|
|
if (e.which === 13) {
|
|
getResponse();
|
|
}
|
|
});
|
|
|
|
// Function that will execute when you click the 'send' button
|
|
document.body.querySelector('#SendButton').addEventListener('click', () => {
|
|
getResponse();
|
|
});
|
|
|
|
// #endregion
|
|
|
|
// #region Panel retraction function
|
|
|
|
// Left panel
|
|
document.body.querySelector('.circle-left').addEventListener('click', () => {
|
|
const menu = document.body.querySelector('.sidepanel-left');
|
|
|
|
if (menu.classList.contains('collapse-menu-left')) {
|
|
menu.classList.remove('collapse-menu-left');
|
|
} else {
|
|
menu.classList.add('collapse-menu-left');
|
|
}
|
|
|
|
const leftCircle = document.body.querySelector('.circle-left');
|
|
|
|
if (leftCircle.classList.contains('collapse-circle-left')) {
|
|
leftCircle.classList.remove('collapse-circle-left');
|
|
} else {
|
|
leftCircle.classList.add('collapse-circle-left');
|
|
}
|
|
});
|
|
|
|
// #region Show panels
|
|
|
|
// TODO: animate Option panels
|
|
// TODO : optimize show panels
|
|
// Function that shows and hides the option panels. (TTS, Configuration, Commands)
|
|
const displayPanel = (panelSelectorClass, panelSelectorID, btnSelectorID) => {
|
|
const btn = document.querySelector(btnSelectorID);
|
|
const panel = document.querySelector(panelSelectorID);
|
|
const panels = document.querySelectorAll(panelSelectorClass);
|
|
|
|
btn.addEventListener(
|
|
'click',
|
|
(event) => {
|
|
event.stopPropagation();
|
|
panels.forEach((el) => {
|
|
if (el === panel) return;
|
|
el.classList.remove('show');
|
|
});
|
|
if (panel.classList.contains('show')) {
|
|
} else {
|
|
panel.classList.add('show');
|
|
}
|
|
},
|
|
{
|
|
capture: true,
|
|
},
|
|
);
|
|
};
|
|
|
|
displayPanel('.OptionPanel', '#Configuration', '#btnConfiguration');
|
|
displayPanel('.OptionPanel', '#Logs', '#btnLogs');
|
|
displayPanel('.OptionPanel', '#BrowsersourceChat', '#btnBrowsersourceChat');
|
|
displayPanel('.OptionPanel', '#BrowsersourceVtuber', '#btnBrowsersourceVtuber');
|
|
displayPanel('.OptionPanel', '#Chat', '#btnChat');
|
|
displayPanel('.OptionPanel', '#ThemeCreator', '#btnThemeCreator');
|
|
displayPanel('.OptionPanel', '#ChatCreator', '#btnChatCreator');
|
|
// #endregion
|
|
|
|
const displayPanelX = (panelSelectorClass, panelSelectorID, btnSelectorID) => {
|
|
const btn = document.querySelector(btnSelectorID);
|
|
const panel = document.querySelector(panelSelectorID);
|
|
const panels = document.querySelectorAll(panelSelectorClass);
|
|
|
|
btn.addEventListener(
|
|
'click',
|
|
(event) => {
|
|
event.stopPropagation();
|
|
panels.forEach((el) => {
|
|
if (el === panel) return;
|
|
el.classList.remove('item-active');
|
|
});
|
|
if (panel.classList.contains('item-active')) {
|
|
} else {
|
|
panel.classList.add('item-active');
|
|
}
|
|
},
|
|
{
|
|
capture: true,
|
|
},
|
|
);
|
|
};
|
|
|
|
displayPanelX('.item', '#btnChat', '#btnChat');
|
|
displayPanelX('.item', '#btnBrowsersourceChat', '#btnBrowsersourceChat');
|
|
displayPanelX('.item', '#btnBrowsersourceVtuber', '#btnBrowsersourceVtuber');
|
|
displayPanelX('.item', '#btnLogs', '#btnLogs');
|
|
displayPanelX('.item', '#btnConfiguration', '#btnConfiguration');
|
|
displayPanelX('.item', '#btnThemeCreator', '#btnThemeCreator');
|
|
displayPanelX('.item', '#btnChatCreator', '#btnChatCreator');
|
|
|
|
// #region Show/Hide Theme Creator
|
|
|
|
// #endregion
|