feat: add windows-titlebar (#11)

xudafeng · moshangqi · web-flow · commit d074072f5a56 · 2023-02-07T21:30:30.000+08:00
Co-authored-by: moshangqi &lt;zengwanpeng@qq.com&gt;
diff --git a/src/app.ts b/src/app.ts
@@ -16,6 +16,8 @@ export default class App {
         require('./updator')(this);
       } else if (action === 'electron-webview-schedule') {
         require('./webview-schedule')(this);
+      } else if (action === 'electron-windows-titlebar') {
+        require('./windows-titlebar')(this);
       }
     });
   }
diff --git a/src/windows-titlebar/index.ts b/src/windows-titlebar/index.ts
@@ -0,0 +1,41 @@
+'use strict';
+
+const url = require('url');
+const path = require('path');
+const _ = require('lodash');
+const { ipcMain } = require('electron');
+const windowTitleBar = require('electron-windows-titlebar');
+
+module.exports = (app: any) => {
+  const windowUrl = url.format({
+    pathname: path.join(__dirname, 'renderer', 'main.html'),
+    protocol: 'file:',
+  });
+  const loadingUrl = url.format({
+    pathname: path.join(__dirname, 'renderer', 'loading.html'),
+    protocol: 'file:',
+  });
+
+  const window = app.windowManager.create({
+    name: Date.now(),
+    loadingView: {
+      url: loadingUrl,
+    },
+    browserWindow: {
+      webPreferences: {
+        nodeIntegration: true,
+        webSecurity: true,
+        webviewTag: true,
+        preload: path.join(__dirname, 'renderer', 'preload.js'),
+      },
+    },
+  });
+  const hwnd = window?.getNativeWindowHandle();
+  ipcMain.on('switch-theme-mode', (_, params) => {
+    const { dark } = params;
+    if (hwnd) {
+      dark ? windowTitleBar.switchDarkMode(hwnd) : windowTitleBar.switchLightMode(hwnd);
+    }
+  });
+  window.loadURL(windowUrl);
+};
diff --git a/src/windows-titlebar/renderer/loading.html b/src/windows-titlebar/renderer/loading.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Loading</title>
+  <style>
+    ::-webkit-scrollbar {
+      display: none;
+    }
+    * {
+      overflow: hidden;
+      box-sizing: border-box;
+    }
+    html,
+    body {
+      background-color: white;
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+    }
+    .wrapper {
+      text-align: center;
+      padding-top: 100px;
+    }
+  </style>
+</head>
+<body>
+  <div class="wrapper">
+    <div class="loading">
+      loading...
+    </div>
+  </div>
+</body>
+</html>
diff --git a/src/windows-titlebar/renderer/main.html b/src/windows-titlebar/renderer/main.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Addon Demo</title>
+  </head>
+  <body>
+    <h1>Titlebar Addon Demo</h1>
+    <p>Print handle of current window <span id="electron-window"></span></p>
+    <button id="switch-dark-mode">switch dark mode</button>
+    <button id="switch-light-mode">switch light mode</button>
+  </body>
+</html>
diff --git a/src/windows-titlebar/renderer/preload.js b/src/windows-titlebar/renderer/preload.js
@@ -0,0 +1,23 @@
+'use strict';
+
+const { contextBridge, ipcRenderer } = require('electron');
+
+contextBridge.exposeInMainWorld('electron', {
+  ipcRenderer: {
+    send: (channel, ...args) => ipcRenderer.send(channel, ...args),
+  },
+});
+
+window.addEventListener('DOMContentLoaded', () => {
+  document.getElementById('switch-dark-mode').addEventListener('click', () => {
+    ipcRenderer.send('switch-theme-mode', {
+      dark: true,
+    });
+  });
+
+  document.getElementById('switch-light-mode').addEventListener('click', () => {
+    ipcRenderer.send('switch-theme-mode', {
+      dark: false,
+    });
+  });
+});

Original file line number	Diff line number	Diff line change
`@@ -16,6 +16,8 @@ export default class App {`
`16`	`16`	`require('./updator')(this);`
`17`	`17`	`} else if (action === 'electron-webview-schedule') {`
`18`	`18`	`require('./webview-schedule')(this);`
	`19`	`+ } else if (action === 'electron-windows-titlebar') {`
	`20`	`+ require('./windows-titlebar')(this);`
`19`	`21`	`}`
`20`	`22`	`});`
`21`	`23`	`}`