| 1 |
(function (window, document) { |
| 2 |
"use strict"; |
| 3 |
|
| 4 |
if (window.BasalamToast && window.BasalamToast.__initialized) { |
| 5 |
return; |
| 6 |
} |
| 7 |
|
| 8 |
var CONTAINER_ID = "basalam-toast-container"; |
| 9 |
var DEFAULT_DURATION = 4500; |
| 10 |
|
| 11 |
var ICONS = { |
| 12 |
success: |
| 13 |
'<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">' + |
| 14 |
'<circle cx="12" cy="12" r="10" fill="currentColor" opacity="0.15"/>' + |
| 15 |
'<path d="M7.5 12.5l3 3 6-6.5" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>' + |
| 16 |
"</svg>", |
| 17 |
error: |
| 18 |
'<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">' + |
| 19 |
'<circle cx="12" cy="12" r="10" fill="currentColor" opacity="0.15"/>' + |
| 20 |
'<path d="M9 9l6 6M15 9l-6 6" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/>' + |
| 21 |
"</svg>", |
| 22 |
warning: |
| 23 |
'<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">' + |
| 24 |
'<path d="M12 3l10 18H2L12 3z" fill="currentColor" opacity="0.15"/>' + |
| 25 |
'<path d="M12 3l10 18H2L12 3z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/>' + |
| 26 |
'<path d="M12 10v4.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>' + |
| 27 |
'<circle cx="12" cy="17.5" r="1.1" fill="currentColor"/>' + |
| 28 |
"</svg>", |
| 29 |
info: |
| 30 |
'<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">' + |
| 31 |
'<circle cx="12" cy="12" r="10" fill="currentColor" opacity="0.15"/>' + |
| 32 |
'<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.8"/>' + |
| 33 |
'<path d="M12 11v5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>' + |
| 34 |
'<circle cx="12" cy="8" r="1.1" fill="currentColor"/>' + |
| 35 |
"</svg>", |
| 36 |
}; |
| 37 |
|
| 38 |
var DEFAULT_TITLES = { |
| 39 |
success: "� |
| 40 |
وفق", |
| 41 |
error: "خطا", |
| 42 |
warning: "هشدار", |
| 43 |
info: "اطلاعات", |
| 44 |
}; |
| 45 |
|
| 46 |
function ensureContainer() { |
| 47 |
var container = document.getElementById(CONTAINER_ID); |
| 48 |
if (container) { |
| 49 |
return container; |
| 50 |
} |
| 51 |
|
| 52 |
container = document.createElement("div"); |
| 53 |
container.id = CONTAINER_ID; |
| 54 |
container.className = "basalam-toast-container"; |
| 55 |
container.setAttribute("role", "region"); |
| 56 |
container.setAttribute("aria-live", "polite"); |
| 57 |
container.setAttribute("aria-label", "اعلانها"); |
| 58 |
document.body.appendChild(container); |
| 59 |
return container; |
| 60 |
} |
| 61 |
|
| 62 |
function dismiss(toast) { |
| 63 |
if (!toast || toast.dataset.leaving === "1") { |
| 64 |
return; |
| 65 |
} |
| 66 |
toast.dataset.leaving = "1"; |
| 67 |
toast.classList.add("is-leaving"); |
| 68 |
toast.classList.remove("is-visible"); |
| 69 |
|
| 70 |
var remove = function () { |
| 71 |
if (toast.parentNode) { |
| 72 |
toast.parentNode.removeChild(toast); |
| 73 |
} |
| 74 |
}; |
| 75 |
|
| 76 |
var fallback = window.setTimeout(remove, 400); |
| 77 |
toast.addEventListener( |
| 78 |
"transitionend", |
| 79 |
function handler() { |
| 80 |
window.clearTimeout(fallback); |
| 81 |
toast.removeEventListener("transitionend", handler); |
| 82 |
remove(); |
| 83 |
}, |
| 84 |
{ once: true } |
| 85 |
); |
| 86 |
} |
| 87 |
|
| 88 |
function createToast(message, type, options) { |
| 89 |
var opts = options || {}; |
| 90 |
var resolvedType = ICONS[type] ? type : "info"; |
| 91 |
var duration = |
| 92 |
typeof opts.duration === "number" ? opts.duration : DEFAULT_DURATION; |
| 93 |
var hasTitle = Object.prototype.hasOwnProperty.call(opts, "title"); |
| 94 |
var title = hasTitle ? opts.title : DEFAULT_TITLES[resolvedType]; |
| 95 |
|
| 96 |
var container = ensureContainer(); |
| 97 |
|
| 98 |
var toast = document.createElement("div"); |
| 99 |
toast.className = |
| 100 |
"basalam-toast basalam-toast--" + resolvedType; |
| 101 |
toast.setAttribute("role", resolvedType === "error" ? "alert" : "status"); |
| 102 |
|
| 103 |
var iconWrap = document.createElement("span"); |
| 104 |
iconWrap.className = "basalam-toast__icon"; |
| 105 |
iconWrap.innerHTML = ICONS[resolvedType]; |
| 106 |
toast.appendChild(iconWrap); |
| 107 |
|
| 108 |
var body = document.createElement("div"); |
| 109 |
body.className = "basalam-toast__body"; |
| 110 |
|
| 111 |
if (title) { |
| 112 |
var titleEl = document.createElement("p"); |
| 113 |
titleEl.className = "basalam-toast__title"; |
| 114 |
titleEl.textContent = String(title); |
| 115 |
body.appendChild(titleEl); |
| 116 |
} |
| 117 |
|
| 118 |
var messageEl = document.createElement("p"); |
| 119 |
messageEl.className = "basalam-toast__message"; |
| 120 |
messageEl.textContent = message == null ? "" : String(message); |
| 121 |
body.appendChild(messageEl); |
| 122 |
|
| 123 |
toast.appendChild(body); |
| 124 |
|
| 125 |
var closeBtn = document.createElement("button"); |
| 126 |
closeBtn.type = "button"; |
| 127 |
closeBtn.className = "basalam-toast__close"; |
| 128 |
closeBtn.setAttribute("aria-label", "بستن"); |
| 129 |
closeBtn.innerHTML = "×"; |
| 130 |
closeBtn.addEventListener("click", function () { |
| 131 |
dismiss(toast); |
| 132 |
}); |
| 133 |
toast.appendChild(closeBtn); |
| 134 |
|
| 135 |
var timer = null; |
| 136 |
if (duration > 0) { |
| 137 |
var progress = document.createElement("div"); |
| 138 |
progress.className = "basalam-toast__progress"; |
| 139 |
var progressBar = document.createElement("div"); |
| 140 |
progressBar.className = "basalam-toast__progress-bar"; |
| 141 |
progressBar.style.animationDuration = duration + "ms"; |
| 142 |
progress.appendChild(progressBar); |
| 143 |
toast.appendChild(progress); |
| 144 |
|
| 145 |
timer = window.setTimeout(function () { |
| 146 |
dismiss(toast); |
| 147 |
}, duration); |
| 148 |
|
| 149 |
toast.addEventListener("mouseenter", function () { |
| 150 |
if (timer) { |
| 151 |
window.clearTimeout(timer); |
| 152 |
timer = null; |
| 153 |
} |
| 154 |
progressBar.style.animationPlayState = "paused"; |
| 155 |
}); |
| 156 |
toast.addEventListener("mouseleave", function () { |
| 157 |
progressBar.style.animationPlayState = "running"; |
| 158 |
if (!timer) { |
| 159 |
timer = window.setTimeout(function () { |
| 160 |
dismiss(toast); |
| 161 |
}, duration / 2); |
| 162 |
} |
| 163 |
}); |
| 164 |
} |
| 165 |
|
| 166 |
container.appendChild(toast); |
| 167 |
|
| 168 |
window.requestAnimationFrame(function () { |
| 169 |
window.requestAnimationFrame(function () { |
| 170 |
toast.classList.add("is-visible"); |
| 171 |
}); |
| 172 |
}); |
| 173 |
|
| 174 |
return { |
| 175 |
element: toast, |
| 176 |
dismiss: function () { |
| 177 |
if (timer) { |
| 178 |
window.clearTimeout(timer); |
| 179 |
timer = null; |
| 180 |
} |
| 181 |
dismiss(toast); |
| 182 |
}, |
| 183 |
}; |
| 184 |
} |
| 185 |
|
| 186 |
var BasalamToast = { |
| 187 |
__initialized: true, |
| 188 |
show: function (message, type, options) { |
| 189 |
return createToast(message, type, options); |
| 190 |
}, |
| 191 |
success: function (message, options) { |
| 192 |
return createToast(message, "success", options); |
| 193 |
}, |
| 194 |
error: function (message, options) { |
| 195 |
return createToast(message, "error", options); |
| 196 |
}, |
| 197 |
warning: function (message, options) { |
| 198 |
return createToast(message, "warning", options); |
| 199 |
}, |
| 200 |
info: function (message, options) { |
| 201 |
return createToast(message, "info", options); |
| 202 |
}, |
| 203 |
dismissAll: function () { |
| 204 |
var container = document.getElementById(CONTAINER_ID); |
| 205 |
if (!container) { |
| 206 |
return; |
| 207 |
} |
| 208 |
var toasts = container.querySelectorAll(".basalam-toast"); |
| 209 |
for (var i = 0; i < toasts.length; i++) { |
| 210 |
dismiss(toasts[i]); |
| 211 |
} |
| 212 |
}, |
| 213 |
}; |
| 214 |
|
| 215 |
window.BasalamToast = BasalamToast; |
| 216 |
})(window, document); |
| 217 |
|
