custom-electron-titlebarといろいろと

diff --git a/package.json b/package.json
index 7f72619..63f5734 100644 (file)
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "node": ">=14.16.0"
   },
   "dependencies": {
+    "custom-electron-titlebar": "^3.2.7"
   },
   "devDependencies": {
     "electron": "12.0.9"

diff --git a/src/main.js b/src/main.js
index 66132d8..1e5c49a 100644 (file)
--- a/src/main.js
+++ b/src/main.js
@@ -1,18 +1,140 @@
-/* #Node.js */
 //アプリケーションを制御し、ネイティブなブラウザウィンドウを作成するモジュール
-const { app, BrowserWindow, Notification, globalShortcut } = require('electron')
+const { app, Menu, BrowserWindow, dialog, Notification, globalShortcut } = require('electron')
 const path = require('path')
+const fs = require('fs');
+app.setName("CommentGenerator-Re")
 let window
 
+// 実行環境がmacOSならtrue
+const isMac = (process.platform === 'darwin');  // 'darwin' === macOS
+
+//------------------------------------
+// About Panelの内容をカスタマイズする
+//------------------------------------
+const aboutPanel = function(){
+  dialog.showMessageBox({
+    title: `${app.name}について`,
+    message: `${app.name} ${app.getVersion()}`,
+    detail: `Created by Neko7sora\n©‌​‌‌​​​‌‌​​‌‌​‌​ ‌​​‌​‌​​‌​​‌​​​​2‌‌​​‌​​​‌​​​‌‌​​0‌​​‌​​​​‌​​​‌‌​‌2​‌‌‌‌​‌‌​‌‌‌‌‌​‌‌‌​‌‌‌​​‌​‌‌1 CommentGenerator-Re`,
+    buttons: [],
+    //icon: resolve(__dirname, 'asset/image/icon.png')
+  });
+}
+
+//------------------------------------
+// メニュー
+//------------------------------------
+// メニューを準備する
+/*
+const template = Menu.buildFromTemplate([
+  ...(isMac ? [{
+      label: app.name,
+      submenu: [
+        {role:'about',      label:`${app.name}について` },
+        {type:'separator'},
+        {role:'services',   label:'サービス'},
+        {type:'separator'},
+        {role:'hide',       label:`${app.name}を隠す`},
+        {role:'hideothers', label:'ほかを隠す'},
+        {role:'unhide',     label:'すべて表示'},
+        {type:'separator'},
+        {role:'quit',       label:`${app.name}を終了`}
+      ]
+    }] : []),
+  {
+    label: 'ファイル',
+    submenu: [
+      isMac ? {role:'close', label:'ウィンドウを閉じる'} : {role:'quit', label:'終了'}
+    ]
+  },
+  {
+    label: '編集',
+    submenu: [
+      {role:'undo',  label:'元に戻す'},
+      {role:'redo',  label:'やり直す'},
+      {type:'separator'},
+      {role:'cut',   label:'切り取り'},
+      {role:'copy',  label:'コピー'},
+      {role:'paste', label:'貼り付け'},
+      ...(isMac ? [
+          {role:'pasteAndMatchStyle', label:'ペーストしてスタイルを合わせる'},
+          {role:'delete',    label:'削除'},
+          {role:'selectAll', label:'すべてを選択'},
+          {type:'separator' },
+          {
+            label: 'スピーチ',
+            submenu: [
+              {role:'startSpeaking', label:'読み上げを開始'},
+              {role:'stopSpeaking',  label:'読み上げを停止'}
+            ]
+          }
+        ] : [
+          {role:'delete',    label:'削除'},
+          {type:'separator'},
+          {role:'selectAll', label:'すべてを選択'}
+        ])
+     ]
+  },
+  {
+    label: '表示',
+    submenu: [
+      {role:'reload',         label:'再読み込み'},
+      {role:'forceReload',    label:'強制的に再読み込み'},
+      {role:'toggleDevTools', label:'開発者ツールを表示'},
+      {type:'separator'},
+      {role:'resetZoom',      label:'実際のサイズ'},
+      {role:'zoomIn',         label:'拡大'},
+      {role:'zoomOut',        label:'縮小'},
+      {type:'separator'},
+      {role:'togglefullscreen', label:'フルスクリーン'}
+    ]
+  },
+  {
+    label: 'ウィンドウ',
+    submenu: [
+      {role:'minimize', label:'最小化'},
+      {role:'zoom',     label:'ズーム'},
+      ...(isMac ? [
+           {type:'separator'} ,
+           {role:'front',  label:'ウィンドウを手前に表示'},
+           {type:'separator'},
+           {role:'window', label:'ウィンドウ'}
+         ] : [
+           {role:'close',  label:'閉じる'}
+         ])
+    ]
+  },
+  {
+    label:'ヘルプ',
+    submenu: [
+      {label:`${app.name} ヘルプ`},    // ToDo
+      ...(isMac ? [ ] : [
+        {type:'separator'} ,
+        {click: aboutPanel ,  label:`${app.name}について` }
+      ])
+    ]
+  }
+]);
+*/
+// メニューを適用する
+//Menu.setApplicationMenu(template);
+
+
 function createWindow() {
   //ブラウザウィンドウを作成します。
   window = new BrowserWindow({
     width: 800,
     height: 600,
+    frame: false,
     webPreferences: {
-      preload: path.join(__dirname, 'preload.js')
-    }
+      preload: path.join(__dirname, 'preload.js'),
+      enableRemoteModule: true,
+      nodeIntegration: false,
+    },
+    titleBarStyle: "hidden"//theme
   })
+  const menu = Menu.buildFromTemplate(exampleMenuTemplate());
+  Menu.setApplicationMenu(menu);
   //アプリのindex.htmlを読み込みます。
   window.loadFile('index.html')
 }
@@ -78,7 +200,7 @@ app.whenReady().then(() => {/*
   })
 
 }).then(() => {
-  showNotification()
+  //showNotification()
 })
 
 // 開いているウィンドウがなくなったときにのみ動きます。
@@ -93,6 +215,98 @@ app.on('window-all-closed', () => {
 })
 
 function plugin() {
-  require("./plugin/NavigatorOnLine/index.js")(app, BrowserWindow);
+  require("./plugin/NavigatorOnLine/index.js")(app, BrowserWindow, path);
 }
-plugin()
\ No newline at end of file
+plugin()
+
+const exampleMenuTemplate = () => [
+  {
+    label: "Options",
+    submenu: [
+      {
+        label: "Quit",
+        click: () => app.quit()
+      },
+      {
+        label: "Radio1",
+        type: "radio",
+        checked: true
+      },
+      {
+        label: "Radio2",
+        type: "radio",
+      },
+      {
+        label: "Checkbox1",
+        type: "checkbox",
+        checked: true,
+        click: (item) => {
+          console.log("item is checked? " + item.checked);
+        }
+      },
+      {type: "separator"},
+      {
+        label: "Checkbox2",
+        type: "checkbox",
+        checked: false,
+        click: (item) => {
+          console.log("item is checked? " + item.checked);
+        }
+      },
+      {
+        label: "Radio Test",
+        submenu: [
+          {
+            label: "Sample Checkbox",
+            type: "checkbox",
+            checked: true
+          },
+          {
+            label: "Radio1",
+            checked: true,
+            type: "radio"
+          },
+          {
+            label: "Radio2",
+            type: "radio"
+          },
+          {
+            label: "Radio3",
+            type: "radio"
+          },
+          { type: "separator" },
+                      {
+            label: "Radio1",
+            checked: true,
+            type: "radio"
+          },
+          {
+            label: "Radio2",
+            type: "radio"
+          },
+          {
+            label: "Radio3",
+            type: "radio"
+          }
+        ]
+      },
+      {
+        label: "zoomIn",
+        role: "zoomIn"
+      },
+      {
+        label: "zoomOut",
+        role: "zoomOut"
+      },
+      {
+        label: "Radio1",
+        type: "radio"
+      },
+      {
+        label: "Radio2",
+        checked: true,
+        type: "radio"
+      },
+    ]
+  }
+];
\ No newline at end of file

diff --git a/src/plugin/NavigatorOnLine/index.js b/src/plugin/NavigatorOnLine/index.js
index 7dfea8e..403105f 100644 (file)
--- a/src/plugin/NavigatorOnLine/index.js
+++ b/src/plugin/NavigatorOnLine/index.js
@@ -1,15 +1,18 @@
 module.exports = async (app, BrowserWindow) => {
-let onlineStatusWindow
+    let onlineStatusWindow
 
-function createWindow() {
-    onlineStatusWindow = new BrowserWindow({
-        width: 0, height: 0, show: false
-    })
-    onlineStatusWindow.loadURL(`file://${__dirname}/index.html`)
-    onlineStatusWindow.webContents.openDevTools();
-  }
+    function createWindow() {
+        onlineStatusWindow = new BrowserWindow({
+            width: 0, height: 0, show: false,
+            webPreferences: {
+                sandbox: true
+            }
+        })
+        onlineStatusWindow.loadURL(`file://${__dirname}/index.html`)
+        onlineStatusWindow.webContents.openDevTools();
+    }
 
-app.whenReady().then(() => {
-    createWindow()// <-- function createWindow のやつを動かす。
-})
+    app.whenReady().then(() => {
+        createWindow()// <-- function createWindow のやつを動かす。
+    })
 }
\ No newline at end of file

diff --git a/src/preload.js b/src/preload.js
index 21095c3..bcca39a 100644 (file)
--- a/src/preload.js
+++ b/src/preload.js
@@ -1,7 +1,57 @@
-/* #Node.js */
 // Node.jsのすべてのAPIがプリロードプロセスで利用できます。
 // ！Chrome の拡張機能と同じサンドボックスを持っています。
+
+
+const customTitlebar = require('custom-electron-titlebar');
+
 window.addEventListener('DOMContentLoaded', () => {
+/*
+  const menu = new Menu();
+menu.append(new MenuItem({
+       label: 'Item 1',
+       submenu: [
+               {
+                       label: 'Subitem 1',
+                       click: () => console.log('Click on subitem 1')
+               },
+               {
+                       type: 'separator'
+               }
+       ]
+}));
+
+menu.append(new MenuItem({
+       label: 'Item 2',
+       submenu: [
+               {
+                       label: 'Subitem checkbox',
+                       type: 'checkbox',
+                       checked: true
+               },
+               {
+                       type: 'separator'
+               },
+               {
+                       label: 'Subitem with submenu',
+                       submenu: [
+                               {
+                                       label: 'Submenu &item 1',
+                                       accelerator: 'Ctrl+T'
+                               }
+                       ]
+               }
+       ]
+}));
+
+new customTitlebar.Titlebar({
+  backgroundColor: customTitlebar.Color.fromHex('#444'),
+  menu: menu,
+});
+titlebar.updateBackground(new Color(new RGBA(0, 0, 0, .7)));
+*/
+
+new customTitlebar.Titlebar()
+
     const replaceText = (selector, text) => {
       const element = document.getElementById(selector)
       if (element) element.innerText = text
@@ -10,4 +60,7 @@ window.addEventListener('DOMContentLoaded', () => {
     for (const type of ['chrome', 'node', 'electron']) {
       replaceText(`${type}-version`, process.versions[type])
     }
-  })
\ No newline at end of file
+  })
+
+
+  

diff --git a/src/renderer.js b/src/renderer.js
index 92795d2..363564a 100644 (file)
--- a/src/renderer.js
+++ b/src/renderer.js
@@ -8,4 +8,5 @@ const myNotification = new Notification('Title', {
   myNotification.onclick = () => {
     console.log('Notification clicked')
   }
-*/
\ No newline at end of file
+*/
+