From bbc80dedfb16751b552b25a2ef63f89dfb9d7c61 Mon Sep 17 00:00:00 2001 From: ShadyThGod Date: Wed, 20 Feb 2019 12:38:49 +0530 Subject: [PATCH] Update main window Themes now work for tabs. Separate themes for separate tabs. Implemented tab settings. Links clicked in whatsapp instance will open in default browser. --- src/windows/main/js/main.js | 195 +++++++++++++++++++++----------- src/windows/main/js/whatsapp.js | 9 ++ src/windows/main/window.html | 8 ++ 3 files changed, 147 insertions(+), 65 deletions(-) diff --git a/src/windows/main/js/main.js b/src/windows/main/js/main.js index 27595f2b..734900ab 100644 --- a/src/windows/main/js/main.js +++ b/src/windows/main/js/main.js @@ -23,16 +23,20 @@ let tabs = new Store({ } }); +let themes = new Store({ + name: 'themes' +}); + function loadTabsFromStorage() { let storedTabs = tabs.get('instances'); if (storedTabs.length == 0) { document.querySelector('.no-tabs').style.display = 'flex'; } else { storedTabs.forEach(tab => { - let tabElementCode = ` + let tabElementCode = ` ${tab.name} `; - let instanceElementCode = `
+ let instanceElementCode = `
`; let settingsModalCode = `
@@ -58,6 +62,14 @@ function loadTabsFromStorage() {
+
+ +
+ + +
Theme
+
+
@@ -74,66 +86,7 @@ function loadTabsFromStorage() { document.querySelector('.tab-contents').appendChild(instanceElement); document.querySelector('.modals-div').appendChild(settingsModal); - $('.menu .item') - .tab({ - onFirstLoad: () => { - let webview = document.querySelector(`#${tab.id}`).querySelector('webview'); - webview.addEventListener('dom-ready', () => { - if (tab.settings.sound == true) { - webview.setAudioMuted(false); - } else { - webview.setAudioMuted(true); - } - - var notify; - if (tab.settings.notifications == true) { - notify = 'new _Notification(title, options)'; - } else { - notify = 'undefined'; - } - webview.executeJavaScript(` -var _Notification = window.Notification; -var ProxyNotification = function (title, options) { - var _notification = ${notify}; - this.title = _notification.title; - this.dir = _notification.dir; - this.lang = _notification.lang; - this.body = _notification.body; - this.tag = _notification.tag; - this.icon = _notification.icon; - var that = this; - _notification.onclick = function (event) { - if (that.onclick != undefined) that.onclick(event); - }; - _notification.onshow = function (event) { - if (that.onshow != undefined) that.onshow(event); - }; - _notification.onerror = function (event) { - if (that.onerror != undefined) that.onerror(event); - }; - _notification.onclose = function (event) { - if (that.onclose != undefined) that.onclose(event); - }; - this.close = function () { - _notification.close(); - }; - this.addEventListener = function (type, listener, useCapture) { - _notification.addEventListener(type, listener, useCapture); - }; - this.removeEventListener = function (type, listener, useCapture) { - _notification.removeEventListener(type, listener, useCapture); - }; - this.dispatchEvent = function (event) { - _notification.dispatchEvent(event); - }; -} -ProxyNotification.permission = _Notification.permission; -ProxyNotification.requestPermission = _Notification.requestPermission; -window.Notification = ProxyNotification; -`); - }); - } - }); + $(`#tab-${tab.id}`).tab(); $(`.settings-modal-${tab.id}`) .modal({ @@ -143,7 +96,8 @@ window.Notification = ProxyNotification; id: `${tab.id}`, settings: { notifications: $(`.${tab.id}-notifications-value`).checkbox('is checked'), - sound: $(`.${tab.id}-sound-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'); @@ -167,6 +121,7 @@ window.Notification = ProxyNotification; } else { $(`.${tab.id}-sound-value`).checkbox('uncheck'); } + }); document.querySelector('.menu').firstElementChild.classList.add('active'); @@ -193,13 +148,15 @@ $('.ui.modal') let instanceNameValue = document.querySelector('#new-instance-name').value; let instanceNotificationsValue = $('.notifcheck').checkbox('is checked'); let instanceSoundValue = $('.soundcheck').checkbox('is checked'); + let instanceThemeValue = $('.themecheck').dropdown('get value'); let newInstance = { name: instanceNameValue, id: generateId(), settings: { notifications: instanceNotificationsValue, - sound: instanceSoundValue + sound: instanceSoundValue, + theme: instanceThemeValue } }; @@ -218,7 +175,115 @@ $('.ui.checkbox') loadTabsFromStorage(); -ipcRenderer.on('settings-changed', e => window.location.reload(true)); +function generateThemeNames() { + let nameList = []; + + themes.get('themes').forEach(theme => { + let name = theme.name; + let value = theme.name; + + let themeJSON = { + name: name, + value: value + } + + nameList.push(themeJSON); + }); + + return nameList; +} + +$('.dropdown').dropdown(); +$('.dropdown').dropdown({ + values: generateThemeNames() +}); + +function generateThemeCSS(name) { + let themesList = themes.get('themes'); + let selectedTheme = themesList.find(x => x.name === name); + return selectedTheme.css; +} + +function setWebViewSettings(webviewElement, tab) { + webviewElement.addEventListener('dom-ready', () => { + if (tab.settings.sound == true) { + webviewElement.setAudioMuted(false); + } else { + webviewElement.setAudioMuted(true); + } + + webviewElement.executeJavaScript(` + var styleElem = document.querySelector('#whatsapp-style'); + if (styleElem) { + styleElem.innerHTML = \`${generateThemeCSS(tab.settings.theme)}\`; + } else if (!styleElem) { + var styleElement = document.createElement('style'); + styleElement.id = 'whatsapp-style'; + styleElement.innerHTML = \`${generateThemeCSS(tab.settings.theme)}\`; + document.head.appendChild(styleElement); + }`); + + var notify; + if (tab.settings.notifications == true) { + notify = 'new _Notification(title, options)'; + } else { + notify = 'undefined'; + } + webviewElement.executeJavaScript(` +var _Notification = window.Notification; +var ProxyNotification = function (title, options) { + var _notification = ${notify}; + this.title = _notification.title; + this.dir = _notification.dir; + this.lang = _notification.lang; + this.body = _notification.body; + this.tag = _notification.tag; + this.icon = _notification.icon; + var that = this; + _notification.onclick = function (event) { + if (that.onclick != undefined) that.onclick(event); + }; + _notification.onshow = function (event) { + if (that.onshow != undefined) that.onshow(event); + }; + _notification.onerror = function (event) { + if (that.onerror != undefined) that.onerror(event); + }; + _notification.onclose = function (event) { + if (that.onclose != undefined) that.onclose(event); + }; + this.close = function () { + _notification.close(); + }; + this.addEventListener = function (type, listener, useCapture) { + _notification.addEventListener(type, listener, useCapture); + }; + this.removeEventListener = function (type, listener, useCapture) { + _notification.removeEventListener(type, listener, useCapture); + }; + this.dispatchEvent = function (event) { + _notification.dispatchEvent(event); + }; +} +ProxyNotification.permission = _Notification.permission; +ProxyNotification.requestPermission = _Notification.requestPermission; +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'); + + $(`.${tabID}-theme-value`).dropdown('set selected', tabJSON.settings.theme); + $(`.${tabID}-theme-value`).dropdown(); + + setWebViewSettings(webviewElement, tabJSON); +}); + +ipcRenderer.on('new-themes-added', e => window.location.reload(true)); // Setting title explicitly mainTitlebar.updateTitle(`Altus ${app.getVersion()}`); \ No newline at end of file diff --git a/src/windows/main/js/whatsapp.js b/src/windows/main/js/whatsapp.js index 45d081fa..b3630528 100644 --- a/src/windows/main/js/whatsapp.js +++ b/src/windows/main/js/whatsapp.js @@ -1,6 +1,9 @@ const { remote } = require('electron'); +const { + ipcRenderer +} = require('electron'); const Mousetrap = require('mousetrap'); // Fix for "WhatsApp works with Chrome 36+" issue . DO NOT REMOVE @@ -24,6 +27,12 @@ window.onload = () => { } } +document.addEventListener('click', e => { + if (e.target.tagName == "A") { + ipcRenderer.send('link-open', e.target.href); + } +}); + /* Mac Copy/Paste Fix */ Mousetrap.bind(['command+c', 'ctrl+c'], function(e) { document.execCommand('copy'); diff --git a/src/windows/main/window.html b/src/windows/main/window.html index 9eb72727..83d6ebb7 100644 --- a/src/windows/main/window.html +++ b/src/windows/main/window.html @@ -52,6 +52,14 @@

No Instances Found

+
+ +
+ + +
Theme
+
+