Rename the project to browser-views and more development
This commit is contained in:
parent
cca69fa26a
commit
4d536eb43f
11
Service.js
11
Service.js
@ -1,11 +0,0 @@
|
|||||||
class Service {
|
|
||||||
constructor(partition, name, icon, isImage, url) {
|
|
||||||
this.partition = partition;
|
|
||||||
this.name = name;
|
|
||||||
this.icon = icon;
|
|
||||||
this.isImage = isImage;
|
|
||||||
this.url = url;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = Service;
|
|
||||||
272
index.html
272
index.html
@ -1,272 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<title>Arisu Views</title>
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
|
|
||||||
integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
|
|
||||||
|
|
||||||
<style>
|
|
||||||
* {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
height: 100%;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
margin: 0;
|
|
||||||
text-align: center;
|
|
||||||
background-color: rgb(43, 43, 43);
|
|
||||||
}
|
|
||||||
|
|
||||||
#service-selector {
|
|
||||||
flex-grow: 1;
|
|
||||||
display: block;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#service-selector li a {
|
|
||||||
display: block;
|
|
||||||
padding: 16px;
|
|
||||||
margin: 0;
|
|
||||||
height: 72px;
|
|
||||||
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
#service-selector li a img {
|
|
||||||
width: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#service-selector li a i {
|
|
||||||
font-size: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#service-selector li.active a {
|
|
||||||
position: relative;
|
|
||||||
background-color: #fff2;
|
|
||||||
}
|
|
||||||
|
|
||||||
#service-selector li.active a::before {
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
height: 100%;
|
|
||||||
border-left: 4px solid #ffffff2e;
|
|
||||||
}
|
|
||||||
|
|
||||||
#service-selector li:hover a {
|
|
||||||
background-color: #fff3;
|
|
||||||
}
|
|
||||||
|
|
||||||
#history {
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#history button {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
font-size: 12px;
|
|
||||||
|
|
||||||
background: #fff1;
|
|
||||||
border: 1px solid #fff4;
|
|
||||||
border-radius: 72px;
|
|
||||||
|
|
||||||
color: #fff;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
#history button.disabled {
|
|
||||||
color: #888;
|
|
||||||
border: transparent;
|
|
||||||
background: transparent;
|
|
||||||
cursor: initial;
|
|
||||||
}
|
|
||||||
|
|
||||||
#history button:focus,
|
|
||||||
#history button:hover {
|
|
||||||
outline: none;
|
|
||||||
border-color: #fff9;
|
|
||||||
}
|
|
||||||
|
|
||||||
#history button:hover:not(.disabled) {
|
|
||||||
outline: none;
|
|
||||||
background-color: #fff2;
|
|
||||||
}
|
|
||||||
|
|
||||||
#history button:active:not(.disabled) {
|
|
||||||
background-color: #fff4;
|
|
||||||
}
|
|
||||||
|
|
||||||
#services {
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
#services>* {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#services> :not(.active) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<div id="navigation">
|
|
||||||
<div id="history">
|
|
||||||
<button id="back"><i class="fas fa-arrow-left"></i></button>
|
|
||||||
<button id="forward" class="disabled"><i class="fas fa-arrow-right"></i></button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<ul id="service-selector"></ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="services"></div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const {
|
|
||||||
ipcRenderer
|
|
||||||
} = require('electron');
|
|
||||||
const Service = require('./Service');
|
|
||||||
|
|
||||||
var services = [];
|
|
||||||
var selectedService = 0;
|
|
||||||
|
|
||||||
ipcRenderer.on('services', (event, actualServices, actualSelectedService) => {
|
|
||||||
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');
|
|
||||||
while (serviceContainer.children.length > 0) {
|
|
||||||
serviceContainer.removeChild(serviceContainer.children[0]);
|
|
||||||
}
|
|
||||||
|
|
||||||
for (let i = 0; i < services.length; i++) {
|
|
||||||
let service = services[i];
|
|
||||||
let li = document.createElement('li');
|
|
||||||
service.li = li;
|
|
||||||
|
|
||||||
let a = document.createElement('a');
|
|
||||||
a.href = 'javascript: void(0);';
|
|
||||||
a.dataset.serviceId = i;
|
|
||||||
a.dataset.tooltip = service.name;
|
|
||||||
a.addEventListener('click', () => {
|
|
||||||
setActiveService(a.dataset.serviceId);
|
|
||||||
ipcRenderer.send('setActiveService', a.dataset.serviceId);
|
|
||||||
});
|
|
||||||
|
|
||||||
let icon;
|
|
||||||
if (service.isImage) {
|
|
||||||
icon = document.createElement('img');
|
|
||||||
icon.src = service.icon;
|
|
||||||
icon.alt = service.name;
|
|
||||||
} else {
|
|
||||||
icon = document.createElement('i');
|
|
||||||
service.icon.split(' ').forEach(cl => {
|
|
||||||
icon.classList.add(cl);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
a.appendChild(icon);
|
|
||||||
li.appendChild(a);
|
|
||||||
nav.appendChild(li);
|
|
||||||
}
|
|
||||||
setActiveService(actualSelectedService);
|
|
||||||
});
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
const forward = document.querySelector('#forward');
|
|
||||||
const back = document.querySelector('#back');
|
|
||||||
|
|
||||||
forward.addEventListener('click', goForward);
|
|
||||||
|
|
||||||
back.addEventListener('click', goBack);
|
|
||||||
});
|
|
||||||
|
|
||||||
function setActiveService(serviceId) {
|
|
||||||
let currentService = services[serviceId];
|
|
||||||
process.nextTick(() => {
|
|
||||||
// Load service if not loaded yet
|
|
||||||
if (!currentService.view) {
|
|
||||||
currentService.view = document.createElement('webview');
|
|
||||||
currentService.view.setAttribute('src', currentService.url);
|
|
||||||
currentService.view.setAttribute('partition', 'persist:service_' + currentService
|
|
||||||
.partition);
|
|
||||||
currentService.view.setAttribute('autosize', true);
|
|
||||||
|
|
||||||
document.querySelector('#services').appendChild(currentService.view);
|
|
||||||
currentService.view.addEventListener('dom-ready', (webview) => {
|
|
||||||
console.log(webview);
|
|
||||||
currentService.viewReady = true;
|
|
||||||
updateNavigation();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Hide previous service
|
|
||||||
if (services[selectedService].view) {
|
|
||||||
services[selectedService].view.classList.remove('active');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Show service
|
|
||||||
currentService.view.classList.add('active');
|
|
||||||
|
|
||||||
// Save active service ID
|
|
||||||
this.selectedService = serviceId;
|
|
||||||
|
|
||||||
// Refresh navigation
|
|
||||||
updateNavigation();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function goForward() {
|
|
||||||
let view = services[selectedService].view;
|
|
||||||
if (view) view.webContents.goForward();
|
|
||||||
}
|
|
||||||
|
|
||||||
function goBack() {
|
|
||||||
let view = services[selectedService].view;
|
|
||||||
if (view) view.webContents.goBack();
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateNavigation() {
|
|
||||||
if (!services[selectedService].viewReady) return;
|
|
||||||
|
|
||||||
// Update active list element
|
|
||||||
for (let i = 0; i < services.length; i++) {
|
|
||||||
let service = services[i];
|
|
||||||
if (selectedService == i) {
|
|
||||||
service.li.classList.add('active');
|
|
||||||
} else {
|
|
||||||
service.li.classList.remove('active');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Update history navigation
|
|
||||||
let view = services[selectedService].view;
|
|
||||||
|
|
||||||
if (view && view.canGoForward()) forward.classList.remove('disabled');
|
|
||||||
else forward.classList.add('disabled');
|
|
||||||
|
|
||||||
if (view && view.canGoBack()) back.classList.remove('disabled');
|
|
||||||
else back.classList.add('disabled');
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
56
main.js
56
main.js
@ -1,56 +0,0 @@
|
|||||||
const {
|
|
||||||
app,
|
|
||||||
BrowserWindow,
|
|
||||||
BrowserView,
|
|
||||||
ipcMain
|
|
||||||
} = require('electron')
|
|
||||||
|
|
||||||
const Service = require('./Service')
|
|
||||||
|
|
||||||
const services = [];
|
|
||||||
services.push(new Service('arisucloud', 'Arisu Cloud', 'arisucloud.svg', true, 'https://cloud.arisu.fr/'));
|
|
||||||
services.push(new Service('webmail', 'WebMail', 'far fa-envelope', false, 'https://mail.arisu.fr/'));
|
|
||||||
|
|
||||||
var selectedService = 0;
|
|
||||||
|
|
||||||
var window;
|
|
||||||
|
|
||||||
function createWindow() {
|
|
||||||
// Create the browser window.
|
|
||||||
window = new BrowserWindow({
|
|
||||||
webPreferences: {
|
|
||||||
nodeIntegration: true,
|
|
||||||
enableRemoteModule: true,
|
|
||||||
webviewTag: true
|
|
||||||
}
|
|
||||||
});
|
|
||||||
window.maximize();
|
|
||||||
window.on('closed', () => {
|
|
||||||
window = null;
|
|
||||||
});
|
|
||||||
window.webContents.openDevTools({
|
|
||||||
mode: 'detach'
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
// Sync services with navigation
|
|
||||||
window.webContents.on('dom-ready', sendServices);
|
|
||||||
|
|
||||||
// Load navigation view
|
|
||||||
window.loadFile('index.html');
|
|
||||||
|
|
||||||
// Load active service
|
|
||||||
ipcMain.on('setActiveService', (event, index) => {
|
|
||||||
setActiveService(index);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function sendServices() {
|
|
||||||
window.webContents.send('services', services, selectedService);
|
|
||||||
}
|
|
||||||
|
|
||||||
function setActiveService(index) {
|
|
||||||
selectedService = index;
|
|
||||||
}
|
|
||||||
|
|
||||||
app.on('ready', createWindow)
|
|
||||||
@ -1,9 +1,10 @@
|
|||||||
{
|
{
|
||||||
"name": "first-app",
|
"name": "browser-views",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"main": "main.js",
|
"main": "src/main.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "electron ."
|
"start": "electron .",
|
||||||
|
"dev": "electron . --dev"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"electron": "^5.0.1"
|
"electron": "^5.0.1"
|
||||||
|
|||||||
11
resources/add-service.html
Normal file
11
resources/add-service.html
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Add a service</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="layout.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>Add a new service !</body>
|
||||||
|
</html>
|
||||||
314
resources/index.html
Normal file
314
resources/index.html
Normal file
@ -0,0 +1,314 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<title>Arisu Views</title>
|
||||||
|
|
||||||
|
<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">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#service-selector {
|
||||||
|
flex-grow: 1;
|
||||||
|
display: block;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
*:focus {
|
||||||
|
outline-color: rgb(118, 93, 176);
|
||||||
|
}
|
||||||
|
|
||||||
|
#navigation button {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
padding: 16px;
|
||||||
|
margin: 0;
|
||||||
|
height: 72px;
|
||||||
|
|
||||||
|
color: #fff;
|
||||||
|
border: 0;
|
||||||
|
background: transparent;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#navigation button img {
|
||||||
|
width: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#navigation button i {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#service-selector li.active button {
|
||||||
|
position: relative;
|
||||||
|
background-color: #fff2;
|
||||||
|
}
|
||||||
|
|
||||||
|
#service-selector li.active button::before {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
height: 100%;
|
||||||
|
border-left: 4px solid #ffffff2e;
|
||||||
|
}
|
||||||
|
|
||||||
|
#navigation button:hover {
|
||||||
|
background-color: #fff3;
|
||||||
|
}
|
||||||
|
|
||||||
|
#history {
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#history button {
|
||||||
|
display: inline;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
padding: initial;
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
|
background: #fff1;
|
||||||
|
border: 1px solid #fff4;
|
||||||
|
border-radius: 72px;
|
||||||
|
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#history button i {
|
||||||
|
font-size: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
#history button.disabled {
|
||||||
|
color: #888;
|
||||||
|
border: transparent;
|
||||||
|
background: transparent;
|
||||||
|
cursor: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
#history button:focus,
|
||||||
|
#history button:hover {
|
||||||
|
outline: none;
|
||||||
|
border-color: #fff9;
|
||||||
|
}
|
||||||
|
|
||||||
|
#history button:hover:not(.disabled) {
|
||||||
|
outline: none;
|
||||||
|
background-color: #fff2;
|
||||||
|
}
|
||||||
|
|
||||||
|
#history button:active:not(.disabled) {
|
||||||
|
background-color: #fff4;
|
||||||
|
}
|
||||||
|
|
||||||
|
#navigation #add-button:not(:hover) {
|
||||||
|
opacity: 0.75;
|
||||||
|
}
|
||||||
|
|
||||||
|
#services {
|
||||||
|
position: relative;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#services > *:not(.loader) {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#services > :not(.active):not(.loader) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#services > .loader {
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="navigation">
|
||||||
|
<div id="history">
|
||||||
|
<button id="back"><i class="fas fa-arrow-left"></i></button>
|
||||||
|
<button id="forward" class="disabled"><i class="fas fa-arrow-right"></i></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul id="service-selector"></ul>
|
||||||
|
|
||||||
|
<button id="add-button"><i class="fa fa-plus"></i></button>
|
||||||
|
|
||||||
|
<button id="settings-button"><i class="fa fa-cog"></i></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="services">
|
||||||
|
<div class="loader"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const {
|
||||||
|
ipcRenderer
|
||||||
|
} = require('electron');
|
||||||
|
|
||||||
|
let services = [];
|
||||||
|
let selectedService = 0;
|
||||||
|
let forwardButton;
|
||||||
|
let backButton;
|
||||||
|
let addButton;
|
||||||
|
|
||||||
|
ipcRenderer.on('services', (event, actualServices, actualSelectedService) => {
|
||||||
|
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++) {
|
||||||
|
let service = services[i];
|
||||||
|
let li = document.createElement('li');
|
||||||
|
service.li = li;
|
||||||
|
|
||||||
|
let button = document.createElement('button');
|
||||||
|
button.dataset.serviceId = '' + i;
|
||||||
|
button.dataset.tooltip = service.name;
|
||||||
|
button.addEventListener('click', () => {
|
||||||
|
setActiveService(button.dataset.serviceId);
|
||||||
|
ipcRenderer.send('setActiveService', button.dataset.serviceId);
|
||||||
|
});
|
||||||
|
|
||||||
|
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');
|
||||||
|
service.icon.split(' ').forEach(cl => {
|
||||||
|
icon.classList.add(cl);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
button.appendChild(icon);
|
||||||
|
li.appendChild(button);
|
||||||
|
li.button = button;
|
||||||
|
nav.appendChild(li);
|
||||||
|
}
|
||||||
|
setActiveService(actualSelectedService);
|
||||||
|
});
|
||||||
|
|
||||||
|
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('openAddServiceWindow'));
|
||||||
|
});
|
||||||
|
|
||||||
|
function setActiveService(serviceId) {
|
||||||
|
let currentService = services[serviceId];
|
||||||
|
process.nextTick(() => {
|
||||||
|
// Load service if not loaded yet
|
||||||
|
if (!currentService.view) {
|
||||||
|
currentService.view = document.createElement('webview');
|
||||||
|
currentService.view.setAttribute('src', currentService.url);
|
||||||
|
currentService.view.setAttribute('partition', 'persist:service_' + currentService.partition);
|
||||||
|
currentService.view.setAttribute('autosize', "true");
|
||||||
|
|
||||||
|
document.querySelector('#services').appendChild(currentService.view);
|
||||||
|
currentService.view.addEventListener('dom-ready', event => {
|
||||||
|
console.log(event);
|
||||||
|
currentService.viewReady = true;
|
||||||
|
updateNavigation();
|
||||||
|
});
|
||||||
|
currentService.view.addEventListener('page-favicon-updated', event => {
|
||||||
|
console.debug('Loaded favicons for', currentService.name, event.favicons);
|
||||||
|
if (event.favicons.length > 0) {
|
||||||
|
ipcRenderer.send('setServiceFavicon', serviceId, event.favicons[0]);
|
||||||
|
if (currentService.useFavicon) {
|
||||||
|
const img = document.createElement('img');
|
||||||
|
img.src = event.favicons[0];
|
||||||
|
img.alt = currentService.name;
|
||||||
|
img.onload = () => {
|
||||||
|
currentService.li.button.innerHTML = '';
|
||||||
|
currentService.li.button.appendChild(img);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hide previous service
|
||||||
|
if (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 updateNavigation() {
|
||||||
|
console.debug('Updating navigation');
|
||||||
|
// Update active list element
|
||||||
|
for (let i = 0; i < services.length; i++) {
|
||||||
|
let service = services[i];
|
||||||
|
if (parseInt(selectedService) === i) {
|
||||||
|
service.li.classList.add('active');
|
||||||
|
} else {
|
||||||
|
service.li.classList.remove('active');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (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>
|
||||||
55
resources/layout.css
Normal file
55
resources/layout.css
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
height: 100%;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
margin: 0;
|
||||||
|
text-align: center;
|
||||||
|
background-color: rgb(43, 43, 43);
|
||||||
|
color: #fff;
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader {
|
||||||
|
--border-width: 6px;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
border-width: var(--border-width);
|
||||||
|
border-style: solid;
|
||||||
|
border-color: #fff4;
|
||||||
|
border-radius: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader::before {
|
||||||
|
content: "";
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: block;
|
||||||
|
height: calc(100% + 2 * var(--border-width));
|
||||||
|
margin: calc(var(--border-width) * -1);
|
||||||
|
border-width: var(--border-width);
|
||||||
|
border-style: inherit;
|
||||||
|
border-color: transparent;
|
||||||
|
border-left-color: #fff;
|
||||||
|
border-radius: inherit;
|
||||||
|
animation: 1s linear spin infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
from {
|
||||||
|
transform: rotate(0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
43
src/Config.js
Normal file
43
src/Config.js
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
const fs = require('fs');
|
||||||
|
const path = require('path');
|
||||||
|
|
||||||
|
const Service = require('./Service');
|
||||||
|
|
||||||
|
const configDir = path.resolve(__dirname, '../config');
|
||||||
|
const configFile = path.resolve(configDir, 'config.json');
|
||||||
|
|
||||||
|
class Config {
|
||||||
|
constructor() {
|
||||||
|
// Load data from config file
|
||||||
|
let data = {};
|
||||||
|
if (fs.existsSync(configDir) && fs.statSync(configDir).isDirectory()) {
|
||||||
|
if (fs.existsSync(configFile) && fs.statSync(configFile).isFile())
|
||||||
|
data = JSON.parse(fs.readFileSync(configFile, 'utf8'));
|
||||||
|
} else {
|
||||||
|
fs.mkdirSync(configDir);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Parse services
|
||||||
|
this.services = [];
|
||||||
|
if (typeof data.services === 'object') {
|
||||||
|
let i = 0;
|
||||||
|
for (const service of data.services) {
|
||||||
|
this.services[i] = new Service(service);
|
||||||
|
i++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.services.length === 0) {
|
||||||
|
this.services.push(new Service('webmail', 'WebMail', 'far fa-envelope', false, 'https://mail.arisu.fr/', true));
|
||||||
|
this.services.push(new Service('arisucloud', 'Arisu Cloud', 'arisucloud.svg', true, 'https://cloud.arisu.fr/', true));
|
||||||
|
}
|
||||||
|
|
||||||
|
this.save();
|
||||||
|
}
|
||||||
|
|
||||||
|
save() {
|
||||||
|
fs.writeFileSync(configFile, JSON.stringify(this, null, 4));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = Config;
|
||||||
38
src/Service.js
Normal file
38
src/Service.js
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
class Service {
|
||||||
|
constructor(partition, name, icon, isImage, url, useFavicon) {
|
||||||
|
if (arguments.length === 1) {
|
||||||
|
let data = arguments[0];
|
||||||
|
for (let k in data) {
|
||||||
|
if (data.hasOwnProperty(k)) {
|
||||||
|
this[k] = data[k];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.partition = partition;
|
||||||
|
this.name = name;
|
||||||
|
this.icon = icon;
|
||||||
|
this.isImage = isImage;
|
||||||
|
this.url = url;
|
||||||
|
this.useFavicon = useFavicon;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let k in Service.requiredProperties) {
|
||||||
|
if (Service.requiredProperties.hasOwnProperty(k)) {
|
||||||
|
if (!this.hasOwnProperty(k) || this[k] === undefined) {
|
||||||
|
this[k] = Service.requiredProperties[k];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Service.requiredProperties = {
|
||||||
|
'partition': null,
|
||||||
|
'name': null,
|
||||||
|
'icon': null,
|
||||||
|
'isImage': null,
|
||||||
|
'url': null,
|
||||||
|
'useFavicon': true,
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = Service;
|
||||||
83
src/main.js
Normal file
83
src/main.js
Normal file
@ -0,0 +1,83 @@
|
|||||||
|
const {
|
||||||
|
app,
|
||||||
|
BrowserWindow,
|
||||||
|
ipcMain,
|
||||||
|
} = require('electron');
|
||||||
|
const path = require('path');
|
||||||
|
const Config = require('./Config');
|
||||||
|
|
||||||
|
const resourcesDir = path.resolve(__dirname, '../resources');
|
||||||
|
|
||||||
|
const config = new Config();
|
||||||
|
|
||||||
|
let selectedService = 0;
|
||||||
|
|
||||||
|
let window;
|
||||||
|
let addServiceWindow;
|
||||||
|
|
||||||
|
function createWindow() {
|
||||||
|
// Create the browser window.
|
||||||
|
window = new BrowserWindow({
|
||||||
|
webPreferences: {
|
||||||
|
nodeIntegration: true,
|
||||||
|
enableRemoteModule: true,
|
||||||
|
webviewTag: true,
|
||||||
|
},
|
||||||
|
autoHideMenuBar: true,
|
||||||
|
});
|
||||||
|
window.maximize();
|
||||||
|
window.on('closed', () => {
|
||||||
|
window = null;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (process.argv.length > 2 && process.argv[2] === '--dev') {
|
||||||
|
window.webContents.openDevTools({
|
||||||
|
mode: 'right'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Sync services with navigation
|
||||||
|
window.webContents.on('dom-ready', sendServices);
|
||||||
|
|
||||||
|
// Load navigation view
|
||||||
|
window.loadFile(path.resolve(resourcesDir, 'index.html'))
|
||||||
|
.catch(console.error);
|
||||||
|
|
||||||
|
// Load active service
|
||||||
|
ipcMain.on('setActiveService', (event, index) => {
|
||||||
|
setActiveService(index);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Set a service's favicon
|
||||||
|
ipcMain.on('setServiceFavicon', (event, index, favicon) => {
|
||||||
|
config.services[index].favicon = favicon;
|
||||||
|
config.save();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Open add service window
|
||||||
|
ipcMain.on('openAddServiceWindow', () => {
|
||||||
|
if (!addServiceWindow) {
|
||||||
|
addServiceWindow = new BrowserWindow({
|
||||||
|
parent: window,
|
||||||
|
modal: true,
|
||||||
|
autoHideMenuBar: true,
|
||||||
|
});
|
||||||
|
addServiceWindow.on('close', () => {
|
||||||
|
addServiceWindow = null;
|
||||||
|
});
|
||||||
|
addServiceWindow.loadFile(path.resolve(resourcesDir, 'add-service.html'))
|
||||||
|
.catch(console.error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function sendServices() {
|
||||||
|
window.webContents.send('services', config.services, selectedService);
|
||||||
|
}
|
||||||
|
|
||||||
|
function setActiveService(index) {
|
||||||
|
selectedService = index;
|
||||||
|
}
|
||||||
|
|
||||||
|
app.on('ready', createWindow);
|
||||||
Loading…
Reference in New Issue
Block a user