Version 2.7.0 Released.

Added: `Notiflix.Notify.*` module: The `pauseOnHover` option has been added.

Changed: `Notiflix.Notify.*` module: Display improvements.

Changed: `Notiflix.Block.*` module: Code Review.

CHANGELOG.md

@@ -1,3 +1,12 @@
+@2.7.0
+* **Added:** `Notiflix.Notify.*` module: The `pauseOnHover` option has been added. The default value is `true`. Auto-remove functionality will be paused for each notification element when the pointer(mouse) enters the notification if this option has been set as `true`.
+
+* **Changed:** `Notiflix.Notify.*` module: Display improvements.
+
+* **Changed:** `Notiflix.Block.*` module: Code Review.
+
+-----
+
 @2.6.0
 * **Fixed:** `Notiflix.Confirm.*` module: display and position issues have been fixed.
 

README.md

@@ -17,8 +17,8 @@
 [downloads-url]: https://npmjs.org/package/notiflix
 [jsdelivr-badge]: https://data.jsdelivr.com/v1/package/npm/notiflix/badge?style=rounded
 [jsdelivr-url]: https://www.jsdelivr.com/package/npm/notiflix
-[size-badge]: https://img.badgesize.io/https://cdn.jsdelivr.net/npm/notiflix@2.6.0/dist/notiflix-aio-2.6.0.min.js?compression=gzip
-[size-url]: https://cdn.jsdelivr.net/npm/notiflix@2.6.0/dist/notiflix-aio-2.6.0.min.js
+[size-badge]: https://img.badgesize.io/https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.js?compression=gzip
+[size-url]: https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.js
 [lic-badge]: https://img.shields.io/github/license/notiflix/Notiflix.svg
 [lic-url]: https://github.com/notiflix/Notiflix/blob/master/LICENSE
 
@@ -31,10 +31,10 @@
 [![License][lic-badge]][lic-url]
 
 ## Notiflix | a JavaScript library for client-side non-blocking notifications.
-Notiflix is a JavaScript library for client-side non-blocking notifications, popup boxes, loading indicators, and more to that makes your web projects much better.
+Notiflix is a JavaScript library for client-side non-blocking notifications, popup boxes, loading indicators, and more that makes your web projects much better.
 
 #### Current Version
-2.6.0 [*](https://github.com/notiflix/Notiflix/blob/master/CHANGELOG.md "CHANGELOG")
+2.7.0 [*](https://github.com/notiflix/Notiflix/blob/master/CHANGELOG.md "CHANGELOG")
 
 #### Website
 https://www.notiflix.com
@@ -83,14 +83,14 @@ import { Notify, Report, Confirm, Loading, Block } from "notiflix";
 
 ##### CSS and JS
 ```html
-<link rel="stylesheet" href="dist/notiflix-2.6.0.min.css" />
+<link rel="stylesheet" href="dist/notiflix-2.7.0.min.css" />
 
-<script src="dist/notiflix-2.6.0.min.js"></script>
+<script src="dist/notiflix-2.7.0.min.js"></script>
 ```
 
 ##### or only JS (All in One - Internal CSS)
 ```html
-<script src="dist/notiflix-aio-2.6.0.min.js"></script>
+<script src="dist/notiflix-aio-2.7.0.min.js"></script>
 ```
 
 ---------
@@ -505,6 +505,7 @@ Notiflix.Notify.Init({
   plainText: true,
   showOnlyTheLastOne: false,
   clickToClose: false,
+  pauseOnHover: true, // v2.7.0 and the next versions
 
   ID: 'NotiflixNotify',
   className: 'notiflix-notify',

docs/test.html

@@ -173,21 +173,27 @@
 
   </style>
 
-  <!-- <link href="../dist/notiflix-2.6.0.min.css" rel="stylesheet" />
-  <script src="../dist/notiflix-2.6.0.min.js"></script> -->
-  <script src="../dist/notiflix-aio-2.6.0.min.js"></script>
+  <!-- <link href="../dist/notiflix-2.7.0.min.css" rel="stylesheet" />
+  <script src="../dist/notiflix-2.7.0.min.js"></script> -->
+  <script src="../dist/notiflix-aio-2.7.0.min.js"></script>
 
   <!-- <link href="../src/notiflix.css" rel="stylesheet" />
   <script src="../src/notiflix.js"></script> -->
   <!-- <script src="../src/all-in-one/notiflix-aio.js"></script> -->
 
   <script>
     // Notiflix.Notify.Init({
-    //   closeButton: true,
-    //   cssAnimationStyle: 'zoom',
-    //   cssAnimationDuration: 500,
-    //   messageMaxLength: 20,
-    //   plainText: false,
+    //   // closeButton: true,
+    //   // cssAnimationStyle: 'zoom',
+    //   // cssAnimationDuration: 500,
+    //   // messageMaxLength: 20,
+    //   // plainText: false,
+    //   pauseOnHover: true,
+    //   clickToClose: true,
+    // });
+
+    // Notiflix.Notify.Init({
+    //   useFontAwesome: true,
     // });
 
     // Notiflix.Report.Init({

package.json

@@ -1,7 +1,7 @@
 {
   "name": "notiflix",
-  "main": "dist/notiflix-aio-2.6.0.min.js",
-  "version": "2.6.0",
+  "main": "dist/notiflix-aio-2.7.0.min.js",
+  "version": "2.7.0",
   "description": "Notiflix is a JavaScript library for client-side non-blocking notifications, popup boxes, loading indicators, and more...",
   "homepage": "https://github.com/notiflix/Notiflix",
   "files": [

src/notiflix.css

@@ -1,6 +1,6 @@
 /*!
 * Notiflix ("https://www.notiflix.com")
-* Version: 2.6.0
+* Version: 2.7.0
 * Author: Furkan MT ("https://github.com/furcan")
 * Copyright 2020 Notiflix, MIT Licence ("https://opensource.org/licenses/MIT")
 */
@@ -85,7 +85,17 @@
   user-select: none;
   font-family: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   width: 100%;
-  display: inline-block;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
   position: relative;
   margin: 0 0 10px;
   border-radius: 5px;
@@ -106,6 +116,11 @@
 
 [id^="NotiflixNotifyWrap"] > div.with-icon {
   padding: 8px;
+  min-height: 56px;
+}
+
+[id^="NotiflixNotifyWrap"] > div.nx-paused {
+  cursor: auto;
 }
 
 [id^="NotiflixNotifyWrap"] > div.click-to-close {
@@ -121,6 +136,7 @@
 }
 
 [id^="NotiflixNotifyWrap"] > div > span.the-message {
+  cursor: inherit;
   font-weight: normal;
   font-family: inherit !important;
   word-break: break-all;

src/notiflix.js

@@ -1,6 +1,6 @@
 /*!
 * Notiflix ("https://www.notiflix.com")
-* Version: 2.6.0
+* Version: 2.7.0
 * Author: Furkan MT ("https://github.com/furcan")
 * Copyright 2020 Notiflix, MIT Licence ("https://opensource.org/licenses/MIT")
 */
@@ -52,6 +52,7 @@
     plainText: true,
     showOnlyTheLastOne: false,
     clickToClose: false,
+    pauseOnHover: true, // v2.7.0 and the next versions
 
     ID: 'NotiflixNotify',
     className: 'notiflix-notify',
@@ -701,32 +702,12 @@
     } else {
       window.document.getElementById(ntflxNotifyWrap.id).appendChild(ntflxNotify);
     }
-
-    if (newNotifySettings.useIcon) { // if useIcon, dynamically vertical align the contents
-      var messageIcon = window.document.getElementById(ntflxNotify.id).querySelectorAll('.nmi')[0];
-      var messageIconH = 40;
-      // if font awesome
-      if (newNotifySettings.useFontAwesome) {
-        messageIconH = Math.round(parseInt(messageIcon.offsetHeight));
-      }
-      // if notiflix SVG
-      else {
-        var SvgBBox = messageIcon.getBBox();
-        messageIconH = Math.round(parseInt(SvgBBox.width));
-      }
-      var messageText = window.document.getElementById(ntflxNotify.id).querySelectorAll('span')[0];
-      var messageTextH = Math.round(messageText.offsetHeight);
-      if (messageTextH <= messageIconH) {
-        messageText.style.paddingTop = (messageIconH - messageTextH) / 2 + 'px';
-        messageText.style.paddingBottom = (messageIconH - messageTextH) / 2 + 'px';
-      }
-    }
     // notify append or prepend: end
 
     // remove by timeout or click: begin
-    if (window.document.getElementById(ntflxNotify.id)) {
+    var eachNotifyElement = window.document.getElementById(ntflxNotify.id);
+    if (eachNotifyElement) {
       // set elements: begin
-      var removeDiv = window.document.getElementById(ntflxNotify.id);
       var removeWrap = window.document.getElementById(ntflxNotifyWrap.id);
       var removeOverlay;
       if (newNotifySettings.backOverlay) {
@@ -741,7 +722,7 @@
 
       // hide notify elm and hide overlay: begin
       var hideNotifyElementsAndOverlay = function () {
-        removeDiv.classList.add('remove');
+        eachNotifyElement.classList.add('remove');
         if (newNotifySettings.backOverlay && removeWrap.childElementCount <= 0) {
           removeOverlay.classList.add('remove');
         }
@@ -751,9 +732,8 @@
 
       // remove notify elm and wrapper: begin
       var removeNotifyElmentsAndWrapper = function () {
-        var notifyExist = window.document.getElementById(ntflxNotify.id);
-        if (notifyExist && removeDiv.parentNode !== null) {
-          removeDiv.parentNode.removeChild(removeDiv);
+        if (eachNotifyElement && eachNotifyElement.parentNode !== null) {
+          eachNotifyElement.parentNode.removeChild(eachNotifyElement);
         }
         if (removeWrap.childElementCount <= 0 && removeWrap.parentNode !== null) { // if childs count === 0 remove wrap
           removeWrap.parentNode.removeChild(removeWrap);
@@ -780,7 +760,7 @@
 
       // if callbackOrOptions or click to close: begin
       if (typeof callbackOrOptions === 'function' || newNotifySettings.clickToClose) {
-        removeDiv.addEventListener('click', function () {
+        eachNotifyElement.addEventListener('click', function () {
           if (typeof callbackOrOptions === 'function') {
             notifyElmCountOnlyCallback--;
             callbackOrOptions();
@@ -796,12 +776,31 @@
 
       // else auto remove: begin
       if (!newNotifySettings.closeButton && typeof callbackOrOptions !== 'function') {
-        timeoutHide = setTimeout(function () {
-          hideNotifyElementsAndOverlay();
-        }, newNotifySettings.timeout);
-        timeoutRemove = setTimeout(function () {
-          removeNotifyElmentsAndWrapper();
-        }, newNotifySettings.timeout + newNotifySettings.cssAnimationDuration);
+        // auto remove: begin
+        var autoRemove = function () {
+          timeoutHide = setTimeout(function () {
+            hideNotifyElementsAndOverlay();
+          }, newNotifySettings.timeout);
+          timeoutRemove = setTimeout(function () {
+            removeNotifyElmentsAndWrapper();
+          }, newNotifySettings.timeout + newNotifySettings.cssAnimationDuration);
+        };
+        autoRemove();
+        // auto remove: end
+
+        // pause auto remove: begin
+        if (newNotifySettings.pauseOnHover) {
+          eachNotifyElement.addEventListener('mouseenter', function () {
+            eachNotifyElement.classList.add('nx-paused');
+            clearTimeout(timeoutHide);
+            clearTimeout(timeoutRemove);
+          });
+          eachNotifyElement.addEventListener('mouseleave', function () {
+            eachNotifyElement.classList.remove('nx-paused');
+            autoRemove();
+          });
+        }
+        // pause auto remove: end
       }
       // else auto remove: end
     }
@@ -1446,7 +1445,8 @@
   var blockElmCount = 0;
   var NotiflixBlockUnblock = function (block, selector, iconType, messageOrOptions, options, delay) {
     // check typeof selector: begin
-    if (typeof selector !== 'string' || (selector || '').length < 1 || (selector || '').length === 1 && ((selector || '')[0] === '#' || (selector || '')[0] === '.')) {
+    var selectorIsNotValid = (typeof selector !== 'string') || ((selector || '').length < 1) || ((selector || '').length === 1 && ((selector || '')[0] === '#' || (selector || '')[0] === '.'));
+    if (selectorIsNotValid) {
       notiflixConsoleError('Notiflix Error', 'The selector parameter must be a String and matches a specified CSS selector(s).');
       return false;
     }