From 1b61fe780e206248fa39cc5f4c617f82563aecb7 Mon Sep 17 00:00:00 2001 From: Yaser Date: Wed, 4 Dec 2019 17:38:19 +1100 Subject: [PATCH] docs: adds Native-UI Open external links and the file manager Fiddle example (#20524) --- .../external-links-file-manager/index.html | 104 ++++++++++++++++++ .../external-links-file-manager/main.js | 56 ++++++++++ .../external-links-file-manager/renderer.js | 13 +++ 3 files changed, 173 insertions(+) create mode 100644 docs/fiddles/native-ui/external-links-file-manager/index.html create mode 100644 docs/fiddles/native-ui/external-links-file-manager/main.js create mode 100644 docs/fiddles/native-ui/external-links-file-manager/renderer.js diff --git a/docs/fiddles/native-ui/external-links-file-manager/index.html b/docs/fiddles/native-ui/external-links-file-manager/index.html new file mode 100644 index 000000000000..6c57fd034fb8 --- /dev/null +++ b/docs/fiddles/native-ui/external-links-file-manager/index.html @@ -0,0 +1,104 @@ + + + + + Open external links and the file manager + + +
+

+ Open external links and the file manager +

+

+ The shell module in Electron allows you to access certain + native elements like the file manager and default web browser. +

+ +

This module works in both the main and renderer process.

+

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

+
+ +
+
+

Open Path in File Manager

+
+
+ +
+

+ This demonstrates using the shell module to open the + system file manager at a particular location. +

+

+ Clicking the demo button will open your file manager at the root. +

+
+
+
+ +
+
+

Open External Links

+
+
+ +
+

+ If you do not want your app to open website links + within the app, you can use the shell module + to open them externally. When clicked, the links will open outside + of your app and in the user's default web browser. +

+

+ When the demo button is clicked, the electron website will open in + your browser. +

+

+ +
+

ProTip

+ Open all outbound links externally. +

+ You may want to open all http and + https links outside of your app. To do this, query + the document and loop through each link and add a listener. This + app uses the code below which is located in + assets/ex-links.js. +

+
Renderer Process
+ 
+                
+const shell = require('electron').shell
+
+const links = document.querySelectorAll('a[href]')
+
+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/native-ui/external-links-file-manager/main.js b/docs/fiddles/native-ui/external-links-file-manager/main.js new file mode 100644 index 000000000000..4fff6140a0a2 --- /dev/null +++ b/docs/fiddles/native-ui/external-links-file-manager/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/native-ui/external-links-file-manager/renderer.js b/docs/fiddles/native-ui/external-links-file-manager/renderer.js new file mode 100644 index 000000000000..35af89d33ca5 --- /dev/null +++ b/docs/fiddles/native-ui/external-links-file-manager/renderer.js @@ -0,0 +1,13 @@ +const { shell } = require('electron') +const os = require('os') + +const exLinksBtn = document.getElementById('open-ex-links') +const fileManagerBtn = document.getElementById('open-file-manager') + +fileManagerBtn.addEventListener('click', (event) => { + shell.showItemInFolder(os.homedir()) +}) + +exLinksBtn.addEventListener('click', (event) => { + shell.openExternal('http://electron.atom.io') +})