tabs/index.html

272 lines
7.7 KiB
HTML
Raw Normal View History

2019-08-31 16:14:06 +02:00
<!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>