noti v1.0.0
Introducing Noti
Noti is a small js library that allows you to create simple ntoification on your website.
Setup up
Install
You can install Noti using npm or fork this repo
Usage
To use noti you need to include it in your html
Example
<body>
<div>
</div>
<script type="text/javascript" src="build/noti.js"></script>
</body>JS
Example
/*global noti*/
noti
.init({
containerId: "noti",
notiElClass: "notification",
tapToDismiss: true,
messageClass: "notification-message",
typesConfig: [{
type: "success",
className: "success"
}, {
type: "error",
className: "error"
}, {
type: "warning",
className: "warning"
}, ]
})
.createNoti({
message: "Successfully running notifiy",
type: "success",
showDuration: 7,
sticky: true,
onClick: function() {
noti.createNoti({
message: "Notification clicked",
type: "success",
showDuration: 2
})
}
})
.createNoti({
message: "Warning about something",
type: "warning",
showDuration: 5,
onShow: function() {
console.log("Showed")
}
})
.createNoti({
message: "Error something is wrong",
type: "error",
showDuration: 7,
onClick: function() {
noti.createNoti({
message: "Error dismissed",
type: "warning",
showDuration: 3
})
}
})Methods
noti.init(Object)
containerId : String
When you call the createNoti method a new div element will be made inside your body tag. This is the container element id give it a name and use it in your css
notiElClass :String
This is the class name for the new noti div element that will be created inside the container element.
tapToDismiss:Boolean
Allow you to set if you the notification is dismissable
messageClass:String This is the class name for the new div element that will be created inside the noti element that will contain the notification message.
typesConfig:Array
This will contain an array containing objects that will specify the different types of notification and their class names.
Example
Here an example of calling the init method
noti.init({
containerId: "noti",
notiElClass: "notification",
tapToDismiss: true,
messageClass: "notification-message",
typesConfig: [{
type: "success",
className: "success"
}, {
type: "error",
className: "error"
}, {
type: "warning",
className: "warning"
}, ]
})Then in your css you would use those class and id names
#noti{
position:absolute;
margin-left:35px;
margin-top:25px;
display:block;
}
.notification{
color:white;
border-radius:15px;
padding:15px;
padding-right:10px;
margin-bottom:15px;
width:15em;
word-wrap: break-word;
}
.error{
background-color:rgb(231, 76, 60)
}
.success{
background-color:rgb(46, 204, 113)
}
.warning{
background-color:rgb(241, 196, 15)
}
.primary{
background-color:rgb(52, 152, 219);
}noti.createNoti(Object)
message:String Specify the message that the element will contain
type:String The type of notification element you want to display
Note you need to specify the types in when you call noti.init() Example of type config below
noti.init({ typesConfig: [{ type: "success", className: "success" }, { type: "error", className: "error" }, { type: "warning", className: "warning" }, ] })
showDuration:int The amount of time you want to show a specific element
onClick:function function that is called when the element is clicked on
Example
noti.createNoti({
message: "Successfully running notifiy",
type: "success",
showDuration: 7,
sticky: true,
onClick: function() {
noti.createNoti({
message: "Notification clicked",
type: "success",
showDuration: 2
})
}
})And thats it!! hope this was helpful
8 years ago