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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: a4c911f3af15f4890c1444105b9f61e171df86f803c36b673664876fd1b5df78
4
- data.tar.gz: 925b7c0a30747f92a1e9f2bf7d1ee306a000a445e7d35722c35b35dcb79bd87a
3
+ metadata.gz: ad106eeec4a5dc91967781e1012327953d768abee3af5d5868c72fc8c29706be
4
+ data.tar.gz: afa96d9999758b8c2820073ad06474afabaed7d6403b895d0e7f1284df9b3743
5
5
  SHA512:
6
- metadata.gz: 928bab3cac6f526bb1b5261a5fbedb31e33412e335344e60a377c6500c17c14496af4fbe85fb8fa4c8ce7856f29678bf386d38689a431a1cff318872dab7b11b
7
- data.tar.gz: 4af1c98f67a8b37f05089c8d11060398a7a0046dcfd8c6d5d9361e93eff8a2a6c28eef410eb24247eda7f105c3683501bfc9bb63931c38c8f6ccd724c87313bf
6
+ metadata.gz: 950fe77e61917edbb1283a7330d76f45fd9a7b952f17eb99548e04080e1c09a5df9c2979ec98afbc71abfec67973b4e1e2009070bbf9139338315f24e597e8a4
7
+ data.tar.gz: 746f2e26fe44d665ed3f47adabb9e7105aca988b35841621be478619d784308b096ebd5b9009c9bec29f841cb769d317f6cde42635f59d5bf0dd5702f8f0742c
data/CHANGELOG.md CHANGED
@@ -1,3 +1,8 @@
1
+ # 0.1.4
2
+
3
+ - Change CSS
4
+ - Change JS
5
+
1
6
  ## 0.1.3
2
7
 
3
8
  - Change README
@@ -1,8 +1,8 @@
1
1
  document.addEventListener('DOMContentLoaded', () => {
2
2
  window.RailsToastify = {
3
- showToast(message, type = 'info', duration = 3000) {
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.textContent = message;
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-left: 5px solid #4caf50;
33
+ border-bottom: 5px solid #4caf50;
23
34
  }
24
35
 
25
36
  .toast--error {
26
- border-left: 5px solid #f44336;
37
+ border-bottom: 5px solid #f44336;
27
38
  }
28
39
 
29
40
  .toast--info {
30
- border-left: 5px solid #2196f3;
41
+ border-bottom: 5px solid #2196f3;
31
42
  }
32
43
 
33
44
  .toast--warning {
34
- border-left: 5px solid #ff9800;
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-l-4 border-green-500;
105
+ @apply border-b-4 border-green-500;
47
106
  }
48
107
 
49
108
  .toast--error {
50
- @apply border-l-4 border-red-500;
109
+ @apply border-b-4 border-red-500;
51
110
  }
52
111
 
53
112
  .toast--info {
54
- @apply border-l-4 border-blue-500;
113
+ @apply border-b-4 border-blue-500;
55
114
  }
56
115
 
57
116
  .toast--warning {
58
- @apply border-l-4 border-yellow-500;
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 %>
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module RailsToastify
4
- VERSION = "0.1.3"
4
+ VERSION = "0.1.4"
5
5
  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.3
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-25 00:00:00.000000000 Z
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"