Skip to content

Commit 952db5e

Browse files
corentin-gautiercorentin-gautier
committed
add alwaysFill option and fix various issues
1 parent 1de03e7 commit 952db5e

File tree

2 files changed

+70
-50
lines changed

2 files changed

+70
-50
lines changed

‎build/angular-kaarousel.js

Lines changed: 69 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,8 @@
3434
afterSlide: '&?',
3535
beforeSlide: '&?',
3636
minWidth: '=?',
37-
expand: '=?'
37+
expand: '=?',
38+
alwaysFill: '=?'
3839
},
3940
templateUrl: 'app/components/kaarousel/templates/angular-kaarousel.html',
4041
transclude: true,
@@ -49,8 +50,10 @@
4950
function KaarouselController($scope, $element, $attrs, $interval, $window, $timeout, $swipe) {
5051

5152
// @todo some settings don't work ( mainly when center active )
52-
5353
var vm = this;
54+
55+
var PREFIX = 'kaarousel';
56+
5457
var booleanAttributes = [
5558
'autoplay',
5659
'pauseOnHover',
@@ -62,10 +65,41 @@
6265
'pagerOnHover',
6366
'swipable',
6467
'loop',
65-
'expand'
68+
'expand',
69+
'alwaysFill'
6670
];
6771

68-
var animations = ['slide', 'fade'];
72+
var animations = [
73+
'slide',
74+
'fade'
75+
];
76+
77+
var kOptions = [
78+
'displayed',
79+
'perSlide',
80+
'autoplay',
81+
'direction',
82+
'pauseOnHover',
83+
'centerActive',
84+
'timeInterval',
85+
'transitionDuration',
86+
'updateRate',
87+
'stopAfterAction',
88+
'hideNav',
89+
'hidePager',
90+
'navOnHover',
91+
'pagerOnHover',
92+
'swipable',
93+
'sync',
94+
'animation',
95+
'loop',
96+
'options',
97+
'afterSlide',
98+
'beforeSlide',
99+
'minWidth',
100+
'expand',
101+
'alwaysFill'
102+
];
69103

70104
vm.init = init;
71105
vm.register = register;
@@ -98,7 +132,8 @@
98132
beforeSlide: null,
99133
minWidth: null,
100134
expand: true,
101-
swipeThreshold: 100
135+
swipeThreshold: 100,
136+
alwaysFill: true
102137
};
103138

104139
vm.state = {};
@@ -107,10 +142,8 @@
107142

108143
function init() {
109144
setElements();
110-
setClasses();
111145
setOptions();
112146
setWatchers();
113-
setSettings();
114147

115148
vm.ready = true;
116149
}
@@ -122,21 +155,17 @@
122155

123156
function setElements() {
124157
vm.kaarousel = $element[0];
125-
vm.kaarousel.classList.add('kaarousel');
158+
vm.kaarousel.classList.add(PREFIX);
126159

127160
//////////////////////
128161

129-
vm.kaarouselSliderContainer = $element[0].querySelector('kaarousel-slider-container');
130-
vm.kaarouselWrapper = $element[0].querySelector('kaarousel-wrapper');
131-
vm.kaarouselSlider = $element[0].querySelector('kaarousel-slider');
132-
}
133-
134-
function setClasses() {
135-
vm.kaarousel.classList.add('kaarousel');
162+
vm.kaarouselSliderContainer = vm.kaarousel.querySelector(PREFIX + '-slider-container');
163+
vm.kaarouselWrapper = vm.kaarousel.querySelector(PREFIX + '-wrapper');
164+
vm.kaarouselSlider = vm.kaarousel.querySelector(PREFIX + '-slider');
136165
}
137166

138167
function getScopeOptions() {
139-
var options;
168+
var options = {};
140169
if (!_.isEmpty($scope.options)) {
141170
options = angular.copy($scope.options);
142171

@@ -146,31 +175,9 @@
146175

147176
return options;
148177
}
149-
options = {
150-
displayed: $scope.displayed,
151-
perSlide: $scope.perSlide,
152-
autoplay: $scope.autoplay,
153-
direction: $scope.direction,
154-
pauseOnHover: $scope.pauseOnHover,
155-
centerActive: $scope.centerActive,
156-
timeInterval: $scope.timeInterval,
157-
transitionDuration: $scope.transitionDuration,
158-
updateRate: $scope.updateRate,
159-
stopAfterAction: $scope.stopAfterAction,
160-
hideNav: $scope.hideNav,
161-
hidePager: $scope.hidePager,
162-
navOnHover: $scope.navOnHover,
163-
pagerOnHover: $scope.pagerOnHover,
164-
swipable: $scope.swipable,
165-
sync: $scope.sync,
166-
animation: $scope.animation,
167-
loop: $scope.loop,
168-
options: $scope.options,
169-
afterSlide: $scope.afterSlide,
170-
beforeSlide: $scope.beforeSlide,
171-
minWidth: $scope.minWidth,
172-
expand: $scope.expand || true
173-
};
178+
_.forEach(kOptions, function(option) {
179+
options[option] = angular.isDefined($scope[option]) ? $scope[option] : vm.defaultOptions[option];
180+
});
174181

175182
options = assumeBoolean(options);
176183

@@ -215,6 +222,10 @@
215222
var fn;
216223

217224
switch (option) {
225+
case 'timeInterval':
226+
stop();
227+
play();
228+
break;
218229
case 'animation':
219230
setAnimationClass(value);
220231
break;
@@ -240,9 +251,15 @@
240251
case 'centerActive':
241252
move(vm.currentIndex, false, true);
242253
break;
254+
case 'perSlide':
255+
move(vm.currentIndex, false, true);
256+
break;
243257
case 'minWidth':
244258
setSlidesDimensions();
245259
break;
260+
case 'alwaysFill':
261+
vm.move(vm.currentIndex, false, true);
262+
break;
246263
}
247264

248265
if ((option === 'displayed' || option === 'expand' || option === 'animation') && !angular.isNumber(vm.options.minWidth)) {
@@ -293,13 +310,11 @@
293310
function setOptions(option, value) {
294311
vm.options = _.merge({}, vm.defaultOptions, checkValues(getScopeOptions()));
295312

296-
297313
if (option) {
298314
vm.options[option] = value;
299315
vm.options = checkValues(vm.options);
300316
handleImportantChanges(option, vm.options[option]);
301317
} else {
302-
vm.options = checkValues(vm.options);
303318
setDefaultState();
304319
}
305320

@@ -403,10 +418,10 @@
403418
var response;
404419
switch (type) {
405420
case 'prev':
406-
response = vm.currentIndex < vm.options.displayed;
421+
response = vm.currentIndex < vm.options.perSlide;
407422
break;
408423
case 'next':
409-
response = vm.currentIndex > vm.slides.length - vm.options.displayed;
424+
response = vm.currentIndex > (vm.slides.length - 1) - vm.options.perSlide;
410425
break;
411426
}
412427
return response;
@@ -433,8 +448,8 @@
433448
});
434449

435450
// On resize stop & play after it stopped
436-
$window.addEventListener('resize', _.debounce(resetAfterWindowResize, 500));
437451
$window.addEventListener('resize', function() {
452+
_.debounce(resetAfterWindowResize, 500)();
438453
if (vm.isPlaying) {
439454
stop();
440455
}
@@ -610,6 +625,14 @@
610625
var index,
611626
ref = getRef();
612627

628+
if (!vm.options.alwaysFill) {
629+
var half = vm.options.displayed / 2;
630+
if (vm.options.centerActive && ref > half) {
631+
ref -= parseInt(half) !== half ? Math.floor(half) : 0;
632+
}
633+
return vm.slides[ref].element[0];
634+
}
635+
613636
var limits = getLimits();
614637

615638
if (limits.up < 0) limits.up = vm.slides.length;
@@ -624,7 +647,6 @@
624647
function applyStyles(offset) {
625648

626649
if (vm.options.animation === 'slide') {
627-
628650
var elementPos = getLastInView()[vm.isHorizontal ? 'offsetLeft' : 'offsetTop'];
629651
var property = vm.isHorizontal ? 'translateX' : 'translateY';
630652
var value = -(elementPos + (offset || 0)) + 'px';
@@ -901,11 +923,9 @@
901923
}
902924
});
903925
}
904-
905926
}
906927
KaarouselController.$inject = ["$scope", "$element", "$attrs", "$interval", "$window", "$timeout", "$swipe"];
907928

908-
909929
})();
910930

911931
(function() {

0 commit comments

Comments
 (0)