Feature/modal (#24)

* initial modal setup

* add modal prompt

* modal fixes

.eslintrc.js

@@ -15,6 +15,7 @@ module.exports = {
     "indent": [2, 2], // indent with two spaces
     "angular/file-name": 0, // not friendly to modular architecture
     "no-console": 1, // useful for debugging
-    "angular/function-type": 0 // not friendly to modular architecture
+    "angular/function-type": 0, // not friendly to modular architecture
+    "angular/no-service-method": 0 // what's wrong with services?!
   }
 };

src/docs/demos/modal/modal-demo.controller.js

@@ -0,0 +1,29 @@
+class controller {
+  constructor ($ngbsModal) {
+    this.$ngbsModal = $ngbsModal;
+  }
+
+  $onInit() {
+    console.info('yay');
+  }
+
+  openModalPrompt () {
+    const options = {
+      title: 'Modal Prompt Title',
+      body: 'Here is the prompt text',
+      buttons: [
+        { type: 'primary',    text: 'Thanks!' },
+        { type: 'secondary',  text: 'Close' }
+      ]
+    };
+
+    this.$ngbsModal.openPrompt(options)
+      .then(function(button) {
+        console.info('clicked ' + button.text);
+      }, function() {
+        console.info('modal prompt closed without button click');
+      });
+  }
+}
+
+export default controller;

src/docs/demos/modal/modal-demo.html

@@ -0,0 +1 @@
+<button type="button" class="btn btn-outline-success" ng-click="$ctrl.openModalPrompt()">Open Modal Prompt</button>

src/docs/demos/modal/modal-demo.md

@@ -0,0 +1,13 @@
+## $ngbsModal
+
+This injectable service will help you create and handle bootstrap's modals.
+
+### openPrompt(*options*)
+
+A method to create prompt modals. accepts an options object which should include the following properties:
+
+**title** (*string*, optional) - The title which appears in the modal header.
+
+**body** (*string*, optional) - The modal's body text.
+
+**buttons** (*array*, optional) - An array of objects, each object represents a button and should include two properties: **name** (*string*) which appears on the button; **type** (*string*) which sets the button's style as [offered by bootstrap](http://v4-alpha.getbootstrap.com/components/buttons/#examples) 

src/docs/demos/modal/modal-demo.module.js

@@ -0,0 +1,30 @@
+// Import Angular Resources
+import template from './modal-demo.html';
+import controller from './modal-demo.controller.js';
+
+// Import Raw Files
+import TemplateRaw from '!raw-loader!./modal-demo.html';
+import ControllerRaw from '!raw-loader!./modal-demo.controller.js';
+import MarkdownRaw from '!raw-loader!./modal-demo.md';
+
+// manipulate controller to pass raw files up to demo
+controller.prototype.$onInit = function() {
+  this.demo.html = TemplateRaw;
+  this.demo.js = ControllerRaw;
+  this.demo.md = MarkdownRaw;
+};
+
+// Component definition
+const Component = {
+  require: {
+    demo: '^demo'
+  },
+  template,
+  controller
+};
+
+// Register module, register component and export name
+export default angular
+  .module('ng1bs4.docs.modalDemo', [])
+  .component('modalDemo', Component)
+  .name;

src/docs/docs.html

@@ -31,6 +31,10 @@ <h1>Alert</h1>
         <demo>
             <alert-demo></alert-demo>
         </demo>
+        <h1>Modal</h1>
+        <demo>
+            <modal-demo></modal-demo>
+        </demo>
     </div>
 </div>
 

src/docs/docs.module.js

@@ -16,6 +16,7 @@ import TabsDemo from './demos/tabs/tabs-demo.module';
 import MenuDemo from './demos/menu/menu-demo.module';
 import TooltipDemo from './demos/tooltip/tooltip-demo.module';
 import AlertDemo from './demos/alert/alert-demo.module';
+import ModalDemo from './demos/modal/modal-demo.module';
 
 // Register module, define components, configure routes and export name
 export default angular
@@ -27,7 +28,8 @@ export default angular
     TabsDemo,
     MenuDemo,
     TooltipDemo,
-    AlertDemo
+    AlertDemo,
+    ModalDemo
   ])
   .component('docs', Docs)
   .name;

src/library/library.module.js

@@ -11,6 +11,7 @@ import TabsModule from './tabs/tabs.module';
 import MenuModule from './menu/menu.module';
 import TooltipModule from './tooltip/tooltip.module';
 import AlertModule from './alert/alert.module';
+import ModalModule from './modal/modal.module';
 
 // Register module, inject components and export name
 export default angular
@@ -20,6 +21,10 @@ export default angular
     TabsModule,
     MenuModule,
     TooltipModule,
-    AlertModule
+    AlertModule,
+    ModalModule
   ])
+  .config(function ($qProvider) {
+    $qProvider.errorOnUnhandledRejections(false);
+  })
   .name;

src/library/modal/modal.html

@@ -0,0 +1,18 @@
+<div class="modal fade">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">{{ options.title }}</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <p>{{ options.body }}</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" ng-repeat="button in options.buttons" class="btn btn-{{button.type}}" ng-click="closeModal(button)">{{ button.text }}</button>
+            </div>
+        </div>
+    </div>
+</div>

src/library/modal/modal.module.js

@@ -0,0 +1,9 @@
+// Import Resources
+import ModalService from './modal.service';
+import './modal.scss';
+
+// Register module, register component and export name
+export default angular
+  .module('ng1bs4.library.modal', [])
+  .service('$ngbsModal', ModalService)
+  .name;

src/library/modal/modal.service.js

@@ -0,0 +1,67 @@
+import template from './modal.html';
+
+const DEFAULT_OPTIONS = {
+  title: 'Modal Title',
+  body: 'Modal body text goes here.',
+  buttons: [
+    {
+      type: 'primary',
+      text: 'OK',
+    },
+    {
+      type: 'secondary',
+      text: 'Cancel',
+    },
+  ]
+};
+
+class ModalService {
+  constructor ($document, $compile, $rootScope, $q) {
+    this.$document = $document;
+    this.$compile = $compile;
+    this.$rootScope = $rootScope;
+    this.$q = $q;
+  }
+
+  openPrompt(options) {
+    // promise object to handle prompt results
+    const deferred = this.$q.defer();
+    // new scope for the modal
+    const modalScope = this.$rootScope.$new(true);
+    // prepare the modal element
+    const modalElement = angular.element(template);
+    // get the document body
+    const body = this.$document.find('body').eq(0);
+
+    let buttonClicked;
+
+    // merge user options with defaults and make it available on the modal's scope
+    modalScope.options = angular.merge({}, DEFAULT_OPTIONS, options);
+    // compile the modal element with the new scope
+    this.$compile(modalElement)(modalScope);
+    // inject the modal element into the dom
+    body.append(modalElement);
+    // open the modal
+    modalElement.modal();
+
+    // handle button click
+    modalScope.closeModal = (button) => {
+      modalElement.modal('hide');
+      buttonClicked = button;
+    };
+
+    // on modal close, resolve or reject promise
+    modalElement.on('hidden.bs.modal', function () {
+      if (buttonClicked) {
+        deferred.resolve(buttonClicked);
+      } else {
+        deferred.reject();
+      }
+      modalScope.$destroy();
+    });
+
+    return deferred.promise;
+  }
+}
+
+export default ModalService;

src/library/select/select.component.js

@@ -8,9 +8,8 @@ const DEFAULT_PLACEHOLDER = 'Select an option...';
 
 // Set up controller
 class controller {
-  constructor($element, $timeout) {
+  constructor($element) {
     this.$element = $element;
-    this.$timeout = $timeout;
   }
 
   $onInit() {