1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
|
/*
* Copyright 2010 akquinet
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* This JQuery Plugin will help you in showing some nice Toast-Message like notification messages. The behavior is
* similar to the android Toast class.
* You have 4 different toast types you can show. Each type comes with its own icon and colored border. The types are:
* - notice
* - success
* - warning
* - error
*
* The following methods will display a toast message:
*
* $().toastmessage('showNoticeToast', 'some message here');
* $().toastmessage('showSuccessToast', "some message here");
* $().toastmessage('showWarningToast', "some message here");
* $().toastmessage('showErrorToast', "some message here");
*
* // user configured toastmessage:
* $().toastmessage('showToast', {
* text : 'Hello World',
* sticky : true,
* position : 'top-right',
* type : 'success',
* close : function () {console.log("toast is closed ...");}
* });
*
* To see some more examples please have a look into the Tests in src/test/javascript/ToastmessageTest.js
*
* For further style configuration please see corresponding css file: jquery-toastmessage.css
*
* This plugin is based on the jquery-notice (http://sandbox.timbenniks.com/projects/jquery-notice/)
* but is enhanced in several ways:
*
* configurable positioning
* convenience methods for different message types
* callback functionality when closing the toast
* included some nice free icons
* reimplemented to follow jquery plugin good practices rules
*
* Author: Daniel Bremer-Tonn
**/
(function($)
{
var settings = {
inEffect: {opacity: 'show'}, // in effect
inEffectDuration: 600, // in effect duration in miliseconds
stayTime: 3000, // time in miliseconds before the item has to disappear
text: '', // content of the item
sticky: false, // should the toast item sticky or not?
type: 'notice', // notice, warning, error, success
position: 'top-right', // top-right, center, middle-bottom ... Position of the toast container holding different toast. Position can be set only once at the very first call, changing the position after the first call does nothing
closeText: '', // text which will be shown as close button, set to '' when you want to introduce an image via css
close: null // callback function when the toastmessage is closed
};
var methods = {
init : function(options)
{
if (options) {
$.extend( settings, options );
}
},
showToast : function(options)
{
var localSettings = {};
$.extend(localSettings, settings, options);
// declare variables
var toastWrapAll, toastItemOuter, toastItemInner, toastItemClose, toastItemImage;
toastWrapAll = (!$('.toast-container').length) ? $('<div></div>').addClass('toast-container').addClass('toast-position-' + localSettings.position).appendTo('body') : $('.toast-container');
toastItemOuter = $('<div></div>').addClass('toast-item-wrapper');
toastItemInner = $('<div></div>').hide().addClass('toast-item toast-type-' + localSettings.type).appendTo(toastWrapAll).html('<p>'+localSettings.text+'</p>').animate(localSettings.inEffect, localSettings.inEffectDuration).wrap(toastItemOuter);
toastItemClose = $('<div></div>').addClass('toast-item-close').prependTo(toastItemInner).html(localSettings.closeText).click(function() { $().toastmessage('removeToast',toastItemInner, localSettings) });
toastItemImage = $('<div></div>').addClass('toast-item-image').addClass('toast-item-image-' + localSettings.type).prependTo(toastItemInner);
if(navigator.userAgent.match(/MSIE 6/i))
{
toastWrapAll.css({top: document.documentElement.scrollTop});
}
if(!localSettings.sticky)
{
setTimeout(function()
{
$().toastmessage('removeToast', toastItemInner, localSettings);
},
localSettings.stayTime);
}
return toastItemInner;
},
showNoticeToast : function (message)
{
var options = {text : message, type : 'notice'};
return $().toastmessage('showToast', options);
},
showSuccessToast : function (message)
{
var options = {text : message, type : 'success'};
return $().toastmessage('showToast', options);
},
showErrorToast : function (message)
{
var options = {text : message, type : 'error'};
return $().toastmessage('showToast', options);
},
showWarningToast : function (message)
{
var options = {text : message, type : 'warning'};
return $().toastmessage('showToast', options);
},
removeToast: function(obj, options)
{
obj.animate({opacity: '0'}, 600, function()
{
obj.parent().animate({height: '0px'}, 300, function()
{
obj.parent().remove();
});
});
// callback
if (options && options.close !== null)
{
options.close();
}
}
};
$.fn.toastmessage = function( method ) {
// Method calling logic
if ( methods[method] ) {
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.toastmessage' );
}
};
})(jQuery);
|
