hooper 0.3.0 → 0.3.4

Sign up to get free protection for your applications and to get access to all the features.
package/dist/hooper.css CHANGED
@@ -1,44 +1,4 @@
1
- .hooper {
2
- position: relative;
3
- box-sizing: border-box;
4
- width: 100%;
5
- height: 200px;
6
- }
7
- .hooper * {
8
- box-sizing: border-box;
9
- }
10
- .hooper-list {
11
- overflow: hidden;
12
- width: 100%;
13
- height: 100%;
14
- }
15
- .hooper-track {
16
- display: flex;
17
- box-sizing: border-box;
18
- width: 100%;
19
- height: 100%;
20
- padding: 0;
21
- margin: 0;
22
- }
23
- .hooper.is-vertical .hooper-track {
24
- flex-direction: column;
25
- height: 200px;
26
- }
27
-
28
- .hooper.is-rtl {
29
- direction: rtl;
30
- }
31
-
32
- .hooper-sr-only {
33
- position: absolute;
34
- width: 1px;
35
- height: 1px;
36
- padding: 0;
37
- margin: -1px;
38
- overflow: hidden;
39
- clip: rect(0, 0, 0, 0);
40
- border: 0;
41
- }.hooper-slide {
1
+ .hooper-slide {
42
2
  flex-shrink: 0;
43
3
  height: 100%;
44
4
  margin: 0;
@@ -139,3 +99,44 @@
139
99
  right: auto;
140
100
  left: 0;
141
101
  }
102
+ .hooper {
103
+ position: relative;
104
+ box-sizing: border-box;
105
+ width: 100%;
106
+ height: 200px;
107
+ }
108
+ .hooper * {
109
+ box-sizing: border-box;
110
+ }
111
+ .hooper-list {
112
+ overflow: hidden;
113
+ width: 100%;
114
+ height: 100%;
115
+ }
116
+ .hooper-track {
117
+ display: flex;
118
+ box-sizing: border-box;
119
+ width: 100%;
120
+ height: 100%;
121
+ padding: 0;
122
+ margin: 0;
123
+ }
124
+ .hooper.is-vertical .hooper-track {
125
+ flex-direction: column;
126
+ height: 200px;
127
+ }
128
+
129
+ .hooper.is-rtl {
130
+ direction: rtl;
131
+ }
132
+
133
+ .hooper-sr-only {
134
+ position: absolute;
135
+ width: 1px;
136
+ height: 1px;
137
+ padding: 0;
138
+ margin: -1px;
139
+ overflow: hidden;
140
+ clip: rect(0, 0, 0, 0);
141
+ border: 0;
142
+ }
@@ -1,5 +1,5 @@
1
1
  /**
2
- * Hopper 0.3.0
2
+ * Hopper 0.3.4
3
3
  * (c) 2019
4
4
  * @license MIT
5
5
  */
@@ -117,6 +117,48 @@ function cloneNode(h, vNode) {
117
117
  var tag = vNode.componentOptions.Ctor;
118
118
  return h(tag, vNode.data, children);
119
119
  } // IE11 :)
120
+
121
+ function assignPoly(target) {
122
+ if (target === undefined || target === null) {
123
+ throw new TypeError('Cannot convert first argument to object');
124
+ }
125
+
126
+ var to = Object(target);
127
+
128
+ for (var i = 1; i < arguments.length; i++) {
129
+ var nextSource = arguments[i];
130
+
131
+ if (nextSource === undefined || nextSource === null) {
132
+ continue;
133
+ }
134
+
135
+ nextSource = Object(nextSource);
136
+ var keysArray = Object.keys(Object(nextSource));
137
+
138
+ for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
139
+ var nextKey = keysArray[nextIndex];
140
+ var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
141
+
142
+ if (desc !== undefined && desc.enumerable) {
143
+ to[nextKey] = nextSource[nextKey];
144
+ }
145
+ }
146
+ }
147
+
148
+ return to;
149
+ }
150
+
151
+ var assign = Object.assign || assignPoly;
152
+
153
+ function signPoly(value) {
154
+ if (value < 0) {
155
+ return -1;
156
+ }
157
+
158
+ return value > 0 ? 1 : 0;
159
+ }
160
+
161
+ var sign = Math.sign || signPoly;
120
162
  function normalizeChildren(context) {
121
163
  var slotProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
122
164
 
@@ -240,6 +282,7 @@ var Carousel = {
240
282
  isTouch: false,
241
283
  isHover: false,
242
284
  isFocus: false,
285
+ initialized: false,
243
286
  slideWidth: 0,
244
287
  slideHeight: 0,
245
288
  slidesCount: 0,
@@ -257,6 +300,19 @@ var Carousel = {
257
300
  };
258
301
  },
259
302
  computed: {
303
+ slideBounds: function slideBounds() {
304
+ var config = this.config,
305
+ currentSlide = this.currentSlide; // Because the "isActive" depends on the slides shown, not the number of slidable ones.
306
+ // but upper and lower bounds for Next,Prev depend on whatever is smaller.
307
+
308
+ var siblings = config.itemsToShow;
309
+ var lower = config.centerMode ? Math.ceil(currentSlide - siblings / 2) : currentSlide;
310
+ var upper = config.centerMode ? Math.floor(currentSlide + siblings / 2) : Math.floor(currentSlide + siblings - 1);
311
+ return {
312
+ lower: lower,
313
+ upper: upper
314
+ };
315
+ },
260
316
  trackTransform: function trackTransform() {
261
317
  var _this$config = this.config,
262
318
  infiniteScroll = _this$config.infiniteScroll,
@@ -279,7 +335,7 @@ var Carousel = {
279
335
  return "transform: translate(".concat(translate, "px, 0);");
280
336
  },
281
337
  trackTransition: function trackTransition() {
282
- if (this.isSliding) {
338
+ if (this.initialized && this.isSliding) {
283
339
  return "transition: ".concat(this.config.transition, "ms");
284
340
  }
285
341
 
@@ -349,11 +405,11 @@ var Carousel = {
349
405
  }
350
406
 
351
407
  if (this.config.mouseDrag) {
352
- this.$refs.track.addEventListener('mousedown', this.onDragStart);
408
+ this.$refs.list.addEventListener('mousedown', this.onDragStart);
353
409
  }
354
410
 
355
411
  if (this.config.touchDrag) {
356
- this.$refs.track.addEventListener('touchstart', this.onDragStart, {
412
+ this.$refs.list.addEventListener('touchstart', this.onDragStart, {
357
413
  passive: true
358
414
  });
359
415
  }
@@ -390,8 +446,8 @@ var Carousel = {
390
446
  },
391
447
  initDefaults: function initDefaults() {
392
448
  this.breakpoints = this.settings.breakpoints;
393
- this.defaults = Object.assign({}, this.$props, this.settings);
394
- this.config = Object.assign({}, this.defaults);
449
+ this.defaults = assign({}, this.$props, this.settings);
450
+ this.config = assign({}, this.defaults);
395
451
  },
396
452
  // updating methods
397
453
  update: function update() {
@@ -448,13 +504,13 @@ var Carousel = {
448
504
  matched = window.matchMedia("(min-width: ".concat(breakpoint, "px)")).matches;
449
505
 
450
506
  if (matched) {
451
- _this3.config = Object.assign({}, _this3.config, _this3.defaults, _this3.breakpoints[breakpoint]);
507
+ _this3.config = assign({}, _this3.config, _this3.defaults, _this3.breakpoints[breakpoint]);
452
508
  return true;
453
509
  }
454
510
  });
455
511
 
456
512
  if (!matched) {
457
- this.config = Object.assign(this.config, this.defaults);
513
+ this.config = assign(this.config, this.defaults);
458
514
  }
459
515
  },
460
516
  restartTimer: function restartTimer() {
@@ -490,10 +546,17 @@ var Carousel = {
490
546
  this.startPosition.y = this.isTouch ? event.touches[0].clientY : event.clientY;
491
547
  document.addEventListener(this.isTouch ? 'touchmove' : 'mousemove', this.onDrag);
492
548
  document.addEventListener(this.isTouch ? 'touchend' : 'mouseup', this.onDragEnd);
549
+ },
550
+ isInvalidDirection: function isInvalidDirection(deltaX, deltaY) {
551
+ if (!this.config.vertical) {
552
+ return Math.abs(deltaX) <= Math.abs(deltaY);
553
+ }
493
554
 
494
- if (event.type !== 'touchstart') {
495
- event.preventDefault();
555
+ if (this.config.vertical) {
556
+ return Math.abs(deltaY) <= Math.abs(deltaX);
496
557
  }
558
+
559
+ return false;
497
560
  },
498
561
  onDrag: function onDrag(event) {
499
562
  if (this.isSliding) {
@@ -502,8 +565,15 @@ var Carousel = {
502
565
 
503
566
  this.endPosition.x = this.isTouch ? event.touches[0].clientX : event.clientX;
504
567
  this.endPosition.y = this.isTouch ? event.touches[0].clientY : event.clientY;
505
- this.delta.x = this.endPosition.x - this.startPosition.x;
506
- this.delta.y = this.endPosition.y - this.startPosition.y;
568
+ var deltaX = this.endPosition.x - this.startPosition.x;
569
+ var deltaY = this.endPosition.y - this.startPosition.y; // Maybe scrolling.
570
+
571
+ if (this.isInvalidDirection(deltaX, deltaY)) {
572
+ return;
573
+ }
574
+
575
+ this.delta.y = deltaY;
576
+ this.delta.x = deltaX;
507
577
 
508
578
  if (!this.isTouch) {
509
579
  event.preventDefault();
@@ -515,11 +585,11 @@ var Carousel = {
515
585
 
516
586
  if (this.config.vertical) {
517
587
  var draggedSlides = Math.round(Math.abs(this.delta.y / this.slideHeight) + tolerance);
518
- this.slideTo(this.currentSlide - Math.sign(this.delta.y) * draggedSlides);
588
+ this.slideTo(this.currentSlide - sign(this.delta.y) * draggedSlides);
519
589
  }
520
590
 
521
591
  if (!this.config.vertical) {
522
- var direction = (this.config.rtl ? -1 : 1) * Math.sign(this.delta.x);
592
+ var direction = (this.config.rtl ? -1 : 1) * sign(this.delta.x);
523
593
 
524
594
  var _draggedSlides = Math.round(Math.abs(this.delta.x / this.slideWidth) + tolerance);
525
595
 
@@ -587,7 +657,7 @@ var Carousel = {
587
657
 
588
658
  this.lastScrollTime = now();
589
659
  var value = event.wheelDelta || -event.deltaY;
590
- var delta = Math.sign(value);
660
+ var delta = sign(value);
591
661
 
592
662
  if (delta === -1) {
593
663
  this.slideNext();
@@ -625,7 +695,11 @@ var Carousel = {
625
695
 
626
696
  _this6.slideTo(_this6.config.initialSlide || 0);
627
697
 
628
- _this6.$emit('loaded');
698
+ setTimeout(function () {
699
+ _this6.$emit('loaded');
700
+
701
+ _this6.initialized = true;
702
+ }, _this6.transition);
629
703
  });
630
704
  },
631
705
  beforeDestroy: function beforeDestroy() {
@@ -683,18 +757,22 @@ function renderBufferSlides(h, slides) {
683
757
  for (var i = 0; i < slidesCount; i++) {
684
758
  var slide = slides[i];
685
759
  var clonedBefore = cloneNode(h, slide);
686
- clonedBefore.data.key = "index-".concat(i - slidesCount);
760
+ var slideIndex = i - slidesCount;
761
+ clonedBefore.data.key = "before_".concat(i);
687
762
  clonedBefore.key = clonedBefore.data.key;
763
+ clonedBefore.componentOptions.propsData.index = slideIndex;
688
764
  clonedBefore.data.props = {
689
- index: i - slidesCount,
765
+ index: slideIndex,
690
766
  isClone: true
691
767
  };
692
768
  before.push(clonedBefore);
693
769
  var clonedAfter = cloneNode(h, slide);
694
- clonedAfter.data.key = "index-".concat(i + slidesCount);
770
+ slideIndex = i + slidesCount;
771
+ clonedAfter.data.key = "after_".concat(slideIndex);
772
+ clonedAfter.componentOptions.propsData.index = slideIndex;
695
773
  clonedAfter.key = clonedAfter.data.key;
696
774
  clonedAfter.data.props = {
697
- index: i + slidesCount,
775
+ index: slideIndex,
698
776
  isClone: true
699
777
  };
700
778
  after.push(clonedAfter);
@@ -773,7 +851,8 @@ function renderBody(h) {
773
851
  }, "Item ".concat(this.currentSlide + 1, " of ").concat(this.slidesCount));
774
852
  var children = [slides].concat(_toConsumableArray(addons), [a11y]);
775
853
  return [h('div', {
776
- class: 'hooper-list'
854
+ class: 'hooper-list',
855
+ ref: 'list'
777
856
  }, children)];
778
857
  }
779
858
 
@@ -787,7 +866,6 @@ var Slide = {
787
866
  },
788
867
  index: {
789
868
  type: Number,
790
- default: 0,
791
869
  required: true
792
870
  }
793
871
  },
@@ -804,30 +882,21 @@ var Slide = {
804
882
 
805
883
  return "width: ".concat(slideWidth, "px");
806
884
  },
807
- lower: function lower() {
808
- var _ref2 = this.$hooper || {},
809
- config = _ref2.config,
810
- currentSlide = _ref2.currentSlide;
811
-
812
- var siblings = config.itemsToShow;
813
- return config.centerMode ? Math.ceil(currentSlide - siblings / 2) : currentSlide;
814
- },
815
- upper: function upper() {
816
- var _ref3 = this.$hooper || {},
817
- config = _ref3.config,
818
- currentSlide = _ref3.currentSlide;
819
-
820
- var siblings = config.itemsToShow;
821
- return config.centerMode ? Math.floor(currentSlide + siblings / 2) : Math.floor(currentSlide + siblings - 1);
822
- },
823
885
  isActive: function isActive() {
824
- return this.index >= this.lower && this.index <= this.upper;
886
+ var _this$$hooper$slideBo = this.$hooper.slideBounds,
887
+ upper = _this$$hooper$slideBo.upper,
888
+ lower = _this$$hooper$slideBo.lower;
889
+ return this.index >= lower && this.index <= upper;
825
890
  },
826
891
  isPrev: function isPrev() {
827
- return this.index <= this.lower - 1;
892
+ var lower = this.$hooper.slideBounds.lower;
893
+ var itemsToSlide = this.$hooper.config.itemsToSlide;
894
+ return this.index < lower && this.index >= lower - itemsToSlide;
828
895
  },
829
896
  isNext: function isNext() {
830
- return this.index >= this.upper + 1;
897
+ var upper = this.$hooper.slideBounds.upper;
898
+ var itemsToSlide = this.$hooper.config.itemsToSlide;
899
+ return this.index > upper && this.index <= upper + itemsToSlide;
831
900
  },
832
901
  isCurrent: function isCurrent() {
833
902
  return this.index === this.$hooper.currentSlide;
@@ -937,6 +1006,9 @@ function renderIndicator(h, index, isCurrent, onClick) {
937
1006
  },
938
1007
  on: {
939
1008
  click: onClick
1009
+ },
1010
+ attrs: {
1011
+ type: 'button'
940
1012
  }
941
1013
  }, [h('span', {
942
1014
  class: 'hooper-sr-only'
@@ -1042,6 +1114,10 @@ var Navigation = {
1042
1114
  return false;
1043
1115
  }
1044
1116
 
1117
+ if (this.$hooper.config.trimWhiteSpace) {
1118
+ return this.$hooper.currentSlide === this.$hooper.slidesCount - Math.min(this.$hooper.config.itemsToShow, this.$hooper.slidesCount);
1119
+ }
1120
+
1045
1121
  return this.$hooper.currentSlide === this.$hooper.slidesCount - 1;
1046
1122
  }
1047
1123
  },
package/dist/hooper.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * Hopper 0.3.0
2
+ * Hopper 0.3.4
3
3
  * (c) 2019
4
4
  * @license MIT
5
5
  */
@@ -123,6 +123,48 @@
123
123
  var tag = vNode.componentOptions.Ctor;
124
124
  return h(tag, vNode.data, children);
125
125
  } // IE11 :)
126
+
127
+ function assignPoly(target) {
128
+ if (target === undefined || target === null) {
129
+ throw new TypeError('Cannot convert first argument to object');
130
+ }
131
+
132
+ var to = Object(target);
133
+
134
+ for (var i = 1; i < arguments.length; i++) {
135
+ var nextSource = arguments[i];
136
+
137
+ if (nextSource === undefined || nextSource === null) {
138
+ continue;
139
+ }
140
+
141
+ nextSource = Object(nextSource);
142
+ var keysArray = Object.keys(Object(nextSource));
143
+
144
+ for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
145
+ var nextKey = keysArray[nextIndex];
146
+ var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
147
+
148
+ if (desc !== undefined && desc.enumerable) {
149
+ to[nextKey] = nextSource[nextKey];
150
+ }
151
+ }
152
+ }
153
+
154
+ return to;
155
+ }
156
+
157
+ var assign = Object.assign || assignPoly;
158
+
159
+ function signPoly(value) {
160
+ if (value < 0) {
161
+ return -1;
162
+ }
163
+
164
+ return value > 0 ? 1 : 0;
165
+ }
166
+
167
+ var sign = Math.sign || signPoly;
126
168
  function normalizeChildren(context) {
127
169
  var slotProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
128
170
 
@@ -246,6 +288,7 @@
246
288
  isTouch: false,
247
289
  isHover: false,
248
290
  isFocus: false,
291
+ initialized: false,
249
292
  slideWidth: 0,
250
293
  slideHeight: 0,
251
294
  slidesCount: 0,
@@ -263,6 +306,19 @@
263
306
  };
264
307
  },
265
308
  computed: {
309
+ slideBounds: function slideBounds() {
310
+ var config = this.config,
311
+ currentSlide = this.currentSlide; // Because the "isActive" depends on the slides shown, not the number of slidable ones.
312
+ // but upper and lower bounds for Next,Prev depend on whatever is smaller.
313
+
314
+ var siblings = config.itemsToShow;
315
+ var lower = config.centerMode ? Math.ceil(currentSlide - siblings / 2) : currentSlide;
316
+ var upper = config.centerMode ? Math.floor(currentSlide + siblings / 2) : Math.floor(currentSlide + siblings - 1);
317
+ return {
318
+ lower: lower,
319
+ upper: upper
320
+ };
321
+ },
266
322
  trackTransform: function trackTransform() {
267
323
  var _this$config = this.config,
268
324
  infiniteScroll = _this$config.infiniteScroll,
@@ -285,7 +341,7 @@
285
341
  return "transform: translate(".concat(translate, "px, 0);");
286
342
  },
287
343
  trackTransition: function trackTransition() {
288
- if (this.isSliding) {
344
+ if (this.initialized && this.isSliding) {
289
345
  return "transition: ".concat(this.config.transition, "ms");
290
346
  }
291
347
 
@@ -355,11 +411,11 @@
355
411
  }
356
412
 
357
413
  if (this.config.mouseDrag) {
358
- this.$refs.track.addEventListener('mousedown', this.onDragStart);
414
+ this.$refs.list.addEventListener('mousedown', this.onDragStart);
359
415
  }
360
416
 
361
417
  if (this.config.touchDrag) {
362
- this.$refs.track.addEventListener('touchstart', this.onDragStart, {
418
+ this.$refs.list.addEventListener('touchstart', this.onDragStart, {
363
419
  passive: true
364
420
  });
365
421
  }
@@ -396,8 +452,8 @@
396
452
  },
397
453
  initDefaults: function initDefaults() {
398
454
  this.breakpoints = this.settings.breakpoints;
399
- this.defaults = Object.assign({}, this.$props, this.settings);
400
- this.config = Object.assign({}, this.defaults);
455
+ this.defaults = assign({}, this.$props, this.settings);
456
+ this.config = assign({}, this.defaults);
401
457
  },
402
458
  // updating methods
403
459
  update: function update() {
@@ -454,13 +510,13 @@
454
510
  matched = window.matchMedia("(min-width: ".concat(breakpoint, "px)")).matches;
455
511
 
456
512
  if (matched) {
457
- _this3.config = Object.assign({}, _this3.config, _this3.defaults, _this3.breakpoints[breakpoint]);
513
+ _this3.config = assign({}, _this3.config, _this3.defaults, _this3.breakpoints[breakpoint]);
458
514
  return true;
459
515
  }
460
516
  });
461
517
 
462
518
  if (!matched) {
463
- this.config = Object.assign(this.config, this.defaults);
519
+ this.config = assign(this.config, this.defaults);
464
520
  }
465
521
  },
466
522
  restartTimer: function restartTimer() {
@@ -496,10 +552,17 @@
496
552
  this.startPosition.y = this.isTouch ? event.touches[0].clientY : event.clientY;
497
553
  document.addEventListener(this.isTouch ? 'touchmove' : 'mousemove', this.onDrag);
498
554
  document.addEventListener(this.isTouch ? 'touchend' : 'mouseup', this.onDragEnd);
555
+ },
556
+ isInvalidDirection: function isInvalidDirection(deltaX, deltaY) {
557
+ if (!this.config.vertical) {
558
+ return Math.abs(deltaX) <= Math.abs(deltaY);
559
+ }
499
560
 
500
- if (event.type !== 'touchstart') {
501
- event.preventDefault();
561
+ if (this.config.vertical) {
562
+ return Math.abs(deltaY) <= Math.abs(deltaX);
502
563
  }
564
+
565
+ return false;
503
566
  },
504
567
  onDrag: function onDrag(event) {
505
568
  if (this.isSliding) {
@@ -508,8 +571,15 @@
508
571
 
509
572
  this.endPosition.x = this.isTouch ? event.touches[0].clientX : event.clientX;
510
573
  this.endPosition.y = this.isTouch ? event.touches[0].clientY : event.clientY;
511
- this.delta.x = this.endPosition.x - this.startPosition.x;
512
- this.delta.y = this.endPosition.y - this.startPosition.y;
574
+ var deltaX = this.endPosition.x - this.startPosition.x;
575
+ var deltaY = this.endPosition.y - this.startPosition.y; // Maybe scrolling.
576
+
577
+ if (this.isInvalidDirection(deltaX, deltaY)) {
578
+ return;
579
+ }
580
+
581
+ this.delta.y = deltaY;
582
+ this.delta.x = deltaX;
513
583
 
514
584
  if (!this.isTouch) {
515
585
  event.preventDefault();
@@ -521,11 +591,11 @@
521
591
 
522
592
  if (this.config.vertical) {
523
593
  var draggedSlides = Math.round(Math.abs(this.delta.y / this.slideHeight) + tolerance);
524
- this.slideTo(this.currentSlide - Math.sign(this.delta.y) * draggedSlides);
594
+ this.slideTo(this.currentSlide - sign(this.delta.y) * draggedSlides);
525
595
  }
526
596
 
527
597
  if (!this.config.vertical) {
528
- var direction = (this.config.rtl ? -1 : 1) * Math.sign(this.delta.x);
598
+ var direction = (this.config.rtl ? -1 : 1) * sign(this.delta.x);
529
599
 
530
600
  var _draggedSlides = Math.round(Math.abs(this.delta.x / this.slideWidth) + tolerance);
531
601
 
@@ -593,7 +663,7 @@
593
663
 
594
664
  this.lastScrollTime = now();
595
665
  var value = event.wheelDelta || -event.deltaY;
596
- var delta = Math.sign(value);
666
+ var delta = sign(value);
597
667
 
598
668
  if (delta === -1) {
599
669
  this.slideNext();
@@ -631,7 +701,11 @@
631
701
 
632
702
  _this6.slideTo(_this6.config.initialSlide || 0);
633
703
 
634
- _this6.$emit('loaded');
704
+ setTimeout(function () {
705
+ _this6.$emit('loaded');
706
+
707
+ _this6.initialized = true;
708
+ }, _this6.transition);
635
709
  });
636
710
  },
637
711
  beforeDestroy: function beforeDestroy() {
@@ -689,18 +763,22 @@
689
763
  for (var i = 0; i < slidesCount; i++) {
690
764
  var slide = slides[i];
691
765
  var clonedBefore = cloneNode(h, slide);
692
- clonedBefore.data.key = "index-".concat(i - slidesCount);
766
+ var slideIndex = i - slidesCount;
767
+ clonedBefore.data.key = "before_".concat(i);
693
768
  clonedBefore.key = clonedBefore.data.key;
769
+ clonedBefore.componentOptions.propsData.index = slideIndex;
694
770
  clonedBefore.data.props = {
695
- index: i - slidesCount,
771
+ index: slideIndex,
696
772
  isClone: true
697
773
  };
698
774
  before.push(clonedBefore);
699
775
  var clonedAfter = cloneNode(h, slide);
700
- clonedAfter.data.key = "index-".concat(i + slidesCount);
776
+ slideIndex = i + slidesCount;
777
+ clonedAfter.data.key = "after_".concat(slideIndex);
778
+ clonedAfter.componentOptions.propsData.index = slideIndex;
701
779
  clonedAfter.key = clonedAfter.data.key;
702
780
  clonedAfter.data.props = {
703
- index: i + slidesCount,
781
+ index: slideIndex,
704
782
  isClone: true
705
783
  };
706
784
  after.push(clonedAfter);
@@ -779,7 +857,8 @@
779
857
  }, "Item ".concat(this.currentSlide + 1, " of ").concat(this.slidesCount));
780
858
  var children = [slides].concat(_toConsumableArray(addons), [a11y]);
781
859
  return [h('div', {
782
- class: 'hooper-list'
860
+ class: 'hooper-list',
861
+ ref: 'list'
783
862
  }, children)];
784
863
  }
785
864
 
@@ -793,7 +872,6 @@
793
872
  },
794
873
  index: {
795
874
  type: Number,
796
- default: 0,
797
875
  required: true
798
876
  }
799
877
  },
@@ -810,30 +888,21 @@
810
888
 
811
889
  return "width: ".concat(slideWidth, "px");
812
890
  },
813
- lower: function lower() {
814
- var _ref2 = this.$hooper || {},
815
- config = _ref2.config,
816
- currentSlide = _ref2.currentSlide;
817
-
818
- var siblings = config.itemsToShow;
819
- return config.centerMode ? Math.ceil(currentSlide - siblings / 2) : currentSlide;
820
- },
821
- upper: function upper() {
822
- var _ref3 = this.$hooper || {},
823
- config = _ref3.config,
824
- currentSlide = _ref3.currentSlide;
825
-
826
- var siblings = config.itemsToShow;
827
- return config.centerMode ? Math.floor(currentSlide + siblings / 2) : Math.floor(currentSlide + siblings - 1);
828
- },
829
891
  isActive: function isActive() {
830
- return this.index >= this.lower && this.index <= this.upper;
892
+ var _this$$hooper$slideBo = this.$hooper.slideBounds,
893
+ upper = _this$$hooper$slideBo.upper,
894
+ lower = _this$$hooper$slideBo.lower;
895
+ return this.index >= lower && this.index <= upper;
831
896
  },
832
897
  isPrev: function isPrev() {
833
- return this.index <= this.lower - 1;
898
+ var lower = this.$hooper.slideBounds.lower;
899
+ var itemsToSlide = this.$hooper.config.itemsToSlide;
900
+ return this.index < lower && this.index >= lower - itemsToSlide;
834
901
  },
835
902
  isNext: function isNext() {
836
- return this.index >= this.upper + 1;
903
+ var upper = this.$hooper.slideBounds.upper;
904
+ var itemsToSlide = this.$hooper.config.itemsToSlide;
905
+ return this.index > upper && this.index <= upper + itemsToSlide;
837
906
  },
838
907
  isCurrent: function isCurrent() {
839
908
  return this.index === this.$hooper.currentSlide;
@@ -943,6 +1012,9 @@
943
1012
  },
944
1013
  on: {
945
1014
  click: onClick
1015
+ },
1016
+ attrs: {
1017
+ type: 'button'
946
1018
  }
947
1019
  }, [h('span', {
948
1020
  class: 'hooper-sr-only'
@@ -1048,6 +1120,10 @@
1048
1120
  return false;
1049
1121
  }
1050
1122
 
1123
+ if (this.$hooper.config.trimWhiteSpace) {
1124
+ return this.$hooper.currentSlide === this.$hooper.slidesCount - Math.min(this.$hooper.config.itemsToShow, this.$hooper.slidesCount);
1125
+ }
1126
+
1051
1127
  return this.$hooper.currentSlide === this.$hooper.slidesCount - 1;
1052
1128
  }
1053
1129
  },
@@ -1 +1 @@
1
- var t,i;t=this,i=function(t,i){"use strict";function l(t,i,e){return i in t?Object.defineProperty(t,i,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[i]=e,t}function h(i){for(var t=1;t<arguments.length;t++){var e=null!=arguments[t]?arguments[t]:{},n=Object.keys(e);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(e).filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.forEach(function(t){l(i,t,e[t])})}return i}function c(t){return function(t){if(Array.isArray(t)){for(var i=0,e=new Array(t.length);i<t.length;i++)e[i]=t[i];return e}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function n(){return Date.now()}function e(t,i){this.create=function(){return window.setInterval(t,i)},this.stop=function(){this.timer&&(window.clearInterval(this.timer),this.timer=null)},this.start=function(){this.timer||(this.timer=this.create())},this.restart=function(t){i=t||i,this.stop(),this.start()},this.timer=this.create()}function u(t,i){var e;return(e=t<0?(t+i)%i:t%i)!=e?0:e}function d(t,i){var e=i.children||i.componentOptions.children||i.text;return t(i.componentOptions.Ctor,i.data,e)}function p(t,i){var e=1<arguments.length&&void 0!==i?i:{};return t.$scopedSlots.default?t.$scopedSlots.default(e)||[]:t.$slots.default||[]}var f=new(i=i&&i.hasOwnProperty("default")?i.default:i),r={name:"Hooper",provide:function(){return{$hooper:this}},props:{itemsToShow:{default:1,type:Number},itemsToSlide:{default:1,type:Number},initialSlide:{default:0,type:Number},infiniteScroll:{default:!1,type:Boolean},centerMode:{default:!1,type:Boolean},vertical:{default:!1,type:Boolean},rtl:{default:null,type:Boolean},autoPlay:{default:!1,type:Boolean},playSpeed:{default:2e3,type:Number},mouseDrag:{default:!0,type:Boolean},touchDrag:{default:!0,type:Boolean},wheelControl:{default:!0,type:Boolean},keysControl:{default:!0,type:Boolean},shortDrag:{default:!0,type:Boolean},transition:{default:300,type:Number},hoverPause:{default:!0,type:Boolean},trimWhiteSpace:{default:!1,type:Boolean},settings:{default:function(){return{}},type:Object},group:{type:String,default:null}},data:function(){return{isDragging:!1,isSliding:!1,isTouch:!1,isHover:!1,isFocus:!1,slideWidth:0,slideHeight:0,slidesCount:0,trimStart:0,trimEnd:1,currentSlide:null,timer:null,defaults:{},breakpoints:{},delta:{x:0,y:0},config:{}}},computed:{trackTransform:function(){var t=this.config,i=t.infiniteScroll,e=t.vertical,n=t.rtl,r=t.centerMode,o=n?-1:1,s=e?this.slideHeight:this.slideWidth,a=e?this.containerHeight:this.containerWidth,h=(e?this.delta.y:this.delta.x)+o*((r?(a-s)/2:0)-(i?s*this.slidesCount:0)-this.currentSlide*s);return e?"transform: translate(0, ".concat(h,"px);"):"transform: translate(".concat(h,"px, 0);")},trackTransition:function(){return this.isSliding?"transition: ".concat(this.config.transition,"ms"):""}},watch:{group:function(t,i){t!==i&&(f.$off("slideGroup:".concat(i),this._groupSlideHandler),this.addGroupListeners())}},methods:{slideTo:function(t,i){var e=this,n=!(1<arguments.length&&void 0!==i)||i;if(!this.isSliding&&t!==this.currentSlide){this.$emit("beforeSlide",{currentSlide:this.currentSlide,slideTo:h});var r=this.config,o=r.infiniteScroll,s=r.transition,a=this.currentSlide,h=o?t:function(t,i,e){return Math.max(Math.min(t,e),i)}(t,this.trimStart,this.slidesCount-this.trimEnd);this.group&&n&&f.$emit("slideGroup:".concat(this.group),t),this.currentSlide=h,this.isSliding=!0,window.setTimeout(function(){e.isSliding=!1,e.currentSlide=u(h,e.slidesCount)},s),this.$emit("slide",{currentSlide:this.currentSlide,slideFrom:a})}},slideNext:function(){this.slideTo(this.currentSlide+this.config.itemsToSlide)},slidePrev:function(){this.slideTo(this.currentSlide-this.config.itemsToSlide)},initEvents:function(){null===this.defaults.rtl&&(this.defaults.rtl="rtl"===getComputedStyle(this.$el).direction),this.config.autoPlay&&this.initAutoPlay(),this.config.mouseDrag&&this.$refs.track.addEventListener("mousedown",this.onDragStart),this.config.touchDrag&&this.$refs.track.addEventListener("touchstart",this.onDragStart,{passive:!0}),this.config.keysControl&&this.$el.addEventListener("keydown",this.onKeypress),this.config.wheelControl&&(this.lastScrollTime=n(),this.$el.addEventListener("wheel",this.onWheel,{passive:!1})),window.addEventListener("resize",this.update)},initAutoPlay:function(){var t=this;this.timer=new e(function(){t.isSliding||t.isDragging||t.isHover&&t.config.hoverPause||t.isFocus||(t.currentSlide!==t.slidesCount-1||t.config.infiniteScroll?t.slideNext():t.slideTo(0))},this.config.playSpeed)},initDefaults:function(){this.breakpoints=this.settings.breakpoints,this.defaults=Object.assign({},this.$props,this.settings),this.config=Object.assign({},this.defaults)},update:function(){this.breakpoints&&this.updateConfig(),this.updateWidth(),this.updateTrim(),this.$emit("updated",{containerWidth:this.containerWidth,containerHeight:this.containerHeight,slideWidth:this.slideWidth,slideHeight:this.slideHeight,settings:this.config})},updateTrim:function(){var t=this.config,i=t.trimWhiteSpace,e=t.itemsToShow,n=t.centerMode,r=t.infiniteScroll;if(!i||r)return this.trimStart=0,void(this.trimEnd=1);this.trimStart=n?Math.floor((e-1)/2):0,this.trimEnd=n?Math.ceil(e/2):e},updateWidth:function(){var t=this.$el.getBoundingClientRect();this.containerWidth=t.width,this.containerHeight=t.height,this.config.vertical?this.slideHeight=this.containerHeight/this.config.itemsToShow:this.slideWidth=this.containerWidth/this.config.itemsToShow},updateConfig:function(){var i,e=this;Object.keys(this.breakpoints).sort(function(t,i){return i-t}).some(function(t){if(i=window.matchMedia("(min-width: ".concat(t,"px)")).matches)return e.config=Object.assign({},e.config,e.defaults,e.breakpoints[t]),!0}),i||(this.config=Object.assign(this.config,this.defaults))},restartTimer:function(){this.timer&&this.timer.restart()},restart:function(){var t=this;this.$nextTick(function(){t.update()})},onDragStart:function(t){this.isTouch="touchstart"===t.type,!this.isTouch&&0!==t.button||(this.startPosition={x:0,y:0},this.endPosition={x:0,y:0},this.isDragging=!0,this.startPosition.x=this.isTouch?t.touches[0].clientX:t.clientX,this.startPosition.y=this.isTouch?t.touches[0].clientY:t.clientY,document.addEventListener(this.isTouch?"touchmove":"mousemove",this.onDrag),document.addEventListener(this.isTouch?"touchend":"mouseup",this.onDragEnd),"touchstart"!==t.type&&t.preventDefault())},onDrag:function(t){this.isSliding||(this.endPosition.x=this.isTouch?t.touches[0].clientX:t.clientX,this.endPosition.y=this.isTouch?t.touches[0].clientY:t.clientY,this.delta.x=this.endPosition.x-this.startPosition.x,this.delta.y=this.endPosition.y-this.startPosition.y,this.isTouch||t.preventDefault())},onDragEnd:function(){var t=this.config.shortDrag?.5:.15;if(this.isDragging=!1,this.config.vertical){var i=Math.round(Math.abs(this.delta.y/this.slideHeight)+t);this.slideTo(this.currentSlide-Math.sign(this.delta.y)*i)}if(!this.config.vertical){var e=(this.config.rtl?-1:1)*Math.sign(this.delta.x),n=Math.round(Math.abs(this.delta.x/this.slideWidth)+t);this.slideTo(this.currentSlide-e*n)}this.delta.x=0,this.delta.y=0,document.removeEventListener(this.isTouch?"touchmove":"mousemove",this.onDrag),document.removeEventListener(this.isTouch?"touchend":"mouseup",this.onDragEnd),this.restartTimer()},onTransitionend:function(){this.isSliding=!1,this.$emit("afterSlide",{currentSlide:this.currentSlide})},onKeypress:function(t){var i=t.key;return i.startsWith("Arrow")&&t.preventDefault(),this.config.vertical?("ArrowUp"===i&&this.slidePrev(),void("ArrowDown"===i&&this.slideNext())):this.config.rtl?("ArrowRight"===i&&this.slidePrev(),void("ArrowLeft"===i&&this.slideNext())):("ArrowRight"===i&&this.slideNext(),void("ArrowLeft"===i&&this.slidePrev()))},onWheel:function(t){if(t.preventDefault(),!(n()-this.lastScrollTime<200)){this.lastScrollTime=n();var i=t.wheelDelta||-t.deltaY,e=Math.sign(i);-1===e&&this.slideNext(),1===e&&this.slidePrev()}},addGroupListeners:function(){var i=this;this.group&&(this._groupSlideHandler=function(t){i.slideTo(t,!1)},f.$on("slideGroup:".concat(this.group),this._groupSlideHandler))}},created:function(){this.initDefaults()},mounted:function(){var t=this;this.initEvents(),this.addGroupListeners(),this.$nextTick(function(){t.update(),t.slideTo(t.config.initialSlide||0),t.$emit("loaded")})},beforeDestroy:function(){window.removeEventListener("resize",this.update),this.group&&f.$off("slideGroup:".concat(this.group),this._groupSlideHandler),this.timer&&this.timer.stop()},render:function(t){var i=this,e=function(t){var i=function(t){for(var i=p(this),e=i.length,n=0,r=[],o=0;o<e;o++){var s=i[o],a=s.componentOptions&&s.componentOptions.Ctor;a&&"HooperSlide"===a.options.name&&(s.componentOptions.propsData.index=n,s.data.key=n,s.key=n,s.data.props=h({},s.data.props||{},{isClone:!1,index:n++}),r.push(s))}this.slidesCount=r.length,this.config.infiniteScroll&&(r=function(t,i){for(var e=[],n=[],r=i.length,o=0;o<r;o++){var s=i[o],a=d(t,s);a.data.key="index-".concat(o-r),a.key=a.data.key,a.data.props={index:o-r,isClone:!0},e.push(a);var h=d(t,s);h.data.key="index-".concat(o+r),h.key=h.data.key,h.data.props={index:o+r,isClone:!0},n.push(h)}return[].concat(e,c(i),n)}(t,r));return t("ul",{class:{"hooper-track":!0,"is-dragging":this.isDragging},style:this.trackTransform+this.trackTransition,ref:"track",on:{transitionend:this.onTransitionend}},r)}.call(this,t),e=this.$slots["hooper-addons"]||[],n=t("div",{class:"hooper-liveregion hooper-sr-only",attrs:{"aria-live":"polite","aria-atomic":"true"}},"Item ".concat(this.currentSlide+1," of ").concat(this.slidesCount)),r=[i].concat(c(e),[n]);return[t("div",{class:"hooper-list"},r)]}.call(this,t);return t("section",{class:{hooper:!0,"is-vertical":this.config.vertical,"is-rtl":this.config.rtl},attrs:{tabindex:"0"},on:{focusin:function(){return i.isFocus=!0},focusout:function(){return i.isFocus=!1},mouseover:function(){return i.isHover=!0},mouseleave:function(){return i.isHover=!1}}},e)}};var o={name:"HooperSlide",inject:["$hooper"],props:{isClone:{type:Boolean,default:!1},index:{type:Number,default:0,required:!0}},computed:{style:function(){var t=this.$hooper||{},i=t.config,e=t.slideHeight,n=t.slideWidth;return i.vertical?"height: ".concat(e,"px"):"width: ".concat(n,"px")},lower:function(){var t=this.$hooper||{},i=t.config,e=t.currentSlide,n=i.itemsToShow;return i.centerMode?Math.ceil(e-n/2):e},upper:function(){var t=this.$hooper||{},i=t.config,e=t.currentSlide,n=i.itemsToShow;return i.centerMode?Math.floor(e+n/2):Math.floor(e+n-1)},isActive:function(){return this.index>=this.lower&&this.index<=this.upper},isPrev:function(){return this.index<=this.lower-1},isNext:function(){return this.index>=this.upper+1},isCurrent:function(){return this.index===this.$hooper.currentSlide}},render:function(t){var i={"hooper-slide":!0,"is-clone":this.isClone,"is-active":this.isActive,"is-prev":this.isPrev,"is-next":this.isNext,"is-current":this.isCurrent},e=p(this);return t("li",{class:i,style:this.style,attrs:{"aria-hidden":!this.isActive}},e)}},s={arrowUp:"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z",arrowDown:"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z",arrowRight:"M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z",arrowLeft:"M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"},g={name:"HooperIcon",functional:!0,inheritAttrs:!0,props:{name:{type:String,required:!0,validator:function(t){return t in s}}},render:function(t,i){var e=i.props,n=s[e.name],r=[];return r.push(t("title",function(t){return(t=t.replace(/([A-Z]+)/g," $1")).charAt(0).toUpperCase()+t.slice(1)}(e.name))),r.push(t("path",{attrs:{d:"M0 0h24v24H0z",fill:"none"}})),r.push(t("path",{attrs:{d:n}})),t("svg",{attrs:{class:"icon icon-".concat(e.name),viewBox:"0 0 24 24",width:"24px",height:"24px"}},r)}},a={inject:["$hooper"],name:"HooperProgress",computed:{currentSlide:function(){return u(this.$hooper.currentSlide,this.$hooper.slidesCount)},progress:function(){var t=this.$hooper.slidesCount-this.$hooper.trimStart-this.$hooper.trimEnd;return 100*(this.currentSlide-this.$hooper.trimStart)/t}},render:function(t){return t("div",{class:"hooper-progress"},[t("div",{class:"hooper-progress-inner",style:"width: ".concat(this.progress,"%")})])}};var v={inject:["$hooper"],name:"HooperPagination",props:{mode:{default:"indicator",type:String}},computed:{currentSlide:function(){return u(this.$hooper.currentSlide,this.$hooper.slidesCount)},slides:function(){var t=this.$hooper.slides.map(function(t,i){return i});return t.slice(this.$hooper.trimStart,this.$hooper.slidesCount-this.$hooper.trimEnd+1)}},render:function(t){var i=this,e=this.$hooper.slidesCount,n="indicator"===this.mode?function(i,e,t,n){for(var r=[],o=function(t){r.push(function(t,i,e,n){return t("li",[t("button",{class:{"hooper-indicator":!0,"is-active":e},on:{click:n}},[t("span",{class:"hooper-sr-only"},"item ".concat(i))])])}(i,t,t===e,function(){return n(t)}))},s=0;s<t;s++)o(s);return[i("ol",{class:"hooper-indicators"},r)]}(t,this.currentSlide,e,function(t){return i.$hooper.slideTo(t)}):function(t,i,e){return[t("span",i+1),t("span","/"),t("span",e)]}(t,this.currentSlide,e);return t("div",{class:{"hooper-pagination":!0,"is-vertical":this.$hooper.config.vertical}},n)}};function m(t,i,e,n,r,o){var s,a=r.isVertical,h=r.isRTL,c=e&&e.length?e:[t(g,{props:{name:function(t,i,e){return e?t?"arrowUp":i?"arrowRight":"arrowLeft":t?"arrowDown":i?"arrowLeft":"arrowRight"}(a,h,n)}})];return t("button",{class:(s={},l(s,"hooper-".concat(n?"prev":"next"),!0),l(s,"is-disabled",i),s),attrs:{type:"button"},on:{click:o}},c)}var S={inject:["$hooper"],name:"HooperNavigation",computed:{isPrevDisabled:function(){return!this.$hooper.config.infiniteScroll&&0===this.$hooper.currentSlide},isNextDisabled:function(){return!this.$hooper.config.infiniteScroll&&this.$hooper.currentSlide===this.$hooper.slidesCount-1}},methods:{slideNext:function(){this.$hooper.slideNext(),this.$hooper.restartTimer()},slidePrev:function(){this.$hooper.slidePrev(),this.$hooper.restartTimer()}},render:function(t){var i=this,e={isRTL:this.$hooper.config.rtl,isVertical:this.$hooper.config.vertical},n=[m(t,this.isPrevDisabled,this.$slots["hooper-prev"],!0,e,function(){return i.slidePrev()}),m(t,this.isNextDisabled,this.$slots["hooper-next"],!1,e,function(){return i.slideNext()})];return t("div",{class:{"hooper-navigation":!0,"is-vertical":this.$hooper.config.vertical,"is-rtl":this.$hooper.config.rtl}},n)}};t.Hooper=r,t.Icon=g,t.Navigation=S,t.Pagination=v,t.Progress=a,t.Slide=o,t.addonMixin={inject:["$hooper"]},t.default=r,Object.defineProperty(t,"__esModule",{value:!0})},"object"==typeof exports&&"undefined"!=typeof module?i(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],i):i((t=t||self).Hooper={},t.Vue);
1
+ var t,i;t=this,i=function(t,i){"use strict";function l(t,i,e){return i in t?Object.defineProperty(t,i,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[i]=e,t}function h(i){for(var t=1;t<arguments.length;t++){var e=null!=arguments[t]?arguments[t]:{},n=Object.keys(e);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(e).filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.forEach(function(t){l(i,t,e[t])})}return i}function u(t){return function(t){if(Array.isArray(t)){for(var i=0,e=new Array(t.length);i<t.length;i++)e[i]=t[i];return e}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function n(){return Date.now()}function e(t,i){this.create=function(){return window.setInterval(t,i)},this.stop=function(){this.timer&&(window.clearInterval(this.timer),this.timer=null)},this.start=function(){this.timer||(this.timer=this.create())},this.restart=function(t){i=t||i,this.stop(),this.start()},this.timer=this.create()}function c(t,i){var e;return(e=t<0?(t+i)%i:t%i)!=e?0:e}function d(t,i){var e=i.children||i.componentOptions.children||i.text;return t(i.componentOptions.Ctor,i.data,e)}i=i&&i.hasOwnProperty("default")?i.default:i;var o=Object.assign||function(t){if(null==t)throw new TypeError("Cannot convert first argument to object");for(var i=Object(t),e=1;e<arguments.length;e++){var n=arguments[e];if(null!=n){n=Object(n);for(var o=Object.keys(Object(n)),r=0,s=o.length;r<s;r++){var a=o[r],h=Object.getOwnPropertyDescriptor(n,a);void 0!==h&&h.enumerable&&(i[a]=n[a])}}}return i};var r=Math.sign||function(t){return t<0?-1:0<t?1:0};function p(t,i){var e=1<arguments.length&&void 0!==i?i:{};return t.$scopedSlots.default?t.$scopedSlots.default(e)||[]:t.$slots.default||[]}var f=new i,s={name:"Hooper",provide:function(){return{$hooper:this}},props:{itemsToShow:{default:1,type:Number},itemsToSlide:{default:1,type:Number},initialSlide:{default:0,type:Number},infiniteScroll:{default:!1,type:Boolean},centerMode:{default:!1,type:Boolean},vertical:{default:!1,type:Boolean},rtl:{default:null,type:Boolean},autoPlay:{default:!1,type:Boolean},playSpeed:{default:2e3,type:Number},mouseDrag:{default:!0,type:Boolean},touchDrag:{default:!0,type:Boolean},wheelControl:{default:!0,type:Boolean},keysControl:{default:!0,type:Boolean},shortDrag:{default:!0,type:Boolean},transition:{default:300,type:Number},hoverPause:{default:!0,type:Boolean},trimWhiteSpace:{default:!1,type:Boolean},settings:{default:function(){return{}},type:Object},group:{type:String,default:null}},data:function(){return{isDragging:!1,isSliding:!1,isTouch:!1,isHover:!1,isFocus:!1,initialized:!1,slideWidth:0,slideHeight:0,slidesCount:0,trimStart:0,trimEnd:1,currentSlide:null,timer:null,defaults:{},breakpoints:{},delta:{x:0,y:0},config:{}}},computed:{slideBounds:function(){var t=this.config,i=this.currentSlide,e=t.itemsToShow;return{lower:t.centerMode?Math.ceil(i-e/2):i,upper:t.centerMode?Math.floor(i+e/2):Math.floor(i+e-1)}},trackTransform:function(){var t=this.config,i=t.infiniteScroll,e=t.vertical,n=t.rtl,o=t.centerMode,r=n?-1:1,s=e?this.slideHeight:this.slideWidth,a=e?this.containerHeight:this.containerWidth,h=(e?this.delta.y:this.delta.x)+r*((o?(a-s)/2:0)-(i?s*this.slidesCount:0)-this.currentSlide*s);return e?"transform: translate(0, ".concat(h,"px);"):"transform: translate(".concat(h,"px, 0);")},trackTransition:function(){return this.initialized&&this.isSliding?"transition: ".concat(this.config.transition,"ms"):""}},watch:{group:function(t,i){t!==i&&(f.$off("slideGroup:".concat(i),this._groupSlideHandler),this.addGroupListeners())}},methods:{slideTo:function(t,i){var e=this,n=!(1<arguments.length&&void 0!==i)||i;if(!this.isSliding&&t!==this.currentSlide){this.$emit("beforeSlide",{currentSlide:this.currentSlide,slideTo:h});var o=this.config,r=o.infiniteScroll,s=o.transition,a=this.currentSlide,h=r?t:function(t,i,e){return Math.max(Math.min(t,e),i)}(t,this.trimStart,this.slidesCount-this.trimEnd);this.group&&n&&f.$emit("slideGroup:".concat(this.group),t),this.currentSlide=h,this.isSliding=!0,window.setTimeout(function(){e.isSliding=!1,e.currentSlide=c(h,e.slidesCount)},s),this.$emit("slide",{currentSlide:this.currentSlide,slideFrom:a})}},slideNext:function(){this.slideTo(this.currentSlide+this.config.itemsToSlide)},slidePrev:function(){this.slideTo(this.currentSlide-this.config.itemsToSlide)},initEvents:function(){null===this.defaults.rtl&&(this.defaults.rtl="rtl"===getComputedStyle(this.$el).direction),this.config.autoPlay&&this.initAutoPlay(),this.config.mouseDrag&&this.$refs.list.addEventListener("mousedown",this.onDragStart),this.config.touchDrag&&this.$refs.list.addEventListener("touchstart",this.onDragStart,{passive:!0}),this.config.keysControl&&this.$el.addEventListener("keydown",this.onKeypress),this.config.wheelControl&&(this.lastScrollTime=n(),this.$el.addEventListener("wheel",this.onWheel,{passive:!1})),window.addEventListener("resize",this.update)},initAutoPlay:function(){var t=this;this.timer=new e(function(){t.isSliding||t.isDragging||t.isHover&&t.config.hoverPause||t.isFocus||(t.currentSlide!==t.slidesCount-1||t.config.infiniteScroll?t.slideNext():t.slideTo(0))},this.config.playSpeed)},initDefaults:function(){this.breakpoints=this.settings.breakpoints,this.defaults=o({},this.$props,this.settings),this.config=o({},this.defaults)},update:function(){this.breakpoints&&this.updateConfig(),this.updateWidth(),this.updateTrim(),this.$emit("updated",{containerWidth:this.containerWidth,containerHeight:this.containerHeight,slideWidth:this.slideWidth,slideHeight:this.slideHeight,settings:this.config})},updateTrim:function(){var t=this.config,i=t.trimWhiteSpace,e=t.itemsToShow,n=t.centerMode,o=t.infiniteScroll;if(!i||o)return this.trimStart=0,void(this.trimEnd=1);this.trimStart=n?Math.floor((e-1)/2):0,this.trimEnd=n?Math.ceil(e/2):e},updateWidth:function(){var t=this.$el.getBoundingClientRect();this.containerWidth=t.width,this.containerHeight=t.height,this.config.vertical?this.slideHeight=this.containerHeight/this.config.itemsToShow:this.slideWidth=this.containerWidth/this.config.itemsToShow},updateConfig:function(){var i,e=this;Object.keys(this.breakpoints).sort(function(t,i){return i-t}).some(function(t){if(i=window.matchMedia("(min-width: ".concat(t,"px)")).matches)return e.config=o({},e.config,e.defaults,e.breakpoints[t]),!0}),i||(this.config=o(this.config,this.defaults))},restartTimer:function(){this.timer&&this.timer.restart()},restart:function(){var t=this;this.$nextTick(function(){t.update()})},onDragStart:function(t){this.isTouch="touchstart"===t.type,!this.isTouch&&0!==t.button||(this.startPosition={x:0,y:0},this.endPosition={x:0,y:0},this.isDragging=!0,this.startPosition.x=this.isTouch?t.touches[0].clientX:t.clientX,this.startPosition.y=this.isTouch?t.touches[0].clientY:t.clientY,document.addEventListener(this.isTouch?"touchmove":"mousemove",this.onDrag),document.addEventListener(this.isTouch?"touchend":"mouseup",this.onDragEnd))},isInvalidDirection:function(t,i){return this.config.vertical?!!this.config.vertical&&Math.abs(i)<=Math.abs(t):Math.abs(t)<=Math.abs(i)},onDrag:function(t){if(!this.isSliding){this.endPosition.x=this.isTouch?t.touches[0].clientX:t.clientX,this.endPosition.y=this.isTouch?t.touches[0].clientY:t.clientY;var i=this.endPosition.x-this.startPosition.x,e=this.endPosition.y-this.startPosition.y;this.isInvalidDirection(i,e)||(this.delta.y=e,this.delta.x=i,this.isTouch||t.preventDefault())}},onDragEnd:function(){var t=this.config.shortDrag?.5:.15;if(this.isDragging=!1,this.config.vertical){var i=Math.round(Math.abs(this.delta.y/this.slideHeight)+t);this.slideTo(this.currentSlide-r(this.delta.y)*i)}if(!this.config.vertical){var e=(this.config.rtl?-1:1)*r(this.delta.x),n=Math.round(Math.abs(this.delta.x/this.slideWidth)+t);this.slideTo(this.currentSlide-e*n)}this.delta.x=0,this.delta.y=0,document.removeEventListener(this.isTouch?"touchmove":"mousemove",this.onDrag),document.removeEventListener(this.isTouch?"touchend":"mouseup",this.onDragEnd),this.restartTimer()},onTransitionend:function(){this.isSliding=!1,this.$emit("afterSlide",{currentSlide:this.currentSlide})},onKeypress:function(t){var i=t.key;return i.startsWith("Arrow")&&t.preventDefault(),this.config.vertical?("ArrowUp"===i&&this.slidePrev(),void("ArrowDown"===i&&this.slideNext())):this.config.rtl?("ArrowRight"===i&&this.slidePrev(),void("ArrowLeft"===i&&this.slideNext())):("ArrowRight"===i&&this.slideNext(),void("ArrowLeft"===i&&this.slidePrev()))},onWheel:function(t){if(t.preventDefault(),!(n()-this.lastScrollTime<200)){this.lastScrollTime=n();var i=t.wheelDelta||-t.deltaY,e=r(i);-1===e&&this.slideNext(),1===e&&this.slidePrev()}},addGroupListeners:function(){var i=this;this.group&&(this._groupSlideHandler=function(t){i.slideTo(t,!1)},f.$on("slideGroup:".concat(this.group),this._groupSlideHandler))}},created:function(){this.initDefaults()},mounted:function(){var t=this;this.initEvents(),this.addGroupListeners(),this.$nextTick(function(){t.update(),t.slideTo(t.config.initialSlide||0),setTimeout(function(){t.$emit("loaded"),t.initialized=!0},t.transition)})},beforeDestroy:function(){window.removeEventListener("resize",this.update),this.group&&f.$off("slideGroup:".concat(this.group),this._groupSlideHandler),this.timer&&this.timer.stop()},render:function(t){var i=this,e=function(t){var i=function(t){for(var i=p(this),e=i.length,n=0,o=[],r=0;r<e;r++){var s=i[r],a=s.componentOptions&&s.componentOptions.Ctor;a&&"HooperSlide"===a.options.name&&(s.componentOptions.propsData.index=n,s.data.key=n,s.key=n,s.data.props=h({},s.data.props||{},{isClone:!1,index:n++}),o.push(s))}this.slidesCount=o.length,this.config.infiniteScroll&&(o=function(t,i){for(var e=[],n=[],o=i.length,r=0;r<o;r++){var s=i[r],a=d(t,s),h=r-o;a.data.key="before_".concat(r),a.key=a.data.key,a.componentOptions.propsData.index=h,a.data.props={index:h,isClone:!0},e.push(a);var c=d(t,s);h=r+o,c.data.key="after_".concat(h),c.componentOptions.propsData.index=h,c.key=c.data.key,c.data.props={index:h,isClone:!0},n.push(c)}return[].concat(e,u(i),n)}(t,o));return t("ul",{class:{"hooper-track":!0,"is-dragging":this.isDragging},style:this.trackTransform+this.trackTransition,ref:"track",on:{transitionend:this.onTransitionend}},o)}.call(this,t),e=this.$slots["hooper-addons"]||[],n=t("div",{class:"hooper-liveregion hooper-sr-only",attrs:{"aria-live":"polite","aria-atomic":"true"}},"Item ".concat(this.currentSlide+1," of ").concat(this.slidesCount)),o=[i].concat(u(e),[n]);return[t("div",{class:"hooper-list",ref:"list"},o)]}.call(this,t);return t("section",{class:{hooper:!0,"is-vertical":this.config.vertical,"is-rtl":this.config.rtl},attrs:{tabindex:"0"},on:{focusin:function(){return i.isFocus=!0},focusout:function(){return i.isFocus=!1},mouseover:function(){return i.isHover=!0},mouseleave:function(){return i.isHover=!1}}},e)}};var a={name:"HooperSlide",inject:["$hooper"],props:{isClone:{type:Boolean,default:!1},index:{type:Number,required:!0}},computed:{style:function(){var t=this.$hooper||{},i=t.config,e=t.slideHeight,n=t.slideWidth;return i.vertical?"height: ".concat(e,"px"):"width: ".concat(n,"px")},isActive:function(){var t=this.$hooper.slideBounds,i=t.upper,e=t.lower;return this.index>=e&&this.index<=i},isPrev:function(){var t=this.$hooper.slideBounds.lower,i=this.$hooper.config.itemsToSlide;return this.index<t&&this.index>=t-i},isNext:function(){var t=this.$hooper.slideBounds.upper,i=this.$hooper.config.itemsToSlide;return this.index>t&&this.index<=t+i},isCurrent:function(){return this.index===this.$hooper.currentSlide}},render:function(t){var i={"hooper-slide":!0,"is-clone":this.isClone,"is-active":this.isActive,"is-prev":this.isPrev,"is-next":this.isNext,"is-current":this.isCurrent},e=p(this);return t("li",{class:i,style:this.style,attrs:{"aria-hidden":!this.isActive}},e)}},g={arrowUp:"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z",arrowDown:"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z",arrowRight:"M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z",arrowLeft:"M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"},v={name:"HooperIcon",functional:!0,inheritAttrs:!0,props:{name:{type:String,required:!0,validator:function(t){return t in g}}},render:function(t,i){var e=i.props,n=g[e.name],o=[];return o.push(t("title",function(t){return(t=t.replace(/([A-Z]+)/g," $1")).charAt(0).toUpperCase()+t.slice(1)}(e.name))),o.push(t("path",{attrs:{d:"M0 0h24v24H0z",fill:"none"}})),o.push(t("path",{attrs:{d:n}})),t("svg",{attrs:{class:"icon icon-".concat(e.name),viewBox:"0 0 24 24",width:"24px",height:"24px"}},o)}},m={inject:["$hooper"],name:"HooperProgress",computed:{currentSlide:function(){return c(this.$hooper.currentSlide,this.$hooper.slidesCount)},progress:function(){var t=this.$hooper.slidesCount-this.$hooper.trimStart-this.$hooper.trimEnd;return 100*(this.currentSlide-this.$hooper.trimStart)/t}},render:function(t){return t("div",{class:"hooper-progress"},[t("div",{class:"hooper-progress-inner",style:"width: ".concat(this.progress,"%")})])}};var S={inject:["$hooper"],name:"HooperPagination",props:{mode:{default:"indicator",type:String}},computed:{currentSlide:function(){return c(this.$hooper.currentSlide,this.$hooper.slidesCount)},slides:function(){var t=this.$hooper.slides.map(function(t,i){return i});return t.slice(this.$hooper.trimStart,this.$hooper.slidesCount-this.$hooper.trimEnd+1)}},render:function(t){var i=this,e=this.$hooper.slidesCount,n="indicator"===this.mode?function(i,e,t,n){for(var o=[],r=function(t){o.push(function(t,i,e,n){return t("li",[t("button",{class:{"hooper-indicator":!0,"is-active":e},on:{click:n},attrs:{type:"button"}},[t("span",{class:"hooper-sr-only"},"item ".concat(i))])])}(i,t,t===e,function(){return n(t)}))},s=0;s<t;s++)r(s);return[i("ol",{class:"hooper-indicators"},o)]}(t,this.currentSlide,e,function(t){return i.$hooper.slideTo(t)}):function(t,i,e){return[t("span",i+1),t("span","/"),t("span",e)]}(t,this.currentSlide,e);return t("div",{class:{"hooper-pagination":!0,"is-vertical":this.$hooper.config.vertical}},n)}};function y(t,i,e,n,o,r){var s,a=o.isVertical,h=o.isRTL,c=e&&e.length?e:[t(v,{props:{name:function(t,i,e){return e?t?"arrowUp":i?"arrowRight":"arrowLeft":t?"arrowDown":i?"arrowLeft":"arrowRight"}(a,h,n)}})];return t("button",{class:(s={},l(s,"hooper-".concat(n?"prev":"next"),!0),l(s,"is-disabled",i),s),attrs:{type:"button"},on:{click:r}},c)}var $={inject:["$hooper"],name:"HooperNavigation",computed:{isPrevDisabled:function(){return!this.$hooper.config.infiniteScroll&&0===this.$hooper.currentSlide},isNextDisabled:function(){return!this.$hooper.config.infiniteScroll&&(this.$hooper.config.trimWhiteSpace?this.$hooper.currentSlide===this.$hooper.slidesCount-Math.min(this.$hooper.config.itemsToShow,this.$hooper.slidesCount):this.$hooper.currentSlide===this.$hooper.slidesCount-1)}},methods:{slideNext:function(){this.$hooper.slideNext(),this.$hooper.restartTimer()},slidePrev:function(){this.$hooper.slidePrev(),this.$hooper.restartTimer()}},render:function(t){var i=this,e={isRTL:this.$hooper.config.rtl,isVertical:this.$hooper.config.vertical},n=[y(t,this.isPrevDisabled,this.$slots["hooper-prev"],!0,e,function(){return i.slidePrev()}),y(t,this.isNextDisabled,this.$slots["hooper-next"],!1,e,function(){return i.slideNext()})];return t("div",{class:{"hooper-navigation":!0,"is-vertical":this.$hooper.config.vertical,"is-rtl":this.$hooper.config.rtl}},n)}};t.Hooper=s,t.Icon=v,t.Navigation=$,t.Pagination=S,t.Progress=m,t.Slide=a,t.addonMixin={inject:["$hooper"]},t.default=s,Object.defineProperty(t,"__esModule",{value:!0})},"object"==typeof exports&&"undefined"!=typeof module?i(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],i):i((t=t||self).Hooper={},t.Vue);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hooper",
3
- "version": "0.3.0",
3
+ "version": "0.3.4",
4
4
  "description": "A customizable accessible carousel slider optimized for Vue",
5
5
  "module": "dist/hooper.esm.js",
6
6
  "unpkg": "dist/hooper.js",
@@ -17,14 +17,14 @@
17
17
  "test": "jest --config jest.config.json"
18
18
  },
19
19
  "devDependencies": {
20
- "@babel/core": "^7.4.5",
21
- "@commitlint/cli": "^8.0.0",
20
+ "@babel/core": "^7.5.5",
21
+ "@commitlint/cli": "^8.1.0",
22
22
  "@vue/test-utils": "^1.0.0-beta.29",
23
23
  "babel-core": "^7.0.0-bridge.0",
24
24
  "babel-eslint": "^10.0.2",
25
25
  "babel-jest": "^24.8.0",
26
26
  "chalk": "^2.4.2",
27
- "eslint": "^6.0.1",
27
+ "eslint": "^6.1.0",
28
28
  "eslint-config-prettier": "^6.0.0",
29
29
  "eslint-plugin-prettier": "^3.1.0",
30
30
  "eslint-plugin-vue": "^5.2.3",
@@ -32,29 +32,26 @@
32
32
  "friendly-errors-webpack-plugin": "^1.7.0",
33
33
  "gzip-size": "^5.1.1",
34
34
  "html-webpack-plugin": "^3.2.0",
35
- "husky": "^2.5.0",
35
+ "husky": "^3.0.3",
36
36
  "jest": "24.8.0",
37
- "lint-staged": "^8.2.1",
37
+ "lint-staged": "^9.2.1",
38
38
  "mkdirp": "^0.5.1",
39
39
  "prettier": "^1.18.2",
40
40
  "pretty-quick": "^1.11.1",
41
41
  "progress-bar-webpack-plugin": "^1.12.1",
42
- "rollup": "^1.16.2",
42
+ "rollup": "^1.19.4",
43
43
  "rollup-plugin-babel": "^4.3.3",
44
- "rollup-plugin-commonjs": "^10.0.0",
44
+ "rollup-plugin-commonjs": "^10.0.2",
45
45
  "rollup-plugin-css-only": "^1.0.0",
46
- "rollup-plugin-node-resolve": "^5.1.0",
46
+ "rollup-plugin-node-resolve": "^5.2.0",
47
47
  "rollup-plugin-replace": "^2.2.0",
48
- "rollup-plugin-vue": "^5.0.0",
48
+ "rollup-plugin-vue": "^5.0.1",
49
49
  "uglify-js": "^3.6.0",
50
50
  "vue": "^2.6.10",
51
51
  "vue-jest": "^3.0.4",
52
52
  "vue-server-renderer": "^2.6.10",
53
53
  "vue-template-compiler": "^2.6.10",
54
- "vuepress": "^1.0.2",
55
- "webpack": "^4.35.0",
56
- "webpack-cli": "^3.3.5",
57
- "webpack-dev-server": "^3.7.2"
54
+ "vuepress": "^1.0.3"
58
55
  },
59
56
  "license": "MIT",
60
57
  "keywords": [],
package/dist/index.html DELETED
@@ -1,47 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <meta http-equiv="X-UA-Compatible" content="ie=edge" />
7
- <title>Document</title>
8
- <link rel="stylesheet" href="./hooper.css" />
9
- </head>
10
- <body>
11
- <div id="app">
12
- <hooper :items-to-show="3" :infinite-scroll="true">
13
- <slide v-for="(slide, indx) in slides" :key="indx">
14
- <div class="hooper-item">{{ slide }}</div>
15
- </slide>
16
- </hooper>
17
- <button @click="increase">increase</button>
18
- </div>
19
-
20
- <script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
21
- <script src="./hooper.js"></script>
22
- <script>
23
- new Vue({
24
- el: '#app',
25
- components: {
26
- Hooper: Hooper.Hooper,
27
- Slide: Hooper.Slide
28
- },
29
- data() {
30
- return {
31
- slides: []
32
- };
33
- },
34
- methods: {
35
- increase() {
36
- this.slides.push(this.slides.length + 1);
37
- }
38
- },
39
- mounted() {
40
- setTimeout(() => {
41
- this.slides = [1, 2, 3, 4, 5];
42
- }, 500);
43
- }
44
- });
45
- </script>
46
- </body>
47
- </html>