toastify-js - npm Package Compare versions

Comparing version 1.9.3 to 1.10.0

CHANGELOG.md

@@ -5,2 +5,13 @@ # Changelog
 
+## [1.10.0] - 2021-03-25
+
+* `selector` now supports a DOM Node, along with ID string ([#65](https://github.com/apvarun/toastify-js/pull/65))
+* New property - `escapeMarkup` - Toggle the default behavior of escaping HTML markup
+* New property - `style` - Use the HTML DOM Style properties to add any style directly to toast
+* Adds `toastify-es.js`, to be used from node_modules until there are no compatibility issues
+
+### Deprecations:
+
+* `backgroundColor` is deprecated. Use `style.background` instead
+
 ## [1.9.3] - 2020-10-10
@@ -7,0 +18,0 @@

package.json

 {
   "name": "toastify-js",
-  "version": "1.9.3",
+  "version": "1.10.0",
   "description": "Toastify is a lightweight, vanilla JS toast notification library.",
@@ -5,0 +5,0 @@ "main": "./src/toastify.js",

README.md

@@ -7,3 +7,3 @@
 
-[![toastify-js](https://img.shields.io/badge/toastify--js-1.9.3-brightgreen.svg)](https://www.npmjs.com/package/toastify-js)
+[![toastify-js](https://img.shields.io/badge/toastify--js-1.10.0-brightgreen.svg)](https://www.npmjs.com/package/toastify-js)
 
@@ -80,3 +80,3 @@ Toastify is a lightweight, vanilla JS toast notification library.
   text: "This is a toast",
-  duration: 3000, 
+  duration: 3000,
   destination: "https://github.com/apvarun/toastify-js",
@@ -86,3 +86,3 @@ newWindow: true,
   gravity: "top", // `top` or `bottom`
-  position: 'left', // `left`, `center` or `right`
+  position: "left", // `left`, `center` or `right`
   backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
@@ -140,3 +140,3 @@ stopOnFocus: true, // Prevents dismissing of toast on hover
 | duration | number | Duration for which the toast should be displayed.<br>-1 for permanent toast | 3000 |
-| selector | string | CSS Selector on which the toast should be added | body |
+| selector | string \| ELEMENT_NODE | ShadowRoot | CSS Selector or Element Node on which the toast should be added | body |
 | destination | URL string | URL to which the browser should be navigated on click of the toast |  |
@@ -147,3 +147,3 @@ | newWindow | boolean | Decides whether the `destination` should be opened in a new window or not | false |
 | position | "left" or "right" | To show the toast on left or right | "right" |
-| backgroundColor | CSS background value | Sets the background color of the toast |  |
+| backgroundColor | CSS background value | To be deprecated, use `style.background` option instead. Sets the background color of the toast |  |
 | avatar | URL string | Image/icon to be shown before text |  |
@@ -155,3 +155,7 @@ | className | string | Ability to provide custom class name for further customization |  |
 | offset | Object | Ability to add some offset to axis | |
+| escapeMarkup | boolean | Toggle the default behavior of escaping HTML markup | true |
+| style | object | Use the HTML DOM Style properties to add any style directly to toast | |
 
+> Deprecated properties: `backgroundColor` -  use `style.background` option instead
+
 ## Browsers support
@@ -158,0 +162,0 @@

src/toastify.js

 /*!
- * Toastify js 1.9.3
+ * Toastify js 1.10.0
  * https://github.com/apvarun/toastify-js
@@ -21,3 +21,3 @@ * @license MIT licensed
     // Library version
-    version = "1.9.3";
+    version = "1.10.0";
 
@@ -62,2 +62,7 @@ // Defining the prototype of the object
 
+      this.options.escapeMarkup = options.escapeMarkup !== undefined ? options.escapeMarkup : true;
+      this.options.style = options.style || {};
+
+      this.options.style.background = this.options.style.background || options.backgroundColor;
+
       // Returning the current object for chaining functions
@@ -96,5 +101,11 @@ return this;
       if (this.options.backgroundColor) {
-        divElement.style.background = this.options.backgroundColor;
+        // This is being deprecated in favor of using the style HTML DOM property
+        console.warn('DEPRECATION NOTICE: "backgroundColor" is being deprecated. Please use the "style.background" property.');
       }
 
+      // Loop through our style object and apply styles to divElement
+      for (const property in this.options.style) {
+        divElement.style[property] = this.options.style[property];
+      }
+
       // Adding the toast message/node
@@ -105,3 +116,7 @@ if (this.options.node && this.options.node.nodeType === Node.ELEMENT_NODE) {
       } else {
-        divElement.innerHTML = this.options.text;
+        if (this.options.escapeMarkup) {
+          divElement.innerText = this.options.text;
+        } else {
+          divElement.innerHTML = this.options.text;
+        }
 
@@ -230,6 +245,8 @@ if (this.options.avatar !== "") {
       var rootElement;
-      if (typeof this.options.selector === "undefined") {
+      if (typeof this.options.selector === "string") {
+        rootElement = document.getElementById(this.options.selector);
+      } else if (this.options.selector instanceof HTMLElement || this.options.selector instanceof ShadowRoot) {
+        rootElement = this.options.selector;
+      } else {
         rootElement = document.body;
-      } else {
-        rootElement = document.getElementById(this.options.selector);
       }
@@ -236,0 +253,0 @@

No alert changes

Improved metrics

Total package byte prevSize

74743

increased by30.62%

Number of package files

14

increased by7.69%

Lines of code

937

increased by74.16%

Number of lines in readme file

360

increased by1.12%

No dependency changes