Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

2.0.1 #13

Merged
merged 4 commits into from
Mar 5, 2019
Merged

2.0.1 #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c6faf5e
Create Altus-Multiple-Tabs.png
amanharwara Mar 5, 2019
a90c049
Update to 2.0.1
amanharwara Mar 5, 2019
3d5df8e
Create elementCodes.js
amanharwara Mar 5, 2019
b9beb95
Update main.js
amanharwara Mar 5, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added img/Altus-Multiple-Tabs.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "altus",
"version": "2.0.0",
"version": "2.0.1",
"description": "Electron-based desktop wrapper for Whatsapp Web",
"homepage": "https://github.com/ShadyThGod/altus",
"repository": {
Expand Down
57 changes: 57 additions & 0 deletions src/windows/assets/js/elementCodes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
function tabElement(tab) {
return `<a class="item tab-element" 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>`;
}

function instanceElement(tab) {
return `<div class="ui bottom attached tab segment" id="tab-content-${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>`;
}

function settingsModalElement(tab) {
return `<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 class="ui field">
<label>Theme</label>
<div class="ui selection dropdown ${tab.id}-theme-value">
<input type="hidden" name="theme">
<i class="dropdown icon"></i>
<div class="default text">Theme</div>
</div>
</div>
</div>
</div>
<div class="actions">
<div class="ui positive button">EDIT</div>
</div>
</div>`;
}

module.exports = {
tabElement,
instanceElement,
settingsModalElement
}
193 changes: 95 additions & 98 deletions src/windows/main/js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -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 = `<a class="item tab-element" 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-content-${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 class="ui field">
<label>Theme</label>
<div class="ui selection dropdown ${tab.id}-theme-value">
<input type="hidden" name="theme">
<i class="dropdown icon"></i>
<div class="default text">Theme</div>
</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);

$(`#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');
Expand All @@ -143,6 +57,8 @@ function loadTabsFromStorage() {
});
});
}

setWebViewSettingsLoop();
}

$('.ui.modal')
Expand Down Expand Up @@ -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();
}

}
Expand Down Expand Up @@ -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');
Expand All @@ -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
Expand Down