Skip to content

Commit

Permalink
Update Main Window
Browse files Browse the repository at this point in the history 
Multiple WhatsApp Support Now Working (Except for themes)
  • Loading branch information
@amanharwara
amanharwara committed Feb 17, 2019
1 parent b721b28 commit e2776de
Show file tree
Hide file tree
Showing 3 changed files with 312 additions and 4 deletions.
52 changes: 49 additions & 3 deletions src/windows/main/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,53 @@ body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

webview,
#whatsapp {
height: 95.85vh;
.main,
.container-after-titlebar {
overflow: hidden !important;
}

.ui.tab.segment,
.no-tabs {
height: 90vh !important;
padding: 0;
}

.ui.tab.segment>* {
height: inherit;
}

.ui.top.attached.tabular.menu {
background: #21252B;
border: 0 !important;
border-radius: 0;
height: 6vh;
}

.ui.top.attached.tabular.menu .item {
color: white;
border: none;
}

.ui.top.attached.tabular.menu .item.active {
background: #3d444e;
color: white;
}

.ui.cog.icon {
color: white !important;
margin-left: 15px !important;
}

.ui.close.icon {
margin-right: -5px !important;
}

.no-tabs {
background: #21252B;
display: none;
align-items: center;
}

.no-tabs>* {
background: inherit;
}
204 changes: 204 additions & 0 deletions src/windows/main/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ const {
const {
ipcRenderer
} = require('electron');
const Store = require('electron-store');
const generateId = require('uuid/v4');

// Create main window titlebar
const mainTitlebar = new customTitlebar.Titlebar({
Expand All @@ -14,6 +16,208 @@ const mainTitlebar = new customTitlebar.Titlebar({
itemBackgroundColor: customTitlebar.Color.fromHex('#3d444e'),
});

let tabs = new Store({
name: 'tabs',
defaults: {
instances: []
}
});

function loadTabsFromStorage() {
let storedTabs = tabs.get('instances');
if (storedTabs.length == 0) {
document.querySelector('.no-tabs').style.display = 'flex';
} else {
storedTabs.forEach(tab => {
let tabElementCode = `<a class="item" id="tab-${tab.id}" data-tab="${tab.id}">
<i class="whatsapp icon"></i> ${tab.name} <i class="cog icon ui"></i> <i class="close icon ui"></i>
</a>`;
let instanceElementCode = `<div class="ui bottom attached tab segment" id="${tab.id}" data-tab="${tab.id}">
<webview preload="./js/whatsapp.js" id="whatsapp-${tab.id}" src="https://web.whatsapp.com/" useragent="Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36" partition="persist:${tab.id}"></webview>
</div>`;
let settingsModalCode = `<div class="ui mini modal settings-modal-${tab.id}">
<i class="close icon"></i>
<div class="header">
Edit Settings for "${tab.name}"
</div>
<div class="content">
<div class="ui form">
<div class="ui field">
<label>Name</label>
<input type="text" placeholder="Name of instance" id="${tab.id}-name" value="${tab.name}">
</div>
<div class="ui inline field">
<div class="ui toggle checkbox ${tab.id}-notifications-value">
<label>Enable Notifications</label>
<input type="checkbox" tabindex="0" class="hidden">
</div>
</div>
<div class="ui inline field">
<div class="ui toggle checkbox ${tab.id}-sound-value">
<label>Enable Sound</label>
<input type="checkbox" tabindex="0" class="hidden">
</div>
</div>
</div>
</div>
<div class="actions">
<div class="ui positive button">EDIT</div>
</div>
</div>`;

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);

$('.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;
`);
});
}
});

$(`.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')
}
}
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.querySelector('.menu').firstElementChild.classList.add('active');
document.querySelector('.menu').firstElementChild.click();

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);

window.location.reload();
});
});
}
}

$('.ui.modal')
.modal({
onApprove: () => {
let instanceNameValue = document.querySelector('#new-instance-name').value;
let instanceNotificationsValue = $('.notifcheck').checkbox('is checked');
let instanceSoundValue = $('.soundcheck').checkbox('is checked');

let newInstance = {
name: instanceNameValue,
id: generateId(),
settings: {
notifications: instanceNotificationsValue,
sound: instanceSoundValue
}
};

let tabsStore = tabs.get('instances');
tabsStore.push(newInstance);

tabs.set('instances', tabsStore);

window.location.reload();
}
})
.modal('attach events', '.add-tab-icon', 'show');

$('.ui.checkbox')
.checkbox();

loadTabsFromStorage();

ipcRenderer.on('settings-changed', e => window.location.reload(true));

// Setting title explicitly
Expand Down
60 changes: 59 additions & 1 deletion src/windows/main/window.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,68 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Altus</title>
<link rel="stylesheet" href="./css/main.css">
<link rel="stylesheet" href="../assets/css/semantic.min.css">
</head>

<body>
<webview preload="./js/whatsapp.js" id="whatsapp" src="https://web.whatsapp.com/" useragent="Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36"></webview>

<div class="main">
<div class="ui top attached tabular menu tabs">
<a class="item add-tab-icon"><i class="ui add icon"></i></a>
</div>
<div class="tab-contents">
<div class="no-tabs">
<div class="ui container center aligned">
<i class="massive inverted ban icon"></i>
<h1 class="huge inverted ui header">No Instances Found
<div class="inverted sub header">
It seems like you do not have any instances set up. <br> Click the <i class="ui add icon fitted"></i> button to set up a new instance of WhatsApp.
</div>
</h1>
</div>
</div>
</div>
<div class="modals-div">
<div class="ui mini modal add-tab-modal">
<i class="close icon"></i>
<div class="header">
Add Instance
</div>
<div class="content">
<div class="ui form">
<div class="ui field">
<label>Name</label>
<input type="text" placeholder="Name of instance" id="new-instance-name">
</div>
<div class="ui inline field">
<div class="ui toggle checkbox notifcheck">
<label>Enable Notifications</label>
<input id="new-notifications-value" type="checkbox" tabindex="0" class="hidden">
</div>
</div>
<div class="ui inline field">
<div class="ui toggle checkbox soundcheck">
<label>Enable Sound</label>
<input id="new-sound-value" type="checkbox" tabindex="0" class="hidden">
</div>
</div>
</div>
</div>
<div class="actions">
<div class="ui positive button">ADD</div>
</div>
</div>
</div>
</div>

<!-- <webview preload="./js/whatsapp.js" id="whatsapp" src="https://web.whatsapp.com/" useragent="Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36"></webview> -->


<script>
const jQuery = require('jquery');
const $ = jQuery;
</script>
<script src="../assets/js/semantic.min.js"></script>
<script src="./js/main.js"></script>
</body>

Expand Down

0 comments on commit e2776de

Please sign in to comment.