demo(all): use modal for download process

Closes angular-ui#1494

Author: bekos

misc/demo/assets/app.js

@@ -9,6 +9,11 @@ function MainCtrl($scope, $http, $document, $modal, orderByFilter) {
   var $iframe = angular.element('<iframe>').css('display','none');
   $document.find('body').append($iframe);
 
+  var downloadFileFromUrl = function(downloadUrl) {
+    $iframe.attr('src', '');
+    $iframe.attr('src', downloadUrl);
+  };
+  
   $scope.showBuildModal = function() {
     var modalInstance = $modal.open({
       templateUrl: 'buildModal.html',
@@ -27,8 +32,28 @@ function MainCtrl($scope, $http, $document, $modal, orderByFilter) {
       angular.forEach(selectedModules, function(module) {
         downloadUrl += "modules=" + module + "&";
       });
-      $iframe.attr('src','');
-      $iframe.attr('src', downloadUrl);
+      downloadFileFromUrl(downloadUrl);
+    });
+  };
+  
+  $scope.showDownloadModal = function() {
+    var modalInstance = $modal.open({
+      templateUrl: 'downloadModal.html',
+      controller: 'DownloadCtrl'
+    });
+
+    modalInstance.result.then(function(options) {
+      var downloadUrl = ['http://angular-ui.github.io/bootstrap/ui-bootstrap-'];
+      if (options.tpls) {
+        downloadUrl.push('tpls-');
+      }
+      downloadUrl.push(options.version);
+      if (options.minified) {
+        downloadUrl.push('.min');
+      }
+      downloadUrl.push('.js');
+
+      downloadFileFromUrl(downloadUrl.join(''));
     });
   };
 }
@@ -54,3 +79,19 @@ var SelectModulesCtrl = function($scope, $modalInstance, modules) {
     $modalInstance.dismiss();
   };
 };
+
+var DownloadCtrl = function($scope, $modalInstance) {
+  $scope.options = {
+    minified: true,
+    tpls: true
+  };
+  
+  $scope.download = function (version) {
+    $scope.options.version = version;
+    $modalInstance.close($scope.options);
+  };
+  
+  $scope.cancel = function () {
+    $modalInstance.dismiss();
+  };
+}

misc/demo/index.html

@@ -71,7 +71,7 @@ <h1>
 
             <p>
                 <a class="btn btn-outline-inverse btn-lg" href="https://github.com/angular-ui/bootstrap"><i class="icon-github"></i>Code on Github</a>
-                <a class="btn btn-outline-inverse btn-lg" href="https://github.com/angular-ui/bootstrap/tree/gh-pages">
+                <a class="btn btn-outline-inverse btn-lg" ng-click="showDownloadModal()">
                     <i class="glyphicon glyphicon-download-alt"></i> Download <small>(<%= pkg.version%>)</small>
                 </a>
                 <a class="btn btn-outline-inverse btn-lg" ng-click="showBuildModal()"><i class="glyphicon glyphicon-wrench"></i> Create a Build</a>
@@ -220,6 +220,37 @@ <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>
+<script type="text/ng-template" id="downloadModal.html">
+    <div class="modal-header"><h4 class="modal-title">Download Angular UI Bootstrap</h4></div>
+    <div class="modal-body">
+        <form class="form-horizontal">
+          <div class="form-group">
+            <label class="col-sm-3 control-label"><strong>Build</strong></label>
+            <div class="col-sm-9">
+              <span class="btn-group">
+                <button type="button" class="btn btn-default" ng-model="options.minified" btn-radio="true">Minified</button>
+                <button type="button" class="btn btn-default" ng-model="options.minified" btn-radio="false">Uncompressed</button>
+              </span>
+              <small class="help-block">Use <b>Minified</b> version in your deployed application. <b>Uncompressed</b> source code is useful only for debugging and development purpose.</small>
+            </div>
+          </div>
+          <div class="form-group">
+            <label class="col-sm-3 control-label"><strong>Include Templates</strong></label>
+            <div class="col-sm-9">
+              <span class="btn-group">
+                <button type="button" class="btn btn-default" ng-model="options.tpls" btn-radio="true">Yes</button>
+                <button type="button" class="btn btn-default" ng-model="options.tpls" btn-radio="false">No</button>
+              </span>
+              <small class="help-block">Whether you want to include the <i>default templates</i>, bundled with most of the directives. These templates are based on Twitter Bootstrap's markup and CSS.</small>
+            </div>
+          </div>
+        </form>
+    </div>
+    <div class="modal-footer">
+        <a class="btn btn-default" ng-click="cancel()">Cancel</a>
+        <a class="btn btn-primary" ng-click="download('<%= pkg.version%>')"><i class="glyphicon glyphicon-download-alt"></i> Download <%= pkg.version %></a>
+    </div>
+</script>
 <script type="text/ng-template" id="buildModal.html">
     <div class="modal-header">
       <h4>