From e846efa7c709a3531ca0916a87bdc86c4d546820 Mon Sep 17 00:00:00 2001
From: Ade Attwood <attwood16@googlemail.com>
Date: Thu, 23 Nov 2017 20:31:44 +0000
Subject: [PATCH] Add read me and update package.json

---
 Gruntfile.js |   2 +-
 package.json |  63 +++++++++++++++++--------------
 readme.md    | 102 +++++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 139 insertions(+), 28 deletions(-)
 create mode 100644 readme.md

diff --git a/Gruntfile.js b/Gruntfile.js
index d5a6adc..b09a012 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -1,4 +1,4 @@
-module.exports = function (grunt) {
+module.exports = grunt => {
     require('load-grunt-tasks')(grunt);
 
     grunt.initConfig({
diff --git a/package.json b/package.json
index e54876b..03e446b 100644
--- a/package.json
+++ b/package.json
@@ -1,28 +1,37 @@
-{
-  "name": "bs-advanced-alert",
-  "version": "1.0.0",
-  "description": "Extra functionality for the bootstrap alert component",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "bootstrap": "^3.3.7",
-    "jquery": "^3.2.1"
-  },
-  "devDependencies": {
-    "babel-core": "^6.26.0",
-    "babel-preset-env": "^1.6.0",
-    "eslint": "^4.8.0",
-    "eslint-plugin-prettier": "^2.3.1",
-    "eslint-plugin-prettify": "^2.0.2",
-    "grunt": "^1.0.1",
-    "grunt-babel": "^7.0.0",
-    "grunt-contrib-uglify": "^3.1.0",
-    "grunt-eslint": "^20.1.0",
-    "load-grunt-tasks": "^3.5.2",
-    "prettier": "^1.7.3"
-  }
+    {
+    "name": "bs-advanced-alert",
+    "version": "1.0.0",
+    "description": "Extra functionality for the bootstrap alert component",
+    "homepage": "https://gitlab.com/AdeAttwood/bs-advanced-alert",
+    "main": "index.js",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "keywords": [
+        "bootstrap",
+        "jquery",
+        "alert",
+        "advanced"
+    ],
+    "author": {
+        "name": "Ade Attwood"
+    },
+    "license": "BSD-2-Clause",
+    "dependencies": {
+        "bootstrap": "^3.3.7",
+        "jquery": "^3.2.1"
+    },
+    "devDependencies": {
+        "babel-core": "^6.26.0",
+        "babel-preset-env": "^1.6.0",
+        "eslint": "^4.8.0",
+        "eslint-plugin-prettier": "^2.3.1",
+        "eslint-plugin-prettify": "^2.0.2",
+        "grunt": "^1.0.1",
+        "grunt-babel": "^7.0.0",
+        "grunt-contrib-uglify": "^3.1.0",
+        "grunt-eslint": "^20.1.0",
+        "load-grunt-tasks": "^3.5.2",
+        "prettier": "^1.7.3"
+    }
 }
diff --git a/readme.md b/readme.md
new file mode 100644
index 0000000..103e283
--- /dev/null
+++ b/readme.md
@@ -0,0 +1,102 @@
+# Bootstrap Advanced Alert
+
+## Basic usage
+
+Working in the same way as the standard alert component.
+
+~~~html
+<div class="alert alert-warning in">
+    <a href="#" class="close" data-dismiss="aalert">&times;</a>
+    <div class="alert-content">
+        <strong>Warning!</strong> There was a problem.
+    </div>
+</div>
+~~~
+
+## Adding open and close effects.
+
+You can add open and close effects the same as the standard component. The available effects are `slide` and `fade`, classes can be added to the alert component to apply the effects. If no class is added the alert will just hide.
+
+~~~html
+<div class="alert alert-success slide in">
+    <a href="#" class="close" data-dismiss="aalert">&times;</a>
+    <div class="alert-content">
+        <strong>Success!</strong> Well done.
+    </div>
+</div>
+
+<div class="alert alert-info fade in">
+    <a href="#" class="close" data-dismiss="aalert">&times;</a>
+    <div class="alert-content">
+        <strong>Info!</strong> This is some info.
+    </div>
+</div>
+~~~
+
+## Timeout
+
+You can add a `data-timeout` attribute to close the alert after a set amount of time set in milliseconds.
+
+~~~html
+<div class="alert alert-info fade in" data-timeout="1000">
+    <a href="#" class="close" data-dismiss="aalert">&times;</a>
+    <div class="alert-content">
+        <strong>Info!</strong> This is some info.
+    </div>
+</div>
+~~~
+
+The above sample will close after 1 second
+
+## jQuery extension api
+
+### `changeTo`
+
+This will change the alert style. The below snippet with change the `alert-` class to `alert-error`.
+
+~~~js
+$('my-alert').aalert('changeTo', 'error');
+~~~
+
+### `changeContentTo`
+
+The will change the content of the alert. The function takes a optional second parameter `open`. This will open the alert after the content has been changed and is `true` by default.
+
+~~~js
+$('.my-alert').aalert('changeContentTo', 'Some new content', false);
+~~~
+
+### `closeAfter`
+
+This will close the alert after the specified time
+
+~~~js
+$('my-alert').aalert('closeAfter', 2000);
+~~~
+
+### `toggle`
+
+~~~js
+$('my-alert').aalert('toggle');
+~~~
+
+### `close`
+
+~~~js
+$('my-alert').aalert('close');
+~~~
+
+### `open`
+
+~~~js
+$('my-alert').aalert('open');
+~~~
+
+## Changing functions
+
+~~~js
+$('.my-alert')
+    .aalert('changeTo', 'success')
+    .aalert('changeContentTo', 'Success message')
+    .aalert('closeAfter', 3000);
+~~~
\ No newline at end of file