docs: Added Native User Interface -> Open path in file manager Fiddle example (#20589)

* docs: Added Native User Interface -> Open path in file manager Fiddle example from electron-api-demos * removed classname from button
2019-10-21 09:16:11 +02:00 · 2019-10-21 09:16:11 +02:00 · 7b28cd33cb
--- a/docs/fiddles/native-ui/external-links-file-manager/path-in-file-manager/index.html
+++ b/docs/fiddles/native-ui/external-links-file-manager/path-in-file-manager/index.html
@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+  </head>
+  <body>
+    <div>
+      <div>
+        <h1>Open Path in File Manager</h1>
+        <i>Supports: Win, macOS, Linux <span>|</span> Process: Both</i>
+        <div>
+          <p>This demonstrates using the <code>shell</code> module to open the system file manager at a particular location.</p>
+          <p>Clicking the demo button will open your file manager at the root.</p>
+          <div>
+            <button id="open-file-manager">View Demo</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+  <script>
+    require('./renderer.js')
+  </script>
+</html>
--- a/docs/fiddles/native-ui/external-links-file-manager/path-in-file-manager/main.js
+++ b/docs/fiddles/native-ui/external-links-file-manager/path-in-file-manager/main.js
@ -0,0 +1,25 @@
+const { app, BrowserWindow } = require('electron')
+
+let mainWindow = null
+
+function createWindow () {
+  const windowOptions = {
+    width: 600,
+    height: 400,
+    title: 'Open Path in File Manager',
+    webPreferences: {
+      nodeIntegration: true
+    }
+  }
+
+  mainWindow = new BrowserWindow(windowOptions)
+  mainWindow.loadFile('index.html')
+
+  mainWindow.on('closed', () => {
+    mainWindow = null
+  })
+}
+
+app.on('ready', () => {
+  createWindow()
+})
--- a/docs/fiddles/native-ui/external-links-file-manager/path-in-file-manager/renderer.js
+++ b/docs/fiddles/native-ui/external-links-file-manager/path-in-file-manager/renderer.js
@ -0,0 +1,8 @@
+const { shell } = require('electron')
+const os = require('os')
+
+const fileManagerBtn = document.getElementById('open-file-manager')
+
+fileManagerBtn.addEventListener('click', (event) => {
+  shell.showItemInFolder(os.homedir())
+})