ahkohd · April 30, 2020 20:42 · Apr 30, 2020
diff --git a/index.html b/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Hello World!</title>
+    <link rel="stylesheet" type="text/css" href="./styles.css">
+  </head>
+  <body>
+    <h1>Fade In/Out Window Example</h1>
+
+    <div>
+      <button id="fade-in-out">Fade Out / In</button>
+    </div>
+
+    <script>
+      // You can also require other files to run in this process
+      require('./renderer.js')
+    </script>
+  </body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,44 @@
+// Modules to control application life and create native browser window
+const {app, BrowserWindow} = require('electron')
+
+function createWindow () {
+  // Create the browser window.
+  const mainWindow = new BrowserWindow({
+    width: 800,
+    height: 600,
+    webPreferences: {
+      nodeIntegration: true
+    }
+  })
+
+  // and load the index.html of the app.
+  mainWindow.loadFile('index.html')
+
+  // Open the DevTools.
+  // mainWindow.webContents.openDevTools()
+}
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.on('ready', createWindow)
+
+// Quit when all windows are closed.
+app.on('window-all-closed', function () {
+  // On OS X it is common for applications and their menu bar
+  // to stay active until the user quits explicitly with Cmd + Q
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+app.on('activate', function () {
+  // On OS X it's common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+  if (BrowserWindow.getAllWindows().length === 0) {
+    createWindow()
+  }
+})
+
+// In this file you can include the rest of your app's specific main process
+// code. You can also put them in separate files and require them here.
diff --git a/preload.js b/preload.js
@@ -0,0 +1 @@
+// Empty
diff --git a/renderer.js b/renderer.js
@@ -0,0 +1,39 @@
+const remote = require('electron').remote
+
+const fadeWindowOut =  (
+    _window,
+    step = 0.1,
+    fadeEveryXSeconds = 10
+  ) =>  {
+    let opacity = _window.getOpacity();
+    const interval = setInterval(() => {
+      if (opacity <= 0) window.clearInterval(interval);
+      _window.setOpacity(opacity);
+      opacity -= step;
+    }, fadeEveryXSeconds);
+    return interval;
+  }
+
+const fadeWindowIn = (
+    _window,
+    step = 0.1,
+    fadeEveryXSeconds = 10
+  )  => {
+    let opacity = _window.getOpacity();
+    const interval = setInterval(() => {
+      if (opacity >= 1) window.clearInterval(interval);
+      _window.setOpacity(opacity);
+      opacity += step;
+    }, fadeEveryXSeconds);
+    return interval;
+  }
+
+
+
+document.getElementById('fade-in-out').onclick = () => {
+  // fade out this window...
+   fadeWindowOut(remote.getCurrentWindow(), 0.1, 2);
+
+   // 1000 miliseconds later, fade it in...
+   setTimeout(() => fadeWindowIn(remote.getCurrentWindow(), 0.1, 2), 1000)
+} 
diff --git a/styles.css b/styles.css
@@ -0,0 +1 @@
+/* Empty */
No results found