├── .gitignore
├── LICENSE
├── README.md
├── bower.json
└── src
    ├── app.js
    ├── complexModal.html
    ├── createDialog.js
    ├── index.html
    └── simpleModal.html


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Webstorm 
 2 | \.idea
 3 | 
 4 | 
 5 | # OS droppings
 6 | .DS_Store
 7 | .DS_Store?
 8 | .Spotlight-V100
 9 | .Trashes
10 | Icon?
11 | ehthumbs.db
12 | Thumbs.db
13 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | # The MIT License
 2 | 
 3 | Copyright (C) 2011-2013 Vojta Jína.
 4 | 
 5 | Permission is hereby granted, free of charge, to any person
 6 | obtaining a copy of this software and associated documentation files
 7 | (the "Software"), to deal in the Software without restriction,
 8 | including without limitation the rights to use, copy, modify, merge,
 9 | publish, distribute, sublicense, and/or sell copies of the Software,
10 | and to permit persons to whom the Software is furnished to do so,
11 | subject to the following conditions:
12 | 
13 | The above copyright notice and this permission notice shall be
14 | included in all copies or substantial portions of the Software.
15 | 
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
19 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS
20 | BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
21 | ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
22 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
23 | SOFTWARE.
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | angularjs-modal-service
 2 | =======================
 3 | 
 4 | An AngularJS service that creates a Modal Popup with a given HTML template and controller.
 5 | 
 6 | The Service createDialog can be used to create a modal using Twitter's Bootstrap on the fly.
 7 | 
 8 | ## Requirements
 9 | 
10 | 1. Twitter Bootstrap CSS
11 | 2. the createDialog.js file
12 | 
13 | ## Using it:
14 | 
15 | ### Getting it via Bower
16 | 
17 | 1. bower install angularjs-modal-service
18 | 
19 | ### Getting it otherwise
20 | 
21 | 1. Download createDialog.js and include it as part of your library
22 | 
23 | ### Using it
24 | 
25 | 1. Include the createDialog.js file in your index.html file.
26 | 2. Include the 'fundoo.services' as a module dependency when you define your app
27 | 3. Import the createDialog Service in your App Controller.
28 | 4. Call the createDialog() function from your controller, using the following syntax :
29 | 
30 | ```
31 | createDialog([template_url],{
32 |     id : [modal_id],
33 |     title: [modal_title],
34 |     backdrop: [backdrop_visible],
35 |     success: [modal_success_button],
36 |     cancel: [modal_cancel_button],
37 |     controller: [modal_controller],
38 |     backdropClass: [modal_backdrop_class],
39 |     footerTemplate: [modal_footer_template],
40 |     modalClass: [modal_class],
41 |     css: {
42 |         [css properties key: value]
43 |     }
44 | }, {modal_custom_data});
45 | ```
46 | where,
47 | 
48 | * **template_url** *[string]* : the url of the template of the body of the template.
49 | * **modal_id** *[string]* : the unique html id attr of the template.
50 | * **modal_title** *[string]* : is the title of the modal to be displayed in its header section.
51 | * **backdrop_visible(optional)** *[boolean]*: whether to hide the html page behind the modal under an overlay
52 | * **modal_success_button(optional)** *[object]*: the object add a submit button to the modal with its functionality
53 | 
54 | *Syntax*
55 | ```
56 |     {label: '[label_of_button]', fn: '[function_on_click]'}
57 | ```
58 | 
59 | * **modal_cancel_button(optional)** *[object]*: the object add a cancel button to the modal with its functionality. For configuration options see modal_success_button
60 | * **modal_controller(optional)** *[string]* : is the controller attached to the modal.
61 | * **modal_backdrop_class(optional)** *[string]* : the css class for the backdrop of the modal.
62 | * **modal_footer_template(optional)** *[string]* : the footer template of the modal.
63 | * **modal_class(optional)** *[string]* : the css class for the modal.
64 | * **modal_custom_data(optional)** *[object]* : is an object where each key becomes an argument to the controller of the modal.
65 | 
66 | ## Where can I see a demo?
67 | 
68 | Glad you asked. Go check out our GitHub page for the [AngularJS-Modal-Service]
69 | 
70 | ## Who are you?
71 | 
72 | We are Fundoo Solutions, an awesome company based out of India who just love AngularJS. Check out our [website] or our [LinkedIn] page.
73 | 
74 | ## License
75 | 
76 | The code above is open sourced, and licensed under the MIT License, which is the simplest and easiest to understand, and most open.
77 | Basically, feel free to use this code or modify it as per your needs. The actual license can be found in the `LICENSE` file.
78 | 
79 | 
80 | [AngularJS-Modal-Service]: http://fundoo-solutions.github.io/angularjs-modal-service/
81 | [website]: http://www.befundoo.com
82 | [LinkedIn]: http://www.linkedin.com/company/fundoo-solutions
83 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angularjs-modal-service",
 3 |   "version": "0.0.1",
 4 |   "main": "src/createDialog.js",
 5 |   "ignore": [
 6 |     "**/.*",
 7 |     ".DS_Store",
 8 |     "node_modules",
 9 |     "components"
10 |   ],
11 |   "description": "An AngularJS service that creates a Modal Popup with a given HTML template and controller",
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "git@github.com:Fundoo-Solutions/angularjs-modal-service.git"
15 |   },
16 | 
17 |   "license": "MIT"
18 | }
19 | 


--------------------------------------------------------------------------------
/src/app.js:
--------------------------------------------------------------------------------
  1 | var app = angular.module('FundooModalApp', ['fundoo.services'])
  2 | 	.controller('MainCtrl', ['$scope', 'createDialog', function($scope, createDialogService) {
  3 | 		$scope.launchInlineModal = function() {
  4 | 			createDialogService({
  5 |               id: 'simpleDialog',
  6 |               template:
  7 |                 '<div class="row-fluid">' +
  8 |                 ' <h3>This is how the Simple Modal was launched</h3>' +
  9 |                 ' <div>' +
 10 |                 '   <div class="codebox">' +
 11 |                 '<pre>' +
 12 |                 'createDialog({\n' +
 13 |                 '    id: "inlineDialog",\n' +
 14 |                 '    <span style="color:red">template: "&lt;div>&lt;!--template HTML here...-->&lt;/div>"</span>\n' +
 15 |                 '    title: "A Inline Modal Dialog",\n' +
 16 |                 '    backdrop: true,\n' +
 17 |                 '    success: {\n' +
 18 |                 '        label: "Yay",\n' +
 19 |                 '        fn: function(){\n' +
 20 |                 '            console.log("Inline modal closed");\n' +
 21 |                 '        }\n' +
 22 |                 '    }\n' +
 23 |                 '});\n' +
 24 |                 '</pre>\n' +
 25 |                 '   </div>\n' +
 26 |                 ' </div>\n' +
 27 |                 '</div>',
 28 |               title: 'A Inline Modal Dialog',
 29 |               backdrop: true,
 30 |               success: {label: 'Success', fn: function() {console.log('Inline modal closed');}}
 31 |             });
 32 | 		};
 33 | 		$scope.launchObjectModal = function() {
 34 | 			createDialogService({
 35 |               id: 'simpleDialog',
 36 |               template: angular.element(
 37 |                 '<div class="row-fluid">' +
 38 |                 ' <h3>This is how the Simple Modal was launched</h3>' +
 39 |                 ' <div>' +
 40 |                 '   <div class="codebox">' +
 41 |                 '<pre>' +
 42 |                 'createDialog({\n' +
 43 |                 '    id: "objectDialog",\n' +
 44 |                 '    <span style="color:red">template: angular.element("...")</span>\n' +
 45 |                 '    title: "A Object Modal Dialog",\n' +
 46 |                 '    backdrop: true,\n' +
 47 |                 '    success: {\n' +
 48 |                 '        label: "Yay",\n' +
 49 |                 '        fn: function(){\n' +
 50 |                 '            console.log("Object modal closed");\n' +
 51 |                 '        }\n' +
 52 |                 '    }\n' +
 53 |                 '});\n' +
 54 |                 '</pre>\n' +
 55 |                 '   </div>\n' +
 56 |                 ' </div>\n' +
 57 |                 '</div>'),
 58 |               title: 'A Object Modal Dialog',
 59 |               backdrop: true,
 60 |               success: {label: 'Success', fn: function() {console.log('Object modal closed');}}
 61 |             });
 62 | 		};
 63 | 		$scope.launchSimpleModal = function() {
 64 | 			createDialogService('simpleModal.html', {
 65 |               id: 'simpleDialog',
 66 |               title: 'A Simple Modal Dialog',
 67 |               backdrop: true,
 68 |               success: {label: 'Success', fn: function() {console.log('Simple modal closed');}}
 69 |             });
 70 | 		};
 71 | 		$scope.launchComplexModal = function() {
 72 | 			createDialogService('complexModal.html', {
 73 |               id: 'complexDialog',
 74 |               title: 'A Complex Modal Dialog',
 75 |               backdrop: true,
 76 |               controller: 'ComplexModalController',
 77 |               success: {label: 'Success', fn: function() {console.log('Complex modal closed');}}
 78 |             }, {
 79 |         	  myVal: 15,
 80 |         	  assetDetails: {
 81 |         	  	name: 'My Asset',
 82 |         	  	description: 'A Very Nice Asset'
 83 |         	  }
 84 |         	});
 85 | 		};
 86 | 	}])
 87 | 	.factory('SampleFactory', function() {
 88 | 		return {
 89 | 			sample: function() {
 90 | 				console.log('This is a sample');
 91 | 			}
 92 | 		};
 93 | 	})
 94 | 	.controller('ComplexModalController', ['$scope', 'SampleFactory', 'myVal', 'assetDetails',
 95 | 		 function($scope, SampleFactory, myVal, assetDetails) {
 96 | 		 	$scope.myVal = myVal;
 97 | 		 	$scope.asset = assetDetails;
 98 | 		 	SampleFactory.sample();
 99 | 	}]);
100 | 


--------------------------------------------------------------------------------
/src/complexModal.html:
--------------------------------------------------------------------------------
 1 | <div class="row-fluid">
 2 | 	<h3>This is how the Complex Modal was launched</h3>
 3 | 	<div>
 4 | 		<div class="codebox">
 5 | <pre>
 6 | createDialog(<span style="color:red">'complexModal.html'</span>,{
 7 |     id : 'complexDialog',
 8 |     title: 'A Complex Modal Dialog',
 9 |     backdrop: true,
10 |     success: {
11 |         label: 'Yay',
12 |         fn: function() {
13 |             console.log('Complex modal closed');
14 |         }
15 |     },
16 |     controller: 'ComplexModalController'
17 | }<span style="color:red">,{
18 |     myVal: 15,
19 |     assetDetails: {
20 |         name: 'My Asset',
21 |         description: 'A Very Nice Asset'
22 |     }
23 | }</span>);
24 | </pre>
25 | 		</div>
26 | 		<div>
27 | 			<h5>The Values on the scope are:</h5>
28 | 			<ul>
29 | 				<li>Value of Asset : <span ng-bind="myVal"></span></li>
30 | 				<li>Name of Asset  : <span ng-bind="asset.name"></span></li>
31 | 				<li>Asset Description : <span ng-bind="asset.description"></span></li>
32 | 			</ul>
33 | 		</div>
34 | 	</div>
35 | </div>
36 | 


--------------------------------------------------------------------------------
/src/createDialog.js:
--------------------------------------------------------------------------------
  1 | angular.module('fundoo.services', []).factory('createDialog', ["$document", "$compile", "$rootScope", "$controller", "$timeout",
  2 |   function ($document, $compile, $rootScope, $controller, $timeout) {
  3 |     var defaults = {
  4 |       id: null,
  5 |       template: null,
  6 |       templateUrl: null,
  7 |       title: 'Default Title',
  8 |       backdrop: true,
  9 |       success: {label: 'OK', fn: null},
 10 |       cancel: {label: 'Close', fn: null},
 11 |       controller: null, //just like route controller declaration
 12 |       backdropClass: "modal-backdrop",
 13 |       backdropCancel: true,
 14 |       footerTemplate: null,
 15 |       modalClass: "modal",
 16 |       css: {
 17 |         top: '100px',
 18 |         left: '30%',
 19 |         margin: '0 auto'
 20 |       }
 21 |     };
 22 |     var body = $document.find('body');
 23 | 
 24 |     return function Dialog(templateUrl/*optional*/, options, passedInLocals) {
 25 | 
 26 |       // Handle arguments if optional template isn't provided.
 27 |       if(angular.isObject(templateUrl)){
 28 |         passedInLocals = options;
 29 |         options = templateUrl;
 30 |       } else {
 31 |         options.templateUrl = templateUrl;
 32 |       }
 33 | 
 34 |       options = angular.extend({}, defaults, options); //options defined in constructor
 35 | 
 36 |       var key;
 37 |       var idAttr = options.id ? ' id="' + options.id + '" ' : '';
 38 |       var defaultFooter = '<button class="btn" ng-click="$modalCancel()">{{$modalCancelLabel}}</button>' +
 39 |         '<button class="btn btn-primary" ng-click="$modalSuccess()">{{$modalSuccessLabel}}</button>';
 40 |       var footerTemplate = '<div class="modal-footer">' +
 41 |         (options.footerTemplate || defaultFooter) +
 42 |         '</div>';
 43 |       var modalBody = (function(){
 44 |         if(options.template){
 45 |           if(angular.isString(options.template)){
 46 |             // Simple string template
 47 |             return '<div class="modal-body">' + options.template + '</div>';
 48 |           } else {
 49 |             // jQuery/JQlite wrapped object
 50 |             return '<div class="modal-body">' + options.template.html() + '</div>';
 51 |           }
 52 |         } else {
 53 |           // Template url
 54 |           return '<div class="modal-body" ng-include="\'' + options.templateUrl + '\'"></div>'
 55 |         }
 56 |       })();
 57 |       //We don't have the scope we're gonna use yet, so just get a compile function for modal
 58 |       var modalEl = angular.element(
 59 |                 '<div class="' + options.modalClass + ' fade"' + idAttr + ' style="display: block;">' +
 60 |                     '  <div class="modal-dialog">' +
 61 |                     '    <div class="modal-content">' +
 62 |                     '      <div class="modal-header">' +
 63 |                     '        <button type="button" class="close" ng-click="$modalCancel()">&times;</button>' +
 64 |                     '        <h2>{{$title}}</h2>' +
 65 |                     '      </div>' +
 66 |                     modalBody +
 67 |                     footerTemplate +
 68 |                     '    </div>' +
 69 |                     '  </div>' +
 70 |                     '</div>');
 71 | 
 72 |       for(key in options.css) {
 73 |         modalEl.css(key, options.css[key]);
 74 |       }
 75 |       var divHTML = "<div ";
 76 |       if(options.backdropCancel){
 77 |         divHTML+='ng-click="$modalCancel()"';
 78 |       }
 79 |       divHTML+=">";
 80 |       var backdropEl = angular.element(divHTML);
 81 |       backdropEl.addClass(options.backdropClass);
 82 |       backdropEl.addClass('fade in');
 83 | 
 84 |       var handleEscPressed = function (event) {
 85 |         if (event.keyCode === 27) {
 86 |           scope.$modalCancel();
 87 |         }
 88 |       };
 89 | 
 90 |       var closeFn = function () {
 91 |         body.unbind('keydown', handleEscPressed);
 92 |         modalEl.remove();
 93 |         if (options.backdrop) {
 94 |           backdropEl.remove();
 95 |         }
 96 |       };
 97 | 
 98 |       body.bind('keydown', handleEscPressed);
 99 | 
100 |       var ctrl, locals,
101 |         scope = options.scope || $rootScope.$new();
102 | 
103 |       scope.$title = options.title;
104 |       scope.$modalClose = closeFn;
105 |       scope.$modalCancel = function () {
106 |         var callFn = options.cancel.fn || closeFn;
107 |         callFn.call(this);
108 |         scope.$modalClose();
109 |       };
110 |       scope.$modalSuccess = function () {
111 |         var callFn = options.success.fn || closeFn;
112 |         callFn.call(this);
113 |         scope.$modalClose();
114 |       };
115 |       scope.$modalSuccessLabel = options.success.label;
116 |       scope.$modalCancelLabel = options.cancel.label;
117 |       
118 |       if (options.controller) {
119 |         locals = angular.extend({$scope: scope}, passedInLocals);
120 |         ctrl = $controller(options.controller, locals);
121 |         // Yes, ngControllerController is not a typo
122 |         modalEl.contents().data('$ngControllerController', ctrl);
123 |       }
124 | 
125 |       $compile(modalEl)(scope);
126 |       $compile(backdropEl)(scope);
127 |       body.append(modalEl);
128 |       if (options.backdrop) body.append(backdropEl);
129 | 
130 |       $timeout(function () {
131 |         modalEl.addClass('in');
132 |       }, 200);
133 |     };
134 |   }]);
135 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html ng-App="FundooModalApp">
 3 |   <head>
 4 |     <title>AngularJS Modal Services Demo</title>
 5 |     <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
 6 |     <style type="text/css">
 7 |       li{
 8 |         line-height: 30px;
 9 |       }
10 |       .codebox{
11 |         border:2px solid;
12 |         border-radius:2px;
13 |         background-color:#c9e2b8;
14 |         padding:20px;
15 |       }
16 |       pre{
17 |         padding: 10px;
18 |         line-height:30px;
19 |         color:#4c3f3d;
20 |         font-size: 14px;
21 |       }
22 |     </style>
23 |     <script type="text/javascript">
24 |       if(!window.console) {
25 |         console={};
26 |         console.log = function(){};
27 |         console.debug = function(){};
28 |         console.error = function(){};
29 |         console.info = function(){};
30 |       }
31 |     </script>
32 |   </head>
33 |   <body ng-controller="MainCtrl" style="background-color: #eee; font-size:18px">
34 |     <div class="row-fluid" >
35 |       <div class="span8 pagination-centered hero-unit" style="margin-left:215px; margin-top:50px; background-color: #78d2b6;  ">
36 |         <h1>AngularJS Modal Service</h1>
37 |         <div class="span10 pagination-centered" style="margin-left:50px; margin-top:20px">
38 |           <button ng-click="launchInlineModal()" class="btn btn-large btn-danger">Inline Modal</button>
39 |           <button ng-click="launchObjectModal()" class="btn btn-large btn-danger">Object Modal</button>
40 |           <button ng-click="launchSimpleModal()" class="btn btn-large btn-danger">Simple Modal</button>
41 |           <button ng-click="launchComplexModal()" class="btn btn-large btn-danger">Complex Modal</button>
42 |         </div>
43 |       </div>
44 |     </div>
45 |     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
46 |     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
47 |     <script src="createDialog.js"></script>
48 |     <script src="app.js"></script>
49 |   </body>
50 | </html>
51 | 


--------------------------------------------------------------------------------
/src/simpleModal.html:
--------------------------------------------------------------------------------
 1 | <div class="row-fluid">
 2 | 	<h3>This is how the Simple Modal was launched</h3>
 3 | 	<div>
 4 | 		<div class="codebox">
 5 | <pre>
 6 | createDialog(<span style="color:red">'simpleModal.html'</span>, {
 7 |     id : 'simpleDialog',
 8 |     title: 'A Simple Modal Dialog',
 9 |     backdrop: true,
10 |     success: {
11 |         label: 'Yay',
12 |         fn: function(){
13 |             console.log('Simple modal closed');
14 |         }
15 |     }
16 | });
17 | </pre>
18 | 		</div>
19 | 	</div>
20 | </div>
21 | 


--------------------------------------------------------------------------------