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

docs: add notification examples (#20528)

Browse source 
Refs #20442

Adds the basic notification and notification with custom image examples from electron-api-demos into runnable Fiddle examples.

Gist links to Fiddles (same as code submitted in this PR):
Basic Notification: https://gist.github.com/102945f83f559e7944797175d8fd8af4
Notification with image: https://gist.github.com/2688bf4bfc27ce02f5d74224828eb928

Co-Authored-By: Erick Zhao <erick@hotmail.ca>
This commit is contained in:
Harendra Singh 2019-10-16 02:36:58 +05:30 committed by Shelley Vohr
parent 16d4ace800
commit 93788e76e0
6 changed files with 122 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
docs/fiddles/native-ui/notifications/basic-notification/index.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div>
<h3>Basic notification</h3>
<i>Supports: Win 7+, macOS, Linux (that supports libnotify)<span>|</span> Process: Renderer</i>
<div>
<div>
<button id="basic-noti">View demo</button>
</div>
<p>This demo demonstrates a basic notification. Text only.</p>
</div>
</div>
<script>
// You can also require other files to run in this process
require('./renderer.js')
</script>
</body>
</html>

25
docs/fiddles/native-ui/notifications/basic-notification/main.js Normal file
View file

@ -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()
})

14
docs/fiddles/native-ui/notifications/basic-notification/renderer.js Normal file
View file

@ -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')
}
})

22
docs/fiddles/native-ui/notifications/notification-with-image/index.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div>
<h3>Notification with image</h3>
<i>Supports: Win 7+, macOS, Linux (that supports libnotify)<span>|</span> Process: Renderer</i>
<div>
<div>
<button id="advanced-noti">View demo</button>
</div>
<p>This demo demonstrates an advanced notification. Both text and image.</p>
</div>
</div>
<script>
// You can also require other files to run in this process
require('./renderer.js')
</script>
</body>
</html>

25
docs/fiddles/native-ui/notifications/notification-with-image/main.js Normal file
View file

@ -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()
})

14
docs/fiddles/native-ui/notifications/notification-with-image/renderer.js Normal file
View file

@ -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')
}
})