toastify-js
Advanced tools
Comparing version 1.2.1 to 1.2.2
# Changelog | ||
All the changes made to toastify-js library. | ||
## [1.2.1] - 2018-05-31 | ||
* Added support for Classes. Now custom classes can be added to the toast while creating it. | ||
## [1.2.0] - 2018-03-05 | ||
- Fix issue when `destination` and `close` options is used at the same time | ||
* Fix issue when `destination` and `close` options is used at the same time | ||
## [1.1.0] - 2018-02-18 | ||
- Browser support extended to IE10+ without any polyfills | ||
* Browser support extended to IE10+ without any polyfills | ||
## [1.0.0] - 2018-02-17 | ||
- Support for modules | ||
* Support for modules | ||
## [0.0.6] - 2017-09-09 | ||
- Support for changing background [Options] | ||
- Optimized toast positioning logic | ||
- Added changelog for library update tracking | ||
* Support for changing background [Options] | ||
* Optimized toast positioning logic | ||
* Added changelog for library update tracking | ||
## [0.0.5] - 2017-09-06 | ||
- Support for toast messages on mobile screens | ||
- Tweaked close icon | ||
* Support for toast messages on mobile screens | ||
* Tweaked close icon | ||
## [0.0.4] - 2017-09-05 | ||
- Support for positioning of toasts on the page | ||
* Support for positioning of toasts on the page | ||
## [0.0.3] - 2017-09-05 | ||
- Close buton for toasts [Options] | ||
* Close buton for toasts [Options] | ||
## [0.0.2] - 2017-09-04 | ||
- Option to add on-click link for toasts | ||
- Updated comments for code readability | ||
* Option to add on-click link for toasts | ||
* Updated comments for code readability | ||
## [0.0.1] - 2017-09-02 | ||
- Initial Release | ||
- Added Preview page | ||
- Optimized function structure | ||
* Initial Release | ||
* Added Preview page | ||
* Optimized function structure |
var bgColors = [ | ||
"linear-gradient(to right, #00b09b, #96c93d)", | ||
"linear-gradient(to right, #ff5f6d, #ffc371)" | ||
], | ||
i = 0; | ||
"linear-gradient(to right, #ff5f6d, #ffc371)", | ||
], | ||
i = 0; | ||
Toastify({ | ||
text: "Hi", | ||
duration: 4500, | ||
destination: 'https://github.com/apvarun/toastify-js', | ||
newWindow: true, | ||
gravity: "top", | ||
positionLeft: true | ||
text: "Hi", | ||
duration: 4500, | ||
destination: "https://github.com/apvarun/toastify-js", | ||
newWindow: true, | ||
gravity: "top", | ||
positionLeft: true, | ||
}).showToast(); | ||
setTimeout(function () { | ||
Toastify({ | ||
text: "Simple JavaScript Toasts", | ||
gravity: "top", | ||
positionLeft: true, | ||
backgroundColor: "#0f3443" | ||
}).showToast(); | ||
setTimeout(function() { | ||
Toastify({ | ||
text: "Simple JavaScript Toasts", | ||
gravity: "top", | ||
positionLeft: true, | ||
backgroundColor: "#0f3443", | ||
}).showToast(); | ||
}, 1000); | ||
@@ -27,10 +27,10 @@ | ||
var options = { | ||
text: "Happy toasting!", | ||
duration: 2500, | ||
callback: function () { | ||
console.log("Toast hidden"); | ||
Toastify.reposition(); | ||
}, | ||
close: true, | ||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)" | ||
text: "Happy toasting!", | ||
duration: 2500, | ||
callback: function() { | ||
console.log("Toast hidden"); | ||
Toastify.reposition(); | ||
}, | ||
close: true, | ||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)", | ||
}; | ||
@@ -42,25 +42,25 @@ | ||
// Toast after delay | ||
setTimeout(function () { | ||
myToast.showToast(); | ||
setTimeout(function() { | ||
myToast.showToast(); | ||
}, 4500); | ||
setTimeout(function () { | ||
Toastify({ | ||
text: "Highly customizable", | ||
gravity: "bottom", | ||
positionLeft: true, | ||
close: true, | ||
backgroundColor: "linear-gradient(to right, #ff5f6d, #ffc371)" | ||
}).showToast(); | ||
setTimeout(function() { | ||
Toastify({ | ||
text: "Highly customizable", | ||
gravity: "bottom", | ||
positionLeft: true, | ||
close: true, | ||
backgroundColor: "linear-gradient(to right, #ff5f6d, #ffc371)", | ||
}).showToast(); | ||
}, 3000); | ||
// Displaying toast on manual action `Try` | ||
document.getElementById('new-toast').addEventListener('click', function () { | ||
Toastify({ | ||
text: "I am a toast", | ||
duration: 3000, | ||
close: i%3 ? true: false, | ||
backgroundColor: bgColors[i%2] | ||
}).showToast(); | ||
i++; | ||
document.getElementById("new-toast").addEventListener("click", function() { | ||
Toastify({ | ||
text: "I am a toast", | ||
duration: 3000, | ||
close: i % 3 ? true : false, | ||
backgroundColor: bgColors[i % 2], | ||
}).showToast(); | ||
i++; | ||
}); |
{ | ||
"name": "toastify-js", | ||
"version": "1.2.1", | ||
"description": | ||
"Toastify is a lightweight, vanilla JS toast notification library.", | ||
"version": "1.2.2", | ||
"description": "Toastify is a lightweight, vanilla JS toast notification library.", | ||
"main": "./src/toastify.js", | ||
@@ -11,3 +10,8 @@ "repository": { | ||
}, | ||
"keywords": ["toastify", "javascript", "notifications", "toast"], | ||
"keywords": [ | ||
"toastify", | ||
"javascript", | ||
"notifications", | ||
"toast" | ||
], | ||
"author": "Varun A P", | ||
@@ -14,0 +18,0 @@ "license": "MIT", |
@@ -6,3 +6,3 @@ # Toastify | ||
[![toastify-js](https://img.shields.io/badge/toastify--js-1.2.0-brightgreen.svg)](https://www.npmjs.com/package/toastify-js) | ||
[![toastify-js](https://img.shields.io/badge/toastify--js-1.2.2-brightgreen.svg)](https://www.npmjs.com/package/toastify-js) | ||
@@ -17,13 +17,13 @@ Toastify is a lightweight, vanilla JS toast notification library. | ||
- Multiple stacked notifications | ||
- Customizable | ||
- No blocking of execution thread | ||
* Multiple stacked notifications | ||
* Customizable | ||
* No blocking of execution thread | ||
### Customization options | ||
- Notification Text | ||
- Duration | ||
- Toast background color | ||
- Close icon display | ||
- Display position | ||
* Notification Text | ||
* Duration | ||
* Toast background color | ||
* Close icon display | ||
* Display position | ||
@@ -34,7 +34,10 @@ ## Installation | ||
- Run the below command to add toastify-js to your exisitng or new project. | ||
* Run the below command to add toastify-js to your exisitng or new project. | ||
``` | ||
npm install --save toastify-js | ||
``` | ||
or | ||
``` | ||
@@ -44,3 +47,4 @@ yarn add toastify-js -S | ||
- Import toastify-js into your module to start using it. | ||
* Import toastify-js into your module to start using it. | ||
``` | ||
@@ -63,2 +67,3 @@ import Toastify from 'toastify-js' | ||
``` | ||
> Files are delivered via the CDN service provided by [jsdeliver](https://www.jsdelivr.com/) | ||
@@ -70,10 +75,10 @@ | ||
Toastify({ | ||
text: "This is a toast", | ||
duration: 3000, | ||
destination: 'https://github.com/apvarun/toastify-js', | ||
newWindow: true, | ||
close: true, | ||
gravity: "top", // `top` or `bottom` | ||
positionLeft: true, // `true` or `false` | ||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)" | ||
text: "This is a toast", | ||
duration: 3000, | ||
destination: "https://github.com/apvarun/toastify-js", | ||
newWindow: true, | ||
close: true, | ||
gravity: "top", // `top` or `bottom` | ||
positionLeft: true, // `true` or `false` | ||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)", | ||
}).showToast(); | ||
@@ -84,26 +89,43 @@ ``` | ||
+ See the [changelog](https://github.com/apvarun/toastify-js/blob/master/CHANGELOG.md) | ||
* See the [changelog](https://github.com/apvarun/toastify-js/blob/master/CHANGELOG.md) | ||
### Add own custom classes | ||
If you want to use custom classes (like info or warning for example) you can do that via | ||
If you want to use custom classes on the toast for customizing (like info or warning for example), you can do that as follows: | ||
```javascript | ||
Toastify({ | ||
text: "This is a toast", | ||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)", | ||
classes: "info" | ||
text: "This is a toast", | ||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)", | ||
classes: "info", | ||
}).showToast(); | ||
``` | ||
Multiple classes also can be assigned as a string, with spaces between class names. | ||
## Browsers support | ||
| [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/edge.png" alt="IE / Edge" width="16px" height="16px" />](http://godban.github.io/browsers-support-badges/)<br />IE / Edge | [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/firefox.png" alt="Firefox" width="16px" height="16px" />](http://godban.github.io/browsers-support-badges/)<br />Firefox | [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/chrome.png" alt="Chrome" width="16px" height="16px" />](http://godban.github.io/browsers-support-badges/)<br />Chrome | [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/safari.png" alt="Safari" width="16px" height="16px" />](http://godban.github.io/browsers-support-badges/)<br />Safari | [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/opera.png" alt="Opera" width="16px" height="16px" />](http://godban.github.io/browsers-support-badges/)<br />Opera | | ||
| --------- | --------- | --------- | --------- | --------- | | ||
| IE10, IE11, Edge| last 10 versions| last 10 versions| last 10 versions| last 10 versions | ||
| ![][ie]<br />IE / Edge | ![][firefox]<br />Firefox | ![][chrome]<br />Chrome | ![][safari]<br />Safari | ![][opera]<br />Opera | | ||
| ---------------------- | ------------------------- | ----------------------- | ----------------------- | --------------------- | | ||
| IE10, IE11, Edge | last 10 versions | last 10 versions | last 10 versions | last 10 versions | | ||
## Contributors | ||
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> | ||
<!-- prettier-ignore --> | ||
| [![rndevfx](https://avatars2.githubusercontent.com/u/5052076?v=3&s=80)](https://github.com/rndevfx) | [![Wachiwi](https://avatars1.githubusercontent.com/u/4199845?v=3&s=80)](https://github.com/Wachiwi) | | ||
| :--:|:--: | | ||
| [rndevfx](https://github.com/rndevfx) | [Wachiwi](https://github.com/Wachiwi) | | ||
<!-- ALL-CONTRIBUTORS-LIST:END --> | ||
## License | ||
MIT © [Varun A P](https://github.com/apvarun) | ||
[ie]: https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/edge.png | ||
[firefox]: https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/firefox.png | ||
[chrome]: https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/chrome.png | ||
[safari]: https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/safari.png | ||
[opera]: https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/opera.png |
/*! | ||
* Toastify js 1.2.0 | ||
* Toastify js 1.2.2 | ||
* https://github.com/apvarun/toastify-js | ||
@@ -8,310 +8,287 @@ * @license MIT licensed | ||
*/ | ||
; | ||
(function (root, factory) { | ||
if(typeof module === "object" && module.exports) { | ||
require('./toastify.css'); | ||
module.exports = factory(); | ||
} else { | ||
root.Toastify = factory(); | ||
} | ||
}(this, function (global) { | ||
// Object initialization | ||
var Toastify = function (options) { | ||
// Returning a new init object | ||
return new Toastify.lib.init(options); | ||
(function(root, factory) { | ||
if (typeof module === "object" && module.exports) { | ||
require("./toastify.css"); | ||
module.exports = factory(); | ||
} else { | ||
root.Toastify = factory(); | ||
} | ||
})(this, function(global) { | ||
// Object initialization | ||
var Toastify = function(options) { | ||
// Returning a new init object | ||
return new Toastify.lib.init(options); | ||
}, | ||
// Library version | ||
version = "1.2.0"; | ||
// Library version | ||
version = "1.2.2"; | ||
// Defining the prototype of the object | ||
Toastify.lib = Toastify.prototype = { | ||
// Defining the prototype of the object | ||
Toastify.lib = Toastify.prototype = { | ||
toastify: version, | ||
toastify: version, | ||
constructor: Toastify, | ||
constructor: Toastify, | ||
// Initializing the object with required parameters | ||
init: function(options) { | ||
// Verifying and validating the input object | ||
if (!options) { | ||
options = {}; | ||
} | ||
// Initializing the object with required parameters | ||
init: function (options) { | ||
// Creating the options object | ||
this.options = {}; | ||
// Verifying and validating the input object | ||
if (!options) { | ||
options = {}; | ||
} | ||
// Validating the options | ||
this.options.text = options.text || "Hi there!"; // Display message | ||
this.options.duration = options.duration || 3000; // Display duration | ||
this.options.selector = options.selector; // Parent selector | ||
this.options.callback = options.callback || function() {}; // Callback after display | ||
this.options.destination = options.destination; // On-click destination | ||
this.options.newWindow = options.newWindow || false; // Open destination in new window | ||
this.options.close = options.close || false; // Show toast close icon | ||
this.options.gravity = options.gravity == "bottom" ? "bottom" : "top"; // toast position - top or bottom | ||
this.options.positionLeft = options.positionLeft || false; // toast position - left or right | ||
this.options.backgroundColor = | ||
options.backgroundColor || "linear-gradient(135deg, #73a5ff, #5477f5)"; // toast position - left or right | ||
this.options.avatar = options.avatar || ""; // toast position - left or right | ||
this.options.classes = options.classes || ""; // additional classes for the toast | ||
// Creating the options object | ||
this.options = {}; | ||
// Returning the current object for chaining functions | ||
return this; | ||
}, | ||
// Validating the options | ||
this.options.text = options.text || 'Hi there!'; // Display message | ||
this.options.duration = options.duration || 3000; // Display duration | ||
this.options.selector = options.selector; // Parent selector | ||
this.options.callback = options.callback || function () { }; // Callback after display | ||
this.options.destination = options.destination; // On-click destination | ||
this.options.newWindow = options.newWindow || false; // Open destination in new window | ||
this.options.close = options.close || false; // Show toast close icon | ||
this.options.gravity = (options.gravity == "bottom") ? "bottom" : "top"; // toast position - top or bottom | ||
this.options.positionLeft = options.positionLeft || false; // toast position - left or right | ||
this.options.backgroundColor = options.backgroundColor || "linear-gradient(135deg, #73a5ff, #5477f5)"; // toast position - left or right | ||
this.options.avatar = options.avatar || ""; // toast position - left or right | ||
this.options.classes = options.classes || ""; // additional classes for the toast | ||
// Building the DOM element | ||
buildToast: function() { | ||
// Validating if the options are defined | ||
if (!this.options) { | ||
throw "Toastify is not initialized"; | ||
} | ||
// Returning the current object for chaining functions | ||
return this; | ||
}, | ||
// Creating the DOM object | ||
var divElement = document.createElement("div"); | ||
divElement.className = "toastify on " + this.options.classes; | ||
// Building the DOM element | ||
buildToast: function () { | ||
// Positioning toast to left or right | ||
if (this.options.positionLeft === true) { | ||
divElement.className += " left"; | ||
} else { | ||
divElement.className += " right"; | ||
} | ||
// Validating if the options are defined | ||
if (!this.options) { | ||
throw "Toastify is not initialized"; | ||
} | ||
// Assigning gravity of element | ||
divElement.className += " " + this.options.gravity; | ||
// Creating the DOM object | ||
var divElement = document.createElement("div"); | ||
divElement.className = 'toastify on ' + this.options.classes; | ||
divElement.style.background = this.options.backgroundColor; | ||
// Positioning toast to left or right | ||
if (this.options.positionLeft === true) { | ||
divElement.className += " left"; | ||
} else { | ||
divElement.className += " right"; | ||
} | ||
// Adding the toast message | ||
divElement.innerHTML = this.options.text; | ||
// Assigning gravity of element | ||
divElement.className += " " + this.options.gravity; | ||
if (this.options.avatar !== "") { | ||
var avatarElement = document.createElement("img"); | ||
avatarElement.src = this.options.avatar; | ||
divElement.style.background = this.options.backgroundColor; | ||
avatarElement.className = "avatar"; | ||
// Adding the toast message | ||
divElement.innerHTML = this.options.text; | ||
if (this.options.positionLeft === true) { | ||
// Adding close icon on the left of content | ||
divElement.appendChild(avatarElement); | ||
} else { | ||
// Adding close icon on the right of content | ||
divElement.insertAdjacentElement("beforeend", avatarElement); | ||
} | ||
} | ||
if (this.options.avatar !== "") { | ||
var avatarElement = document.createElement("img"); | ||
avatarElement.src = this.options.avatar; | ||
// Adding a close icon to the toast | ||
if (this.options.close === true) { | ||
// Create a span for close element | ||
var closeElement = document.createElement("span"); | ||
closeElement.innerHTML = "✖"; | ||
avatarElement.className = "avatar"; | ||
closeElement.className = "toast-close"; | ||
if (this.options.positionLeft === true) { | ||
// Triggering the removal of toast from DOM on close click | ||
closeElement.addEventListener( | ||
"click", | ||
function(event) { | ||
event.stopPropagation(); | ||
this.removeElement(event.target.parentElement); | ||
window.clearTimeout(event.target.parentElement.timeOutValue); | ||
}.bind(this) | ||
); | ||
// Adding close icon on the left of content | ||
divElement.appendChild(avatarElement); | ||
//Calculating screen width | ||
var width = window.innerWidth > 0 ? window.innerWidth : screen.width; | ||
} else { | ||
// Adding the close icon to the toast element | ||
// Display on the right if screen width is less than or equal to 360px | ||
if (this.options.positionLeft === true && width > 360) { | ||
// Adding close icon on the left of content | ||
divElement.insertAdjacentElement("afterbegin", closeElement); | ||
} else { | ||
// Adding close icon on the right of content | ||
divElement.appendChild(closeElement); | ||
} | ||
} | ||
// Adding close icon on the right of content | ||
divElement.insertAdjacentElement('beforeend', avatarElement); | ||
} | ||
// Adding an on-click destination path | ||
if (typeof this.options.destination !== "undefined") { | ||
divElement.addEventListener( | ||
"click", | ||
function(event) { | ||
event.stopPropagation(); | ||
if (this.options.newWindow === true) { | ||
window.open(this.options.destination, "_blank"); | ||
} else { | ||
window.location = this.options.destination; | ||
} | ||
}.bind(this) | ||
); | ||
} | ||
// Adding a close icon to the toast | ||
if (this.options.close === true) { | ||
// Returning the generated element | ||
return divElement; | ||
}, | ||
// Create a span for close element | ||
var closeElement = document.createElement("span"); | ||
closeElement.innerHTML = "✖"; | ||
// Displaying the toast | ||
showToast: function() { | ||
// Creating the DOM object for the toast | ||
var toastElement = this.buildToast(); | ||
closeElement.className = 'toast-close'; | ||
// Getting the root element to with the toast needs to be added | ||
var rootElement; | ||
if (typeof this.options.selector === "undefined") { | ||
rootElement = document.body; | ||
} else { | ||
rootElement = document.getElementById(this.options.selector); | ||
} | ||
// Triggering the removal of toast from DOM on close click | ||
closeElement.addEventListener('click', function (event) { | ||
// Validating if root element is present in DOM | ||
if (!rootElement) { | ||
throw "Root element is not defined"; | ||
} | ||
event.stopPropagation(); | ||
this.removeElement(event.target.parentElement); | ||
window.clearTimeout(event.target.parentElement.timeOutValue); | ||
// Adding the DOM element | ||
rootElement.insertBefore(toastElement, rootElement.firstChild); | ||
}.bind(this)); | ||
// Repositioning the toasts in case multiple toasts are present | ||
Toastify.reposition(); | ||
//Calculating screen width | ||
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width; | ||
toastElement.timeOutValue = window.setTimeout( | ||
function() { | ||
// Remove the toast from DOM | ||
this.removeElement(toastElement); | ||
}.bind(this), | ||
this.options.duration | ||
); // Binding `this` for function invocation | ||
// Adding the close icon to the toast element | ||
// Display on the right if screen width is less than or equal to 360px | ||
if (this.options.positionLeft === true && width > 360) { | ||
// Supporting function chaining | ||
return this; | ||
}, | ||
// Adding close icon on the left of content | ||
divElement.insertAdjacentElement('afterbegin', closeElement); | ||
// Removing the element from the DOM | ||
removeElement: function(toastElement) { | ||
// Hiding the element | ||
// toastElement.classList.remove("on"); | ||
toastElement.className = toastElement.className.replace(" on", ""); | ||
} else { | ||
// Removing the element from DOM after transition end | ||
window.setTimeout( | ||
function() { | ||
// Remove the elemenf from the DOM | ||
toastElement.parentNode.removeChild(toastElement); | ||
// Adding close icon on the right of content | ||
divElement.appendChild(closeElement); | ||
// Calling the callback function | ||
this.options.callback.call(toastElement); | ||
} | ||
// Repositioning the toasts again | ||
Toastify.reposition(); | ||
}.bind(this), | ||
400 | ||
); // Binding `this` for function invocation | ||
}, | ||
}; | ||
} | ||
// Positioning the toasts on the DOM | ||
Toastify.reposition = function() { | ||
// Top margins with gravity | ||
var topLeftOffsetSize = { | ||
top: 15, | ||
bottom: 15, | ||
}; | ||
var topRightOffsetSize = { | ||
top: 15, | ||
bottom: 15, | ||
}; | ||
var offsetSize = { | ||
top: 15, | ||
bottom: 15, | ||
}; | ||
// Adding an on-click destination path | ||
if (typeof this.options.destination !== 'undefined') { | ||
// Get all toast messages on the DOM | ||
var allToasts = document.getElementsByClassName("toastify"); | ||
divElement.addEventListener('click', function (event) { | ||
var classUsed; | ||
event.stopPropagation(); | ||
if(this.options.newWindow === true){ | ||
window.open(this.options.destination, '_blank') | ||
} else { | ||
window.location = this.options.destination; | ||
} | ||
// Modifying the position of each toast element | ||
for (var i = 0; i < allToasts.length; i++) { | ||
// Getting the applied gravity | ||
if (containsClass(allToasts[i], "top") === true) { | ||
classUsed = "top"; | ||
} else { | ||
classUsed = "bottom"; | ||
} | ||
}.bind(this)); | ||
var height = allToasts[i].offsetHeight; | ||
} | ||
// Spacing between toasts | ||
var offset = 15; | ||
// Returning the generated element | ||
return divElement; | ||
}, | ||
var width = window.innerWidth > 0 ? window.innerWidth : screen.width; | ||
// Displaying the toast | ||
showToast: function () { | ||
// Show toast in center if screen with less than or qual to 360px | ||
if (width <= 360) { | ||
// Setting the position | ||
allToasts[i].style[classUsed] = offsetSize[classUsed] + "px"; | ||
// Creating the DOM object for the toast | ||
var toastElement = this.buildToast(); | ||
offsetSize[classUsed] += height + offset; | ||
} else { | ||
if (containsClass(allToasts[i], "left") === true) { | ||
// Setting the position | ||
allToasts[i].style[classUsed] = topLeftOffsetSize[classUsed] + "px"; | ||
// Getting the root element to with the toast needs to be added | ||
var rootElement; | ||
if (typeof this.options.selector === "undefined") { | ||
rootElement = document.body; | ||
} else { | ||
rootElement = document.getElementById(this.options.selector); | ||
} | ||
topLeftOffsetSize[classUsed] += height + offset; | ||
} else { | ||
// Setting the position | ||
allToasts[i].style[classUsed] = topRightOffsetSize[classUsed] + "px"; | ||
// Validating if root element is present in DOM | ||
if (!rootElement) { | ||
throw "Root element is not defined"; | ||
} | ||
// Adding the DOM element | ||
rootElement.insertBefore(toastElement, rootElement.firstChild); | ||
// Repositioning the toasts in case multiple toasts are present | ||
Toastify.reposition(); | ||
toastElement.timeOutValue = window.setTimeout(function () { | ||
// Remove the toast from DOM | ||
this.removeElement(toastElement); | ||
}.bind(this), this.options.duration); // Binding `this` for function invocation | ||
// Supporting function chaining | ||
return this; | ||
}, | ||
// Removing the element from the DOM | ||
removeElement: function (toastElement) { | ||
// Hiding the element | ||
// toastElement.classList.remove("on"); | ||
toastElement.className = toastElement.className.replace(" on",""); | ||
// Removing the element from DOM after transition end | ||
window.setTimeout(function () { | ||
// Remove the elemenf from the DOM | ||
toastElement.parentNode.removeChild(toastElement); | ||
// Calling the callback function | ||
this.options.callback.call(toastElement); | ||
// Repositioning the toasts again | ||
Toastify.reposition(); | ||
}.bind(this), 400); // Binding `this` for function invocation | ||
topRightOffsetSize[classUsed] += height + offset; | ||
} | ||
} | ||
} | ||
// Positioning the toasts on the DOM | ||
Toastify.reposition = function () { | ||
// Supporting function chaining | ||
return this; | ||
}; | ||
// Top margins with gravity | ||
var topLeftOffsetSize = { | ||
top: 15, | ||
bottom: 15 | ||
}; | ||
var topRightOffsetSize = { | ||
top: 15, | ||
bottom: 15 | ||
}; | ||
var offsetSize = { | ||
top: 15, | ||
bottom: 15 | ||
}; | ||
// Get all toast messages on the DOM | ||
var allToasts = document.getElementsByClassName('toastify'); | ||
var classUsed; | ||
// Modifying the position of each toast element | ||
for (var i = 0; i < allToasts.length; i++) { | ||
// Getting the applied gravity | ||
if (containsClass(allToasts[i], 'top') === true) { | ||
classUsed = "top"; | ||
} else { | ||
classUsed = "bottom"; | ||
} | ||
var height = allToasts[i].offsetHeight; | ||
// Spacing between toasts | ||
var offset = 15; | ||
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width; | ||
// Show toast in center if screen with less than or qual to 360px | ||
if (width <= 360) { | ||
// Setting the position | ||
allToasts[i].style[classUsed] = offsetSize[classUsed] + 'px'; | ||
offsetSize[classUsed] += height + offset; | ||
} else { | ||
if (containsClass(allToasts[i], 'left') === true) { | ||
// Setting the position | ||
allToasts[i].style[classUsed] = topLeftOffsetSize[classUsed] + 'px'; | ||
topLeftOffsetSize[classUsed] += height + offset; | ||
} else { | ||
// Setting the position | ||
allToasts[i].style[classUsed] = topRightOffsetSize[classUsed] + 'px'; | ||
topRightOffsetSize[classUsed] += height + offset; | ||
} | ||
} | ||
} | ||
// Supporting function chaining | ||
return this; | ||
function containsClass(elem, yourClass) { | ||
if (!elem || typeof yourClass !== "string") { | ||
return false; | ||
} else if ( | ||
elem.className && | ||
elem.className | ||
.trim() | ||
.split(/\s+/gi) | ||
.indexOf(yourClass) > -1 | ||
) { | ||
return true; | ||
} else { | ||
return false; | ||
} | ||
} | ||
function containsClass(elem, yourClass) { | ||
if(!elem || typeof yourClass !== 'string') { | ||
return false; | ||
} else if(elem.className && elem.className.trim().split(/\s+/gi).indexOf(yourClass) > -1) { | ||
return true; | ||
} else { | ||
return false; | ||
} | ||
} | ||
// Setting up the prototype for the init object | ||
Toastify.lib.init.prototype = Toastify.lib; | ||
// Setting up the prototype for the init object | ||
Toastify.lib.init.prototype = Toastify.lib; | ||
// Returning the Toastify function to be assigned to the window object/module | ||
return Toastify; | ||
})); | ||
// Returning the Toastify function to be assigned to the window object/module | ||
return Toastify; | ||
}); |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
13
442
125
45056