Skip to content

Commit 8c745dc

Browse files
rudrakshpathakrudrakshpathak
committed
Performance improved and bugs fixed.
1 parent fe0dabf commit 8c745dc

File tree

5 files changed

+93
-54
lines changed

5 files changed

+93
-54
lines changed

‎README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# jQuery Message Toaster
22
A simple easy to use jQuery based message toaster. Fully configurable, and customizable options available.
33

4-
[![version](https://img.shields.io/badge/version-v0.0.4-orange.svg)]()
4+
[![version](https://img.shields.io/badge/version-v0.0.5-orange.svg)]()
55
[![npm](https://img.shields.io/npm/l/express.svg)]()
66
[![PyPI](https://img.shields.io/badge/status-stable-brightgreen.svg)]()
77

@@ -17,8 +17,8 @@ var toaster = new Toaster({
1717
'text': 'Hi',
1818
'color': '#FFF',
1919
'background': '#333',
20-
'vertical-position': 'bottom',
21-
'horizontal-position': 'right',
20+
'verticalPosition': 'top',
21+
'horizontalPosition': 'right',
2222
'container' : '#id'
2323
});
2424
```

‎index.html‎

Lines changed: 52 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,57 @@
11
<html>
2-
<head>
3-
<title>jQUery Toaster</title>
4-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
5-
<script src="toaster.js"></script>
6-
</head>
72

8-
<body>
9-
<input type="text" id="text-content" placeholder="text">
10-
<input type="text" id="color" placeholder="color">
11-
<input type="text" id="background" placeholder="background">
12-
<button onclick="toast()">Toast it</button>
13-
<div id="id"></div>
14-
<script>
3+
<head>
4+
<title>jQUery Toaster</title>
5+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
6+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
7+
<script src="toaster.js"></script>
8+
</head>
9+
10+
<body>
11+
<br>
12+
<div class="container">
13+
<div class="row">
14+
<div class="col-md-2">
15+
<input type="text" class="form-control" id="text-content" placeholder="text">
16+
</div>
17+
<div class="col-md-2">
18+
<b>Color:</b>
19+
<input type="color" id="color" placeholder="color">
20+
</div>
21+
<div class="col-md-2">
22+
<b>Background:</b>
23+
<input type="color" id="background" placeholder="background">
24+
</div>
25+
<div class="col-md-2">
26+
<input type="text" class="form-control" id="horizontal" placeholder="Horizontal position">
27+
</div>
28+
<div class="col-md-2">
29+
<input type="text" class="form-control" id="vertical" placeholder="Vertical position">
30+
</div>
31+
</div>
32+
<br>
33+
<button onclick="toast()" class="btn btn-primary">Toast it</button>
34+
</div>
35+
<div id="id"></div>
36+
<script>
37+
function toast() {
38+
var text = $("#text-content").val();
39+
var color = $("#color").val();
40+
var background = $("#background").val();
41+
var horizontal = $("#horizontal").val();
42+
var vertical = $("#vertical").val();
43+
1544
var toaster = new Toaster({
16-
'text': 'Hi',
17-
'color': '#FFF',
18-
'background': '#333',
19-
'vertical-position': 'bottom',
20-
'horizontal-position': 'right',
21-
'container' : '#id'
45+
'text': text,
46+
'color': color,
47+
'background': background,
48+
'verticalPosition': vertical,
49+
'horizontalPosition': horizontal,
50+
'container': '#id'
2251
});
23-
function toast() {
24-
var text = $("#text-content").val();
25-
var color = $("#color").val();
26-
var background = $("#background").val();
27-
toaster.text = text;
28-
toaster.color = color;
29-
toaster.background = background;
30-
toaster.publish();
31-
}
32-
</script>
33-
</body>
52+
toaster.publish();
53+
}
54+
</script>
55+
</body>
56+
3457
</html>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "jquery-message-toaster",
3-
"version": "0.0.4",
3+
"version": "0.0.5",
44
"description": "A simple easy to use jQuery based message toaster. Fully configurable, and customizable options available.",
55
"main": "toaster.js",
66
"repository": {

‎toaster.js‎

Lines changed: 36 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@
22
* Toaster class
33
* @param {*} data
44
*/
5-
function Toaster() {
5+
function Toaster(data) {
6+
7+
// Constructor values
8+
this.data = data,
69

710
// Default properties
811
this.defaultValues = {
@@ -15,7 +18,7 @@ function Toaster() {
1518
width: "290px",
1619
height: "40px",
1720
padding: "5px",
18-
corderRadius: "5px"
21+
cornerRadius: "5px"
1922
},
2023

2124
// Class properties
@@ -28,22 +31,22 @@ function Toaster() {
2831
this.width,
2932
this.height,
3033
this.padding,
31-
this.corderRadius,
34+
this.cornerRadius,
3235

3336
// Setting default and new values
34-
this.setData = function (data) {
37+
this.setData = function (toasterData) {
3538
// Checking if data exists
36-
if (this.isNull(data)) {
37-
this.color = this.isNull(data.color) ? data.color : this.defaultValues.color;
38-
this.background = this.isNull(data.background) ? data.background : this.defaultValues.background;
39-
this.verticalPosition = this.isNull(data.verticalPosition) ? data.verticalPosition : this.defaultValues.verticalPosition;
40-
this.horizontalPosition = this.isNull(data.horizontalPosition) ? data.horizontalPosition : this.defaultValues.horizontalPosition;
41-
this.container = this.isNull(data.container) ? data.container : this.defaultValues.container;
42-
this.text = this.isNull(data.text) ? data.text : this.defaultValues.text;
43-
this.width = this.isNull(data.width) ? data.width : this.defaultValues.width;
44-
this.height = this.isNull(data.height) ? data.height : this.defaultValues.height;
45-
this.padding = this.isNull(data.padding) ? data.padding : this.defaultValues.padding;
46-
this.corderRadius = this.isNull(data.corderRadius) ? data.text : this.defaultValues.corderRadius;
39+
if (this.isNull(toasterData)) {
40+
this.color = this.isNull(toasterData.data.color) ? toasterData.data.color : this.defaultValues.color;
41+
this.background = this.isNull(toasterData.data.background) ? toasterData.data.background : this.defaultValues.background;
42+
this.verticalPosition = this.isNull(toasterData.data.verticalPosition) ? toasterData.data.verticalPosition : this.defaultValues.verticalPosition;
43+
this.horizontalPosition = this.isNull(toasterData.data.horizontalPosition) ? toasterData.data.horizontalPosition : this.defaultValues.horizontalPosition;
44+
this.container = this.isNull(toasterData.data.container) ? toasterData.data.container : this.defaultValues.container;
45+
this.text = this.isNull(toasterData.data.text) ? toasterData.data.text : this.defaultValues.text;
46+
this.width = this.isNull(toasterData.data.width) ? toasterData.data.width : this.defaultValues.width;
47+
this.height = this.isNull(toasterData.data.height) ? toasterData.data.height : this.defaultValues.height;
48+
this.padding = this.isNull(toasterData.data.padding) ? toasterData.data.padding : this.defaultValues.padding;
49+
this.cornerRadius = this.isNull(toasterData.data.cornerRadius) ? toasterData.data.text : this.defaultValues.cornerRadius;
4750
}
4851
},
4952

@@ -59,20 +62,33 @@ function Toaster() {
5962
}).appendTo('body');
6063
}
6164
$(this.container).show();
62-
$(this.container).css("margin-bottom", "0px");
65+
$(this.container).stop();
6366

6467
// Applying animation and styling
65-
$(this.container).text(this.text).animate({ 'marginBottom': '50px' }, 800).fadeOut(5000).css({
68+
$(this.container).css({
6669
'position': 'absolute',
67-
'bottom': '30px',
68-
'right': '30px',
6970
'width': this.width,
7071
'height': this.height,
7172
'background': this.background,
7273
'color': this.color,
7374
'padding': this.padding,
74-
'border-radius': this.corderRadius
75+
'border-radius': this.cornerRadius
7576
});
77+
78+
// For vertical positioning
79+
if(this.verticalPosition == "top") {
80+
$(this.container).css("top", "30px");
81+
} else {
82+
$(this.container).css("bottom", "30px");
83+
}
84+
85+
// For horizontal positioning
86+
if(this.horizontalPosition == "left") {
87+
$(this.container).css("left", "30px");
88+
} else {
89+
$(this.container).css("right", "30px");
90+
}
91+
$(this.container).text(this.text).animate({ 'opacity': '1' }, 400).fadeOut(5000);
7692
},
7793

7894
// Validating null values

‎toaster.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)