-
-
+
+
![]()
-
-
+
+
Slide {{slide.id}}
{{slide.text}}
diff --git a/src/carousel/docs/demo.js b/src/carousel/docs/demo.js
index 30bf8455e9..79dd322dc6 100644
--- a/src/carousel/docs/demo.js
+++ b/src/carousel/docs/demo.js
@@ -8,7 +8,7 @@ angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function ($sc
$scope.addSlide = function() {
var newWidth = 600 + slides.length + 1;
slides.push({
- image: 'http://lorempixel.com/' + newWidth + '/300',
+ image: '//unsplash.it/' + newWidth + '/300',
text: ['Nice image','Awesome photograph','That is so cool','I love that'][slides.length % 4],
id: currIndex++
});
diff --git a/src/carousel/test/carousel.spec.js b/src/carousel/test/carousel.spec.js
index e43ce5f6dd..87b586dbd4 100644
--- a/src/carousel/test/carousel.spec.js
+++ b/src/carousel/test/carousel.spec.js
@@ -1,17 +1,5 @@
describe('carousel', function() {
- beforeEach(module('ui.bootstrap.carousel', function($compileProvider, $provide) {
- angular.forEach(['ngSwipeLeft', 'ngSwipeRight'], makeMock);
- function makeMock(name) {
- $provide.value(name + 'Directive', []); //remove existing directive if it exists
- $compileProvider.directive(name, function() {
- return function(scope, element, attr) {
- element.on(name, function() {
- scope.$apply(attr[name]);
- });
- };
- });
- }
- }));
+ beforeEach(module('ui.bootstrap.carousel'));
beforeEach(module('ngAnimateMock'));
beforeEach(module('uib/template/carousel/carousel.html', 'uib/template/carousel/slide.html'));
@@ -36,11 +24,11 @@ describe('carousel', function() {
{content: 'three', index: 2}
];
elm = $compile(
- '' +
- '' +
+ '' +
- ' '
+ '' +
- '' +
+ '' +
- '' +
+ '' +
- '' +
+ '' +
- '' +
+ '' +
- '' +
+ '
diff --git a/src/datepicker/docs/readme.md b/src/datepicker/docs/readme.md index e46d00f47b..d1928e272d 100644 --- a/src/datepicker/docs/readme.md +++ b/src/datepicker/docs/readme.md @@ -104,6 +104,11 @@ Apart from the previous settings, to configure the uib-datepicker you need to cr _(Default: `day`)_ - Sets a lower limit for mode. + * `monthColumns` + C + _(Default: `3`)_ - + Number of columns displayed in month selection. + * `ngModelOptions` C _(Default: `null`)_ - @@ -123,7 +128,7 @@ Apart from the previous settings, to configure the uib-datepicker you need to cr C *(Default: `$locale.DATETIME_FORMATS.FIRSTDAYOFWEEK`)* - Starting day of the week from 0-6 (0=Sunday, ..., 6=Saturday). - + * `yearRows` C _(Default: `4`)_ - diff --git a/src/datepicker/test/datepicker.spec.js b/src/datepicker/test/datepicker.spec.js index 1a1e06aa62..8dd924c8d8 100644 --- a/src/datepicker/test/datepicker.spec.js +++ b/src/datepicker/test/datepicker.spec.js @@ -26,8 +26,12 @@ describe('datepicker', function() { }); })); + function getTitleCell() { + return element.find('th').eq(1); + } + function getTitleButton() { - return element.find('th').eq(1).find('button').first(); + return getTitleCell().find('button').first(); } function getTitle() { @@ -155,7 +159,7 @@ describe('datepicker', function() { $scope.options = { minDate: '1984-01-01' }; - element = $compile('baz
');
- element = $compile('' +
+ '
'
)(scope);
scope.interval = 5000;
scope.nopause = undefined;
@@ -60,19 +48,19 @@ describe('carousel', function() {
it('should allow overriding of the carousel template', function() {
$templateCache.put('foo/bar.html', '' +
'{{slide.content}}' +
- '' +
- ''
+ '
' +
+ 'foo
');
- elm = $compile('foo
');
});
it('should allow overriding of the slide template', function() {
$templateCache.put('foo/bar.html', '');
elm = $compile(
- '' +
+ '' +
+ '
'
)(scope);
$rootScope.$digest();
@@ -101,11 +89,11 @@ describe('carousel', function() {
it('should stop cycling slides forward when noWrap is truthy', function () {
elm = $compile(
- '' +
+ '
'
)(scope);
scope.noWrap = true;
@@ -124,11 +112,11 @@ describe('carousel', function() {
it('should stop cycling slides backward when noWrap is truthy', function () {
elm = $compile(
- '' +
'{{slide.content}}' +
- '' +
- ''
+ '
' +
+ '' +
+ '
'
)(scope);
scope.noWrap = true;
@@ -147,11 +135,11 @@ describe('carousel', function() {
scope.slides = [{active:false,content:'one'}];
scope.$apply();
elm = $compile(
- '' +
'{{slide.content}}' +
- '' +
- ''
+ '
' +
+ '' +
+ '
'
)(scope);
var indicators = elm.find('ol.carousel-indicators > li');
expect(indicators.length).toBe(0);
@@ -228,20 +216,6 @@ describe('carousel', function() {
testSlideActive(0);
});
- describe('swiping', function() {
- it('should go next on swipeLeft', function() {
- testSlideActive(0);
- elm.triggerHandler('ngSwipeLeft');
- testSlideActive(1);
- });
-
- it('should go prev on swipeRight', function() {
- testSlideActive(0);
- elm.triggerHandler('ngSwipeRight');
- testSlideActive(2);
- });
- });
-
it('should select a slide when clicking on slide indicators', function () {
var indicators = elm.find('ol.carousel-indicators > li');
indicators.eq(1).click();
@@ -269,7 +243,7 @@ describe('carousel', function() {
});
it('should bind the content to slides', function() {
- var contents = elm.find('div.item');
+ var contents = elm.find('div.item [ng-transclude]');
expect(contents.length).toBe(3);
expect(contents.eq(0).text()).toBe('one');
@@ -343,7 +317,7 @@ describe('carousel', function() {
{content:'new3', index: 6}
];
scope.$apply();
- var contents = elm.find('div.item');
+ var contents = elm.find('div.item [ng-transclude]');
expect(contents.length).toBe(3);
expect(contents.eq(0).text()).toBe('new1');
expect(contents.eq(1).text()).toBe('new2');
@@ -441,11 +415,11 @@ describe('carousel', function() {
{content: 'three', id: 2}
];
elm = $compile(
- '' +
'{{slide.content}}' +
- '' +
- ''
+ '
' +
+ '' +
+ '
'
)(scope);
scope.$apply();
});
@@ -465,7 +439,7 @@ describe('carousel', function() {
scope.slides[1].id = 2;
scope.slides[2].id = 1;
scope.$apply();
- var contents = elm.find('div.item');
+ var contents = elm.find('div.item [ng-transclude]');
expect(contents.length).toBe(3);
expect(contents.eq(0).text()).toBe('three');
expect(contents.eq(1).text()).toBe('two');
@@ -491,7 +465,7 @@ describe('carousel', function() {
scope.slides[2].id = 4;
scope.slides.push({content:'four', id: 5});
scope.$apply();
- var contents = elm.find('div.item');
+ var contents = elm.find('div.item [ng-transclude]');
expect(contents.length).toBe(4);
expect(contents.eq(0).text()).toBe('two');
expect(contents.eq(1).text()).toBe('one');
@@ -503,7 +477,7 @@ describe('carousel', function() {
testSlideActive(1);
scope.slides.splice(1, 1);
scope.$apply();
- var contents = elm.find('div.item');
+ var contents = elm.find('div.item [ng-transclude]');
expect(contents.length).toBe(2);
expect(contents.eq(0).text()).toBe('three');
expect(contents.eq(1).text()).toBe('one');
@@ -583,7 +557,7 @@ describe('carousel', function() {
$templateCache.put('uib/template/carousel/carousel.html', '' +
'{{slide.content}}' +
- '' +
- ''
+ '
' +
+ '{{carousel.text}}
');
var scope = $rootScope.$new();
- var elm = $compile('foo
');
}));
});
@@ -605,11 +579,11 @@ describe('carousel', function() {
{active:false,content:'three'}
];
var elm = $compile(
- '' +
+ '
'
)(scope);
$rootScope.$digest();
diff --git a/src/collapse/collapse.js b/src/collapse/collapse.js
index cafd93a3ea..7e605b641d 100644
--- a/src/collapse/collapse.js
+++ b/src/collapse/collapse.js
@@ -5,16 +5,42 @@ angular.module('ui.bootstrap.collapse', [])
return {
link: function(scope, element, attrs) {
var expandingExpr = $parse(attrs.expanding),
- expandedExpr = $parse(attrs.expanded),
- collapsingExpr = $parse(attrs.collapsing),
- collapsedExpr = $parse(attrs.collapsed);
+ expandedExpr = $parse(attrs.expanded),
+ collapsingExpr = $parse(attrs.collapsing),
+ collapsedExpr = $parse(attrs.collapsed),
+ horizontal = false,
+ css = {},
+ cssTo = {};
- if (!scope.$eval(attrs.uibCollapse)) {
- element.addClass('in')
- .addClass('collapse')
- .attr('aria-expanded', true)
- .attr('aria-hidden', false)
- .css({height: 'auto'});
+ init();
+
+ function init() {
+ horizontal = !!('horizontal' in attrs);
+ if (horizontal) {
+ css = {
+ width: ''
+ };
+ cssTo = {width: '0'};
+ } else {
+ css = {
+ height: ''
+ };
+ cssTo = {height: '0'};
+ }
+ if (!scope.$eval(attrs.uibCollapse)) {
+ element.addClass('in')
+ .addClass('collapse')
+ .attr('aria-expanded', true)
+ .attr('aria-hidden', false)
+ .css(css);
+ }
+ }
+
+ function getScrollFromElement(element) {
+ if (horizontal) {
+ return {width: element.scrollWidth + 'px'};
+ }
+ return {height: element.scrollHeight + 'px'};
}
function expand() {
@@ -33,20 +59,26 @@ angular.module('ui.bootstrap.collapse', [])
$animateCss(element, {
addClass: 'in',
easing: 'ease',
- to: { height: element[0].scrollHeight + 'px' }
+ css: {
+ overflow: 'hidden'
+ },
+ to: getScrollFromElement(element[0])
}).start()['finally'](expandDone);
} else {
$animate.addClass(element, 'in', {
- to: { height: element[0].scrollHeight + 'px' }
+ css: {
+ overflow: 'hidden'
+ },
+ to: getScrollFromElement(element[0])
}).then(expandDone);
}
- });
+ }, angular.noop);
}
function expandDone() {
element.removeClass('collapsing')
.addClass('collapse')
- .css({height: 'auto'});
+ .css(css);
expandedExpr(scope);
}
@@ -58,10 +90,10 @@ angular.module('ui.bootstrap.collapse', [])
$q.resolve(collapsingExpr(scope))
.then(function() {
element
- // IMPORTANT: The height must be set before adding "collapsing" class.
- // Otherwise, the browser attempts to animate from height 0 (in
- // collapsing class) to the given height here.
- .css({height: element[0].scrollHeight + 'px'})
+ // IMPORTANT: The width must be set before adding "collapsing" class.
+ // Otherwise, the browser attempts to animate from width 0 (in
+ // collapsing class) to the given width here.
+ .css(getScrollFromElement(element[0]))
// initially all panel collapse have the collapse class, this removal
// prevents the animation from jumping to collapsed state
.removeClass('collapse')
@@ -72,18 +104,18 @@ angular.module('ui.bootstrap.collapse', [])
if ($animateCss) {
$animateCss(element, {
removeClass: 'in',
- to: {height: '0'}
+ to: cssTo
}).start()['finally'](collapseDone);
} else {
$animate.removeClass(element, 'in', {
- to: {height: '0'}
+ to: cssTo
}).then(collapseDone);
}
- });
+ }, angular.noop);
}
function collapseDone() {
- element.css({height: '0'}); // Required so that collapse works when animation is disabled
+ element.css(cssTo); // Required so that collapse works when animation is disabled
element.removeClass('collapsing')
.addClass('collapse');
collapsedExpr(scope);
diff --git a/src/collapse/docs/demo.html b/src/collapse/docs/demo.html
index 462bda3ba0..f5e06e7fbc 100644
--- a/src/collapse/docs/demo.html
+++ b/src/collapse/docs/demo.html
@@ -1,7 +1,40 @@
+
' +
'{{slide.content}}' +
- '' +
- ''
+ '
' +
+ '
-
+
+
+
+
+
+
diff --git a/src/collapse/docs/demo.js b/src/collapse/docs/demo.js
index 897eecaf58..f685290001 100644
--- a/src/collapse/docs/demo.js
+++ b/src/collapse/docs/demo.js
@@ -1,3 +1,5 @@
angular.module('ui.bootstrap.demo').controller('CollapseDemoCtrl', function ($scope) {
+ $scope.isNavCollapsed = true;
$scope.isCollapsed = false;
+ $scope.isCollapsedHorizontal = false;
});
diff --git a/src/collapse/docs/readme.md b/src/collapse/docs/readme.md
index 60237b9952..5cdacfd3d0 100644
--- a/src/collapse/docs/readme.md
+++ b/src/collapse/docs/readme.md
@@ -28,3 +28,10 @@
_(Default: `false`)_ -
Whether the element should be collapsed or not.
+* `horizontal`
+ $ -
+ An optional attribute that permit to collapse horizontally.
+
+### Known Issues
+
+When using the `horizontal` attribute with this directive, CSS can reflow as the collapse element goes from `0px` to its desired end width, which can result in height changes. This can cause animations to not appear to run. The best way around this is to set a fixed height via CSS on the horizontal collapse element so that this situation does not occur, and so the animation can run as expected.
diff --git a/src/collapse/test/collapseHorizontally.spec.js b/src/collapse/test/collapseHorizontally.spec.js
new file mode 100644
index 0000000000..e5b22bdb56
--- /dev/null
+++ b/src/collapse/test/collapseHorizontally.spec.js
@@ -0,0 +1,255 @@
+describe('collapse directive', function() {
+ var elementH, compileFnH, scope, $compile, $animate, $q;
+
+ beforeEach(module('ui.bootstrap.collapse'));
+ beforeEach(module('ngAnimateMock'));
+ beforeEach(inject(function(_$rootScope_, _$compile_, _$animate_, _$q_) {
+ scope = _$rootScope_;
+ $compile = _$compile_;
+ $animate = _$animate_;
+ $q = _$q_;
+ }));
+
+ beforeEach(function() {
+ elementH = angular.element(
+ 'Resize window to less than 768 pixels to display mobile menu toggle button.
+ ++
Some content
+
+
Some content
+ '
+ + 'Some Content
');
+ compileFnH = $compile(elementH);
+ angular.element(document.body).append(elementH);
+ });
+
+ afterEach(function() {
+ elementH.remove();
+ });
+
+ function initCallbacks() {
+ scope.collapsing = jasmine.createSpy('scope.collapsing');
+ scope.collapsed = jasmine.createSpy('scope.collapsed');
+ scope.expanding = jasmine.createSpy('scope.expanding');
+ scope.expanded = jasmine.createSpy('scope.expanded');
+ }
+
+ function assertCallbacks(expected) {
+ ['collapsing', 'collapsed', 'expanding', 'expanded'].forEach(function(cbName) {
+ if (expected[cbName]) {
+ expect(scope[cbName]).toHaveBeenCalled();
+ } else {
+ expect(scope[cbName]).not.toHaveBeenCalled();
+ }
+ });
+ }
+
+ it('should be hidden on initialization if isCollapsed = true', function() {
+ initCallbacks();
+ scope.isCollapsed = true;
+ compileFnH(scope);
+ scope.$digest();
+ expect(elementH.width()).toBe(0);
+ assertCallbacks({ collapsed: true });
+ });
+
+ it('should not trigger any animation on initialization if isCollapsed = true', function() {
+ var wrapperFn = function() {
+ $animate.flush();
+ };
+
+ scope.isCollapsed = true;
+ compileFnH(scope);
+ scope.$digest();
+
+ expect(wrapperFn).toThrowError(/No pending animations ready to be closed or flushed/);
+ });
+
+ it('should collapse if isCollapsed = true on subsequent use', function() {
+ scope.isCollapsed = false;
+ compileFnH(scope);
+ scope.$digest();
+ initCallbacks();
+ scope.isCollapsed = true;
+ scope.$digest();
+ $animate.flush();
+ expect(elementH.width()).toBe(0);
+ assertCallbacks({ collapsing: true, collapsed: true });
+ });
+
+ it('should show after toggled from collapsed', function() {
+ initCallbacks();
+ scope.isCollapsed = true;
+ compileFnH(scope);
+ scope.$digest();
+ expect(elementH.width()).toBe(0);
+ assertCallbacks({ collapsed: true });
+ scope.collapsed.calls.reset();
+
+ scope.isCollapsed = false;
+ scope.$digest();
+ $animate.flush();
+ expect(elementH.width()).not.toBe(0);
+ assertCallbacks({ expanding: true, expanded: true });
+ });
+
+ it('should not trigger any animation on initialization if isCollapsed = false', function() {
+ var wrapperFn = function() {
+ $animate.flush();
+ };
+
+ scope.isCollapsed = false;
+ compileFnH(scope);
+ scope.$digest();
+
+ expect(wrapperFn).toThrowError(/No pending animations ready to be closed or flushed/);
+ });
+
+ it('should expand if isCollapsed = false on subsequent use', function() {
+ scope.isCollapsed = false;
+ compileFnH(scope);
+ scope.$digest();
+ scope.isCollapsed = true;
+ scope.$digest();
+ $animate.flush();
+ initCallbacks();
+ scope.isCollapsed = false;
+ scope.$digest();
+ $animate.flush();
+ expect(elementH.width()).not.toBe(0);
+ assertCallbacks({ expanding: true, expanded: true });
+ });
+
+ it('should collapse if isCollapsed = true on subsequent uses', function() {
+ scope.isCollapsed = false;
+ compileFnH(scope);
+ scope.$digest();
+ scope.isCollapsed = true;
+ scope.$digest();
+ $animate.flush();
+ scope.isCollapsed = false;
+ scope.$digest();
+ $animate.flush();
+ initCallbacks();
+ scope.isCollapsed = true;
+ scope.$digest();
+ $animate.flush();
+ expect(elementH.width()).toBe(0);
+ assertCallbacks({ collapsing: true, collapsed: true });
+ });
+
+ it('should change aria-expanded attribute', function() {
+ scope.isCollapsed = false;
+ compileFnH(scope);
+ scope.$digest();
+ expect(elementH.attr('aria-expanded')).toBe('true');
+
+ scope.isCollapsed = true;
+ scope.$digest();
+ $animate.flush();
+ expect(elementH.attr('aria-expanded')).toBe('false');
+ });
+
+ it('should change aria-hidden attribute', function() {
+ scope.isCollapsed = false;
+ compileFnH(scope);
+ scope.$digest();
+ expect(elementH.attr('aria-hidden')).toBe('false');
+
+ scope.isCollapsed = true;
+ scope.$digest();
+ $animate.flush();
+ expect(elementH.attr('aria-hidden')).toBe('true');
+ });
+
+ describe('expanding callback returning a promise', function() {
+ var defer, collapsedWidth;
+
+ beforeEach(function() {
+ defer = $q.defer();
+
+ scope.isCollapsed = true;
+ scope.expanding = function() {
+ return defer.promise;
+ };
+ compileFnH(scope);
+ scope.$digest();
+ collapsedWidth = elementH.width();
+
+ // set flag to expand ...
+ scope.isCollapsed = false;
+ scope.$digest();
+
+ // ... shouldn't expand yet ...
+ expect(elementH.attr('aria-expanded')).not.toBe('true');
+ expect(elementH.width()).toBe(collapsedWidth);
+ });
+
+ it('should wait for it to resolve before animating', function() {
+ defer.resolve();
+
+ // should now expand
+ scope.$digest();
+ $animate.flush();
+
+ expect(elementH.attr('aria-expanded')).toBe('true');
+ expect(elementH.width()).toBeGreaterThan(collapsedWidth);
+ });
+
+ it('should not animate if it rejects', function() {
+ defer.reject();
+
+ // should NOT expand
+ scope.$digest();
+
+ expect(elementH.attr('aria-expanded')).not.toBe('true');
+ expect(elementH.width()).toBe(collapsedWidth);
+ });
+ });
+
+ describe('collapsing callback returning a promise', function() {
+ var defer, expandedWidth;
+
+ beforeEach(function() {
+ defer = $q.defer();
+ scope.isCollapsed = false;
+ scope.collapsing = function() {
+ return defer.promise;
+ };
+ compileFnH(scope);
+ scope.$digest();
+
+ expandedWidth = elementH.width();
+
+ // set flag to collapse ...
+ scope.isCollapsed = true;
+ scope.$digest();
+
+ // ... but it shouldn't collapse yet ...
+ expect(elementH.attr('aria-expanded')).not.toBe('false');
+ expect(elementH.width()).toBe(expandedWidth);
+ });
+
+ it('should wait for it to resolve before animating', function() {
+ defer.resolve();
+
+ // should now collapse
+ scope.$digest();
+ $animate.flush();
+
+ expect(elementH.attr('aria-expanded')).toBe('false');
+ expect(elementH.width()).toBeLessThan(expandedWidth);
+ });
+
+ it('should not animate if it rejects', function() {
+ defer.reject();
+
+ // should NOT collapse
+ scope.$digest();
+
+ expect(elementH.attr('aria-expanded')).not.toBe('false');
+ expect(elementH.width()).toBe(expandedWidth);
+ });
+ });
+
+});
diff --git a/src/dateparser/dateparser.js b/src/dateparser/dateparser.js
index 3dae13b051..d770dff31b 100644
--- a/src/dateparser/dateparser.js
+++ b/src/dateparser/dateparser.js
@@ -1,6 +1,6 @@
angular.module('ui.bootstrap.dateparser', [])
-.service('uibDateParser', ['$log', '$locale', 'dateFilter', 'orderByFilter', function($log, $locale, dateFilter, orderByFilter) {
+.service('uibDateParser', ['$log', '$locale', 'dateFilter', 'orderByFilter', 'filterFilter', function($log, $locale, dateFilter, orderByFilter, filterFilter) {
// Pulled from https://github.com/mbostock/d3/blob/master/src/format/requote.js
var SPECIAL_CHARACTERS_REGEXP = /[\\\^\$\*\+\?\|\[\]\(\)\.\{\}]/g;
@@ -230,11 +230,37 @@ angular.module('ui.bootstrap.dateparser', [])
formatter: function(date) { return dateFilter(date, 'G'); }
}
];
+
+ if (angular.version.major >= 1 && angular.version.minor > 4) {
+ formatCodeToRegex.push({
+ key: 'LLLL',
+ regex: $locale.DATETIME_FORMATS.STANDALONEMONTH.join('|'),
+ apply: function(value) { this.month = $locale.DATETIME_FORMATS.STANDALONEMONTH.indexOf(value); },
+ formatter: function(date) { return dateFilter(date, 'LLLL'); }
+ });
+ }
};
this.init();
- function createParser(format, func) {
+ function getFormatCodeToRegex(key) {
+ return filterFilter(formatCodeToRegex, {key: key}, true)[0];
+ }
+
+ this.getParser = function (key) {
+ var f = getFormatCodeToRegex(key);
+ return f && f.apply || null;
+ };
+
+ this.overrideParser = function (key, parser) {
+ var f = getFormatCodeToRegex(key);
+ if (f && angular.isFunction(parser)) {
+ this.parsers = {};
+ f.apply = parser;
+ }
+ }.bind(this);
+
+ function createParser(format) {
var map = [], regex = format.split('');
// check for literal values
@@ -283,7 +309,7 @@ angular.module('ui.bootstrap.dateparser', [])
map.push({
index: index,
key: data.key,
- apply: data[func],
+ apply: data.apply,
matcher: data.regex
});
}
@@ -295,6 +321,70 @@ angular.module('ui.bootstrap.dateparser', [])
};
}
+ function createFormatter(format) {
+ var formatters = [];
+ var i = 0;
+ var formatter, literalIdx;
+ while (i < format.length) {
+ if (angular.isNumber(literalIdx)) {
+ if (format.charAt(i) === '\'') {
+ if (i + 1 >= format.length || format.charAt(i + 1) !== '\'') {
+ formatters.push(constructLiteralFormatter(format, literalIdx, i));
+ literalIdx = null;
+ }
+ } else if (i === format.length) {
+ while (literalIdx < format.length) {
+ formatter = constructFormatterFromIdx(format, literalIdx);
+ formatters.push(formatter);
+ literalIdx = formatter.endIdx;
+ }
+ }
+
+ i++;
+ continue;
+ }
+
+ if (format.charAt(i) === '\'') {
+ literalIdx = i;
+ i++;
+ continue;
+ }
+
+ formatter = constructFormatterFromIdx(format, i);
+
+ formatters.push(formatter.parser);
+ i = formatter.endIdx;
+ }
+
+ return formatters;
+ }
+
+ function constructLiteralFormatter(format, literalIdx, endIdx) {
+ return function() {
+ return format.substr(literalIdx + 1, endIdx - literalIdx - 1);
+ };
+ }
+
+ function constructFormatterFromIdx(format, i) {
+ var currentPosStr = format.substr(i);
+ for (var j = 0; j < formatCodeToRegex.length; j++) {
+ if (new RegExp('^' + formatCodeToRegex[j].key).test(currentPosStr)) {
+ var data = formatCodeToRegex[j];
+ return {
+ endIdx: i + data.key.length,
+ parser: data.formatter
+ };
+ }
+ }
+
+ return {
+ endIdx: i + 1,
+ parser: function() {
+ return currentPosStr.charAt(0);
+ }
+ };
+ }
+
this.filter = function(date, format) {
if (!angular.isDate(date) || isNaN(date) || !format) {
return '';
@@ -307,28 +397,13 @@ angular.module('ui.bootstrap.dateparser', [])
}
if (!this.formatters[format]) {
- this.formatters[format] = createParser(format, 'formatter');
+ this.formatters[format] = createFormatter(format);
}
- var parser = this.formatters[format],
- map = parser.map;
-
- var _format = format;
-
- return map.reduce(function(str, mapper, i) {
- var match = _format.match(new RegExp('(.*)' + mapper.key));
- if (match && angular.isString(match[1])) {
- str += match[1];
- _format = _format.replace(match[1] + mapper.key, '');
- }
-
- var endStr = i === map.length - 1 ? _format : '';
-
- if (mapper.apply) {
- return str + mapper.apply.call(null, date) + endStr;
- }
+ var formatters = this.formatters[format];
- return str + endStr;
+ return formatters.reduce(function(str, formatter) {
+ return str + formatter(date);
}, '');
};
diff --git a/src/dateparser/docs/README.md b/src/dateparser/docs/README.md
index d5cc38fab9..f7a3b3434f 100644
--- a/src/dateparser/docs/README.md
+++ b/src/dateparser/docs/README.md
@@ -58,6 +58,9 @@ Certain format codes support i18n. Check this [guide](https://docs.angularjs.org
_(Example: `3` or `03`)_ -
Parses a numeric month, but allowing an optional leading zero
+* `LLLL`
+ _(Example: `February`, i18n support)_ - Stand-alone month in year (January-December). Requires Angular version 1.5.1 or higher.
+
* `dd`
_(Example: `05`, Leading 0)_ -
Parses a numeric day.
diff --git a/src/dateparser/test/dateparser.spec.js b/src/dateparser/test/dateparser.spec.js
index 8b96a7c77a..70c4b3e4f8 100644
--- a/src/dateparser/test/dateparser.spec.js
+++ b/src/dateparser/test/dateparser.spec.js
@@ -84,6 +84,16 @@ describe('date parser', function() {
expectFilter(new Date(2011, 4, 2, 0), 'dd-M!-yy', '02-05-11');
expectFilter(oldDate, 'yyyy/M!/dd', '0001/03/06');
});
+
+ it('should work correctly for `LLLL`', function() {
+ expectFilter(new Date(2013, 7, 24, 0), 'LLLL/dd/yyyy', 'August/24/2013');
+ expectFilter(new Date(2004, 10, 7, 0), 'dd.LLLL.yy', '07.November.04');
+ expectFilter(new Date(2011, 4, 18, 0), 'dd-LLLL-yy', '18-May-11');
+ expectFilter(new Date(1980, 1, 5, 0), 'LLLL/dd/yyyy', 'February/05/1980');
+ expectFilter(new Date(1955, 2, 5, 0), 'yyyy/LLLL/dd', '1955/March/05');
+ expectFilter(new Date(2011, 5, 2, 0), 'dd-LLLL-yy', '02-June-11');
+ expectFilter(oldDate, 'yyyy/LLLL/dd', '0001/March/06');
+ });
it('should work correctly for `d`', function() {
expectFilter(new Date(2013, 10, 17, 0), 'd.MMMM.yy', '17.November.13');
@@ -565,27 +575,27 @@ describe('date parser', function() {
});
describe('with value literals', function() {
- // describe('filter', function() {
- // it('should work with multiple literals', function() {
- // expect(dateParser.filter(new Date(2013, 0, 29), 'd \'de\' MMMM \'de\' y')).toEqual('29 de January de 2013');
- // });
- //
- // it('should work with escaped single quote', function() {
- // expect(dateParser.filter(new Date(2015, 2, 22, 12), 'd.MMMM.yy h \'o\'\'clock\'')).toEqual('22.March.15 12 o\'clock');
- // });
- //
- // it('should work with only a single quote', function() {
- // expect(dateParser.filter(new Date(2015, 2, 22), 'd.MMMM.yy \'\'\'')).toEqual('22.March.15 \'');
- // });
- //
- // it('should work with trailing literal', function() {
- // expect(dateParser.filter(new Date(2013, 0, 1), '\'year\' y')).toEqual('year 2013');
- // });
- //
- // it('should work without whitespace', function() {
- // expect(dateParser.filter(new Date(2013, 0, 1), '\'year:\'y')).toEqual('year:2013');
- // });
- // });
+ describe('filter', function() {
+ it('should work with multiple literals', function() {
+ expect(dateParser.filter(new Date(2013, 0, 29), 'd \'de\' MMMM \'de\' y')).toEqual('29 de January de 2013');
+ });
+
+ it('should work with escaped single quote', function() {
+ expect(dateParser.filter(new Date(2015, 2, 22, 12), 'd.MMMM.yy h \'o\'\'clock\'')).toEqual('22.March.15 12 o\'clock');
+ });
+
+ it('should work with only a single quote', function() {
+ expect(dateParser.filter(new Date(2015, 2, 22), 'd.MMMM.yy \'\'\'')).toEqual('22.March.15 \'');
+ });
+
+ it('should work with trailing literal', function() {
+ expect(dateParser.filter(new Date(2013, 0, 1), '\'year\' y')).toEqual('year 2013');
+ });
+
+ it('should work without whitespace', function() {
+ expect(dateParser.filter(new Date(2013, 0, 1), '\'year:\'y')).toEqual('year:2013');
+ });
+ });
describe('parse', function() {
it('should work with multiple literals', function() {
@@ -781,4 +791,28 @@ describe('date parser', function() {
});
});
});
+
+ describe('overrideParser', function() {
+ var twoDigitYearParser = function (value) {
+ this.year = +value + (+value > 30 ? 1900 : 2000);
+ };
+
+ it('should get the current parser', function() {
+ expect(dateParser.getParser('yy')).toBeTruthy();
+ });
+
+ it('should override the parser', function() {
+ dateParser.overrideParser('yy', twoDigitYearParser);
+ expect(dateParser.parse('68', 'yy').getFullYear()).toEqual(1968);
+ expect(dateParser.parse('67', 'yy').getFullYear()).toEqual(1967);
+ expect(dateParser.parse('31', 'yy').getFullYear()).toEqual(1931);
+ expect(dateParser.parse('30', 'yy').getFullYear()).toEqual(2030);
+ });
+
+ it('should clear cached parsers', function() {
+ expect(dateParser.parse('68', 'yy').getFullYear()).toEqual(2068);
+ dateParser.overrideParser('yy', twoDigitYearParser);
+ expect(dateParser.parse('68', 'yy').getFullYear()).toEqual(1968);
+ });
+ });
});
diff --git a/src/datepicker/datepicker.js b/src/datepicker/datepicker.js
index cad3c5067a..fd4e263660 100644
--- a/src/datepicker/datepicker.js
+++ b/src/datepicker/datepicker.js
@@ -16,6 +16,7 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
maxMode: 'year',
minDate: null,
minMode: 'day',
+ monthColumns: 3,
ngModelOptions: {},
shortcutPropagation: false,
showWeeks: true,
@@ -23,13 +24,15 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
yearRows: 4
})
-.controller('UibDatepickerController', ['$scope', '$attrs', '$parse', '$interpolate', '$locale', '$log', 'dateFilter', 'uibDatepickerConfig', '$datepickerLiteralWarning', '$datepickerSuppressError', 'uibDateParser',
- function($scope, $attrs, $parse, $interpolate, $locale, $log, dateFilter, datepickerConfig, $datepickerLiteralWarning, $datepickerSuppressError, dateParser) {
+.controller('UibDatepickerController', ['$scope', '$element', '$attrs', '$parse', '$interpolate', '$locale', '$log', 'dateFilter', 'uibDatepickerConfig', '$datepickerLiteralWarning', '$datepickerSuppressError', 'uibDateParser',
+ function($scope, $element, $attrs, $parse, $interpolate, $locale, $log, dateFilter, datepickerConfig, $datepickerLiteralWarning, $datepickerSuppressError, dateParser) {
var self = this,
ngModelCtrl = { $setViewValue: angular.noop }, // nullModelCtrl;
ngModelOptions = {},
- watchListeners = [],
- optionsUsed = !!$attrs.datepickerOptions;
+ watchListeners = [];
+
+ $element.addClass('uib-datepicker');
+ $attrs.$set('role', 'application');
if (!$scope.datepickerOptions) {
$scope.datepickerOptions = {};
@@ -52,6 +55,7 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
'maxMode',
'minDate',
'minMode',
+ 'monthColumns',
'showWeeks',
'shortcutPropagation',
'startingDay',
@@ -77,6 +81,7 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
$interpolate($scope.datepickerOptions[key])($scope.$parent) :
datepickerConfig[key];
break;
+ case 'monthColumns':
case 'showWeeks':
case 'shortcutPropagation':
case 'yearColumns':
@@ -99,7 +104,7 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
$scope.$watch('datepickerOptions.' + key, function(value) {
if (value) {
if (angular.isDate(value)) {
- self[key] = dateParser.fromTimezone(new Date(value), ngModelOptions.timezone);
+ self[key] = dateParser.fromTimezone(new Date(value), ngModelOptions.getOption('timezone'));
} else {
if ($datepickerLiteralWarning) {
$log.warn('Literal date support has been deprecated, please switch to date object usage');
@@ -109,7 +114,7 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
}
} else {
self[key] = datepickerConfig[key] ?
- dateParser.fromTimezone(new Date(datepickerConfig[key]), ngModelOptions.timezone) :
+ dateParser.fromTimezone(new Date(datepickerConfig[key]), ngModelOptions.getOption('timezone')) :
null;
}
@@ -121,7 +126,7 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
case 'minMode':
if ($scope.datepickerOptions[key]) {
$scope.$watch(function() { return $scope.datepickerOptions[key]; }, function(value) {
- self[key] = $scope[key] = angular.isDefined(value) ? value : datepickerOptions[key];
+ self[key] = $scope[key] = angular.isDefined(value) ? value : $scope.datepickerOptions[key];
if (key === 'minMode' && self.modes.indexOf($scope.datepickerOptions.datepickerMode) < self.modes.indexOf(self[key]) ||
key === 'maxMode' && self.modes.indexOf($scope.datepickerOptions.datepickerMode) > self.modes.indexOf(self[key])) {
$scope.datepickerMode = self[key];
@@ -156,14 +161,13 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
this.init = function(ngModelCtrl_) {
ngModelCtrl = ngModelCtrl_;
- ngModelOptions = ngModelCtrl_.$options ||
- $scope.datepickerOptions.ngModelOptions ||
- datepickerConfig.ngModelOptions;
+ ngModelOptions = extractOptions(ngModelCtrl);
+
if ($scope.datepickerOptions.initDate) {
- self.activeDate = dateParser.fromTimezone($scope.datepickerOptions.initDate, ngModelOptions.timezone) || new Date();
+ self.activeDate = dateParser.fromTimezone($scope.datepickerOptions.initDate, ngModelOptions.getOption('timezone')) || new Date();
$scope.$watch('datepickerOptions.initDate', function(initDate) {
if (initDate && (ngModelCtrl.$isEmpty(ngModelCtrl.$modelValue) || ngModelCtrl.$invalid)) {
- self.activeDate = dateParser.fromTimezone(initDate, ngModelOptions.timezone);
+ self.activeDate = dateParser.fromTimezone(initDate, ngModelOptions.getOption('timezone'));
self.refreshView();
}
});
@@ -173,8 +177,8 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
var date = ngModelCtrl.$modelValue ? new Date(ngModelCtrl.$modelValue) : new Date();
this.activeDate = !isNaN(date) ?
- dateParser.fromTimezone(date, ngModelOptions.timezone) :
- dateParser.fromTimezone(new Date(), ngModelOptions.timezone);
+ dateParser.fromTimezone(date, ngModelOptions.getOption('timezone')) :
+ dateParser.fromTimezone(new Date(), ngModelOptions.getOption('timezone'));
ngModelCtrl.$render = function() {
self.render();
@@ -187,7 +191,7 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
isValid = !isNaN(date);
if (isValid) {
- this.activeDate = dateParser.fromTimezone(date, ngModelOptions.timezone);
+ this.activeDate = dateParser.fromTimezone(date, ngModelOptions.getOption('timezone'));
} else if (!$datepickerSuppressError) {
$log.error('Datepicker directive: "ng-model" value must be a Date object');
}
@@ -204,7 +208,7 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
}
var date = ngModelCtrl.$viewValue ? new Date(ngModelCtrl.$viewValue) : null;
- date = dateParser.fromTimezone(date, ngModelOptions.timezone);
+ date = dateParser.fromTimezone(date, ngModelOptions.getOption('timezone'));
ngModelCtrl.$setValidity('dateDisabled', !date ||
this.element && !this.isDisabled(date));
}
@@ -212,9 +216,9 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
this.createDateObject = function(date, format) {
var model = ngModelCtrl.$viewValue ? new Date(ngModelCtrl.$viewValue) : null;
- model = dateParser.fromTimezone(model, ngModelOptions.timezone);
+ model = dateParser.fromTimezone(model, ngModelOptions.getOption('timezone'));
var today = new Date();
- today = dateParser.fromTimezone(today, ngModelOptions.timezone);
+ today = dateParser.fromTimezone(today, ngModelOptions.getOption('timezone'));
var time = this.compare(date, today);
var dt = {
date: date,
@@ -260,9 +264,9 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
$scope.select = function(date) {
if ($scope.datepickerMode === self.minMode) {
- var dt = ngModelCtrl.$viewValue ? dateParser.fromTimezone(new Date(ngModelCtrl.$viewValue), ngModelOptions.timezone) : new Date(0, 0, 0, 0, 0, 0, 0);
+ var dt = ngModelCtrl.$viewValue ? dateParser.fromTimezone(new Date(ngModelCtrl.$viewValue), ngModelOptions.getOption('timezone')) : new Date(0, 0, 0, 0, 0, 0, 0);
dt.setFullYear(date.getFullYear(), date.getMonth(), date.getDate());
- dt = dateParser.toTimezone(dt, ngModelOptions.timezone);
+ dt = dateParser.toTimezone(dt, ngModelOptions.getOption('timezone'));
ngModelCtrl.$setViewValue(dt);
ngModelCtrl.$render();
} else {
@@ -330,6 +334,12 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
}
};
+ $element.on('keydown', function(evt) {
+ $scope.$apply(function() {
+ $scope.keydown(evt);
+ });
+ });
+
$scope.$on('$destroy', function() {
//Clear all watch listeners on destroy
while (watchListeners.length) {
@@ -341,6 +351,37 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
$scope.datepickerMode = mode;
$scope.datepickerOptions.datepickerMode = mode;
}
+
+ function extractOptions(ngModelCtrl) {
+ var ngModelOptions;
+
+ if (angular.version.minor < 6) { // in angular < 1.6 $options could be missing
+ // guarantee a value
+ ngModelOptions = ngModelCtrl.$options ||
+ $scope.datepickerOptions.ngModelOptions ||
+ datepickerConfig.ngModelOptions ||
+ {};
+
+ // mimic 1.6+ api
+ ngModelOptions.getOption = function (key) {
+ return ngModelOptions[key];
+ };
+ } else { // in angular >=1.6 $options is always present
+ // ng-model-options defaults timezone to null; don't let its precedence squash a non-null value
+ var timezone = ngModelCtrl.$options.getOption('timezone') ||
+ ($scope.datepickerOptions.ngModelOptions ? $scope.datepickerOptions.ngModelOptions.timezone : null) ||
+ (datepickerConfig.ngModelOptions ? datepickerConfig.ngModelOptions.timezone : null);
+
+ // values passed to createChild override existing values
+ ngModelOptions = ngModelCtrl.$options // start with a ModelOptions instance
+ .createChild(datepickerConfig.ngModelOptions) // lowest precedence
+ .createChild($scope.datepickerOptions.ngModelOptions)
+ .createChild(ngModelCtrl.$options) // highest precedence
+ .createChild({timezone: timezone}); // to keep from squashing a non-null value
+ }
+
+ return ngModelOptions;
+ }
}])
.controller('UibDaypickerController', ['$scope', '$element', 'dateFilter', function(scope, $element, dateFilter) {
@@ -480,7 +521,8 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
}
scope.title = dateFilter(this.activeDate, this.formatMonthTitle);
- scope.rows = this.split(months, 3);
+ scope.rows = this.split(months, this.monthColumns);
+ scope.yearHeaderColspan = this.monthColumns > 3 ? this.monthColumns - 2 : 1;
};
this.compare = function(date1, date2) {
@@ -497,11 +539,11 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
if (key === 'left') {
date = date - 1;
} else if (key === 'up') {
- date = date - 3;
+ date = date - this.monthColumns;
} else if (key === 'right') {
date = date + 1;
} else if (key === 'down') {
- date = date + 3;
+ date = date + this.monthColumns;
} else if (key === 'pageup' || key === 'pagedown') {
var year = this.activeDate.getFullYear() + (key === 'pageup' ? - 1 : 1);
this.activeDate.setFullYear(year);
@@ -572,7 +614,6 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
.directive('uibDatepicker', function() {
return {
- replace: true,
templateUrl: function(element, attrs) {
return attrs.templateUrl || 'uib/template/datepicker/datepicker.html';
},
@@ -580,6 +621,7 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
datepickerOptions: '=?'
},
require: ['uibDatepicker', '^ngModel'],
+ restrict: 'A',
controller: 'UibDatepickerController',
controllerAs: 'datepicker',
link: function(scope, element, attrs, ctrls) {
@@ -592,11 +634,11 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
.directive('uibDaypicker', function() {
return {
- replace: true,
templateUrl: function(element, attrs) {
return attrs.templateUrl || 'uib/template/datepicker/day.html';
},
require: ['^uibDatepicker', 'uibDaypicker'],
+ restrict: 'A',
controller: 'UibDaypickerController',
link: function(scope, element, attrs, ctrls) {
var datepickerCtrl = ctrls[0],
@@ -609,11 +651,11 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
.directive('uibMonthpicker', function() {
return {
- replace: true,
templateUrl: function(element, attrs) {
return attrs.templateUrl || 'uib/template/datepicker/month.html';
},
require: ['^uibDatepicker', 'uibMonthpicker'],
+ restrict: 'A',
controller: 'UibMonthpickerController',
link: function(scope, element, attrs, ctrls) {
var datepickerCtrl = ctrls[0],
@@ -626,11 +668,11 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
.directive('uibYearpicker', function() {
return {
- replace: true,
templateUrl: function(element, attrs) {
return attrs.templateUrl || 'uib/template/datepicker/year.html';
},
require: ['^uibDatepicker', 'uibYearpicker'],
+ restrict: 'A',
controller: 'UibYearpickerController',
link: function(scope, element, attrs, ctrls) {
var ctrl = ctrls[0];
diff --git a/src/datepicker/docs/demo.html b/src/datepicker/docs/demo.html
index 0f96d634d6..e083965698 100644
--- a/src/datepicker/docs/demo.html
+++ b/src/datepicker/docs/demo.html
@@ -15,7 +15,7 @@
Inline
-
diff --git a/src/datepicker/docs/readme.md b/src/datepicker/docs/readme.md index e46d00f47b..d1928e272d 100644 --- a/src/datepicker/docs/readme.md +++ b/src/datepicker/docs/readme.md @@ -104,6 +104,11 @@ Apart from the previous settings, to configure the uib-datepicker you need to cr _(Default: `day`)_ - Sets a lower limit for mode. + * `monthColumns` + C + _(Default: `3`)_ - + Number of columns displayed in month selection. + * `ngModelOptions` C _(Default: `null`)_ - @@ -123,7 +128,7 @@ Apart from the previous settings, to configure the uib-datepicker you need to cr C *(Default: `$locale.DATETIME_FORMATS.FIRSTDAYOFWEEK`)* - Starting day of the week from 0-6 (0=Sunday, ..., 6=Saturday). - + * `yearRows` C _(Default: `4`)_ - diff --git a/src/datepicker/test/datepicker.spec.js b/src/datepicker/test/datepicker.spec.js index 1a1e06aa62..8dd924c8d8 100644 --- a/src/datepicker/test/datepicker.spec.js +++ b/src/datepicker/test/datepicker.spec.js @@ -26,8 +26,12 @@ describe('datepicker', function() { }); })); + function getTitleCell() { + return element.find('th').eq(1); + } + function getTitleButton() { - return element.find('th').eq(1).find('button').first(); + return getTitleCell().find('button').first(); } function getTitle() { @@ -155,7 +159,7 @@ describe('datepicker', function() { $scope.options = { minDate: '1984-01-01' }; - element = $compile('
baz
');
});
it('should support custom day, month and year templates', function() {
@@ -327,15 +331,15 @@ describe('datepicker', function() {
$templateCache.put('foo/year.html', 'year
');
$templateCache.put('foo/bar.html', '' +
- '
');
- element = $compile('day
month
year
';
+ var expectedHtml = 'day
month
year
{{datepicker.text}}
');
- element = $compile('baz
');
});
describe('basic functionality', function() {
beforeEach(function() {
- element = $compile('baz
');
});
});
@@ -1367,7 +1367,7 @@ describe('datepicker popup', function() {
var datepicker = elm.find('[uib-datepicker]');
- expect(datepicker.html()).toBe('baz');
+ expect(datepicker.html()).toBe('baz
');
});
});
diff --git a/src/dropdown/docs/readme.md b/src/dropdown/docs/readme.md
index 09b646d072..3026673ce2 100644
--- a/src/dropdown/docs/readme.md
+++ b/src/dropdown/docs/readme.md
@@ -25,7 +25,7 @@ Each of these parts need to be used as attribute directives.
* `dropdown-append-to-body`
B
_(Default: `false`)_ -
- Appends the inner dropdown-menu to the body element.
+ Appends the inner dropdown-menu to the body element if the attribute is present without a value, or with a non `false` value.
* `is-open`
$
diff --git a/src/dropdown/dropdown.js b/src/dropdown/dropdown.js
index 40d2bbe0c1..2560e282e8 100644
--- a/src/dropdown/dropdown.js
+++ b/src/dropdown/dropdown.js
@@ -1,17 +1,35 @@
-angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
+angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.multiMap', 'ui.bootstrap.position'])
.constant('uibDropdownConfig', {
appendToOpenClass: 'uib-dropdown-open',
openClass: 'open'
})
-.service('uibDropdownService', ['$document', '$rootScope', function($document, $rootScope) {
+.service('uibDropdownService', ['$document', '$rootScope', '$$multiMap', function($document, $rootScope, $$multiMap) {
var openScope = null;
+ var openedContainers = $$multiMap.createNew();
+
+ this.isOnlyOpen = function(dropdownScope, appendTo) {
+ var openedDropdowns = openedContainers.get(appendTo);
+ if (openedDropdowns) {
+ var openDropdown = openedDropdowns.reduce(function(toClose, dropdown) {
+ if (dropdown.scope === dropdownScope) {
+ return dropdown;
+ }
+
+ return toClose;
+ }, {});
+ if (openDropdown) {
+ return openedDropdowns.length === 1;
+ }
+ }
+
+ return false;
+ };
- this.open = function(dropdownScope, element) {
+ this.open = function(dropdownScope, element, appendTo) {
if (!openScope) {
$document.on('click', closeDropdown);
- element.on('keydown', keybindFilter);
}
if (openScope && openScope !== dropdownScope) {
@@ -19,20 +37,58 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
}
openScope = dropdownScope;
+
+ if (!appendTo) {
+ return;
+ }
+
+ var openedDropdowns = openedContainers.get(appendTo);
+ if (openedDropdowns) {
+ var openedScopes = openedDropdowns.map(function(dropdown) {
+ return dropdown.scope;
+ });
+ if (openedScopes.indexOf(dropdownScope) === -1) {
+ openedContainers.put(appendTo, {
+ scope: dropdownScope
+ });
+ }
+ } else {
+ openedContainers.put(appendTo, {
+ scope: dropdownScope
+ });
+ }
};
- this.close = function(dropdownScope, element) {
+ this.close = function(dropdownScope, element, appendTo) {
if (openScope === dropdownScope) {
- openScope = null;
$document.off('click', closeDropdown);
- element.off('keydown', keybindFilter);
+ $document.off('keydown', this.keybindFilter);
+ openScope = null;
+ }
+
+ if (!appendTo) {
+ return;
+ }
+
+ var openedDropdowns = openedContainers.get(appendTo);
+ if (openedDropdowns) {
+ var dropdownToClose = openedDropdowns.reduce(function(toClose, dropdown) {
+ if (dropdown.scope === dropdownScope) {
+ return dropdown;
+ }
+
+ return toClose;
+ }, {});
+ if (dropdownToClose) {
+ openedContainers.remove(appendTo, dropdownToClose);
+ }
}
};
var closeDropdown = function(evt) {
// This method may still be called during the same mouse event that
// unbound this event handler. So check openScope before proceeding.
- if (!openScope) { return; }
+ if (!openScope || !openScope.isOpen) { return; }
if (evt && openScope.getAutoClose() === 'disabled') { return; }
@@ -49,20 +105,29 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
return;
}
- openScope.isOpen = false;
openScope.focusToggleElement();
+ openScope.isOpen = false;
if (!$rootScope.$$phase) {
openScope.$apply();
}
};
- var keybindFilter = function(evt) {
+ this.keybindFilter = function(evt) {
+ if (!openScope) {
+ // see this.close as ESC could have been pressed which kills the scope so we can not proceed
+ return;
+ }
+
+ var dropdownElement = openScope.getDropdownElement();
+ var toggleElement = openScope.getToggleElement();
+ var dropdownElementTargeted = dropdownElement && dropdownElement[0].contains(evt.target);
+ var toggleElementTargeted = toggleElement && toggleElement[0].contains(evt.target);
if (evt.which === 27) {
evt.stopPropagation();
openScope.focusToggleElement();
closeDropdown();
- } else if (openScope.isKeynavEnabled() && [38, 40].indexOf(evt.which) !== -1 && openScope.isOpen) {
+ } else if (openScope.isKeynavEnabled() && [38, 40].indexOf(evt.which) !== -1 && openScope.isOpen && (dropdownElementTargeted || toggleElementTargeted)) {
evt.preventDefault();
evt.stopPropagation();
openScope.focusDropdownEntry(evt.which);
@@ -79,8 +144,6 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
getIsOpen,
setIsOpen = angular.noop,
toggleInvoker = $attrs.onToggle ? $parse($attrs.onToggle) : angular.noop,
- appendToBody = false,
- appendTo = null,
keynavEnabled = false,
selectedOption = null,
body = $document.find('body');
@@ -97,26 +160,7 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
});
}
- if (angular.isDefined($attrs.dropdownAppendTo)) {
- var appendToEl = $parse($attrs.dropdownAppendTo)(scope);
- if (appendToEl) {
- appendTo = angular.element(appendToEl);
- }
- }
-
- appendToBody = angular.isDefined($attrs.dropdownAppendToBody);
keynavEnabled = angular.isDefined($attrs.keyboardNav);
-
- if (appendToBody && !appendTo) {
- appendTo = body;
- }
-
- if (appendTo && self.dropdownMenu) {
- appendTo.append(self.dropdownMenu);
- $element.on('$destroy', function handleDestroyEvent() {
- self.dropdownMenu.remove();
- });
- }
};
this.toggle = function(open) {
@@ -188,12 +232,48 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
}
};
+ function removeDropdownMenu() {
+ $element.append(self.dropdownMenu);
+ }
+
scope.$watch('isOpen', function(isOpen, wasOpen) {
+ var appendTo = null,
+ appendToBody = false;
+
+ if (angular.isDefined($attrs.dropdownAppendTo)) {
+ var appendToEl = $parse($attrs.dropdownAppendTo)(scope);
+ if (appendToEl) {
+ appendTo = angular.element(appendToEl);
+ }
+ }
+
+ if (angular.isDefined($attrs.dropdownAppendToBody)) {
+ var appendToBodyValue = $parse($attrs.dropdownAppendToBody)(scope);
+ if (appendToBodyValue !== false) {
+ appendToBody = true;
+ }
+ }
+
+ if (appendToBody && !appendTo) {
+ appendTo = body;
+ }
+
+ if (appendTo && self.dropdownMenu) {
+ if (isOpen) {
+ appendTo.append(self.dropdownMenu);
+ $element.on('$destroy', removeDropdownMenu);
+ } else {
+ $element.off('$destroy', removeDropdownMenu);
+ removeDropdownMenu();
+ }
+ }
+
if (appendTo && self.dropdownMenu) {
var pos = $position.positionElements($element, self.dropdownMenu, 'bottom-left', true),
css,
rightalign,
- scrollbarWidth;
+ scrollbarPadding,
+ scrollbarWidth = 0;
css = {
top: pos.top + 'px',
@@ -206,7 +286,12 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
css.right = 'auto';
} else {
css.left = 'auto';
- scrollbarWidth = $position.scrollbarWidth(true);
+ scrollbarPadding = $position.scrollbarPadding(appendTo);
+
+ if (scrollbarPadding.heightOverflow && scrollbarPadding.scrollbarWidth) {
+ scrollbarWidth = scrollbarPadding.scrollbarWidth;
+ }
+
css.right = window.innerWidth - scrollbarWidth -
(pos.left + $element.prop('offsetWidth')) + 'px';
}
@@ -230,10 +315,18 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
}
var openContainer = appendTo ? appendTo : $element;
- var hasOpenClass = openContainer.hasClass(appendTo ? appendToOpenClass : openClass);
+ var dropdownOpenClass = appendTo ? appendToOpenClass : openClass;
+ var hasOpenClass = openContainer.hasClass(dropdownOpenClass);
+ var isOnlyOpen = uibDropdownService.isOnlyOpen($scope, appendTo);
if (hasOpenClass === !isOpen) {
- $animate[isOpen ? 'addClass' : 'removeClass'](openContainer, appendTo ? appendToOpenClass : openClass).then(function() {
+ var toggleClass;
+ if (appendTo) {
+ toggleClass = !isOnlyOpen ? 'addClass' : 'removeClass';
+ } else {
+ toggleClass = isOpen ? 'addClass' : 'removeClass';
+ }
+ $animate[toggleClass](openContainer, dropdownOpenClass).then(function() {
if (angular.isDefined(isOpen) && isOpen !== wasOpen) {
toggleInvoker($scope, { open: !!isOpen });
}
@@ -248,13 +341,17 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
var newEl = dropdownElement;
self.dropdownMenu.replaceWith(newEl);
self.dropdownMenu = newEl;
+ $document.on('keydown', uibDropdownService.keybindFilter);
});
});
+ } else {
+ $document.on('keydown', uibDropdownService.keybindFilter);
}
scope.focusToggleElement();
- uibDropdownService.open(scope, $element);
+ uibDropdownService.open(scope, $element, appendTo);
} else {
+ uibDropdownService.close(scope, $element, appendTo);
if (self.dropdownMenuTemplateUrl) {
if (templateScope) {
templateScope.$destroy();
@@ -264,7 +361,6 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
self.dropdownMenu = newEl;
}
- uibDropdownService.close(scope, $element);
self.selectedOption = null;
}
@@ -328,7 +424,7 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
}
};
- element.bind('click', toggleDropdown);
+ element.on('click', toggleDropdown);
// WAI-ARIA
element.attr({ 'aria-haspopup': true, 'aria-expanded': false });
@@ -337,7 +433,7 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
});
scope.$on('$destroy', function() {
- element.unbind('click', toggleDropdown);
+ element.off('click', toggleDropdown);
});
}
};
diff --git a/src/dropdown/index-nocss.js b/src/dropdown/index-nocss.js
index 3234abba0a..690d7008ff 100644
--- a/src/dropdown/index-nocss.js
+++ b/src/dropdown/index-nocss.js
@@ -1,3 +1,4 @@
+require('../multiMap');
require('../position/index-nocss.js');
require('./dropdown');
diff --git a/src/dropdown/test/dropdown.spec.js b/src/dropdown/test/dropdown.spec.js
index 197d148580..17226b5c5e 100644
--- a/src/dropdown/test/dropdown.spec.js
+++ b/src/dropdown/test/dropdown.spec.js
@@ -35,7 +35,7 @@ describe('uib-dropdown', function() {
describe('basic', function() {
function dropdown() {
- return $compile('- Hello
- Hello
- Hello
- Hello
- Hello
- Hello
- Hello
- Hello
- Hello
- Hello
- Hello
- Hello
- Hello
- Hello
- Hello
- Hello
- Hello
- Hello
+
diff --git a/src/modal/docs/demo.js b/src/modal/docs/demo.js
index 1055775653..53b335dad1 100644
--- a/src/modal/docs/demo.js
+++ b/src/modal/docs/demo.js
@@ -1,51 +1,126 @@
-angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {
+angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($uibModal, $log, $document) {
+ var $ctrl = this;
+ $ctrl.items = ['item1', 'item2', 'item3'];
- $scope.items = ['item1', 'item2', 'item3'];
-
- $scope.animationsEnabled = true;
-
- $scope.open = function (size) {
+ $ctrl.animationsEnabled = true;
+ $ctrl.open = function (size, parentSelector) {
+ var parentElem = parentSelector ?
+ angular.element($document[0].querySelector('.modal-demo ' + parentSelector)) : undefined;
var modalInstance = $uibModal.open({
- animation: $scope.animationsEnabled,
+ animation: $ctrl.animationsEnabled,
+ ariaLabelledBy: 'modal-title',
+ ariaDescribedBy: 'modal-body',
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
+ controllerAs: '$ctrl',
size: size,
+ appendTo: parentElem,
resolve: {
items: function () {
- return $scope.items;
+ return $ctrl.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
- $scope.selected = selectedItem;
+ $ctrl.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
- $scope.toggleAnimation = function () {
- $scope.animationsEnabled = !$scope.animationsEnabled;
+ $ctrl.openComponentModal = function () {
+ var modalInstance = $uibModal.open({
+ animation: $ctrl.animationsEnabled,
+ component: 'modalComponent',
+ resolve: {
+ items: function () {
+ return $ctrl.items;
+ }
+ }
+ });
+
+ modalInstance.result.then(function (selectedItem) {
+ $ctrl.selected = selectedItem;
+ }, function () {
+ $log.info('modal-component dismissed at: ' + new Date());
+ });
};
+ $ctrl.openMultipleModals = function () {
+ $uibModal.open({
+ animation: $ctrl.animationsEnabled,
+ ariaLabelledBy: 'modal-title-bottom',
+ ariaDescribedBy: 'modal-body-bottom',
+ templateUrl: 'stackedModal.html',
+ size: 'sm',
+ controller: function($scope) {
+ $scope.name = 'bottom';
+ }
+ });
+
+ $uibModal.open({
+ animation: $ctrl.animationsEnabled,
+ ariaLabelledBy: 'modal-title-top',
+ ariaDescribedBy: 'modal-body-top',
+ templateUrl: 'stackedModal.html',
+ size: 'sm',
+ controller: function($scope) {
+ $scope.name = 'top';
+ }
+ });
+ };
+
+ $ctrl.toggleAnimation = function () {
+ $ctrl.animationsEnabled = !$ctrl.animationsEnabled;
+ };
});
// Please note that $uibModalInstance represents a modal window (instance) dependency.
// It is not the same as the $uibModal service used above.
-angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items) {
-
- $scope.items = items;
- $scope.selected = {
- item: $scope.items[0]
+angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($uibModalInstance, items) {
+ var $ctrl = this;
+ $ctrl.items = items;
+ $ctrl.selected = {
+ item: $ctrl.items[0]
};
- $scope.ok = function () {
- $uibModalInstance.close($scope.selected.item);
+ $ctrl.ok = function () {
+ $uibModalInstance.close($ctrl.selected.item);
};
- $scope.cancel = function () {
+ $ctrl.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
+
+// Please note that the close and dismiss bindings are from $uibModalInstance.
+
+angular.module('ui.bootstrap.demo').component('modalComponent', {
+ templateUrl: 'myModalContent.html',
+ bindings: {
+ resolve: '<',
+ close: '&',
+ dismiss: '&'
+ },
+ controller: function () {
+ var $ctrl = this;
+
+ $ctrl.$onInit = function () {
+ $ctrl.items = $ctrl.resolve.items;
+ $ctrl.selected = {
+ item: $ctrl.items[0]
+ };
+ };
+
+ $ctrl.ok = function () {
+ $ctrl.close({$value: $ctrl.selected.item});
+ };
+
+ $ctrl.cancel = function () {
+ $ctrl.dismiss({$value: 'cancel'});
+ };
+ }
+});
diff --git a/src/modal/docs/readme.md b/src/modal/docs/readme.md
index 50f3fc9105..66b6f36803 100644
--- a/src/modal/docs/readme.md
+++ b/src/modal/docs/readme.md
@@ -1,5 +1,5 @@
`$uibModal` is a service to create modal windows.
-Creating modals is straightforward: create a template, a controller and reference them when using `$uibModal`.
+Creating modals is straightforward: create a template and controller, and reference them when using `$uibModal`.
The `$uibModal` service has only one method: `open(options)`.
@@ -10,15 +10,23 @@ The `$uibModal` service has only one method: `open(options)`.
* `animation`
_(Type: `boolean`, Default: `true`)_ -
Set to false to disable animations on new modal/backdrop. Does not toggle animations for modals/backdrops that are already displayed.
-
-* `appendTo`
+
+* `appendTo`
_(Type: `angular.element`, Default: `body`: Example: `$document.find('aside').eq(0)`)_ -
Appends the modal to a specific element.
-
+
+* `ariaDescribedBy`
+ _(Type: `string`, `my-modal-description`)_ -
+ Sets the [`aria-describedby`](https://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby) property on the modal. The value should be an id (without the leading `#`) pointing to the element that describes your modal. Typically, this will be the text on your modal, but does not include something the user would interact with, like buttons or a form. Omitting this option will not impact sighted users but will weaken your accessibility support.
+
+* `ariaLabelledBy`
+ _(Type: `string`, `my-modal-title`)_ -
+ Sets the [`aria-labelledby`](https://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby) property on the modal. The value should be an id (without the leading `#`) pointing to the element that labels your modal. Typically, this will be a header element. Omitting this option will not impact sighted users but will weaken your accessibility support.
+
* `backdrop`
_(Type: `boolean|string`, Default: `true`)_ -
Controls presence of a backdrop. Allowed values: `true` (default), `false` (no backdrop), `'static'` (disables modal closing by click on the backdrop).
-
+
* `backdropClass`
_(Type: `string`)_ -
Additional CSS class(es) to be added to a modal backdrop template.
@@ -27,15 +35,29 @@ The `$uibModal` service has only one method: `open(options)`.
_(Type: `boolean`, Default: `false`)_ -
When used with `controllerAs` & set to `true`, it will bind the $scope properties onto the controller.
+* `component`
+ _(Type: `string`, Example: `myComponent`)_ -
+ A string reference to the component to be rendered that is registered with Angular's compiler. If using a directive, the directive must have `restrict: 'E'` and a template or templateUrl set.
+
+ It supports these bindings:
+
+ * `close` - A method that can be used to close a modal, passing a result. The result must be passed in this format: `{$value: myResult}`
+
+ * `dismiss` - A method that can be used to dismiss a modal, passing a result. The result must be passed in this format: `{$value: myRejectedResult}`
+
+ * `modalInstance` - The modal instance. This is the same `$uibModalInstance` injectable found when using `controller`.
+
+ * `resolve` - An object of the modal resolve values. See [UI Router resolves](#ui-router-resolves) for details.
+
* `controller`
_(Type: `function|string|array`, Example: `MyModalController`)_ -
A controller for the modal instance, either a controller name as a string, or an inline controller function, optionally wrapped in array notation for dependency injection. Allows the controller-as syntax. Has a special `$uibModalInstance` injectable to access the modal instance.
* `controllerAs`
- _(Type: `string`, Example: `ctrl`)_ -
+ _(Type: `string`, Example: `ctrl`)_ -
An alternative to the controller-as syntax. Requires the `controller` option to be provided as well.
-* `keyboard` -
+* `keyboard` -
_(Type: `boolean`, Default: `true`)_ -
Indicates whether the dialog should be closable by hitting the ESC key.
@@ -76,7 +98,7 @@ The `$uibModal` service has only one method: `open(options)`.
CSS class(es) to be added to the top modal window.
Global defaults may be set for `$uibModal` via `$uibModalProvider.options`.
-
+
#### return
The `open` method returns a modal instance, an object with the following properties:
@@ -103,8 +125,8 @@ The `open` method returns a modal instance, an object with the following propert
* `rendered`
_(Type: `promise`)_ -
- Is resolved when a modal is rendered.
-
+ Is resolved when a modal is rendered.
+
---
The scope associated with modal's content is augmented with:
@@ -125,9 +147,9 @@ Also, when using `bindToController`, you can define an `$onInit` method in the c
Events fired:
-* `$uibUnscheduledDestruction` -
+* `$uibUnscheduledDestruction` -
This event is fired if the $scope is destroyed via unexpected mechanism, such as it being passed in the modal options and a $route/$state transition occurs. The modal will also be dismissed.
-
+
* `modal.closing` -
This event is broadcast to the modal scope before the modal closes. If the listener calls preventDefault() on the event, then the modal will remain open.
Also, the `$close` and `$dismiss` methods returns true if the event was executed. This event also includes a parameter for the result/reason and a boolean that indicates whether the modal is being closed (true) or dismissed.
@@ -136,4 +158,4 @@ Events fired:
If one wants to have the modal resolve using [UI Router's](https://github.com/angular-ui/ui-router) pre-1.0 resolve mechanism, one can call `$uibResolve.setResolver('$resolve')` in the configuration phase of the application. One can also provide a custom resolver as well, as long as the signature conforms to UI Router's [$resolve](http://angular-ui.github.io/ui-router/site/#/api/ui.router.util.$resolve).
-When the modal is opened with a controller, a `$resolve` object is exposed on the template with the resolved values from the resolve object.
+When the modal is opened with a controller, a `$resolve` object is exposed on the template with the resolved values from the resolve object. If using the component option, see details on how to access this object in component section of the modal documentation.
diff --git a/src/modal/index-nocss.js b/src/modal/index-nocss.js
index 10473fae44..d3f8a94b7d 100644
--- a/src/modal/index-nocss.js
+++ b/src/modal/index-nocss.js
@@ -1,11 +1,11 @@
+require('../multiMap');
require('../position/index-nocss.js');
require('../stackedMap');
-require('../../template/modal/backdrop.html.js');
require('../../template/modal/window.html.js');
require('./modal');
var MODULE_NAME = 'ui.bootstrap.module.modal';
-angular.module(MODULE_NAME, ['ui.bootstrap.modal', 'uib/template/modal/backdrop.html', 'uib/template/modal/window.html']);
+angular.module(MODULE_NAME, ['ui.bootstrap.modal', 'uib/template/modal/window.html']);
module.exports = MODULE_NAME;
diff --git a/src/modal/modal.js b/src/modal/modal.js
index 356299da8b..679ff188e8 100644
--- a/src/modal/modal.js
+++ b/src/modal/modal.js
@@ -1,59 +1,4 @@
-angular.module('ui.bootstrap.modal', ['ui.bootstrap.stackedMap', 'ui.bootstrap.position'])
-/**
- * A helper, internal data structure that stores all references attached to key
- */
- .factory('$$multiMap', function() {
- return {
- createNew: function() {
- var map = {};
-
- return {
- entries: function() {
- return Object.keys(map).map(function(key) {
- return {
- key: key,
- value: map[key]
- };
- });
- },
- get: function(key) {
- return map[key];
- },
- hasKey: function(key) {
- return !!map[key];
- },
- keys: function() {
- return Object.keys(map);
- },
- put: function(key, value) {
- if (!map[key]) {
- map[key] = [];
- }
-
- map[key].push(value);
- },
- remove: function(key, value) {
- var values = map[key];
-
- if (!values) {
- return;
- }
-
- var idx = values.indexOf(value);
-
- if (idx !== -1) {
- values.splice(idx, 1);
- }
-
- if (!values.length) {
- delete map[key];
- }
- }
- };
- }
- };
- })
-
+angular.module('ui.bootstrap.modal', ['ui.bootstrap.multiMap', 'ui.bootstrap.stackedMap', 'ui.bootstrap.position'])
/**
* Pluggable resolve mechanism for the modal resolve resolution
* Supports UI Router's $resolve service
@@ -106,8 +51,7 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.stackedMap', 'ui.bootstrap.p
.directive('uibModalBackdrop', ['$animate', '$injector', '$uibModalStack',
function($animate, $injector, $modalStack) {
return {
- replace: true,
- templateUrl: 'uib/template/modal/backdrop.html',
+ restrict: 'A',
compile: function(tElement, tAttrs) {
tElement.addClass(tAttrs.backdropClass);
return linkFn;
@@ -136,13 +80,12 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.stackedMap', 'ui.bootstrap.p
scope: {
index: '@'
},
- replace: true,
+ restrict: 'A',
transclude: true,
templateUrl: function(tElement, tAttrs) {
return tAttrs.templateUrl || 'uib/template/modal/window.html';
},
link: function(scope, element, attrs) {
- element.addClass(attrs.windowClass || '');
element.addClass(attrs.windowTopClass || '');
scope.size = attrs.size;
@@ -165,14 +108,11 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.stackedMap', 'ui.bootstrap.p
// {@link Attribute#$observe} on it. For more details please see {@link TableColumnResize}.
scope.$isRendered = true;
- // Deferred object that will be resolved when this modal is render.
+ // Deferred object that will be resolved when this modal is rendered.
var modalRenderDeferObj = $q.defer();
- // Observe function will be called on next digest cycle after compilation, ensuring that the DOM is ready.
- // In order to use this way of finding whether DOM is ready, we need to observe a scope property used in modal's template.
- attrs.$observe('modalRender', function(value) {
- if (value === 'true') {
- modalRenderDeferObj.resolve();
- }
+ // Resolve render promise post-digest
+ scope.$$postDigest(function() {
+ modalRenderDeferObj.resolve();
});
modalRenderDeferObj.promise.then(function() {
@@ -201,7 +141,7 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.stackedMap', 'ui.bootstrap.p
/**
* If something within the freshly-opened modal already has focus (perhaps via a
- * directive that causes focus). then no need to try and focus anything.
+ * directive that causes focus) then there's no need to try to focus anything.
*/
if (!($document[0].activeElement && element[0].contains($document[0].activeElement))) {
var inputWithAutofocus = element[0].querySelector('[autofocus]');
@@ -235,16 +175,16 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.stackedMap', 'ui.bootstrap.p
};
})
- .directive('uibModalTransclude', function() {
+ .directive('uibModalTransclude', ['$animate', function($animate) {
return {
link: function(scope, element, attrs, controller, transclude) {
transclude(scope.$parent, function(clone) {
element.empty();
- element.append(clone);
+ $animate.enter(clone, element);
});
}
};
- })
+ }])
.factory('$uibModalStack', ['$animate', '$animateCss', '$document',
'$compile', '$rootScope', '$q', '$$multiMap', '$$stackedMap', '$uibPosition',
@@ -259,12 +199,22 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.stackedMap', 'ui.bootstrap.p
};
var topModalIndex = 0;
var previousTopOpenedModal = null;
+ var ARIA_HIDDEN_ATTRIBUTE_NAME = 'data-bootstrap-modal-aria-hidden-count';
//Modal focus behavior
- var tabableSelector = 'a[href], area[href], input:not([disabled]), ' +
- 'button:not([disabled]),select:not([disabled]), textarea:not([disabled]), ' +
- 'iframe, object, embed, *[tabindex], *[contenteditable=true]';
+ var tabbableSelector = 'a[href], area[href], input:not([disabled]):not([tabindex=\'-1\']), ' +
+ 'button:not([disabled]):not([tabindex=\'-1\']),select:not([disabled]):not([tabindex=\'-1\']), textarea:not([disabled]):not([tabindex=\'-1\']), ' +
+ 'iframe, object, embed, *[tabindex]:not([tabindex=\'-1\']), *[contenteditable=true]';
var scrollbarPadding;
+ var SNAKE_CASE_REGEXP = /[A-Z]/g;
+
+ // TODO: extract into common dependency with tooltip
+ function snake_case(name) {
+ var separator = '-';
+ return name.replace(SNAKE_CASE_REGEXP, function(letter, pos) {
+ return (pos ? separator : '') + letter.toLowerCase();
+ });
+ }
function isVisible(element) {
return !!(element.offsetWidth ||
@@ -380,6 +330,10 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.stackedMap', 'ui.bootstrap.p
afterAnimating.done = true;
$animate.leave(domEl).then(function() {
+ if (done) {
+ done();
+ }
+
domEl.remove();
if (closedDeferred) {
closedDeferred.resolve();
@@ -387,9 +341,6 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.stackedMap', 'ui.bootstrap.p
});
scope.$destroy();
- if (done) {
- done();
- }
}
}
@@ -468,66 +419,152 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.stackedMap', 'ui.bootstrap.p
var appendToElement = modal.appendTo,
currBackdropIndex = backdropIndex();
- if (!appendToElement.length) {
- throw new Error('appendTo element not found. Make sure that the element passed is in DOM.');
- }
-
if (currBackdropIndex >= 0 && !backdropDomEl) {
backdropScope = $rootScope.$new(true);
backdropScope.modalOptions = modal;
backdropScope.index = currBackdropIndex;
backdropDomEl = angular.element('');
- backdropDomEl.attr('backdrop-class', modal.backdropClass);
+ backdropDomEl.attr({
+ 'class': 'modal-backdrop',
+ 'ng-style': '{\'z-index\': 1040 + (index && 1 || 0) + index*10}',
+ 'uib-modal-animation-class': 'fade',
+ 'modal-in-class': 'in'
+ });
+ if (modal.backdropClass) {
+ backdropDomEl.addClass(modal.backdropClass);
+ }
+
if (modal.animation) {
backdropDomEl.attr('modal-animation', 'true');
}
$compile(backdropDomEl)(backdropScope);
$animate.enter(backdropDomEl, appendToElement);
- scrollbarPadding = $uibPosition.scrollbarPadding(appendToElement);
- if (scrollbarPadding.heightOverflow && scrollbarPadding.scrollbarWidth) {
- appendToElement.css({paddingRight: scrollbarPadding.right + 'px'});
+ if ($uibPosition.isScrollable(appendToElement)) {
+ scrollbarPadding = $uibPosition.scrollbarPadding(appendToElement);
+ if (scrollbarPadding.heightOverflow && scrollbarPadding.scrollbarWidth) {
+ appendToElement.css({paddingRight: scrollbarPadding.right + 'px'});
+ }
}
}
+ var content;
+ if (modal.component) {
+ content = document.createElement(snake_case(modal.component.name));
+ content = angular.element(content);
+ content.attr({
+ resolve: '$resolve',
+ 'modal-instance': '$uibModalInstance',
+ close: '$close($value)',
+ dismiss: '$dismiss($value)'
+ });
+ } else {
+ content = modal.content;
+ }
+
// Set the top modal index based on the index of the previous top modal
topModalIndex = previousTopOpenedModal ? parseInt(previousTopOpenedModal.value.modalDomEl.attr('index'), 10) + 1 : 0;
var angularDomEl = angular.element('');
angularDomEl.attr({
+ 'class': 'modal',
'template-url': modal.windowTemplateUrl,
- 'window-class': modal.windowClass,
'window-top-class': modal.windowTopClass,
+ 'role': 'dialog',
+ 'aria-labelledby': modal.ariaLabelledBy,
+ 'aria-describedby': modal.ariaDescribedBy,
'size': modal.size,
'index': topModalIndex,
- 'animate': 'animate'
- }).html(modal.content);
+ 'animate': 'animate',
+ 'ng-style': '{\'z-index\': 1050 + $$topModalIndex*10, display: \'block\'}',
+ 'tabindex': -1,
+ 'uib-modal-animation-class': 'fade',
+ 'modal-in-class': 'in'
+ }).append(content);
+ if (modal.windowClass) {
+ angularDomEl.addClass(modal.windowClass);
+ }
+
if (modal.animation) {
angularDomEl.attr('modal-animation', 'true');
}
appendToElement.addClass(modalBodyClass);
+ if (modal.scope) {
+ // we need to explicitly add the modal index to the modal scope
+ // because it is needed by ngStyle to compute the zIndex property.
+ modal.scope.$$topModalIndex = topModalIndex;
+ }
$animate.enter($compile(angularDomEl)(modal.scope), appendToElement);
openedWindows.top().value.modalDomEl = angularDomEl;
openedWindows.top().value.modalOpener = modalOpener;
+
+ applyAriaHidden(angularDomEl);
+
+ function applyAriaHidden(el) {
+ if (!el || el[0].tagName === 'BODY') {
+ return;
+ }
+
+ getSiblings(el).forEach(function(sibling) {
+ var elemIsAlreadyHidden = sibling.getAttribute('aria-hidden') === 'true',
+ ariaHiddenCount = parseInt(sibling.getAttribute(ARIA_HIDDEN_ATTRIBUTE_NAME), 10);
+
+ if (!ariaHiddenCount) {
+ ariaHiddenCount = elemIsAlreadyHidden ? 1 : 0;
+ }
+
+ sibling.setAttribute(ARIA_HIDDEN_ATTRIBUTE_NAME, ariaHiddenCount + 1);
+ sibling.setAttribute('aria-hidden', 'true');
+ });
+
+ return applyAriaHidden(el.parent());
+
+ function getSiblings(el) {
+ var children = el.parent() ? el.parent().children() : [];
+
+ return Array.prototype.filter.call(children, function(child) {
+ return child !== el[0];
+ });
+ }
+ }
};
function broadcastClosing(modalWindow, resultOrReason, closing) {
return !modalWindow.value.modalScope.$broadcast('modal.closing', resultOrReason, closing).defaultPrevented;
}
+ function unhideBackgroundElements() {
+ Array.prototype.forEach.call(
+ document.querySelectorAll('[' + ARIA_HIDDEN_ATTRIBUTE_NAME + ']'),
+ function(hiddenEl) {
+ var ariaHiddenCount = parseInt(hiddenEl.getAttribute(ARIA_HIDDEN_ATTRIBUTE_NAME), 10),
+ newHiddenCount = ariaHiddenCount - 1;
+ hiddenEl.setAttribute(ARIA_HIDDEN_ATTRIBUTE_NAME, newHiddenCount);
+
+ if (!newHiddenCount) {
+ hiddenEl.removeAttribute(ARIA_HIDDEN_ATTRIBUTE_NAME);
+ hiddenEl.removeAttribute('aria-hidden');
+ }
+ }
+ );
+ }
+
$modalStack.close = function(modalInstance, result) {
var modalWindow = openedWindows.get(modalInstance);
+ unhideBackgroundElements();
if (modalWindow && broadcastClosing(modalWindow, result, true)) {
modalWindow.value.modalScope.$$uibDestructionScheduled = true;
modalWindow.value.deferred.resolve(result);
removeModalWindow(modalInstance, modalWindow.value.modalOpener);
return true;
}
+
return !modalWindow;
};
$modalStack.dismiss = function(modalInstance, reason) {
var modalWindow = openedWindows.get(modalInstance);
+ unhideBackgroundElements();
if (modalWindow && broadcastClosing(modalWindow, reason, false)) {
modalWindow.value.modalScope.$$uibDestructionScheduled = true;
modalWindow.value.deferred.reject(reason);
@@ -599,7 +636,7 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.stackedMap', 'ui.bootstrap.p
if (modalWindow) {
var modalDomE1 = modalWindow.value.modalDomEl;
if (modalDomE1 && modalDomE1.length) {
- var elements = modalDomE1[0].querySelectorAll(tabableSelector);
+ var elements = modalDomE1[0].querySelectorAll(tabbableSelector);
return elements ?
Array.prototype.filter.call(elements, function(element) {
return isVisible(element);
@@ -658,13 +695,22 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.stackedMap', 'ui.bootstrap.p
modalOptions.resolve = modalOptions.resolve || {};
modalOptions.appendTo = modalOptions.appendTo || $document.find('body').eq(0);
+ if (!modalOptions.appendTo.length) {
+ throw new Error('appendTo element not found. Make sure that the element passed is in DOM.');
+ }
+
//verify options
- if (!modalOptions.template && !modalOptions.templateUrl) {
- throw new Error('One of template or templateUrl options is required.');
+ if (!modalOptions.component && !modalOptions.template && !modalOptions.templateUrl) {
+ throw new Error('One of component or template or templateUrl options is required.');
}
- var templateAndResolvePromise =
- $q.all([getTemplatePromise(modalOptions), $uibResolve.resolve(modalOptions.resolve, {}, null, null)]);
+ var templateAndResolvePromise;
+ if (modalOptions.component) {
+ templateAndResolvePromise = $q.when($uibResolve.resolve(modalOptions.resolve, {}, null, null));
+ } else {
+ templateAndResolvePromise =
+ $q.all([getTemplatePromise(modalOptions), $uibResolve.resolve(modalOptions.resolve, {}, null, null)]);
+ }
function resolveWithTemplate() {
return templateAndResolvePromise;
@@ -690,17 +736,34 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.stackedMap', 'ui.bootstrap.p
}
});
+ var modal = {
+ scope: modalScope,
+ deferred: modalResultDeferred,
+ renderDeferred: modalRenderDeferred,
+ closedDeferred: modalClosedDeferred,
+ animation: modalOptions.animation,
+ backdrop: modalOptions.backdrop,
+ keyboard: modalOptions.keyboard,
+ backdropClass: modalOptions.backdropClass,
+ windowTopClass: modalOptions.windowTopClass,
+ windowClass: modalOptions.windowClass,
+ windowTemplateUrl: modalOptions.windowTemplateUrl,
+ ariaLabelledBy: modalOptions.ariaLabelledBy,
+ ariaDescribedBy: modalOptions.ariaDescribedBy,
+ size: modalOptions.size,
+ openedClass: modalOptions.openedClass,
+ appendTo: modalOptions.appendTo
+ };
+
+ var component = {};
var ctrlInstance, ctrlInstantiate, ctrlLocals = {};
- //controllers
- if (modalOptions.controller) {
- ctrlLocals.$scope = modalScope;
- ctrlLocals.$scope.$resolve = {};
- ctrlLocals.$uibModalInstance = modalInstance;
- angular.forEach(tplAndVars[1], function(value, key) {
- ctrlLocals[key] = value;
- ctrlLocals.$scope.$resolve[key] = value;
- });
+ if (modalOptions.component) {
+ constructLocals(component, false, true, false);
+ component.name = modalOptions.component;
+ modal.component = component;
+ } else if (modalOptions.controller) {
+ constructLocals(ctrlLocals, true, false, true);
// the third param will make the controller instantiate later,private api
// @see https://github.com/angular/angular.js/blob/master/src/ng/controller.js#L126
@@ -721,25 +784,31 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.stackedMap', 'ui.bootstrap.p
}
}
- $modalStack.open(modalInstance, {
- scope: modalScope,
- deferred: modalResultDeferred,
- renderDeferred: modalRenderDeferred,
- closedDeferred: modalClosedDeferred,
- content: tplAndVars[0],
- animation: modalOptions.animation,
- backdrop: modalOptions.backdrop,
- keyboard: modalOptions.keyboard,
- backdropClass: modalOptions.backdropClass,
- windowTopClass: modalOptions.windowTopClass,
- windowClass: modalOptions.windowClass,
- windowTemplateUrl: modalOptions.windowTemplateUrl,
- size: modalOptions.size,
- openedClass: modalOptions.openedClass,
- appendTo: modalOptions.appendTo
- });
+ if (!modalOptions.component) {
+ modal.content = tplAndVars[0];
+ }
+
+ $modalStack.open(modalInstance, modal);
modalOpenedDeferred.resolve(true);
+ function constructLocals(obj, template, instanceOnScope, injectable) {
+ obj.$scope = modalScope;
+ obj.$scope.$resolve = {};
+ if (instanceOnScope) {
+ obj.$scope.$uibModalInstance = modalInstance;
+ } else {
+ obj.$uibModalInstance = modalInstance;
+ }
+
+ var resolves = template ? tplAndVars[1] : tplAndVars;
+ angular.forEach(resolves, function(value, key) {
+ if (injectable) {
+ obj[key] = value;
+ }
+
+ obj.$scope.$resolve[key] = value;
+ });
+ }
}, function resolveError(reason) {
modalOpenedDeferred.reject(reason);
modalResultDeferred.reject(reason);
diff --git a/src/modal/test/modal.spec.js b/src/modal/test/modal.spec.js
index 1e43b037d2..4bf85243da 100644
--- a/src/modal/test/modal.spec.js
+++ b/src/modal/test/modal.spec.js
@@ -46,13 +46,68 @@ describe('$uibResolve', function() {
});
});
+describe('uibModalTransclude', function() {
+ var uibModalTranscludeDDO,
+ $animate;
+
+ beforeEach(module('ui.bootstrap.modal'));
+ beforeEach(module(function($provide) {
+ $animate = jasmine.createSpyObj('$animate', ['enter']);
+ $provide.value('$animate', $animate);
+ }));
+
+ beforeEach(inject(function(uibModalTranscludeDirective) {
+ uibModalTranscludeDDO = uibModalTranscludeDirective[0];
+ }));
+
+ describe('when initialised', function() {
+ var scope,
+ element,
+ transcludeSpy,
+ transcludeFn;
+
+ beforeEach(function() {
+ scope = {
+ $parent: 'parentScope'
+ };
+
+ element = jasmine.createSpyObj('containerElement', ['empty']);
+ transcludeSpy = jasmine.createSpy('transcludeSpy').and.callFake(function(scope, fn) {
+ transcludeFn = fn;
+ });
+
+ uibModalTranscludeDDO.link(scope, element, {}, {}, transcludeSpy);
+ });
+
+ it('should call the transclusion function', function() {
+ expect(transcludeSpy).toHaveBeenCalledWith(scope.$parent, jasmine.any(Function));
+ });
+
+ describe('transclusion callback', function() {
+ var transcludedContent;
+
+ beforeEach(function() {
+ transcludedContent = 'my transcluded content';
+ transcludeFn(transcludedContent);
+ });
+
+ it('should empty the element', function() {
+ expect(element.empty).toHaveBeenCalledWith();
+ });
+
+ it('should append the transcluded content', function() {
+ expect($animate.enter).toHaveBeenCalledWith(transcludedContent, element);
+ });
+ });
+ });
+});
+
describe('$uibModal', function() {
var $animate, $controllerProvider, $rootScope, $document, $compile, $templateCache, $timeout, $q;
var $uibModal, $uibModalStack, $uibModalProvider;
beforeEach(module('ngAnimateMock'));
beforeEach(module('ui.bootstrap.modal'));
- beforeEach(module('uib/template/modal/backdrop.html'));
beforeEach(module('uib/template/modal/window.html'));
beforeEach(module(function(_$controllerProvider_, _$uibModalProvider_, $compileProvider) {
$controllerProvider = _$controllerProvider_;
@@ -76,6 +131,16 @@ describe('$uibModal', function() {
elem.focus();
}
};
+ }).component('fooBar', {
+ bindings: {
+ resolve: '<',
+ modalInstance: '<',
+ close: '&',
+ dismiss: '&'
+ },
+ controller: angular.noop,
+ controllerAs: 'foobar',
+ template: '
+
-
-
-
-
-
\ No newline at end of file
+
+
+
+
+
+
+
+ Selection from a modal: {{ selected }}
-Selection from a modal: {{ $ctrl.selected }}
+
+
+Foo Bar
'
});
}));
@@ -96,6 +161,7 @@ describe('$uibModal', function() {
toBeResolvedWith: function(util, customEqualityTesters) {
return {
compare: function(promise, expected) {
+ var called = false;
promise.then(function(result) {
expect(result).toEqual(expected);
@@ -104,10 +170,18 @@ describe('$uibModal', function() {
} else {
result.message = 'Expected "' + angular.mock.dump(result) + '" to be resolved with "' + expected + '".';
}
+ }, function(result) {
+ fail('Expected "' + angular.mock.dump(result) + '" to be resolved with "' + expected + '".');
+ })['finally'](function() {
+ called = true;
});
$rootScope.$digest();
+ if (!called) {
+ fail('Expected "' + angular.mock.dump(result) + '" to be resolved with "' + expected + '".');
+ }
+
return {pass: true};
}
};
@@ -116,9 +190,10 @@ describe('$uibModal', function() {
return {
compare: function(promise, expected) {
var result = {};
+ var called = false;
- promise.then(function() {
-
+ promise.then(function(result) {
+ fail('Expected "' + angular.mock.dump(result) + '" to be rejected with "' + expected + '".');
}, function(result) {
expect(result).toEqual(expected);
@@ -127,10 +202,16 @@ describe('$uibModal', function() {
} else {
result.message = 'Expected "' + angular.mock.dump(result) + '" to be rejected with "' + expected + '".';
}
+ })['finally'](function() {
+ called = true;
});
$rootScope.$digest();
+ if (!called) {
+ fail('Expected "' + angular.mock.dump(result) + '" to be rejected with "' + expected + '".');
+ }
+
return {pass: true};
}
};
@@ -215,6 +296,8 @@ describe('$uibModal', function() {
function open(modalOptions, noFlush, noDigest) {
var modal = $uibModal.open(modalOptions);
+ modal.opened['catch'](angular.noop);
+ modal.result['catch'](angular.noop);
if (!noDigest) {
$rootScope.$digest();
@@ -445,7 +528,7 @@ describe('$uibModal', function() {
var modal = open({template: 'Content
'});
$rootScope.$digest();
- expect(document.activeElement.tagName).toBe('DIV');
+ expect(document.activeElement.className.split(' ')).toContain('modal');
expect($document).toHaveModalsOpen(1);
triggerKeyDown($document, 27);
@@ -575,7 +658,7 @@ describe('$uibModal', function() {
it('should not focus on the element that has autofocus attribute when the modal is opened and something in the modal already has focus and the animations have finished', function() {
function openAndCloseModalWithAutofocusElement() {
- var modal = open({template: ''});
+ var modal = open({template: ''});
$rootScope.$digest();
expect(angular.element('#auto-focus-element')).not.toHaveFocus();
expect(angular.element('#pre-focus-element')).toHaveFocus();
@@ -617,7 +700,7 @@ describe('$uibModal', function() {
$rootScope.$digest();
$animate.flush();
- expect(document.activeElement.tagName).toBe('DIV');
+ expect(document.activeElement.className.split(' ')).toContain('modal');
close(modal, 'closed ok');
@@ -807,6 +890,52 @@ describe('$uibModal', function() {
initialPage.remove();
});
+
+ it('should change focus to next tabbable element when tab is pressed', function() {
+ var initialPage = angular.element('Outland link');
+ angular.element(document.body).append(initialPage);
+ initialPage.focus();
+
+ open({
+ template:'a' +
+ 'bc' +
+ '',
+ keyboard: false
+ });
+ $rootScope.$digest();
+ expect($document).toHaveModalsOpen(1);
+
+ $('#tab-focus-link3').focus();
+ expect(document.activeElement.getAttribute('id')).toBe('tab-focus-link3');
+
+ triggerKeyDown(angular.element(document.activeElement), 9, false);
+ expect(document.activeElement.getAttribute('id')).toBe('tab-focus-link1');
+
+ initialPage.remove();
+ });
+
+ it('should change focus to previous tabbable element when shift+tab is pressed', function() {
+ var initialPage = angular.element('Outland link');
+ angular.element(document.body).append(initialPage);
+ initialPage.focus();
+
+ open({
+ template:'a' +
+ 'bc' +
+ '',
+ keyboard: false
+ });
+ $rootScope.$digest();
+ expect($document).toHaveModalsOpen(1);
+
+ $('#tab-focus-link1').focus();
+ expect(document.activeElement.getAttribute('id')).toBe('tab-focus-link1');
+
+ triggerKeyDown(angular.element(document.activeElement), 9, true);
+ expect(document.activeElement.getAttribute('id')).toBe('tab-focus-link3');
+
+ initialPage.remove();
+ });
});
describe('default options can be changed in a provider', function() {
@@ -829,16 +958,89 @@ describe('$uibModal', function() {
});
});
- describe('option by option', function () {
- describe('template and templateUrl', function () {
- it('should throw an error if none of template and templateUrl are provided', function() {
+ describe('option by option', function() {
+ describe('component', function() {
+ function getModalComponent($document) {
+ return $document.find('body > div.modal > div.modal-dialog > div.modal-content foo-bar');
+ }
+
+ it('should use as modal content', function() {
+ open({
+ component: 'fooBar'
+ });
+
+ var component = getModalComponent($document);
+ expect(component.html()).toBe('Foo Bar
');
+ });
+
+ it('should bind expected values', function() {
+ var modal = open({
+ component: 'fooBar',
+ resolve: {
+ foo: function() {
+ return 'bar';
+ }
+ }
+ });
+
+ var component = getModalComponent($document);
+ var componentScope = component.isolateScope();
+
+ expect(componentScope.foobar.resolve.foo).toBe('bar');
+ expect(componentScope.foobar.modalInstance).toBe(modal);
+ expect(componentScope.foobar.close).toEqual(jasmine.any(Function));
+ expect(componentScope.foobar.dismiss).toEqual(jasmine.any(Function));
+ });
+
+ it('should close the modal', function() {
+ var modal = open({
+ component: 'fooBar',
+ resolve: {
+ foo: function() {
+ return 'bar';
+ }
+ }
+ });
+
+ var component = getModalComponent($document);
+ var componentScope = component.isolateScope();
+
+ componentScope.foobar.close({
+ $value: 'baz'
+ });
+
+ expect(modal.result).toBeResolvedWith('baz');
+ });
+
+ it('should dismiss the modal', function() {
+ var modal = open({
+ component: 'fooBar',
+ resolve: {
+ foo: function() {
+ return 'bar';
+ }
+ }
+ });
+
+ var component = getModalComponent($document);
+ var componentScope = component.isolateScope();
+
+ componentScope.foobar.dismiss({
+ $value: 'baz'
+ });
+
+ expect(modal.result).toBeRejectedWith('baz');
+ });
+ });
+
+ describe('template and templateUrl', function() {
+ it('should throw an error if none of component, template and templateUrl are provided', function() {
expect(function(){
var modal = open({});
- }).toThrow(new Error('One of template or templateUrl options is required.'));
+ }).toThrow(new Error('One of component or template or templateUrl options is required.'));
});
it('should not fail if a templateUrl contains leading / trailing white spaces', function() {
-
$templateCache.put('whitespace.html', ' Whitespaces
');
open({templateUrl: 'whitespace.html'});
expect($document).toHaveModalOpenWithContent('Whitespaces', 'div');
@@ -1289,7 +1491,7 @@ describe('$uibModal', function() {
expect(body).not.toHaveClass('modal-open');
});
- it('should remove the custom class on closing of modal', function() {
+ it('should remove the custom class on closing of modal after animations have completed', function() {
var modal = open({
template: 'dummy modal
',
openedClass: 'foo'
@@ -1297,7 +1499,13 @@ describe('$uibModal', function() {
expect(body).toHaveClass('foo');
- close(modal);
+ close(modal, null, true);
+ expect(body).toHaveClass('foo');
+
+ $animate.flush();
+ $rootScope.$digest();
+ $animate.flush();
+ $rootScope.$digest();
expect(body).not.toHaveClass('foo');
});
@@ -1358,6 +1566,28 @@ describe('$uibModal', function() {
expect(body).not.toHaveClass('modal-open');
});
});
+
+ describe('ariaLabelledBy', function() {
+ it('should add the aria-labelledby property to the modal', function() {
+ open({
+ template: 'Modal Label
Modal description
Modal Label
Modal description
content
')($rootScope);
- $rootScope.$digest();
-
- expect(windowEl).toHaveClass('test');
- expect(windowEl).toHaveClass('foo');
- });
-
it('should support window top class', function () {
$rootScope.animate = false;
var windowEl = $compile('content
')($rootScope);
@@ -1388,13 +1609,12 @@ describe('$uibModal', function() {
});
it('should support custom template url', inject(function($templateCache) {
- $templateCache.put('window.html', '');
+ $templateCache.put('window.html', '');
- var windowEl = $compile('content
')($rootScope);
+ var windowEl = $compile('content
')($rootScope);
$rootScope.$digest();
- expect(windowEl).toHaveClass('mywindow');
- expect(windowEl).toHaveClass('test');
+ expect(windowEl.html()).toBe('content
');
}));
});
@@ -1518,16 +1738,19 @@ describe('$uibModal', function() {
ds[x] = {index: i, deferred: $q.defer(), reject: reject};
var scope = $rootScope.$new();
+ var failed = false;
scope.index = i;
open({
template: '' + i + '
',
scope: scope,
resolve: {
- x: function() { return ds[x].deferred.promise; }
+ x: function() { return ds[x].deferred.promise['catch'](function () {
+ failed = true;
+ }); }
}
}, true).opened.then(function() {
expect($uibModalStack.getTop().value.modalScope.index).toEqual(i);
- actual += i;
+ if (!failed) { actual += i; }
});
});
@@ -1680,7 +1903,6 @@ describe('$uibModal', function() {
content: 'Modal1
'
});
- expect($document).toHaveModalsOpen(0);
$rootScope.$digest();
$animate.flush();
expect($document).toHaveModalsOpen(1);
@@ -1700,7 +1922,6 @@ describe('$uibModal', function() {
modal2Index = parseInt($uibModalStack.getTop().value.modalDomEl.attr('index'), 10);
});
- expect($document).toHaveModalsOpen(1);
$rootScope.$digest();
$animate.flush();
expect($document).toHaveModalsOpen(2);
@@ -1722,7 +1943,6 @@ describe('$uibModal', function() {
modal3Index = parseInt($uibModalStack.getTop().value.modalDomEl.attr('index'), 10);
});
- expect($document).toHaveModalsOpen(1);
$rootScope.$digest();
$animate.flush();
expect($document).toHaveModalsOpen(2);
@@ -1730,6 +1950,104 @@ describe('$uibModal', function() {
expect(modal3Index).toEqual(2);
expect(modal2Index).toBeLessThan(modal3Index);
});
+
+ it('should have top modal with highest z-index', function() {
+ var modal2zIndex = null;
+ var modal3zIndex = null;
+
+ var modal1Instance = {
+ result: $q.defer(),
+ opened: $q.defer(),
+ closed: $q.defer(),
+ rendered: $q.defer(),
+ close: function(result) {
+ return $uibModalStack.close(modal1Instance, result);
+ },
+ dismiss: function(reason) {
+ return $uibModalStack.dismiss(modal1Instance, reason);
+ }
+ };
+ var modal2Instance = {
+ result: $q.defer(),
+ opened: $q.defer(),
+ closed: $q.defer(),
+ rendered: $q.defer(),
+ close: function(result) {
+ return $uibModalStack.close(modal2Instance, result);
+ },
+ dismiss: function(reason) {
+ return $uibModalStack.dismiss(modal2Instance, reason);
+ }
+ };
+ var modal3Instance = {
+ result: $q.defer(),
+ opened: $q.defer(),
+ closed: $q.defer(),
+ rendered: $q.defer(),
+ close: function(result) {
+ return $uibModalStack.close(modal3Instance, result);
+ },
+ dismiss: function(reason) {
+ return $uibModalStack.dismiss(modal3Instance, reason);
+ }
+ };
+
+ var modal1 = $uibModalStack.open(modal1Instance, {
+ appendTo: angular.element(document.body),
+ scope: $rootScope.$new(),
+ deferred: modal1Instance.result,
+ renderDeferred: modal1Instance.rendered,
+ closedDeferred: modal1Instance.closed,
+ content: 'Modal1
'
+ });
+
+ $rootScope.$digest();
+ $animate.flush();
+ expect($document).toHaveModalsOpen(1);
+
+ expect(+$uibModalStack.getTop().value.modalDomEl[0].style.zIndex).toBe(1050);
+
+ var modal2 = $uibModalStack.open(modal2Instance, {
+ appendTo: angular.element(document.body),
+ scope: $rootScope.$new(),
+ deferred: modal2Instance.result,
+ renderDeferred: modal2Instance.rendered,
+ closedDeferred: modal2Instance.closed,
+ content: 'Modal2
'
+ });
+
+ modal2Instance.rendered.promise.then(function() {
+ modal2zIndex = +$uibModalStack.getTop().value.modalDomEl[0].style.zIndex;
+ });
+
+ $rootScope.$digest();
+ $animate.flush();
+ expect($document).toHaveModalsOpen(2);
+
+ expect(modal2zIndex).toBe(1060);
+ close(modal1Instance);
+ expect($document).toHaveModalsOpen(1);
+
+ var modal3 = $uibModalStack.open(modal3Instance, {
+ appendTo: angular.element(document.body),
+ scope: $rootScope.$new(),
+ deferred: modal3Instance.result,
+ renderDeferred: modal3Instance.rendered,
+ closedDeferred: modal3Instance.closed,
+ content: 'Modal3
'
+ });
+
+ modal3Instance.rendered.promise.then(function() {
+ modal3zIndex = +$uibModalStack.getTop().value.modalDomEl[0].style.zIndex;
+ });
+
+ $rootScope.$digest();
+ $animate.flush();
+ expect($document).toHaveModalsOpen(2);
+
+ expect(modal3zIndex).toBe(1070);
+ expect(modal2zIndex).toBeLessThan(modal3zIndex);
+ });
});
describe('modal.closing event', function() {
diff --git a/src/multiMap/index.js b/src/multiMap/index.js
new file mode 100644
index 0000000000..d3db908589
--- /dev/null
+++ b/src/multiMap/index.js
@@ -0,0 +1 @@
+require('./multiMap.js');
diff --git a/src/multiMap/multiMap.js b/src/multiMap/multiMap.js
new file mode 100644
index 0000000000..47bf6d4639
--- /dev/null
+++ b/src/multiMap/multiMap.js
@@ -0,0 +1,55 @@
+angular.module('ui.bootstrap.multiMap', [])
+/**
+ * A helper, internal data structure that stores all references attached to key
+ */
+ .factory('$$multiMap', function() {
+ return {
+ createNew: function() {
+ var map = {};
+
+ return {
+ entries: function() {
+ return Object.keys(map).map(function(key) {
+ return {
+ key: key,
+ value: map[key]
+ };
+ });
+ },
+ get: function(key) {
+ return map[key];
+ },
+ hasKey: function(key) {
+ return !!map[key];
+ },
+ keys: function() {
+ return Object.keys(map);
+ },
+ put: function(key, value) {
+ if (!map[key]) {
+ map[key] = [];
+ }
+
+ map[key].push(value);
+ },
+ remove: function(key, value) {
+ var values = map[key];
+
+ if (!values) {
+ return;
+ }
+
+ var idx = values.indexOf(value);
+
+ if (idx !== -1) {
+ values.splice(idx, 1);
+ }
+
+ if (!values.length) {
+ delete map[key];
+ }
+ }
+ };
+ }
+ };
+ });
diff --git a/src/modal/test/multiMap.spec.js b/src/multiMap/test/multiMap.spec.js
similarity index 96%
rename from src/modal/test/multiMap.spec.js
rename to src/multiMap/test/multiMap.spec.js
index c89624e914..40345144c9 100644
--- a/src/modal/test/multiMap.spec.js
+++ b/src/multiMap/test/multiMap.spec.js
@@ -1,7 +1,7 @@
describe('multi map', function() {
var multiMap;
- beforeEach(module('ui.bootstrap.modal'));
+ beforeEach(module('ui.bootstrap.multiMap'));
beforeEach(inject(function($$multiMap) {
multiMap = $$multiMap.createNew();
}));
diff --git a/src/pager/docs/demo.html b/src/pager/docs/demo.html
index 06e7900208..c88db56e31 100644
--- a/src/pager/docs/demo.html
+++ b/src/pager/docs/demo.html
@@ -1,5 +1,5 @@
Pager
You are currently on page {{currentPage}}
- {{pager.text}}
');
- element = $compile('foo
');
});
it('disables the "previous" link if current page is 1', function() {
@@ -102,7 +102,7 @@ describe('pager directive', function() {
it('executes the `ng-change` expression when an element is clicked', function() {
$rootScope.selectPageHandler = jasmine.createSpy('selectPageHandler');
- element = $compile('baz
');
- element = $compile('baz
');
});
describe('`items-per-page`', function() {
beforeEach(function() {
$rootScope.perpage = 5;
- element = $compile('Default
-The selected page no: {{currentPage}}
Limit the maximum visible buttons
rotate defaulted to true:
- rotate defaulted to true and force-ellipses set to true:
- rotate set to false:
- boundary-link-numbers set to true and rotate defaulted to true:
- boundary-link-numbers set to true and rotate set to false:
- Page: {{bigCurrentPage}} / {{numPages}}
{{pagination.randomText}}
');
var scope = $rootScope.$new();
- element = $compile('foo
');
});
it('allows custom templates', function() {
$templateCache.put('foo/bar.html', 'baz
');
var scope = $rootScope.$new();
- element = $compile('baz
');
});
it('contains num-pages + 2 li elements', function() {
@@ -213,7 +222,7 @@ describe('pagination directive', function() {
describe('`items-per-page`', function() {
beforeEach(function() {
$rootScope.perpage = 5;
- element = $compile('Other
+Default
-Rate: {{rate}} - Readonly is: {{isReadonly}} - Hovering over: {{overStar || "none"}}
@@ -10,6 +10,6 @@ Default
Custom icons
- (Rate: {{x}})
+ (Rate: {{y}})
-
')($rootScope);
$rootScope.$digest();
var inputs = element.find('input');
@@ -2250,7 +2256,7 @@ describe('timepicker directive', function() {
var $scope;
beforeEach(inject(function() {
$scope = $rootScope.$new();
- element = $compile('Time is: {{mytime | date:'shortTime' }}
diff --git a/src/timepicker/test/timepicker.spec.js b/src/timepicker/test/timepicker.spec.js
index 8a8cac4768..74ae439b0c 100644
--- a/src/timepicker/test/timepicker.spec.js
+++ b/src/timepicker/test/timepicker.spec.js
@@ -9,7 +9,7 @@ describe('timepicker directive', function() {
$rootScope.time = newTime(14, 40, 25);
$templateCache = _$templateCache_;
- element = $compile('baz
');
uibTimepickerConfig.templateUrl = newTemplateUrl;
- element = $compile('baz
');
});
});
@@ -1230,6 +1230,7 @@ describe('timepicker directive', function() {
changeInputValueTo(el, 'pizza');
expect($rootScope.time).toBe(null);
expect(el.parent().hasClass('has-error')).toBe(true);
+ expect(el.hasClass('ng-invalid-hours'));
expect(element.hasClass('ng-invalid-time')).toBe(true);
changeInputValueTo(el, 8);
@@ -1247,6 +1248,7 @@ describe('timepicker directive', function() {
changeInputValueTo(el, '8a');
expect($rootScope.time).toBe(null);
expect(el.parent().hasClass('has-error')).toBe(true);
+ expect(el.hasClass('ng-invalid-minutes'));
expect(element.hasClass('ng-invalid-time')).toBe(true);
changeInputValueTo(el, 22);
@@ -1262,6 +1264,7 @@ describe('timepicker directive', function() {
changeInputValueTo(el, 'pizza');
expect($rootScope.time).toBe(null);
expect(el.parent().hasClass('has-error')).toBe(true);
+ expect(el.hasClass('ng-invalid-seconds'));
expect(element.hasClass('ng-invalid-time')).toBe(true);
changeInputValueTo(el, 13);
@@ -1291,6 +1294,9 @@ describe('timepicker directive', function() {
elS.blur();
$rootScope.$digest();
+ expect(elH.hasClass('ng-valid'));
+ expect(elM.hasClass('ng-valid'));
+ expect(elS.hasClass('ng-valid'));
expect(element.hasClass('ng-invalid-time')).toBe(false);
});
@@ -1328,7 +1334,7 @@ describe('timepicker directive', function() {
it('handles 12/24H mode change', function() {
$rootScope.meridian = true;
- element = $compile('baz
');
- element = $compile('baz
');
});
it('should expose the controller on the view', function() {
$templateCache.put('uib/template/timepicker/timepicker.html', '{{timepicker.text}}
foo
');
+ expect(element.html()).toBe('foo
- I can even contain HTML. Check me out! + I can even contain HTML as a + scope variable or + inline string
diff --git a/src/tooltip/docs/readme.md b/src/tooltip/docs/readme.md index d85fb47221..1bc4b04d44 100644 --- a/src/tooltip/docs/readme.md +++ b/src/tooltip/docs/readme.md @@ -118,3 +118,5 @@ For Safari 7+ support, if you want to use the **focus** `tooltip-trigger`, you n Click Me ``` + +For Safari (potentially all versions up to 9), there is an issue with the hover CSS selector when using multiple elements grouped close to each other that are using the tooltip - it is possible for multiple elements to gain the hover state when mousing between the elements quickly and exiting the container at the right time. See [issue #5445](https://github.com/angular-ui/bootstrap/issues/5445) for more details. diff --git a/src/tooltip/test/tooltip-template.spec.js b/src/tooltip/test/tooltip-template.spec.js index cec7d4b5cc..e474c6dbc3 100644 --- a/src/tooltip/test/tooltip-template.spec.js +++ b/src/tooltip/test/tooltip-template.spec.js @@ -75,6 +75,7 @@ describe('tooltip template', function() { it('should hide tooltip when template becomes empty', inject(function($timeout) { trigger(elm, 'mouseenter'); + $timeout.flush(0); expect(tooltipScope.isOpen).toBe(true); scope.templateUrl = ''; diff --git a/src/tooltip/test/tooltip.spec.js b/src/tooltip/test/tooltip.spec.js index ddb3a9a0c9..3058429dae 100644 --- a/src/tooltip/test/tooltip.spec.js +++ b/src/tooltip/test/tooltip.spec.js @@ -27,7 +27,7 @@ describe('tooltip', function() { })); afterEach(function() { - $document.off('keypress'); + $document.off('keyup'); }); function trigger(element, evt) { @@ -179,7 +179,6 @@ describe('tooltip', function() { expect(elm.attr('alt')).toBe(scope.alt); ttScope = angular.element(elmBody.children()[1]).isolateScope(); - expect(ttScope.placement).toBe('top'); expect(ttScope.content).toBe(scope.tooltipMsg); trigger(elm, 'mouseleave'); @@ -188,7 +187,6 @@ describe('tooltip', function() { trigger(elm, 'mouseenter'); ttScope = angular.element(elmBody.children()[1]).isolateScope(); - expect(ttScope.placement).toBe('top'); expect(ttScope.content).toBe(scope.tooltipMsg); })); @@ -297,10 +295,9 @@ describe('tooltip', function() { trigger(elm, 'mouseenter'); expect(tooltipScope.isOpen).toBe(false); - $timeout.flush(500); - expect(tooltipScope.isOpen).toBe(false); elmScope.disabled = true; elmScope.$digest(); + $timeout.flush(500); expect(tooltipScope.isOpen).toBe(false); }); @@ -345,22 +342,24 @@ describe('tooltip', function() { expect(tooltipScope.isOpen).toBe(true); expect(tooltipScope2.isOpen).toBe(true); - var evt = $.Event('keypress'); + var evt = $.Event('keyup'); evt.which = 27; $document.trigger(evt); tooltipScope.$digest(); tooltipScope2.$digest(); + $timeout.flush(); expect(tooltipScope.isOpen).toBe(true); expect(tooltipScope2.isOpen).toBe(false); - var evt2 = $.Event('keypress'); + var evt2 = $.Event('keyup'); evt2.which = 27; $document.trigger(evt2); tooltipScope.$digest(); tooltipScope2.$digest(); + $timeout.flush(500); expect(tooltipScope.isOpen).toBe(false); expect(tooltipScope2.isOpen).toBe(false); diff --git a/src/tooltip/test/tooltip2.spec.js b/src/tooltip/test/tooltip2.spec.js index e8df646479..81326e466b 100644 --- a/src/tooltip/test/tooltip2.spec.js +++ b/src/tooltip/test/tooltip2.spec.js @@ -1,5 +1,5 @@ describe('tooltip directive', function() { - var $rootScope, $compile, $document, $timeout; + var $rootScope, $compile, $document, $timeout, body, fragment; beforeEach(module('ui.bootstrap.tooltip')); beforeEach(module('uib/template/tooltip/tooltip-popup.html')); @@ -10,6 +10,8 @@ describe('tooltip directive', function() { $compile = _$compile_; $document = _$document_; $timeout = _$timeout_; + + body = $document.find('body'); })); beforeEach(function() { @@ -39,12 +41,13 @@ describe('tooltip directive', function() { afterEach(function() { $document.off('keypress'); + fragment.remove(); }); function compileTooltip(ttipMarkup) { - var fragment = $compile('
' + ttipMarkup + '
')($rootScope);
+ fragment = $compile('' + ttipMarkup + '
')($rootScope);
$rootScope.$digest();
- return fragment;
+ body.append(fragment);
}
function closeTooltip(hostEl, triggerEvt, shouldNotFlush) {
@@ -62,7 +65,7 @@ describe('tooltip directive', function() {
describe('basic scenarios with default options', function() {
it('shows default tooltip on mouse enter and closes on mouse leave', function() {
- var fragment = compileTooltip('Trigger here');
+ compileTooltip('Trigger here');
trigger(fragment.find('span'), 'mouseenter');
expect(fragment).toHaveOpenTooltips();
@@ -72,16 +75,17 @@ describe('tooltip directive', function() {
});
it('should not show a tooltip when its content is empty', function() {
- var fragment = compileTooltip('');
+ compileTooltip('');
trigger(fragment.find('span'), 'mouseenter');
expect(fragment).not.toHaveOpenTooltips();
});
it('should not show a tooltip when its content becomes empty', function() {
$rootScope.content = 'some text';
- var fragment = compileTooltip('');
+ compileTooltip('');
trigger(fragment.find('span'), 'mouseenter');
+ $timeout.flush(0);
expect(fragment).toHaveOpenTooltips();
$rootScope.content = '';
@@ -92,7 +96,7 @@ describe('tooltip directive', function() {
it('should update tooltip when its content becomes empty', function() {
$rootScope.content = 'some text';
- var fragment = compileTooltip('');
+ compileTooltip('');
$rootScope.content = '';
$rootScope.$digest();
@@ -119,7 +123,7 @@ describe('tooltip directive', function() {
describe(key, function() {
describe('placement', function() {
it('can specify an alternative, valid placement', function() {
- var fragment = compileTooltip('Trigger here');
+ compileTooltip('Trigger here');
trigger(fragment.find('span'), 'mouseenter');
var ttipElement = fragment.find('div.tooltip');
@@ -133,7 +137,7 @@ describe('tooltip directive', function() {
describe('class', function() {
it('can specify a custom class', function() {
- var fragment = compileTooltip('Trigger here');
+ compileTooltip('Trigger here');
trigger(fragment.find('span'), 'mouseenter');
var ttipElement = fragment.find('div.tooltip');
@@ -149,7 +153,7 @@ describe('tooltip directive', function() {
});
it('should show even after close trigger is called multiple times - issue #1847', function() {
- var fragment = compileTooltip('Trigger here');
+ compileTooltip('Trigger here');
trigger(fragment.find('span'), 'mouseenter');
expect(fragment).toHaveOpenTooltips();
@@ -169,7 +173,7 @@ describe('tooltip directive', function() {
});
it('should hide even after show trigger is called multiple times', function() {
- var fragment = compileTooltip('Trigger here');
+ compileTooltip('Trigger here');
trigger(fragment.find('span'), 'mouseenter');
trigger(fragment.find('span'), 'mouseenter');
@@ -179,7 +183,7 @@ describe('tooltip directive', function() {
});
it('should not show tooltips element is disabled (button) - issue #3167', function() {
- var fragment = compileTooltip('');
+ compileTooltip('');
trigger(fragment.find('button'), 'mouseenter');
expect(fragment).toHaveOpenTooltips();
diff --git a/src/tooltip/tooltip.js b/src/tooltip/tooltip.js
index cb3a508561..dd02a077a1 100644
--- a/src/tooltip/tooltip.js
+++ b/src/tooltip/tooltip.js
@@ -71,10 +71,10 @@ angular.module('ui.bootstrap.tooltip', ['ui.bootstrap.position', 'ui.bootstrap.s
*/
this.$get = ['$window', '$compile', '$timeout', '$document', '$uibPosition', '$interpolate', '$rootScope', '$parse', '$$stackedMap', function($window, $compile, $timeout, $document, $position, $interpolate, $rootScope, $parse, $$stackedMap) {
var openedTooltips = $$stackedMap.createNew();
- $document.on('keypress', keypressListener);
+ $document.on('keyup', keypressListener);
$rootScope.$on('$destroy', function() {
- $document.off('keypress', keypressListener);
+ $document.off('keyup', keypressListener);
});
function keypressListener(e) {
@@ -82,7 +82,6 @@ angular.module('ui.bootstrap.tooltip', ['ui.bootstrap.position', 'ui.bootstrap.s
var last = openedTooltips.top();
if (last) {
last.value.close();
- openedTooltips.removeTop();
last = null;
}
}
@@ -126,12 +125,11 @@ angular.module('ui.bootstrap.tooltip', ['ui.bootstrap.position', 'ui.bootstrap.s
(options.useContentExp ?
'content-exp="contentExp()" ' :
'content="' + startSym + 'content' + endSym + '" ') +
- 'placement="' + startSym + 'placement' + endSym + '" ' +
- 'popup-class="' + startSym + 'popupClass' + endSym + '" ' +
- 'animation="animation" ' +
- 'is-open="isOpen" ' +
'origin-scope="origScope" ' +
- 'class="uib-position-measure"' +
+ 'class="uib-position-measure ' + prefix + '" ' +
+ 'tooltip-animation-class="fade"' +
+ 'uib-tooltip-classes ' +
+ 'ng-class="{ in: isOpen }" ' +
'>' +
'