Skip to content
This repository has been archived by the owner on Feb 26, 2024. It is now read-only.

Commit

Permalink
chore: update angular-bootstrap-ui to 1.1.2
Browse files Browse the repository at this point in the history 
- 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
  • Loading branch information
@Narretz
Narretz committed Feb 17, 2016
1 parent 2fc82a4 commit 051cde7
Show file tree
Hide file tree
Showing 3 changed files with 29 additions and 57 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,4 @@
"protractor": "~1.5",
"selenium-webdriver": "~2.40.0"
}
}
}
20 changes: 10 additions & 10 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
64 changes: 18 additions & 46 deletions src/js/homepage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)) || {};
Expand Down Expand Up @@ -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('{{', '&#123;&#123;').replace('}}', '&#125;&#125;');

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;
});
Expand All @@ -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);
}
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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;

Expand Down

0 comments on commit 051cde7

Please sign in to comment.