jquery + bootstrap js -> angular-ui bootstrap

Author: fredsa

angular-ui.yaml

@@ -0,0 +1,4 @@
+handlers:
+- url: /angular-ui
+  static_dir: app/lib/angular-ui/
+  secure: always

app.yaml

@@ -8,6 +8,7 @@ threadsafe: false
 
 includes:
 - angularjs.yaml
+- angular-ui.yaml
 - bootstrap.yaml
 - codemirror.yaml
 - playground.yaml

app/index.html

@@ -46,11 +46,12 @@
         </div>
       </div>
 
-      <div class="alert pagination-centered">
+      <!-- remove type attribute once https://github.com/angular-ui/bootstrap/pull/106 is fixed -->
+      <alert type='"unspecified"' class='pagination-centered'>
         Note: This is a shared public playground.
         Anyone can read, modify or delete your projects, files and data at any time.
         Your private source code and data are <em>not</em> safe here.
-      </div>
+      </alert>
 
       <div id="main">
         <div ng-view></div>
@@ -84,8 +85,7 @@
       <div class="screen" style="z-index: {{2147483647 - $index * 2 - 1}};"></div>
     </div>
 
-    <script src='/bootstrap/js/jquery.js'></script>
-    <script src='/bootstrap/js/bootstrap.js'></script>
+    <script src='/angular-ui/ui-bootstrap-tpls-0.1.0-SNAPSHOT.js'></script>
     <script src="/playground/js/app.js"></script>
     <script src="/playground/js/services.js"></script>
     <script src="/playground/js/controllers.js"></script>

app/js/app.js

@@ -1,10 +1,13 @@
 'use strict';
 
-angular.module('playgroundApp', ['playgroundApp.filters',
-                                 'playgroundApp.services',
-                                 'playgroundApp.directives'])
+angular.module('playgroundApp', [
+    'playgroundApp.filters',
+    'playgroundApp.services',
+    'playgroundApp.directives',
+    'ui.bootstrap',
+])
 
-.config(function($locationProvider, $routeProvider, $httpProvider) {
+.config(function($locationProvider, $routeProvider, $httpProvider, $dialogProvider) {
 
   $locationProvider.html5Mode(true);
 
@@ -23,4 +26,10 @@ angular.module('playgroundApp', ['playgroundApp.filters',
 
   $httpProvider.responseInterceptors.push('playgroundHttpInterceptor');
 
+  // TODO: test these defaults?
+  $dialogProvider.options({
+      backdropFade: true,
+      modalFade: true,
+  });
+
 })

app/js/controllers.js

@@ -104,7 +104,7 @@ function MainController($scope, $http, $window, $location, DoSerial) {
 }
 
 function ProjectController($scope, $browser, $http, $routeParams, $window,
-                           $log, DoSerial, DomElementById) {
+                           $dialog, $log, DoSerial, DomElementById) {
 
   // TODO: remove once file contents are returned in JSON response
   $scope.no_json_transform = function(data) { return data; };
@@ -240,36 +240,26 @@ function ProjectController($scope, $browser, $http, $routeParams, $window,
 */
   };
 
-  $scope.$on('new_file', function(evt, path) {
-    $scope.insert_path(path);
-  });
-
   $scope.prompt_new_file = function() {
-    $scope.$broadcast('prompt_new_file');
+    $dialog.dialog({
+        controller: 'NewFileController',
+        templateUrl: '/playground/new_file_modal.html',
+    })
+    .open().then(function(path) {
+      if (path) {
+        // remove leading and trailing slash(es)
+        path = path.replace(/^\/*(.*?)\/*$/, '$1')
+        $scope.insert_path(path);
+      }
+    });
   };
 
 }
 
-function NewFileController($scope, $log) {
-
-  // TODO: avoid DOM access
-  var new_file_modal = $('#new-file-modal');
-
-  $scope.$on('prompt_new_file', function() {
-    $scope.filename = '';
-    new_file_modal.modal('show');
-    // TODO: avoid DOM access
-    $('#new_filename')[0].focus();
-  });
-
-  $scope.create_file = function() {
-    // remove leading and trailing slash(es)
-    var path = $scope.filename.replace(/^\/*(.*?)\/*$/, '$1')
-    $scope.$emit('new_file', path);
-  }
+function NewFileController($scope, $log, dialog) {
 
-  $scope.close = function() {
-    new_file_modal.modal('hide');
+  $scope.close = function(path) {
+    dialog.close(path);
   }
 
 }

app/js/directives.js

@@ -6,6 +6,7 @@ angular.module('playgroundApp.directives', [])
 
 // TODO: DETERMINE how must of this we should test
 .directive('resizer', function(WrappedElementById) {
+
   var downx, downy, isdown, initialheight, elem;
   var dragDiv = WrappedElementById('drag-div');
 
@@ -44,4 +45,5 @@ angular.module('playgroundApp.directives', [])
       dragDiv.bind('mouseup', upfunc);
     });
   };
-});
+
+})