Skip to content
This repository was archived by the owner on Apr 4, 2025. It is now read-only.

Commit 1206c99

Browse files
committed
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
1 parent d008eab commit 1206c99

File tree

3 files changed

+29
-57
lines changed

3 files changed

+29
-57
lines changed

package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,4 @@
66
"protractor": "~1.5",
77
"selenium-webdriver": "~2.40.0"
88
}
9-
}
9+
}

src/index.html

+10-10
Original file line numberDiff line numberDiff line change
@@ -47,11 +47,11 @@
4747
<li class="divider-vertical"></li>
4848
<li class="active"><a href="http://angularjs.org/"><i class="icon-home icon-white"></i> Home</a></li>
4949
<li class="divider-vertical"></li>
50-
<li class="dropdown">
51-
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
50+
<li class="dropdown" uib-dropdown>
51+
<a href="#" class="dropdown-toggle" uib-dropdown-toggle>
5252
<i class="icon-eye-open icon-white"></i> Learn <b class="caret"></b>
5353
</a>
54-
<ul class="dropdown-menu">
54+
<ul class="dropdown-menu" uib-dropdown-menu>
5555
<li class="disabled"><a href="">Home</a></li>
5656
<li><a href="https://www.youtube.com/user/angularjs">Videos</a></li>
5757
<li><a href="http://angular.codeschool.com/">Free Course</a></li>
@@ -62,11 +62,11 @@
6262
</ul>
6363
</li>
6464
<li class="divider-vertical"></li>
65-
<li class="dropdown">
66-
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
65+
<li class="dropdown" uib-dropdown>
66+
<a href="#" class="dropdown-toggle" uib-dropdown-toggle>
6767
<i class="icon-book icon-white"></i> Develop <b class="caret"></b>
6868
</a>
69-
<ul class="dropdown-menu">
69+
<ul class="dropdown-menu" uib-dropdown-menu>
7070
<li><a href="http://docs.angularjs.org/tutorial">Tutorial</a></li>
7171
<li><a href="http://docs.angularjs.org/guide">Developer Guide</a></li>
7272
<li><a href="http://docs.angularjs.org/api">API Reference</a></li>
@@ -75,11 +75,11 @@
7575
</ul>
7676
</li>
7777
<li class="divider-vertical"></li>
78-
<li class="dropdown">
79-
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
78+
<li class="dropdown" uib-dropdown>
79+
<a href="#" class="dropdown-toggle" uib-dropdown-toggle>
8080
<i class="icon-comment icon-white"></i> Discuss <b class="caret"></b>
8181
</a>
82-
<ul class="dropdown-menu">
82+
<ul class="dropdown-menu" uib-dropdown-menu>
8383
<li><a href="http://blog.angularjs.org">Blog</a></li>
8484
<li><a href="http://groups.google.com/group/angular">Mailing List</a></li>
8585
<li><a href="http://webchat.freenode.net/?channels=angularjs&uio=d4">Chat Room</a></li>
@@ -990,7 +990,7 @@ <h2>JavaScript Projects</h2>
990990
<script src="google-code-prettify/prettify.min.js"></script>
991991
<script src="js/homepage.js"></script>
992992
<script src="js/download-data.js"></script>
993-
<script src="js/angular-ui-bootstrap.js"></script>
993+
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.min.js"></script>
994994
<script src="//ajax.googleapis.com/ajax/libs/angularjs/${CDN_VERSION_1_5}/angular-resource.min.js"></script>
995995
<script src="//ajax.googleapis.com/ajax/libs/angularjs/${CDN_VERSION_1_5}/angular-route.min.js"></script>
996996
<script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>

src/js/homepage.js

+18-46
Original file line numberDiff line numberDiff line change
@@ -216,10 +216,10 @@ angular.module('homepage', ['ngAnimate', 'ui.bootstrap', 'download-data'])
216216
};
217217
})
218218

219-
.directive('appSource', function(fetchCode, escape, $compile, $timeout, templateBuilder) {
219+
.directive('appSource', function(fetchCode, escape, $compile, $timeout, templateBuilder, $sce) {
220220
return {
221221
terminal: true,
222-
scope: true,
222+
scope: {},
223223
link: function(scope, element, attrs) {
224224
var tabs = [],
225225
annotation = attrs.annotate && angular.fromJson(fetchCode(attrs.annotate)) || {};
@@ -251,19 +251,22 @@ angular.module('homepage', ['ngAnimate', 'ui.bootstrap', 'download-data'])
251251
counter = 0;
252252

253253
angular.forEach(annotation[filename], function(text, key) {
254+
counter++;
254255

255256
text = text.replace('{{', '&#123;&#123;').replace('}}', '&#125;&#125;');
256257

257258
var regexp = new RegExp('(\\W|^)(' + key.replace(/([\W\-])/g, '\\$1') + ')(\\W|$)');
258259

260+
scope['popover' + index + counter] = $sce.trustAsHtml(text);
261+
259262
content = content.replace(regexp, function(_, before, token, after) {
260-
token = "__" + (counter++) + "__";
263+
token = "__" + (counter) + "__";
261264
popovers[token] =
262265
'<span class="nocode"\n' +
263266
' popover-title="' + escape(key) + '"\n' +
264-
' popover-trigger="click"\n' +
267+
' popover-trigger="outsideClick"\n' +
265268
' popover-append-to-body="true"\n' +
266-
' popover-html-unsafe="' + escape(text) + '"><code>' + escape(key) + '</code>' +
269+
' uib-popover-html="popover' + index + counter + '"><code>' + escape(key) + '</code>' +
267270
'</span>';
268271
return before + token + after;
269272
});
@@ -274,22 +277,21 @@ angular.module('homepage', ['ngAnimate', 'ui.bootstrap', 'download-data'])
274277
});
275278

276279
tabs.push(
277-
'<tab heading="' + (index ? filename : 'index.html') + '">\n' +
280+
'<uib-tab heading="' + (index ? filename : 'index.html') + '">\n' +
278281
' <pre class="prettyprint linenums nocode"><code>' + content +'</code></pre>\n' +
279-
'</tab>\n'
282+
'</uib-tab>\n'
280283
);
281284
});
282285

283286
element.html(
284-
'<tabset>' +
287+
'<uib-tabset>' +
285288
tabs.join('') +
286-
'</tabset>');
287-
// element.find('[rel=popover]').popover().pulse();
289+
'</uib-tabset>');
288290

289291
// Compile up the HTML to get the directives to kick-in
290292
$compile(element.children())(scope);
291293
$timeout(function() {
292-
var annotationElements = element.find('span[popover-html-unsafe]');
294+
var annotationElements = element.find('span[uib-popover-html]');
293295
$compile(annotationElements)(scope);
294296
}, 0);
295297
}
@@ -368,23 +370,23 @@ angular.module('homepage', ['ngAnimate', 'ui.bootstrap', 'download-data'])
368370
.directive('hint', function() {
369371
return {
370372
template: '<em>Hint:</em> Click ' +
371-
'<code class="nocode" popover-title="Hover" popover-trigger="click" popover-append-to-body="true"' +
372-
'popover="Click highlighted areas in the code for explanations.">me</code>.'
373+
'<code class="nocode" popover-title="Hover" popover-trigger="outsideClick" popover-append-to-body="true"' +
374+
'uib-popover="Click highlighted areas in the code for explanations.">me</code>.'
373375
};
374376
})
375377

376-
.controller('AppController', function($scope, $modal, BRANCHES) {
378+
.controller('AppController', function($scope, $uibModal, BRANCHES) {
377379
$scope.BRANCHES = BRANCHES;
378380

379381
$scope.showDownloadModal = function() {
380-
$modal.open({
382+
$uibModal.open({
381383
templateUrl: 'partials/download-modal.html',
382384
windowClass: 'download-modal'
383385
});
384386
};
385387

386388
$scope.showVideo = function(videoUrl) {
387-
$modal.open({
389+
$uibModal.open({
388390
templateUrl: 'partials/video-modal.html',
389391
windowClass: 'video-modal',
390392
controller: 'VideoController',
@@ -458,36 +460,6 @@ angular.module('homepage', ['ngAnimate', 'ui.bootstrap', 'download-data'])
458460

459461
})
460462

461-
462-
// Angular UI Bootstrap provide some excellent directives, but the popover didn't allow for HTML content
463-
// The popoverHtmlUnsafe and popoverHtmlUnsafePopup implement this on top of the AngularUI Bootstrap's $tooltip service
464-
.directive( 'popoverHtmlUnsafePopup', function ($templateCache) {
465-
466-
$templateCache.put("template/popover/popover-html-unsafe-popup.html",
467-
"<div class=\"popover {{placement}}\" ng-class=\"{ in: isOpen(), fade: animation() }\">\n" +
468-
" <div class=\"arrow\"></div>\n" +
469-
"\n" +
470-
" <div class=\"popover-inner\">\n" +
471-
" <h3 class=\"popover-title\" ng-bind=\"title\" ng-show=\"title\"></h3>\n" +
472-
" <div class=\"popover-content\" bind-html-unsafe=\"content\"></div>\n" +
473-
" </div>\n" +
474-
"</div>\n" +
475-
"");
476-
477-
return {
478-
restrict: 'EA',
479-
replace: true,
480-
scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&' },
481-
templateUrl: 'template/popover/popover-html-unsafe-popup.html'
482-
};
483-
})
484-
485-
.directive( 'popoverHtmlUnsafe', [ '$compile', '$timeout', '$parse', '$window', '$tooltip', function ( $compile, $timeout, $parse, $window, $tooltip ) {
486-
return $tooltip( 'popoverHtmlUnsafe', 'popover', 'click' );
487-
}])
488-
489-
490-
491463
.run(function($rootScope, startPulse){
492464
$rootScope.version = angular.version;
493465

0 commit comments

Comments
 (0)