nakome
5/4/2014 - 3:05 AM
Get html5 Notification on toggle menu
Get html5 Notification on toggle menu
var web = (function() {
'use strict';
// JSLint global
/*global DocumentTouch,document,window,alert,Notification,setInterval,setTimeout,clearTimeout*/
// click or touch
var clickEvent = (('ontouchstart' in window) || (window.DocumentTouch && document instanceof DocumentTouch)) ? 'touchstart' : 'click';
return {
// Call events here
run: function() {
this.menu(); // toggle menu fn
},
// this.qS('single class');
qS: function(el) {
return document.querySelector(el);
},
// toggle menu
menu: function() {
var self = this;
this.qS('.toggle-menu').addEventListener(clickEvent, function(e) {
e.preventDefault();
self.qS('.sidebar').classList.toggle('toggled');
// Notification fn example chrome,safari and mozilla
if (self.qS('.sidebar').classList.contains('toggled')) {
self.notifyMe('Show menu', 'The menu has been opened', 'http://tinyurl.com/pnfdwtp');
} else {
self.notifyMe('Hide menu', 'The menu has been hidden', 'http://tinyurl.com/pnfdwtp');
}
}, false);
},
// this.notifyMe('title','description',icon');
notifyMe: function(a, b, c) {
var Notification = window.Notification || window.mozNotification || window.webkitNotification;
Notification.requestPermission(function(permission) {
// console.log(permission);
});
this.show(a, b, c);
},
show: function(d, e, f) {
var self = this,
instance = new Notification(
d, {
body: e,
icon: f
}
);
instance.onshow = function() {
// wait 3 seconds and hide
var t = setTimeout(function() {
instance.close();
clearTimeout(t);
}, 3000);
};
return false;
}
// Other fn here
};
})();
web.run(); // run web
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<a href="#" class="toggle-menu">Toggle</a>
<div class="sidebar">
<h1>Hello World..</h1>
</div>
</body>
</html>.sidebar{
display:none;
}
.toggled{
display:block;
}