From b31084493eeec38ca71359cb3e65afa8722a5b04 Mon Sep 17 00:00:00 2001 From: Yaser Date: Mon, 13 Jan 2020 17:34:13 +1100 Subject: [PATCH] docs: Added Window Management Fiddle example (#20535) --- .../frameless-window/index.html | 76 +++++++++++++++++++ .../manage-windows/frameless-window/main.js | 56 ++++++++++++++ .../frameless-window/renderer.js | 25 ++++++ .../manage-window-state/index.html | 64 ++++++++++++++++ .../manage-window-state/main.js | 56 ++++++++++++++ .../manage-window-state/renderer.js | 35 +++++++++ .../manage-windows/window-events/index.html | 58 ++++++++++++++ .../manage-windows/window-events/main.js | 56 ++++++++++++++ .../manage-windows/window-events/renderer.js | 48 ++++++++++++ 9 files changed, 474 insertions(+) create mode 100644 docs/fiddles/windows/manage-windows/frameless-window/index.html create mode 100644 docs/fiddles/windows/manage-windows/frameless-window/main.js create mode 100644 docs/fiddles/windows/manage-windows/frameless-window/renderer.js create mode 100644 docs/fiddles/windows/manage-windows/manage-window-state/index.html create mode 100644 docs/fiddles/windows/manage-windows/manage-window-state/main.js create mode 100644 docs/fiddles/windows/manage-windows/manage-window-state/renderer.js create mode 100644 docs/fiddles/windows/manage-windows/window-events/index.html create mode 100644 docs/fiddles/windows/manage-windows/window-events/main.js create mode 100644 docs/fiddles/windows/manage-windows/window-events/renderer.js diff --git a/docs/fiddles/windows/manage-windows/frameless-window/index.html b/docs/fiddles/windows/manage-windows/frameless-window/index.html new file mode 100644 index 000000000000..469c97f27d46 --- /dev/null +++ b/docs/fiddles/windows/manage-windows/frameless-window/index.html @@ -0,0 +1,76 @@ + + + + + Frameless window + + + +
+

Create and Manage Windows

+ +

+ The BrowserWindow module in Electron allows you to create a + new browser window or manage an existing one. +

+ +

+ Each browser window is a separate process, known as the renderer + process. This process, like the main process that controls the life + cycle of the app, has full access to the Node.js APIs. +

+ +

+ Open the + + full API documentation (opens in new window) + + in your browser. +

+
+ +
+
+

Create a frameless window

+
+
+ +
+

+ A frameless window is a window that has no + + "chrome" + + , such as toolbars, title bars, status bars, borders, etc. You can + make a browser window frameless by setting frame to + false when creating the window. +

+ +

+ Windows can have a transparent background, too. By setting the + transparent option to true, you can also + make your frameless window transparent: +

+ 
+var win = new BrowserWindow({
+  transparent: true,
+  frame: false
+})
+ +

+ For more details, see the + + Frameless Window + + documentation. +

+
+
+
+ + + + diff --git a/docs/fiddles/windows/manage-windows/frameless-window/main.js b/docs/fiddles/windows/manage-windows/frameless-window/main.js new file mode 100644 index 000000000000..4fff6140a0a2 --- /dev/null +++ b/docs/fiddles/windows/manage-windows/frameless-window/main.js @@ -0,0 +1,56 @@ +// Modules to control application life and create native browser window +const { app, BrowserWindow } = require('electron') + +// Keep a global reference of the window object, if you don't, the window will +// be closed automatically when the JavaScript object is garbage collected. +let mainWindow + +function createWindow () { + // Create the browser window. + 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() + + // Emitted when the window is closed. + mainWindow.on('closed', function () { + // Dereference the window object, usually you would store windows + // in an array if your app supports multi windows, this is the time + // when you should delete the corresponding element. + mainWindow = null + }) +} + +// 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 (mainWindow === null) { + 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/docs/fiddles/windows/manage-windows/frameless-window/renderer.js b/docs/fiddles/windows/manage-windows/frameless-window/renderer.js new file mode 100644 index 000000000000..42dcf80227c1 --- /dev/null +++ b/docs/fiddles/windows/manage-windows/frameless-window/renderer.js @@ -0,0 +1,25 @@ +const { BrowserWindow } = require('electron').remote +const shell = require('electron').shell + +const framelessWindowBtn = document.getElementById('frameless-window') + +const links = document.querySelectorAll('a[href]') + +framelessWindowBtn.addEventListener('click', (event) => { + const modalPath = 'https://electronjs.org' + let win = new BrowserWindow({ frame: false }) + + win.on('close', () => { win = null }) + win.loadURL(modalPath) + win.show() +}) + +Array.prototype.forEach.call(links, (link) => { + const url = link.getAttribute('href') + if (url.indexOf('http') === 0) { + link.addEventListener('click', (e) => { + e.preventDefault() + shell.openExternal(url) + }) + } +}) diff --git a/docs/fiddles/windows/manage-windows/manage-window-state/index.html b/docs/fiddles/windows/manage-windows/manage-window-state/index.html new file mode 100644 index 000000000000..1a61cb4ee541 --- /dev/null +++ b/docs/fiddles/windows/manage-windows/manage-window-state/index.html @@ -0,0 +1,64 @@ + + + + + Manage window state + + + +
+

Create and Manage Windows

+ +

+ The BrowserWindow module in Electron allows you to create a + new browser window or manage an existing one. +

+ +

+ Each browser window is a separate process, known as the renderer + process. This process, like the main process that controls the life + cycle of the app, has full access to the Node.js APIs. +

+ +

+ Open the + + full API documentation (opens in new window) + + in your browser. +

+
+ +
+
+

Manage window state

+
+
+ + +
+

+ In this demo we create a new window and listen for + move and resize events on it. Click the + demo button, change the new window and see the dimensions and + position update here, above. +

+

+ There are a lot of methods for controlling the state of the window + such as the size, location, and focus status as well as events to + listen to for window changes. Visit the + + documentation (opens in new window) + + for the full list. +

+
+
+
+ + + + diff --git a/docs/fiddles/windows/manage-windows/manage-window-state/main.js b/docs/fiddles/windows/manage-windows/manage-window-state/main.js new file mode 100644 index 000000000000..4fff6140a0a2 --- /dev/null +++ b/docs/fiddles/windows/manage-windows/manage-window-state/main.js @@ -0,0 +1,56 @@ +// Modules to control application life and create native browser window +const { app, BrowserWindow } = require('electron') + +// Keep a global reference of the window object, if you don't, the window will +// be closed automatically when the JavaScript object is garbage collected. +let mainWindow + +function createWindow () { + // Create the browser window. + 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() + + // Emitted when the window is closed. + mainWindow.on('closed', function () { + // Dereference the window object, usually you would store windows + // in an array if your app supports multi windows, this is the time + // when you should delete the corresponding element. + mainWindow = null + }) +} + +// 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 (mainWindow === null) { + 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/docs/fiddles/windows/manage-windows/manage-window-state/renderer.js b/docs/fiddles/windows/manage-windows/manage-window-state/renderer.js new file mode 100644 index 000000000000..8d054f8358bc --- /dev/null +++ b/docs/fiddles/windows/manage-windows/manage-window-state/renderer.js @@ -0,0 +1,35 @@ +const { BrowserWindow } = require('electron').remote +const shell = require('electron').shell + +const manageWindowBtn = document.getElementById('manage-window') + +const links = document.querySelectorAll('a[href]') + +let win + +manageWindowBtn.addEventListener('click', (event) => { + const modalPath = 'https://electronjs.org' + win = new BrowserWindow({ width: 400, height: 275 }) + + win.on('resize', updateReply) + win.on('move', updateReply) + win.on('close', () => { win = null }) + win.loadURL(modalPath) + win.show() + + function updateReply () { + const manageWindowReply = document.getElementById('manage-window-reply') + const message = `Size: ${win.getSize()} Position: ${win.getPosition()}` + manageWindowReply.innerText = message + } +}) + +Array.prototype.forEach.call(links, (link) => { + const url = link.getAttribute('href') + if (url.indexOf('http') === 0) { + link.addEventListener('click', (e) => { + e.preventDefault() + shell.openExternal(url) + }) + } +}) diff --git a/docs/fiddles/windows/manage-windows/window-events/index.html b/docs/fiddles/windows/manage-windows/window-events/index.html new file mode 100644 index 000000000000..806346e52aa9 --- /dev/null +++ b/docs/fiddles/windows/manage-windows/window-events/index.html @@ -0,0 +1,58 @@ + + + + + Window events + + + +
+

Create and Manage Windows

+ +

+ The BrowserWindow module in Electron allows you to create a + new browser window or manage an existing one. +

+ +

+ Each browser window is a separate process, known as the renderer + process. This process, like the main process that controls the life + cycle of the app, has full access to the Node.js APIs. +

+ +

+ Open the + + full API documentation (opens in new window) + + in your browser. +

+
+ +
+
+

Window events

+
+
+ + +
+

+ In this demo, we create a new window and listen for + blur event on it. Click the demo button to create a new + modal window, and switch focus back to the parent window by clicking + on it. You can click the Focus on Demo button to switch focus + to the modal window again. +

+
+
+
+ + + + diff --git a/docs/fiddles/windows/manage-windows/window-events/main.js b/docs/fiddles/windows/manage-windows/window-events/main.js new file mode 100644 index 000000000000..4fff6140a0a2 --- /dev/null +++ b/docs/fiddles/windows/manage-windows/window-events/main.js @@ -0,0 +1,56 @@ +// Modules to control application life and create native browser window +const { app, BrowserWindow } = require('electron') + +// Keep a global reference of the window object, if you don't, the window will +// be closed automatically when the JavaScript object is garbage collected. +let mainWindow + +function createWindow () { + // Create the browser window. + 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() + + // Emitted when the window is closed. + mainWindow.on('closed', function () { + // Dereference the window object, usually you would store windows + // in an array if your app supports multi windows, this is the time + // when you should delete the corresponding element. + mainWindow = null + }) +} + +// 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 (mainWindow === null) { + 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/docs/fiddles/windows/manage-windows/window-events/renderer.js b/docs/fiddles/windows/manage-windows/window-events/renderer.js new file mode 100644 index 000000000000..63326c33f41e --- /dev/null +++ b/docs/fiddles/windows/manage-windows/window-events/renderer.js @@ -0,0 +1,48 @@ +const { BrowserWindow } = require('electron').remote +const shell = require('electron').shell + +const listenToWindowBtn = document.getElementById('listen-to-window') +const focusModalBtn = document.getElementById('focus-on-modal-window') + +const links = document.querySelectorAll('a[href]') + +let win + +listenToWindowBtn.addEventListener('click', () => { + const modalPath = 'https://electronjs.org' + win = new BrowserWindow({ width: 600, height: 400 }) + + const hideFocusBtn = () => { + focusModalBtn.classList.add('disappear') + focusModalBtn.classList.remove('smooth-appear') + focusModalBtn.removeEventListener('click', clickHandler) + } + + const showFocusBtn = (btn) => { + if (!win) return + focusModalBtn.classList.add('smooth-appear') + focusModalBtn.classList.remove('disappear') + focusModalBtn.addEventListener('click', clickHandler) + } + + win.on('focus', hideFocusBtn) + win.on('blur', showFocusBtn) + win.on('close', () => { + hideFocusBtn() + win = null + }) + win.loadURL(modalPath) + win.show() + + const clickHandler = () => { win.focus() } +}) + +Array.prototype.forEach.call(links, (link) => { + const url = link.getAttribute('href') + if (url.indexOf('http') === 0) { + link.addEventListener('click', (e) => { + e.preventDefault() + shell.openExternal(url) + }) + } +})