Skip to content
This repository was archived by the owner on May 10, 2018. It is now read-only.

Commit 976c34c

Browse files
wasbaziwasbazi
committed
feat($compile): add overridable options on compile
Changed options that can be passed for compilation: - rn-carousel-easing - allows any shifty formula to be specified for easing - rn-carousel-duration - allows for transition duration to be specified
1 parent 1d08d7d commit 976c34c

File tree

6 files changed

+82
-74
lines changed

6 files changed

+82
-74
lines changed

‎README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,9 @@ angular.module('MyApp', ['angular-carousel']);
5050
- `rn-carousel-transition` : transition type, can be one of `slide, zoom, hexagon, fadeAndSlide, none`. (default=slide)
5151
- `rn-carousel-locked`: two way binding boolean that lock/unlock the carousel
5252
- `rn-carousel-deep-watch`: Deep watch the collection which enable to dynamically add slides at beginning without corrupting position
53+
- `rn-carousel-easing`: add this attritube to specify a formula for easing, these can be found in the (https://github.com/jeremyckahn/shifty/blob/master/src/shifty.formulas.js)[shifty
54+
library] (default=easeIn)
55+
- `rn-carousel-duration`: add this attritube to set the duration of the transition (default=300)
5356

5457
## Indicators
5558

‎dist/angular-carousel.css‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/angular-carousel.css.map‎

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/angular-carousel.js‎

Lines changed: 66 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/**
22
* Angular Carousel - Mobile friendly touch carousel for AngularJS
3-
* @version v0.3.7 - 2014-11-11
3+
* @version v0.3.7 - 2015-01-16
44
* @link http://revolunet.github.com/angular-carousel
55
* @author Julien Bouquillon <julien@revolunet.com>
66
* @license MIT License, http://www.opensource.org/licenses/MIT
@@ -20,57 +20,36 @@ angular.module('angular-carousel', [
2020

2121
angular.module('angular-carousel')
2222

23-
.directive('rnCarouselAutoSlide', ['$timeout', function($timeout) {
23+
.directive('rnCarouselAutoSlide', ['$interval', function($interval) {
2424
return {
2525
restrict: 'A',
2626
link: function (scope, element, attrs) {
27-
var delay = Math.round(parseFloat(attrs.rnCarouselAutoSlide) * 1000),
28-
timer = increment = false, slidesCount = element.children().length;
29-
30-
if(!scope.carouselExposedIndex){
31-
scope.carouselExposedIndex = 0;
32-
}
33-
stopAutoplay = function () {
34-
if (angular.isDefined(timer)) {
35-
$timeout.cancel(timer);
27+
var stopAutoPlay = function() {
28+
if (scope.autoSlider) {
29+
$interval.cancel(scope.autoSlider);
30+
scope.autoSlider = null;
3631
}
37-
timer = undefined;
3832
};
39-
40-
increment = function () {
41-
if (scope.carouselExposedIndex < slidesCount - 1) {
42-
scope.carouselExposedIndex = scope.carouselExposedIndex + 1;
43-
} else {
44-
scope.carouselExposedIndex = 0;
45-
}
33+
var restartTimer = function() {
34+
scope.autoSlide();
4635
};
4736

48-
restartTimer = function (){
49-
stopAutoplay();
50-
timer = $timeout(increment, delay);
51-
};
52-
53-
scope.$watch('carouselIndex', function(){
54-
restartTimer();
55-
});
56-
57-
restartTimer();
58-
if (attrs.rnCarouselPauseOnHover && attrs.rnCarouselPauseOnHover != 'false'){
59-
element.on('mouseenter', stopAutoplay);
37+
scope.$watch('carouselIndex', restartTimer);
6038

39+
if (attrs.hasOwnProperty('rnCarouselPauseOnHover') && attrs.rnCarouselPauseOnHover !== 'false'){
40+
element.on('mouseenter', stopAutoPlay);
6141
element.on('mouseleave', restartTimer);
6242
}
6343

6444
scope.$on('$destroy', function(){
65-
stopAutoplay();
66-
element.off('mouseenter', stopAutoplay);
45+
stopAutoPlay();
46+
element.off('mouseenter', stopAutoPlay);
6747
element.off('mouseleave', restartTimer);
6848
});
69-
70-
7149
}
7250
};
7351
}]);
52+
7453
angular.module('angular-carousel')
7554

7655
.directive('rnCarouselIndicators', ['$parse', function($parse) {
@@ -286,9 +265,8 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
286265

287266
var defaultOptions = {
288267
transitionType: iAttributes.rnCarouselTransition || 'slide',
289-
transitionEasing: 'easeTo',
290-
transitionDuration: 300,
291-
/* do touchend trigger next slide automatically */
268+
transitionEasing: iAttributes.rnCarouselEasing || 'easeTo',
269+
transitionDuration: parseInt(iAttributes.rnCarouselDuration, 10) || 300,
292270
isSequential: true,
293271
autoSlideDuration: 3,
294272
bufferSize: 5,
@@ -306,23 +284,15 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
306284
destination,
307285
swipeMoved = false,
308286
//animOnIndexChange = true,
309-
currentSlides,
287+
currentSlides = [],
310288
elWidth = null,
311289
elX = null,
312290
animateTransitions = true,
313291
intialState = true,
314292
animating = false,
293+
mouseUpBound = false,
315294
locked = false;
316295

317-
if(iAttributes.rnCarouselControls!==undefined) {
318-
// dont use a directive for this
319-
var tpl = '<div class="rn-carousel-controls">\n' +
320-
' <span class="rn-carousel-control rn-carousel-control-prev" ng-click="prevSlide()" ng-if="carouselIndex > 0"></span>\n' +
321-
' <span class="rn-carousel-control rn-carousel-control-next" ng-click="nextSlide()" ng-if="carouselIndex < ' + repeatCollection + '.length - 1"></span>\n' +
322-
'</div>';
323-
iElement.append($compile(angular.element(tpl))(scope));
324-
}
325-
326296
$swipe.bind(iElement, {
327297
start: swipeStart,
328298
move: swipeMove,
@@ -403,11 +373,13 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
403373
updateSlidesPosition(state.x);
404374
},
405375
finish: function() {
406-
locked = false;
407376
scope.$apply(function() {
408377
scope.carouselIndex = index;
409378
offset = index * -100;
410379
updateBufferIndex();
380+
$timeout(function () {
381+
locked = false;
382+
}, 0, false);
411383
});
412384
}
413385
});
@@ -422,9 +394,25 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
422394
elWidth = getContainerWidth();
423395
}
424396

397+
function bindMouseUpEvent() {
398+
if (!mouseUpBound) {
399+
mouseUpBound = true;
400+
$document.bind('mouseup', documentMouseUpEvent);
401+
}
402+
}
403+
404+
function unbindMouseUpEvent() {
405+
if (mouseUpBound) {
406+
mouseUpBound = false;
407+
$document.unbind('mouseup', documentMouseUpEvent);
408+
}
409+
}
410+
425411
function swipeStart(coords, event) {
426412
// console.log('swipeStart', coords, event);
427-
$document.bind('mouseup', documentMouseUpEvent);
413+
if (locked || currentSlides.length <= 1) {
414+
return;
415+
}
428416
updateContainerWidth();
429417
elX = iElement[0].querySelector('li').getBoundingClientRect().left;
430418
pressed = true;
@@ -434,10 +422,8 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
434422

435423
function swipeMove(coords, event) {
436424
//console.log('swipeMove', coords, event);
437-
if (locked) {
438-
return;
439-
}
440425
var x, delta;
426+
bindMouseUpEvent();
441427
if (pressed) {
442428
x = coords.x;
443429
delta = startX - x;
@@ -461,14 +447,29 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
461447
});
462448
}
463449

464-
var autoSlider;
450+
if (iAttributes.rnCarouselControls!==undefined) {
451+
// dont use a directive for this
452+
var nextSlideIndexCompareValue = isRepeatBased ? repeatCollection.replace('::', '') + '.length - 1' : currentSlides.length - 1;
453+
var tpl = '<div class="rn-carousel-controls">\n' +
454+
' <span class="rn-carousel-control rn-carousel-control-prev" ng-click="prevSlide()" ng-if="carouselIndex > 0"></span>\n' +
455+
' <span class="rn-carousel-control rn-carousel-control-next" ng-click="nextSlide()" ng-if="carouselIndex < ' + nextSlideIndexCompareValue + '"></span>\n' +
456+
'</div>';
457+
iElement.append($compile(angular.element(tpl))(scope));
458+
}
459+
465460
if (iAttributes.rnCarouselAutoSlide!==undefined) {
466461
var duration = parseInt(iAttributes.rnCarouselAutoSlide, 10) || options.autoSlideDuration;
467-
autoSlider = $interval(function() {
468-
if (!locked && !pressed) {
469-
scope.nextSlide();
462+
scope.autoSlide = function() {
463+
if (scope.autoSlider) {
464+
$interval.cancel(scope.autoSlider);
465+
scope.autoSlider = null;
470466
}
471-
}, duration * 1000);
467+
scope.autoSlider = $interval(function() {
468+
if (!locked && !pressed) {
469+
scope.nextSlide();
470+
}
471+
}, duration * 1000);
472+
};
472473
}
473474

474475
if (iAttributes.rnCarouselIndex) {
@@ -479,10 +480,7 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
479480
if (angular.isFunction(indexModel.assign)) {
480481
/* check if this property is assignable then watch it */
481482
scope.$watch('carouselIndex', function(newValue) {
482-
if (!locked) {
483-
updateParentIndex(newValue);
484-
}
485-
483+
updateParentIndex(newValue);
486484
});
487485
scope.$parent.$watch(indexModel, function(newValue, oldValue) {
488486

@@ -534,7 +532,6 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
534532

535533
scope[deepWatch?'$watch':'$watchCollection'](repeatCollection, function(newValue, oldValue) {
536534
//console.log('repeatCollection', currentSlides);
537-
var oldSlides = (currentSlides || newValue).slice();
538535
currentSlides = newValue;
539536
// if deepWatch ON ,manually compare objects to guess the new position
540537
if (deepWatch && angular.isArray(newValue)) {
@@ -553,8 +550,7 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
553550
if (event && !swipeMoved) {
554551
return;
555552
}
556-
557-
$document.unbind('mouseup', documentMouseUpEvent);
553+
unbindMouseUpEvent();
558554
pressed = false;
559555
swipeMoved = false;
560556
destination = startX - coords.x;
@@ -593,7 +589,7 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
593589
}
594590

595591
scope.$on('$destroy', function() {
596-
$document.unbind('mouseup', documentMouseUpEvent);
592+
unbindMouseUpEvent();
597593
});
598594

599595
scope.carouselBufferIndex = 0;
@@ -640,7 +636,7 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
640636
winEl.bind('resize', onOrientationChange);
641637

642638
scope.$on('$destroy', function() {
643-
$document.unbind('mouseup', documentMouseUpEvent);
639+
unbindMouseUpEvent();
644640
winEl.unbind('orientationchange', onOrientationChange);
645641
winEl.unbind('resize', onOrientationChange);
646642
});
@@ -1135,8 +1131,9 @@ angular.module('angular-carousel.shifty', [])
11351131
// CommonJS
11361132
module.exports = Tweenable;
11371133
} else if (typeof define === 'function' && define.amd) {
1138-
// AMD
1139-
define(function () {return Tweenable;});
1134+
// AMD: define it as a named module to avoid the mismatched error(http://requirejs.org/docs/errors.html#mismatch)
1135+
define('shifty', [], function () {return Tweenable;});
1136+
root.Tweenable = Tweenable;
11401137
} else if (typeof root.Tweenable === 'undefined') {
11411138
// Browser: Make `Tweenable` globally accessible.
11421139
root.Tweenable = Tweenable;

0 commit comments

Comments
 (0)