ashpie/tabs
ashpie/tabs
1
0
Fork 0
Code Issues 12 Pull Requests Releases 49 Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Alice Gaudon 2019-08-31 16:14:06 +02:00
commit 4e52fb86d8
7 changed files with 1563 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
node_modules/

11
Service.js Normal file
View 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
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 6.6 KiB

272
index.html Normal file
View 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
View 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
View File

File diff suppressed because it is too large Load Diff

11
package.json Normal file
View File

@ -0,0 +1,11 @@
{
"name": "first-app",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"devDependencies": {
"electron": "^5.0.1"
}
}