Index: testing/notification/index.html |
diff --git a/testing/notification/index.html b/testing/notification/index.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..ab2f76d17413dd7887cf81ab42a15720e872cabb |
--- /dev/null |
+++ b/testing/notification/index.html |
@@ -0,0 +1,158 @@ |
+<!-- Testing Chrome Notifications. --> |
+<!-- Sat. May. 14, 2016, By: huangs@google.com. --> |
+<!-- Last update: Fri. Jul. 8, 2016. --> |
+<!DOCTYPE html> |
+<html> |
+<head> |
+ <meta charset="utf-8"> |
+ <title>Testing Chrome Notifications</title> |
+ <style type="text/css"> |
+.divCell { |
+ display: inline-block; |
+} |
+.leftSep { |
+ margin-left: 10px; |
+} |
+#divInputs div { |
+ display: flex; |
+ flex-direction: row; |
+ align-items: flex-start; |
+ justify-content: flex-start; |
+ margin-bottom: 10px; |
+} |
+#divInputs span { |
+ display: inline-block; |
+ width: 50px; |
+ text-align: right; |
+ margin-right: 10px; |
+} |
+input, textarea { |
+ width: 800px; |
+} |
+textarea { |
+ overflow: scroll; |
+ white-space: nowrap; |
+} |
+#divOut { |
+ margin-top: 20px; |
+ font-family: courier; |
+} |
+ </style> |
+ <script type="text/javascript"> |
+var MAX_OUT_LINE = 16; |
+var XML_PRESET1 = [ |
+ '<toast>', |
+ ' <visual>', |
+ ' <binding template="ToastImageAndText02">', |
+ ' <image id="1" src="file:///R:/a.png"/>', |
+ ' <text id="1">asdf</text>', |
+ ' <text id="2">fdsa</text>', |
+ ' </binding>', |
+ ' </visual>', |
+ '</toast>'].join('\n'); |
+ |
+var XML_PRESET2 = [ |
+ '<toast>', |
+ ' <visual>', |
+ ' <binding template="ToastGeneric">', |
+ ' <image id="1" placement="appLogoOverride" src="file:///R:/a.png"/>', |
+ ' <text id="1">asdf</text>', |
+ ' <text id="2">fdsa</text>', |
+ ' </binding>', |
+ ' </visual>', |
+ ' <actions>', |
+ ' <action activationType="background" content="Settings..." ' + |
+ 'arguments="setting"/>', |
+ ' </actions>', |
+ '</toast>'].join('\n'); |
+ |
+var TEXT_PRESET = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, ' + |
+ 'sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'; |
+ |
+function outputLine(s) { |
+ var divOut = document.querySelector('#divOut'); |
+ var ch_list = divOut.querySelectorAll('.line'); |
+ for (var i = 0; i < ch_list.length - (MAX_OUT_LINE - 1); ++i) { |
+ ch_list[i].parentNode.removeChild(ch_list[i]); |
+ } |
+ var line = document.createElement('div'); |
+ line.classList.add('line'); |
+ line.innerHTML = s; |
+ divOut.appendChild(line); |
+} |
+ |
+function showNotification() { |
+ var opts = {}; |
+ var title = document.querySelector('#tbTitle').value; |
+ var icon = document.querySelector('#tbIcon').value; |
+ var body = document.querySelector('#taBody').value; |
+ if (icon) |
+ opts.icon = icon; |
+ if (body) |
+ opts.body = body; |
+ var notif = new Notification(title, opts); |
+ notif.onclick = function(e) { outputLine('click'); } |
+ notif.onclose = function(e) { outputLine('close'); } |
+ notif.onerror = function(e) { outputLine('error'); } |
+ notif.onshow = function(e) { outputLine('show'); } |
+} |
+ |
+function bindAll() { |
+ document.querySelector('#tbTitle').value = 'Notification test'; |
+ document.querySelector('#taBody').value = TEXT_PRESET; |
+ document.querySelector('#tbIcon').value = |
+ 'https://www.google.ca/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png'; |
+ document.querySelector('#btnShow').addEventListener('click', function() { |
+ if (Notification.permission === 'granted') { |
+ showNotification(); |
+ } else { |
+ alert('Cannot show notification: ' + Notification.permission); |
+ } |
+ }); |
+ document.querySelector('#cmdText').addEventListener('click', function(e) { |
+ e.preventDefault(); |
+ document.querySelector('#taBody').value = TEXT_PRESET; |
+ }); |
+ document.querySelector('#cmdXml1').addEventListener('click', function(e) { |
+ e.preventDefault(); |
+ document.querySelector('#taBody').value = XML_PRESET1; |
+ }); |
+ document.querySelector('#cmdXml2').addEventListener('click', function(e) { |
+ e.preventDefault(); |
+ document.querySelector('#taBody').value = XML_PRESET2; |
+ }); |
+} |
+ |
+document.addEventListener('DOMContentLoaded', function() { |
+ bindAll(); |
+ if (Notification.permission !== 'granted') { |
+ Notification.requestPermission(function(permission) { |
+ console.log(permission); |
+ }); |
+ } |
+}); |
+ </script> |
+</head> |
+<body> |
+ <div id="divInputs"> |
+ <div class="row"><span>Title: </span><input id="tbTitle" type="text"></input></div> |
+ <div class="row"><span>Body: </span><textarea id="taBody" rows="16"></textarea></div> |
+ <div class="row"><span>Image: </span><input id="tbIcon" type="text"></input></div> |
+ </div> |
+ <div> |
+ <div class="divCell"> |
+ <button id="btnShow">Show Notification</btn> |
+ </div> |
+ <div class="divCell leftSep"> |
+ <a href="#" id="cmdText">Text Preset</a> |
+ </div> |
+ <div class="divCell leftSep"> |
+ <a href="#" id="cmdXml1">XML Preset 1</a> |
+ </div> |
+ <div class="divCell leftSep"> |
+ <a href="#" id="cmdXml2">XML Preset 2</a> |
+ </div> |
+ </div> |
+ <div id="divOut"></div> |
+</body> |
+</html> |