名言は配列で持たせて、Math.floor(Math.random() * quotes.length)で表示。background-colorは、classを、ipc通信でindex.js, index.html, setting.html間をやりとりしています。また、初期値は、webstorageから値を取得することで、ipc通信を省略しています。
electron document:http://electron.atom.io/docs/
index.js
'use strict';
// index.js (main process)
// -GUI(renderer process)
// -GUI(renderer process)
// -GUI(renderer process)
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const Menu = electron.Menu;
const dialog = electron.dialog;
const ipcMain = electron.ipcMain;
let mainWindow;
let settingsWindow;
// let backgroundColor = 'skyblue';
let menuTemplate = [{
label: 'MyApp',
submenu: [
{ label: 'About', accelerator: 'CmdOrCtrl+Shift+A', click:
function(){ showAboutDialog(); }},
{ type: 'separator'},
{ label: 'Settings', accelerator: 'CmdOrCtrl+,', click:
function(){ showSettingsWindow(); }},
{ label: 'separator'},
{ label: 'Quit', accelerator: 'CmdOrCtrl+Q', click:
function(){ app.quit(); }},
]
}];
let menu = Menu.buildFromTemplate(menuTemplate);
ipcMain.on('settings_changed', function(event, color){
mainWindow.webContents.send('set_bgcolor', color);
});
// ipcMain.on('bgcolor_changed', function(event, color){
// backgroundColor = color;
// });
// ipcMain.on('get_bgcolor', function(event){
// event.returnValue = backgroundColor;
// });
function showAboutDialog(){
dialog.showMessageBox({
type: 'info',
buttons: ['OK'],
message: 'About This App',
detail: 'This app was created by @hpscript'
});
}
function showSettingsWindow (){
settingsWindow = new BrowserWindow({width: 600, height: 400});
settingsWindow.loadURL('file://' + __dirname + '/settings.html');
// settingsWindow.webContents.openDevTools();
settingsWindow.show();
settingsWindow.on('closed', function(){
settingsWindow = null;
});
}
function createMainWindow (){
Menu.setApplicationMenu(menu);
mainWindow = new BrowserWindow({width: 600, height: 400});
mainWindow.loadURL('file://' + __dirname + '/index.html');
// mainWindow.webContents.openDevTools();
mainWindow.on('closed', function(){
mainWindow = null;
});
}
app.on('ready', function(){
createMainWindow()
});
app.on('window-all-closed', function(){
if (process.platform !== 'darwin'){
app.quit();
}
});
app.on('activate', function(){
if(mainWindow === null ){
createMainWindow();
}
});
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Quotes!</title>
<style>
body{
font-family: Verdana, sans-serif;
padding: 10px;
background: skyblue;
}
p {
color: #fff;
font-size: 36px;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p id="quote">Just do it!</p>
<script>
'use strict';
const electron = require('electron');
const ipcRenderer = electron.ipcRenderer;
const remote = electron.remote;
const Menu = remote.Menu;
const MenuItem = remote.MenuItem;
const shell = remote.shell;
let color = localStorage.getItem('color') ?
localStorage.getItem('color') : 'skyblue';
setBackgroundColor(color);
let menu = new Menu();
menu.append(new MenuItem({ label: 'Skyblue', click: function(){
setBackgroundColor('skyblue');
}}));
menu.append(new MenuItem({ label: 'Tomato', click: function(){
setBackgroundColor('tomato');
}}));
menu.append(new MenuItem({ label: 'Slate Gray', click: function(){
setBackgroundColor('slategray');
}}));
window.addEventListener('contextmenu', function(e){
e.preventDefault();
menu.popup(remote.getCurrentWindow());
});
function setBackgroundColor(color){
document.body.style.backgroundColor = color;
localStorage.setItem('color', color);
// ipcRenderer.send('bgcolor_changed', color);
}
const quote = document.getElementById('quote');
const quotes = [
'Just do it!',
'Done is better than perfect',
'Stay hungry, stay foolish',
'ask, do not tell',
'focus on the user',
'keep trying',
'nothing is impossible',
'that which is measured, improves',
];
window.addEventListener('click', function(){
quote.innerHTML = quotes[Math.floor(Math.random() * quotes.length)];
});
ipcRenderer.on('set_bgcolor', function(event, color){
setBackgroundColor(color);
});
setTimeout(function(){
let notification = new Notification(
'Quote!',
{ body: 'Visit our website!' }
);
notification.onclick = function (){
shell.openExternal('http://google.com');
}
},3000);
</script>
</body>
</html>
setting.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Settings</title>
<style>
body{
font-family: Verdana, sans-serif;
padding: 10px;
background: #eee;
}
h1 {
font-size: 16px;
margin: 0;
padding: 0 0 10px 0;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
ul > li {
font-size: 14px;
padding: 3px 0;
}
</style>
</head>
<body>
<h1>Background Color</h1>
<ul>
<li><label><input type="radio" name="colors" value="skyblue">Skyblue</label></li>
<li><label><input type="radio" name="colors" value="tomato">Tomato</label></li>
<li><label><input type="radio" name="colors" value="slategray">Slate Gray</label></li>
</ul>
<script>
'use strict';
const ipcRenderer = require('electron').ipcRenderer;
// let currentColor = ipcRenderer.sendSync('get_bgcolor');
let currentColor = localStorage.getItem('color');
let colors = document.getElementsByName('colors');
for (let i = 0; i < colors.length; i++){
if (currentColor === colors[i].value){
colors[i].checked = true;
}
colors[i].addEventListener('change', function(){
let color = this.value;
// console.log(color);
// settings.html -> index.js -> index.html
// ipc module
ipcRenderer.send('settings_changed', color);
});
}
</script>
</body>
</html>