AngularJS Snackbar Example for Github　

Basic example of angular.snackbar component.

by Jaeha Ahn

HTML

<div ng-app="myApp">
    <div ng-controller="myController">
        <button data-ng-click="snackbar()">Create Snackbar</button>
        
        <!-- Snackbar Directive -->
        <div class="snackbar-container" data-snackbar="true" data-snackbar-duration="1000" data-snackbar-remove-delay="200"></div>
    </div>
</div>

CSS

.snackbar-container {
	position: fixed;
	left: 20px;
	bottom: 0;
	z-index: 99999;
}
.snackbar {
	overflow: hidden;
	clear: both;
	min-width: 288px;
	max-width: 568px;
	cursor: pointer;
	background-color: #323232;
	color: #FFFFFF;
	font-size: 14px;
	border-radius: 2px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);

	-moz-transition: -moz-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, padding 0 linear 0.2s, height 0 linear 0.2s;
	-webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, padding 0 linear 0.2s, height 0 linear 0.2s;
	transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, padding 0 linear 0.2s, height 0 linear 0.2s;
	-moz-transform: translateY(200%);
	-webkit-transform: translateY(200%);
	transform: translateY(200%);
}
.snackbar.snackbar-opened {
	height: auto;
	padding: 14px 15px;
	margin-bottom: 20px;
	height: auto;

	-moz-transition: -moz-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s;
	-webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s;
	transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, height 0 linear 0.2s;
	-moz-transform: none;
	-webkit-transform: none;
	transform: none;
}
@media (max-width: 767px) {
	.snackbar-container {
		left: 0px !important;
		right: 0px;
		width: 100%;
	}
	.snackbar-container .snackbar {
		min-width: 100%;
	}
	.snackbar-container [class="snackbar snackbar-opened"] ~ .snackbar.toast {
		margin-top: 20px;
	}
	.snackbar-container [class="snackbar snackbar-opened"] {
		border-radius: 0;
		margin-bottom: 0;
	}
}

JavaScript

/*
	@license Angular Snackbar version 1.0.1
	ⓒ 2015 AHN JAE-HA http://github.com/eu81273/angular.snackbar
	License: MIT
*/

(function(a){var b=a.module("angular.snackbar",[]);b.factory("snackbar",["$rootScope",function(a){return{create:function(e,d){a.$broadcast("createSnackbar",{content:e,duration:d})}}}]);b.directive("snackbar",["$rootScope","$compile","$timeout",function(b,e,d){return function(g,h,c){var k=a.element(h),l=c.snackbarDuration||3E3,m=c.snackbarRemoveDelay||200;b.$on("createSnackbar",function(b,c){var f=a.element(e('<div class="snackbar snackbar-opened"><span class="snackbar-content">'+c.content+"</span></div>")(g));
k.append(f);d(function(){f.removeClass("snackbar-opened");d(function(){f.remove()},m,!1)},c.duration||l,!1)})}}])})(angular);

(function(){
    
    var myApp = angular.module('myApp', ['angular.snackbar']);
    
    myApp.controller('myController', function($scope, snackbar){
        
        $scope.snackbar = function () {
            snackbar.create("Hello World!!");
        }
    });
           
})();