Skip to content

Commit

Permalink
Cleaned up the code, added some features
Browse files Browse the repository at this point in the history
  • Loading branch information
NotZoeyDev committed Jul 14, 2018
1 parent 94013e0 commit c1e7f68
Show file tree
Hide file tree
Showing 8 changed files with 240 additions and 66 deletions.
43 changes: 40 additions & 3 deletions src/app.css
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,20 @@ body {
margin: 0px;
overflow: hidden;
background-color: #212121;
font-family: "Arial";
}

.controls {
section {
position: fixed;
z-index: 2;
pointer-events: none;
}

.controls {
z-index: 3;
display: flex;
justify-content: space-between;
pointer-events: auto;
}

.controls button {
Expand All @@ -25,7 +33,6 @@ body {
margin: 0px;
background-color: transparent;
font-size: 3em;
font-family: "Arial";
transition: background-color .2s, filter .2s;
cursor: pointer;
filter: opacity(5%);
Expand All @@ -38,4 +45,34 @@ body {

img {
object-fit: contain;
}
filter: drop-shadow(0px 0px 10px #000);
}

.background {
filter: blur(15px);
z-index: 1;
}

.background img {
object-fit: cover;
}

.info[data-show="false"] {
display: none;
}

.info {
bottom: 0px;
z-index: 4;
width: auto;
height: auto;
margin: 10px;
}

.info p {
margin: 0px;
padding: 5px;
color: white;
background-color: rgba(0, 0, 0, 0.50);
}

16 changes: 13 additions & 3 deletions src/app.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,31 @@
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Manga Reader</title>
<title>MangaReader</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="app.css" />
</head>

<body>
<section class="info" data-show="false">
<p class="filename"></p>
<p class="folder"></p>
</section>

<section class="controls">
<button class="left" onclick="previousFile()"><</button>
<button class="right" onclick="nextFile()">></button>
<button class="left"><</button>
<button class="right">></button>
</section>

<section class="container">
<img id="image" draggable="false" />
</section>

<section class="background">
<img id="blur" draggable="false" />
</section>


<script src="app.js"></script>
</body>
</html>
70 changes: 11 additions & 59 deletions src/app.js
Original file line number Diff line number Diff line change
@@ -1,64 +1,16 @@
/*
App code
Main code used for the viewer
All the components take cares of themselves, no need for extra code here
By Zoey Désautels
*/

// Some imports lol
// Imports
const remote = require('electron').remote;
const {dialog, BrowserWindow} = remote;
const fs = require('fs');

// Some variables
let AppWindow = remote.getCurrentWindow();
let files = [];
let index = 0;

// Load/set the picture
function setPicture() {
document.querySelector("#image").src = files[index];
}

function setupKeys() {
document.addEventListener("keydown", (event) => {
let key = event.key;
if(key == "ArrowLeft") previousFile();
if(key == "ArrowRight") nextFile();
if(key == "p") openFolder();
if(key == "f") toggleFullscreen();
});
}

function toggleFullscreen() {
AppWindow.isFullScreen() ? AppWindow.setFullScreen(false) : AppWindow.setFullScreen(true);
}

function nextFile() {
index = files.length == index + 1 ? 0 : index + 1;
setPicture();
}

function previousFile() {
index = -1 == index - 1 ? files.length - 1 : index - 1;
setPicture();
}

// Open a folder
function openFolder() {
index = 0;
files = [];
dialog.showOpenDialog(AppWindow, {
properties: ["openDirectory"]
}, (filePaths, bookmarks) => {
fs.readdir(filePaths[0], (err, _files) => {
for(let file of _files) {
files.push(`${filePaths[0]}/${file}`);
}
_files.length == 0 ? openFolder() : setPicture();
});
});
}

document.addEventListener('DOMContentLoaded', () => {
openFolder();
setupKeys();
});
const {dialog, BrowserWindow, shell, clipboard} = remote;
const fs = require('fs'), path = require('path');

// Load the components
const Window = new (require('./components/Window.js'));
const ImageViewer = new (require('./components/ImageViewer.js'));
const ControlsBox = new (require('./components/ControlsBox.js'));
const InfoBox = new (require('./components/InfoBox.js'));
8 changes: 8 additions & 0 deletions src/components/ControlsBox.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
module.exports = class ControlsBox {
constructor() {
let controlsContainer = document.querySelector('.controls');

controlsContainer.querySelector('.left').addEventListener('click', () => ImageViewer.loadPreviousPage());
controlsContainer.querySelector('.right').addEventListener('click', () => ImageViewer.loadNextPage());
}
}
91 changes: 91 additions & 0 deletions src/components/ImageViewer.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
/*
ImageViewer component
By Zoey Désautels, 2018
*/

module.exports = class ImageViewer {
constructor() {
// The two containers we use
this.viewer = document.querySelector("#image");
this.background = document.querySelector("#blur");

// Variables
this.index;
this.files;
this.folder;
}

// Load the image file
loadPage() {
this.viewer.src = this.files[this.index];
this.background.src = this.files[this.index];

InfoBox.setInfo();
Window.setTitle();
}

// Load the next page
loadNextPage() {
this.index = this.files.length == this.index + 1 ? 0 : this.index + 1;
this.loadPage();
}

// Load the previous page
loadPreviousPage() {
this.index = -1 == this.index - 1 ? this.files.length - 1 : this.index - 1;
this.loadPage();
}

// Load a folder
loadFolder() {
// Reset the index and files variables
this.index = 0;
this.files = [];

dialog.showOpenDialog(Window.AppWindow, {
properties: ["openDirectory"]
}, (filePaths, bookmarks) => {
if(filePaths && filePaths.length > 0) {
fs.readdir(filePaths[0], (err, _files) => {
this.folder = filePaths[0];

// Filter out non-image files
for(let file of _files) {
let filePath = `${this.folder}/${file}`;
let fileStat = fs.statSync(filePath);

// Check if the current "file" is a file
if(fileStat.isFile()) {
let imagesExtension = [
".png", ".jpg", ".gif"
];
let fileExtension = path.extname(filePath);

// Check that the file is an image
if(imagesExtension.includes(fileExtension)) this.files.push(filePath);
}
}

// Sort files via their timestamp
this.files.sort((a, b) => {
return fs.statSync(a).mtime.getTime() - fs.statSync(b).mtime.getTime();
});

// Check if we have any files to load
this.files.length == 0 ?
dialog.showMessageBox(Window.AppWindow, {
type: "error",
title: "Error",
message: "No images were found in the selected folder."
}, () => {
this.loadFolder();
})
: this.loadPage();
});
} else {
remote.app.exit(0);
}
});

}
}
17 changes: 17 additions & 0 deletions src/components/InfoBox.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
module.exports = class InfoBox {
constructor() {
this.infobox = document.querySelector(".info");

this.filename = this.infobox.querySelector(".filename");
this.foldername = this.infobox.querySelector(".folder");
}

setInfo() {
this.filename.textContent = path.basename(ImageViewer.files[ImageViewer.index]);
this.foldername.textContent = path.normalize(ImageViewer.folder);
}

toggle() {
this.infobox.dataset.show = this.infobox.dataset.show == "true" ? "false" : "true";
}
}
58 changes: 58 additions & 0 deletions src/components/Window.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
/*
Window component, mostly take cares of document stuff
By Zoey Désautels
*/

module.exports = class Window {
constructor() {
this.AppWindow = remote.getCurrentWindow(); // Some electron thing

document.addEventListener('DOMContentLoaded', () => {
ImageViewer.loadFolder();
this.loadShortcuts();
});
}

// Toggle fullscreen
toggleFullscreen() {
this.AppWindow.isFullScreen() ? this.AppWindow.setFullScreen(false) : this.AppWindow.setFullScreen(true);
}

// Set/update the app title
setTitle() {
this.AppWindow.setTitle(`MangaReader - ${path.normalize(ImageViewer.files[ImageViewer.index])} - ${ImageViewer.index + 1}/${ImageViewer.files.length}`);
}

loadShortcuts() {
const Shortcuts = {
"ArrowLeft": () => ImageViewer.loadPreviousPage(),
"ArrowRight": () => ImageViewer.loadNextPage(),
"Enter": () => shell.showItemInFolder(files[index]),

"Home": () => {
ImageViewer.index = 0;
ImageViewer.loadPage();
},
"End": () => {
ImageViewer.index = ImageViewer.files.length - 1;
ImageViewer.loadPage();
},
" ": () => {
InfoBox.toggle();
},

"p": () => ImageViewer.loadFolder(),
"f": () => this.toggleFullscreen(),
"c": () => clipboard.writeImage(files[index])
};

document.addEventListener("keydown", (event) => {
let key = event.key;
if(Shortcuts[key]) Shortcuts[key]();
});

document.addEventListener("wheel", (event) => {
event.deltaY > 0 ? previousFile() : nextFile();
});
}
}
3 changes: 2 additions & 1 deletion src/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,9 @@ let MainWindow;

// Create Window
function CreateMainWindow() {
MainWindow = new BrowserWindow({});
MainWindow = new BrowserWindow({backgroundColor: "#212121", title: "MangaReader"});
MainWindow.setMenu(null);
MainWindow.webContents.openDevTools();
MainWindow.loadFile("src/app.html");
}

Expand Down

0 comments on commit c1e7f68

Please sign in to comment.