mirrors/electron
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions 1

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

Browse source 
* docs: added fiddle support for code samples in quick start guide and features

* docs: removed excessive fiddle links for not final steps

* docs: added eof newlines to fiddle examples

* docs: reworked fiddle examples to be more self-sufficient

* docs: reworked fiddle examples according to mentions

* docs: changed http to https in the offscreen rendering fiddle

* docs: fix recent documents fiddle to be more consistent
This commit is contained in:
Antonio 2020-11-30 09:48:39 +02:00 • committed by GitHub
commit fadd513739
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
48 changed files with 787 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

18
docs/fiddles/features/drag-and-drop/index.html Normal file
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
docs/fiddles/features/drag-and-drop/main.js Normal file
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
docs/fiddles/features/drag-and-drop/renderer.js Normal file
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
docs/fiddles/features/keyboard-shortcuts/global/index.html Normal file
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
docs/fiddles/features/keyboard-shortcuts/global/main.js Normal file
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
docs/fiddles/features/keyboard-shortcuts/interception-from-main/index.html Normal file
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
docs/fiddles/features/keyboard-shortcuts/interception-from-main/main.js Normal file
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
docs/fiddles/features/keyboard-shortcuts/local/index.html Normal file
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
docs/fiddles/features/keyboard-shortcuts/local/main.js Normal file
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
docs/fiddles/features/macos-dark-mode/index.html Normal file
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
docs/fiddles/features/macos-dark-mode/main.js Normal file
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
docs/fiddles/features/macos-dark-mode/renderer.js Normal file
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
docs/fiddles/features/macos-dark-mode/styles.css Normal file
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
docs/fiddles/features/macos-dock-menu/index.html Normal file
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
docs/fiddles/features/macos-dock-menu/main.js Normal file
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
docs/fiddles/features/notifications/main/index.html Normal file
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
docs/fiddles/features/notifications/main/main.js Normal file
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
docs/fiddles/features/notifications/renderer/index.html Normal file
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
docs/fiddles/features/notifications/renderer/main.js Normal file
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
docs/fiddles/features/notifications/renderer/renderer.js Normal file
View file

@ -0,0 +1,7 @@
const myNotification = new Notification('Title', {
body: 'Notification from the Renderer process'
})
myNotification.onclick = () => {
console.log('Notification clicked')
}

15
docs/fiddles/features/offscreen-rendering/index.html Normal file
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
docs/fiddles/features/offscreen-rendering/main.js Normal file
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
docs/fiddles/features/online-detection/main/index.html Normal file
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
docs/fiddles/features/online-detection/main/main.js Normal file
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
docs/fiddles/features/online-detection/main/renderer.js Normal file
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
docs/fiddles/features/online-detection/renderer/index.html Normal file
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
docs/fiddles/features/online-detection/renderer/main.js Normal file
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
docs/fiddles/features/online-detection/renderer/renderer.js Normal file
View file

@ -0,0 +1,6 @@
const alertOnlineStatus = () => { window.alert(navigator.onLine ? 'online' : 'offline') }
window.addEventListener('online', alertOnlineStatus)
window.addEventListener('offline', alertOnlineStatus)
alertOnlineStatus()

16
docs/fiddles/features/progress-bar/index.html Normal file
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
docs/fiddles/features/progress-bar/main.js Normal file
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
docs/fiddles/features/recent-documents/index.html Normal file
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
docs/fiddles/features/recent-documents/main.js Normal file
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
docs/fiddles/features/represented-file/index.html Normal file
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
docs/fiddles/features/represented-file/main.js Normal file
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
docs/fiddles/quick-start/index.html Normal file
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
docs/fiddles/quick-start/main.js Normal file
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()
}
})

6
docs/tutorial/dark-mode.md
View file

@ -96,7 +96,7 @@ color scheme, and update the "Current Theme Source" label to `System`.
To add listeners and handlers, add the following lines to the `renderer.js` file: To add listeners and handlers, add the following lines to the `renderer.js` file:
```js ```javascript
const { ipcRenderer } = require('electron') const { ipcRenderer } = require('electron')
document.getElementById('toggle-dark-mode').addEventListener('click', async () => { document.getElementById('toggle-dark-mode').addEventListener('click', async () => {
@ -130,7 +130,7 @@ active using the `nativeTheme.shouldUseDarkColors` property, and set the
`themeSource` to the opposite theme. `themeSource` to the opposite theme.
* Upon receiving `dark-mode:system`, we reset the `themeSource` to `system`. * Upon receiving `dark-mode:system`, we reset the `themeSource` to `system`.
```js ```javascript
const { app, BrowserWindow, ipcMain, nativeTheme } = require('electron') const { app, BrowserWindow, ipcMain, nativeTheme } = require('electron')
function createWindow () { function createWindow () {
@ -180,7 +180,7 @@ attribute. The value of `prefers-color-scheme` will follow your
Create a `styles.css` file and add the following lines: Create a `styles.css` file and add the following lines:
```css ```css fiddle='docs/fiddles/features/macos-dark-mode'
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
body { background: #333; color: white; } body { background: #333; color: white; }
} }

6
docs/tutorial/keyboard-shortcuts.md
View file

@ -17,7 +17,7 @@ Starting with a working application from the
[Quick Start Guide](quick-start.md), update the `main.js` file with the [Quick Start Guide](quick-start.md), update the `main.js` file with the
following lines: following lines:
```js ```javascript fiddle='docs/fiddles/features/keyboard-shortcuts/local'
const { Menu, MenuItem } = require('electron') const { Menu, MenuItem } = require('electron')
const menu = new Menu() const menu = new Menu()
@ -56,7 +56,7 @@ Starting with a working application from the
[Quick Start Guide](quick-start.md), update the `main.js` file with the [Quick Start Guide](quick-start.md), update the `main.js` file with the
following lines: following lines:
```js ```javascript fiddle='docs/fiddles/features/keyboard-shortcuts/global'
const { app, globalShortcut } = require('electron') const { app, globalShortcut } = require('electron')
app.whenReady().then(() => { app.whenReady().then(() => {
@ -101,7 +101,7 @@ Starting with a working application from the
[Quick Start Guide](quick-start.md), update the `main.js` file with the [Quick Start Guide](quick-start.md), update the `main.js` file with the
following lines: following lines:
```js ```javascript fiddle='docs/fiddles/features/keyboard-shortcuts/interception-from-main'
const { app, BrowserWindow } = require('electron') const { app, BrowserWindow } = require('electron')
app.whenReady().then(() => { app.whenReady().then(() => {

2
docs/tutorial/macos-dock.md
View file

@ -24,7 +24,7 @@ Starting with a working application from the
[Quick Start Guide](quick-start.md), update the `main.js` file with the [Quick Start Guide](quick-start.md), update the `main.js` file with the
following lines: following lines:
```javascript ```javascript fiddle='docs/fiddles/features/macos-dock-menu'
const { app, Menu } = require('electron') const { app, Menu } = require('electron')
const dockMenu = Menu.buildFromTemplate([ const dockMenu = Menu.buildFromTemplate([

4
docs/tutorial/native-file-drag-drop.md
View file

@ -25,7 +25,7 @@ Starting with a working application from the
and add the following lines to the `renderer.js` file: and add the following lines to the `renderer.js` file:
```js ```javascript
const { ipcRenderer } = require('electron') const { ipcRenderer } = require('electron')
document.getElementById('drag').ondragstart = (event) => { document.getElementById('drag').ondragstart = (event) => {
@ -40,7 +40,7 @@ and forward the information to the Main process.
In the Main process(`main.js` file), expand the received event with a path to the file that is In the Main process(`main.js` file), expand the received event with a path to the file that is
being dragged and an icon: being dragged and an icon:
```javascript ```javascript fiddle='docs/fiddles/features/drag-and-drop'
const { ipcMain } = require('electron') const { ipcMain } = require('electron')
ipcMain.on('ondragstart', (event, filePath) => { ipcMain.on('ondragstart', (event, filePath) => {

4
docs/tutorial/notifications.md
View file

@ -28,7 +28,7 @@ Assuming you have a working Electron application from the
and add the `renderer.js` file: and add the `renderer.js` file:
```js ```javascript fiddle='docs/fiddles/features/notifications/renderer'
const myNotification = new Notification('Title', { const myNotification = new Notification('Title', {
body: 'Notification from the Renderer process' body: 'Notification from the Renderer process'
}) })
@ -52,7 +52,7 @@ message that was generated after triggering the `onclick` event:
Starting with a working application from the Starting with a working application from the
[Quick Start Guide](quick-start.md), update the `main.js` file with the following lines: [Quick Start Guide](quick-start.md), update the `main.js` file with the following lines:
```js ```javascript fiddle='docs/fiddles/features/notifications/main'
const { Notification } = require('electron') const { Notification } = require('electron')
function showNotification () { function showNotification () {

2
docs/tutorial/offscreen-rendering.md
View file

@ -34,7 +34,7 @@ To enable this mode GPU acceleration has to be disabled by calling the
## Usage ## Usage
``` javascript ```javascript fiddle='docs/fiddles/features/offscreen-rendering'
const { app, BrowserWindow } = require('electron') const { app, BrowserWindow } = require('electron')
app.disableHardwareAcceleration() app.disableHardwareAcceleration()

12
docs/tutorial/online-offline-events.md
View file

@ -34,11 +34,11 @@ let onlineStatusWindow
app.whenReady().then(() => { app.whenReady().then(() => {
onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false }) onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false })
onlineStatusWindow.loadURL(`file://${__dirname}/online-status.html`) onlineStatusWindow.loadURL(`file://${__dirname}/index.html`)
}) })
``` ```
create the `online-status.html` file and add the following line before the in the `index.html` file, add the following line before the
closing `</body>` tag: closing `</body>` tag:
```html ```html
@ -47,7 +47,7 @@ closing `</body>` tag:
and add the `renderer.js` file: and add the `renderer.js` file:
```javascript ```javascript fiddle='docs/fiddles/features/online-detection/renderer'
const alertOnlineStatus = () => { window.alert(navigator.onLine ? 'online' : 'offline') } const alertOnlineStatus = () => { window.alert(navigator.onLine ? 'online' : 'offline') }
window.addEventListener('online', alertOnlineStatus) window.addEventListener('online', alertOnlineStatus)
@ -78,7 +78,7 @@ let onlineStatusWindow
app.whenReady().then(() => { app.whenReady().then(() => {
onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false, webPreferences: { nodeIntegration: true } }) onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false, webPreferences: { nodeIntegration: true } })
onlineStatusWindow.loadURL(`file://${__dirname}/online-status.html`) onlineStatusWindow.loadURL(`file://${__dirname}/index.html`)
}) })
ipcMain.on('online-status-changed', (event, status) => { ipcMain.on('online-status-changed', (event, status) => {
@ -86,7 +86,7 @@ ipcMain.on('online-status-changed', (event, status) => {
}) })
``` ```
create the `online-status.html` file and add the following line before the in the `index.html` file, add the following line before the
closing `</body>` tag: closing `</body>` tag:
```html ```html
@ -95,7 +95,7 @@ closing `</body>` tag:
and add the `renderer.js` file: and add the `renderer.js` file:
```javascript ```javascript fiddle='docs/fiddles/features/online-detection/main'
const { ipcRenderer } = require('electron') const { ipcRenderer } = require('electron')
const updateOnlineStatus = () => { ipcRenderer.send('online-status-changed', navigator.onLine ? 'online' : 'offline') } const updateOnlineStatus = () => { ipcRenderer.send('online-status-changed', navigator.onLine ? 'online' : 'offline') }

2
docs/tutorial/progress-bar.md
View file

@ -45,7 +45,7 @@ Starting with a working application from the
[Quick Start Guide](quick-start.md), add the following lines to the [Quick Start Guide](quick-start.md), add the following lines to the
`main.js` file: `main.js` file:
```javascript ```javascript fiddle='docs/fiddles/features/progress-bar'
const { BrowserWindow } = require('electron') const { BrowserWindow } = require('electron')
const win = new BrowserWindow() const win = new BrowserWindow()

9
docs/tutorial/quick-start.md
View file

@ -28,7 +28,7 @@ If both commands succeeded, you are ready to install Electron.
From a development perspective, an Electron application is essentially a Node.js application. This means that the starting point of your Electron application will be a `package.json` file like in any other Node.js application. A minimal Electron application has the following structure: From a development perspective, an Electron application is essentially a Node.js application. This means that the starting point of your Electron application will be a `package.json` file like in any other Node.js application. A minimal Electron application has the following structure:
```plain ```plaintext
my-electron-app/ my-electron-app/
├── package.json ├── package.json
├── main.js ├── main.js
@ -53,7 +53,7 @@ The main script specifies the entry point of your Electron application (in our c
The main script may look as follows: The main script may look as follows:
```js ```javascript fiddle='docs/fiddles/quick-start'
const { app, BrowserWindow } = require('electron') const { app, BrowserWindow } = require('electron')
function createWindow () { function createWindow () {
@ -66,7 +66,6 @@ function createWindow () {
}) })
win.loadFile('index.html') win.loadFile('index.html')
win.webContents.openDevTools()
} }
app.whenReady().then(createWindow) app.whenReady().then(createWindow)
@ -98,7 +97,7 @@ This is the web page you want to display once the application is initialized. Th
The `index.html` page looks as follows: The `index.html` page looks as follows:
```html ```html fiddle='docs/fiddles/quick-start'
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
@ -108,9 +107,11 @@ The `index.html` page looks as follows:
</head> </head>
<body style="background: white;"> <body style="background: white;">
<h1>Hello World!</h1> <h1>Hello World!</h1>
<p>
We are using node <script>document.write(process.versions.node)</script>, We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>, Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>. and Electron <script>document.write(process.versions.electron)</script>.
</p>
</body> </body>
</html> </html>
``` ```

2
docs/tutorial/recent-documents.md
View file

@ -24,7 +24,7 @@ Starting with a working application from the
[Quick Start Guide](quick-start.md), add the following lines to the [Quick Start Guide](quick-start.md), add the following lines to the
`main.js` file: `main.js` file:
```javascript ```javascript fiddle='docs/fiddles/features/recent-documents'
const { app } = require('electron') const { app } = require('electron')
app.addRecentDocument('/Users/USERNAME/Desktop/work.type') app.addRecentDocument('/Users/USERNAME/Desktop/work.type')

2
docs/tutorial/represented-file.md
View file

@ -24,7 +24,7 @@ Starting with a working application from the
[Quick Start Guide](quick-start.md), add the following lines to the [Quick Start Guide](quick-start.md), add the following lines to the
`main.js` file: `main.js` file:
```javascript ```javascript fiddle='docs/fiddles/features/represented-file'
const { app, BrowserWindow } = require('electron') const { app, BrowserWindow } = require('electron')
app.whenReady().then(() => { app.whenReady().then(() => {