diff --git a/docs/fiddles/native-ui/notifications/basic-notification/index.html b/docs/fiddles/native-ui/notifications/basic-notification/index.html new file mode 100644 index 00000000000..2ffd4545370 --- /dev/null +++ b/docs/fiddles/native-ui/notifications/basic-notification/index.html @@ -0,0 +1,22 @@ + + + + + + +
+

Basic notification

+ Supports: Win 7+, macOS, Linux (that supports libnotify)| Process: Renderer +
+
+ +
+

This demo demonstrates a basic notification. Text only.

+
+
+ + + diff --git a/docs/fiddles/native-ui/notifications/basic-notification/main.js b/docs/fiddles/native-ui/notifications/basic-notification/main.js new file mode 100644 index 00000000000..78603a253c9 --- /dev/null +++ b/docs/fiddles/native-ui/notifications/basic-notification/main.js @@ -0,0 +1,25 @@ +const { BrowserWindow, app } = require('electron') + +let mainWindow = null + +function createWindow () { + const windowOptions = { + width: 600, + height: 300, + title: 'Basic Notification', + webPreferences: { + nodeIntegration: true + } + } + + mainWindow = new BrowserWindow(windowOptions) + mainWindow.loadFile('index.html') + + mainWindow.on('closed', () => { + mainWindow = null + }) +} + +app.on('ready', () => { + createWindow() +}) diff --git a/docs/fiddles/native-ui/notifications/basic-notification/renderer.js b/docs/fiddles/native-ui/notifications/basic-notification/renderer.js new file mode 100644 index 00000000000..a46583c683d --- /dev/null +++ b/docs/fiddles/native-ui/notifications/basic-notification/renderer.js @@ -0,0 +1,14 @@ +const notification = { + title: 'Basic Notification', + body: 'Short message part' +} + +const notificationButton = document.getElementById('basic-noti') + +notificationButton.addEventListener('click', () => { + const myNotification = new window.Notification(notification.title, notification) + + myNotification.onclick = () => { + console.log('Notification clicked') + } +}) diff --git a/docs/fiddles/native-ui/notifications/notification-with-image/index.html b/docs/fiddles/native-ui/notifications/notification-with-image/index.html new file mode 100644 index 00000000000..5b9df4e78ec --- /dev/null +++ b/docs/fiddles/native-ui/notifications/notification-with-image/index.html @@ -0,0 +1,22 @@ + + + + + + +
+

Notification with image

+ Supports: Win 7+, macOS, Linux (that supports libnotify)| Process: Renderer +
+
+ +
+

This demo demonstrates an advanced notification. Both text and image.

+
+
+ + + diff --git a/docs/fiddles/native-ui/notifications/notification-with-image/main.js b/docs/fiddles/native-ui/notifications/notification-with-image/main.js new file mode 100644 index 00000000000..997426d5920 --- /dev/null +++ b/docs/fiddles/native-ui/notifications/notification-with-image/main.js @@ -0,0 +1,25 @@ +const { BrowserWindow, app } = require('electron') + +let mainWindow = null + +function createWindow () { + const windowOptions = { + width: 600, + height: 300, + title: 'Advanced Notification', + webPreferences: { + nodeIntegration: true + } + } + + mainWindow = new BrowserWindow(windowOptions) + mainWindow.loadFile('index.html') + + mainWindow.on('closed', () => { + mainWindow = null + }) +} + +app.on('ready', () => { + createWindow() +}) diff --git a/docs/fiddles/native-ui/notifications/notification-with-image/renderer.js b/docs/fiddles/native-ui/notifications/notification-with-image/renderer.js new file mode 100644 index 00000000000..84c43d2e111 --- /dev/null +++ b/docs/fiddles/native-ui/notifications/notification-with-image/renderer.js @@ -0,0 +1,14 @@ +const notification = { + title: 'Notification with image', + body: 'Short message plus a custom image', + icon: 'https://raw.githubusercontent.com/electron/electron-api-demos/v2.0.2/assets/img/programming.png' +} +const notificationButton = document.getElementById('advanced-noti') + +notificationButton.addEventListener('click', () => { + const myNotification = new window.Notification(notification.title, notification) + + myNotification.onclick = () => { + console.log('Notification clicked') + } +})