272 lines
7.7 KiB
HTML
272 lines
7.7 KiB
HTML
|
<!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>
|