Extended functionality

.gitignore

@@ -6,3 +6,4 @@ build
 spec/build
 ng-modal.zip
 dist/ng-modal.zip
+.idea/

README.md

@@ -8,7 +8,7 @@ ngModal is very simple [Angular.js](http://angularjs.org/) modal dialog directiv
 
 ## Download
 
-* [Version 1.2.2](https://github.com/adamalbrecht/ngModal/archive/1.2.2.zip) - Compatible with Angular 1.2.x.
+* [Version 1.2.3](https://github.com/adamalbrecht/ngModal/archive/1.2.3.zip) - Compatible with Angular 1.2.x.
 
 You can also install the package using [Bower](http://bower.io).
 
@@ -41,19 +41,22 @@ The directive itself is called *modal-dialog*. The only required attribute is `s
 
 ## Inline Options
 
-There are a few options that be configured inline with attributes.
+There are a few options that can be configured inline with attributes.
 
 | Option         | Default | Description                                                       |
 | -------------- | ------- | ----------------------------------------------------------------- |
 | dialog-title   | null    | Title placed in the header of the modal dialog.                   |
 | width          | 50%     | Width of the dialog. Can be specified in px or %.                 |
 | height         | 50%     | Height of the dialog. Can be specified in px or %.                |
 | on-close       | null    | Call a function when the dialog is closed. Ex: `on-close='foo()'` |
+| hide-close-button | false     | Hides the modal close (x) button.               |
+| close-on-escape         | true     | Close the modal on ESC key press.                |
+| close-on-outside-click       | true    | Close the modal when clicking outside (e.g. click on the overlay). |
 
 **Example:**
 
 ```html
-<modal-dialog show='dialogShown' dialog-title='My Dialog' height='400px' width='75%'>
+<modal-dialog show='dialogShown' dialog-title='My Dialog' height='400px' width='75%' hide-close-button="true" close-on-escape="false" close-on-outside-click="false">
   <p>Dialog content goes in here</p>
 </modal-dialog>
 ```
@@ -73,11 +76,14 @@ app.config(function(ngModalDefaultsProvider) {
 | Option              | Default | Description                                                                                                      |
 | ------------------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
 | closeButtonHtml     | 'X'     | By default, the close button is just an X character. But you can set it to any HTML. For example, if you're using font-awesome, you could set it to `<i class='fa fa-times'></i>` |
+| hideCloseButton     | false     | By default, the close button is visible. But you can override this by setting this option to 'true' `<modal-dialog show='dialogShown' hide-close-button='true'>` |
+| closeOnEscape     | true     | By default, the ESC button press will close the modal. You can disable this feature by setting this option to 'false' `<modal-dialog show='dialogShown' close-on-escape='false'>` |
+| closeOnOutsideClick     | true     | By default, the click outside the modal window will result in modal close action. You can disable this feature by setting this option to 'false' `<modal-dialog show='dialogShown' close-on-outside-click='false'>` |
 
 
 ## Browser Support
 
-So far, it has only been tested in Chrome. There is some CSS that is not compatible with with older browsers, including IE9.
+So far, it has only been tested in Chrome. There is some CSS that is not compatible with older browsers, including IE9.
 
 ## Contributing
 
@@ -90,6 +96,7 @@ Contributions are welcome. Whenever possible, please include test coverage with
 5. Create new Pull Request
 
 To get the project running, you'll need [NPM](https://npmjs.org/) and [Bower](http://bower.io/). Run `npm install` and `bower install` to install all dependencies. Then run `grunt` in the project directory to watch and compile changes. And you can run `karma start` to watch for changes and auto-execute unit tests.
+If running `grunt` throws an error on Windows (`'grunt' is not recognized as an internal or external command, operable program or batch file.`) try running `npm install -g grunt-cli` - this should fix the issue.
 
 ## Potential Features Down the Road
 

bower.json

@@ -1,6 +1,7 @@
 {
-  "name": "ngModal",
-  "version": "1.2.2",
+  "name": "ngModal-extended",
+  "version": "1.2.3",
+  "homepage": "https://github.com/Ricco1/ngModal",
   "main": ["dist/ng-modal.js", "dist/ng-modal.css"],
   "ignore": [
     ".gitignore",

demo.html

@@ -12,7 +12,7 @@
   </head>
   <body>
     <div ng-controller='DemoController'>
-      <modal-dialog show='myData.modalShown' width='500px' dialog-title='Modal Dialog Title' on-close='logClose()'>
+      <modal-dialog show='myData.modalShown' hide-close-button="true" close-on-escape="false" close-on-outside-click="false" width='500px' dialog-title='Modal Dialog Title' on-close='logClose()'>
         <p>This is some html content</p>
         <p>
           <label for='hello'>Hello:</label>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngModal",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "devDependencies": {
     "grunt": "~0.4.1",
     "grunt-contrib-coffee": "~0.7",

src/ng-modal.coffee

@@ -13,6 +13,9 @@ app = angular.module("ngModal", [])
 app.provider "ngModalDefaults", ->
   options: {
     closeButtonHtml: "<span class='ng-modal-close-x'>X</span>"
+    hideCloseButton: false
+    closeOnEscape: true
+    closeOnOutsideClick: true
   }
   $get: ->
     @options
@@ -24,15 +27,39 @@ app.provider "ngModalDefaults", ->
     else
       @options[keyOrHash] = value
 
-app.directive 'modalDialog', ['ngModalDefaults', '$sce', (ngModalDefaults, $sce) ->
+app.directive 'modalDialog', ['ngModalDefaults', '$sce', '$timeout', (ngModalDefaults, $sce, $timeout) ->
   restrict: 'E'
   scope:
     show: '='
     dialogTitle: '@'
     onClose: '&?'
+    hideCloseButton: '='
+    closeOnEscape: '='
+    closeOnOutsideClick: '='
   replace: true
   transclude: true
   link: (scope, element, attrs) ->
+    scope.hCB = if scope.hideCloseButton == undefined then ngModalDefaults.hideCloseButton else scope.hideCloseButton
+    scope.cOE = if scope.closeOnEscape == undefined then ngModalDefaults.closeOnEscape else scope.closeOnEscape
+    scope.cOOC = if scope.closeOnOutsideClick == undefined then ngModalDefaults.closeOnOutsideClick else scope.closeOnOutsideClick
+
+    bindEscKeyPress = ->
+      if scope.cOE
+        document.onkeydown = (evt) ->
+          evt = evt || window.event
+          isEscape = false
+
+          if "key" in evt
+            isEscape = evt.key == "Escape" || evt.key == "Esc"
+          else
+            isEscape = evt.keyCode == 27
+
+          if isEscape
+            scope.hideModal()
+
+    unbindEscKeyPress = ->
+      document.onkeydown = ->
+
     setupCloseButton = ->
       scope.closeButtonHtml = $sce.trustAsHtml(ngModalDefaults.closeButtonHtml)
 
@@ -43,13 +70,19 @@ app.directive 'modalDialog', ['ngModalDefaults', '$sce', (ngModalDefaults, $sce)
 
     scope.hideModal = ->
       scope.show = false
+      triggerDigest = $timeout(() ->
+        $timeout.cancel(triggerDigest);
+      )
 
     scope.$watch('show', (newVal, oldVal) ->
       if newVal && !oldVal
+        bindEscKeyPress()
         document.getElementsByTagName("body")[0].style.overflow = "hidden";
       else
+        unbindEscKeyPress()
         document.getElementsByTagName("body")[0].style.overflow = "";
       if (!newVal && oldVal) && scope.onClose?
+        unbindEscKeyPress()
         scope.onClose()
     )
 
@@ -58,10 +91,10 @@ app.directive 'modalDialog', ['ngModalDefaults', '$sce', (ngModalDefaults, $sce)
 
   template: """
               <div class='ng-modal' ng-show='show'>
-                <div class='ng-modal-overlay' ng-click='hideModal()'></div>
+                <div class='ng-modal-overlay' ng-click='cOOC && hideModal()'></div>
                 <div class='ng-modal-dialog' ng-style='dialogStyle'>
                   <span class='ng-modal-title' ng-show='dialogTitle && dialogTitle.length' ng-bind='dialogTitle'></span>
-                  <div class='ng-modal-close' ng-click='hideModal()'>
+                  <div class='ng-modal-close' ng-if='!hCB' ng-click='hideModal()'>
                     <div ng-bind-html='closeButtonHtml'></div>
                   </div>
                   <div class='ng-modal-dialog-content' ng-transclude></div>