Initial Commit

client/components/modal/modal.css

@@ -0,0 +1,23 @@
+.modal-primary .modal-header,
+.modal-info .modal-header,
+.modal-success .modal-header,
+.modal-warning .modal-header,
+.modal-danger .modal-header {
+  color: #fff;
+  border-radius: 5px 5px 0 0;
+}
+.modal-primary .modal-header {
+  background: #428bca;
+}
+.modal-info .modal-header {
+  background: #5bc0de;
+}
+.modal-success .modal-header {
+  background: #5cb85c;
+}
+.modal-warning .modal-header {
+  background: #f0ad4e;
+}
+.modal-danger .modal-header {
+  background: #d9534f;
+}

client/components/modal/modal.html

@@ -0,0 +1,11 @@
+<div class="modal-header">
+  <button ng-if="modal.dismissable" type="button" ng-click="$dismiss()" class="close">&times;</button>
+  <h4 ng-if="modal.title" ng-bind="modal.title" class="modal-title"></h4>
+</div>
+<div class="modal-body">
+  <p ng-if="modal.text" ng-bind="modal.text"></p>
+  <div ng-if="modal.html" ng-bind-html="modal.html"></div>
+</div>
+<div class="modal-footer">
+  <button ng-repeat="button in modal.buttons" ng-class="button.classes" ng-click="button.click($event)" ng-bind="button.text" class="btn"></button>
+</div>

client/components/modal/modal.service.js

@@ -0,0 +1,78 @@
+'use strict';
+
+import angular from 'angular';
+
+export function Modal($rootScope, $uibModal) {
+  /**
+   * Opens a modal
+   * @param  {Object} scope      - an object to be merged with modal's scope
+   * @param  {String} modalClass - (optional) class(es) to be applied to the modal
+   * @return {Object}            - the instance $uibModal.open() returns
+   */
+  function openModal(scope = {}, modalClass = 'modal-default') {
+    var modalScope = $rootScope.$new();
+
+    angular.extend(modalScope, scope);
+
+    return $uibModal.open({
+      template: require('./modal.html'),
+      windowClass: modalClass,
+      scope: modalScope
+    });
+  }
+
+  // Public API here
+  return {
+
+    /* Confirmation modals */
+    confirm: {
+
+      /**
+       * Create a function to open a delete confirmation modal (ex. ng-click='myModalFn(name, arg1, arg2...)')
+       * @param  {Function} del - callback, ran when delete is confirmed
+       * @return {Function}     - the function to open the modal (ex. myModalFn)
+       */
+      delete(del = angular.noop) {
+        /**
+         * Open a delete confirmation modal
+         * @param  {String} name   - name or info to show on modal
+         * @param  {All}           - any additional args are passed straight to del callback
+         */
+        return function(...args) {
+          var slicedArgs = Reflect.apply(Array.prototype.slice, args);
+          var name = slicedArgs.shift();
+          var deleteModal;
+
+          deleteModal = openModal({
+            modal: {
+              dismissable: true,
+              title: 'Confirm Delete',
+              html: `<p>Are you sure you want to delete <strong>${name}</strong> ?</p>`,
+              buttons: [{
+                classes: 'btn-danger',
+                text: 'Delete',
+                click(e) {
+                  deleteModal.close(e);
+                }
+              }, {
+                classes: 'btn-default',
+                text: 'Cancel',
+                click(e) {
+                  deleteModal.dismiss(e);
+                }
+              }]
+            }
+          }, 'modal-danger');
+
+          deleteModal.result.then(function(event) {
+            Reflect.apply(del, event, slicedArgs);
+          });
+        };
+      }
+    }
+  };
+}
+
+export default angular.module('app2App.Modal', [])
+  .factory('Modal', Modal)
+  .name;