From d8e7b71b1840e86d8bbb0216008f5f5d7ba3b3d2 Mon Sep 17 00:00:00 2001 From: Nathan Redding Date: Tue, 24 Jun 2014 13:26:05 -0400 Subject: [PATCH] feat(popover): Add popoverHtmlUnsafe directive. --- src/popover/docs/demo.html | 3 ++ src/popover/docs/demo.js | 1 + src/popover/docs/readme.md | 6 +++ src/popover/popover.js | 15 +++++- src/popover/test/popover.spec.js | 58 +++++++++++++++++++++++ src/tooltip/docs/readme.md | 2 +- template/popover/popover-html-unsafe.html | 8 ++++ 7 files changed, 91 insertions(+), 2 deletions(-) create mode 100644 template/popover/popover-html-unsafe.html diff --git a/src/popover/docs/demo.html b/src/popover/docs/demo.html index 8955b1918e..b980ac6a83 100644 --- a/src/popover/docs/demo.html +++ b/src/popover/docs/demo.html @@ -28,4 +28,7 @@

Triggers

Other

+

+ I can even contain HTML. Check me out! +

diff --git a/src/popover/docs/demo.js b/src/popover/docs/demo.js index 6cce89812b..3b68e173af 100644 --- a/src/popover/docs/demo.js +++ b/src/popover/docs/demo.js @@ -1,4 +1,5 @@ angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function ($scope) { $scope.dynamicPopover = 'Hello, World!'; $scope.dynamicPopoverTitle = 'Title'; + $scope.htmlPopover = 'I\'ve been made bold!'; }); diff --git a/src/popover/docs/readme.md b/src/popover/docs/readme.md index cbac5f3d26..ccc8895d7b 100644 --- a/src/popover/docs/readme.md +++ b/src/popover/docs/readme.md @@ -1,6 +1,12 @@ A lightweight, extensible directive for fancy popover creation. The popover directive supports multiple placements, optional transition animation, and more. +There are two versions of the popover: `popover` and `popover-html-unsafe`. The +former takes text only and will escape any HTML provided. The latter takes +whatever HTML is provided and displays it in a tooltip; it is called "unsafe" +because the HTML is not sanitized. *The user is responsible for ensuring the +content is safe to put into the DOM!* + Like the Bootstrap jQuery plugin, the popover **requires** the tooltip module. diff --git a/src/popover/popover.js b/src/popover/popover.js index 2bea0a3e10..2a6a42565a 100644 --- a/src/popover/popover.js +++ b/src/popover/popover.js @@ -16,4 +16,17 @@ angular.module( 'ui.bootstrap.popover', [ 'ui.bootstrap.tooltip' ] ) .directive( 'popover', [ '$tooltip', function ( $tooltip ) { return $tooltip( 'popover', 'popover', 'click' ); -}]); +}]) + +.directive( 'popoverHtmlUnsafePopup', function () { + return { + restrict: 'EA', + replace: true, + scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&' }, + templateUrl: 'template/popover/popover-html-unsafe.html' + }; +}) + +.directive( 'popoverHtmlUnsafe', [ '$tooltip', function ( $tooltip ) { + return $tooltip( 'popoverHtmlUnsafe', 'popover', 'click' ); +}]); \ No newline at end of file diff --git a/src/popover/test/popover.spec.js b/src/popover/test/popover.spec.js index 7e6f2b3970..5754f3cfb4 100644 --- a/src/popover/test/popover.spec.js +++ b/src/popover/test/popover.spec.js @@ -68,4 +68,62 @@ describe('popover', function() { })); }); +describe('popoverHtmlUnsafe', function() { + var elm, + elmBody, + scope, + elmScope; + + // load the popover code + beforeEach(module('ui.bootstrap.popover')); + + // load the template + beforeEach(module('template/popover/popover-html-unsafe.html')); + + beforeEach(inject(function($rootScope, $compile) { + scope = $rootScope; + scope.html = 'I say: Hello!'; + + elmBody = angular.element( + '
Selector Text
' + ); + + $compile(elmBody)(scope); + scope.$digest(); + elm = elmBody.find('span'); + elmScope = elm.scope(); + })); + + it('should not be open initially', inject(function() { + expect( elmScope.tt_isOpen ).toBe( false ); + + // We can only test *that* the popover-popup element wasn't created as the + // implementation is templated and replaced. + expect( elmBody.children().length ).toBe( 1 ); + })); + + it( 'should render html properly', inject( function () { + elm.trigger( 'click' ); + expect( elmBody.find('.popover-content').html() ).toBe( scope.html ); + })); + + + it('should open on click', inject(function() { + elm.trigger( 'click' ); + expect( elmScope.tt_isOpen ).toBe( true ); + + // We can only test *that* the popover-popup element was created as the + // implementation is templated and replaced. + expect( elmBody.children().length ).toBe( 2 ); + })); + + it('should close on second click', inject(function() { + elm.trigger( 'click' ); + elm.trigger( 'click' ); + expect( elmScope.tt_isOpen ).toBe( false ); + })); + +}); + + diff --git a/src/tooltip/docs/readme.md b/src/tooltip/docs/readme.md index e7e494f933..78d52c8d94 100644 --- a/src/tooltip/docs/readme.md +++ b/src/tooltip/docs/readme.md @@ -3,7 +3,7 @@ directive supports multiple placements, optional transition animation, and more. There are two versions of the tooltip: `tooltip` and `tooltip-html-unsafe`. The former takes text only and will escape any HTML provided. The latter takes -whatever HTML is provided and displays it in a tooltip; it called "unsafe" +whatever HTML is provided and displays it in a tooltip; it is called "unsafe" because the HTML is not sanitized. *The user is responsible for ensuring the content is safe to put into the DOM!* diff --git a/template/popover/popover-html-unsafe.html b/template/popover/popover-html-unsafe.html new file mode 100644 index 0000000000..64ea9dea75 --- /dev/null +++ b/template/popover/popover-html-unsafe.html @@ -0,0 +1,8 @@ +
+
+ +
+

+
+
+