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

Rename the project to browser-views and more development

Browse Source
This commit is contained in:
Alice Gaudon 2019-10-13 22:59:28 +02:00
parent cca69fa26a
commit 4d536eb43f
10 changed files with 548 additions and 342 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
Service.js
View File

@ -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
View File

@ -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
View File

@ -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)

7
package.json
View File

@ -1,9 +1,10 @@
{
"name": "first-app",
"name": "browser-views",
"version": "1.0.0",
"main": "main.js",
"main": "src/main.js",
"scripts": {
"start": "electron ."
"start": "electron .",
"dev": "electron . --dev"
},
"devDependencies": {
"electron": "^5.0.1"

11
resources/add-service.html Normal file
View 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
View 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
View 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
View 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
View 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
View 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);