Version 2.5.0 Released.

Added: "Notiflix.Confirm.*" module: The "options" parameter has been added to extend the initialize settings with new options for each Confirm Box. Added: "Notiflix.Confirm.*" module: The ".Ask()" function has been added. Changed: All the SVG icons have been compressed to reduce the file size as much as it can be.
notiflix · Oct 1, 2020 · a5ad44d · a5ad44d
1 parent df53186
commit a5ad44d
Show file tree

Hide file tree

Showing 12 changed files with 312 additions and 72 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,7 +1,19 @@
+@2.5.0
+* **Added:** `Notiflix.Confirm.*` module: The `options` parameter has been added to extend the initialize settings with new options for each Confirm Box.
+
+* **Added:** `Notiflix.Confirm.*` module: The `.Ask()` function has been added.
+
+  - `Notiflix.Confirm.Ask()` function can be used to prevent the accidental click to the Ok button by the user before answering a simple question that has been created by you. (Please click [here](https://github.com/notiflix/Notiflix#3--confirm-module) to see an example of usage.)
+
+* **Changed:** All the SVG icons have been compressed to reduce the file size as much as it can be.
+
+-----
+
 @2.4.0
 * **Added:** `Notiflix.Loading.*` module: The `message` parameter has been extended, and the `options` parameter has been added.
 
   - Custom options can be used for each Loading element to extend the initialize settings.
+
     ```js
     // Only indicator
     Notiflix.Loading.Standard();
@@ -52,6 +64,7 @@
 * **Changed:** `Notiflix.Notify.*` module, `callback` and `options` parameters have been changed.
 
   - Custom options can be used for each Notify element to extend the initialize settings.
+
     ```js
     // e.g. Message with a callback
     Notiflix.Notify.Success(
@@ -108,6 +121,7 @@
 
   - `Notiflix.Notify.*` module; `backOverlayColor` option has been added to each type of notification. Can be set different background overlay colors for each type of notification now.
   (Recommended by [Sebastian Stavar](https://github.com/SebastianStavar))
+
     ```js
     // e.g.
 
@@ -127,7 +141,9 @@
     ```
 
   - `Notiflix.Report.*` module; `backOverlayColor` option has been added to each type of dialog box. Can be set different background overlay colors for each type of notification now.
+
     e.g.
+
     ```js
     Notiflix.Report.Init({
       success: {

diff --git a/README.md b/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.4.0/dist/notiflix-aio-2.4.0.min.js?compression=gzip
-[size-url]: https://cdn.jsdelivr.net/npm/notiflix@2.4.0/dist/notiflix-aio-2.4.0.min.js
+[size-badge]: https://img.badgesize.io/https://cdn.jsdelivr.net/npm/notiflix@2.5.0/dist/notiflix-aio-2.5.0.min.js?compression=gzip
+[size-url]: https://cdn.jsdelivr.net/npm/notiflix@2.5.0/dist/notiflix-aio-2.5.0.min.js
 [lic-badge]: https://img.shields.io/github/license/notiflix/Notiflix.svg
 [lic-url]: https://github.com/notiflix/Notiflix/blob/master/LICENSE
 
@@ -34,7 +34,7 @@
 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.
 
 #### Current Version
-2.4.0 [*](https://github.com/notiflix/Notiflix/blob/master/CHANGELOG.md "CHANGELOG")
+2.5.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.4.0.min.css" />
+<link rel="stylesheet" href="dist/notiflix-2.5.0.min.css" />
 
-<script src="dist/notiflix-2.4.0.min.js"></script>
+<script src="dist/notiflix-2.5.0.min.js"></script>
 ```
 
 ##### or only JS (All in One - Internal CSS)
 ```html
-<script src="dist/notiflix-aio-2.4.0.min.js"></script>
+<script src="dist/notiflix-aio-2.5.0.min.js"></script>
 ```
 
 ---------
@@ -213,6 +213,8 @@ Notiflix.Report.Success(
 
 #### 3- Confirm Module
 
+Show:
+
 ```js
 /*
 * @param1 {string}: Required, title text in String format.
@@ -221,16 +223,17 @@ Notiflix.Report.Success(
 * @param4 {string}: Optional, cancel button text in String format.
 * @param5 {function}: Optional, callback function when the ok button element clicked.
 * @param6 {function}: Optional, callback function when the cancel button element clicked.
+* @param7 {Object}: Optional, extend the initialize options with new options for each confirm box.
 */
 
-Notiflix.Confirm.Show('Title', 'Message', 'Ok Button Text', 'Cancel Button Text');
+Notiflix.Confirm.Show('Title', 'Message', 'Ok Button Text');
 
 // e.g. with callback
 Notiflix.Confirm.Show(
   'Title',
   'Message',
-  'Ok Button Text',
-  'Cancel Button Text',
+  'Ok Button',
+  'Cancel Button',
 
   // ok button callback
   function(){
@@ -241,6 +244,47 @@ Notiflix.Confirm.Show(
   function(){
     // codes...
   },
+
+  // extend the init options for this confirm box (v2.5.0 and the next versions)
+  {
+    width: '320px',
+    borderRadius: '8px',
+    // etc...
+  },
+);
+```
+
+
+Ask: (v2.5.0 and the next versions)
+
+```js
+/*
+* @param1 {string}: Required, the title text in String format.
+* @param2 {string}: Required, the question text in String format.
+* @param3 {string}: Required, the answer text in String format.
+* @param4 {string}: Required, the ok button text in String format.
+* @param5 {string}: Optional, the cancel button text in String format.
+* @param6 {function}: Optional, a callback function when the ok button element clicked after the correct answer.
+* @param7 {function}: Optional, a callback function when the cancel button element clicked.
+* @param8 {Object}: Optional, extend the initialize options with new options for each confirm box.
+*/
+
+Notiflix.Confirm.Ask(
+  'Where is Padmé?',
+  'Is she safe? Is she all right?',
+  'It seems, in your anger, you killed her.',
+  'Answer',
+  'Cancel',
+  function(){
+    alert('NOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO!!!');
+    // codes...
+  },
+  function(){
+    // codes...
+  },
+  {
+    // extend the init options for this confirm box
+  },
 );
 ```
 

diff --git a/dist/notiflix-2.4.0.min.js b/dist/notiflix-2.4.0.min.js
diff --git a/dist/notiflix-2.4.0.min.css → dist/notiflix-2.5.0.min.css b/dist/notiflix-2.4.0.min.css → dist/notiflix-2.5.0.min.css
diff --git a/dist/notiflix-2.5.0.min.js b/dist/notiflix-2.5.0.min.js
diff --git a/dist/notiflix-aio-2.4.0.min.js b/dist/notiflix-aio-2.4.0.min.js
diff --git a/dist/notiflix-aio-2.5.0.min.js b/dist/notiflix-aio-2.5.0.min.js
diff --git a/docs/test.html b/docs/test.html
@@ -173,9 +173,9 @@
 
   </style>
 
-  <!-- <link href="../dist/notiflix-2.4.0.min.css" rel="stylesheet" />
-  <script src="../dist/notiflix-2.4.0.min.js"></script> -->
-  <script src="../dist/notiflix-aio-2.4.0.min.js"></script>
+  <!-- <link href="../dist/notiflix-2.5.0.min.css" rel="stylesheet" />
+  <script src="../dist/notiflix-2.5.0.min.js"></script> -->
+  <script src="../dist/notiflix-aio-2.5.0.min.js"></script>
 
   <!-- <link href="../src/notiflix.css" rel="stylesheet" />
   <script src="../src/notiflix.js"></script> -->
@@ -235,8 +235,15 @@ <h1 class="title"><span>//</span> Notiflix Report</h1>
   <div class="nx-box">
     <h1 class="title"><span>//</span> Notiflix Confirm</h1>
     <div class="buttons">
-      <button class="nx-confirm" onclick="Notiflix.Confirm.Show();">Notiflix Confirm</button>
-      <button class="nx-confirm" onclick="Notiflix.Confirm.Show(false, 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.', false, false, function(){alert('Thanks!')}, function(){alert('Uppsss...')});">Notiflix Confirm (With Callback)</button>
+      <button class="nx-confirm" onclick="Notiflix.Confirm.Show();">Notiflix Confirm Show</button>
+      <button class="nx-confirm" onclick="Notiflix.Confirm.Show(false, 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.', false, false, function(){alert('Thanks!')}, function(){alert('Uppsss...')});">Notiflix Confirm Show (With Callback)</button>
+      <button class="nx-confirm" onclick="Notiflix.Confirm.Show(false,false,false,false,false,false,{width:'320px',borderRadius:'8px'});">Notiflix Confirm Show (With Options)</button>
+
+      <div class="break"></div>
+
+      <button class="nx-confirm" onclick="Notiflix.Confirm.Ask('Where is Padmé?','Is she safe? Is she all right?','It seems, in your anger, you killed her.','Answer','Cancel',function(){for (var index = 0; index < 9; index++) {setTimeout(function () {Notiflix.Notify.Failure('NOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO!!!')}, index * 100)}});">Notiflix Confirm Ask</button>
+
+      <button class="nx-confirm" onclick="Notiflix.Confirm.Ask('Please Answer','1881 + 1923 = ?','3804','Answer','Cancel',function(){Notiflix.Notify.Success('That\'s correct, thanks.')},false,{width:'320px',borderRadius:'8px'});">Notiflix Confirm Ask (With Options)</button>
     </div>
   </div>
 

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "notiflix",
-  "main": "dist/notiflix-aio-2.4.0.min.js",
-  "version": "2.4.0",
+  "main": "dist/notiflix-aio-2.5.0.min.js",
+  "version": "2.5.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": [

diff --git a/src/all-in-one/notiflix-aio.js b/src/all-in-one/notiflix-aio.js
diff --git a/src/notiflix.css b/src/notiflix.css
@@ -1,6 +1,6 @@
 /*!
 * Notiflix ("https://www.notiflix.com")
-* Version: 2.4.0
+* Version: 2.5.0
 * Author: Furkan MT ("https://github.com/furcan")
 * Copyright 2020 Notiflix, MIT Licence ("https://opensource.org/licenses/MIT")
 */
@@ -1217,6 +1217,47 @@
   color: inherit;
 }
 
+[id^="NotiflixConfirmWrap"] > div[class*="-content"] > div[class*="-head"] > div > div {
+  font-family: inherit !important;
+  float: left;
+  width: 100%;
+  margin: 15px 0 0;
+  padding: 0;
+}
+
+[id^="NotiflixConfirmWrap"] > div[class*="-content"] > div[class*="-head"] > div > div > input {
+  font-family: inherit !important;
+  float: left;
+  width: 100%;
+  height: 40px;
+  margin: 0;
+  padding: 0 15px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 25px;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 1;
+  -webkit-transition: all 0.25s ease-in-out;
+  -o-transition: all 0.25s ease-in-out;
+  transition: all 0.25s ease-in-out;
+}
+
+[id^="NotiflixConfirmWrap"] > div[class*="-content"] > div[class*="-head"] > div > div > input:hover {
+  border-color: rgba(0, 0, 0, 0.1);
+}
+
+[id^="NotiflixConfirmWrap"] > div[class*="-content"] > div[class*="-head"] > div > div > input:focus {
+  border-color: rgba(0, 0, 0, 0.3);
+}
+
+[id^="NotiflixConfirmWrap"] > div[class*="-content"] > div[class*="-head"] > div > div > input.nx-validation-failure {
+  border-color: #ff5549;
+}
+
+[id^="NotiflixConfirmWrap"] > div[class*="-content"] > div[class*="-head"] > div > div > input.nx-validation-success {
+  border-color: #32c682;
+}
+
 [id^="NotiflixConfirmWrap"] > div[class*="-content"] > div[class*="-buttons"] {
   -webkit-user-select: none;
   -moz-user-select: none;