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

feat(tooltip): add uib- prefix #4515

Closed
wants to merge 1 commit into from
Closed

feat(tooltip): add uib- prefix #4515

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions src/popover/docs/demo.html
View file
Open in desktop
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>
84 changes: 72 additions & 12 deletions src/popover/popover.js
View file
Open in desktop
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', {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think I would make this use the new tooltip.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the old popoverTemplate directive

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
View file
Open in desktop
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
View file
Open in desktop
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