mlaurencin/index.html Secret

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body class="dark">
    <header>
      <div class="ApplicationHeader">
          <span class="ApplicationTitle">Midi Controller Mapping</span>
          <span class="close" id="close-btn" title="close">C</span>
          <span class="maximize" id="max-btn" title="maximize">[]</span>
          <span class="minimize" id="min-btn" title="minimize">_</span>
      </div>
    </header>

    <button class="" id="check-btn" title="check"> Check Maximized </button>

    <!-- You can also require other files to run in this process -->
    <script src="./renderer.js"></script>
  </body>
  <style type="text/css">
    header {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        padding: 2px 5px;
        position: absolute;
        top:0;
        left:0;
        right:0px;
        height:18px;
        -webkit-app-region: drag;
    }

    body, html {
        width: 100%;
        height: 100%;
        overflow:hidden;
        cursor: default;
    }

    span.minimize {
          float: right;
          height: 17px;
          width: 30px;
          margin-top: -3px;
          border-bottom-left-radius: 5px;
          -webkit-app-region: no-drag;
    }
    span.maximize {
        float: right;
        height: 17px;
        width: 30px;
        margin-top: -3px;
        -webkit-app-region: no-drag;
    }
    span.close {
        float: right;
        height: 17px;
        width: 30px;
        margin-top: -3px;
        border-bottom-right-radius: 5px;
        -webkit-app-region: no-drag;
    }
    body.dark header {
        border-bottom:1px solid #3d3d3d;
        background-color: #292a2d;
    }

    body.dark {
        color: #7d7d7d;
    }

    body.dark span.close {
        border: 1px solid rgba(255,255,255,0.1);
    }

    body.dark span.close:hover {
        background-color: rgba(255,255,255,0.1);
    }

    body.dark span.minimize {
        border: 1px solid rgba(255,255,255,0.1);
    }

    body.dark span.minimize:hover {
        background-color: rgba(255,255,255,0.1);
    }

    body.dark span.maximize {
        border: 1px solid rgba(255,255,255,0.1);
    }

    body.dark span.maximize:hover {
        background-color: rgba(255,255,255,0.1);
    }
    button { /* https://stackoverflow.com/questions/32314722/how-to-place-a-button-in-the-middle-of-the-page-using-html-and-css */
      height: 50px;
      width: 100px;
      position: absolute;
      margin: -25px 0 0 -50px; /* //half height and half width */
      left: 50%;
      top: 50%;
      background-color: aquamarine;
      border-color: #7d7d7d;
      color: darkblue;
    }
  </style>
</html>

## main.js
const { app, BrowserWindow, ipcMain } = require('electron');
app.on('ready', function() {
    const window = new BrowserWindow({
        frame: false,
        thickFrame: false,
        //transparent: true,
        width: 600,
        height: 600,
        webPreferences: {
          nodeIntegration: true,
          enableRemoteModule: true,
          contextIsolation: false
        }
    });
    window.loadFile('index.html');
    window.show();
    window.webContents.openDevTools();
});

ipcMain.on('isMaximized', (e, arg) => {
    console.log(arg)
    //console.log('acquiring current window')
    //console.log(BrowserWindow.getAllWindows().length)

    e.returnValue = BrowserWindow.getAllWindows()[0].isMaximized();
})
ipcMain.on('Maximize', (e, arg) => {
  console.log("maximize called" + arg);
  //console.log('acquiring current window')
  //console.log(BrowserWindow.getAllWindows().length)

  e.returnValue = BrowserWindow.getAllWindows()[0].maximize();
})
ipcMain.on('Minimize', (e, arg) => {
  console.log("minimize called" + arg)
  //console.log('acquiring current window')
  //console.log(BrowserWindow.getAllWindows().length)

  e.returnValue = BrowserWindow.getAllWindows()[0].minimize();
})
ipcMain.on('Unmaximize', (e, arg) => {
  console.log("unmaximize called" + arg)
  //console.log('acquiring current window')
  //console.log(BrowserWindow.getAllWindows().length)

  e.returnValue = BrowserWindow.getAllWindows()[0].unmaximize();
})
ipcMain.on('Close', (e, arg) => {
  console.log("close called" + arg)
  //console.log('acquiring current window')
  //console.log(BrowserWindow.getAllWindows().length)

  e.returnValue = BrowserWindow.getAllWindows()[0].close();
})

## preload.js
// All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type])
  }
})

## renderer.js
// This file is required by the index.html file and will
// be executed in the renderer process for that window.
// All of the Node.js APIs are available in this process.

const { ipcRenderer } = require('electron');

window.addEventListener('DOMContentLoaded', () => {

    document.getElementById("min-btn").addEventListener("click", function (e) {
        console.log("Minimize");
        console.log(ipcRenderer.sendSync('Minimize', "sent"));
    });

    document.getElementById("max-btn").addEventListener("click", function (e) {
        if (!ipcRenderer.sendSync('isMaximized', "sent")) {
            console.log("Maximize");
            console.log(ipcRenderer.sendSync('Maximize', "sent"));
        } else {
            console.log("Unmaximize");
            console.log(ipcRenderer.sendSync('Unmaximize', "sent"));
        }
    });

    document.getElementById("close-btn").addEventListener("click", function (e) {
        console.log("Close");
        console.log(ipcRenderer.sendSync('Close', "sent"));
    });

  let i = 0;
  document.getElementById("check-btn").addEventListener("click", function (e) {
    console.log(`CLICKED! ${i++} times`);
    console.log(ipcRenderer.sendSync('isMaximized', "sent"));
  });
});

## styles.css
.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 5px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

button + button {
    margin-left: 10px;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Hello World!</title>
	</head>
	<body class="dark">
	<header>
	<div class="ApplicationHeader">
	<span class="ApplicationTitle">Midi Controller Mapping</span>
	<span class="close" id="close-btn" title="close">C</span>
	<span class="maximize" id="max-btn" title="maximize">[]</span>
	<span class="minimize" id="min-btn" title="minimize">_</span>
	</div>
	</header>

	<button class="" id="check-btn" title="check"> Check Maximized </button>

	<!-- You can also require other files to run in this process -->
	<script src="./renderer.js"></script>
	</body>
	<style type="text/css">
	header {
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	padding: 2px 5px;
	position: absolute;
	top:0;
	left:0;
	right:0px;
	height:18px;
	-webkit-app-region: drag;
	}

	body, html {
	width: 100%;
	height: 100%;
	overflow:hidden;
	cursor: default;
	}

	span.minimize {
	float: right;
	height: 17px;
	width: 30px;
	margin-top: -3px;
	border-bottom-left-radius: 5px;
	-webkit-app-region: no-drag;
	}
	span.maximize {
	float: right;
	height: 17px;
	width: 30px;
	margin-top: -3px;
	-webkit-app-region: no-drag;
	}
	span.close {
	float: right;
	height: 17px;
	width: 30px;
	margin-top: -3px;
	border-bottom-right-radius: 5px;
	-webkit-app-region: no-drag;
	}
	body.dark header {
	border-bottom:1px solid #3d3d3d;
	background-color: #292a2d;
	}

	body.dark {
	color: #7d7d7d;
	}

	body.dark span.close {
	border: 1px solid rgba(255,255,255,0.1);
	}

	body.dark span.close:hover {
	background-color: rgba(255,255,255,0.1);
	}

	body.dark span.minimize {
	border: 1px solid rgba(255,255,255,0.1);
	}

	body.dark span.minimize:hover {
	background-color: rgba(255,255,255,0.1);
	}

	body.dark span.maximize {
	border: 1px solid rgba(255,255,255,0.1);
	}

	body.dark span.maximize:hover {
	background-color: rgba(255,255,255,0.1);
	}
	button { /* https://stackoverflow.com/questions/32314722/how-to-place-a-button-in-the-middle-of-the-page-using-html-and-css */
	height: 50px;
	width: 100px;
	position: absolute;
	margin: -25px 0 0 -50px; /* //half height and half width */
	left: 50%;
	top: 50%;
	background-color: aquamarine;
	border-color: #7d7d7d;
	color: darkblue;
	}
	</style>
	</html>
	const { app, BrowserWindow, ipcMain } = require('electron');
	app.on('ready', function() {
	const window = new BrowserWindow({
	frame: false,
	thickFrame: false,
	//transparent: true,
	width: 600,
	height: 600,
	webPreferences: {
	nodeIntegration: true,
	enableRemoteModule: true,
	contextIsolation: false
	}
	});
	window.loadFile('index.html');
	window.show();
	window.webContents.openDevTools();
	});

	ipcMain.on('isMaximized', (e, arg) => {
	console.log(arg)
	//console.log('acquiring current window')
	//console.log(BrowserWindow.getAllWindows().length)

	e.returnValue = BrowserWindow.getAllWindows()[0].isMaximized();
	})
	ipcMain.on('Maximize', (e, arg) => {
	console.log("maximize called" + arg);
	//console.log('acquiring current window')
	//console.log(BrowserWindow.getAllWindows().length)

	e.returnValue = BrowserWindow.getAllWindows()[0].maximize();
	})
	ipcMain.on('Minimize', (e, arg) => {
	console.log("minimize called" + arg)
	//console.log('acquiring current window')
	//console.log(BrowserWindow.getAllWindows().length)

	e.returnValue = BrowserWindow.getAllWindows()[0].minimize();
	})
	ipcMain.on('Unmaximize', (e, arg) => {
	console.log("unmaximize called" + arg)
	//console.log('acquiring current window')
	//console.log(BrowserWindow.getAllWindows().length)

	e.returnValue = BrowserWindow.getAllWindows()[0].unmaximize();
	})
	ipcMain.on('Close', (e, arg) => {
	console.log("close called" + arg)
	//console.log('acquiring current window')
	//console.log(BrowserWindow.getAllWindows().length)

	e.returnValue = BrowserWindow.getAllWindows()[0].close();
	})
	// All of the Node.js APIs are available in the preload process.
	// It has the same sandbox as a Chrome extension.
	window.addEventListener('DOMContentLoaded', () => {
	const replaceText = (selector, text) => {
	const element = document.getElementById(selector)
	if (element) element.innerText = text
	}

	for (const type of ['chrome', 'node', 'electron']) {
	replaceText(`${type}-version`, process.versions[type])
	}
	})
	// This file is required by the index.html file and will
	// be executed in the renderer process for that window.
	// All of the Node.js APIs are available in this process.

	const { ipcRenderer } = require('electron');

	window.addEventListener('DOMContentLoaded', () => {

	document.getElementById("min-btn").addEventListener("click", function (e) {
	console.log("Minimize");
	console.log(ipcRenderer.sendSync('Minimize', "sent"));
	});

	document.getElementById("max-btn").addEventListener("click", function (e) {
	if (!ipcRenderer.sendSync('isMaximized', "sent")) {
	console.log("Maximize");
	console.log(ipcRenderer.sendSync('Maximize', "sent"));
	} else {
	console.log("Unmaximize");
	console.log(ipcRenderer.sendSync('Unmaximize', "sent"));
	}
	});

	document.getElementById("close-btn").addEventListener("click", function (e) {
	console.log("Close");
	console.log(ipcRenderer.sendSync('Close', "sent"));
	});

	let i = 0;
	document.getElementById("check-btn").addEventListener("click", function (e) {
	console.log(`CLICKED! ${i++} times`);
	console.log(ipcRenderer.sendSync('isMaximized', "sent"));
	});
	});
	.button {
	background-color: #4CAF50; /* Green */
	border: none;
	color: white;
	padding: 5px 16px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	}

	button + button {
	margin-left: 10px;
	}