Pchen0/electron

docs: add notification examples (#20528)

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 <[email protected]>

Harendra Singh 5 years ago

parent

16d4ace800

commit

93788e76e0

6 changed files with 122 additions and 0 deletions

Split View Show Diff Stats

						
							+ 22
							
							- 0
						
docs/fiddles/native-ui/notifications/basic-notification/index.html
							 
								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
							
							- 0
						
docs/fiddles/native-ui/notifications/basic-notification/main.js
							 
								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
							
							- 0
						
docs/fiddles/native-ui/notifications/basic-notification/renderer.js
							 
								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
							
							- 0
						
docs/fiddles/native-ui/notifications/notification-with-image/index.html
							 
								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
							
							- 0
						
docs/fiddles/native-ui/notifications/notification-with-image/main.js
							 
								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
							
							- 0
						
docs/fiddles/native-ui/notifications/notification-with-image/renderer.js
							 
								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')
			
				+  }
			
				+})

docs: add notification examples (#20528)

+ 22 - 0 docs/fiddles/native-ui/notifications/basic-notification/index.html View File

+ 25 - 0 docs/fiddles/native-ui/notifications/basic-notification/main.js View File

+ 14 - 0 docs/fiddles/native-ui/notifications/basic-notification/renderer.js View File

+ 22 - 0 docs/fiddles/native-ui/notifications/notification-with-image/index.html View File

+ 25 - 0 docs/fiddles/native-ui/notifications/notification-with-image/main.js View File

+ 14 - 0 docs/fiddles/native-ui/notifications/notification-with-image/renderer.js View File

+ 22 - 0
docs/fiddles/native-ui/notifications/basic-notification/index.html
View File

+ 25 - 0
docs/fiddles/native-ui/notifications/basic-notification/main.js
View File

+ 14 - 0
docs/fiddles/native-ui/notifications/basic-notification/renderer.js
View File

+ 22 - 0
docs/fiddles/native-ui/notifications/notification-with-image/index.html
View File

+ 25 - 0
docs/fiddles/native-ui/notifications/notification-with-image/main.js
View File

+ 14 - 0
docs/fiddles/native-ui/notifications/notification-with-image/renderer.js
View File