Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

Commit

Permalink
feat(tooltip): add uib- prefix
Browse files Browse the repository at this point in the history
Closes #4515
  • Loading branch information
wesleycho authored and Foxandxss committed Oct 5, 2015
1 parent 9aea856 commit f8bc038
Show file tree
Hide file tree
Showing 18 changed files with 692 additions and 145 deletions.
20 changes: 10 additions & 10 deletions src/popover/docs/demo.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@ <h4>Dynamic</h4>
<label>Popup Template:</label>
<input type="text" ng-model="dynamicPopover.templateUrl" class="form-control">
</div>
<button popover="{{dynamicPopover.content}}" popover-title="{{dynamicPopover.title}}" type="button" class="btn btn-default">Dynamic Popover</button>
<button uib-popover="{{dynamicPopover.content}}" popover-title="{{dynamicPopover.title}}" type="button" class="btn btn-default">Dynamic Popover</button>

<button popover-template="dynamicPopover.templateUrl" popover-title="{{dynamicPopover.title}}" type="button" class="btn btn-default">Popover With Template</button>
<button uib-popover-template="dynamicPopover.templateUrl" popover-title="{{dynamicPopover.title}}" type="button" class="btn btn-default">Popover With Template</button>

<script type="text/ng-template" id="myPopoverTemplate.html">
<div>{{dynamicPopover.content}}</div>
Expand All @@ -25,20 +25,20 @@ <h4>Dynamic</h4>
</script>
<hr />
<h4>Positional</h4>
<button popover-placement="top" popover="On the Top!" type="button" class="btn btn-default">Top</button>
<button popover-placement="left" popover="On the Left!" type="button" class="btn btn-default">Left</button>
<button popover-placement="right" popover="On the Right!" type="button" class="btn btn-default">Right</button>
<button popover-placement="bottom" popover="On the Bottom!" type="button" class="btn btn-default">Bottom</button>
<button popover-placement="top" uib-popover="On the Top!" type="button" class="btn btn-default">Top</button>
<button popover-placement="left" uib-popover="On the Left!" type="button" class="btn btn-default">Left</button>
<button popover-placement="right" uib-popover="On the Right!" type="button" class="btn btn-default">Right</button>
<button popover-placement="bottom" uib-popover="On the Bottom!" type="button" class="btn btn-default">Bottom</button>

<hr />
<h4>Triggers</h4>
<p>
<button popover="I appeared on mouse enter!" popover-trigger="mouseenter" type="button" class="btn btn-default">Mouseenter</button>
<button uib-popover="I appeared on mouse enter!" popover-trigger="mouseenter" type="button" class="btn btn-default">Mouseenter</button>
</p>
<input type="text" value="Click me!" popover="I appeared on focus! Click away and I'll vanish..." popover-trigger="focus" class="form-control">
<input type="text" value="Click me!" uib-popover="I appeared on focus! Click away and I'll vanish..." popover-trigger="focus" class="form-control">

<hr />
<h4>Other</h4>
<button Popover-animation="true" popover="I fade in and out!" type="button" class="btn btn-default">fading</button>
<button popover="I have a title!" popover-title="The title." type="button" class="btn btn-default">title</button>
<button popover-animation="true" uib-popover="I fade in and out!" type="button" class="btn btn-default">fading</button>
<button uib-popover="I have a title!" popover-title="The title." type="button" class="btn btn-default">title</button>
</div>
10 changes: 5 additions & 5 deletions src/popover/docs/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@ directive supports multiple placements, optional transition animation, and more.
Like the Bootstrap jQuery plugin, the popover **requires** the tooltip
module.

There are two versions of the popover: `popover` and `popover-template`:
There are two versions of the popover: `uib-popover` and `uib-popover-template`:

- `popover` takes text only and will escape any HTML provided for the popover
- `uib-popover` takes text only and will escape any HTML provided for the popover
body.
- `popover-html` takes an expression that evaluates to an html string. *The user is responsible for ensuring the
- `uib-popover-html` takes an expression that evaluates to an html string. *The user is responsible for ensuring the
content is safe to put into the DOM!*
- `popover-template` takes text that specifies the location of a template to
- `uib-popover-template` takes text that specifies the location of a template to
use for the popover body. Note that this needs to be wrapped in a tag.

The popover directives provides several optional attributes to control how it
Expand Down Expand Up @@ -40,7 +40,7 @@ $tooltipProvider. See the [tooltip](#tooltip) section for more information.
For Safari 7+ support, if you want to use **focus** `popover-trigger`, you need to use an anchor tag with a tab index. For example:

```
<a tabindex="0" popover="Test" popover-trigger="focus" class="btn btn-default">
<a tabindex="0" uib-popover="Test" popover-trigger="focus" class="btn btn-default">
Click Me
</a>
```
84 changes: 72 additions & 12 deletions src/popover/popover.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,48 +3,108 @@
* function, placement as a function, inside, support for more triggers than
* just mouse enter/leave, and selector delegatation.
*/
angular.module( 'ui.bootstrap.popover', ['ui.bootstrap.tooltip'])
angular.module('ui.bootstrap.popover', ['ui.bootstrap.tooltip'])

.directive('popoverTemplatePopup', function() {
.directive('uibPopoverTemplatePopup', function() {
return {
restrict: 'EA',
replace: true,
scope: { title: '@', contentExp: '&', placement: '@', popupClass: '@', animation: '&', isOpen: '&',
originScope: '&' },
templateUrl: 'template/popover/popover-template.html'
};
})

.directive('popoverTemplate', ['$tooltip', function($tooltip) {
return $tooltip('popoverTemplate', 'popover', 'click', {
.directive('uibPopoverTemplate', ['$uibTooltip', function($uibTooltip) {
return $uibTooltip('uibPopoverTemplate', 'popover', 'click', {
useContentExp: true
});
}])

.directive('popoverHtmlPopup', function() {
.directive('uibPopoverHtmlPopup', function() {
return {
restrict: 'EA',
replace: true,
scope: { contentExp: '&', title: '@', placement: '@', popupClass: '@', animation: '&', isOpen: '&' },
templateUrl: 'template/popover/popover-html.html'
};
})

.directive('popoverHtml', ['$tooltip', function($tooltip) {
return $tooltip( 'popoverHtml', 'popover', 'click', {
.directive('uibPopoverHtml', ['$uibTooltip', function($uibTooltip) {
return $uibTooltip('uibPopoverHtml', 'popover', 'click', {
useContentExp: true
});
}])

.directive('popoverPopup', function() {
.directive('uibPopoverPopup', function() {
return {
restrict: 'EA',
replace: true,
scope: { title: '@', content: '@', placement: '@', popupClass: '@', animation: '&', isOpen: '&' },
templateUrl: 'template/popover/popover.html'
};
})

.directive('uibPopover', ['$uibTooltip', function($uibTooltip) {
return $uibTooltip('uibPopover', 'popover', 'click');
}]);

/* Deprecated popover below */

angular.module('ui.bootstrap.popover')

.value('$popoverSuppressWarning', false)

.directive('popoverTemplatePopup', ['$log', '$popoverSuppressWarning', function($log, $popoverSuppressWarning) {
return {
replace: true,
scope: { title: '@', contentExp: '&', placement: '@', popupClass: '@', animation: '&', isOpen: '&',
originScope: '&' },
templateUrl: 'template/popover/popover-template.html',
link: function() {
if (!$popoverSuppressWarning) {
$log.warn('popover-template-popup is now deprecated. Use uib-popover-template-popup instead.');
}
}
};
}])

.directive('popoverTemplate', ['$tooltip', function($tooltip) {
return $tooltip('popoverTemplate', 'popover', 'click', {
useContentExp: true
});
}])

.directive('popoverHtmlPopup', ['$log', '$popoverSuppressWarning', function($log, $popoverSuppressWarning) {
return {
replace: true,
scope: { contentExp: '&', title: '@', placement: '@', popupClass: '@', animation: '&', isOpen: '&' },
templateUrl: 'template/popover/popover-html.html',
link: function() {
if (!$popoverSuppressWarning) {
$log.warn('popover-html-popup is now deprecated. Use uib-popover-html-popup instead.');
}
}
};
}])

.directive('popoverHtml', ['$tooltip', function($tooltip) {
return $tooltip('popoverHtml', 'popover', 'click', {
useContentExp: true
});
}])

.directive('popoverPopup', ['$log', '$popoverSuppressWarning', function($log, $popoverSuppressWarning) {
return {
replace: true,
scope: { title: '@', content: '@', placement: '@', popupClass: '@', animation: '&', isOpen: '&' },
templateUrl: 'template/popover/popover.html',
link: function() {
if (!$popoverSuppressWarning) {
$log.warn('popover-popup is now deprecated. Use uib-popover-popup instead.');
}
}
};
}])

.directive('popover', ['$tooltip', function($tooltip) {
return $tooltip( 'popover', 'popover', 'click' );

return $tooltip('popover', 'popover', 'click');
}]);
71 changes: 66 additions & 5 deletions src/popover/test/popover-html.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ describe('popover', function() {

beforeEach(inject(function($rootScope, $compile, $sce) {
elmBody = angular.element(
'<div><span popover-html="template">Selector Text</span></div>'
'<div><span uib-popover-html="template">Selector Text</span></div>'
);

scope = $rootScope;
Expand Down Expand Up @@ -100,7 +100,7 @@ describe('popover', function() {
};

elmBody = angular.element(
'<div><input popover-html="template" ng-click="click()" popover-trigger="mouseenter"/></div>'
'<div><input uib-popover-html="template" ng-click="click()" popover-trigger="mouseenter"/></div>'
);
$compile(elmBody)(scope);
scope.$digest();
Expand All @@ -127,7 +127,7 @@ describe('popover', function() {

it('should popup without animate class when animation disabled', inject(function($compile) {
elmBody = angular.element(
'<div><span popover-html="template" popover-animation="false">Selector Text</span></div>'
'<div><span uib-popover-html="template" popover-animation="false">Selector Text</span></div>'
);

$compile(elmBody)(scope);
Expand All @@ -146,7 +146,7 @@ describe('popover', function() {
describe('placement', function() {
it('can specify an alternative, valid placement', inject(function($compile) {
elmBody = angular.element(
'<div><span popover-html="template" popover-placement="left">Trigger here</span></div>'
'<div><span uib-popover-html="template" popover-placement="left">Trigger here</span></div>'
);
$compile(elmBody)(scope);
scope.$digest();
Expand All @@ -168,7 +168,7 @@ describe('popover', function() {
describe('class', function() {
it('can specify a custom class', inject(function($compile) {
elmBody = angular.element(
'<div><span popover-html="template" popover-class="custom">Trigger here</span></div>'
'<div><span uib-popover-html="template" popover-class="custom">Trigger here</span></div>'
);
$compile(elmBody)(scope);
scope.$digest();
Expand All @@ -187,3 +187,64 @@ describe('popover', function() {
});
});
});

/* Deprecation tests below */

describe('popover deprecation', function() {
beforeEach(module('ui.bootstrap.popover'));
beforeEach(module('template/popover/popover-html.html'));

var elm, elmBody, elmScope, tooltipScope;

function trigger(element, evt) {
evt = new Event(evt);

element[0].dispatchEvent(evt);
element.scope().$$childTail.$digest();
}

it('should suppress warning', function() {
module(function($provide) {
$provide.value('$popoverSuppressWarning', true);
$provide.value('$tooltipSuppressWarning', true);
});

inject(function($compile, $log, $rootScope, $sce) {
spyOn($log, 'warn');

$rootScope.html = 'I say: <strong class="hello">Hello!</strong>';
$rootScope.safeHtml = $sce.trustAsHtml($rootScope.html);
elmBody = angular.element('<div><span popover-html="safeHtml">Selector Text</span></div>');
$compile(elmBody)($rootScope);
$rootScope.$digest();
elm = elmBody.find('span');
elmScope = elm.scope();
tooltipScope = elmScope.$$childTail;

trigger(elm, 'mouseenter');
tooltipScope.$digest();

expect($log.warn.calls.count()).toBe(0);
});
});

it('should give warning by default', inject(function($compile, $log, $rootScope, $sce) {
spyOn($log, 'warn');

$rootScope.html = 'I say: <strong class="hello">Hello!</strong>';
$rootScope.safeHtml = $sce.trustAsHtml($rootScope.html);
elmBody = angular.element('<div><span popover-html="safeHtml">Selector Text</span></div>');
$compile(elmBody)($rootScope);
$rootScope.$digest();
elm = elmBody.find('span');
elmScope = elm.scope();
tooltipScope = elmScope.$$childTail;

elm.trigger('click');
tooltipScope.$digest();

expect($log.warn.calls.count()).toBe(2);
expect($log.warn.calls.argsFor(0)).toEqual(['$tooltip is now deprecated. Use $uibTooltip instead.']);
expect($log.warn.calls.argsFor(1)).toEqual(['popover-html-popup is now deprecated. Use uib-popover-html-popup instead.']);
}));
});
59 changes: 56 additions & 3 deletions src/popover/test/popover-template.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ describe('popover template', function() {

beforeEach(inject(function($rootScope, $compile) {
elmBody = angular.element(
'<div><span popover-template="templateUrl">Selector Text</span></div>'
'<div><span uib-popover-template="templateUrl">Selector Text</span></div>'
);

scope = $rootScope;
Expand Down Expand Up @@ -84,7 +84,7 @@ describe('popover template', function() {
describe('placement', function() {
it('can specify an alternative, valid placement', inject(function($compile) {
elmBody = angular.element(
'<div><span popover-template="templateUrl" popover-placement="left">Trigger</span></div>'
'<div><span uib-popover-template="templateUrl" popover-placement="left">Trigger</span></div>'
);
$compile(elmBody)(scope);
scope.$digest();
Expand All @@ -106,7 +106,7 @@ describe('popover template', function() {
describe('class', function() {
it('can specify a custom class', inject(function($compile) {
elmBody = angular.element(
'<div><span popover-template="templateUrl" popover-class="custom">Trigger</span></div>'
'<div><span uib-popover-template="templateUrl" popover-class="custom">Trigger</span></div>'
);
$compile(elmBody)(scope);
scope.$digest();
Expand All @@ -125,3 +125,56 @@ describe('popover template', function() {
});
});
});

/* Deprecation tests below */

describe('popover template deprecation', function() {
beforeEach(module('ui.bootstrap.popover'));
beforeEach(module('template/popover/popover.html'));
beforeEach(module('template/popover/popover-template.html'));

var elm, elmBody, elmScope, tooltipScope;

it('should suppress warning', function() {
module(function($provide) {
$provide.value('$popoverSuppressWarning', true);
$provide.value('$tooltipSuppressWarning', true);
});

inject(function($compile, $log, $rootScope, $templateCache) {
spyOn($log, 'warn');
$templateCache.put('myUrl', [200, '<span>{{ myTemplateText }}</span>', {}]);
$rootScope.templateUrl = 'myUrl';

elmBody = angular.element('<div><span popover-template="templateUrl">Selector Text</span></div>');
$compile(elmBody)($rootScope);
$rootScope.$digest();
elm = elmBody.find('span');
elmScope = elm.scope();
tooltipScope = elmScope.$$childTail;

elm.trigger('click');
tooltipScope.$digest();
expect($log.warn.calls.count()).toBe(0);
});
});

it('should give warning by default', inject(function($compile, $log, $rootScope, $templateCache) {
spyOn($log, 'warn');
$templateCache.put('myUrl', [200, '<span>{{ myTemplateText }}</span>', {}]);
$rootScope.templateUrl = 'myUrl';

elmBody = angular.element('<div><span popover-template="templateUrl">Selector Text</span></div>');
$compile(elmBody)($rootScope);
elm = elmBody.find('span');
elmScope = elm.scope();
tooltipScope = elmScope.$$childTail;

elm.trigger('click');
tooltipScope.$digest();

expect($log.warn.calls.count()).toBe(2);
expect($log.warn.calls.argsFor(0)).toEqual(['$tooltip is now deprecated. Use $uibTooltip instead.']);
expect($log.warn.calls.argsFor(1)).toEqual(['popover-template-popup is now deprecated. Use uib-popover-template-popup instead.']);
}));
});
Loading

0 comments on commit f8bc038

Please sign in to comment.