hooper 0.3.0 → 0.3.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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>