Skip to content
This repository has been archived by the owner on Dec 1, 2023. It is now read-only.

Commit

Permalink
fix(tooltip): use safe $digest calls to ease controller usage
Browse files Browse the repository at this point in the history
  • Loading branch information
@mgcrea
mgcrea committed Jan 14, 2014
1 parent 59d3234 commit f8a92d8
Show file tree
Hide file tree
Showing 3 changed files with 64 additions and 15 deletions.
1 change: 1 addition & 0 deletions src/helpers/dimensions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,7 @@ angular.module('mgcrea.ngStrap.helpers.dimensions', [])
var offsetParent = function offsetParentElement(element) {
var docElement = element.ownerDocument;
var offsetParent = element.offsetParent || docElement;
if(nodeName(offsetParent, '#document')) return docElement.documentElement;
while(offsetParent && !nodeName(offsetParent, 'html') && fn.css(offsetParent, 'position') === 'static') {
offsetParent = offsetParent.offsetParent;
}
Expand Down
63 changes: 52 additions & 11 deletions src/tooltip/test/tooltip.spec.js
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,20 @@
'use strict';

describe('tooltip', function () {
describe('tooltip', function() {

var $compile, $templateCache, scope, sandboxEl;
var bodyEl = $('body'), sandboxEl;
var $compile, $templateCache, $tooltip, scope;

beforeEach(module('ngSanitize'));
beforeEach(module('mgcrea.ngStrap.tooltip'));

beforeEach(inject(function (_$rootScope_, _$compile_, _$templateCache_) {
beforeEach(inject(function (_$rootScope_, _$compile_, _$templateCache_, _$tooltip_) {
scope = _$rootScope_.$new();
sandboxEl = $('<div>').attr('id', 'sandbox').appendTo($('body'));
bodyEl.html('');
sandboxEl = $('<div>').attr('id', 'sandbox').appendTo(bodyEl);
$compile = _$compile_;
$templateCache = _$templateCache_;
$tooltip = _$tooltip_;
}));

afterEach(function() {
Expand All @@ -33,6 +36,9 @@ describe('tooltip', function () {
scope: {items: [{name: 'foo', tooltip: 'Hello Tooltip!'}]},
element: '<ul><li ng-repeat="item in items"><a title="{{item.tooltip}}" bs-tooltip>{{item.name}}</a></li></ul>'
},
'markup-ngClick-service': {
element: '<a ng-click="showTooltip()">click me</a>'
},
'options-animation': {
element: '<a data-animation="animation-flipX" bs-tooltip="tooltip">hover me</a>'
},
Expand Down Expand Up @@ -66,7 +72,7 @@ describe('tooltip', function () {

// Tests

describe('with default template', function () {
describe('with default template', function() {

it('should open on mouseenter', function() {
var elm = compileDirective('default');
Expand Down Expand Up @@ -103,10 +109,45 @@ describe('tooltip', function () {

});

describe('using service', function() {

it('should correctly open on next digest', function() {
var myTooltip = $tooltip(sandboxEl, templates['default'].scope.tooltip);
scope.$digest();
expect(bodyEl.children('.tooltip').length).toBe(0);
myTooltip.show();
expect(bodyEl.children('.tooltip').length).toBe(1);
myTooltip.hide();
expect(bodyEl.children('.tooltip').length).toBe(0);
});

it('should correctly be destroyed', function() {
var myTooltip = $tooltip(sandboxEl, templates['default'].scope.tooltip);
scope.$digest();
expect(bodyEl.children('.tooltip').length).toBe(0);
myTooltip.show();
expect(bodyEl.children('.tooltip').length).toBe(1);
myTooltip.destroy();
expect(bodyEl.children('.tooltip').length).toBe(0);
expect(bodyEl.children().length).toBe(1);
});

it('should correctly work with ngClick', function() {
var elm = compileDirective('markup-ngClick-service');
var myTooltip = $tooltip(sandboxEl, templates['default'].scope.tooltip);
scope.showTooltip = function() {
myTooltip.$promise.then(myTooltip.show);
};
expect(bodyEl.children('.tooltip').length).toBe(0);
angular.element(elm[0]).triggerHandler('click');
expect(bodyEl.children('.tooltip').length).toBe(1);
});

});

describe('options', function () {
describe('options', function() {

describe('animation', function () {
describe('animation', function() {

it('should default to `animation-fade` animation', function() {
var elm = compileDirective('default');
Expand All @@ -122,7 +163,7 @@ describe('tooltip', function () {

});

describe('placement', function () {
describe('placement', function() {

it('should default to `top` placement', function() {
var elm = compileDirective('default');
Expand All @@ -144,7 +185,7 @@ describe('tooltip', function () {

});

describe('trigger', function () {
describe('trigger', function() {

it('should support an alternative trigger', function() {
var elm = compileDirective('options-trigger');
Expand All @@ -157,7 +198,7 @@ describe('tooltip', function () {

});

describe('html', function () {
describe('html', function() {

it('should correctly compile inner content', function() {
var elm = compileDirective('options-html');
Expand All @@ -167,7 +208,7 @@ describe('tooltip', function () {

});

describe('template', function () {
describe('template', function() {

it('should support custom template', function() {
$templateCache.put('custom', '<div class="tooltip"><div class="tooltip-inner">foo: {{title}}</div></div>');
Expand Down
15 changes: 11 additions & 4 deletions src/tooltip/tooltip.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ angular.module('mgcrea.ngStrap.tooltip', ['mgcrea.ngStrap.helpers.dimensions'])
trigger: 'hover focus',
keyboard: false,
html: false,
show: false,
title: '',
type: '',
delay: 0
Expand All @@ -49,7 +50,7 @@ angular.module('mgcrea.ngStrap.tooltip', ['mgcrea.ngStrap.helpers.dimensions'])
// Common vars
var options = angular.extend({}, defaults, config);
$tooltip.$promise = $q.when($templateCache.get(options.template) || $http.get(options.template/*, {cache: true}*/));
var scope = $tooltip.$scope = options.scope.$new() || $rootScope.$new();
var scope = $tooltip.$scope = options.scope && options.scope.$new() || $rootScope.$new();
if(options.delay && angular.isString(options.delay)) {
options.delay = parseFloat(options.delay);
}
Expand Down Expand Up @@ -84,7 +85,6 @@ angular.module('mgcrea.ngStrap.tooltip', ['mgcrea.ngStrap.helpers.dimensions'])
template = trim.apply(template);
tipTemplate = template;
tipLinker = $compile(template);
// tipElement = tipLinker(scope);
$tooltip.init();
});

Expand All @@ -110,6 +110,13 @@ angular.module('mgcrea.ngStrap.tooltip', ['mgcrea.ngStrap.helpers.dimensions'])
}
}

// Options: show
if(options.show) {
scope.$$postDigest(function() {
$tooltip.show();
});
}

};

$tooltip.destroy = function() {
Expand Down Expand Up @@ -169,7 +176,7 @@ angular.module('mgcrea.ngStrap.tooltip', ['mgcrea.ngStrap.helpers.dimensions'])

$animate.enter(tipElement, parent, after, function() {});
$tooltip.$isShown = true;
scope.$digest();
scope.$$phase || scope.$digest();
requestAnimationFrame($tooltip.$applyPlacement);

// Bind events
Expand Down Expand Up @@ -202,7 +209,7 @@ angular.module('mgcrea.ngStrap.tooltip', ['mgcrea.ngStrap.helpers.dimensions'])
$tooltip.hide = function() {

$animate.leave(tipElement, function() {});
scope.$digest();
scope.$$phase || scope.$digest();
$tooltip.$isShown = false;

// Unbind events
Expand Down

0 comments on commit f8a92d8

Please sign in to comment.