Pchen0/electron

docs: added fiddle support for code samples (#26766)

Co-authored-by: Antonio <[email protected]>

Erick Zhao 4 years ago

parent

d12674f9f1

commit

de12232df5

36 changed files with 757 additions and 0 deletions

Split View Show Diff Stats

						
							+ 18
							
							- 0
						
docs/fiddles/features/drag-and-drop/index.html
							 
								View File
							
				@@ -0,0 +1,18 @@
			
				+<!DOCTYPE html>
			
				+<html>
			
				+<head>
			
				+    <meta charset="UTF-8">
			
				+    <title>Hello World!</title>
			
				+    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
			
				+</head>
			
				+<body>
			
				+    <h1>Hello World!</h1>
			
				+    <p>
			
				+        We are using node <script>document.write(process.versions.node)</script>,
			
				+        Chrome <script>document.write(process.versions.chrome)</script>,
			
				+        and Electron <script>document.write(process.versions.electron)</script>.
			
				+    </p>
			
				+    <a href="#" id="drag">Drag me</a>
			
				+    <script src="renderer.js"></script>
			
				+</body>
			
				+</html>

						
							+ 41
							
							- 0
						
docs/fiddles/features/drag-and-drop/main.js
							 
								View File
							
				@@ -0,0 +1,41 @@
			
				+const { app, BrowserWindow, ipcMain, nativeImage, NativeImage } = require('electron')
			
				+const fs = require('fs');
			
				+const http = require('http');
			
				+
			
				+function createWindow () {
			
				+  const win = new BrowserWindow({
			
				+    width: 800,
			
				+    height: 600,
			
				+    webPreferences: {
			
				+      nodeIntegration: true
			
				+    }
			
				+  })
			
				+
			
				+  win.loadFile('index.html')
			
				+}
			
				+const iconName = 'iconForDragAndDrop.png';
			
				+const icon = fs.createWriteStream(`${process.cwd()}/${iconName}`);
			
				+http.get('http://img.icons8.com/ios/452/drag-and-drop.png', (response) => {
			
				+  response.pipe(icon);
			
				+});
			
				+
			
				+app.whenReady().then(createWindow)
			
				+
			
				+ipcMain.on('ondragstart', (event, filePath) => {
			
				+  event.sender.startDrag({
			
				+    file: filePath,
			
				+    icon: `${process.cwd()}/${iconName}`
			
				+  })
			
				+})
			
				+
			
				+app.on('window-all-closed', () => {
			
				+  if (process.platform !== 'darwin') {
			
				+    app.quit()
			
				+  }
			
				+})
			
				+
			
				+app.on('activate', () => {
			
				+  if (BrowserWindow.getAllWindows().length === 0) {
			
				+    createWindow()
			
				+  }
			
				+})

						
							+ 9
							
							- 0
						
docs/fiddles/features/drag-and-drop/renderer.js
							 
								View File
							
				@@ -0,0 +1,9 @@
			
				+const { ipcRenderer } = require('electron')
			
				+const fs = require('fs')
			
				+
			
				+document.getElementById('drag').ondragstart = (event) => {
			
				+  const fileName = 'drag-and-drop.md'
			
				+  fs.writeFileSync(fileName, '# Test drag and drop');
			
				+  event.preventDefault()
			
				+  ipcRenderer.send('ondragstart', process.cwd() + `/${fileName}`)
			
				+}

						
							+ 16
							
							- 0
						
docs/fiddles/features/keyboard-shortcuts/global/index.html
							 
								View File
							
				@@ -0,0 +1,16 @@
			
				+<!DOCTYPE html>
			
				+<html>
			
				+<head>
			
				+    <meta charset="UTF-8">
			
				+    <title>Hello World!</title>
			
				+    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
			
				+</head>
			
				+<body>
			
				+    <h1>Hello World!</h1>
			
				+    <p>
			
				+        We are using node <script>document.write(process.versions.node)</script>,
			
				+        Chrome <script>document.write(process.versions.chrome)</script>,
			
				+        and Electron <script>document.write(process.versions.electron)</script>.
			
				+    </p>
			
				+</body>
			
				+</html>

						
							+ 31
							
							- 0
						
docs/fiddles/features/keyboard-shortcuts/global/main.js
							 
								View File
							
				@@ -0,0 +1,31 @@
			
				+const { app, BrowserWindow, globalShortcut } = require('electron')
			
				+
			
				+function createWindow () {
			
				+  const win = new BrowserWindow({
			
				+    width: 800,
			
				+    height: 600,
			
				+    webPreferences: {
			
				+      nodeIntegration: true
			
				+    }
			
				+  })
			
				+
			
				+  win.loadFile('index.html')
			
				+}
			
				+
			
				+app.whenReady().then(() => {
			
				+  globalShortcut.register('Alt+CommandOrControl+I', () => {
			
				+    console.log('Electron loves global shortcuts!')
			
				+  })
			
				+}).then(createWindow)
			
				+
			
				+app.on('window-all-closed', () => {
			
				+  if (process.platform !== 'darwin') {
			
				+    app.quit()
			
				+  }
			
				+})
			
				+
			
				+app.on('activate', () => {
			
				+  if (BrowserWindow.getAllWindows().length === 0) {
			
				+    createWindow()
			
				+  }
			
				+})

						
							+ 14
							
							- 0
						
docs/fiddles/features/keyboard-shortcuts/interception-from-main/index.html
							 
								View File
							
				@@ -0,0 +1,14 @@
			
				+<!DOCTYPE html>
			
				+<html>
			
				+<head>
			
				+    <meta charset="UTF-8">
			
				+    <title>Hello World!</title>
			
				+    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
			
				+</head>
			
				+<body>
			
				+    <h1>Hello World!</h1>
			
				+    We are using node <script>document.write(process.versions.node)</script>,
			
				+    Chrome <script>document.write(process.versions.chrome)</script>,
			
				+    and Electron <script>document.write(process.versions.electron)</script>.
			
				+</body>
			
				+</html>

						
							+ 13
							
							- 0
						
docs/fiddles/features/keyboard-shortcuts/interception-from-main/main.js
							 
								View File
							
				@@ -0,0 +1,13 @@
			
				+const { app, BrowserWindow } = require('electron')
			
				+
			
				+app.whenReady().then(() => {
			
				+  const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } })
			
				+
			
				+  win.loadFile('index.html')
			
				+  win.webContents.on('before-input-event', (event, input) => {
			
				+    if (input.control && input.key.toLowerCase() === 'i') {
			
				+      console.log('Pressed Control+I')
			
				+      event.preventDefault()
			
				+    }
			
				+  })
			
				+})

						
							+ 16
							
							- 0
						
docs/fiddles/features/keyboard-shortcuts/local/index.html
							 
								View File
							
				@@ -0,0 +1,16 @@
			
				+<!DOCTYPE html>
			
				+<html>
			
				+<head>
			
				+    <meta charset="UTF-8">
			
				+    <title>Hello World!</title>
			
				+    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
			
				+</head>
			
				+<body>
			
				+    <h1>Hello World!</h1>
			
				+    <p>
			
				+        We are using node <script>document.write(process.versions.node)</script>,
			
				+        Chrome <script>document.write(process.versions.chrome)</script>,
			
				+        and Electron <script>document.write(process.versions.electron)</script>.
			
				+    </p>
			
				+</body>
			
				+</html>

						
							+ 39
							
							- 0
						
docs/fiddles/features/keyboard-shortcuts/local/main.js
							 
								View File
							
				@@ -0,0 +1,39 @@
			
				+const { app, BrowserWindow, Menu, MenuItem } = require('electron')
			
				+
			
				+function createWindow () {
			
				+  const win = new BrowserWindow({
			
				+    width: 800,
			
				+    height: 600,
			
				+    webPreferences: {
			
				+      nodeIntegration: true
			
				+    }
			
				+  })
			
				+
			
				+  win.loadFile('index.html')
			
				+}
			
				+
			
				+const menu = new Menu()
			
				+menu.append(new MenuItem({
			
				+  label: 'Electron',
			
				+  submenu: [{
			
				+    role: 'help',
			
				+    accelerator: process.platform === 'darwin' ? 'Alt+Cmd+I' : 'Alt+Shift+I',
			
				+    click: () => { console.log('Electron rocks!') }
			
				+  }]
			
				+}))
			
				+
			
				+Menu.setApplicationMenu(menu)
			
				+
			
				+app.whenReady().then(createWindow)
			
				+
			
				+app.on('window-all-closed', () => {
			
				+  if (process.platform !== 'darwin') {
			
				+    app.quit()
			
				+  }
			
				+})
			
				+
			
				+app.on('activate', () => {
			
				+  if (BrowserWindow.getAllWindows().length === 0) {
			
				+    createWindow()
			
				+  }
			
				+})

						
							+ 19
							
							- 0
						
docs/fiddles/features/macos-dark-mode/index.html
							 
								View File
							
				@@ -0,0 +1,19 @@
			
				+<!DOCTYPE html>
			
				+<html>
			
				+<head>
			
				+    <meta charset="UTF-8">
			
				+    <title>Hello World!</title>
			
				+    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
			
				+    <link rel="stylesheet" type="text/css" href="./styles.css">
			
				+</head>
			
				+<body>
			
				+    <h1>Hello World!</h1>
			
				+    <p>Current theme source: <strong id="theme-source">System</strong></p>
			
				+
			
				+    <button id="toggle-dark-mode">Toggle Dark Mode</button>
			
				+    <button id="reset-to-system">Reset to System Theme</button>
			
				+
			
				+    <script src="renderer.js"></script>
			
				+  </body>
			
				+</body>
			
				+</html>

						
							+ 40
							
							- 0
						
docs/fiddles/features/macos-dark-mode/main.js
							 
								View File
							
				@@ -0,0 +1,40 @@
			
				+const { app, BrowserWindow, ipcMain, nativeTheme } = require('electron')
			
				+
			
				+function createWindow () {
			
				+  const win = new BrowserWindow({
			
				+    width: 800,
			
				+    height: 600,
			
				+    webPreferences: {
			
				+      nodeIntegration: true
			
				+    }
			
				+  })
			
				+
			
				+  win.loadFile('index.html')
			
				+
			
				+  ipcMain.handle('dark-mode:toggle', () => {
			
				+    if (nativeTheme.shouldUseDarkColors) {
			
				+      nativeTheme.themeSource = 'light'
			
				+    } else {
			
				+      nativeTheme.themeSource = 'dark'
			
				+    }
			
				+    return nativeTheme.shouldUseDarkColors
			
				+  })
			
				+
			
				+  ipcMain.handle('dark-mode:system', () => {
			
				+    nativeTheme.themeSouce = 'system'
			
				+  })
			
				+}
			
				+
			
				+app.whenReady().then(createWindow)
			
				+
			
				+app.on('window-all-closed', () => {
			
				+  if (process.platform !== 'darwin') {
			
				+    app.quit()
			
				+  }
			
				+})
			
				+
			
				+app.on('activate', () => {
			
				+  if (BrowserWindow.getAllWindows().length === 0) {
			
				+    createWindow()
			
				+  }
			
				+})

						
							+ 11
							
							- 0
						
docs/fiddles/features/macos-dark-mode/renderer.js
							 
								View File
							
				@@ -0,0 +1,11 @@
			
				+const { ipcRenderer } = require('electron')
			
				+
			
				+document.getElementById('toggle-dark-mode').addEventListener('click', async () => {
			
				+  const isDarkMode = await ipcRenderer.invoke('dark-mode:toggle')
			
				+  document.getElementById('theme-source').innerHTML = isDarkMode ? 'Dark' : 'Light'
			
				+})
			
				+
			
				+document.getElementById('reset-to-system').addEventListener('click', async () => {
			
				+  await ipcRenderer.invoke('dark-mode:system')
			
				+  document.getElementById('theme-source').innerHTML = 'System'
			
				+})

						
							+ 7
							
							- 0
						
docs/fiddles/features/macos-dark-mode/styles.css
							 
								View File
							
				@@ -0,0 +1,7 @@
			
				+@media (prefers-color-scheme: dark) {
			
				+  body { background: #333; color: white; }
			
				+}
			
				+
			
				+@media (prefers-color-scheme: light) {
			
				+  body { background: #ddd; color: black; }
			
				+}

						
							+ 16
							
							- 0
						
docs/fiddles/features/macos-dock-menu/index.html
							 
								View File
							
				@@ -0,0 +1,16 @@
			
				+<!DOCTYPE html>
			
				+<html>
			
				+<head>
			
				+    <meta charset="UTF-8">
			
				+    <title>Hello World!</title>
			
				+    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
			
				+</head>
			
				+<body>
			
				+    <h1>Hello World!</h1>
			
				+    <p>
			
				+        We are using node <script>document.write(process.versions.node)</script>,
			
				+        Chrome <script>document.write(process.versions.chrome)</script>,
			
				+        and Electron <script>document.write(process.versions.electron)</script>.
			
				+    </p>
			
				+</body>
			
				+</html>

						
							+ 43
							
							- 0
						
docs/fiddles/features/macos-dock-menu/main.js
							 
								View File
							
				@@ -0,0 +1,43 @@
			
				+const { app, BrowserWindow, Menu } = require('electron')
			
				+
			
				+function createWindow () {
			
				+  const win = new BrowserWindow({
			
				+    width: 800,
			
				+    height: 600,
			
				+    webPreferences: {
			
				+      nodeIntegration: true
			
				+    }
			
				+  })
			
				+
			
				+  win.loadFile('index.html')
			
				+}
			
				+
			
				+const dockMenu = Menu.buildFromTemplate([
			
				+  {
			
				+    label: 'New Window',
			
				+    click () { console.log('New Window') }
			
				+  }, {
			
				+    label: 'New Window with Settings',
			
				+    submenu: [
			
				+      { label: 'Basic' },
			
				+      { label: 'Pro' }
			
				+    ]
			
				+  },
			
				+  { label: 'New Command...' }
			
				+])
			
				+
			
				+app.whenReady().then(() => {
			
				+  app.dock.setMenu(dockMenu)
			
				+}).then(createWindow)
			
				+
			
				+app.on('window-all-closed', () => {
			
				+  if (process.platform !== 'darwin') {
			
				+    app.quit()
			
				+  }
			
				+})
			
				+
			
				+app.on('activate', () => {
			
				+  if (BrowserWindow.getAllWindows().length === 0) {
			
				+    createWindow()
			
				+  }
			
				+})

						
							+ 16
							
							- 0
						
docs/fiddles/features/notifications/main/index.html
							 
								View File
							
				@@ -0,0 +1,16 @@
			
				+<!DOCTYPE html>
			
				+<html>
			
				+<head>
			
				+    <meta charset="UTF-8">
			
				+    <title>Hello World!</title>
			
				+    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
			
				+</head>
			
				+<body>
			
				+    <h1>Hello World!</h1>
			
				+    <p>
			
				+        We are using node <script>document.write(process.versions.node)</script>,
			
				+        Chrome <script>document.write(process.versions.chrome)</script>,
			
				+        and Electron <script>document.write(process.versions.electron)</script>.
			
				+    </p>
			
				+</body>
			
				+</html>

						
							+ 35
							
							- 0
						
docs/fiddles/features/notifications/main/main.js
							 
								View File
							
				@@ -0,0 +1,35 @@
			
				+const { app, BrowserWindow, Notification } = require('electron')
			
				+
			
				+function createWindow () {
			
				+  const win = new BrowserWindow({
			
				+    width: 800,
			
				+    height: 600,
			
				+    webPreferences: {
			
				+      nodeIntegration: true
			
				+    }
			
				+  })
			
				+
			
				+  win.loadFile('index.html')
			
				+}
			
				+
			
				+function showNotification () {
			
				+  const notification = {
			
				+    title: 'Basic Notification',
			
				+    body: 'Notification from the Main process'
			
				+  }
			
				+  new Notification(notification).show()
			
				+}
			
				+
			
				+app.whenReady().then(createWindow).then(showNotification)
			
				+
			
				+app.on('window-all-closed', () => {
			
				+  if (process.platform !== 'darwin') {
			
				+    app.quit()
			
				+  }
			
				+})
			
				+
			
				+app.on('activate', () => {
			
				+  if (BrowserWindow.getAllWindows().length === 0) {
			
				+    createWindow()
			
				+  }
			
				+})

						
							+ 17
							
							- 0
						
docs/fiddles/features/notifications/renderer/index.html
							 
								View File
							
				@@ -0,0 +1,17 @@
			
				+<!DOCTYPE html>
			
				+<html>
			
				+<head>
			
				+    <meta charset="UTF-8">
			
				+    <title>Hello World!</title>
			
				+    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
			
				+</head>
			
				+<body>
			
				+    <h1>Hello World!</h1>
			
				+    <p>
			
				+        We are using node <script>document.write(process.versions.node)</script>,
			
				+        Chrome <script>document.write(process.versions.chrome)</script>,
			
				+        and Electron <script>document.write(process.versions.electron)</script>.
			
				+    </p>
			
				+    <script src="renderer.js"></script>
			
				+</body>
			
				+</html>

						
							+ 27
							
							- 0
						
docs/fiddles/features/notifications/renderer/main.js
							 
								View File
							
				@@ -0,0 +1,27 @@
			
				+const { app, BrowserWindow } = require('electron')
			
				+
			
				+function createWindow () {
			
				+  const win = new BrowserWindow({
			
				+    width: 800,
			
				+    height: 600,
			
				+    webPreferences: {
			
				+      nodeIntegration: true
			
				+    }
			
				+  })
			
				+
			
				+  win.loadFile('index.html')
			
				+}
			
				+
			
				+app.whenReady().then(createWindow)
			
				+
			
				+app.on('window-all-closed', () => {
			
				+  if (process.platform !== 'darwin') {
			
				+    app.quit()
			
				+  }
			
				+})
			
				+
			
				+app.on('activate', () => {
			
				+  if (BrowserWindow.getAllWindows().length === 0) {
			
				+    createWindow()
			
				+  }
			
				+})

						
							+ 7
							
							- 0
						
docs/fiddles/features/notifications/renderer/renderer.js
							 
								View File
							
				@@ -0,0 +1,7 @@
			
				+const myNotification = new Notification('Title', {
			
				+  body: 'Notification from the Renderer process'
			
				+})
			
				+
			
				+myNotification.onclick = () => {
			
				+  console.log('Notification clicked')
			
				+}

						
							+ 15
							
							- 0
						
docs/fiddles/features/offscreen-rendering/index.html
							 
								View File
							
				@@ -0,0 +1,15 @@
			
				+<html>
			
				+<head>
			
				+    <meta charset="UTF-8">
			
				+    <title>Hello World!</title>
			
				+    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
			
				+</head>
			
				+<body>
			
				+    <h1>Hello World!</h1>
			
				+    <p>
			
				+        We are using node <script>document.write(process.versions.node)</script>,
			
				+        Chrome <script>document.write(process.versions.chrome)</script>,
			
				+        and Electron <script>document.write(process.versions.electron)</script>.
			
				+    </p>
			
				+</body>
			
				+</html>

						
							+ 28
							
							- 0
						
docs/fiddles/features/offscreen-rendering/main.js
							 
								View File
							
				@@ -0,0 +1,28 @@
			
				+const { app, BrowserWindow } = require('electron')
			
				+const fs = require('fs')
			
				+
			
				+app.disableHardwareAcceleration()
			
				+
			
				+let win
			
				+
			
				+app.whenReady().then(() => {
			
				+  win = new BrowserWindow({ webPreferences: { offscreen: true } })
			
				+  win.loadURL('https://github.com')
			
				+  win.webContents.on('paint', (event, dirty, image) => {
			
				+    fs.writeFileSync('ex.png', image.toPNG())
			
				+  })
			
				+  win.webContents.setFrameRate(60)
			
				+  console.log(`The screenshot has been successfully saved to ${process.cwd()}/ex.png`)
			
				+})
			
				+
			
				+app.on('window-all-closed', () => {
			
				+  if (process.platform !== 'darwin') {
			
				+    app.quit()
			
				+  }
			
				+})
			
				+
			
				+app.on('activate', () => {
			
				+  if (BrowserWindow.getAllWindows().length === 0) {
			
				+    createWindow()
			
				+  }
			
				+})

						
							+ 17
							
							- 0
						
docs/fiddles/features/online-detection/main/index.html
							 
								View File
							
				@@ -0,0 +1,17 @@
			
				+<!DOCTYPE html>
			
				+<html>
			
				+<head>
			
				+    <meta charset="UTF-8">
			
				+    <title>Hello World!</title>
			
				+    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
			
				+</head>
			
				+<body>
			
				+    <h1>Hello World!</h1>
			
				+    <p>
			
				+        We are using node <script>document.write(process.versions.node)</script>,
			
				+        Chrome <script>document.write(process.versions.chrome)</script>,
			
				+        and Electron <script>document.write(process.versions.electron)</script>.
			
				+    </p>
			
				+    <script src="renderer.js"></script>
			
				+</body>
			
				+</html>

						
							+ 24
							
							- 0
						
docs/fiddles/features/online-detection/main/main.js
							 
								View File
							
				@@ -0,0 +1,24 @@
			
				+const { app, BrowserWindow, ipcMain } = require('electron')
			
				+
			
				+let onlineStatusWindow
			
				+
			
				+app.whenReady().then(() => {
			
				+  onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false, webPreferences: { nodeIntegration: true } })
			
				+  onlineStatusWindow.loadURL(`file://${__dirname}/index.html`)
			
				+})
			
				+
			
				+ipcMain.on('online-status-changed', (event, status) => {
			
				+  console.log(status)
			
				+})
			
				+
			
				+app.on('window-all-closed', () => {
			
				+  if (process.platform !== 'darwin') {
			
				+    app.quit()
			
				+  }
			
				+})
			
				+
			
				+app.on('activate', () => {
			
				+  if (BrowserWindow.getAllWindows().length === 0) {
			
				+    createWindow()
			
				+  }
			
				+})

						
							+ 7
							
							- 0
						
docs/fiddles/features/online-detection/main/renderer.js
							 
								View File
							
				@@ -0,0 +1,7 @@
			
				+const { ipcRenderer } = require('electron')
			
				+const updateOnlineStatus = () => { ipcRenderer.send('online-status-changed', navigator.onLine ? 'online' : 'offline') }
			
				+
			
				+window.addEventListener('online', updateOnlineStatus)
			
				+window.addEventListener('offline', updateOnlineStatus)
			
				+
			
				+updateOnlineStatus()

						
							+ 17
							
							- 0
						
docs/fiddles/features/online-detection/renderer/index.html
							 
								View File
							
				@@ -0,0 +1,17 @@
			
				+<!DOCTYPE html>
			
				+<html>
			
				+<head>
			
				+    <meta charset="UTF-8">
			
				+    <title>Hello World!</title>
			
				+    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
			
				+</head>
			
				+<body>
			
				+    <h1>Hello World!</h1>
			
				+    <p>
			
				+        We are using node <script>document.write(process.versions.node)</script>,
			
				+        Chrome <script>document.write(process.versions.chrome)</script>,
			
				+        and Electron <script>document.write(process.versions.electron)</script>.
			
				+    </p>
			
				+    <script src="renderer.js"></script>
			
				+</body>
			
				+</html>

						
							+ 20
							
							- 0
						
docs/fiddles/features/online-detection/renderer/main.js
							 
								View File
							
				@@ -0,0 +1,20 @@
			
				+const { app, BrowserWindow } = require('electron')
			
				+
			
				+let onlineStatusWindow
			
				+
			
				+app.whenReady().then(() => {
			
				+  onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false })
			
				+  onlineStatusWindow.loadURL(`file://${__dirname}/index.html`)
			
				+})
			
				+
			
				+app.on('window-all-closed', () => {
			
				+  if (process.platform !== 'darwin') {
			
				+    app.quit()
			
				+  }
			
				+})
			
				+
			
				+app.on('activate', () => {
			
				+  if (BrowserWindow.getAllWindows().length === 0) {
			
				+    createWindow()
			
				+  }
			
				+})

						
							+ 6
							
							- 0
						
docs/fiddles/features/online-detection/renderer/renderer.js
							 
								View File
							
				@@ -0,0 +1,6 @@
			
				+const alertOnlineStatus = () => { window.alert(navigator.onLine ? 'online' : 'offline') }
			
				+
			
				+window.addEventListener('online', alertOnlineStatus)
			
				+window.addEventListener('offline', alertOnlineStatus)
			
				+
			
				+alertOnlineStatus()

						
							+ 16
							
							- 0
						
docs/fiddles/features/progress-bar/index.html
							 
								View File
							
				@@ -0,0 +1,16 @@
			
				+<!DOCTYPE html>
			
				+<html>
			
				+<head>
			
				+    <meta charset="UTF-8">
			
				+    <title>Hello World!</title>
			
				+    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
			
				+</head>
			
				+<body>
			
				+    <h1>Hello World!</h1>
			
				+    <p>
			
				+        We are using node <script>document.write(process.versions.node)</script>,
			
				+        Chrome <script>document.write(process.versions.chrome)</script>,
			
				+        and Electron <script>document.write(process.versions.electron)</script>.
			
				+    </p>
			
				+</body>
			
				+</html>

						
							+ 30
							
							- 0
						
docs/fiddles/features/progress-bar/main.js
							 
								View File
							
				@@ -0,0 +1,30 @@
			
				+const { app, BrowserWindow } = require('electron')
			
				+
			
				+function createWindow () {
			
				+  const win = new BrowserWindow({
			
				+    width: 800,
			
				+    height: 600,
			
				+    webPreferences: {
			
				+      nodeIntegration: true
			
				+    }
			
				+  })
			
				+
			
				+  win.loadFile('index.html')
			
				+  win.setProgressBar(0.5)
			
				+}
			
				+
			
				+
			
				+app.whenReady().then(createWindow)
			
				+
			
				+
			
				+app.on('window-all-closed', () => {
			
				+  if (process.platform !== 'darwin') {
			
				+    app.quit()
			
				+  }
			
				+})
			
				+
			
				+app.on('activate', () => {
			
				+  if (BrowserWindow.getAllWindows().length === 0) {
			
				+    createWindow()
			
				+  }
			
				+})

						
							+ 16
							
							- 0
						
docs/fiddles/features/recent-documents/index.html
							 
								View File
							
				@@ -0,0 +1,16 @@
			
				+<!DOCTYPE html>
			
				+<html>
			
				+<head>
			
				+    <meta charset="UTF-8">
			
				+    <title>Hello World!</title>
			
				+    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
			
				+</head>
			
				+<body>
			
				+    <h1>Hello World!</h1>
			
				+    <p>
			
				+        We are using node <script>document.write(process.versions.node)</script>,
			
				+        Chrome <script>document.write(process.versions.chrome)</script>,
			
				+        and Electron <script>document.write(process.versions.electron)</script>.
			
				+    </p>
			
				+</body>
			
				+</html>

						
							+ 34
							
							- 0
						
docs/fiddles/features/recent-documents/main.js
							 
								View File
							
				@@ -0,0 +1,34 @@
			
				+const { app, BrowserWindow } = require('electron')
			
				+const fs = require('fs')
			
				+const path = require('path')
			
				+
			
				+function createWindow () {
			
				+  const win = new BrowserWindow({
			
				+    width: 800,
			
				+    height: 600,
			
				+    webPreferences: {
			
				+      nodeIntegration: true
			
				+    }
			
				+  })
			
				+
			
				+  win.loadFile('index.html')
			
				+}
			
				+const fileName = 'recently-used.md'
			
				+fs.writeFile(fileName, 'Lorem Ipsum', () => {
			
				+  app.addRecentDocument(path.join(process.cwd(), `${fileName}`))
			
				+})
			
				+
			
				+app.whenReady().then(createWindow)
			
				+
			
				+app.on('window-all-closed', () => {
			
				+  app.clearRecentDocuments()
			
				+  if (process.platform !== 'darwin') {
			
				+    app.quit()
			
				+  }
			
				+})
			
				+
			
				+app.on('activate', () => {
			
				+  if (BrowserWindow.getAllWindows().length === 0) {
			
				+    createWindow()
			
				+  }
			
				+})

						
							+ 16
							
							- 0
						
docs/fiddles/features/represented-file/index.html
							 
								View File
							
				@@ -0,0 +1,16 @@
			
				+<!DOCTYPE html>
			
				+<html>
			
				+<head>
			
				+    <meta charset="UTF-8">
			
				+    <title>Hello World!</title>
			
				+    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
			
				+</head>
			
				+<body>
			
				+    <h1>Hello World!</h1>
			
				+    <p>
			
				+        We are using node <script>document.write(process.versions.node)</script>,
			
				+        Chrome <script>document.write(process.versions.chrome)</script>,
			
				+        and Electron <script>document.write(process.versions.electron)</script>.
			
				+    </p>
			
				+</body>
			
				+</html>

						
							+ 33
							
							- 0
						
docs/fiddles/features/represented-file/main.js
							 
								View File
							
				@@ -0,0 +1,33 @@
			
				+const { app, BrowserWindow } = require('electron')
			
				+const os = require('os');
			
				+
			
				+function createWindow () {
			
				+  const win = new BrowserWindow({
			
				+    width: 800,
			
				+    height: 600,
			
				+    webPreferences: {
			
				+      nodeIntegration: true
			
				+    }
			
				+  })
			
				+
			
				+  win.loadFile('index.html')
			
				+}
			
				+
			
				+app.whenReady().then(() => {
			
				+  const win = new BrowserWindow()
			
				+
			
				+  win.setRepresentedFilename(os.homedir())
			
				+  win.setDocumentEdited(true)
			
				+})
			
				+
			
				+app.on('window-all-closed', () => {
			
				+  if (process.platform !== 'darwin') {
			
				+    app.quit()
			
				+  }
			
				+})
			
				+
			
				+app.on('activate', () => {
			
				+  if (BrowserWindow.getAllWindows().length === 0) {
			
				+    createWindow()
			
				+  }
			
				+})

						
							+ 16
							
							- 0
						
docs/fiddles/quick-start/index.html
							 
								View File
							
				@@ -0,0 +1,16 @@
			
				+<!DOCTYPE html>
			
				+<html>
			
				+<head>
			
				+    <meta charset="UTF-8">
			
				+    <title>Hello World!</title>
			
				+    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
			
				+</head>
			
				+<body>
			
				+    <h1>Hello World!</h1>
			
				+    <p>
			
				+        We are using node <script>document.write(process.versions.node)</script>,
			
				+        Chrome <script>document.write(process.versions.chrome)</script>,
			
				+        and Electron <script>document.write(process.versions.electron)</script>.
			
				+    </p>
			
				+</body>
			
				+</html>

						
							+ 27
							
							- 0
						
docs/fiddles/quick-start/main.js
							 
								View File
							
				@@ -0,0 +1,27 @@
			
				+const { app, BrowserWindow } = require('electron')
			
				+
			
				+function createWindow () {
			
				+  const win = new BrowserWindow({
			
				+    width: 800,
			
				+    height: 600,
			
				+    webPreferences: {
			
				+      nodeIntegration: true
			
				+    }
			
				+  })
			
				+
			
				+  win.loadFile('index.html')
			
				+}
			
				+
			
				+app.whenReady().then(createWindow)
			
				+
			
				+app.on('window-all-closed', () => {
			
				+  if (process.platform !== 'darwin') {
			
				+    app.quit()
			
				+  }
			
				+})
			
				+
			
				+app.on('activate', () => {
			
				+  if (BrowserWindow.getAllWindows().length === 0) {
			
				+    createWindow()
			
				+  }
			
				+})

docs: added fiddle support for code samples (#26766)

+ 18 - 0 docs/fiddles/features/drag-and-drop/index.html View File

+ 41 - 0 docs/fiddles/features/drag-and-drop/main.js View File

+ 9 - 0 docs/fiddles/features/drag-and-drop/renderer.js View File

+ 16 - 0 docs/fiddles/features/keyboard-shortcuts/global/index.html View File

+ 31 - 0 docs/fiddles/features/keyboard-shortcuts/global/main.js View File

+ 14 - 0 docs/fiddles/features/keyboard-shortcuts/interception-from-main/index.html View File

+ 13 - 0 docs/fiddles/features/keyboard-shortcuts/interception-from-main/main.js View File

+ 16 - 0 docs/fiddles/features/keyboard-shortcuts/local/index.html View File

+ 39 - 0 docs/fiddles/features/keyboard-shortcuts/local/main.js View File

+ 19 - 0 docs/fiddles/features/macos-dark-mode/index.html View File

+ 40 - 0 docs/fiddles/features/macos-dark-mode/main.js View File

+ 11 - 0 docs/fiddles/features/macos-dark-mode/renderer.js View File

+ 7 - 0 docs/fiddles/features/macos-dark-mode/styles.css View File

+ 16 - 0 docs/fiddles/features/macos-dock-menu/index.html View File

+ 43 - 0 docs/fiddles/features/macos-dock-menu/main.js View File

+ 16 - 0 docs/fiddles/features/notifications/main/index.html View File

+ 35 - 0 docs/fiddles/features/notifications/main/main.js View File

+ 17 - 0 docs/fiddles/features/notifications/renderer/index.html View File

+ 27 - 0 docs/fiddles/features/notifications/renderer/main.js View File

+ 7 - 0 docs/fiddles/features/notifications/renderer/renderer.js View File

+ 15 - 0 docs/fiddles/features/offscreen-rendering/index.html View File

+ 28 - 0 docs/fiddles/features/offscreen-rendering/main.js View File

+ 17 - 0 docs/fiddles/features/online-detection/main/index.html View File

+ 24 - 0 docs/fiddles/features/online-detection/main/main.js View File

+ 7 - 0 docs/fiddles/features/online-detection/main/renderer.js View File

+ 17 - 0 docs/fiddles/features/online-detection/renderer/index.html View File

+ 20 - 0 docs/fiddles/features/online-detection/renderer/main.js View File

+ 6 - 0 docs/fiddles/features/online-detection/renderer/renderer.js View File

+ 16 - 0 docs/fiddles/features/progress-bar/index.html View File

+ 30 - 0 docs/fiddles/features/progress-bar/main.js View File

+ 16 - 0 docs/fiddles/features/recent-documents/index.html View File

+ 34 - 0 docs/fiddles/features/recent-documents/main.js View File

+ 16 - 0 docs/fiddles/features/represented-file/index.html View File

+ 33 - 0 docs/fiddles/features/represented-file/main.js View File

+ 16 - 0 docs/fiddles/quick-start/index.html View File

+ 27 - 0 docs/fiddles/quick-start/main.js View File

+ 18 - 0
docs/fiddles/features/drag-and-drop/index.html
View File

+ 41 - 0
docs/fiddles/features/drag-and-drop/main.js
View File

+ 9 - 0
docs/fiddles/features/drag-and-drop/renderer.js
View File

+ 16 - 0
docs/fiddles/features/keyboard-shortcuts/global/index.html
View File

+ 31 - 0
docs/fiddles/features/keyboard-shortcuts/global/main.js
View File

+ 14 - 0
docs/fiddles/features/keyboard-shortcuts/interception-from-main/index.html
View File

+ 13 - 0
docs/fiddles/features/keyboard-shortcuts/interception-from-main/main.js
View File

+ 16 - 0
docs/fiddles/features/keyboard-shortcuts/local/index.html
View File

+ 39 - 0
docs/fiddles/features/keyboard-shortcuts/local/main.js
View File

+ 19 - 0
docs/fiddles/features/macos-dark-mode/index.html
View File

+ 40 - 0
docs/fiddles/features/macos-dark-mode/main.js
View File

+ 11 - 0
docs/fiddles/features/macos-dark-mode/renderer.js
View File

+ 7 - 0
docs/fiddles/features/macos-dark-mode/styles.css
View File

+ 16 - 0
docs/fiddles/features/macos-dock-menu/index.html
View File

+ 43 - 0
docs/fiddles/features/macos-dock-menu/main.js
View File

+ 16 - 0
docs/fiddles/features/notifications/main/index.html
View File

+ 35 - 0
docs/fiddles/features/notifications/main/main.js
View File

+ 17 - 0
docs/fiddles/features/notifications/renderer/index.html
View File

+ 27 - 0
docs/fiddles/features/notifications/renderer/main.js
View File

+ 7 - 0
docs/fiddles/features/notifications/renderer/renderer.js
View File

+ 15 - 0
docs/fiddles/features/offscreen-rendering/index.html
View File

+ 28 - 0
docs/fiddles/features/offscreen-rendering/main.js
View File

+ 17 - 0
docs/fiddles/features/online-detection/main/index.html
View File

+ 24 - 0
docs/fiddles/features/online-detection/main/main.js
View File

+ 7 - 0
docs/fiddles/features/online-detection/main/renderer.js
View File

+ 17 - 0
docs/fiddles/features/online-detection/renderer/index.html
View File

+ 20 - 0
docs/fiddles/features/online-detection/renderer/main.js
View File

+ 6 - 0
docs/fiddles/features/online-detection/renderer/renderer.js
View File

+ 16 - 0
docs/fiddles/features/progress-bar/index.html
View File

+ 30 - 0
docs/fiddles/features/progress-bar/main.js
View File

+ 16 - 0
docs/fiddles/features/recent-documents/index.html
View File

+ 34 - 0
docs/fiddles/features/recent-documents/main.js
View File

+ 16 - 0
docs/fiddles/features/represented-file/index.html
View File

+ 33 - 0
docs/fiddles/features/represented-file/main.js
View File

+ 16 - 0
docs/fiddles/quick-start/index.html
View File

+ 27 - 0
docs/fiddles/quick-start/main.js
View File