diff --git a/src/windows/main/js/main.js b/src/windows/main/js/main.js index 6154d33b..9996db47 100644 --- a/src/windows/main/js/main.js +++ b/src/windows/main/js/main.js @@ -8,6 +8,7 @@ const { } = require('electron'); const Store = require('electron-store'); const generateId = require('uuid/v4'); +const HTML = require('../assets/js/elementCodes.js'); // Create main window titlebar const mainTitlebar = new customTitlebar.Titlebar({ @@ -28,100 +29,13 @@ let themes = new Store({ }); function loadTabsFromStorage() { + let storedTabs = tabs.get('instances'); if (storedTabs.length == 0) { document.querySelector('.no-tabs').style.display = 'flex'; } else { storedTabs.forEach(tab => { - let tabElementCode = ` - ${tab.name} - `; - let instanceElementCode = `
- -
`; - let settingsModalCode = `
- -
- Edit Settings for "${tab.name}" -
-
-
-
- - -
-
-
- - -
-
-
-
- - -
-
-
- -
- - -
Theme
-
-
-
-
-
-
EDIT
-
-
`; - - let range = document.createRange(); - let tabElement = range.createContextualFragment(tabElementCode); - let instanceElement = range.createContextualFragment(instanceElementCode); - let settingsModal = range.createContextualFragment(settingsModalCode); - - document.querySelector('.tabs').insertBefore(tabElement, document.querySelector('.add-tab-icon')); - document.querySelector('.tab-contents').appendChild(instanceElement); - document.querySelector('.modals-div').appendChild(settingsModal); - - $(`#tab-${tab.id}`).tab(); - - $(`.settings-modal-${tab.id}`) - .modal({ - onApprove: () => { - let editedInstance = { - name: $(`#${tab.id}-name`).val(), - id: `${tab.id}`, - settings: { - notifications: $(`.${tab.id}-notifications-value`).checkbox('is checked'), - sound: $(`.${tab.id}-sound-value`).checkbox('is checked'), - theme: $(`.${tab.id}-theme-value`).dropdown('get value') - } - } - let tabsStore = tabs.get('instances'); - let findTab = tabsStore.find(x => x.id === tab.id); - let newTabIndex = tabsStore.indexOf(findTab); - tabsStore[newTabIndex] = editedInstance; - tabs.set('instances', tabsStore); - window.location.reload(); - } - }) - .modal('attach events', `#tab-${tab.id} .cog.icon`, 'show'); - - if (tab.settings.notifications == true) { - $(`.${tab.id}-notifications-value`).checkbox('check'); - } else { - $(`.${tab.id}-notifications-value`).checkbox('uncheck'); - } - - if (tab.settings.sound == true) { - $(`.${tab.id}-sound-value`).checkbox('check'); - } else { - $(`.${tab.id}-sound-value`).checkbox('uncheck'); - } - + addNewInstance(tab); }); document.querySelector('.menu').firstElementChild.classList.add('active'); @@ -143,6 +57,8 @@ function loadTabsFromStorage() { }); }); } + + setWebViewSettingsLoop(); } $('.ui.modal') @@ -171,7 +87,11 @@ $('.ui.modal') tabsStore.push(newInstance); tabs.set('instances', tabsStore); - window.location.reload(); + + addNewInstance(newInstance); + $('.tab-element.active').removeClass('active'); + $(`#tab-${newInstance.id}`).addClass('active'); + $(`#tab-${newInstance.id}`).click(); } } @@ -284,16 +204,18 @@ window.Notification = ProxyNotification; }); } -document.querySelectorAll('.tab').forEach(tabElement => { - let tabID = tabElement.id.replace('tab-content-', ''); - let tabJSON = tabs.get('instances').find(x => x.id === tabID); - let webviewElement = document.querySelector(`#${tabElement.id}`).querySelector('webview'); +function setWebViewSettingsLoop() { + document.querySelectorAll('.tab').forEach(tabElement => { + let tabID = tabElement.id.replace('tab-content-', ''); + let tabJSON = tabs.get('instances').find(x => x.id === tabID); + let webviewElement = document.querySelector(`#${tabElement.id}`).querySelector('webview'); - $(`.${tabID}-theme-value`).dropdown('set selected', tabJSON.settings.theme); - $(`.${tabID}-theme-value`).dropdown(); + $(`.${tabID}-theme-value`).dropdown('set selected', tabJSON.settings.theme); + $(`.${tabID}-theme-value`).dropdown(); - setWebViewSettings(webviewElement, tabJSON); -}); + setWebViewSettings(webviewElement, tabJSON); + }); +} function checkForInstances() { let instances = tabs.get('instances'); @@ -302,9 +224,84 @@ function checkForInstances() { document.querySelector('.no-tabs').style.display = 'flex'; } else { document.querySelector('.no-tabs').style.display = 'none'; + document.querySelector('.menu').firstElementChild.classList.add('active'); + document.querySelector('.menu').firstElementChild.click(); } } +function addNewInstance(instance) { + let tab = instance; + let tabElementCode = HTML.tabElement(tab); + let instanceElementCode = HTML.instanceElement(tab); + let settingsModalCode = HTML.settingsModalElement(tab); + let range = document.createRange(); + let tabElement = range.createContextualFragment(tabElementCode); + let instanceElement = range.createContextualFragment(instanceElementCode); + let settingsModal = range.createContextualFragment(settingsModalCode); + document.querySelector('.tabs').insertBefore(tabElement, document.querySelector('.add-tab-icon')); + document.querySelector('.tab-contents').appendChild(instanceElement); + document.querySelector('.modals-div').appendChild(settingsModal); + + $(`#tab-${tab.id}`).tab(); + + $(`.settings-modal-${tab.id}`) + .modal({ + onApprove: () => { + let editedInstance = { + name: $(`#${tab.id}-name`).val(), + id: `${tab.id}`, + settings: { + notifications: $(`.${tab.id}-notifications-value`).checkbox('is checked'), + sound: $(`.${tab.id}-sound-value`).checkbox('is checked'), + theme: $(`.${tab.id}-theme-value`).dropdown('get value') + } + } + let tabsStore = tabs.get('instances'); + let findTab = tabsStore.find(x => x.id === tab.id); + let newTabIndex = tabsStore.indexOf(findTab); + tabsStore[newTabIndex] = editedInstance; + tabs.set('instances', tabsStore); + window.location.reload(); + } + }) + .modal('attach events', `#tab-${tab.id} .cog.icon`, 'show'); + + if (tab.settings.notifications == true) { + $(`.${tab.id}-notifications-value`).checkbox('check'); + } else { + $(`.${tab.id}-notifications-value`).checkbox('uncheck'); + } + + if (tab.settings.sound == true) { + $(`.${tab.id}-sound-value`).checkbox('check'); + } else { + $(`.${tab.id}-sound-value`).checkbox('uncheck'); + } + + document.querySelectorAll('.menu .item > .close.icon.ui').forEach(e => { + e.addEventListener('click', () => { + let id = e.parentElement.getAttribute('data-tab'); + + let tabsStore = tabs.get('instances'); + let newTabs = tabsStore.filter(tab => tab.id !== id); + + tabs.set('instances', newTabs); + + document.getElementById(`tab-content-${id}`).remove(); + e.parentElement.remove(); + + checkForInstances(); + }); + }); + + $('.dropdown').dropdown(); + $('.dropdown').dropdown({ + values: generateThemeNames() + }); + + setWebViewSettingsLoop(); +} + ipcRenderer.on('new-themes-added', e => window.location.reload(true)); // Setting title explicitly