v0.8.0

Added option closeOnBgClick. See readme for more infos.
DavideTriso · May 19, 2017 · 91db8ee · 91db8ee
1 parent ad184bd
commit 91db8ee
Show file tree

Hide file tree

Showing 11 changed files with 45 additions and 33 deletions.
diff --git a/README.md b/README.md
@@ -34,6 +34,7 @@ dialogContainerClass | dialog__container | string | Class of a dialog container.
 dialogHeadingClass | dialog__heading | string | Class of a dialog heading. | optional
 dialogType | modal |  token | Set type of dialog: modal or alert. For more informations see [https://www.w3.org/TR/wai-aria-practices-1.1/#alertdialog](https://www.w3.org/TR/wai-aria-practices-1.1/#alertdialog) and [https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal). (Support for non-modal dialog is planned for future verions of the plugin). | optional
 closeWithEsc | false | bool | Close dialog when esc key is pressed. | optional (recommended value: true)
+closeOnBgClick | false | bool | Close dialog if user clicks on dialog background | optional
 dialogContainerRole | document | token | Role of dialog content. Accepted values: document, application. For more information see [https://www.w3.org/TR/wai-aria-1.1/](https://www.w3.org/TR/wai-aria-1.1/). | optional
 zIndex | 100 | int | Z-index assigned to dialog. | optional
 fadeSpeed | 100 | int (>= 0) | Duration of fade-in and fade-out animations. | optional

diff --git a/aria-dialog.js b/aria-dialog.js
@@ -59,6 +59,7 @@
         dialogType: 'modal', // modal, alert (alertdialog)
         dialogContainerRole: 'document',
         closeWithEsc: false,
+        closeOnBgClick: false,
         zIndex: 100,
         fadeSpeed: 100,
         preventScroll: true
@@ -95,11 +96,11 @@
     elements.wrapper.css({
       opacity: 0
     });
- 
+
     //Set needed attributes to dialog elements
     switch (settings.dialogType) {
       case 'modal':
-      //case 'non-modal':
+        //case 'non-modal':
         elements.wrapper.attr(a.r, 'dialog');
         break;
       case 'alert':
@@ -173,6 +174,15 @@
         }
       });
     }
+    //close dialog if user clicks on bg
+    if (dialogsArray[index][2].closeOnBgClick) {
+      dialog.on('click', function (event) {
+        methods.close(dialog);
+      });
+      wrapper.on('click', function (event) {
+        event.stopPropagation();
+      });
+    }
   };
 
 

diff --git a/aria-dialog.min.js b/aria-dialog.min.js
diff --git a/demo/aria-dialog.js b/demo/aria-dialog.js
@@ -59,6 +59,7 @@
         dialogType: 'modal', // modal, alert (alertdialog)
         dialogContainerRole: 'document',
         closeWithEsc: false,
+        closeOnBgClick: false,
         zIndex: 100,
         fadeSpeed: 100,
         preventScroll: true
@@ -95,11 +96,11 @@
     elements.wrapper.css({
       opacity: 0
     });
- 
+
     //Set needed attributes to dialog elements
     switch (settings.dialogType) {
       case 'modal':
-      //case 'non-modal':
+        //case 'non-modal':
         elements.wrapper.attr(a.r, 'dialog');
         break;
       case 'alert':
@@ -173,6 +174,15 @@
         }
       });
     }
+    //close dialog if user clicks on bg
+    if (dialogsArray[index][2].closeOnBgClick) {
+      dialog.on('click', function (event) {
+        methods.close(dialog);
+      });
+      wrapper.on('click', function (event) {
+        event.stopPropagation();
+      });
+    }
   };
 
 
@@ -269,7 +279,8 @@ $(document).ready(function () {
   'use strict';
   $('#dialog-1').ariaDialog({
     fadeSpeed: 200,
-    closeWithEsc: true
+    closeWithEsc: true,
+    closeOnBgClick: true
   });
 
   $('#dialog-2').ariaDialog({

diff --git a/demo/index.html b/demo/index.html
@@ -3,6 +3,7 @@
 
 <head>
   <title>Dialog demo</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta charset="utf-8">
   <link rel="stylesheet" href="aria-dialog.css" />
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

diff --git a/scss/01_placeholders/README.md b/scss/01_placeholders/README.md
@@ -0,0 +1,3 @@
+# PLACEHOLDERS
+
+## ABOUT
diff --git a/scss/01_placeholders/_placeholders-all.scss b/scss/01_placeholders/_placeholders-all.scss
@@ -900,6 +900,9 @@
 %height-0 {
   height: 0;
 }
+%height-100 {
+  height: 100%;
+} 
 %justify-content-flex-start {
   -webkit-justify-content: flex-start;
   justify-content: flex-start;

diff --git a/scss/01_placeholders/_placeholders-desktop.scss b/scss/01_placeholders/_placeholders-desktop.scss
@@ -901,6 +901,9 @@
   %desktop-height-0 {
     height: 0;
   }
+  %desktop-height-100 {
+    height: 100%;
+  }
   %desktop-justify-content-flex-start {
     -webkit-justify-content: flex-start;
     justify-content: flex-start;

diff --git a/scss/01_placeholders/_placeholders-tablet.scss b/scss/01_placeholders/_placeholders-tablet.scss
@@ -901,6 +901,9 @@
   %tablet-height-0 {
     height: 0;
   }
+  %tablet-height-100 {
+    height: 100%;
+  }
   %tablet-justify-content-flex-start {
     -webkit-justify-content: flex-start;
     justify-content: flex-start;

diff --git a/scss/02_css-mixins/README.md b/scss/02_css-mixins/README.md
@@ -0,0 +1,4 @@
+# CSS MIXINS
+
+## ABOUT
+
diff --git a/scss/_variables.scss b/scss/_variables.scss