diff --git a/docs/fiddles/features/drag-and-drop/index.html b/docs/fiddles/features/drag-and-drop/index.html new file mode 100644 index 00000000000..d451042521a --- /dev/null +++ b/docs/fiddles/features/drag-and-drop/index.html @@ -0,0 +1,18 @@ + + + + + Hello World! + + + +

Hello World!

+

+ We are using node , + Chrome , + and Electron . +

+ Drag me + + + diff --git a/docs/fiddles/features/drag-and-drop/main.js b/docs/fiddles/features/drag-and-drop/main.js new file mode 100644 index 00000000000..bdc28bbf450 --- /dev/null +++ b/docs/fiddles/features/drag-and-drop/main.js @@ -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() + } +}) diff --git a/docs/fiddles/features/drag-and-drop/renderer.js b/docs/fiddles/features/drag-and-drop/renderer.js new file mode 100644 index 00000000000..33f328e30ae --- /dev/null +++ b/docs/fiddles/features/drag-and-drop/renderer.js @@ -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}`) +} diff --git a/docs/fiddles/features/keyboard-shortcuts/global/index.html b/docs/fiddles/features/keyboard-shortcuts/global/index.html new file mode 100644 index 00000000000..a3855d2640d --- /dev/null +++ b/docs/fiddles/features/keyboard-shortcuts/global/index.html @@ -0,0 +1,16 @@ + + + + + Hello World! + + + +

Hello World!

+

+ We are using node , + Chrome , + and Electron . +

+ + diff --git a/docs/fiddles/features/keyboard-shortcuts/global/main.js b/docs/fiddles/features/keyboard-shortcuts/global/main.js new file mode 100644 index 00000000000..5b4196f7781 --- /dev/null +++ b/docs/fiddles/features/keyboard-shortcuts/global/main.js @@ -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() + } +}) diff --git a/docs/fiddles/features/keyboard-shortcuts/interception-from-main/index.html b/docs/fiddles/features/keyboard-shortcuts/interception-from-main/index.html new file mode 100644 index 00000000000..6f9d1abf860 --- /dev/null +++ b/docs/fiddles/features/keyboard-shortcuts/interception-from-main/index.html @@ -0,0 +1,14 @@ + + + + + Hello World! + + + +

Hello World!

+ We are using node , + Chrome , + and Electron . + + diff --git a/docs/fiddles/features/keyboard-shortcuts/interception-from-main/main.js b/docs/fiddles/features/keyboard-shortcuts/interception-from-main/main.js new file mode 100644 index 00000000000..767e574b11a --- /dev/null +++ b/docs/fiddles/features/keyboard-shortcuts/interception-from-main/main.js @@ -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() + } + }) +}) diff --git a/docs/fiddles/features/keyboard-shortcuts/local/index.html b/docs/fiddles/features/keyboard-shortcuts/local/index.html new file mode 100644 index 00000000000..a3855d2640d --- /dev/null +++ b/docs/fiddles/features/keyboard-shortcuts/local/index.html @@ -0,0 +1,16 @@ + + + + + Hello World! + + + +

Hello World!

+

+ We are using node , + Chrome , + and Electron . +

+ + diff --git a/docs/fiddles/features/keyboard-shortcuts/local/main.js b/docs/fiddles/features/keyboard-shortcuts/local/main.js new file mode 100644 index 00000000000..d4c5006ef7e --- /dev/null +++ b/docs/fiddles/features/keyboard-shortcuts/local/main.js @@ -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() + } +}) diff --git a/docs/fiddles/features/macos-dark-mode/index.html b/docs/fiddles/features/macos-dark-mode/index.html new file mode 100644 index 00000000000..dfd1e075fd7 --- /dev/null +++ b/docs/fiddles/features/macos-dark-mode/index.html @@ -0,0 +1,19 @@ + + + + + Hello World! + + + + +

Hello World!

+

Current theme source: System

+ + + + + + + + diff --git a/docs/fiddles/features/macos-dark-mode/main.js b/docs/fiddles/features/macos-dark-mode/main.js new file mode 100644 index 00000000000..e74b345d367 --- /dev/null +++ b/docs/fiddles/features/macos-dark-mode/main.js @@ -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() + } +}) diff --git a/docs/fiddles/features/macos-dark-mode/renderer.js b/docs/fiddles/features/macos-dark-mode/renderer.js new file mode 100644 index 00000000000..737f19f51cb --- /dev/null +++ b/docs/fiddles/features/macos-dark-mode/renderer.js @@ -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' +}) diff --git a/docs/fiddles/features/macos-dark-mode/styles.css b/docs/fiddles/features/macos-dark-mode/styles.css new file mode 100644 index 00000000000..eb6dd2f2434 --- /dev/null +++ b/docs/fiddles/features/macos-dark-mode/styles.css @@ -0,0 +1,7 @@ +@media (prefers-color-scheme: dark) { + body { background: #333; color: white; } +} + +@media (prefers-color-scheme: light) { + body { background: #ddd; color: black; } +} diff --git a/docs/fiddles/features/macos-dock-menu/index.html b/docs/fiddles/features/macos-dock-menu/index.html new file mode 100644 index 00000000000..a3855d2640d --- /dev/null +++ b/docs/fiddles/features/macos-dock-menu/index.html @@ -0,0 +1,16 @@ + + + + + Hello World! + + + +

Hello World!

+

+ We are using node , + Chrome , + and Electron . +

+ + diff --git a/docs/fiddles/features/macos-dock-menu/main.js b/docs/fiddles/features/macos-dock-menu/main.js new file mode 100644 index 00000000000..f57caf628cf --- /dev/null +++ b/docs/fiddles/features/macos-dock-menu/main.js @@ -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() + } +}) diff --git a/docs/fiddles/features/notifications/main/index.html b/docs/fiddles/features/notifications/main/index.html new file mode 100644 index 00000000000..a3855d2640d --- /dev/null +++ b/docs/fiddles/features/notifications/main/index.html @@ -0,0 +1,16 @@ + + + + + Hello World! + + + +

Hello World!

+

+ We are using node , + Chrome , + and Electron . +

+ + diff --git a/docs/fiddles/features/notifications/main/main.js b/docs/fiddles/features/notifications/main/main.js new file mode 100644 index 00000000000..2f9dec51e70 --- /dev/null +++ b/docs/fiddles/features/notifications/main/main.js @@ -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() + } +}) diff --git a/docs/fiddles/features/notifications/renderer/index.html b/docs/fiddles/features/notifications/renderer/index.html new file mode 100644 index 00000000000..4d6de7642e1 --- /dev/null +++ b/docs/fiddles/features/notifications/renderer/index.html @@ -0,0 +1,17 @@ + + + + + Hello World! + + + +

Hello World!

+

+ We are using node , + Chrome , + and Electron . +

+ + + diff --git a/docs/fiddles/features/notifications/renderer/main.js b/docs/fiddles/features/notifications/renderer/main.js new file mode 100644 index 00000000000..4502be68147 --- /dev/null +++ b/docs/fiddles/features/notifications/renderer/main.js @@ -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() + } +}) diff --git a/docs/fiddles/features/notifications/renderer/renderer.js b/docs/fiddles/features/notifications/renderer/renderer.js new file mode 100644 index 00000000000..7ea004cba15 --- /dev/null +++ b/docs/fiddles/features/notifications/renderer/renderer.js @@ -0,0 +1,7 @@ +const myNotification = new Notification('Title', { + body: 'Notification from the Renderer process' +}) + +myNotification.onclick = () => { + console.log('Notification clicked') +} diff --git a/docs/fiddles/features/offscreen-rendering/index.html b/docs/fiddles/features/offscreen-rendering/index.html new file mode 100644 index 00000000000..0da80aefd88 --- /dev/null +++ b/docs/fiddles/features/offscreen-rendering/index.html @@ -0,0 +1,15 @@ + + + + Hello World! + + + +

Hello World!

+

+ We are using node , + Chrome , + and Electron . +

+ + diff --git a/docs/fiddles/features/offscreen-rendering/main.js b/docs/fiddles/features/offscreen-rendering/main.js new file mode 100644 index 00000000000..38bbb991a2d --- /dev/null +++ b/docs/fiddles/features/offscreen-rendering/main.js @@ -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() + } +}) diff --git a/docs/fiddles/features/online-detection/main/index.html b/docs/fiddles/features/online-detection/main/index.html new file mode 100644 index 00000000000..4d6de7642e1 --- /dev/null +++ b/docs/fiddles/features/online-detection/main/index.html @@ -0,0 +1,17 @@ + + + + + Hello World! + + + +

Hello World!

+

+ We are using node , + Chrome , + and Electron . +

+ + + diff --git a/docs/fiddles/features/online-detection/main/main.js b/docs/fiddles/features/online-detection/main/main.js new file mode 100644 index 00000000000..66066a3a7ca --- /dev/null +++ b/docs/fiddles/features/online-detection/main/main.js @@ -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() + } +}) diff --git a/docs/fiddles/features/online-detection/main/renderer.js b/docs/fiddles/features/online-detection/main/renderer.js new file mode 100644 index 00000000000..0cf53e65866 --- /dev/null +++ b/docs/fiddles/features/online-detection/main/renderer.js @@ -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() diff --git a/docs/fiddles/features/online-detection/renderer/index.html b/docs/fiddles/features/online-detection/renderer/index.html new file mode 100644 index 00000000000..4d6de7642e1 --- /dev/null +++ b/docs/fiddles/features/online-detection/renderer/index.html @@ -0,0 +1,17 @@ + + + + + Hello World! + + + +

Hello World!

+

+ We are using node , + Chrome , + and Electron . +

+ + + diff --git a/docs/fiddles/features/online-detection/renderer/main.js b/docs/fiddles/features/online-detection/renderer/main.js new file mode 100644 index 00000000000..0c5ff987b5b --- /dev/null +++ b/docs/fiddles/features/online-detection/renderer/main.js @@ -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() + } +}) diff --git a/docs/fiddles/features/online-detection/renderer/renderer.js b/docs/fiddles/features/online-detection/renderer/renderer.js new file mode 100644 index 00000000000..724b6c36bc9 --- /dev/null +++ b/docs/fiddles/features/online-detection/renderer/renderer.js @@ -0,0 +1,6 @@ +const alertOnlineStatus = () => { window.alert(navigator.onLine ? 'online' : 'offline') } + +window.addEventListener('online', alertOnlineStatus) +window.addEventListener('offline', alertOnlineStatus) + +alertOnlineStatus() diff --git a/docs/fiddles/features/progress-bar/index.html b/docs/fiddles/features/progress-bar/index.html new file mode 100644 index 00000000000..a3855d2640d --- /dev/null +++ b/docs/fiddles/features/progress-bar/index.html @@ -0,0 +1,16 @@ + + + + + Hello World! + + + +

Hello World!

+

+ We are using node , + Chrome , + and Electron . +

+ + diff --git a/docs/fiddles/features/progress-bar/main.js b/docs/fiddles/features/progress-bar/main.js new file mode 100644 index 00000000000..a53bf6b9856 --- /dev/null +++ b/docs/fiddles/features/progress-bar/main.js @@ -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() + } +}) diff --git a/docs/fiddles/features/recent-documents/index.html b/docs/fiddles/features/recent-documents/index.html new file mode 100644 index 00000000000..a3855d2640d --- /dev/null +++ b/docs/fiddles/features/recent-documents/index.html @@ -0,0 +1,16 @@ + + + + + Hello World! + + + +

Hello World!

+

+ We are using node , + Chrome , + and Electron . +

+ + diff --git a/docs/fiddles/features/recent-documents/main.js b/docs/fiddles/features/recent-documents/main.js new file mode 100644 index 00000000000..60ba1f814db --- /dev/null +++ b/docs/fiddles/features/recent-documents/main.js @@ -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() + } +}) diff --git a/docs/fiddles/features/represented-file/index.html b/docs/fiddles/features/represented-file/index.html new file mode 100644 index 00000000000..a3855d2640d --- /dev/null +++ b/docs/fiddles/features/represented-file/index.html @@ -0,0 +1,16 @@ + + + + + Hello World! + + + +

Hello World!

+

+ We are using node , + Chrome , + and Electron . +

+ + diff --git a/docs/fiddles/features/represented-file/main.js b/docs/fiddles/features/represented-file/main.js new file mode 100644 index 00000000000..61b6ef3316b --- /dev/null +++ b/docs/fiddles/features/represented-file/main.js @@ -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() + } +}) diff --git a/docs/fiddles/quick-start/index.html b/docs/fiddles/quick-start/index.html new file mode 100644 index 00000000000..a3855d2640d --- /dev/null +++ b/docs/fiddles/quick-start/index.html @@ -0,0 +1,16 @@ + + + + + Hello World! + + + +

Hello World!

+

+ We are using node , + Chrome , + and Electron . +

+ + diff --git a/docs/fiddles/quick-start/main.js b/docs/fiddles/quick-start/main.js new file mode 100644 index 00000000000..4502be68147 --- /dev/null +++ b/docs/fiddles/quick-start/main.js @@ -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() + } +}) diff --git a/docs/tutorial/dark-mode.md b/docs/tutorial/dark-mode.md index 947675e12e7..fee69d5896a 100644 --- a/docs/tutorial/dark-mode.md +++ b/docs/tutorial/dark-mode.md @@ -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: -```js +```javascript const { ipcRenderer } = require('electron') 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. * Upon receiving `dark-mode:system`, we reset the `themeSource` to `system`. -```js +```javascript const { app, BrowserWindow, ipcMain, nativeTheme } = require('electron') 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: -```css +```css fiddle='docs/fiddles/features/macos-dark-mode' @media (prefers-color-scheme: dark) { body { background: #333; color: white; } } diff --git a/docs/tutorial/keyboard-shortcuts.md b/docs/tutorial/keyboard-shortcuts.md index 43e39951f55..bfdbd140b38 100644 --- a/docs/tutorial/keyboard-shortcuts.md +++ b/docs/tutorial/keyboard-shortcuts.md @@ -17,7 +17,7 @@ Starting with a working application from the [Quick Start Guide](quick-start.md), update the `main.js` file with the following lines: -```js +```javascript fiddle='docs/fiddles/features/keyboard-shortcuts/local' const { Menu, MenuItem } = require('electron') 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 following lines: -```js +```javascript fiddle='docs/fiddles/features/keyboard-shortcuts/global' const { app, globalShortcut } = require('electron') 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 following lines: -```js +```javascript fiddle='docs/fiddles/features/keyboard-shortcuts/interception-from-main' const { app, BrowserWindow } = require('electron') app.whenReady().then(() => { diff --git a/docs/tutorial/macos-dock.md b/docs/tutorial/macos-dock.md index 3116d413ff7..b61a0291daa 100644 --- a/docs/tutorial/macos-dock.md +++ b/docs/tutorial/macos-dock.md @@ -24,7 +24,7 @@ Starting with a working application from the [Quick Start Guide](quick-start.md), update the `main.js` file with the following lines: -```javascript +```javascript fiddle='docs/fiddles/features/macos-dock-menu' const { app, Menu } = require('electron') const dockMenu = Menu.buildFromTemplate([ diff --git a/docs/tutorial/native-file-drag-drop.md b/docs/tutorial/native-file-drag-drop.md index 4676421b5b9..c14016e0d0b 100644 --- a/docs/tutorial/native-file-drag-drop.md +++ b/docs/tutorial/native-file-drag-drop.md @@ -25,7 +25,7 @@ Starting with a working application from the and add the following lines to the `renderer.js` file: -```js +```javascript const { ipcRenderer } = require('electron') 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 being dragged and an icon: -```javascript +```javascript fiddle='docs/fiddles/features/drag-and-drop' const { ipcMain } = require('electron') ipcMain.on('ondragstart', (event, filePath) => { diff --git a/docs/tutorial/notifications.md b/docs/tutorial/notifications.md index 1703d119efe..072e3de9aef 100644 --- a/docs/tutorial/notifications.md +++ b/docs/tutorial/notifications.md @@ -28,7 +28,7 @@ Assuming you have a working Electron application from the and add the `renderer.js` file: -```js +```javascript fiddle='docs/fiddles/features/notifications/renderer' const myNotification = new Notification('Title', { 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 [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') function showNotification () { diff --git a/docs/tutorial/offscreen-rendering.md b/docs/tutorial/offscreen-rendering.md index 74bfff02be4..9e2f8e9fb7d 100644 --- a/docs/tutorial/offscreen-rendering.md +++ b/docs/tutorial/offscreen-rendering.md @@ -34,7 +34,7 @@ To enable this mode GPU acceleration has to be disabled by calling the ## Usage -``` javascript +```javascript fiddle='docs/fiddles/features/offscreen-rendering' const { app, BrowserWindow } = require('electron') app.disableHardwareAcceleration() diff --git a/docs/tutorial/online-offline-events.md b/docs/tutorial/online-offline-events.md index c63e90ff9ed..9266618b7af 100644 --- a/docs/tutorial/online-offline-events.md +++ b/docs/tutorial/online-offline-events.md @@ -34,11 +34,11 @@ let onlineStatusWindow app.whenReady().then(() => { 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 `` tag: ```html @@ -47,7 +47,7 @@ closing `` tag: and add the `renderer.js` file: -```javascript +```javascript fiddle='docs/fiddles/features/online-detection/renderer' const alertOnlineStatus = () => { window.alert(navigator.onLine ? 'online' : 'offline') } window.addEventListener('online', alertOnlineStatus) @@ -78,7 +78,7 @@ let onlineStatusWindow app.whenReady().then(() => { 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) => { @@ -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 `` tag: ```html @@ -95,7 +95,7 @@ closing `` tag: and add the `renderer.js` file: -```javascript +```javascript fiddle='docs/fiddles/features/online-detection/main' const { ipcRenderer } = require('electron') const updateOnlineStatus = () => { ipcRenderer.send('online-status-changed', navigator.onLine ? 'online' : 'offline') } diff --git a/docs/tutorial/progress-bar.md b/docs/tutorial/progress-bar.md index 4b527431605..9d4832dfa6f 100644 --- a/docs/tutorial/progress-bar.md +++ b/docs/tutorial/progress-bar.md @@ -45,7 +45,7 @@ Starting with a working application from the [Quick Start Guide](quick-start.md), add the following lines to the `main.js` file: -```javascript +```javascript fiddle='docs/fiddles/features/progress-bar' const { BrowserWindow } = require('electron') const win = new BrowserWindow() diff --git a/docs/tutorial/quick-start.md b/docs/tutorial/quick-start.md index 05a47f43bd4..b3edca05f76 100644 --- a/docs/tutorial/quick-start.md +++ b/docs/tutorial/quick-start.md @@ -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: -```plain +```plaintext my-electron-app/ ├── package.json ├── 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: -```js +```javascript fiddle='docs/fiddles/quick-start' const { app, BrowserWindow } = require('electron') function createWindow () { @@ -66,7 +66,6 @@ function createWindow () { }) win.loadFile('index.html') - win.webContents.openDevTools() } 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: -```html +```html fiddle='docs/fiddles/quick-start' @@ -108,9 +107,11 @@ The `index.html` page looks as follows:

Hello World!

- We are using node , - Chrome , - and Electron . +

+ We are using node , + Chrome , + and Electron . +

``` diff --git a/docs/tutorial/recent-documents.md b/docs/tutorial/recent-documents.md index 78418d9055d..e23df89834e 100644 --- a/docs/tutorial/recent-documents.md +++ b/docs/tutorial/recent-documents.md @@ -24,7 +24,7 @@ Starting with a working application from the [Quick Start Guide](quick-start.md), add the following lines to the `main.js` file: -```javascript +```javascript fiddle='docs/fiddles/features/recent-documents' const { app } = require('electron') app.addRecentDocument('/Users/USERNAME/Desktop/work.type') diff --git a/docs/tutorial/represented-file.md b/docs/tutorial/represented-file.md index 3e9eee30a44..c59c0039a2b 100644 --- a/docs/tutorial/represented-file.md +++ b/docs/tutorial/represented-file.md @@ -24,7 +24,7 @@ Starting with a working application from the [Quick Start Guide](quick-start.md), add the following lines to the `main.js` file: -```javascript +```javascript fiddle='docs/fiddles/features/represented-file' const { app, BrowserWindow } = require('electron') app.whenReady().then(() => { diff --git a/package.json b/package.json index 38ef5fbf09f..6f3369c8709 100644 --- a/package.json +++ b/package.json @@ -148,4 +148,4 @@ "@types/temp": "^0.8.34", "aws-sdk": "^2.727.1" } -} \ No newline at end of file +}