✨ Add notification when clicking on a gitmoji (#33)

Add a notification to say that the clicked emoji has been copied to the clipboard #16

src/scripts/notification.js

@@ -0,0 +1,20 @@
+(function() {
+    var parent = document.getElementById("gitmoji-list");
+    parent.addEventListener("click", function(e) {
+		if(e.target && e.target.matches(".gitmoji")) {
+			e.target.classList.add('active');
+				e.target.classList.remove( 'active' );
+				var notification = new NotificationFx({
+					message : '<p>Hey! Gitmoji copied to the clipboard 😜</p>',
+					layout : 'growl',
+					effect : 'scale',
+					type : 'notice',
+					onClose : function() {
+						parent.disabled = false;
+					}
+				});
+				notification.show();
+			this.disabled = true;
+		}
+    })
+})();

src/scripts/notificationFx.js

@@ -0,0 +1,3 @@
+(function(e){function d(a,b){for(var c in b)b.hasOwnProperty(c)&&(a[c]=b[c]);return a}function b(a){this.options=d({},this.options);d(this.options,a);this._init()}b.prototype.options={wrapper:document.body,message:"yo!",layout:"growl",effect:"slide",type:"error",ttl:6E3,onClose:function(){return!1},onOpen:function(){return!1}};b.prototype._init=function(){this.ntf=document.createElement("div");this.ntf.className="ns-box ns-"+this.options.layout+" ns-effect-"+this.options.effect+" ns-type-"+this.options.type;
+this.ntf.innerHTML='<div class="ns-box-inner">'+this.options.message+'</div><span class="ns-close"></span></div>';this.options.wrapper.insertBefore(this.ntf,this.options.wrapper.firstChild);var a=this;this.dismissttl=setTimeout(function(){a.active&&a.dismiss()},this.options.ttl);this._initEvents()};b.prototype._initEvents=function(){var a=this;this.ntf.querySelector(".ns-close").addEventListener("click",function(){a.dismiss()})};b.prototype.show=function(){this.active=!0;this.ntf.classList.remove("ns-hide");
+this.ntf.classList.add("ns-show");this.options.onOpen()};b.prototype.dismiss=function(){var a=this;this.active=!1;clearTimeout(this.dismissttl);this.ntf.classList.remove("ns-show");setTimeout(function(){a.ntf.classList.add("ns-hide");a.options.onClose()},25);var b=function(c){if(c.target!==a.ntf)return!1;this.removeEventListener("animationend",b);a.options.wrapper.removeChild(this)};this.ntf.addEventListener("animationend",b)};e.NotificationFx=b})(window);

src/styles/_includes/_notifications.scss

@@ -0,0 +1,145 @@
+.ns-box {
+	position: fixed;
+	background: rgba(42, 45, 50, 0.85);
+	padding: 22px;
+	line-height: 1.4;
+	z-index: 1000;
+	pointer-events: none;
+	color: rgba(250, 251, 255, 0.95);
+	font-size: 90%;
+	font-weight: 600;
+
+	&.ns-show {
+		pointer-events: auto;
+	}
+
+	a {
+		color: inherit;
+		opacity: 0.7;
+		font-weight: 700;
+
+		&:hover, &:focus {
+			opacity: 1;
+		}
+	}
+
+	p {
+		margin: 0;
+	}
+
+	&.ns-show, &.ns-visible {
+		pointer-events: auto;
+	}
+}
+
+.ns-close {
+	width: 20px;
+	height: 20px;
+	position: absolute;
+	right: 4px;
+	top: 4px;
+	overflow: hidden;
+	text-indent: 100%;
+	cursor: pointer;
+	-webkit-backface-visibility: hidden;
+	backface-visibility: hidden;
+
+	&:hover, &:focus {
+		outline: none;
+	}
+
+	&::before, &::after {
+		content: '';
+		position: absolute;
+		width: 3px;
+		height: 60%;
+		top: 50%;
+		left: 50%;
+		background: #6e6e6e;
+	}
+
+	&:hover {
+		&::before, &::after {
+			background: #fff;
+		}
+	}
+
+	&::before {
+		-webkit-transform: translate(-50%, -50%) rotate(45deg);
+		transform: translate(-50%, -50%) rotate(45deg);
+	}
+
+	&::after {
+		-webkit-transform: translate(-50%, -50%) rotate(-45deg);
+		transform: translate(-50%, -50%) rotate(-45deg);
+	}
+}
+
+/* Growl-style notifications */
+.ns-growl {
+	top: 30px;
+	left: 30px;
+	max-width: 300px;
+	border-radius: 5px;
+}
+
+.ns-growl p {
+	margin: 0;
+	line-height: 1.3;
+}
+
+[class^="ns-effect-"].ns-growl.ns-hide,
+[class*=" ns-effect-"].ns-growl.ns-hide {
+	-webkit-animation-direction: reverse;
+	animation-direction: reverse;
+}
+
+/* Individual effects */
+
+/* Scale */
+.ns-effect-scale {
+	background: $pink;
+	box-shadow: 0 25px 10px -15px rgba(0,0,0,0.05);
+}
+
+.ns-effect-scale a:hover,
+.ns-effect-scale a:focus {
+	color: $white;
+}
+
+.ns-effect-scale .ns-close::before,
+.ns-effect-scale .ns-close::after {
+	background: $white;
+}
+
+.ns-effect-scale .ns-close:hover::before,
+.ns-effect-scale .ns-close:hover::after {
+	background: $black;
+}
+
+.ns-effect-scale.ns-show,
+.ns-effect-scale.ns-hide {
+	-webkit-animation-name: animScale;
+	animation-name: animScale;
+	-webkit-animation-duration: 0.25s;
+	animation-duration: 0.25s;
+}
+
+@-webkit-keyframes animScale {
+	0% { opacity: 0; -webkit-transform: translate3d(0,40px,0) scale3d(0.1,0.6,1); }
+	100% { opacity: 1; -webkit-transform: translate3d(0,0,0) scale3d(1,1,1); }
+}
+
+@keyframes animScale {
+	0% { opacity: 0; -webkit-transform: translate3d(0,40px,0) scale3d(0.1,0.6,1); transform: translate3d(0,40px,0) scale3d(0.1,0.6,1); }
+	100% { opacity: 1; -webkit-transform: translate3d(0,0,0) scale3d(1,1,1); transform: translate3d(0,0,0) scale3d(1,1,1); }
+}
+
+@media screen and (max-width: 25em) {
+	.ns-growl {
+		top: 10px;
+		left: 10px;
+		right: 10px;
+		max-width: none;
+	}
+}

src/styles/style.scss

@@ -1,6 +1,7 @@
 @import '_includes/_vars';
 @import '_includes/_flexbox';
 @import '_includes/_menu';
+@import '_includes/notifications';
 
 h1 {
 	font-size: 2em;

src/templates/index.pug

@@ -22,7 +22,7 @@ html
 						use(xlink:href='#icon-twitter')
 					| Tweet
 		main.wrap
-			.row.center-xs
+			.row.center-xs#gitmoji-list
 				each gitmoji in emojis.gitmojis
 					article.emoji.col-xs-12.col-sm-6.col-md-3
 						.emoji-card
@@ -35,3 +35,5 @@ html
 	script(src='//cdn.jsdelivr.net/clipboard.js/1.5.13/clipboard.min.js')
 	script
 		include ../scripts/main.js
+		include ../scripts/notificationFx.js
+		include ../scripts/notification.js