diff options
| author | Kirill Burtsev <kirill.burtsev@qt.io> | 2019-03-19 10:15:07 +0100 |
|---|---|---|
| committer | Kirill Burtsev <kirill.burtsev@qt.io> | 2019-05-20 13:50:39 +0200 |
| commit | 8e8cd9ea03dbdfab4d1707ca751b72dd6ac3c178 (patch) | |
| tree | b99e1135cca621c42a5ff8e4e298c48122526e3b /examples/webenginewidgets/notifications/data | |
| parent | 819aa370ec413ba1ea4506d591d4debe87c21831 (diff) | |
Web Notifications widgets' API example
Change-Id: If6aba0e9da1ece59c91be03ae2f56513e758f5e5
Reviewed-by: Kai Koehne <kai.koehne@qt.io>
Reviewed-by: Leena Miettinen <riitta-leena.miettinen@qt.io>
Diffstat (limited to 'examples/webenginewidgets/notifications/data')
| -rw-r--r-- | examples/webenginewidgets/notifications/data/data.qrc | 6 | ||||
| -rw-r--r-- | examples/webenginewidgets/notifications/data/icon.png | bin | 0 -> 2252 bytes | |||
| -rw-r--r-- | examples/webenginewidgets/notifications/data/index.html | 90 |
3 files changed, 96 insertions, 0 deletions
diff --git a/examples/webenginewidgets/notifications/data/data.qrc b/examples/webenginewidgets/notifications/data/data.qrc new file mode 100644 index 000000000..bc252b89c --- /dev/null +++ b/examples/webenginewidgets/notifications/data/data.qrc @@ -0,0 +1,6 @@ +<RCC> + <qresource prefix="/"> + <file>index.html</file> + <file>icon.png</file> + </qresource> +</RCC> diff --git a/examples/webenginewidgets/notifications/data/icon.png b/examples/webenginewidgets/notifications/data/icon.png Binary files differnew file mode 100644 index 000000000..4c3870c06 --- /dev/null +++ b/examples/webenginewidgets/notifications/data/icon.png diff --git a/examples/webenginewidgets/notifications/data/index.html b/examples/webenginewidgets/notifications/data/index.html new file mode 100644 index 000000000..ebb73b573 --- /dev/null +++ b/examples/webenginewidgets/notifications/data/index.html @@ -0,0 +1,90 @@ +<!doctype html> +<html> +<head> +<title>Web Notifications Example</title> +<script> + var notificationsCreated = 0 + + function getPermission() { return document.Notification } + function resetPermission(permission = 'default') { + document.Notification = permission + document.getElementById('state').value = getPermission() + } + + function createNotification() { + let title = 'Notification #' + ++notificationsCreated + let options = { body: 'Visit doc.qt.io for more info!', icon: 'icon.png', } + + let notification = new Notification(title, options) + document.notification = notification + + notification.onerror = function(error) { + document.getElementById('act').value += ' with error' + document.notification = null + } + notification.onshow = function() { + document.getElementById('act').value += ', shown' + document.getElementById('close').style.display = 'inline' + } + notification.onclick = function() { + document.getElementById('act').value += ', clicked' + } + notification.onclose = function() { + if (document.notification && notification == document.notification) { + document.getElementById('act').value += ' and closed' + document.getElementById('close').style.display = 'none' + document.notification = null + } + } + + console.log('...notification created [Title: ' + title + ']') + document.getElementById('act').value = 'Notification was created' + } + + function onMakeNotification() { + if (getPermission() == 'granted') { + createNotification() + } else if (getPermission() == 'denied') { + setTimeout(function() { + if (window.confirm('Notifications are disabled!\n' + + 'Permission needs to be granted by user. Reset?')) + resetPermission() + }, 1) + } else { + Notification.requestPermission().then(function (permission) { + console.info('notifications request: ' + permission) + resetPermission(permission) + if (permission == 'granted') + createNotification() + }) + } + } + + function closeNotification() { if (document.notification) document.notification.close() } + + document.addEventListener('DOMContentLoaded', function() { resetPermission(Notification.permission) }) +</script> +</head> +<body style='text-align:center;'> + <h3>Click the button to send a notification</h3> + + <button onclick='onMakeNotification()'>Notify!</button> + + <p> + <output id='act'></output> + <button id='close' style='display: none;' onclick='closeNotification()'>Close</button> + </p><br> + + <p> + <label for='state'>Permission:</label> + <output id='state'></output> + <button onclick='resetPermission()'>Reset</button> + </p><br> + + <h4>More info can be found on:</h4> + <ul style='list-style-type: none;'> + <li>W3 <a href='https://www.w3.org/TR/notifications'>Web Notifications</a> standard</li> + <li>Documentation for <a href='https://doc.qt.io'>Qt WebEngine</a> module</li> + </ul> +</body> +</html> |
