ashpie/tabs
ashpie/tabs
1
0
Fork 0
Code Issues 12 Pull Requests Releases 49 Wiki Activity

Merge branch 'develop'

Browse Source
This commit is contained in:
Alice Gaudon 2020-01-10 16:42:53 +01:00
commit ce61061253
13 changed files with 674 additions and 510 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

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

4
package.json
View File

@ -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"

324
resources/index.html
View File

@ -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>

335
resources/js/index.js Normal file
View File

@ -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();
}

178
resources/js/service-settings.js Normal file
View File

@ -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;
}

126
resources/js/service-webview.js Normal file
View File

@ -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(),
});
});

187
resources/service-settings.html
View File

@ -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>

5
resources/index.css → resources/style/index.css
View File

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

0
resources/layout.css → resources/style/layout.css
View File

0
resources/service-settings.css → resources/style/service-settings.css
View File

7
src/Config.js
View File

@ -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());
}
}

12
src/Meta.js Normal file
View File

@ -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;
}
}

3
src/main.js
View File

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