225 |
226 |
227 |
228 | ## License
229 |
230 | MIT © [Varun A P](https://github.com/apvarun)
231 |
232 | [ie]: https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/edge.png
233 | [firefox]: https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/firefox.png
234 | [chrome]: https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/chrome.png
235 | [safari]: https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/safari.png
236 | [opera]: https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/opera.png
237 |
--------------------------------------------------------------------------------
/src/toastify.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * Toastify js 1.7.0
3 | * https://github.com/apvarun/toastify-js
4 | * @license MIT licensed
5 | *
6 | * Copyright (C) 2018 Varun A P
7 | */
8 | (function(root, factory) {
9 | if (typeof module === "object" && module.exports) {
10 | module.exports = factory();
11 | } else {
12 | root.Toastify = factory();
13 | }
14 | })(this, function(global) {
15 | // Object initialization
16 | var Toastify = function(options) {
17 | // Returning a new init object
18 | return new Toastify.lib.init(options);
19 | },
20 | // Library version
21 | version = "1.7.0";
22 |
23 | // Defining the prototype of the object
24 | Toastify.lib = Toastify.prototype = {
25 | toastify: version,
26 |
27 | constructor: Toastify,
28 |
29 | // Initializing the object with required parameters
30 | init: function(options) {
31 | // Verifying and validating the input object
32 | if (!options) {
33 | options = {};
34 | }
35 |
36 | // Creating the options object
37 | this.options = {};
38 |
39 | this.toastElement = null;
40 |
41 | // Validating the options
42 | this.options.text = options.text || "Hi there!"; // Display message
43 | this.options.duration = options.duration === 0 ? 0 : options.duration || 3000; // Display duration
44 | this.options.selector = options.selector; // Parent selector
45 | this.options.callback = options.callback || function() {}; // Callback after display
46 | this.options.destination = options.destination; // On-click destination
47 | this.options.newWindow = options.newWindow || false; // Open destination in new window
48 | this.options.close = options.close || false; // Show toast close icon
49 | this.options.gravity = options.gravity === "bottom" ? "toastify-bottom" : "toastify-top"; // toast position - top or bottom
50 | this.options.positionLeft = options.positionLeft || false; // toast position - left or right
51 | this.options.position = options.position || ''; // toast position - left or right
52 | this.options.backgroundColor = options.backgroundColor; // toast background color
53 | this.options.avatar = options.avatar || ""; // img element src - url or a path
54 | this.options.className = options.className || ""; // additional class names for the toast
55 | this.options.stopOnFocus = options.stopOnFocus === undefined? true: options.stopOnFocus; // stop timeout on focus
56 | this.options.onClick = options.onClick; // Callback after click
57 |
58 | // Returning the current object for chaining functions
59 | return this;
60 | },
61 |
62 | // Building the DOM element
63 | buildToast: function() {
64 | // Validating if the options are defined
65 | if (!this.options) {
66 | throw "Toastify is not initialized";
67 | }
68 |
69 | // Creating the DOM object
70 | var divElement = document.createElement("div");
71 | divElement.className = "toastify on " + this.options.className;
72 |
73 | // Positioning toast to left or right or center
74 | if (!!this.options.position) {
75 | divElement.className += " toastify-" + this.options.position;
76 | } else {
77 | // To be depreciated in further versions
78 | if (this.options.positionLeft === true) {
79 | divElement.className += " toastify-left";
80 | console.warn('Property `positionLeft` will be depreciated in further versions. Please use `position` instead.')
81 | } else {
82 | // Default position
83 | divElement.className += " toastify-right";
84 | }
85 | }
86 |
87 | // Assigning gravity of element
88 | divElement.className += " " + this.options.gravity;
89 |
90 | if (this.options.backgroundColor) {
91 | divElement.style.background = this.options.backgroundColor;
92 | }
93 |
94 | // Adding the toast message
95 | divElement.innerHTML = this.options.text;
96 |
97 | if (this.options.avatar !== "") {
98 | var avatarElement = document.createElement("img");
99 | avatarElement.src = this.options.avatar;
100 |
101 | avatarElement.className = "toastify-avatar";
102 |
103 | if (this.options.position == "left" || this.options.positionLeft === true) {
104 | // Adding close icon on the left of content
105 | divElement.appendChild(avatarElement);
106 | } else {
107 | // Adding close icon on the right of content
108 | divElement.insertAdjacentElement("beforeend", avatarElement);
109 | }
110 | }
111 |
112 | // Adding a close icon to the toast
113 | if (this.options.close === true) {
114 | // Create a span for close element
115 | var closeElement = document.createElement("span");
116 | closeElement.innerHTML = "✖";
117 |
118 | closeElement.className = "toast-close";
119 |
120 | // Triggering the removal of toast from DOM on close click
121 | closeElement.addEventListener(
122 | "click",
123 | function(event) {
124 | event.stopPropagation();
125 | this.removeElement(this.toastElement);
126 | window.clearTimeout(this.toastElement.timeOutValue);
127 | }.bind(this)
128 | );
129 |
130 | //Calculating screen width
131 | var width = window.innerWidth > 0 ? window.innerWidth : screen.width;
132 |
133 | // Adding the close icon to the toast element
134 | // Display on the right if screen width is less than or equal to 360px
135 | if ((this.options.position == "left" || this.options.positionLeft === true) && width > 360) {
136 | // Adding close icon on the left of content
137 | divElement.insertAdjacentElement("afterbegin", closeElement);
138 | } else {
139 | // Adding close icon on the right of content
140 | divElement.appendChild(closeElement);
141 | }
142 | }
143 |
144 | // Clear timeout while toast is focused
145 | if (this.options.stopOnFocus && this.options.duration > 0) {
146 | const self = this;
147 | // stop countdown
148 | divElement.addEventListener(
149 | "mouseover",
150 | function(event) {
151 | window.clearTimeout(divElement.timeOutValue);
152 | }
153 | )
154 | // add back the timeout
155 | divElement.addEventListener(
156 | "mouseleave",
157 | function() {
158 | divElement.timeOutValue = window.setTimeout(
159 | function() {
160 | // Remove the toast from DOM
161 | self.removeElement(divElement);
162 | },
163 | self.options.duration
164 | )
165 | }
166 | )
167 | }
168 |
169 | // Adding an on-click destination path
170 | if (typeof this.options.destination !== "undefined") {
171 | divElement.addEventListener(
172 | "click",
173 | function(event) {
174 | event.stopPropagation();
175 | if (this.options.newWindow === true) {
176 | window.open(this.options.destination, "_blank");
177 | } else {
178 | window.location = this.options.destination;
179 | }
180 | }.bind(this)
181 | );
182 | }
183 |
184 | if (typeof this.options.onClick === "function" && typeof this.options.destination === "undefined") {
185 | divElement.addEventListener(
186 | "click",
187 | function(event) {
188 | event.stopPropagation();
189 | this.options.onClick();
190 | }.bind(this)
191 | );
192 | }
193 |
194 | // Returning the generated element
195 | return divElement;
196 | },
197 |
198 | // Displaying the toast
199 | showToast: function() {
200 | // Creating the DOM object for the toast
201 | this.toastElement = this.buildToast();
202 |
203 | // Getting the root element to with the toast needs to be added
204 | var rootElement;
205 | if (typeof this.options.selector === "undefined") {
206 | rootElement = document.body;
207 | } else {
208 | rootElement = document.getElementById(this.options.selector);
209 | }
210 |
211 | // Validating if root element is present in DOM
212 | if (!rootElement) {
213 | throw "Root element is not defined";
214 | }
215 |
216 | // Adding the DOM element
217 | rootElement.insertBefore(this.toastElement, rootElement.firstChild);
218 |
219 | // Repositioning the toasts in case multiple toasts are present
220 | Toastify.reposition();
221 |
222 | if (this.options.duration > 0) {
223 | this.toastElement.timeOutValue = window.setTimeout(
224 | function() {
225 | // Remove the toast from DOM
226 | this.removeElement(this.toastElement);
227 | }.bind(this),
228 | this.options.duration
229 | ); // Binding `this` for function invocation
230 | }
231 |
232 | // Supporting function chaining
233 | return this;
234 | },
235 |
236 | hideToast: function() {
237 | if (this.toastElement.timeOutValue) {
238 | clearTimeout(this.toastElement.timeOutValue);
239 | }
240 | this.removeElement(this.toastElement);
241 | },
242 |
243 | // Removing the element from the DOM
244 | removeElement: function(toastElement) {
245 | // Hiding the element
246 | // toastElement.classList.remove("on");
247 | toastElement.className = toastElement.className.replace(" on", "");
248 |
249 | // Removing the element from DOM after transition end
250 | window.setTimeout(
251 | function() {
252 | // Remove the elemenf from the DOM, only when the parent node was not removed before.
253 | if (toastElement.parentNode) {
254 | toastElement.parentNode.removeChild(toastElement);
255 | }
256 |
257 | // Calling the callback function
258 | this.options.callback.call(toastElement);
259 |
260 | // Repositioning the toasts again
261 | Toastify.reposition();
262 | }.bind(this),
263 | 400
264 | ); // Binding `this` for function invocation
265 | },
266 | };
267 |
268 | // Positioning the toasts on the DOM
269 | Toastify.reposition = function() {
270 | // Top margins with gravity
271 | var topLeftOffsetSize = {
272 | top: 15,
273 | bottom: 15,
274 | };
275 | var topRightOffsetSize = {
276 | top: 15,
277 | bottom: 15,
278 | };
279 | var offsetSize = {
280 | top: 15,
281 | bottom: 15,
282 | };
283 |
284 | // Get all toast messages on the DOM
285 | var allToasts = document.getElementsByClassName("toastify");
286 |
287 | var classUsed;
288 |
289 | // Modifying the position of each toast element
290 | for (var i = 0; i < allToasts.length; i++) {
291 | // Getting the applied gravity
292 | if (containsClass(allToasts[i], "toastify-top") === true) {
293 | classUsed = "toastify-top";
294 | } else {
295 | classUsed = "toastify-bottom";
296 | }
297 |
298 | var height = allToasts[i].offsetHeight;
299 | classUsed = classUsed.substr(9, classUsed.length-1)
300 | // Spacing between toasts
301 | var offset = 15;
302 |
303 | var width = window.innerWidth > 0 ? window.innerWidth : screen.width;
304 |
305 | // Show toast in center if screen with less than or qual to 360px
306 | if (width <= 360) {
307 | // Setting the position
308 | allToasts[i].style[classUsed] = offsetSize[classUsed] + "px";
309 |
310 | offsetSize[classUsed] += height + offset;
311 | } else {
312 | if (containsClass(allToasts[i], "toastify-left") === true) {
313 | // Setting the position
314 | allToasts[i].style[classUsed] = topLeftOffsetSize[classUsed] + "px";
315 |
316 | topLeftOffsetSize[classUsed] += height + offset;
317 | } else {
318 | // Setting the position
319 | allToasts[i].style[classUsed] = topRightOffsetSize[classUsed] + "px";
320 |
321 | topRightOffsetSize[classUsed] += height + offset;
322 | }
323 | }
324 | }
325 |
326 | // Supporting function chaining
327 | return this;
328 | };
329 |
330 | function containsClass(elem, yourClass) {
331 | if (!elem || typeof yourClass !== "string") {
332 | return false;
333 | } else if (
334 | elem.className &&
335 | elem.className
336 | .trim()
337 | .split(/\s+/gi)
338 | .indexOf(yourClass) > -1
339 | ) {
340 | return true;
341 | } else {
342 | return false;
343 | }
344 | }
345 |
346 | // Setting up the prototype for the init object
347 | Toastify.lib.init.prototype = Toastify.lib;
348 |
349 | // Returning the Toastify function to be assigned to the window object/module
350 | return Toastify;
351 | });
352 |
--------------------------------------------------------------------------------
142 | 
147 | 
152 | 
157 | 
162 | 
167 | 
172 | 
179 | 
184 | 
189 | 
194 | 
199 | 
204 | 
209 | 
216 | 
221 |