rails_toastify 0.1.3 → 0.1.4
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.
- checksums.yaml +4 -4
- data/CHANGELOG.md +5 -0
- data/app/assets/javascripts/rails_toastify.js +34 -5
- data/app/assets/stylesheets/rails_toastify.css +91 -10
- data/lib/rails_toastify/version.rb +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: ad106eeec4a5dc91967781e1012327953d768abee3af5d5868c72fc8c29706be
|
4
|
+
data.tar.gz: afa96d9999758b8c2820073ad06474afabaed7d6403b895d0e7f1284df9b3743
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 950fe77e61917edbb1283a7330d76f45fd9a7b952f17eb99548e04080e1c09a5df9c2979ec98afbc71abfec67973b4e1e2009070bbf9139338315f24e597e8a4
|
7
|
+
data.tar.gz: 746f2e26fe44d665ed3f47adabb9e7105aca988b35841621be478619d784308b096ebd5b9009c9bec29f841cb769d317f6cde42635f59d5bf0dd5702f8f0742c
|
data/CHANGELOG.md
CHANGED
@@ -1,8 +1,8 @@
|
|
1
1
|
document.addEventListener('DOMContentLoaded', () => {
|
2
2
|
window.RailsToastify = {
|
3
|
-
showToast(message, type = 'info', duration =
|
3
|
+
showToast(message, type = 'info', duration = 5000) {
|
4
4
|
const toastContainer = document.querySelector('.toast-container') || createToastContainer();
|
5
|
-
const toast = createToast(message, type);
|
5
|
+
const toast = createToast(message, type, duration);
|
6
6
|
toastContainer.appendChild(toast);
|
7
7
|
setTimeout(() => {
|
8
8
|
toast.classList.add('fade-out');
|
@@ -18,10 +18,39 @@ document.addEventListener('DOMContentLoaded', () => {
|
|
18
18
|
return container;
|
19
19
|
}
|
20
20
|
|
21
|
-
function createToast(message, type) {
|
21
|
+
function createToast(message, type, duration) {
|
22
22
|
const toast = document.createElement('div');
|
23
23
|
toast.className = `toast toast--${type}`;
|
24
|
-
toast.
|
24
|
+
toast.classList.add('show');
|
25
|
+
|
26
|
+
const closeButton = document.createElement('button');
|
27
|
+
closeButton.className = 'toast__close-button';
|
28
|
+
closeButton.innerHTML = '<svg aria-hidden="true" viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7.71 8.23l3.75 3.75-1.48 1.48-3.75-3.75-3.75 3.75L1 11.98l3.75-3.75L1 4.48 2.48 3l3.75 3.75L9.98 3l1.48 1.48-3.75 3.75z"></path></svg>';
|
29
|
+
closeButton.addEventListener('click', () => {
|
30
|
+
toast.classList.add('hide');
|
31
|
+
toast.addEventListener('transitionend', () => toast.remove());
|
32
|
+
});
|
33
|
+
|
34
|
+
const progressBar = document.createElement('div');
|
35
|
+
progressBar.className = `toast__progress-bar toast__progress-bar--${type}`;
|
36
|
+
progressBar.style.animationDuration = `${duration}ms`;
|
37
|
+
|
38
|
+
const body = document.createElement('div');
|
39
|
+
body.className = 'toast__body';
|
40
|
+
body.textContent = message;
|
41
|
+
|
42
|
+
toast.appendChild(body);
|
43
|
+
toast.appendChild(closeButton);
|
44
|
+
toast.appendChild(progressBar);
|
45
|
+
|
46
|
+
toast.addEventListener('click', () => {
|
47
|
+
toast.classList.add('hide');
|
48
|
+
toast.addEventListener('transitionend', () => toast.remove());
|
49
|
+
});
|
50
|
+
toast.addEventListener('mouseover', () => progressBar.style.animationPlayState = 'paused');
|
51
|
+
toast.addEventListener('mouseout', () => progressBar.style.animationPlayState = 'running');
|
52
|
+
|
25
53
|
return toast;
|
26
54
|
}
|
27
|
-
|
55
|
+
|
56
|
+
});
|
@@ -16,22 +16,68 @@
|
|
16
16
|
padding: 16px;
|
17
17
|
margin: 8px;
|
18
18
|
color: #333;
|
19
|
+
position: relative;
|
20
|
+
transition: transform 0.5s ease-in-out;
|
21
|
+
transform: translateX(100%);
|
22
|
+
}
|
23
|
+
|
24
|
+
.toast.show {
|
25
|
+
transform: translateX(0);
|
26
|
+
}
|
27
|
+
|
28
|
+
.toast.hide {
|
29
|
+
transform: translateX(100%);
|
19
30
|
}
|
20
31
|
|
21
32
|
.toast--success {
|
22
|
-
border-
|
33
|
+
border-bottom: 5px solid #4caf50;
|
23
34
|
}
|
24
35
|
|
25
36
|
.toast--error {
|
26
|
-
border-
|
37
|
+
border-bottom: 5px solid #f44336;
|
27
38
|
}
|
28
39
|
|
29
40
|
.toast--info {
|
30
|
-
border-
|
41
|
+
border-bottom: 5px solid #2196f3;
|
31
42
|
}
|
32
43
|
|
33
44
|
.toast--warning {
|
34
|
-
border-
|
45
|
+
border-bottom: 5px solid #ff9800;
|
46
|
+
}
|
47
|
+
|
48
|
+
.toast__close-button {
|
49
|
+
color: #333;
|
50
|
+
background-color: transparent;
|
51
|
+
border: none;
|
52
|
+
padding: 0;
|
53
|
+
cursor: pointer;
|
54
|
+
opacity: 0.7;
|
55
|
+
transition: opacity 0.3s;
|
56
|
+
align-self: flex-start;
|
57
|
+
margin-left: auto;
|
58
|
+
}
|
59
|
+
|
60
|
+
.toast__close-button:hover {
|
61
|
+
opacity: 1;
|
62
|
+
}
|
63
|
+
|
64
|
+
.toast__progress-bar {
|
65
|
+
position: absolute;
|
66
|
+
bottom: 0;
|
67
|
+
left: 0;
|
68
|
+
width: 100%;
|
69
|
+
height: 4px;
|
70
|
+
background-color: currentColor;
|
71
|
+
animation: progress-bar 5s linear forwards;
|
72
|
+
}
|
73
|
+
|
74
|
+
@keyframes progress-bar {
|
75
|
+
from {
|
76
|
+
width: 100%;
|
77
|
+
}
|
78
|
+
to {
|
79
|
+
width: 0;
|
80
|
+
}
|
35
81
|
}
|
36
82
|
<% elsif RailsToastify.configuration.framework == :tailwind %>
|
37
83
|
.toast-container {
|
@@ -39,22 +85,57 @@
|
|
39
85
|
}
|
40
86
|
|
41
87
|
.toast {
|
42
|
-
@apply flex items-center bg-white rounded shadow p-4 my-2 text-gray-800;
|
88
|
+
@apply flex items-center bg-white rounded shadow p-4 my-2 text-gray-800 relative;
|
89
|
+
}
|
90
|
+
|
91
|
+
.toast {
|
92
|
+
@apply transition-transform duration-500 ease-in-out;
|
93
|
+
transform: translateX(100%);
|
94
|
+
}
|
95
|
+
|
96
|
+
.toast.show {
|
97
|
+
transform: translateX(0);
|
98
|
+
}
|
99
|
+
|
100
|
+
.toast.hide {
|
101
|
+
transform: translateX(100%);
|
43
102
|
}
|
44
103
|
|
45
104
|
.toast--success {
|
46
|
-
@apply border-
|
105
|
+
@apply border-b-4 border-green-500;
|
47
106
|
}
|
48
107
|
|
49
108
|
.toast--error {
|
50
|
-
@apply border-
|
109
|
+
@apply border-b-4 border-red-500;
|
51
110
|
}
|
52
111
|
|
53
112
|
.toast--info {
|
54
|
-
@apply border-
|
113
|
+
@apply border-b-4 border-blue-500;
|
55
114
|
}
|
56
115
|
|
57
116
|
.toast--warning {
|
58
|
-
@apply border-
|
117
|
+
@apply border-b-4 border-yellow-500;
|
118
|
+
}
|
119
|
+
|
120
|
+
.toast__close-button {
|
121
|
+
@apply text-gray-800 bg-transparent border-none p-0 cursor-pointer opacity-70 transition-opacity duration-300 self-start ml-auto;
|
122
|
+
&:hover {
|
123
|
+
@apply opacity-100;
|
124
|
+
}
|
125
|
+
}
|
126
|
+
|
127
|
+
.toast__progress-bar {
|
128
|
+
@apply absolute bottom-0 left-0 w-full h-1;
|
129
|
+
background-color: currentColor;
|
130
|
+
animation: progress-bar 5s linear forwards;
|
131
|
+
}
|
132
|
+
|
133
|
+
@keyframes progress-bar {
|
134
|
+
from {
|
135
|
+
width: 100%;
|
136
|
+
}
|
137
|
+
to {
|
138
|
+
width: 0;
|
139
|
+
}
|
59
140
|
}
|
60
|
-
<% end %>
|
141
|
+
<% end %>
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: rails_toastify
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.1.
|
4
|
+
version: 0.1.4
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Elton Santos
|
8
8
|
autorequire:
|
9
9
|
bindir: exe
|
10
10
|
cert_chain: []
|
11
|
-
date: 2024-06-
|
11
|
+
date: 2024-06-27 00:00:00.000000000 Z
|
12
12
|
dependencies: []
|
13
13
|
description: "\U0001F389 Rails Toastify allows you to add notifications to your app
|
14
14
|
with ease. Pay Attention: this gem still is in development. Please CONTRIBUTE"
|