Merge branch 'develop'
This commit is contained in:
commit
ce61061253
|
|
@ -8,4 +8,5 @@ You can navigate inside the focused service using the navigation buttons (previo
|
|||
|
||||
## Contributing
|
||||
|
||||
Pending license
|
||||
## License
|
||||
[MIT - see LICENSE file](LICENSE)
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "tabs",
|
||||
"version": "0.2.0",
|
||||
"version": "0.3.0",
|
||||
"description": "Persistent and separate browser tabs in one window",
|
||||
"author": {
|
||||
"name": "Alice Gaudon",
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
"electron-builder": "^21.2.0"
|
||||
},
|
||||
"build": {
|
||||
"appId": "tabs",
|
||||
"appId": "tabs-app",
|
||||
"linux": {
|
||||
"target": [
|
||||
"dir"
|
||||
|
|
|
|||
|
|
@ -7,8 +7,10 @@
|
|||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
|
||||
integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
|
||||
|
||||
<link rel="stylesheet" href="layout.css">
|
||||
<link rel="stylesheet" href="index.css">
|
||||
<link rel="stylesheet" href="style/layout.css">
|
||||
<link rel="stylesheet" href="style/index.css">
|
||||
|
||||
<script src="js/index.js" defer></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -28,324 +30,6 @@
|
|||
<div id="services">
|
||||
<div class="loader"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const {
|
||||
remote,
|
||||
ipcRenderer,
|
||||
} = require('electron');
|
||||
const {
|
||||
Menu,
|
||||
MenuItem,
|
||||
dialog,
|
||||
} = remote;
|
||||
|
||||
const icons = [];
|
||||
|
||||
let services = [];
|
||||
let selectedService = 0;
|
||||
let forwardButton;
|
||||
let backButton;
|
||||
let addButton;
|
||||
|
||||
|
||||
// Service context menu
|
||||
const serviceContextMenu = new Menu();
|
||||
serviceContextMenu.append(new MenuItem({
|
||||
label: 'Close', click: () => {
|
||||
unloadService(serviceContextMenu.serviceId);
|
||||
}
|
||||
}));
|
||||
serviceContextMenu.append(new MenuItem({type: "separator"}));
|
||||
serviceContextMenu.append(new MenuItem({
|
||||
label: 'Edit', click: () => {
|
||||
ipcRenderer.send('openServiceSettings', serviceContextMenu.serviceId);
|
||||
}
|
||||
}));
|
||||
serviceContextMenu.append(new MenuItem({
|
||||
label: 'Delete', click: () => {
|
||||
dialog.showMessageBox(remote.getCurrentWindow(), {
|
||||
type: 'question',
|
||||
title: 'Confirm',
|
||||
message: 'Are you sure you want to delete this service?',
|
||||
buttons: ['Cancel', 'Confirm'],
|
||||
cancelId: 0,
|
||||
}).then(result => {
|
||||
if (result.response === 1) {
|
||||
ipcRenderer.send('deleteService', serviceContextMenu.serviceId);
|
||||
}
|
||||
}).catch(console.error);
|
||||
}
|
||||
}));
|
||||
|
||||
function openServiceContextMenu(event, index) {
|
||||
event.preventDefault();
|
||||
serviceContextMenu.serviceId = index;
|
||||
serviceContextMenu.popup({window: remote.getCurrentWindow()});
|
||||
}
|
||||
|
||||
|
||||
ipcRenderer.on('data', (event, brandIcons, solidIcons, actualServices, actualSelectedService) => {
|
||||
for (const icon of brandIcons) {
|
||||
icons.push(icon);
|
||||
}
|
||||
for (const icon of solidIcons) {
|
||||
icons.push(icon);
|
||||
}
|
||||
|
||||
console.log('Updating services ...');
|
||||
services = actualServices;
|
||||
|
||||
const nav = document.querySelector('#service-selector');
|
||||
while (nav.children.length > 0) {
|
||||
nav.removeChild(nav.children[0]);
|
||||
}
|
||||
|
||||
const serviceContainer = document.querySelector('#services');
|
||||
serviceContainer.querySelectorAll(":scope > webview").forEach(w => serviceContainer.removeChild(w));
|
||||
|
||||
for (let i = 0; i < services.length; i++) {
|
||||
createService(i);
|
||||
}
|
||||
|
||||
if (actualSelectedService < 0 || actualSelectedService >= services.length) {
|
||||
actualSelectedService = 0;
|
||||
}
|
||||
setActiveService(actualSelectedService);
|
||||
});
|
||||
|
||||
ipcRenderer.on('updateService', (e, id, data) => {
|
||||
if (id === null) {
|
||||
services.push(data);
|
||||
createService(services.length - 1);
|
||||
} else {
|
||||
const nav = document.querySelector('#service-selector');
|
||||
|
||||
// Remove nav
|
||||
const oldNavButton = nav.querySelector('li:nth-of-type(' + (id + 1) + ')');
|
||||
const nextNavButton = oldNavButton.nextSibling;
|
||||
nav.removeChild(oldNavButton);
|
||||
|
||||
// Remove webview
|
||||
if (services[id].view) {
|
||||
const serviceContainer = document.querySelector('#services');
|
||||
serviceContainer.removeChild(services[id].view);
|
||||
}
|
||||
|
||||
// Create new service
|
||||
services[id] = data;
|
||||
createService(id, nextNavButton);
|
||||
if (parseInt(selectedService) === id) {
|
||||
setActiveService(id);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
ipcRenderer.on('deleteService', (e, id) => {
|
||||
const nav = document.querySelector('#service-selector');
|
||||
|
||||
// Remove nav
|
||||
const navButton = nav.querySelector('li:nth-of-type(' + (id + 1) + ')');
|
||||
if (navButton) {
|
||||
nav.removeChild(navButton);
|
||||
}
|
||||
|
||||
// Remove webview
|
||||
if (services[id].view) {
|
||||
const serviceContainer = document.querySelector('#services');
|
||||
serviceContainer.removeChild(services[id].view);
|
||||
}
|
||||
|
||||
if (parseInt(selectedService) === id) {
|
||||
setActiveService(0);
|
||||
}
|
||||
|
||||
delete services[id];
|
||||
services = services.filter(s => s !== null);
|
||||
});
|
||||
|
||||
function createService(index, nextNavButton) {
|
||||
let service = services[index];
|
||||
let li = document.createElement('li');
|
||||
service.li = li;
|
||||
|
||||
let button = document.createElement('button');
|
||||
button.dataset.serviceId = '' + index;
|
||||
button.dataset.tooltip = service.name;
|
||||
button.addEventListener('click', () => {
|
||||
setActiveService(button.dataset.serviceId);
|
||||
ipcRenderer.send('setActiveService', button.dataset.serviceId);
|
||||
});
|
||||
button.addEventListener('contextmenu', e => openServiceContextMenu(e, index));
|
||||
|
||||
let icon;
|
||||
if (service.useFavicon && service.favicon != null) {
|
||||
icon = document.createElement('img');
|
||||
icon.src = service.favicon;
|
||||
icon.alt = service.name;
|
||||
} else if (service.isImage) {
|
||||
icon = document.createElement('img');
|
||||
icon.src = service.icon;
|
||||
icon.alt = service.name;
|
||||
} else {
|
||||
icon = document.createElement('i');
|
||||
const iconProperties = icons.find(i => i.name === service.icon);
|
||||
if (iconProperties) {
|
||||
iconProperties.faIcon.split(' ').forEach(cl => {
|
||||
icon.classList.add(cl);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
button.appendChild(icon);
|
||||
li.appendChild(button);
|
||||
li.button = button;
|
||||
|
||||
const nav = document.querySelector('#service-selector');
|
||||
if (nextNavButton === nav || nextNavButton === undefined) {
|
||||
nav.appendChild(li);
|
||||
} else {
|
||||
nav.insertBefore(li, nextNavButton);
|
||||
}
|
||||
|
||||
if (service.autoLoad) {
|
||||
loadService(index, service);
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
forwardButton = document.querySelector('#forward');
|
||||
forwardButton.addEventListener('click', () => goForward());
|
||||
|
||||
backButton = document.querySelector('#back');
|
||||
backButton.addEventListener('click', () => goBack());
|
||||
|
||||
addButton = document.querySelector('#add-button');
|
||||
addButton.addEventListener('click', () => ipcRenderer.send('openServiceSettings', null));
|
||||
});
|
||||
|
||||
function setActiveService(serviceId) {
|
||||
const currentService = services[serviceId];
|
||||
process.nextTick(() => {
|
||||
loadService(serviceId, currentService);
|
||||
|
||||
// Hide previous service
|
||||
if (services[selectedService] && services[selectedService].view) {
|
||||
services[selectedService].view.classList.remove('active');
|
||||
}
|
||||
|
||||
// Show service
|
||||
currentService.view.classList.add('active');
|
||||
|
||||
// Save active service ID
|
||||
selectedService = serviceId;
|
||||
|
||||
// Refresh navigation
|
||||
updateNavigation();
|
||||
});
|
||||
}
|
||||
|
||||
function loadService(serviceId, service) {
|
||||
// Load service if not loaded yet
|
||||
if (!service.view && !service.viewReady) {
|
||||
document.querySelector('#services > .loader').classList.remove('hidden');
|
||||
service.view = document.createElement('webview');
|
||||
service.view.setAttribute('src', service.url);
|
||||
service.view.setAttribute('partition', 'persist:service_' + service.partition);
|
||||
service.view.setAttribute('autosize', "true");
|
||||
|
||||
// Append element to DOM
|
||||
document.querySelector('#services').appendChild(service.view);
|
||||
|
||||
// On load event
|
||||
service.view.addEventListener('dom-ready', () => {
|
||||
if (service.customCSS) {
|
||||
service.view.insertCSS(service.customCSS);
|
||||
}
|
||||
|
||||
document.querySelector('#services > .loader').classList.add('hidden');
|
||||
updateNavigation();
|
||||
service.li.classList.add('loaded');
|
||||
service.viewReady = true;
|
||||
});
|
||||
|
||||
// Load favicon
|
||||
service.view.addEventListener('page-favicon-updated', event => {
|
||||
console.debug('Loaded favicons for', service.name, event.favicons);
|
||||
if (event.favicons.length > 0) {
|
||||
ipcRenderer.send('setServiceFavicon', serviceId, event.favicons[0]);
|
||||
if (service.useFavicon) {
|
||||
const img = document.createElement('img');
|
||||
img.src = event.favicons[0];
|
||||
img.alt = service.name;
|
||||
img.onload = () => {
|
||||
service.li.button.innerHTML = '';
|
||||
service.li.button.appendChild(img);
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function unloadService(serviceId) {
|
||||
const service = services[serviceId];
|
||||
if (service.view && service.viewReady) {
|
||||
service.view.remove();
|
||||
service.view = null;
|
||||
service.li.classList.remove('loaded');
|
||||
service.viewReady = false;
|
||||
|
||||
if (parseInt(selectedService) === serviceId) {
|
||||
selectedService = null;
|
||||
for (let i = 0; i < services.length; i++) {
|
||||
if (services[i].view && services[i].viewReady) {
|
||||
setActiveService(i);
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (selectedService === null) {
|
||||
updateNavigation();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function updateNavigation() {
|
||||
console.debug('Updating navigation');
|
||||
// Update active list element
|
||||
for (let i = 0; i < services.length; i++) {
|
||||
const service = services[i];
|
||||
if (parseInt(selectedService) === i) {
|
||||
service.li.classList.add('active');
|
||||
} else {
|
||||
service.li.classList.remove('active');
|
||||
}
|
||||
}
|
||||
|
||||
if (selectedService !== null && services[selectedService].viewReady) {
|
||||
console.debug('Updating navigation buttons because view is ready');
|
||||
// Update history navigation
|
||||
let view = services[selectedService].view;
|
||||
|
||||
if (view && view.canGoForward()) forwardButton.classList.remove('disabled');
|
||||
else forwardButton.classList.add('disabled');
|
||||
|
||||
if (view && view.canGoBack()) backButton.classList.remove('disabled');
|
||||
else backButton.classList.add('disabled');
|
||||
}
|
||||
}
|
||||
|
||||
function goForward() {
|
||||
let view = services[selectedService].view;
|
||||
if (view) view.getWebContents().goForward();
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
let view = services[selectedService].view;
|
||||
if (view) view.getWebContents().goBack();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,335 @@
|
|||
const {
|
||||
remote,
|
||||
ipcRenderer,
|
||||
} = require('electron');
|
||||
const {
|
||||
Menu,
|
||||
MenuItem,
|
||||
dialog,
|
||||
} = remote;
|
||||
|
||||
const icons = [];
|
||||
|
||||
let services = [];
|
||||
let selectedService = null;
|
||||
let forwardButton;
|
||||
let backButton;
|
||||
let addButton;
|
||||
|
||||
|
||||
// Service context menu
|
||||
const serviceContextMenu = new Menu();
|
||||
serviceContextMenu.append(new MenuItem({
|
||||
label: 'Reload', click: () => {
|
||||
reloadService(serviceContextMenu.serviceId);
|
||||
}
|
||||
}));
|
||||
serviceContextMenu.append(new MenuItem({
|
||||
label: 'Close', click: () => {
|
||||
unloadService(serviceContextMenu.serviceId);
|
||||
}
|
||||
}));
|
||||
serviceContextMenu.append(new MenuItem({type: "separator"}));
|
||||
serviceContextMenu.append(new MenuItem({
|
||||
label: 'Edit', click: () => {
|
||||
ipcRenderer.send('openServiceSettings', serviceContextMenu.serviceId);
|
||||
}
|
||||
}));
|
||||
serviceContextMenu.append(new MenuItem({
|
||||
label: 'Delete', click: () => {
|
||||
dialog.showMessageBox(remote.getCurrentWindow(), {
|
||||
type: 'question',
|
||||
title: 'Confirm',
|
||||
message: 'Are you sure you want to delete this service?',
|
||||
buttons: ['Cancel', 'Confirm'],
|
||||
cancelId: 0,
|
||||
}).then(result => {
|
||||
if (result.response === 1) {
|
||||
ipcRenderer.send('deleteService', serviceContextMenu.serviceId);
|
||||
}
|
||||
}).catch(console.error);
|
||||
}
|
||||
}));
|
||||
|
||||
function openServiceContextMenu(event, index) {
|
||||
event.preventDefault();
|
||||
serviceContextMenu.serviceId = index;
|
||||
serviceContextMenu.popup({window: remote.getCurrentWindow()});
|
||||
}
|
||||
|
||||
|
||||
ipcRenderer.on('data', (event, brandIcons, solidIcons, actualServices, actualSelectedService) => {
|
||||
for (const icon of brandIcons) {
|
||||
icons.push(icon);
|
||||
}
|
||||
for (const icon of solidIcons) {
|
||||
icons.push(icon);
|
||||
}
|
||||
|
||||
console.log('Updating services ...');
|
||||
services = actualServices;
|
||||
|
||||
const nav = document.querySelector('#service-selector');
|
||||
while (nav.children.length > 0) {
|
||||
nav.removeChild(nav.children[0]);
|
||||
}
|
||||
|
||||
const serviceContainer = document.querySelector('#services');
|
||||
serviceContainer.querySelectorAll(":scope > webview").forEach(w => serviceContainer.removeChild(w));
|
||||
|
||||
for (let i = 0; i < services.length; i++) {
|
||||
createService(i);
|
||||
}
|
||||
|
||||
if (actualSelectedService < 0 || actualSelectedService >= services.length) {
|
||||
actualSelectedService = 0;
|
||||
}
|
||||
setActiveService(actualSelectedService);
|
||||
});
|
||||
|
||||
ipcRenderer.on('updateService', (e, id, data) => {
|
||||
if (id === null) {
|
||||
services.push(data);
|
||||
createService(services.length - 1);
|
||||
} else {
|
||||
const nav = document.querySelector('#service-selector');
|
||||
|
||||
// Remove nav
|
||||
const oldNavButton = nav.querySelector('li:nth-of-type(' + (id + 1) + ')');
|
||||
const nextNavButton = oldNavButton.nextSibling;
|
||||
nav.removeChild(oldNavButton);
|
||||
|
||||
// Remove webview
|
||||
if (services[id].view) {
|
||||
const serviceContainer = document.querySelector('#services');
|
||||
serviceContainer.removeChild(services[id].view);
|
||||
}
|
||||
|
||||
// Create new service
|
||||
services[id] = data;
|
||||
createService(id, nextNavButton);
|
||||
if (parseInt(selectedService) === id) {
|
||||
setActiveService(id);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
ipcRenderer.on('deleteService', (e, id) => {
|
||||
const nav = document.querySelector('#service-selector');
|
||||
|
||||
// Remove nav
|
||||
const navButton = nav.querySelector('li:nth-of-type(' + (id + 1) + ')');
|
||||
if (navButton) {
|
||||
nav.removeChild(navButton);
|
||||
}
|
||||
|
||||
// Remove webview
|
||||
if (services[id].view) {
|
||||
const serviceContainer = document.querySelector('#services');
|
||||
serviceContainer.removeChild(services[id].view);
|
||||
}
|
||||
|
||||
if (parseInt(selectedService) === id) {
|
||||
setActiveService(0);
|
||||
}
|
||||
|
||||
delete services[id];
|
||||
services = services.filter(s => s !== null);
|
||||
});
|
||||
|
||||
function createService(index, nextNavButton) {
|
||||
let service = services[index];
|
||||
let li = document.createElement('li');
|
||||
service.li = li;
|
||||
|
||||
let button = document.createElement('button');
|
||||
button.dataset.serviceId = '' + index;
|
||||
button.dataset.tooltip = service.name;
|
||||
button.addEventListener('click', () => {
|
||||
setActiveService(button.dataset.serviceId);
|
||||
ipcRenderer.send('setActiveService', button.dataset.serviceId);
|
||||
});
|
||||
button.addEventListener('contextmenu', e => openServiceContextMenu(e, index));
|
||||
|
||||
let icon;
|
||||
if (service.useFavicon && service.favicon != null) {
|
||||
icon = document.createElement('img');
|
||||
icon.src = service.favicon;
|
||||
icon.alt = service.name;
|
||||
} else if (service.isImage) {
|
||||
icon = document.createElement('img');
|
||||
icon.src = service.icon;
|
||||
icon.alt = service.name;
|
||||
} else {
|
||||
icon = document.createElement('i');
|
||||
const iconProperties = icons.find(i => i.name === service.icon);
|
||||
if (iconProperties) {
|
||||
iconProperties.faIcon.split(' ').forEach(cl => {
|
||||
icon.classList.add(cl);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
button.appendChild(icon);
|
||||
li.appendChild(button);
|
||||
li.button = button;
|
||||
|
||||
const nav = document.querySelector('#service-selector');
|
||||
if (nextNavButton === nav || nextNavButton === undefined) {
|
||||
nav.appendChild(li);
|
||||
} else {
|
||||
nav.insertBefore(li, nextNavButton);
|
||||
}
|
||||
|
||||
if (service.autoLoad) {
|
||||
loadService(index, service);
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
forwardButton = document.querySelector('#forward');
|
||||
forwardButton.addEventListener('click', () => goForward());
|
||||
|
||||
backButton = document.querySelector('#back');
|
||||
backButton.addEventListener('click', () => goBack());
|
||||
|
||||
addButton = document.querySelector('#add-button');
|
||||
addButton.addEventListener('click', () => ipcRenderer.send('openServiceSettings', null));
|
||||
});
|
||||
|
||||
function setActiveService(serviceId) {
|
||||
const currentService = services[serviceId];
|
||||
process.nextTick(() => {
|
||||
loadService(serviceId, currentService);
|
||||
|
||||
// Hide previous service
|
||||
if (services[selectedService] && services[selectedService].view) {
|
||||
services[selectedService].view.classList.remove('active');
|
||||
}
|
||||
|
||||
// Show service
|
||||
currentService.view.classList.add('active');
|
||||
|
||||
// Save active service ID
|
||||
selectedService = serviceId;
|
||||
|
||||
// Refresh navigation
|
||||
updateNavigation();
|
||||
});
|
||||
}
|
||||
|
||||
function loadService(serviceId, service) {
|
||||
// Load service if not loaded yet
|
||||
if (!service.view && !service.viewReady) {
|
||||
document.querySelector('#services > .loader').classList.remove('hidden');
|
||||
service.view = document.createElement('webview');
|
||||
service.view.setAttribute('src', service.url);
|
||||
service.view.setAttribute('partition', 'persist:service_' + service.partition);
|
||||
service.view.setAttribute('autosize', 'true');
|
||||
service.view.setAttribute('preload', 'js/service-webview.js');
|
||||
|
||||
// Append element to DOM
|
||||
document.querySelector('#services').appendChild(service.view);
|
||||
|
||||
// On load event
|
||||
service.view.addEventListener('dom-ready', () => {
|
||||
if (service.customCSS) {
|
||||
service.view.insertCSS(service.customCSS);
|
||||
}
|
||||
|
||||
document.querySelector('#services > .loader').classList.add('hidden');
|
||||
updateNavigation();
|
||||
service.li.classList.add('loaded');
|
||||
service.viewReady = true;
|
||||
|
||||
if (selectedService === null) {
|
||||
setActiveService(serviceId);
|
||||
}
|
||||
});
|
||||
|
||||
// Load favicon
|
||||
service.view.addEventListener('page-favicon-updated', event => {
|
||||
console.debug('Loaded favicons for', service.name, event.favicons);
|
||||
if (event.favicons.length > 0) {
|
||||
ipcRenderer.send('setServiceFavicon', serviceId, event.favicons[0]);
|
||||
if (service.useFavicon) {
|
||||
const img = document.createElement('img');
|
||||
img.src = event.favicons[0];
|
||||
img.alt = service.name;
|
||||
img.onload = () => {
|
||||
service.li.button.innerHTML = '';
|
||||
service.li.button.appendChild(img);
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function unloadService(serviceId) {
|
||||
const service = services[serviceId];
|
||||
if (service.view && service.viewReady) {
|
||||
service.view.remove();
|
||||
service.view = null;
|
||||
service.li.classList.remove('loaded');
|
||||
service.viewReady = false;
|
||||
|
||||
if (parseInt(selectedService) === serviceId) {
|
||||
selectedService = null;
|
||||
for (let i = 0; i < services.length; i++) {
|
||||
if (services[i].view && services[i].viewReady) {
|
||||
setActiveService(i);
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (selectedService === null) {
|
||||
updateNavigation();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function reloadService(serviceId) {
|
||||
const service = services[serviceId];
|
||||
if (service.view && service.viewReady) {
|
||||
document.querySelector('#services > .loader').classList.remove('hidden');
|
||||
service.view.reload();
|
||||
} else if (!service.view && !service.viewReady) {
|
||||
loadService(serviceId, service);
|
||||
}
|
||||
}
|
||||
|
||||
function updateNavigation() {
|
||||
console.debug('Updating navigation');
|
||||
// Update active list element
|
||||
for (let i = 0; i < services.length; i++) {
|
||||
const service = services[i];
|
||||
if (parseInt(selectedService) === i) {
|
||||
service.li.classList.add('active');
|
||||
} else {
|
||||
service.li.classList.remove('active');
|
||||
}
|
||||
}
|
||||
|
||||
if (selectedService !== null && services[selectedService].viewReady) {
|
||||
console.debug('Updating navigation buttons because view is ready');
|
||||
// Update history navigation
|
||||
let view = services[selectedService].view;
|
||||
|
||||
if (view && view.canGoForward()) forwardButton.classList.remove('disabled');
|
||||
else forwardButton.classList.add('disabled');
|
||||
|
||||
if (view && view.canGoBack()) backButton.classList.remove('disabled');
|
||||
else backButton.classList.add('disabled');
|
||||
}
|
||||
}
|
||||
|
||||
function goForward() {
|
||||
let view = services[selectedService].view;
|
||||
if (view) view.getWebContents().goForward();
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
let view = services[selectedService].view;
|
||||
if (view) view.getWebContents().goBack();
|
||||
}
|
||||
|
|
@ -0,0 +1,178 @@
|
|||
const {ipcRenderer, remote} = require('electron');
|
||||
let isImageCheckbox;
|
||||
let builtInIconSearchField;
|
||||
let iconSelect;
|
||||
let iconUrlField;
|
||||
|
||||
let serviceId;
|
||||
let service;
|
||||
|
||||
ipcRenderer.on('syncIcons', (event, brands, solid) => {
|
||||
loadIcons(brands, 'brands');
|
||||
loadIcons(solid, 'solid');
|
||||
});
|
||||
|
||||
ipcRenderer.on('loadService', (e, id, data) => {
|
||||
console.log('Load service', id);
|
||||
if (id === null) {
|
||||
document.title = 'Add a new service';
|
||||
service = {};
|
||||
|
||||
document.querySelector('h1').innerText = 'Add a new service';
|
||||
} else {
|
||||
serviceId = id;
|
||||
service = data;
|
||||
document.querySelector('h1').innerText = 'Service settings';
|
||||
loadServiceValues();
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
isImageCheckbox = document.querySelector('#is-image');
|
||||
builtInIconSearchField = document.querySelector('#built-in-icon-search');
|
||||
iconSelect = document.querySelector('#icon-select');
|
||||
iconUrlField = document.querySelector('#icon-url');
|
||||
|
||||
|
||||
isImageCheckbox.addEventListener('click', () => {
|
||||
updateIconChoiceForm(isImageCheckbox.checked);
|
||||
});
|
||||
updateIconChoiceForm(isImageCheckbox.checked);
|
||||
|
||||
builtInIconSearchField.addEventListener('input', updateIconSearchResults);
|
||||
|
||||
document.getElementById('cancel-button').addEventListener('click', e => {
|
||||
e.preventDefault();
|
||||
remote.getCurrentWindow().close();
|
||||
});
|
||||
|
||||
ipcRenderer.send('sync-settings');
|
||||
});
|
||||
|
||||
function updateIconSearchResults() {
|
||||
const searchStr = builtInIconSearchField.value;
|
||||
iconSelect.childNodes.forEach(c => {
|
||||
if (c.dataset.icon.match(searchStr) || searchStr.match(c.dataset.icon)) {
|
||||
c.classList.remove('hidden');
|
||||
} else {
|
||||
c.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function loadIcons(icons, set) {
|
||||
for (const icon of icons) {
|
||||
if (icon.name.length === 0) continue;
|
||||
const choice = document.createElement('label');
|
||||
choice.dataset.icon = icon.name;
|
||||
choice.classList.add('choice');
|
||||
|
||||
const display = document.createElement('img');
|
||||
display.src = 'icons/' + set + '/' + icon.name + '.svg';
|
||||
choice.appendChild(display);
|
||||
|
||||
const label = document.createElement('span');
|
||||
label.innerText = icon.name;
|
||||
choice.appendChild(label);
|
||||
|
||||
const radio = document.createElement('input');
|
||||
radio.setAttribute('type', 'radio');
|
||||
radio.setAttribute('name', 'icon');
|
||||
radio.setAttribute('value', icon.name);
|
||||
choice.appendChild(radio);
|
||||
|
||||
iconSelect.appendChild(choice);
|
||||
|
||||
choice.addEventListener('click', () => {
|
||||
selectIcon(choice);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function selectIcon(choice) {
|
||||
builtInIconSearchField.value = choice.dataset.icon;
|
||||
for (const otherChoice of iconSelect.children) {
|
||||
otherChoice.classList.remove('selected');
|
||||
}
|
||||
choice.classList.add('selected');
|
||||
choice.querySelector('input[type=radio]').checked = true;
|
||||
}
|
||||
|
||||
function updateIconChoiceForm(isUrl) {
|
||||
if (isUrl) {
|
||||
iconSelect.classList.add('hidden');
|
||||
builtInIconSearchField.parentElement.classList.add('hidden');
|
||||
iconUrlField.parentElement.classList.remove('hidden');
|
||||
} else {
|
||||
iconSelect.classList.remove('hidden');
|
||||
builtInIconSearchField.parentElement.classList.remove('hidden');
|
||||
iconUrlField.parentElement.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
function loadServiceValues() {
|
||||
if (!service || !isImageCheckbox) {
|
||||
return;
|
||||
}
|
||||
|
||||
document.getElementById('name').value = service.name;
|
||||
document.getElementById('url').value = service.url;
|
||||
document.getElementById('use-favicon').checked = service.useFavicon;
|
||||
document.getElementById('auto-load').checked = service.autoLoad;
|
||||
document.getElementById('custom-css').value = service.customCSS;
|
||||
|
||||
isImageCheckbox.checked = service.isImage;
|
||||
if (service.isImage) {
|
||||
iconUrlField.value = service.icon;
|
||||
} else {
|
||||
builtInIconSearchField.value = service.icon;
|
||||
updateIconSearchResults();
|
||||
const icon = Array.from(iconSelect.querySelectorAll('label')).find(i => i.dataset.icon === service.icon);
|
||||
if (icon) {
|
||||
selectIcon(icon);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function save() {
|
||||
const formData = new FormData(document.querySelector('form'));
|
||||
service.name = formData.get('name');
|
||||
if (typeof service.partition !== 'string' || service.partition.length === 0) {
|
||||
service.partition = service.name.replace(/ /g, '-');
|
||||
service.partition = service.partition.replace(/[^a-zA-Z-_]/g, '');
|
||||
}
|
||||
service.url = formData.get('url');
|
||||
service.isImage = formData.get('isImage') === 'on';
|
||||
service.icon = formData.get('icon');
|
||||
service.useFavicon = formData.get('useFavicon') === 'on';
|
||||
service.autoLoad = formData.get('autoLoad') === 'on';
|
||||
service.customCSS = formData.get('customCSS');
|
||||
|
||||
|
||||
if (!isValid()) {
|
||||
return;
|
||||
}
|
||||
|
||||
ipcRenderer.send('saveService', serviceId, service);
|
||||
remote.getCurrentWindow().close();
|
||||
}
|
||||
|
||||
function isValid() {
|
||||
if (typeof service.name !== 'string' || service.name.length === 0) {
|
||||
console.log('Invalid name');
|
||||
return false;
|
||||
}
|
||||
if (typeof service.partition !== 'string' || service.partition.length === 0) {
|
||||
console.log('Invalid partition');
|
||||
return false;
|
||||
}
|
||||
if (typeof service.url !== 'string' || service.url.length === 0) {
|
||||
console.log('Invalid url');
|
||||
return false;
|
||||
}
|
||||
if (!(service.useFavicon || typeof service.icon === 'string' && service.icon.length > 0)) {
|
||||
console.log('Invalid icon');
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
const {
|
||||
remote,
|
||||
clipboard,
|
||||
} = require('electron');
|
||||
const {
|
||||
Menu,
|
||||
MenuItem,
|
||||
} = remote;
|
||||
|
||||
const webContents = remote.getCurrentWebContents();
|
||||
webContents.on('context-menu', (event, props) => {
|
||||
const menu = new Menu();
|
||||
const {editFlags} = props;
|
||||
|
||||
// linkURL
|
||||
if (props.linkURL.length > 0) {
|
||||
if (menu.items.length > 0) {
|
||||
menu.append(new MenuItem({type: 'separator'}));
|
||||
}
|
||||
|
||||
menu.append(new MenuItem({
|
||||
label: 'Copy link URL',
|
||||
click: () => {
|
||||
clipboard.writeText(props.linkURL);
|
||||
},
|
||||
}));
|
||||
menu.append(new MenuItem({
|
||||
label: 'Open URL in default browser',
|
||||
click: () => {
|
||||
window.open(props.linkURL, '_blank');
|
||||
},
|
||||
}));
|
||||
}
|
||||
|
||||
// Image
|
||||
if (props.hasImageContents) {
|
||||
if (menu.items.length > 0) {
|
||||
menu.append(new MenuItem({type: 'separator'}));
|
||||
}
|
||||
|
||||
menu.append(new MenuItem({
|
||||
label: 'Copy image',
|
||||
click: () => {
|
||||
webContents.copyImageAt(props.x, props.y);
|
||||
},
|
||||
}));
|
||||
|
||||
menu.append(new MenuItem({
|
||||
label: 'Save image as',
|
||||
click: () => {
|
||||
webContents.downloadURL(props.srcURL);
|
||||
},
|
||||
}));
|
||||
}
|
||||
|
||||
// Text clipboard
|
||||
if (editFlags.canUndo || editFlags.canRedo || editFlags.canCut || editFlags.canCopy || editFlags.canPaste || editFlags.canDelete) {
|
||||
if (menu.items.length > 0) {
|
||||
menu.append(new MenuItem({type: 'separator'}));
|
||||
}
|
||||
if (editFlags.canUndo) {
|
||||
menu.append(new MenuItem({
|
||||
label: 'Undo',
|
||||
role: 'undo',
|
||||
}));
|
||||
}
|
||||
if (editFlags.canRedo) {
|
||||
menu.append(new MenuItem({
|
||||
label: 'Redo',
|
||||
role: 'redo',
|
||||
}));
|
||||
}
|
||||
|
||||
if (menu.items.length > 0) {
|
||||
menu.append(new MenuItem({type: 'separator'}));
|
||||
}
|
||||
menu.append(new MenuItem({
|
||||
label: 'Cut',
|
||||
role: 'cut',
|
||||
enabled: editFlags.canCut,
|
||||
}));
|
||||
menu.append(new MenuItem({
|
||||
label: 'Copy',
|
||||
role: 'copy',
|
||||
enabled: editFlags.canCopy,
|
||||
}));
|
||||
menu.append(new MenuItem({
|
||||
label: 'Paste',
|
||||
role: 'paste',
|
||||
enabled: editFlags.canPaste,
|
||||
}));
|
||||
menu.append(new MenuItem({
|
||||
label: 'Delete',
|
||||
role: 'delete',
|
||||
enabled: editFlags.canDelete,
|
||||
}));
|
||||
}
|
||||
|
||||
if (editFlags.canSelectAll) {
|
||||
if (menu.items.length > 0) {
|
||||
menu.append(new MenuItem({type: 'separator'}));
|
||||
}
|
||||
|
||||
menu.append(new MenuItem({
|
||||
label: 'Select all',
|
||||
role: 'selectAll',
|
||||
}));
|
||||
}
|
||||
|
||||
// Inspect element
|
||||
if (menu.items.length > 0) {
|
||||
menu.append(new MenuItem({type: 'separator'}));
|
||||
}
|
||||
|
||||
menu.append(new MenuItem({
|
||||
label: 'Inspect element',
|
||||
click: () => {
|
||||
webContents.inspectElement(props.x, props.y);
|
||||
},
|
||||
}));
|
||||
|
||||
|
||||
menu.popup({
|
||||
window: remote.getCurrentWindow(),
|
||||
});
|
||||
});
|
||||
|
|
@ -7,8 +7,10 @@
|
|||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
|
||||
integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
|
||||
|
||||
<link rel="stylesheet" href="layout.css">
|
||||
<link rel="stylesheet" href="service-settings.css">
|
||||
<link rel="stylesheet" href="style/layout.css">
|
||||
<link rel="stylesheet" href="style/service-settings.css">
|
||||
|
||||
<script src="js/service-settings.js" defer></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -73,186 +75,5 @@
|
|||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
const {ipcRenderer, remote} = require('electron');
|
||||
let isImageCheckbox;
|
||||
let builtInIconSearchField;
|
||||
let iconSelect;
|
||||
let iconUrlField;
|
||||
|
||||
let serviceId;
|
||||
let service;
|
||||
|
||||
ipcRenderer.on('syncIcons', (event, brands, solid) => {
|
||||
loadIcons(brands, 'brands');
|
||||
loadIcons(solid, 'solid');
|
||||
});
|
||||
|
||||
ipcRenderer.on('loadService', (e, id, data) => {
|
||||
console.log('Load service', id);
|
||||
if (id === null) {
|
||||
document.title = 'Add a new service';
|
||||
service = {};
|
||||
|
||||
document.querySelector('h1').innerText = 'Add a new service';
|
||||
} else {
|
||||
serviceId = id;
|
||||
service = data;
|
||||
document.querySelector('h1').innerText = 'Service settings';
|
||||
loadServiceValues();
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
isImageCheckbox = document.querySelector('#is-image');
|
||||
builtInIconSearchField = document.querySelector('#built-in-icon-search');
|
||||
iconSelect = document.querySelector('#icon-select');
|
||||
iconUrlField = document.querySelector('#icon-url');
|
||||
|
||||
|
||||
isImageCheckbox.addEventListener('click', () => {
|
||||
updateIconChoiceForm(isImageCheckbox.checked);
|
||||
});
|
||||
updateIconChoiceForm(isImageCheckbox.checked);
|
||||
|
||||
builtInIconSearchField.addEventListener('input', updateIconSearchResults);
|
||||
|
||||
document.getElementById('cancel-button').addEventListener('click', e => {
|
||||
e.preventDefault();
|
||||
remote.getCurrentWindow().close();
|
||||
});
|
||||
|
||||
ipcRenderer.send('sync-settings');
|
||||
});
|
||||
|
||||
function updateIconSearchResults() {
|
||||
const searchStr = builtInIconSearchField.value;
|
||||
iconSelect.childNodes.forEach(c => {
|
||||
if (c.dataset.icon.match(searchStr) || searchStr.match(c.dataset.icon)) {
|
||||
c.classList.remove('hidden');
|
||||
} else {
|
||||
c.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function loadIcons(icons, set) {
|
||||
for (const icon of icons) {
|
||||
if (icon.name.length === 0) continue;
|
||||
const choice = document.createElement('label');
|
||||
choice.dataset.icon = icon.name;
|
||||
choice.classList.add('choice');
|
||||
|
||||
const display = document.createElement('img');
|
||||
display.src = 'icons/' + set + '/' + icon.name + '.svg';
|
||||
choice.appendChild(display);
|
||||
|
||||
const label = document.createElement('span');
|
||||
label.innerText = icon.name;
|
||||
choice.appendChild(label);
|
||||
|
||||
const radio = document.createElement('input');
|
||||
radio.setAttribute('type', 'radio');
|
||||
radio.setAttribute('name', 'icon');
|
||||
radio.setAttribute('value', icon.name);
|
||||
choice.appendChild(radio);
|
||||
|
||||
iconSelect.appendChild(choice);
|
||||
|
||||
choice.addEventListener('click', () => {
|
||||
selectIcon(choice);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function selectIcon(choice) {
|
||||
builtInIconSearchField.value = choice.dataset.icon;
|
||||
for (const otherChoice of iconSelect.children) {
|
||||
otherChoice.classList.remove('selected');
|
||||
}
|
||||
choice.classList.add('selected');
|
||||
choice.querySelector('input[type=radio]').checked = true;
|
||||
}
|
||||
|
||||
function updateIconChoiceForm(isUrl) {
|
||||
if (isUrl) {
|
||||
iconSelect.classList.add('hidden');
|
||||
builtInIconSearchField.parentElement.classList.add('hidden');
|
||||
iconUrlField.parentElement.classList.remove('hidden');
|
||||
} else {
|
||||
iconSelect.classList.remove('hidden');
|
||||
builtInIconSearchField.parentElement.classList.remove('hidden');
|
||||
iconUrlField.parentElement.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
function loadServiceValues() {
|
||||
if (!service || !isImageCheckbox) {
|
||||
return;
|
||||
}
|
||||
|
||||
document.getElementById('name').value = service.name;
|
||||
document.getElementById('url').value = service.url;
|
||||
document.getElementById('use-favicon').checked = service.useFavicon;
|
||||
document.getElementById('auto-load').checked = service.autoLoad;
|
||||
document.getElementById('custom-css').value = service.customCSS;
|
||||
|
||||
isImageCheckbox.checked = service.isImage;
|
||||
if (service.isImage) {
|
||||
iconUrlField.value = service.icon;
|
||||
} else {
|
||||
builtInIconSearchField.value = service.icon;
|
||||
updateIconSearchResults();
|
||||
const icon = Array.from(iconSelect.querySelectorAll('label')).find(i => i.dataset.icon === service.icon);
|
||||
if (icon) {
|
||||
selectIcon(icon);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function save() {
|
||||
const formData = new FormData(document.querySelector('form'));
|
||||
service.name = formData.get('name');
|
||||
if (typeof service.partition !== 'string' || service.partition.length === 0) {
|
||||
service.partition = service.name.replace(/ /g, '-');
|
||||
service.partition = service.partition.replace(/[^a-zA-Z-_]/g, '');
|
||||
}
|
||||
service.url = formData.get('url');
|
||||
service.isImage = formData.get('isImage') === 'on';
|
||||
service.icon = formData.get('icon');
|
||||
service.useFavicon = formData.get('useFavicon') === 'on';
|
||||
service.autoLoad = formData.get('autoLoad') === 'on';
|
||||
service.customCSS = formData.get('customCSS');
|
||||
|
||||
|
||||
if (!isValid()) {
|
||||
return;
|
||||
}
|
||||
|
||||
ipcRenderer.send('saveService', serviceId, service);
|
||||
remote.getCurrentWindow().close();
|
||||
}
|
||||
|
||||
function isValid() {
|
||||
if (typeof service.name !== 'string' || service.name.length === 0) {
|
||||
console.log('Invalid name');
|
||||
return false;
|
||||
}
|
||||
if (typeof service.partition !== 'string' || service.partition.length === 0) {
|
||||
console.log('Invalid partition');
|
||||
return false;
|
||||
}
|
||||
if (typeof service.url !== 'string' || service.url.length === 0) {
|
||||
console.log('Invalid url');
|
||||
return false;
|
||||
}
|
||||
if (!(service.useFavicon || typeof service.icon === 'string' && service.icon.length > 0)) {
|
||||
console.log('Invalid icon');
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -40,6 +40,11 @@ body {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
#service-selector li button,
|
||||
#navigation > button {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
#service-selector li.active button {
|
||||
position: relative;
|
||||
background-color: #fff2;
|
||||
|
|
@ -3,8 +3,9 @@ import path from "path";
|
|||
import {homedir} from "os";
|
||||
|
||||
import Service from "./Service";
|
||||
import Meta from "./Meta";
|
||||
|
||||
const configDir = path.resolve(homedir(), '.tabs-app');
|
||||
const configDir = Meta.isDevMode() ? path.resolve(homedir(), '.config/tabs-app-dev') : path.resolve(homedir(), '.config/tabs-app');
|
||||
const configFile = path.resolve(configDir, 'config.json');
|
||||
|
||||
export default class Config {
|
||||
|
|
@ -29,7 +30,7 @@ export default class Config {
|
|||
}
|
||||
|
||||
if (this.services.length === 0) {
|
||||
this.services.push(new Service('welcome', 'Welcome', 'fas fa-rocket', false, 'https://gitlab.com/ArisuOngaku/tabs', false));
|
||||
this.services.push(new Service('welcome', 'Welcome', 'rocket', false, 'https://gitlab.com/ArisuOngaku/tabs', false));
|
||||
}
|
||||
|
||||
this.save();
|
||||
|
|
@ -39,6 +40,6 @@ export default class Config {
|
|||
console.log('Saving config');
|
||||
this.services = this.services.filter(s => s !== null);
|
||||
fs.writeFileSync(configFile, JSON.stringify(this, null, 4));
|
||||
console.log('> Config saved');
|
||||
console.log('> Config saved to', configFile.toString());
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
export default class Meta {
|
||||
static #devMode = null;
|
||||
|
||||
static isDevMode() {
|
||||
if(this.#devMode === null) {
|
||||
this.#devMode = process.argv.length > 2 && process.argv[2] === '--dev';
|
||||
console.debug('Dev mode:', this.#devMode);
|
||||
}
|
||||
|
||||
return this.#devMode;
|
||||
}
|
||||
}
|
||||
|
|
@ -2,6 +2,7 @@ import fs from "fs";
|
|||
import path from "path";
|
||||
import {app, BrowserWindow, ipcMain, Menu, shell, Tray} from "electron";
|
||||
|
||||
import Meta from "./Meta";
|
||||
import Config from "./Config";
|
||||
import Service from "./Service";
|
||||
|
||||
|
|
@ -10,7 +11,7 @@ const iconPath = path.resolve(resourcesDir, 'logo.png');
|
|||
|
||||
const config = new Config();
|
||||
|
||||
const devMode = process.argv.length > 2 && process.argv[2] === '--dev';
|
||||
const devMode = Meta.isDevMode();
|
||||
|
||||
// Load icons
|
||||
const brandIcons = listIcons('brands');
|
||||
|
|
|
|||
Loading…
Reference in New Issue