codex-team · sosie-js · Sep 27, 2020 · Sep 27, 2020 · Sep 27, 2020 · Sep 27, 2020
diff --git a/README.md b/README.md
@@ -2,6 +2,11 @@
 
 Lightweight notification module for websites
 
+# What's news doc?
+
+- 1.1.3  Fixed incompatibility with eslint 6-7x in formatters/stylish, and provide the example
+- 1.2.0  Layout support has been added:  (Live demo)[http://sosie.sos-productions.com/js-notifier/example/index.html]
+
 ## Instalation
 
 ### Install via NPM/Yarn
@@ -38,6 +43,7 @@ You should pass there object with notification properties
 - `type` — type of notification: `alert`, `confirm` or `prompt`. `Alert` by default
 - `style` — just add `'cdx-notify--' + style` class. We have some default styles: `success` and `error`
 - `time` — notification expire time in ms. Only for `alert` notifies expires (8s by default)
+- `layout` — either 'middle' or string with comma holding a combinaison of 'top' or 'bottom' with 'left' or 'right'
 
 #### Confirm notifications properties
 

diff --git a/dist/bundle.js b/dist/bundle.js
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,142 @@
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>
+      Example for codex.js-notifier
+    </title>
+    <style>
+      body {
+        font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif
+      }
+
+      .table {
+        display: flex;
+        flex-direction: row;
+      }
+
+      .table__row {
+        height: 50vh;
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+      }
+
+      .button {
+        display: inline-block;
+        background: #2da0e9;
+        color: #fff;
+        border-radius: 5px;
+        padding: 13px 18px;
+        cursor: pointer;
+      }
+
+      .button:hover {
+        background: #1689d2;
+      }
+    </style>
+  </head>
+  <body>
+   <h2>Notification playground</h2>
+    <div class="table">
+        <span class="button" data-type="show">info</span>
+        <span class="button" data-type="showOK">Ok</span>
+        <span class="button" data-type="showERROR">Error</span>
+        <span class="button" data-type="confirm">Confirm</span>
+        <span class="button" data-type="prompt">Prompt</span>
+    </div>
+    <script src="../dist/bundle.js"></script>
+    <script>
+
+      const buttons = document.querySelectorAll('.button');
+
+      Array.from(buttons).forEach(button => {
+          if(button.dataset.type == 'show') {
+	    button.addEventListener("click", function() {
+                notifier.show({
+		  message: 'Refresh the page',
+		  layout: 'middle'
+		})
+                return false;
+            }, false);	
+          }
+          if(button.dataset.type == 'showOK') {
+            button.addEventListener("click", function() {
+                notifier.show({
+                message: 'Message was sent',
+                style: 'success',
+                time: 5000,
+            })
+              return false;
+            }, false);
+         }
+         if(button.dataset.type == 'showERROR') {
+            button.addEventListener("click", function() {
+               notifier.show({
+                message: 'Sorry, server is busy now',
+                style: 'error'
+                })
+              return false;
+            }, false);
+         }
+
+        if(button.dataset.type == 'confirm') {
+            const account={
+                delete: function() {
+                     notifier.show({
+                        message: 'Account deleted',
+                        style: 'success',
+                        time: 5000
+                    })
+                }
+            }
+            button.addEventListener("click", function() {
+               notifier.show({
+                message: 'Delete account?',
+                type: 'confirm',
+                okText: 'Yes',
+                cancelText: 'Oh, wait',
+                okHandler: account.delete
+                })
+              return false;
+            }, false);
+         }
+
+         if(button.dataset.type == 'prompt') {
+
+            function validateEmail(email) {
+                const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+                return re.test(String(email).toLowerCase());
+            }
+
+
+            const checkEmail= function(email) {
+                if(validateEmail(email)) {
+                     notifier.show({
+                        message: 'Mail sent to'+email,
+                        style: 'success',
+                        time: 5000
+                    })
+                } else {
+                    notifier.show({
+                        message: 'This email is invalid sorry',
+                        style: 'error'
+                    })
+                }
+            }
+            button.addEventListener("click", function() {    
+            notifier.show({
+                message: 'Enter your email',
+                type: 'prompt',
+                okText: 'Enter',
+                okHandler: checkEmail,
+                inputType: 'email',
+                placeholder: 'team@ifmo.su'
+            })
+              return false;
+            }, false);
+         }
+      })
+    </script>
+  </body>
+</html>
+
diff --git a/package.json b/package.json
@@ -1,10 +1,11 @@
 {
   "name": "codex-notifier",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "Simple notifications for your website",
   "main": "./dist/bundle.js",
   "types": "./index.d.ts",
   "scripts": {
+    "eslint": "eslint --debug src/notifier.js",
     "build": "webpack --config ./webpack.config.js --mode production",
     "build:dev": "webpack --config ./webpack.config.js --mode development --watch"
   },
@@ -15,20 +16,22 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/codex-team/js-notifier.git"
+    "url": "git+https://github.com/sosie-js/js-notifier.git"
   },
   "bugs": {
-    "url": "https://github.com/codex-team/js-notifier/issues"
+    "url": "https://github.com/sosie-js/js-notifier/issues"
   },
-  "homepage": "https://github.com/codex-team/js-notifier#readme",
+  "homepage": "http://sosie.sos-productions.com/js-notifier/example/index.html",
   "devDependencies": {
     "babel-core": "^6.26.3",
     "babel-loader": "^7.1.5",
     "babel-preset-env": "^1.7.0",
+    "caniuse-db": "^1.0.30000652",
+    "core-js": "^3.6.5",
     "css-loader": "^1.0.0",
-    "eslint": "^5.8.0",
-    "eslint-config-codex": "github:codex-team/eslint-config",
-    "eslint-loader": "^2.1.1",
+    "eslint": "^7.10.0",
+    "eslint-config-codex": "^1.3.6",
+    "eslint-loader": "^4.0.2",
     "postcss-clean": "^1.1.0",
     "postcss-cssnext": "^2.11.0",
     "postcss-loader": "^2.0.6",
@@ -44,5 +47,6 @@
     "presets": [
       "env"
     ]
-  }
+  },
+  "dependencies": {}
 }
diff --git a/src/css/base.css b/src/css/base.css
@@ -1,10 +1,35 @@
 .cdx-notifies {
-    position: fixed;
     z-index: 2;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+}
+
+.cdx-notifies-middle {
+   position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.cdx-notifies-bottom {
+    position: fixed;
     bottom: 20px;
+}
+
+.cdx-notifies-left {
+    position: fixed;
     left: 20px;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 }
+
+.cdx-notifies-top {
+    position: fixed;
+    top: 20px;
+}
+
+.cdx-notifies-right {
+    position: fixed;
+    right: 20px;
+}
+
 /* Default notification styles */
 .cdx-notify {
      position: relative;

diff --git a/src/draw.js b/src/draw.js
@@ -132,11 +132,17 @@ module.exports = (function () {
     return notify;
   };
 
-  const getWrapper = function getWrapper() {
+  const getWrapper = function getWrapper(layout) {
     let wrapper = document.createElement('DIV');
 
+
     wrapper.classList.add(CSS_.wrapper);
 
+    for (const l in layout) {
+      wrapper.classList.add('cdx-notifies-' + layout[l]);
+    }
+
+
     return wrapper;
   };
 

diff --git a/src/notifier.js b/src/notifier.js
@@ -3,28 +3,35 @@
  */
 require('./css/main.css');
 
-/*!
+/**
  * Codex JavaScript Notification module
- * https://github.com/codex-team/js-notifier
+ *
+ * @see https://github.com/sosie-js/js-notifier
  */
 module.exports = (function () {
   const draw = require('./draw.js');
   const bounceInClass = 'cdx-notify--bounce-in';
 
-  let wrapper_ = null;
-
+
+  const wrappers_ = {};
+
   /**
    * @private
-   * @return {boolean}
+   * @param {String} layout - either 'middle' or string with comma holding a combinaison of 'top' or 'bottom' with 'left' or 'right'
+   * @returns {boolean}
    */
-  function prepare_() {
-    if (wrapper_) {
-      return true;
+  function prepare_(layout) {
+
+    let wrapper_;
+
+    if (Object.prototype.hasOwnProperty.call(wrappers_,layout)) {
+      wrapper_ = wrappers_[layout]; 
+    } else {
+      wrapper_ = draw.getWrapper(layout.split(','));
+      wrappers_[layout] = wrapper_;
     }
-
-    wrapper_ = draw.getWrapper();
-
     document.body.appendChild(wrapper_);
+    return wrapper_;
   }
 
   /**
@@ -37,7 +44,7 @@ module.exports = (function () {
       return;
     }
 
-    prepare_();
+    const wrapper_ = prepare_(options.layout || 'bottom,left');
 
     let notify = null;
 
@@ -65,6 +72,6 @@ module.exports = (function () {
   }
 
   return {
-    show
+    show,
   };
 })({});
diff --git a/webpack.config.js b/webpack.config.js
@@ -7,7 +7,13 @@ module.exports = {
         exclude: /node_modules/,
         use: [
           'babel-loader',
-          'eslint-loader'
+           {
+              loader: 'eslint-loader',
+              options: {
+                 formatter: require('eslint/lib/cli-engine/formatters/stylish') /*eslint 6.x+:*/
+               /* formatter: require('eslint/lib/formatters/stylish') /*eslint 5.x*/
+              },
+           }
         ]
       },
       {