chore: update angular-bootstrap-ui to 1.1.2

- use cdn for loading angular-bootstrap instead of hosting a copy ourselves
- add uib prefix to popover, modal and tab directives
- migrate custom unsafe html popover directive to uib-popover-html + $sce.trustAsHtml
- updating fixes broken right click in dropdowns in FF, see angular/angular.js#14024

package.json

@@ -6,4 +6,4 @@
     "protractor": "~1.5",
     "selenium-webdriver": "~2.40.0"
   }
-}
+}

src/index.html

@@ -47,11 +47,11 @@
             <li class="divider-vertical"></li>
             <li class="active"><a href="http://angularjs.org/"><i class="icon-home icon-white"></i> Home</a></li>
             <li class="divider-vertical"></li>
-            <li class="dropdown">
-              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+            <li class="dropdown" uib-dropdown>
+              <a href="#" class="dropdown-toggle"  uib-dropdown-toggle>
                 <i class="icon-eye-open icon-white"></i> Learn <b class="caret"></b>
               </a>
-              <ul class="dropdown-menu">
+              <ul class="dropdown-menu" uib-dropdown-menu>
                 <li class="disabled"><a href="">Home</a></li>
                 <li><a href="https://www.youtube.com/user/angularjs">Videos</a></li>
                 <li><a href="http://angular.codeschool.com/">Free Course</a></li>
@@ -62,11 +62,11 @@
               </ul>
             </li>
             <li class="divider-vertical"></li>
-            <li class="dropdown">
-              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+            <li class="dropdown" uib-dropdown>
+              <a href="#" class="dropdown-toggle" uib-dropdown-toggle>
                 <i class="icon-book icon-white"></i> Develop <b class="caret"></b>
               </a>
-              <ul class="dropdown-menu">
+              <ul class="dropdown-menu" uib-dropdown-menu>
                 <li><a href="http://docs.angularjs.org/tutorial">Tutorial</a></li>
                 <li><a href="http://docs.angularjs.org/guide">Developer Guide</a></li>
                 <li><a href="http://docs.angularjs.org/api">API Reference</a></li>
@@ -75,11 +75,11 @@
               </ul>
             </li>
             <li class="divider-vertical"></li>
-            <li class="dropdown">
-              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+            <li class="dropdown" uib-dropdown>
+              <a href="#" class="dropdown-toggle" uib-dropdown-toggle>
                 <i class="icon-comment icon-white"></i> Discuss <b class="caret"></b>
               </a>
-              <ul class="dropdown-menu">
+              <ul class="dropdown-menu" uib-dropdown-menu>
                 <li><a href="http://blog.angularjs.org">Blog</a></li>
                 <li><a href="http://groups.google.com/group/angular">Mailing List</a></li>
                 <li><a href="http://webchat.freenode.net/?channels=angularjs&uio=d4">Chat Room</a></li>
@@ -990,7 +990,7 @@ <h2>JavaScript Projects</h2>
   <script src="google-code-prettify/prettify.min.js"></script>
   <script src="js/homepage.js"></script>
   <script src="js/download-data.js"></script>
-  <script src="js/angular-ui-bootstrap.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.min.js"></script>
   <script src="//ajax.googleapis.com/ajax/libs/angularjs/${CDN_VERSION_1_5}/angular-resource.min.js"></script>
   <script src="//ajax.googleapis.com/ajax/libs/angularjs/${CDN_VERSION_1_5}/angular-route.min.js"></script>
   <script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>

src/js/homepage.js

@@ -216,10 +216,10 @@ angular.module('homepage', ['ngAnimate', 'ui.bootstrap', 'download-data'])
     };
   })
 
-  .directive('appSource', function(fetchCode, escape, $compile, $timeout, templateBuilder) {
+  .directive('appSource', function(fetchCode, escape, $compile, $timeout, templateBuilder, $sce) {
     return {
       terminal: true,
-      scope: true,
+      scope: {},
       link: function(scope, element, attrs) {
         var tabs = [],
             annotation = attrs.annotate && angular.fromJson(fetchCode(attrs.annotate)) || {};
@@ -251,19 +251,22 @@ angular.module('homepage', ['ngAnimate', 'ui.bootstrap', 'download-data'])
               counter = 0;
 
           angular.forEach(annotation[filename], function(text, key) {
+            counter++;
 
             text = text.replace('{{', '{{').replace('}}', '}}');
 
             var regexp = new RegExp('(\\W|^)(' + key.replace(/([\W\-])/g, '\\$1') + ')(\\W|$)');
 
+            scope['popover' + index + counter] = $sce.trustAsHtml(text);
+
             content = content.replace(regexp, function(_, before, token, after) {
-              token = "__" + (counter++) + "__";
+              token = "__" + (counter) + "__";
               popovers[token] =
                 '<span class="nocode"\n' +
                 '      popover-title="' + escape(key) + '"\n' +
-                '      popover-trigger="click"\n' +
+                '      popover-trigger="outsideClick"\n' +
                 '      popover-append-to-body="true"\n' +
-                '      popover-html-unsafe="' + escape(text) + '"><code>' + escape(key) + '</code>' +
+                '      uib-popover-html="popover' + index + counter + '"><code>' + escape(key) + '</code>' +
                 '</span>';
               return before + token + after;
             });
@@ -274,22 +277,21 @@ angular.module('homepage', ['ngAnimate', 'ui.bootstrap', 'download-data'])
           });
 
           tabs.push(
-            '<tab heading="' + (index ? filename : 'index.html')  + '">\n' +
+            '<uib-tab heading="' + (index ? filename : 'index.html')  + '">\n' +
             '  <pre class="prettyprint linenums nocode"><code>' + content +'</code></pre>\n' +
-            '</tab>\n'
+            '</uib-tab>\n'
           );
         });
 
         element.html(
-          '<tabset>' +
+          '<uib-tabset>' +
             tabs.join('') +
-          '</tabset>');
-        // element.find('[rel=popover]').popover().pulse();
+          '</uib-tabset>');
 
         // Compile up the HTML to get the directives to kick-in
         $compile(element.children())(scope);
         $timeout(function() {
-          var annotationElements = element.find('span[popover-html-unsafe]');
+          var annotationElements = element.find('span[uib-popover-html]');
           $compile(annotationElements)(scope);
         }, 0);
       }
@@ -368,23 +370,23 @@ angular.module('homepage', ['ngAnimate', 'ui.bootstrap', 'download-data'])
   .directive('hint', function() {
     return {
       template: '<em>Hint:</em> Click ' +
-          '<code class="nocode" popover-title="Hover" popover-trigger="click" popover-append-to-body="true"' +
-          'popover="Click highlighted areas in the code for explanations.">me</code>.'
+          '<code class="nocode" popover-title="Hover" popover-trigger="outsideClick" popover-append-to-body="true"' +
+          'uib-popover="Click highlighted areas in the code for explanations.">me</code>.'
     };
   })
 
-  .controller('AppController', function($scope, $modal, BRANCHES) {
+  .controller('AppController', function($scope, $uibModal, BRANCHES) {
     $scope.BRANCHES = BRANCHES;
 
     $scope.showDownloadModal = function() {
-      $modal.open({
+      $uibModal.open({
         templateUrl: 'partials/download-modal.html',
         windowClass: 'download-modal'
       });
     };
 
     $scope.showVideo = function(videoUrl) {
-      $modal.open({
+      $uibModal.open({
         templateUrl: 'partials/video-modal.html',
         windowClass: 'video-modal',
         controller: 'VideoController',
@@ -458,36 +460,6 @@ angular.module('homepage', ['ngAnimate', 'ui.bootstrap', 'download-data'])
 
 })
 
-
-// Angular UI Bootstrap provide some excellent directives, but the popover didn't allow for HTML content
-// The popoverHtmlUnsafe and popoverHtmlUnsafePopup implement this on top of the AngularUI Bootstrap's $tooltip service
-.directive( 'popoverHtmlUnsafePopup', function ($templateCache) {
-
-  $templateCache.put("template/popover/popover-html-unsafe-popup.html",
-    "<div class=\"popover {{placement}}\" ng-class=\"{ in: isOpen(), fade: animation() }\">\n" +
-    "  <div class=\"arrow\"></div>\n" +
-    "\n" +
-    "  <div class=\"popover-inner\">\n" +
-    "      <h3 class=\"popover-title\" ng-bind=\"title\" ng-show=\"title\"></h3>\n" +
-    "      <div class=\"popover-content\" bind-html-unsafe=\"content\"></div>\n" +
-    "  </div>\n" +
-    "</div>\n" +
-    "");
-
-  return {
-    restrict: 'EA',
-    replace: true,
-    scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&' },
-    templateUrl: 'template/popover/popover-html-unsafe-popup.html'
-  };
-})
-
-.directive( 'popoverHtmlUnsafe', [ '$compile', '$timeout', '$parse', '$window', '$tooltip', function ( $compile, $timeout, $parse, $window, $tooltip ) {
-  return $tooltip( 'popoverHtmlUnsafe', 'popover', 'click' );
-}])
-
-
-
 .run(function($rootScope, startPulse){
   $rootScope.version = angular.version;