Socket
Socket
Sign inDemoInstall

toastify-js

Package Overview
Dependencies
Maintainers
1
Versions
25
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

toastify-js - npm Package Compare versions

Comparing version 1.2.1 to 1.2.2

.prettierrc

44

CHANGELOG.md
# 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 = "&#10006;";
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 = "&#10006;";
// 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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc