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

feat(carousel): use uib- prefix #4501

Closed
wants to merge 1 commit into from
Closed

feat(carousel): use uib- prefix #4501

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

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 63 additions & 23 deletions src/carousel/carousel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,5 @@
/**
* @ngdoc overview
* @name ui.bootstrap.carousel
*
* @description
* AngularJS version of an image carousel.
*
*/
angular.module('ui.bootstrap.carousel', [])
.controller('CarouselController', ['$scope', '$element', '$interval', '$animate', function($scope, $element, $interval, $animate) {
.controller('UibCarouselController', ['$scope', '$element', '$interval', '$animate', function($scope, $element, $interval, $animate) {
var self = this,
slides = self.slides = $scope.slides = [],
NEW_ANIMATE = angular.version.minor >= 4,
Expand Down Expand Up @@ -220,20 +212,20 @@ angular.module('ui.bootstrap.carousel', [])
* @example
<example module="ui.bootstrap">
<file name="index.html">
<carousel>
<slide>
<uib-carousel>
<uib-slide>
<img src="http://placekitten.com/150/150" style="margin:auto;">
<div class="carousel-caption">
<p>Beautiful!</p>
</div>
</slide>
<slide>
</uib-slide>
<uib-slide>
<img src="http://placekitten.com/100/150" style="margin:auto;">
<div class="carousel-caption">
<p>D'aww!</p>
</div>
</slide>
</carousel>
</uib-slide>
</uib-carousel>
</file>
<file name="demo.css">
.carousel-indicators {
Expand All @@ -243,12 +235,12 @@ angular.module('ui.bootstrap.carousel', [])
</file>
</example>
*/
.directive('carousel', [function() {
.directive('uibCarousel', [function() {
return {
restrict: 'EA',
transclude: true,
replace: true,
controller: 'CarouselController',
controller: 'UibCarouselController',
controllerAs: 'carousel',
require: 'carousel',
templateUrl: function(element, attrs) {
Expand Down Expand Up @@ -278,15 +270,15 @@ angular.module('ui.bootstrap.carousel', [])
<example module="ui.bootstrap">
<file name="index.html">
<div ng-controller="CarouselDemoCtrl">
<carousel>
<slide ng-repeat="slide in slides" active="slide.active" index="$index">
<uib-carousel>
<uib-slide ng-repeat="slide in slides" active="slide.active" index="$index">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{$index}}</h4>
<p>{{slide.text}}</p>
</div>
</slide>
</carousel>
</uib-slide>
</uib-carousel>
Interval, in milliseconds: <input type="number" ng-model="myInterval">
<br />Enter a negative number to stop the interval.
</div>
Expand All @@ -305,9 +297,9 @@ function CarouselDemoCtrl($scope) {
</example>
*/

.directive('slide', function() {
.directive('uibSlide', function() {
return {
require: '^carousel',
require: '^uibCarousel',
restrict: 'EA',
transclude: true,
replace: true,
Expand Down Expand Up @@ -413,3 +405,51 @@ function ($injector, $animate) {
}
};
}]);

Copy link
Contributor

Choose a reason for hiding this comment

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

Remove 3 of the lines

/*depreciated carousel below*/
angular.module('ui.bootstrap.carousel')
.value('$carouselSuppressWarning', false)
.directive('carousel', ['$log', '$carouselSuppressWarning', function($log, $carouselSuppressWarning) {
return {
restrict: 'EA',
transclude: true,
replace: true,
templateUrl: function(element, attrs) {
return attrs.templateUrl || 'template/carousel/carousel.html';
},
scope: {
interval: '=',
noTransition: '=',
noPause: '=',
noWrap: '&'
},
link: function() {
if (!$carouselSuppressWarning) {
$log.warn('carousel is now deprecated. Use uib-carousel instead.');
}
}
};
}])


.directive('slide', ['$log', '$carouselSuppressWarning', function($log, $carouselSuppressWarning) {
return {

restrict: 'EA',
transclude: true,
replace: true,
templateUrl: function(element, attrs) {
return attrs.templateUrl || 'template/carousel/slide.html';
},
scope: {
active: '=?',
actual: '=?',
index: '=?'
},
link: function (scope, element, attrs, carouselCtrl) {
if (!$carouselSuppressWarning) {
$log.warn('slide is now deprecated. Use uib-slide instead.');
}
}
};
}]);
8 changes: 4 additions & 4 deletions src/carousel/docs/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@ Carousel creates a carousel similar to bootstrap's image carousel.

The carousel also offers support for touchscreen devices in the form of swiping. To enable swiping, load the `ngTouch` module as a dependency.

Use a `<carousel>` element with `<slide>` elements inside it. It will automatically cycle through the slides at a given rate, and a current-index variable will be kept in sync with the currently visible slide.
Use a `<uib-carousel>` element with `<uib-slide>` elements inside it. It will automatically cycle through the slides at a given rate, and a current-index variable will be kept in sync with the currently visible slide.

Use the `no-wrap` attribute on a `<carousel>` element to control the looping of slides; setting `no-wrap` to an expression which evaluates to a truthy value will prevent looping.
Use the `no-wrap` attribute on a `<uib-carousel>` element to control the looping of slides; setting `no-wrap` to an expression which evaluates to a truthy value will prevent looping.

Use the `template-url` attribute on a `<carousel>` or `<slide>` element to specify the url of a custom template to override the default templates.
Use the `template-url` attribute on a `<uib-carousel>` or `<uib-slide>` element to specify the url of a custom template to override the default templates.

Use the `actual` attribute on a `<slide>` element to bind the slide model (or any object of interest) onto the slide directive's `$scope`, which makes it available for customization in the carousel template.
Use the `actual` attribute on a `<uib-slide>` element to bind the slide model (or any object of interest) onto the slide directive's `$scope`, which makes it available for customization in the carousel template.
8 changes: 4 additions & 4 deletions src/carousel/docs/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<div ng-controller="CarouselDemoCtrl">
<div style="height: 305px">
<carousel interval="myInterval" no-wrap="noWrapSlides">
<slide ng-repeat="slide in slides" active="slide.active">
<uib-carousel interval="myInterval" no-wrap="noWrapSlides">
<uib-slide ng-repeat="slide in slides" active="slide.active">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{$index}}</h4>
<p>{{slide.text}}</p>
</div>
</slide>
</carousel>
</uib-slide>
</uib-carousel>
</div>
<div class="row">
<div class="col-md-6">
Expand Down
118 changes: 85 additions & 33 deletions src/carousel/test/carousel.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,11 @@ describe('carousel', function() {
{active:false,content:'three'}
];
elm = $compile(
'<carousel interval="interval" no-transition="true" no-pause="nopause">' +
'<slide ng-repeat="slide in slides" active="slide.active">' +
'<uib-carousel interval="interval" no-transition="true" no-pause="nopause">' +
'<uib-slide ng-repeat="slide in slides" active="slide.active">' +
'{{slide.content}}' +
'</slide>' +
'</carousel>'
'</uib-slide>' +
'</uib-carousel>'
)(scope);
scope.interval = 5000;
scope.nopause = undefined;
Expand All @@ -57,7 +57,7 @@ describe('carousel', function() {
it('should allow overriding of the carousel template', function() {
$templateCache.put('foo/bar.html', '<div>foo</div>');

elm = $compile('<carousel template-url="foo/bar.html"></carousel>')(scope);
elm = $compile('<uib-carousel template-url="foo/bar.html"></uib-carousel>')(scope);
$rootScope.$digest();

expect(elm.html()).toBe('foo');
Expand All @@ -67,12 +67,12 @@ describe('carousel', function() {
$templateCache.put('foo/bar.html', '<div class="slide">bar</div>');

elm = $compile(
'<carousel interval="interval" no-transition="true" no-pause="nopause">' +
'<slide template-url="foo/bar.html"></slide>' +
'</carousel>'
'<uib-carousel interval="interval" no-transition="true" no-pause="nopause">' +
'<uib-slide template-url="foo/bar.html"></uib-slide>' +
'</uib-carousel>'
)(scope);
$rootScope.$digest();

Copy link
Contributor

Choose a reason for hiding this comment

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

Remove the whitespace

var slide = elm.find('.slide');
expect(slide.html()).toBe('bar');
});
Expand All @@ -99,11 +99,11 @@ describe('carousel', function() {

it('should stop cycling slides forward when noWrap is truthy', function () {
elm = $compile(
'<carousel interval="interval" no-wrap="noWrap">' +
'<slide ng-repeat="slide in slides" active="slide.active">' +
'<uib-carousel interval="interval" no-wrap="noWrap">' +
'<uib-slide ng-repeat="slide in slides" active="slide.active">' +
'{{slide.content}}' +
'</slide>' +
'</carousel>'
'</uib-slide>' +
'</uib-carousel>'
)(scope);

scope.noWrap = true;
Expand All @@ -123,11 +123,11 @@ describe('carousel', function() {

it('should stop cycling slides backward when noWrap is truthy', function () {
elm = $compile(
'<carousel interval="interval" no-wrap="noWrap">' +
'<slide ng-repeat="slide in slides" active="slide.active">' +
'<uib-carousel interval="interval" no-wrap="noWrap">' +
'<uib-slide ng-repeat="slide in slides" active="slide.active">' +
'{{slide.content}}' +
'</slide>' +
'</carousel>'
'</uib-slide>' +
'</uib-carousel>'
)(scope);

scope.noWrap = true;
Expand All @@ -146,11 +146,11 @@ describe('carousel', function() {
scope.slides=[{active:false,content:'one'}];
scope.$apply();
elm = $compile(
'<carousel interval="interval" no-transition="true">' +
'<slide ng-repeat="slide in slides" active="slide.active">' +
'<uib-carousel interval="interval" no-transition="true">' +
'<uib-slide ng-repeat="slide in slides" active="slide.active">' +
'{{slide.content}}' +
'</slide>' +
'</carousel>'
'</uib-slide>' +
'</uib-carousel>'
)(scope);
var indicators = elm.find('ol.carousel-indicators > li');
expect(indicators.length).toBe(0);
Expand Down Expand Up @@ -348,11 +348,11 @@ describe('carousel', function() {
{active:false,content:'three', id:3}
];
elm = $compile(
'<carousel interval="interval" no-transition="true" no-pause="nopause">' +
'<slide ng-repeat="slide in slides | orderBy: \'id\' " active="slide.active" index="$index">' +
'<uib-carousel interval="interval" no-transition="true" no-pause="nopause">' +
'<uib-slide ng-repeat="slide in slides | orderBy: \'id\' " active="slide.active" index="$index">' +
'{{slide.content}}' +
'</slide>' +
'</carousel>'
'</uib-slide>' +
'</uib-carousel>'
)(scope);
scope.$apply();
scope.slides[0].id = 3;
Expand Down Expand Up @@ -418,7 +418,7 @@ describe('carousel', function() {

beforeEach(function() {
scope = $rootScope.$new();
ctrl = $controller('CarouselController', {$scope: scope, $element: angular.element('<div></div>')});
ctrl = $controller('UibCarouselController', {$scope: scope, $element: angular.element('<div></div>')});
for(var i = 0;i < slides.length;i++){
ctrl.addSlide(slides[i]);
}
Expand Down Expand Up @@ -486,10 +486,10 @@ describe('carousel', function() {
$templateCache.put('template/carousel/carousel.html', '<div>{{carousel.text}}</div>');

var scope = $rootScope.$new();
var elm = $compile('<carousel interval="bar" no-transition="false" no-pause="true"></carousel>')(scope);
var elm = $compile('<uib-carousel interval="bar" no-transition="false" no-pause="true"></uib-carousel>')(scope);
$rootScope.$digest();

var ctrl = elm.controller('carousel');
var ctrl = elm.controller('uibCarousel');

expect(ctrl).toBeDefined();

Expand All @@ -508,18 +508,70 @@ describe('carousel', function() {
{active:false,content:'three'}
];
var elm = $compile(
'<carousel interval="interval" no-transition="true" no-pause="nopause">' +
'<slide ng-repeat="slide in slides" active="slide.active" actual="slide">' +
'<uib-carousel interval="interval" no-transition="true" no-pause="nopause">' +
'<uib-slide ng-repeat="slide in slides" active="slide.active" actual="slide">' +
'{{slide.content}}' +
'</slide>' +
'</carousel>'
'</uib-slide>' +
'</uib-carousel>'
)(scope);
$rootScope.$digest();

var ctrl = elm.controller('carousel');
var ctrl = elm.controller('uibCarousel');

expect(angular.equals(ctrl.slides.map(function(slide) {
return slide.actual;
}), scope.slides)).toBe(true);
});
});

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

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

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

var element = '<carousel interval="interval" no-transition="true" no-pause="nopause">' +
'<slide ng-repeat="slide in slides" active="slide.active">' +
'{{slide.content}}' +
'</slide>' +
'</carousel>';
element = $compile(element)($rootScope);
$rootScope.$digest();
expect($log.warn.calls.count()).toBe(0);
});
});

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

var element = '<carousel interval="interval" no-transition="true" no-pause="nopause">' +
'<slide ng-repeat="slide in slides" active="slide.active">' +
'{{slide.content}}' +
'</slide>' +
'</carousel>';
element = $compile(element)($rootScope);
$rootScope.$digest();

expect($log.warn.calls.count()).toBe(1);
expect($log.warn.calls.argsFor(0)).toEqual(['carousel is now deprecated. Use uib-carousel instead.']);
}));

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

var element = '<carousel interval="interval" no-transition="true" no-pause="nopause">' +
'<slide></slide>' +
'</carousel>';
element = $compile(element)($rootScope);
$rootScope.$digest();

expect($log.warn.calls.count()).toBe(2);
expect($log.warn.calls.argsFor(0)).toEqual(['slide is now deprecated. Use uib-slide instead.']);
}));
});