chore(build): update custom build to use $modal service

Closes #927

Author: pkozlowski-opensource

misc/demo/assets/app.js

@@ -1,34 +1,39 @@
-
 angular.module('bootstrapDemoApp', ['ui.bootstrap', 'plunker']);
 
-function MainCtrl($scope, $http, $document, orderByFilter) {
+function MainCtrl($scope, $http, $document, $modal, orderByFilter) {
   var url = "http://50.116.42.77:3001";
-  $scope.selectedModules = [];
   //iFrame for downloading
   var $iframe = angular.element('<iframe>').css('display','none');
   $document.find('body').append($iframe);
 
   $scope.showBuildModal = function() {
-    $scope.buildModalShown = true;
-    //Load modules if they aren't loaded yet
-    if (!$scope.modules) {
-      $http.get(url + "/api/bootstrap").then(function(response) {
-        $scope.modules = response.data.modules;
-      }, function() {
-        $scope.buildGetErrorText = "Error retrieving build files from server.";
-      });
-    }
-  };
+    var modalInstance = $modal.open({
+      templateUrl: 'buildModal.html',
+      controller: 'SelectModulesCtrl',
+      resolve: {
+        modules: function() {
+          return $http.get(url + "/api/bootstrap").then(function(response) {
+            return response.data.modules;
+          });
+        }
+      }
+    });
 
-  $scope.downloadBuild = function() {
-    var downloadUrl = url + "/api/bootstrap/download?";
-    angular.forEach($scope.selectedModules, function(module) {
-      downloadUrl += "modules=" + module + "&";
+    modalInstance.result.then(function(selectedModules) {
+      var downloadUrl = url + "/api/bootstrap/download?";
+      angular.forEach(selectedModules, function(module) {
+        downloadUrl += "modules=" + module + "&";
+      });
+      $iframe.attr('src','');
+      $iframe.attr('src', downloadUrl);
     });
-    $iframe.attr('src','');
-    $iframe.attr('src', downloadUrl);
-    $scope.buildModalShown = false;
   };
+}
+
+var SelectModulesCtrl = function($scope, $modalInstance, modules) {
+
+  $scope.selectedModules = [];
+  $scope.modules = modules;
 
   $scope.selectedChanged = function(module, selected) {
     if (selected) {
@@ -37,4 +42,12 @@ function MainCtrl($scope, $http, $document, orderByFilter) {
       $scope.selectedModules.splice($scope.selectedModules.indexOf(module), 1);
     }
   };
-}
+
+  $scope.downloadBuild = function () {
+    $modalInstance.close($scope.selectedModules);
+  };
+
+  $scope.cancel = function () {
+    $modalInstance.dismiss();
+  };
+};

misc/demo/index.html

@@ -218,24 +218,24 @@ <h1><%= module.displayName %><small>
 <script src="assets/rainbow-generic.js"></script>
 <script src="assets/rainbow-javascript.js"></script>
 <script src="assets/rainbow-html.js"></script>
-<div modal="buildModalShown" class="fade">
-  <div class="modal-header"><h2>Create a Custom Build</h2></div>
-  <div class="modal-body">
-    <div ng-show="buildErrorText">
-      <h3 style="text-align: center;">{{buildErrorText}}</h3>
+<script type="text/ng-template" id="buildModal.html">
+    <div class="modal-header"><h2>Create a Custom Build</h2></div>
+    <div class="modal-body">
+        <div ng-show="buildErrorText">
+            <h3 style="text-align: center;">{{buildErrorText}}</h3>
+        </div>
+        <div ng-hide="buildErrorText">
+            <label>Select the modules you wish to download:</label>
+            <% modules.forEach(function(module) { %>
+            <button type="button" class="btn" ng-class="{'btn-primary': module.<%= module.name %>}" style="width: 170px; margin-bottom: 3px;" ng-model="module.<%= module.name %>" btn-checkbox ng-change="selectedChanged('<%= module.name %>', module.<%= module.name %>)"><%= module.displayName %></button>
+            <% }); %>
+        </div>
     </div>
-    <div ng-hide="buildErrorText">
-      <label>Select the modules you wish to download:</label>
-      <% modules.forEach(function(module) { %>
-        <button type="button" class="btn" ng-class="{'btn-primary': module.<%= module.name %>}" style="width: 170px; margin-bottom: 3px;" ng-model="module.<%= module.name %>" btn-checkbox ng-change="selectedChanged('<%= module.name %>', module.<%= module.name %>)"><%= module.displayName %></button>
-      <% }); %>
+    <div class="modal-footer">
+        <a class="btn btn-primary" ng-disabled="!selectedModules.length" ng-click="selectedModules.length && downloadBuild()"><i class="icon-download-alt icon-white"></i> Download {{selectedModules.length}} Modules</a>
+        <a class="btn" ng-click="cancel()">Cancel</a>
     </div>
-  </div>
-  <div class="modal-footer">
-    <a class="btn btn-primary" ng-disabled="!selectedModules.length" ng-click="selectedModules.length && downloadBuild()"><i class="icon-download-alt icon-white"></i> Download {{selectedModules.length}} Modules</a>
-    <a class="btn" ng-click="buildModalShown = false">Cancel</a>
-  </div>
-</div>
+</script>
 
 <script type="text/javascript">