.n-wrapper#wrapper
button(disabled).simulate Loading...
View Compiled
* {
box-sizing: border-box;
}
h1 {
color: #fff;
}
html, body {
height: 100%;
}
body {
background: #222;
display: flex;
}
.simulate {
user-select: none;
margin: auto;
background: #f0f0f0;
coor: #444;
border: none;
border-radius: 4em;
padding: 1em 1.8em;
outline: none;
transition: all .4s ease;
width: 10em;
&:disabled {
background: #999;
width: 8em;
}
}
.n-wrapper {
position: fixed;
right: 1em;
top: 1em;
}
.n-box {
position: relative;
width: 18em;
height: 4em;
margin: .8em auto;
padding: .5em 1.4em .5em .6em;
border-radius: .3em;
box-shadow:
0 .4em 1em -.2em rgba(0,0,0,.2);
background: #f0f0f0;
}
.n-close {
display: block;
position: absolute;
top: .4em;
right: .4em;
width: .9em;
height: .9em;
line-height: .8em;
text-align: center;
color: #777;
border: 1px solid #777;
border-radius: 50%;
cursor: pointer;
}
.n-picture {
height: 100%;
display: block;
border-radius: 50%;
float: left;
}
.n-message {
font-size: .8em;
display: block;
width: 78%;
float: right;
a {
text-decoration: none;
text-transform: capitalize;
color: #2ECBAA;
}
color: #444;
}
View Compiled
var getRandomItem = function (list) {
return Math.floor(Math.random()*list.length);
}
var actions = [
'hearted your pen',
'commented on your pen',
'followed you',
'mentioned you in'
];
var pens = [
'a great pen!',
'testing VelocityJs',
'multiple css3 background',
'best pen ever!!!11 yolo',
'notifications!'
];
var Notification = function(data) {
this.name = data.name.first + ' ' + data.name.last;
this.message = this.randomMessage();
this.picture = data.picture.thumbnail;
this.elem;
this.duration = 4000;
this.create();
this.animOptions = {
duration: 400,
easing: 'easeInOut'
}
this.show = function() {
$(this.elem).velocity(
{
opacity: [1, 0],
marginTop: [0, 20]
}, this.animOptions
);
this.hide();
}
this.hide = function() {
var opts = this.animOptions;
opts['delay'] = this.duration;
opts['display'] = 'none';
$(this.elem).velocity(
{
opacity: [0, 1],
marginTop: [-75, 0]
}, opts
);
}
};
Notification.prototype.randomMessage = function() {
var message = '',
action = actions[getRandomItem(actions)];
message += '<a href="#">'+this.name+'</a> ';
message += action;
if (!(actions.indexOf(action) == 2)) {
message += ' <a href="#">' + pens[getRandomItem(pens)] + '</a>';
}
return message;
}
Notification.prototype.create = function() {
var box =
document.createElement('div');
box.classList.add('n-box');
var close =
document.createElement('div');
close.classList.add('n-close');
close.innerHTML = '×';
var picture = document.createElement('img');
picture.classList.add('n-picture');
picture.src = this.picture;
var body =
document.createElement('div');
body.classList.add('n-body');
var message = document.createElement('span');
message.classList.add('n-message');
message.innerHTML = this.message;
box.appendChild(close);
box.appendChild(picture);
box.appendChild(message);
var wrapper = document.getElementById('wrapper');
wrapper.appendChild(box);
this.elem = box;
}
$(function(){
var users = {};
// users from randomuser.me
var request = $.getJSON('https://s3-us-west-2.amazonaws.com/s.cdpn.io/128337/users.json');
$.when( request ).done(function() {
var btn = document.querySelector('.simulate')
btn.disabled = false
btn.innerHTML = 'Notify!'
console.log(request.responseJSON);
users = request.responseJSON.results;
var notifications = [];
var pushNotif = function(){
var user = users[Math.floor(Math.random()*users.length)].user;
var n = new Notification(user);
n.show();
notifications.push(n);
};
btn.addEventListener('click', pushNotif, false);
pushNotif();
});
});
This Pen doesn't use any external CSS resources.