toastr-rails 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/.rvmrc +2 -0
- data/GPL-LICENSE.txt +278 -0
- data/Gemfile +8 -0
- data/Gemfile.lock +70 -0
- data/MIT-LICENSE.txt +20 -0
- data/README.md +57 -0
- data/Rakefile +58 -0
- data/index.html +177 -0
- data/lib/toastr-rails.rb +1 -0
- data/lib/toastr/rails.rb +2 -0
- data/lib/toastr/rails/engine.rb +6 -0
- data/lib/toastr/rails/version.rb +5 -0
- data/toastr-rails.gemspec +83 -0
- data/toastr-responsive.css +30 -0
- data/toastr.css +105 -0
- data/toastr.js +166 -0
- data/vendor/assets/javascripts/toastr.js +166 -0
- data/vendor/assets/stylesheets/toastr-responsive.css +30 -0
- data/vendor/assets/stylesheets/toastr.css +105 -0
- metadata +226 -0
data/index.html
ADDED
|
@@ -0,0 +1,177 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8"/>
|
|
5
|
+
<title>toastr examples</title>
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
7
|
+
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet"/>
|
|
8
|
+
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet"/>
|
|
9
|
+
<link href="toastr.css" rel="stylesheet" type="text/css" />
|
|
10
|
+
<link href="toastr-responsive.css" rel="stylesheet" type="text/css" />
|
|
11
|
+
<style>
|
|
12
|
+
.row {
|
|
13
|
+
margin-left: 0;
|
|
14
|
+
}
|
|
15
|
+
</style>
|
|
16
|
+
</head>
|
|
17
|
+
|
|
18
|
+
<body style="padding: 30px" class="container">
|
|
19
|
+
<section class="row">
|
|
20
|
+
<h1>toastr</h1>
|
|
21
|
+
|
|
22
|
+
<div class="well row">
|
|
23
|
+
<div class="row span11">
|
|
24
|
+
<div class="span4">
|
|
25
|
+
<div class="control-group">
|
|
26
|
+
<div class="controls">
|
|
27
|
+
<label class="control-label" for="title">Title</label>
|
|
28
|
+
<input id="title" type="text" class="input-large" placeholder="Enter a title ..."/>
|
|
29
|
+
<label class="control-label" for="message">Message</label>
|
|
30
|
+
<textarea class="input-large" id="message" rows="3" placeholder="Enter a message ..."></textarea>
|
|
31
|
+
</div>
|
|
32
|
+
</div>
|
|
33
|
+
</div>
|
|
34
|
+
|
|
35
|
+
<div class="span2">
|
|
36
|
+
<div class="control-group" id="toastTypeGroup">
|
|
37
|
+
<div class="controls">
|
|
38
|
+
<label >Toast Type</label>
|
|
39
|
+
<label class="radio"><input type="radio" name="toasts" value="success" checked/>Success</label>
|
|
40
|
+
<label class="radio"><input type="radio" name="toasts" value="info"/>Info</label>
|
|
41
|
+
<label class="radio"><input type="radio" name="toasts" value="warning"/>Warning</label>
|
|
42
|
+
<label class="radio"><input type="radio" name="toasts" value="error"/>Error</label>
|
|
43
|
+
</div>
|
|
44
|
+
</div>
|
|
45
|
+
<div class="control-group" id="positionGroup">
|
|
46
|
+
<div class="controls">
|
|
47
|
+
<label>Position</label>
|
|
48
|
+
<label class="radio"><input type="radio" name="positions" value="toast-top-right" checked/>Top Right</label>
|
|
49
|
+
<label class="radio"><input type="radio" name="positions" value="toast-bottom-right"/>Bottom Right</label>
|
|
50
|
+
<label class="radio"><input type="radio" name="positions" value="toast-bottom-left"/>Bottom Left</label>
|
|
51
|
+
<label class="radio"><input type="radio" name="positions" value="toast-top-left"/>Top Left</label>
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
|
|
56
|
+
<div class="span2" >
|
|
57
|
+
<div class="control-group">
|
|
58
|
+
<div class="controls">
|
|
59
|
+
<label class="control-label" for="">Fade in</label>
|
|
60
|
+
<input id="fadeIn" type="text" placeholder="ms" class="input-mini" value="300"/>
|
|
61
|
+
|
|
62
|
+
<label class="control-label" for="fadeOut">Fade out</label>
|
|
63
|
+
<input id="fadeOut" type="text" placeholder="ms" class="input-mini" value="1000"/>
|
|
64
|
+
|
|
65
|
+
<label class="control-label" for="timeOut">Time out</label>
|
|
66
|
+
<input id="timeOut" type="text" placeholder="ms" class="input-mini" value="5000"/>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
|
|
71
|
+
<div class="span2">
|
|
72
|
+
<div class="control-group">
|
|
73
|
+
<div class="controls">
|
|
74
|
+
<label class="checkbox" for="debugInfo">
|
|
75
|
+
<input id="debugInfo" type="checkbox" checked="checked" class="input-mini"/>Debug
|
|
76
|
+
</label>
|
|
77
|
+
</div>
|
|
78
|
+
<div class="controls">
|
|
79
|
+
<label class="checkbox" for="tapToDismiss">
|
|
80
|
+
<input id="tapToDismiss" type="checkbox" checked="checked" class="input-mini"/>Tap to dismiss toast
|
|
81
|
+
</label>
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
|
|
87
|
+
<div class="row span11">
|
|
88
|
+
<button type="button" class="btn btn-primary" id="showtoast">Show Toast</button>
|
|
89
|
+
</div>
|
|
90
|
+
</div>
|
|
91
|
+
</section>
|
|
92
|
+
|
|
93
|
+
<footer class="row">
|
|
94
|
+
<h2>Links</h2>
|
|
95
|
+
|
|
96
|
+
<ul>
|
|
97
|
+
<li><a href="https://github.com/CodeSeven/toastr/downloads">Download</a></li>
|
|
98
|
+
<li><a href="https://github.com/CodeSeven/toastr">GitHub</a></li>
|
|
99
|
+
</ul>
|
|
100
|
+
</footer>
|
|
101
|
+
|
|
102
|
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
|
|
103
|
+
<script src="toastr.js"></script>
|
|
104
|
+
|
|
105
|
+
<script type="text/javascript">
|
|
106
|
+
$(function() {
|
|
107
|
+
var
|
|
108
|
+
i = -1,
|
|
109
|
+
toastCount = 0,
|
|
110
|
+
getMessage = function() {
|
|
111
|
+
var msgs = ['My name is Inigo Montoya. You killed my father. Prepare to die!',
|
|
112
|
+
'<div><input class="input-small" value="textbox"/> <a href="http://johnpapa.net" target="_blank">This is a hyperlink</a></div><div><button type="button" id="okBtn" class="btn btn-primary">Close me</button><button type="button" id="surpriseBtn" class="btn" style="margin: 0 8px 0 8px">Surprise me</button></div>',
|
|
113
|
+
'Are you the six fingered man?',
|
|
114
|
+
'Inconceivable!',
|
|
115
|
+
'I do not think that means what you think it means.',
|
|
116
|
+
'Have fun storming the castle!'
|
|
117
|
+
]
|
|
118
|
+
i++
|
|
119
|
+
if (i === msgs.length) {
|
|
120
|
+
i = 0
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
return msgs[i]
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
$('#showtoast').click(function() {
|
|
127
|
+
var shortCutFunction = $("#toastTypeGroup input:radio:checked").val(),
|
|
128
|
+
msg = $('#message').val(),
|
|
129
|
+
title = $('#title').val() || '',
|
|
130
|
+
$fadeIn = $('#fadeIn'),
|
|
131
|
+
$fadeOut = $('#fadeOut'),
|
|
132
|
+
$timeOut = $('#timeOut'),
|
|
133
|
+
toastIndex = toastCount++
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
toastr.options = {
|
|
137
|
+
debug: $('#debugInfo').prop('checked'),
|
|
138
|
+
tapToDismiss: $('#tapToDismiss').prop('checked'),
|
|
139
|
+
positionClass: $('#positionGroup input:radio:checked').val() || 'toast-top-right'
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
if ($fadeIn.val().length) {
|
|
143
|
+
toastr.options.fadeIn = +$fadeIn.val()
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
if ($fadeOut.val().length) {
|
|
147
|
+
toastr.options.fadeOut = +$fadeOut.val()
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
if ($timeOut.val().length) {
|
|
151
|
+
toastr.options.timeOut = +$timeOut.val()
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
if (!msg) {
|
|
155
|
+
msg = getMessage()
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
var $toast = toastr[shortCutFunction](msg, title)
|
|
159
|
+
|
|
160
|
+
// Wire up an event handler to a button in the toast, if it exists
|
|
161
|
+
if ($toast.find('#okBtn').length) {
|
|
162
|
+
$toast.on('click', '#okBtn', function () {
|
|
163
|
+
alert('you clicked me. i was toast #' + toastIndex + '. goodbye!')
|
|
164
|
+
$toast.remove()
|
|
165
|
+
})
|
|
166
|
+
}
|
|
167
|
+
if ($toast.find('#surpriseBtn').length) {
|
|
168
|
+
$toast.on('click', '#surpriseBtn', function () {
|
|
169
|
+
alert('Surprise! you clicked me. i was toast #' + toastIndex + '. You could perform an action here.')
|
|
170
|
+
})
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
})
|
|
174
|
+
})
|
|
175
|
+
</script>
|
|
176
|
+
</body>
|
|
177
|
+
</html>
|
data/lib/toastr-rails.rb
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
require 'toastr/rails'
|
data/lib/toastr/rails.rb
ADDED
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
# Generated by jeweler
|
|
2
|
+
# DO NOT EDIT THIS FILE DIRECTLY
|
|
3
|
+
# Instead, edit Jeweler::Tasks in Rakefile, and run 'rake gemspec'
|
|
4
|
+
# -*- encoding: utf-8 -*-
|
|
5
|
+
|
|
6
|
+
Gem::Specification.new do |s|
|
|
7
|
+
s.name = "toastr-rails"
|
|
8
|
+
s.version = "1.0.2"
|
|
9
|
+
|
|
10
|
+
s.required_rubygems_version = Gem::Requirement.new(">= 1.3.6") if s.respond_to? :required_rubygems_version=
|
|
11
|
+
s.authors = ["Tyler Gannon"]
|
|
12
|
+
s.date = "2012-08-10"
|
|
13
|
+
s.description = "Toastr: Simple javascript toast notifications, plugged into the rails asset pipeline."
|
|
14
|
+
s.email = ["tgannon@gmail.com"]
|
|
15
|
+
s.extra_rdoc_files = [
|
|
16
|
+
"README.md"
|
|
17
|
+
]
|
|
18
|
+
s.files = [
|
|
19
|
+
".rvmrc",
|
|
20
|
+
"GPL-LICENSE.txt",
|
|
21
|
+
"Gemfile",
|
|
22
|
+
"Gemfile.lock",
|
|
23
|
+
"MIT-LICENSE.txt",
|
|
24
|
+
"README.md",
|
|
25
|
+
"Rakefile",
|
|
26
|
+
"index.html",
|
|
27
|
+
"lib/toastr-rails.rb",
|
|
28
|
+
"lib/toastr/rails.rb",
|
|
29
|
+
"lib/toastr/rails/engine.rb",
|
|
30
|
+
"lib/toastr/rails/version.rb",
|
|
31
|
+
"toastr-rails.gemspec",
|
|
32
|
+
"toastr-responsive.css",
|
|
33
|
+
"toastr.css",
|
|
34
|
+
"toastr.js",
|
|
35
|
+
"vendor/assets/javascripts/toastr.js",
|
|
36
|
+
"vendor/assets/stylesheets/toastr-responsive.css",
|
|
37
|
+
"vendor/assets/stylesheets/toastr.css"
|
|
38
|
+
]
|
|
39
|
+
s.homepage = "https://github.com/CodeSeven/toastr"
|
|
40
|
+
s.require_paths = ["lib"]
|
|
41
|
+
s.rubygems_version = "1.8.23"
|
|
42
|
+
s.summary = "Toastr: Simple javascript toast notifications"
|
|
43
|
+
|
|
44
|
+
if s.respond_to? :specification_version then
|
|
45
|
+
s.specification_version = 3
|
|
46
|
+
|
|
47
|
+
if Gem::Version.new(Gem::VERSION) >= Gem::Version.new('1.2.0') then
|
|
48
|
+
s.add_runtime_dependency(%q<toastr-rails>, [">= 0"])
|
|
49
|
+
s.add_development_dependency(%q<bundler>, ["~> 1.1.3"])
|
|
50
|
+
s.add_development_dependency(%q<jeweler>, ["~> 1.8.3"])
|
|
51
|
+
s.add_development_dependency(%q<bundler>, ["~> 1.1.3"])
|
|
52
|
+
s.add_development_dependency(%q<jeweler>, ["~> 1.8.3"])
|
|
53
|
+
s.add_development_dependency(%q<bundler>, ["~> 1.1.3"])
|
|
54
|
+
s.add_development_dependency(%q<jeweler>, ["~> 1.8.3"])
|
|
55
|
+
s.add_development_dependency(%q<bundler>, ["~> 1.1.3"])
|
|
56
|
+
s.add_development_dependency(%q<jeweler>, ["~> 1.8.3"])
|
|
57
|
+
s.add_runtime_dependency(%q<railties>, [">= 3.1.0"])
|
|
58
|
+
else
|
|
59
|
+
s.add_dependency(%q<toastr-rails>, [">= 0"])
|
|
60
|
+
s.add_dependency(%q<bundler>, ["~> 1.1.3"])
|
|
61
|
+
s.add_dependency(%q<jeweler>, ["~> 1.8.3"])
|
|
62
|
+
s.add_dependency(%q<bundler>, ["~> 1.1.3"])
|
|
63
|
+
s.add_dependency(%q<jeweler>, ["~> 1.8.3"])
|
|
64
|
+
s.add_dependency(%q<bundler>, ["~> 1.1.3"])
|
|
65
|
+
s.add_dependency(%q<jeweler>, ["~> 1.8.3"])
|
|
66
|
+
s.add_dependency(%q<bundler>, ["~> 1.1.3"])
|
|
67
|
+
s.add_dependency(%q<jeweler>, ["~> 1.8.3"])
|
|
68
|
+
s.add_dependency(%q<railties>, [">= 3.1.0"])
|
|
69
|
+
end
|
|
70
|
+
else
|
|
71
|
+
s.add_dependency(%q<toastr-rails>, [">= 0"])
|
|
72
|
+
s.add_dependency(%q<bundler>, ["~> 1.1.3"])
|
|
73
|
+
s.add_dependency(%q<jeweler>, ["~> 1.8.3"])
|
|
74
|
+
s.add_dependency(%q<bundler>, ["~> 1.1.3"])
|
|
75
|
+
s.add_dependency(%q<jeweler>, ["~> 1.8.3"])
|
|
76
|
+
s.add_dependency(%q<bundler>, ["~> 1.1.3"])
|
|
77
|
+
s.add_dependency(%q<jeweler>, ["~> 1.8.3"])
|
|
78
|
+
s.add_dependency(%q<bundler>, ["~> 1.1.3"])
|
|
79
|
+
s.add_dependency(%q<jeweler>, ["~> 1.8.3"])
|
|
80
|
+
s.add_dependency(%q<railties>, [">= 3.1.0"])
|
|
81
|
+
end
|
|
82
|
+
end
|
|
83
|
+
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
@media all and (max-width: 240px) {
|
|
2
|
+
#toast-container > div {
|
|
3
|
+
padding: 8px 8px 8px 50px;
|
|
4
|
+
width: 108px;
|
|
5
|
+
}
|
|
6
|
+
}
|
|
7
|
+
@media all and (min-width: 241px) and (max-width: 320px) {
|
|
8
|
+
#toast-container > div {
|
|
9
|
+
padding: 8px 8px 8px 50px;
|
|
10
|
+
width: 128px;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
@media all and (min-width: 321px) and (max-width: 480px) {
|
|
14
|
+
#toast-container > div {
|
|
15
|
+
padding: 8px 8px 8px 50px;
|
|
16
|
+
width: 192px;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
@media all and (min-width: 481px) and (max-width: 768px) {
|
|
20
|
+
#toast-container > div {
|
|
21
|
+
padding: 15px 15px 15px 50px;
|
|
22
|
+
width: 300px;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
@media all and (min-width: 769px) {
|
|
26
|
+
#toast-container > div {
|
|
27
|
+
padding: 15px 15px 15px 50px;
|
|
28
|
+
width: 300px;
|
|
29
|
+
}
|
|
30
|
+
}
|
data/toastr.css
ADDED
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
.toast-title {
|
|
2
|
+
font-weight: bold;
|
|
3
|
+
}
|
|
4
|
+
.toast-message {
|
|
5
|
+
word-wrap: break-word;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.toast-message a,
|
|
9
|
+
.toast-message label{
|
|
10
|
+
color: #FFF;
|
|
11
|
+
}
|
|
12
|
+
.toast-message a:hover {
|
|
13
|
+
color: #CCC;
|
|
14
|
+
text-decoration: none;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.toast-top-left {
|
|
18
|
+
top: 12px;
|
|
19
|
+
left: 12px;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.toast-bottom-right {
|
|
23
|
+
right: 12px;
|
|
24
|
+
bottom: 12px;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.toast-bottom-left {
|
|
28
|
+
left: 12px;
|
|
29
|
+
bottom: 12px;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
#toast-container {
|
|
33
|
+
position: fixed;
|
|
34
|
+
z-index: 9999;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
#toast-container > div {
|
|
38
|
+
background-position: 15px center;
|
|
39
|
+
background-repeat: no-repeat;
|
|
40
|
+
-moz-border-radius: 3px 3px 3px 3px;
|
|
41
|
+
-webkit-border-radius: 3px 3px 3px 3px;
|
|
42
|
+
border-radius: 3px 3px 3px 3px;
|
|
43
|
+
-moz-box-shadow: 0 0 12px #999999;
|
|
44
|
+
-webkit-box-shadow: 0 0 12px #999999;
|
|
45
|
+
-o-box-shadow: 0 0 12px #999999;
|
|
46
|
+
box-shadow: 0 0 12px #999999;
|
|
47
|
+
color: #FFFFFF;
|
|
48
|
+
margin: 0 0 6px;
|
|
49
|
+
filter: alpha(opacity=80);
|
|
50
|
+
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
|
|
51
|
+
opacity: 0.8;
|
|
52
|
+
padding: 15px 15px 15px 50px;
|
|
53
|
+
width: 300px;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.toast {
|
|
57
|
+
background-color: #030303;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.toast-success{
|
|
61
|
+
background-color: #51A351;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.toast-error{
|
|
65
|
+
background-color: #BD362F;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.toast-info{
|
|
69
|
+
background-color: #2F96B4;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.toast-warning{
|
|
73
|
+
background-color: #F89406;
|
|
74
|
+
}
|
|
75
|
+
.toast-top-right {
|
|
76
|
+
top: 12px;
|
|
77
|
+
right: 12px;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
#toast-container > :hover {
|
|
81
|
+
-moz-box-shadow: 0 0 12px #000000;
|
|
82
|
+
-webkit-box-shadow: 0 0 12px #000000;
|
|
83
|
+
-o-box-shadow: 0 0 12px #000000;
|
|
84
|
+
box-shadow: 0 0 12px #000000;
|
|
85
|
+
filter: alpha(opacity=100);
|
|
86
|
+
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
|
87
|
+
opacity: 1;
|
|
88
|
+
cursor: pointer;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
#toast-container > .toast-info {
|
|
92
|
+
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
#toast-container > .toast-error {
|
|
96
|
+
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=") !important;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
#toast-container > .toast-success {
|
|
100
|
+
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
#toast-container > .toast-warning {
|
|
104
|
+
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important;
|
|
105
|
+
}
|
data/toastr.js
ADDED
|
@@ -0,0 +1,166 @@
|
|
|
1
|
+
// By: Hans Fj�llemark and John Papa
|
|
2
|
+
// https://github.com/CodeSeven/toastr
|
|
3
|
+
//
|
|
4
|
+
// Modified to support css styling instead of inline styling
|
|
5
|
+
// Inspired by https://github.com/Srirangan/notifer.js/
|
|
6
|
+
|
|
7
|
+
;(function(window, $) {
|
|
8
|
+
window.toastr = (function() {
|
|
9
|
+
var
|
|
10
|
+
defaults = {
|
|
11
|
+
tapToDismiss: true,
|
|
12
|
+
toastClass: 'toast',
|
|
13
|
+
containerId: 'toast-container',
|
|
14
|
+
debug: false,
|
|
15
|
+
fadeIn: 300,
|
|
16
|
+
fadeOut: 1000,
|
|
17
|
+
extendedTimeOut: 1000,
|
|
18
|
+
iconClasses: {
|
|
19
|
+
error: 'toast-error',
|
|
20
|
+
info: 'toast-info',
|
|
21
|
+
success: 'toast-success',
|
|
22
|
+
warning: 'toast-warning'
|
|
23
|
+
},
|
|
24
|
+
iconClass: 'toast-info',
|
|
25
|
+
positionClass: 'toast-top-right',
|
|
26
|
+
timeOut: 5000, // Set timeOut to 0 to make it sticky
|
|
27
|
+
titleClass: 'toast-title',
|
|
28
|
+
messageClass: 'toast-message'
|
|
29
|
+
},
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
error = function(message, title) {
|
|
33
|
+
return notify({
|
|
34
|
+
iconClass: getOptions().iconClasses.error,
|
|
35
|
+
message: message,
|
|
36
|
+
title: title
|
|
37
|
+
})
|
|
38
|
+
},
|
|
39
|
+
|
|
40
|
+
getContainer = function(options) {
|
|
41
|
+
var $container = $('#' + options.containerId)
|
|
42
|
+
|
|
43
|
+
if ($container.length)
|
|
44
|
+
return $container
|
|
45
|
+
|
|
46
|
+
$container = $('<div/>')
|
|
47
|
+
.attr('id', options.containerId)
|
|
48
|
+
.addClass(options.positionClass)
|
|
49
|
+
|
|
50
|
+
$container.appendTo($('body'))
|
|
51
|
+
|
|
52
|
+
return $container
|
|
53
|
+
},
|
|
54
|
+
|
|
55
|
+
getOptions = function() {
|
|
56
|
+
return $.extend({}, defaults, toastr.options)
|
|
57
|
+
},
|
|
58
|
+
|
|
59
|
+
info = function(message, title) {
|
|
60
|
+
return notify({
|
|
61
|
+
iconClass: getOptions().iconClasses.info,
|
|
62
|
+
message: message,
|
|
63
|
+
title: title
|
|
64
|
+
})
|
|
65
|
+
},
|
|
66
|
+
|
|
67
|
+
notify = function(map) {
|
|
68
|
+
var
|
|
69
|
+
options = getOptions(),
|
|
70
|
+
iconClass = map.iconClass || options.iconClass,
|
|
71
|
+
intervalId = null,
|
|
72
|
+
$container = getContainer(options),
|
|
73
|
+
$toastElement = $('<div/>'),
|
|
74
|
+
$titleElement = $('<div/>'),
|
|
75
|
+
$messageElement = $('<div/>'),
|
|
76
|
+
response = { options: options, map: map }
|
|
77
|
+
|
|
78
|
+
if (map.iconClass) {
|
|
79
|
+
$toastElement.addClass(options.toastClass).addClass(iconClass)
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
if (map.title) {
|
|
83
|
+
$titleElement.append(map.title).addClass(options.titleClass)
|
|
84
|
+
$toastElement.append($titleElement)
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
if (map.message) {
|
|
88
|
+
$messageElement.append(map.message).addClass(options.messageClass)
|
|
89
|
+
$toastElement.append($messageElement)
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
var fadeAway = function() {
|
|
93
|
+
if ($(':focus', $toastElement).length > 0)
|
|
94
|
+
return
|
|
95
|
+
|
|
96
|
+
var fade = function() {
|
|
97
|
+
return $toastElement.fadeOut(options.fadeOut)
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
$.when(fade()).done(function() {
|
|
101
|
+
if ($toastElement.is(':visible')) {
|
|
102
|
+
return
|
|
103
|
+
}
|
|
104
|
+
$toastElement.remove()
|
|
105
|
+
if ($container.children().length === 0)
|
|
106
|
+
$container.remove()
|
|
107
|
+
})
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
var delayedFadeAway = function() {
|
|
111
|
+
if (options.timeOut > 0 || options.extendedTimeOut > 0) {
|
|
112
|
+
intervalId = setTimeout(fadeAway, options.extendedTimeOut)
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
var stickAround = function() {
|
|
117
|
+
clearTimeout(intervalId)
|
|
118
|
+
$toastElement.stop(true, true)
|
|
119
|
+
.fadeIn(options.fadeIn)
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
$toastElement.hide()
|
|
123
|
+
$container.prepend($toastElement)
|
|
124
|
+
$toastElement.fadeIn(options.fadeIn)
|
|
125
|
+
|
|
126
|
+
if (options.timeOut > 0) {
|
|
127
|
+
intervalId = setTimeout(fadeAway, options.timeOut)
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
$toastElement.hover(stickAround, delayedFadeAway)
|
|
131
|
+
|
|
132
|
+
if (options.tapToDismiss) {
|
|
133
|
+
$toastElement.click(fadeAway)
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
if (options.debug) {
|
|
137
|
+
console.log(response)
|
|
138
|
+
}
|
|
139
|
+
return $toastElement
|
|
140
|
+
},
|
|
141
|
+
|
|
142
|
+
success = function(message, title) {
|
|
143
|
+
return notify({
|
|
144
|
+
iconClass: getOptions().iconClasses.success,
|
|
145
|
+
message: message,
|
|
146
|
+
title: title
|
|
147
|
+
})
|
|
148
|
+
},
|
|
149
|
+
|
|
150
|
+
warning = function(message, title) {
|
|
151
|
+
return notify({
|
|
152
|
+
iconClass: getOptions().iconClasses.warning,
|
|
153
|
+
message: message,
|
|
154
|
+
title: title
|
|
155
|
+
})
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
return {
|
|
159
|
+
error: error,
|
|
160
|
+
info: info,
|
|
161
|
+
options: {},
|
|
162
|
+
success: success,
|
|
163
|
+
warning: warning
|
|
164
|
+
}
|
|
165
|
+
})()
|
|
166
|
+
} (window, jQuery));
|