2017-03-21 11:15:18 -05:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<h1>Symphony Electron API Demo</h1>
|
|
|
|
|
<hr>
|
|
|
|
|
<p>Notifications:<p>
|
|
|
|
|
<button id='notf'>show notification</button>
|
|
|
|
|
<p>
|
|
|
|
|
<label for='title'>title:</label>
|
|
|
|
|
<input type='text' id='title' value='Notification Demo'/>
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
<label for='body'>body:</label>
|
|
|
|
|
<input type='text' id='body' value='Some message'/>
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
<label for='image'>image url:</label>
|
|
|
|
|
<input type='text' id='image' value='https://lh3.googleusercontent.com/-s2PXL6wWMCc/AAAAAAAAAAI/AAAAAAAAAAA/AAomvV2gUNMMeFsOijwVVpihfg_anpKWQA/s32-c-mo/photo.jpg'/>
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
<label for='flash'>flash:</label>
|
|
|
|
|
<input type='checkbox' id='flash'/>
|
|
|
|
|
</p>
|
2017-03-29 22:11:08 -05:00
|
|
|
<p>
|
|
|
|
|
<label for='sticky'>sticky:</label>
|
|
|
|
|
<input type='checkbox' id='sticky'/>
|
|
|
|
|
</p>
|
2017-03-21 11:15:18 -05:00
|
|
|
<p>
|
|
|
|
|
<label for='color'>color:</label>
|
|
|
|
|
<input type='text' id='color' value='white'/>
|
2017-03-29 22:11:08 -05:00
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
<label for='tag'>tag:</label>
|
|
|
|
|
<input type='text' id='tag' value=''/>
|
|
|
|
|
</p>
|
2017-03-21 11:15:18 -05:00
|
|
|
<br>
|
|
|
|
|
<hr>
|
|
|
|
|
<p>Badge Count:<p>
|
|
|
|
|
<button id='inc-badge'>increment badge count</button>
|
|
|
|
|
<br>
|
|
|
|
|
<button id='clear-badge'>clear badge count</button>
|
2017-04-11 13:58:35 -05:00
|
|
|
<br>
|
|
|
|
|
<hr>
|
|
|
|
|
<p>Screen Snippet (note: currently only works on mac):</p>
|
|
|
|
|
<button id='snippet'>get snippet</button>
|
|
|
|
|
<p>snippet output:</p>
|
|
|
|
|
<image id='snippet-img'/>
|
2017-03-21 11:15:18 -05:00
|
|
|
</body>
|
|
|
|
|
<script>
|
|
|
|
|
var notfEl = document.getElementById('notf');
|
2017-03-29 19:42:15 -05:00
|
|
|
var num = 0;
|
|
|
|
|
|
|
|
|
|
// note: notification will close when clicked
|
2017-03-21 11:15:18 -05:00
|
|
|
notfEl.addEventListener('click', function() {
|
|
|
|
|
var title = document.getElementById('title').value;
|
|
|
|
|
var body = document.getElementById('body').value;
|
|
|
|
|
var imageUrl = document.getElementById('image').value;
|
|
|
|
|
var shouldFlash = document.getElementById('flash').checked;
|
2017-03-29 22:11:08 -05:00
|
|
|
var shouldStick = document.getElementById('sticky').checked;
|
2017-03-21 11:15:18 -05:00
|
|
|
var color = document.getElementById('color').value;
|
2017-03-29 22:11:08 -05:00
|
|
|
var tag = document.getElementById('tag').value;
|
2017-03-21 11:15:18 -05:00
|
|
|
|
2017-03-29 19:42:15 -05:00
|
|
|
num++;
|
|
|
|
|
|
2017-03-21 11:15:18 -05:00
|
|
|
var notf = new SYM_API.Notification(title, {
|
2017-03-29 22:11:08 -05:00
|
|
|
body: (body + ' num=' + num + ' tag=' + tag),
|
2017-03-21 11:15:18 -05:00
|
|
|
image: imageUrl,
|
|
|
|
|
flash: shouldFlash,
|
2017-03-28 19:04:21 -05:00
|
|
|
color: color || 'white',
|
2017-03-29 22:11:08 -05:00
|
|
|
sticky: shouldStick,
|
2017-03-28 19:04:21 -05:00
|
|
|
data: {
|
|
|
|
|
hello: 'hello word'
|
2017-03-29 19:42:15 -05:00
|
|
|
},
|
2017-03-29 22:11:08 -05:00
|
|
|
tag: tag
|
2017-03-21 11:15:18 -05:00
|
|
|
});
|
|
|
|
|
|
2017-03-29 19:42:15 -05:00
|
|
|
notf.addEventListener('click', onclick);
|
|
|
|
|
function onclick(event) {
|
2017-04-03 18:50:35 -05:00
|
|
|
event.target.close();
|
|
|
|
|
alert('notification clicked: ' + event.target.data.hello);
|
2017-03-29 19:42:15 -05:00
|
|
|
}
|
2017-03-21 11:15:18 -05:00
|
|
|
|
2017-03-29 19:42:15 -05:00
|
|
|
notf.addEventListener('close', onclose);
|
|
|
|
|
function onclose() {
|
2017-03-21 11:15:18 -05:00
|
|
|
alert('notification closed');
|
2017-03-29 19:42:15 -05:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
notf.addEventListener('error', onerror);
|
|
|
|
|
function onerror(event) {
|
|
|
|
|
alert('error=' + event.result);
|
|
|
|
|
};
|
2017-03-21 11:15:18 -05:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
var badgeCount = 0;
|
|
|
|
|
|
|
|
|
|
var incBadgeEl = document.getElementById('inc-badge');
|
|
|
|
|
incBadgeEl.addEventListener('click', function() {
|
|
|
|
|
badgeCount++;
|
|
|
|
|
SYM_API.setBadgeCount(badgeCount);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
var incBadgeEl = document.getElementById('clear-badge');
|
|
|
|
|
incBadgeEl.addEventListener('click', function() {
|
|
|
|
|
badgeCount = 0;
|
|
|
|
|
SYM_API.setBadgeCount(0);
|
|
|
|
|
});
|
|
|
|
|
|
2017-04-11 13:58:35 -05:00
|
|
|
var snippetButton = document.getElementById('snippet');
|
|
|
|
|
snippetButton.addEventListener('click', function() {
|
|
|
|
|
let snippet = new SYM_API.ScreenSnippet();
|
|
|
|
|
|
|
|
|
|
snippet
|
|
|
|
|
.capture()
|
|
|
|
|
.then(gotSnippet)
|
|
|
|
|
.catch(snippetError);
|
|
|
|
|
|
|
|
|
|
function gotSnippet(rsp) {
|
|
|
|
|
if (rsp && rsp.data && rsp.type) {
|
|
|
|
|
var dataUrl = 'data:' + rsp.type + ',' + rsp.data;
|
|
|
|
|
var img = document.getElementById('snippet-img');
|
|
|
|
|
img.src = dataUrl;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function snippetError(err) {
|
|
|
|
|
alert('error getting snippet', err);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
2017-03-21 11:15:18 -05:00
|
|
|
</script>
|
|
|
|
|
</html>
|
