Skip to content

Commit 1de03e7

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

File tree

3 files changed

+88
-65
lines changed

3 files changed

+88
-65
lines changed

‎src/app/components/kaarousel/directives/kaarousel.directive.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,8 +923,6 @@
901923
}
902924
});
903925
}
904-
905926
}
906927

907-
908928
})();

‎src/app/main/main.controller.js

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
.controller('MainController', MainController);
77

88
/** @ngInject */
9-
function MainController() {
9+
function MainController($log) {
1010
var vm = this;
1111

1212
vm.hideFirstSlide = hideFirstSlide;
@@ -104,14 +104,14 @@
104104
vm.options = {
105105

106106
displayed: 5,
107-
perSlide: 5,
107+
perSlide: 3,
108108
autoplay: true,
109109
pauseOnHover: true,
110110

111-
centerActive: false,
111+
centerActive: true,
112112
stopAfterAction: false,
113-
timeInterval: 3500,
114-
transitionDuration: 600,
113+
timeInterval: 2000,
114+
transitionDuration: 800,
115115

116116
hideNav: false,
117117
hidePager: false,
@@ -125,12 +125,13 @@
125125
direction: 'horizontal',
126126
animation: 'slide',
127127
minWidth: null,
128+
alwaysFill: true,
128129

129130
beforeSlide: function () {
130-
// $log.log('before slide callback');
131+
$log.log('before slide callback');
131132
},
132133
afterSlide: function () {
133-
// $log.log('after slide callback');
134+
$log.log('after slide callback');
134135
}
135136

136137
};

‎src/app/main/main.html

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,10 @@
7575
<span flex>Expand slides</span>
7676
<md-switch aria-label="Expand slides" ng-model="main.options.expand"></md-switch>
7777
</md-list-item>
78+
<md-list-item>
79+
<span flex>Always fill</span>
80+
<md-switch aria-label="Always fill" ng-model="main.options.alwaysFill"></md-switch>
81+
</md-list-item>
7882
<md-list-item>
7983
<span flex>Pause on hover</span>
8084
<md-switch aria-label="Pause on hover" ng-model="main.options.pauseOnHover"></md-switch>
@@ -122,15 +126,11 @@
122126
<md-toolbar class="md-tall md-whiteframe-z2">
123127
<div class="md-toolbar-tools">
124128
<span flex></span>
125-
<md-button class="md-icon-button">
126-
<md-icon>search</md-icon>
127-
</md-button>
128-
<md-button class="md-icon-button">
129-
<md-icon>favorite</md-icon>
130-
</md-button>
131-
<md-button class="md-icon-button">
132-
<md-icon>more_vert</md-icon>
133-
</md-button>
129+
<a href="https://github.com/corentin-gautier/angular-kaarousel" target="_blank">
130+
<md-button class="md-icon-button">
131+
<md-icon>favorite</md-icon>
132+
</md-button>
133+
</a>
134134
</div>
135135
<div class="md-toolbar-tools md-toolbar-tools-bottom">
136136
<span>Angular Kaarousel</span>
@@ -160,6 +160,7 @@
160160
loop="main.options.loop"
161161
min-width="main.options.minWidth"
162162
expand="main.options.expand"
163+
always-fill="main.options.alwaysFill"
163164
transition-duration="main.options.transitionDuration"
164165
before-slide="main.options.beforeSlide"
165166
after-slide="main.options.afterSlide">
@@ -211,6 +212,7 @@ <h3>{{slide.title}}</h3>
211212
&nbsp;&nbsp;&nbsp;&nbsp;pager-on-hover{{main.options.pagerOnHover ? '="' + main.options.pagerOnHover + '"' : ''}}<br >
212213
&nbsp;&nbsp;&nbsp;&nbsp;swipable{{main.options.swipable ? '="' + main.options.swipable + '"' : ''}}<br >
213214
&nbsp;&nbsp;&nbsp;&nbsp;expand{{main.options.expand ? '="' + main.options.expand + '"' : ''}}<br >
215+
&nbsp;&nbsp;&nbsp;&nbsp;alwaysFill{{main.options.alwaysFill ? '="' + main.options.alwaysFill + '"' : ''}}<br >
214216
&nbsp;&nbsp;&nbsp;&nbsp;sync="{{main.options.sync}}"<br >
215217
&nbsp;&nbsp;&nbsp;&nbsp;before-slide="function"<br >
216218
&nbsp;&nbsp;&nbsp;&nbsp;after-slide="function"<br >

0 commit comments

Comments
 (0)