Initial commit
This commit is contained in:
commit
4e52fb86d8
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
|
||||
node_modules/
|
||||
11
Service.js
Normal file
11
Service.js
Normal file
@ -0,0 +1,11 @@
|
||||
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;
|
||||
1
arisucloud.svg
Normal file
1
arisucloud.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.6 KiB |
272
index.html
Normal file
272
index.html
Normal file
@ -0,0 +1,272 @@
|
||||
<!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
Normal file
56
main.js
Normal file
@ -0,0 +1,56 @@
|
||||
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)
|
||||
1210
package-lock.json
generated
Normal file
1210
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
11
package.json
Normal file
11
package.json
Normal file
@ -0,0 +1,11 @@
|
||||
{
|
||||
"name": "first-app",
|
||||
"version": "1.0.0",
|
||||
"main": "main.js",
|
||||
"scripts": {
|
||||
"start": "electron ."
|
||||
},
|
||||
"devDependencies": {
|
||||
"electron": "^5.0.1"
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user