Updated readme (#223)

* Updated readme

* Release 1.1.1

README.md

@@ -6,6 +6,84 @@ A jquery plugin for creating a timed modal dialog
 
 * Under development
 
+## Getting started
+
+Install the jQuery and the jQuery timed dialog.
+
+### Using npm
+
+```bash
+npm i jquery
+npm i @armino-dev/jquery-timed-dialog
+```
+
+Import the components into your script.
+
+```js
+import $ from 'jquery';
+import timedDialog from '@armino-dev/jquery-timed-dialog';
+```
+
+Import the css into your stylesheet.
+
+```css
+import '@armino-dev/jquery-timed-dialog/dist/timed-dialog.min.css';
+```
+
+### Directly into your html from node_modules
+
+```html
+<script src="node_modules/jquery/dist/jquery.min.js"></script>
+<script src="node_modules/@armino-dev/jquery-timed-dialog/dist/timed-dialog.min.js"></script>
+<link rel="stylesheet" href="node_modules/@armino-dev/jquery-timed-dialog/dist/timed-dialog.min.css" />
+```
+
+### Directly into your html from cdn
+```html
+<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
+<script src="[node_modules/@armino-dev/jquery-timed-dialog/dist/timed-dialog.min.js](https://esm.sh/@armino-dev/jquery-timed-dialog)"></script>
+<link rel="stylesheet" href="https://esm.sh/@armino-dev/jquery-timed-dialog/dist/timed-dialog.min.css" />
+```
+
+## Use it
+
+```js
+
+const myCallback = () => {
+  console.log('The callback was executed!');
+}
+
+const options = {
+        type: 'confirmation',
+        title: 'Confirm callback execution',
+        body: '<p>Are you sure you want to execute myCallback?<br/><span style="font-size: 12px; padding:10px 0;">Check the console</span></p>',
+        width: 400,
+        height: 280,
+        timeout: 10,
+        closeOnTimer: true,
+        btnConfirm: {
+          text: 'Execute my callback',
+          action: () => myCallback(),
+        }
+};
+
+document.addEventListener("DOMContentLoaded", () => {
+  // add a button to dom
+  const button = document.createElement('button');
+  button.textContent = 'Show dialog';
+
+  // add a click event listener to the button
+  button.addEventListener("click", () => {
+    $().timedDialog(options);
+  });
+
+  // add the button to page
+  document.body.appendChild(button);
+});
+```
+
+### **Please take a look at [this working example on  CodePen](https://codepen.io/armino-dev/pen/zYbjdJw).**
+
 ## Demo
 
 Demo can be viewed on [here](https://armino-dev.github.io/jquery-timed-dialog/demo/)

demo/index.css

@@ -1,5 +1,5 @@
 @import url('https://fonts.googleapis.com/css?family=Noto+Serif:400,700&display=swap');
-@import "../css/timed-dialog.css";
+@import "../dist/css/timed-dialog.min.css";
 
 body {
     font-family: 'Noto Serif', serif;

karma.conf.js

@@ -17,9 +17,7 @@ module.exports = function (config) {
     // list of files / patterns to load in the browser
     files: [
       'https://code.jquery.com/jquery-3.4.1.min.js',
-      'demo/index.html',
-      'demo/index.css',
-      'css/timed-dialog.css',
+      'dist/css/timed-dialog.min.css',
       'src/**/*.js',
       'specs/**/*.js'
     ],

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@armino-dev/jquery-timed-dialog",
   "title": "jQuery Timed Dialog",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "A jQuery timed dialog UI",
   "homepage": "https://github.com/armino-dev/jquery-timed-dialog#readme",
   "main": "dist/timed-dialog.min.js",

specs/timed-dialogSpec.js

@@ -63,10 +63,9 @@ describe("jQuery Timed Dialog Plugin", () => {
         it("Should close on dialog btnDismiss click", (done) => {
             let dialog = $().timedDialog(options);
             const random = dialog.random;
-
-            let btnDismiss = $(document.querySelector(`#btn-dismiss-${random}`));
-            btnDismiss.trigger('click');
-
+
+            let btnDismiss = document.querySelector(`#btn-dismiss-${random}`);
+            btnDismiss.click();
             setTimeout(() => {
                 expect($(`#timed-dialog-${random}`).length).toBeLessThan(1);
                 done();

src/timed-dialog.js

@@ -242,6 +242,9 @@
         }
 
         this.random = random;
+        this.overlay = overlay;
+        this.dialog = dialog;
+        this.dismissDialog = dismissDialog;
 
         this.initialize = () => {
             const isAlreadyOpen = $('.timed-dialog-overlay').length;