tabs/frontend/ts/index.ts

692 lines
22 KiB
TypeScript
Raw Permalink Normal View History

import {
DidFailLoadEvent,
ipcRenderer,
PageFaviconUpdatedEvent,
UpdateTargetUrlEvent,
2020-09-29 20:43:41 +02:00
WebviewTag,
} from "electron";
2020-09-29 20:43:41 +02:00
import Service from "../../src/Service";
import {IconProperties, IconSet, SpecialPages} from "../../src/Meta";
import Config from "../../src/Config";
2020-09-29 20:43:41 +02:00
const appInfo: {
title?: string;
} = {};
let icons: IconProperties[] = [];
let services: (FrontService | undefined)[] = [];
let selectedServiceId: number | null = null;
let securityButton: HTMLElement | null = null,
homeButton: HTMLElement | null = null,
forwardButton: HTMLElement | null = null,
backButton: HTMLElement | null = null,
refreshButton: HTMLElement | null = null;
let addButton, settingsButton;
2020-09-29 20:43:41 +02:00
let specialPages: SpecialPages | null = null;
let urlPreview: HTMLElement | null = null;
let serviceSelector: HTMLElement | null = null;
// Service reordering
2020-09-29 20:43:41 +02:00
let lastDragPosition: HTMLElement | null = null;
let oldActiveService: number | null = null;
2020-09-29 20:43:41 +02:00
ipcRenderer.on('data', (
event,
appTitle: string,
iconSets: IconSet[],
activeServiceId: number,
_specialPages: SpecialPages,
config: Config,
) => {
// App info
2020-09-29 20:43:41 +02:00
appInfo.title = appTitle;
// Icons
icons = [];
for (const set of iconSets) {
2020-09-29 20:43:41 +02:00
icons.push(...set);
}
2020-09-29 20:43:41 +02:00
// Special pages
specialPages = _specialPages;
console.log('Updating services ...');
services = config.services;
const nav = document.querySelector('#service-selector');
if (nav) {
while (nav.children.length > 0) {
nav.removeChild(nav.children[0]);
}
}
const serviceContainer = document.querySelector('#services');
if (serviceContainer) {
serviceContainer.querySelectorAll(":scope > webview").forEach(w => serviceContainer.removeChild(w));
}
for (let i = 0; i < services.length; i++) {
2020-09-29 20:43:41 +02:00
createServiceNavigationElement(i);
}
// Init drag last position
lastDragPosition = document.getElementById('service-last-drag-position');
if (lastDragPosition) {
lastDragPosition.addEventListener('dragover', () => {
const index = services.length;
if (draggedId !== index && draggedId !== index - 1) {
resetDrag();
2020-09-29 20:43:41 +02:00
lastDragTarget = index;
lastDragPosition?.classList.remove('hidden');
lastDragPosition?.classList.add('drag-target');
}
});
}
// Set active service
2020-09-29 20:43:41 +02:00
if (activeServiceId < 0 || activeServiceId >= services.length) {
activeServiceId = 0;
}
2020-09-29 20:43:41 +02:00
setActiveService(activeServiceId);
2020-03-06 15:19:06 +01:00
// Url preview element
urlPreview = document.getElementById("url-preview");
if (urlPreview) {
2020-09-29 20:43:41 +02:00
const _urlPreview = urlPreview;
urlPreview.addEventListener('mouseover', () => {
2020-09-29 20:43:41 +02:00
if (_urlPreview.classList.contains('right')) {
_urlPreview.classList.remove('right');
} else {
2020-09-29 20:43:41 +02:00
_urlPreview.classList.add('right');
}
});
}
// History nav buttons
const buttons: { [k: string]: HTMLElement | null } = {
securityButton: securityButton,
homeButton: homeButton,
backButton: backButton,
forwardButton: forwardButton,
refreshButton: refreshButton,
};
for (const k in buttons) {
if (config[k]) buttons[k]?.classList.remove('hidden');
else buttons[k]?.classList.add('hidden');
}
// Other elements
serviceSelector = document.getElementById('service-selector');
// Navbar size
document.documentElement.style.setProperty('--nav-width', config.bigNavBar ? '64px' : '48px');
});
ipcRenderer.on('load-service-home', (event, serviceId: number) => {
const service = services[serviceId];
if (!service) throw new Error('Service doesn\'t exist.');
service.view?.loadURL(service.url)
.catch(console.error);
});
ipcRenderer.on('reload-service', (event, serviceId: number) => {
reloadService(serviceId);
});
ipcRenderer.on('unload-service', (event, serviceId: number) => {
unloadService(serviceId);
});
ipcRenderer.on('reset-service-zoom-level', (event, serviceId: number) => {
const service = services[serviceId];
if (service?.view) {
service.view.setZoomFactor(1);
service.view.setZoomLevel(0);
}
});
ipcRenderer.on('zoom-in-service', (event, serviceId: number) => {
const service = services[serviceId];
if (service?.view) {
service.view.setZoomLevel(service.view.getZoomLevel() + 1);
}
});
ipcRenderer.on('zoom-out-service', (event, serviceId: number) => {
const service = services[serviceId];
if (service?.view) {
service.view.setZoomLevel(service.view.getZoomLevel() - 1);
}
});
function removeServiceFeatures(id: number): Element | null {
// Remove nav
const nav = document.querySelector('#service-selector');
let oldNavButton: HTMLElement | null = null;
let nextSibling: Element | null = null;
if (nav) {
oldNavButton = nav.querySelector('li:nth-of-type(' + (id + 1) + ')');
if (oldNavButton) {
nextSibling = oldNavButton.nextElementSibling;
nav.removeChild(oldNavButton);
}
}
// Remove webview
2020-09-29 20:43:41 +02:00
const service = services[id];
if (service) {
const view = service.view;
if (view) document.querySelector('#services')?.removeChild(view);
}
return nextSibling;
}
2020-09-29 20:43:41 +02:00
ipcRenderer.on('updateService', (e, id: number | null, data: Service) => {
if (id === null) {
console.log('Adding new service');
services.push(data);
2020-09-29 20:43:41 +02:00
createServiceNavigationElement(services.length - 1);
} else {
console.log('Updating existing service', id);
const nextSibling = removeServiceFeatures(id);
// Create new service
services[id] = data;
2020-09-29 20:43:41 +02:00
createServiceNavigationElement(id, nextSibling);
if (selectedServiceId === id) {
setActiveService(id);
}
}
});
2020-09-29 20:43:41 +02:00
ipcRenderer.on('reorderService', (e, serviceId: number, targetId: number) => {
const oldServices = services;
services = [];
let newId = targetId;
for (let i = 0; i < targetId; i++) {
if (i !== serviceId) {
services.push(oldServices[i]);
if (i === oldActiveService) newId = services.length - 1;
}
}
services.push(oldServices[serviceId]);
for (let i = targetId; i < oldServices.length; i++) {
if (i !== serviceId) {
services.push(oldServices[i]);
if (i === oldActiveService) newId = services.length - 1;
}
}
if (serviceSelector) {
serviceSelector.innerHTML = '';
}
for (let i = 0; i < services.length; i++) {
2020-09-29 20:43:41 +02:00
const service = services[i];
if (service) service.li = undefined;
createServiceNavigationElement(i);
}
setActiveService(newId);
});
2020-09-29 20:43:41 +02:00
ipcRenderer.on('deleteService', (e, id: number) => {
removeServiceFeatures(id);
2020-09-29 20:43:41 +02:00
if (selectedServiceId === id) {
setActiveService(0);
}
2020-09-29 20:43:41 +02:00
services.splice(id, 1);
});
2020-09-29 20:43:41 +02:00
function createServiceNavigationElement(index: number, nextNavButton?: Element | null) {
const service = services[index];
if (!service) throw new Error('Service doesn\'t exist.');
const li = document.createElement('li') as NavigationElement;
service.li = li;
2020-09-29 20:43:41 +02:00
const button = document.createElement('button');
button.dataset.serviceId = '' + index;
button.dataset.tooltip = service.name;
button.addEventListener('click', () => {
2020-09-29 20:43:41 +02:00
const rawId = button.dataset.serviceId;
if (rawId) {
const id = parseInt(rawId);
setActiveService(id);
ipcRenderer.send('setActiveService', id);
}
});
button.addEventListener('contextmenu', e => {
e.preventDefault();
const service = services[index];
if (!service) throw new Error('Service doesn\'t exist.');
ipcRenderer.send(
'open-service-navigation-context-menu',
index,
!!service.view && !!service.viewReady,
!service.view && !service.viewReady,
service.view?.getZoomFactor() !== 1 && service.view?.getZoomLevel() !== 0,
);
});
2020-09-29 20:43:41 +02:00
let icon: HTMLImageElement | HTMLElement;
if (service.useFavicon && service.favicon != null) {
icon = document.createElement('img');
2020-09-29 20:43:41 +02:00
if (icon instanceof HTMLImageElement) {
icon.src = service.favicon;
icon.alt = service.name;
}
} else if (service.isImage && service.icon) {
icon = document.createElement('img');
2020-09-29 20:43:41 +02:00
if (icon instanceof HTMLImageElement) {
icon.src = service.icon;
icon.alt = service.name;
}
} else {
icon = document.createElement('i');
let iconProperties = icons.find(i => `${i.set}/${i.name}` === service.icon);
// Compatibility with old services
if (!iconProperties) iconProperties = icons.find(i => i.name === service.icon);
if (iconProperties) {
iconProperties.faIcon.split(' ').forEach((cl: string) => {
icon.classList.add(cl);
});
} else {
icon.classList.add('fas', 'fa-circle');
}
}
button.appendChild(icon);
li.appendChild(button);
li.button = button;
const nav = document.querySelector('#service-selector');
if (nav) {
if (nextNavButton === nav || nextNavButton === undefined) {
nav.appendChild(li);
} else {
nav.insertBefore(li, nextNavButton);
}
}
if (service.autoLoad) {
loadService(index, service);
}
initDrag(index, li);
}
let draggedId: number;
let lastDragTarget = -1;
2020-09-29 20:43:41 +02:00
function initDrag(index: number, li: NavigationElement) {
li.serviceId = index;
li.draggable = true;
li.addEventListener('dragstart', (event: DragEvent) => {
draggedId = index;
if (event.dataTransfer) {
event.dataTransfer.dropEffect = 'move';
}
lastDragPosition?.classList.remove('hidden');
});
li.addEventListener('dragover', (e: DragEvent) => {
let realIndex = index;
2020-09-29 20:43:41 +02:00
const rect = li.getBoundingClientRect();
if ((e.clientY - rect.y) / rect.height >= 0.5) {
realIndex++;
}
if (draggedId === realIndex - 1) {
realIndex--;
}
resetDrag();
2020-09-29 20:43:41 +02:00
const el = realIndex === services.length ?
lastDragPosition :
services[realIndex]?.li;
lastDragTarget = realIndex;
lastDragPosition?.classList.remove('hidden');
2020-09-29 20:43:41 +02:00
if (el) {
el.classList.add('drag-target');
if (draggedId === realIndex || draggedId === realIndex - 1)
el.classList.add('drag-target-self');
}
});
li.addEventListener('dragend', () => {
reorderService(draggedId, lastDragTarget);
resetDrag();
});
}
function resetDrag() {
lastDragTarget = -1;
serviceSelector?.querySelectorAll('li').forEach(li => {
li.classList.remove('drag-target');
li.classList.remove('drag-target-self');
});
const lastDragPosition = document.getElementById('service-last-drag-position');
lastDragPosition?.classList.remove('drag-target');
lastDragPosition?.classList.add('hidden');
}
function reorderService(serviceId: number, targetId: number) {
console.log('Reordering service', serviceId, targetId);
if (targetId >= 0) {
2020-09-29 20:43:41 +02:00
oldActiveService = selectedServiceId;
setActiveService(-1);
ipcRenderer.send('reorderService', serviceId, targetId);
}
}
document.addEventListener('DOMContentLoaded', () => {
securityButton = document.getElementById('status');
2020-05-19 05:56:28 +02:00
homeButton = document.getElementById('home');
homeButton?.addEventListener('click', () => goHome());
2020-05-19 05:56:28 +02:00
forwardButton = document.getElementById('forward');
forwardButton?.addEventListener('click', () => goForward());
2020-05-19 05:56:28 +02:00
backButton = document.getElementById('back');
backButton?.addEventListener('click', () => goBack());
refreshButton = document.getElementById('reload');
refreshButton?.addEventListener('click', () => reload());
2020-05-19 06:00:24 +02:00
2020-05-19 05:56:28 +02:00
addButton = document.getElementById('add-button');
addButton?.addEventListener('click', () => ipcRenderer.send('create-new-service', null));
settingsButton = document.getElementById('settings-button');
settingsButton?.addEventListener('click', () => ipcRenderer.send('openSettings', null));
});
function setActiveService(serviceId: number) {
const currentService = services[serviceId];
process.nextTick(() => {
if (currentService) {
loadService(serviceId, currentService);
}
// Hide previous service
2020-09-29 20:43:41 +02:00
if (typeof selectedServiceId === 'number') {
const selectedService = services[selectedServiceId];
if (selectedService && selectedService.view) {
selectedService.view.classList.remove('active');
}
}
// Show service
2020-09-29 20:43:41 +02:00
currentService?.view?.classList.add('active');
// Save active service ID
2020-09-29 20:43:41 +02:00
selectedServiceId = serviceId;
// Refresh navigation
updateNavigation();
});
}
2020-09-29 20:43:41 +02:00
function loadService(serviceId: number, service: FrontService) {
// Load service if not loaded yet
if (!service.view && !service.viewReady) {
2020-01-21 13:25:36 +01:00
console.log('Loading service', serviceId);
document.querySelector('#services > .loader')?.classList.remove('hidden');
2020-09-29 20:43:41 +02:00
const view = service.view = document.createElement('webview');
updateNavigation(); // Start loading animation
2020-09-29 20:43:41 +02:00
view.setAttribute('enableRemoteModule', 'false');
view.setAttribute('partition', 'persist:service_' + service.partition);
view.setAttribute('autosize', 'true');
if (specialPages) view.setAttribute('src', specialPages.empty);
2020-07-14 10:31:09 +02:00
// Error handling
2020-09-29 20:43:41 +02:00
view.addEventListener('did-fail-load', (e: DidFailLoadEvent) => {
if (e.errorCode <= -100 && e.errorCode > -200) {
2020-09-29 20:43:41 +02:00
if (specialPages) view.setAttribute('src', specialPages.connectionError);
} else if (e.errorCode === -6) {
2020-09-29 20:43:41 +02:00
if (specialPages) view.setAttribute('src', specialPages.fileNotFound);
} else if (e.errorCode !== -3) {
console.error('Unhandled error:', e);
}
2020-07-14 10:31:09 +02:00
});
// Append element to DOM
2020-09-29 20:43:41 +02:00
document.querySelector('#services')?.appendChild(view);
2020-02-20 12:46:53 +01:00
// Load chain
2020-09-29 20:43:41 +02:00
let listener: () => void;
view.addEventListener('dom-ready', listener = () => {
view.removeEventListener('dom-ready', listener);
2020-09-29 20:43:41 +02:00
view.addEventListener('dom-ready', listener = () => {
2020-02-20 12:46:53 +01:00
if (service.customCSS) {
2020-09-29 20:43:41 +02:00
view.insertCSS(service.customCSS)
.catch(console.error);
2020-02-20 12:46:53 +01:00
}
document.querySelector('#services > .loader')?.classList.add('hidden');
2020-09-29 20:43:41 +02:00
service.li?.classList.add('loaded');
2020-02-20 12:46:53 +01:00
service.viewReady = true;
2020-01-21 21:27:48 +01:00
2020-02-20 12:46:53 +01:00
updateNavigation();
2020-09-29 20:43:41 +02:00
if (selectedServiceId === null) {
2020-02-20 12:46:53 +01:00
setActiveService(serviceId);
}
});
// Set custom user agent
2020-02-20 12:46:53 +01:00
if (typeof service.customUserAgent === 'string') {
ipcRenderer.send('set-web-contents-user-agent', view.getWebContentsId(), service.customUserAgent);
}
// Set context menu
ipcRenderer.send('open-service-content-context-menu', view.getWebContentsId());
// Set permission request handler
ipcRenderer.send('set-partition-permissions', serviceId, view.partition);
2020-09-29 20:43:41 +02:00
view.setAttribute('src', service.url);
});
// Load favicon
2020-09-29 20:43:41 +02:00
view.addEventListener('page-favicon-updated', (event: PageFaviconUpdatedEvent) => {
console.debug('Loaded favicons for', service.name, event.favicons);
if (event.favicons.length > 0 && service.favicon !== event.favicons[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 = () => {
2020-09-29 20:43:41 +02:00
if (service.li) {
service.li.button.innerHTML = '';
service.li.button.appendChild(img);
}
};
}
}
});
2020-03-06 15:19:06 +01:00
// Display target urls
2020-09-29 20:43:41 +02:00
view.addEventListener('update-target-url', (event: UpdateTargetUrlEvent) => {
2020-03-06 15:19:06 +01:00
if (event.url.length === 0) {
2020-07-10 14:08:31 +02:00
urlPreview?.classList.add('invisible');
2020-03-06 15:19:06 +01:00
} else {
2020-07-10 14:08:31 +02:00
urlPreview?.classList.remove('invisible');
if (urlPreview) {
urlPreview.innerHTML = event.url;
}
2020-03-06 15:19:06 +01:00
}
});
}
}
function unloadService(serviceId: number) {
const service = services[serviceId];
2020-09-29 20:43:41 +02:00
if (!service) throw new Error('Service doesn\'t exist.');
if (service.view && service.viewReady) {
service.view.remove();
2020-09-29 20:43:41 +02:00
service.view = undefined;
service.li?.classList.remove('loaded');
service.viewReady = false;
2020-09-29 20:43:41 +02:00
if (selectedServiceId === serviceId) {
selectedServiceId = null;
for (let i = 0; i < services.length; i++) {
2020-09-29 20:43:41 +02:00
const otherService = services[i];
if (otherService && otherService.view && otherService.viewReady) {
setActiveService(i);
break;
}
}
2020-09-29 20:43:41 +02:00
// false positive:
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
if (selectedServiceId === null) {
updateNavigation();
}
}
}
}
function reloadService(serviceId: number) {
const service = services[serviceId];
2020-09-29 20:43:41 +02:00
if (!service) throw new Error('Service doesn\'t exist.');
if (service.view && service.viewReady) {
2020-01-21 13:25:36 +01:00
console.log('Reloading service', serviceId);
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];
2020-09-29 20:43:41 +02:00
if (!service) continue;
if (!service.li) continue;
// Active?
2020-09-29 20:43:41 +02:00
if (selectedServiceId === i) service.li.classList.add('active');
else service.li.classList.remove('active');
// Loading?
if (service.view && !service.viewReady) service.li.classList.add('loading');
else service.li.classList.remove('loading');
// Loaded?
if (service.viewReady) service.li.classList.add('loaded');
else service.li.classList.remove('loaded');
}
2020-09-29 20:43:41 +02:00
if (selectedServiceId !== null && services[selectedServiceId]?.viewReady) {
console.debug('Updating navigation buttons because view is ready');
// Update history navigation
2020-09-29 20:43:41 +02:00
const view = services[selectedServiceId]?.view;
homeButton?.classList.remove('disabled');
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');
refreshButton?.classList.remove('disabled');
updateStatusButton();
}
updateWindowTitle();
}
function updateStatusButton() {
if (typeof selectedServiceId !== 'number') return;
2020-09-29 20:43:41 +02:00
const protocol = services[selectedServiceId]?.view?.getURL().split('://')[0] || 'unknown';
securityButton?.childNodes.forEach(el => {
if (el instanceof HTMLElement) {
if (el.classList.contains(protocol)) el.classList.add('active');
else el.classList.remove('active');
}
});
}
function updateWindowTitle() {
2020-09-29 20:43:41 +02:00
if (selectedServiceId === null) {
ipcRenderer.send('update-window-title', null);
2020-09-29 20:43:41 +02:00
} else {
const service = services[selectedServiceId];
if (service?.viewReady && service.view) {
ipcRenderer.send('update-window-title', selectedServiceId, service.view.getWebContentsId());
2020-09-29 20:43:41 +02:00
}
}
}
2020-05-19 05:56:28 +02:00
function goHome() {
2020-09-29 20:43:41 +02:00
if (selectedServiceId === null) return;
const service = services[selectedServiceId];
if (!service) throw new Error('Service doesn\'t exist.');
service.view?.loadURL(service.url)
2020-05-19 05:56:28 +02:00
.catch(console.error);
}
function goForward() {
2020-09-29 20:43:41 +02:00
if (selectedServiceId === null) return;
const view = services[selectedServiceId]?.view;
if (view) ipcRenderer.send('go-forward', view.getWebContentsId());
}
function goBack() {
2020-09-29 20:43:41 +02:00
if (selectedServiceId === null) return;
const view = services[selectedServiceId]?.view;
if (view) ipcRenderer.send('go-back', view.getWebContentsId());
2020-02-20 11:51:13 +01:00
}
2020-05-19 06:00:24 +02:00
function reload() {
2020-09-29 20:43:41 +02:00
if (selectedServiceId === null) return;
reloadService(selectedServiceId);
2020-05-19 06:00:24 +02:00
}
2020-09-29 20:43:41 +02:00
ipcRenderer.on('fullscreenchange', (e, fullscreen: boolean) => {
if (fullscreen) document.body.classList.add('fullscreen');
else document.body.classList.remove('fullscreen');
});
2020-09-29 20:43:41 +02:00
type FrontService = Service & {
view?: WebviewTag;
viewReady?: boolean;
li?: NavigationElement;
};
type NavigationElement = HTMLLIElement & {
serviceId: number;
button: HTMLButtonElement;
};