save commit

Author: talyguryn

.postcssrc

@@ -3,4 +3,5 @@ plugins:
     postcss-cssnext: {}
     postcss-nesting: {}
     postcss-nested: {}
-    postcss-nested-ancestors: {}
+    postcss-nested-ancestors: {}
+    postcss-clean: {}

README.md

@@ -1,56 +1,68 @@
 # JavaScript Notifier
+
 Lightweight notification module for websites
 
 ## Instalation
 
 ### Install via npm
+
 Install package
+
 ```
 npm install codex-notifier --save
 ```
 
 #### Connect with Webpack
+
 Require module in your application
+
 ```javascript
 var notifier = require('exports-loader?notifier!codex-notifier');
 ```
 
 Import styles
+
 ```css
 @import url('~codex-notifier/notifier.css');
 ```
 
 You will need [exports-loader](https://www.npmjs.com/package/exports-loader) and [css-loader]('https://www.npmjs.com/package/css-loader').
 
-
 ### Install directly
+
 1. Download `notifier.js` and `notifier.css` files
 2. Add them to your page
 
 ### Add from CDN
+
 Add script and stylesheets files from GitHub
+
 ```html
 <script src="https://cdn.rawgit.com/codex-team/js-notifier/master/notifier.js"></script>
 <link rel="stylesheet" href="https://cdn.rawgit.com/codex-team/js-notifier/master/notifier.css">
 ```
 
 ## Usage
+
 Module has only one public method — `show`.
 You should pass there object with notification properties
 
 #### General properties
+
 - `message` — notification message (can contains HTML)
 - `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)
 
 #### Confirm notifications properties
+
 - `okText` — text for confirmation button (*Confirm* by default)
 - `cancelText` — text for cancel button (*Cancel* by default)
 - `okHandler` — fires when *Confirm* button was pressed
 - `cancelHandler` — fires when *Cancel* button was pressed or notification was closed
 
 #### Prompt notifications properties
+
 - `okText` — text for submit button (*Ok* by default)
 - `okHandler` — fires when submit button was pressed. Gets input's value as a parameter
 - `cancelHandler` — fires when notification was closed
@@ -59,27 +71,34 @@ You should pass there object with notification properties
 - `inputType` — type of input  (text by default)
 
 ## Examples
+
 ```javascript
 notifier.show({
   message: 'Refresh the page'
 })
 ```
+
 ![Notify](https://github.com/codex-team/js-notifier/raw/master/docs/examples/notify.png)
+
 ```javascript
 notifier.show({
   message: 'Message was sent',
   style: 'success',
   time: 5000
 })
 ```
+
 ![Success](https://github.com/codex-team/js-notifier/raw/master/docs/examples/success.png)
+
 ```javascript
 notifier.show({
   message: 'Sorry, server is busy now',
   style: 'error'
 })
 ```
+
 ![Error](https://github.com/codex-team/js-notifier/raw/master/docs/examples/error.png)
+
 ```javascript
 notifier.show({
   message: 'Delete account?',
@@ -89,7 +108,9 @@ notifier.show({
   okHandler: account.delete
 })
 ```
+
 ![Confirm](https://github.com/codex-team/js-notifier/raw/master/docs/examples/confirm.png)
+
 ```javascript
 notifier.show({
   message: 'Enter your email',
@@ -100,7 +121,9 @@ notifier.show({
   placeholder: '[email protected]'
 })
 ```
+
 ![Prompt](https://github.com/codex-team/js-notifier/raw/master/docs/examples/prompt.png)
 
 ## Custom styles
+
 You can easily customize notifications appearance. Read more about it [here](https://github.com/codex-team/js-notifier/blob/master/docs/styles.md)

dist/bundle.js

@@ -1,33 +1,43 @@
 {
   "name": "codex-notifier",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Simple notifications for your website",
-  "main": "./notifier.js",
+  "main": "./dist/bundle.js",
   "scripts": {
-    "build": "webpack"
+    "build": "webpack --config ./webpack.config.js --mode production --watch"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "CodeX Team",
+    "email": "[email protected]"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/codex-team/js-notifier.git"
   },
-  "author": "Codex-Team",
-  "license": "MIT",
   "bugs": {
     "url": "https://github.com/codex-team/js-notifier/issues"
   },
   "homepage": "https://github.com/codex-team/js-notifier#readme",
   "devDependencies": {
-    "babel-core": "^6.25.0",
-    "babel-loader": "^7.0.0",
-    "babel-preset-es2015": "^6.24.1",
-    "webpack": "^2.6.1",
-    "css-loader": "^0.28.4",
-    "extract-text-webpack-plugin": "^2.1.2",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^7.1.5",
+    "babel-preset-env": "^1.7.0",
+    "css-loader": "^1.0.0",
+    "postcss-clean": "^1.1.0",
     "postcss-cssnext": "^2.11.0",
     "postcss-loader": "^2.0.6",
-    "postcss-smart-import": "^0.7.4",
     "postcss-nested": "^2.0.2",
     "postcss-nested-ancestors": "^1.0.0",
-    "postcss-nesting": "^4.0.1"
+    "postcss-nesting": "^4.0.1",
+    "postcss-smart-import": "^0.7.4",
+    "style-loader": "^0.21.0",
+    "webpack": "^4.16.3",
+    "webpack-cli": "^3.1.0"
+  },
+  "babel": {
+    "presets": [
+      "env"
+    ]
   }
 }

package.json

@@ -137,4 +137,4 @@
 
     }
 
-}
+}

src/css/base.css

@@ -11,19 +11,18 @@ module.exports = function () {
     btnsWrapper: 'cdx-notify__btns-wrapper'
   };
 
-  let alert = function (options) {
-
-    let notify  = document.createElement('DIV'),
-        cross   = document.createElement('DIV'),
+  const alert = function alert(options) {
+    let notify = document.createElement('DIV'),
+        cross = document.createElement('DIV'),
         message = options.message,
-        style   = options.style;
+        style = options.style;
 
     notify.classList.add(CSS_.notification);
-    if (style) {
 
+    if (style) {
       notify.classList.add(CSS_.notification + '--' + style);
-
     }
+
     notify.innerHTML = message;
 
     cross.classList.add(CSS_.crossBtn);
@@ -32,10 +31,9 @@ module.exports = function () {
     notify.appendChild(cross);
 
     return notify;
+  };
 
-  }
-
-  let confirm = function (options) {
+  const confirm = function confirm(options) {
 
     let notify = alert(options);
 
@@ -57,16 +55,12 @@ module.exports = function () {
     cancelBtn.classList.add(CSS_.cancelBtn);
 
     if (cancelHandler && typeof cancelHandler === 'function') {
-
-      cancelBtn.addEventListener('click', cancelHandler)
-      crossBtn.addEventListener('click', cancelHandler)
-
+      cancelBtn.addEventListener('click', cancelHandler);
+      crossBtn.addEventListener('click', cancelHandler);
     }
 
     if (okHandler && typeof okHandler === 'function') {
-
       okBtn.addEventListener('click', okHandler);
-
     }
 
     okBtn.addEventListener('click', notify.remove.bind(notify));
@@ -78,10 +72,9 @@ module.exports = function () {
     notify.appendChild(btnsWrapper);
 
     return notify;
+  };
 
-  }
-
-  let prompt = function (options) {
+  const prompt = function prompt(options) {
 
     let notify = alert(options);
 
@@ -101,25 +94,19 @@ module.exports = function () {
     input.classList.add(CSS_.input);
 
     if (options.placeholder) {
-
       input.setAttribute('placeholder', options.placeholder);
-
     }
-    if (options.default) {
 
+    if (options.default) {
       input.value = options.default;
-
     }
-    if (options.inputType) {
 
+    if (options.inputType) {
       input.type = options.inputType;
-
     }
 
     if (cancelHandler && typeof cancelHandler === 'function') {
-
       crossBtn.addEventListener('click', cancelHandler)
-
     }
 
     if (okHandler && typeof okHandler === 'function') {
@@ -140,25 +127,23 @@ module.exports = function () {
     notify.appendChild(btnsWrapper);
 
     return notify;
+  };
 
-
-  }
-
-  let wrapper = function () {
+  const getWrapper = function getWrapper() {
 
     let wrapper = document.createElement('DIV');
 
     wrapper.classList.add(CSS_.wrapper);
 
     return wrapper;
 
-  }
+  };
 
   return {
-    alert: alert,
-    confirm: confirm,
-    prompt: prompt,
-    wrapper: wrapper
+    alert,
+    confirm,
+    prompt,
+    getWrapper
   }
 
-}()
+}();