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 +42 -41
- package/dist/hooper.esm.js +117 -41
- package/dist/hooper.js +117 -41
- package/dist/hooper.min.js +1 -1
- package/package.json +11 -14
- package/dist/index.html +0 -47
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
|
+
}
|
package/dist/hooper.esm.js
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
/**
|
2
|
-
* Hopper 0.3.
|
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.
|
408
|
+
this.$refs.list.addEventListener('mousedown', this.onDragStart);
|
353
409
|
}
|
354
410
|
|
355
411
|
if (this.config.touchDrag) {
|
356
|
-
this.$refs.
|
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 =
|
394
|
-
this.config =
|
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 =
|
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 =
|
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 (
|
495
|
-
|
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
|
-
|
506
|
-
|
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 -
|
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) *
|
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 =
|
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
|
-
|
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
|
-
|
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:
|
765
|
+
index: slideIndex,
|
690
766
|
isClone: true
|
691
767
|
};
|
692
768
|
before.push(clonedBefore);
|
693
769
|
var clonedAfter = cloneNode(h, slide);
|
694
|
-
|
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:
|
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
|
-
|
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
|
-
|
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
|
-
|
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.
|
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.
|
414
|
+
this.$refs.list.addEventListener('mousedown', this.onDragStart);
|
359
415
|
}
|
360
416
|
|
361
417
|
if (this.config.touchDrag) {
|
362
|
-
this.$refs.
|
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 =
|
400
|
-
this.config =
|
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 =
|
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 =
|
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 (
|
501
|
-
|
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
|
-
|
512
|
-
|
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 -
|
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) *
|
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 =
|
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
|
-
|
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
|
-
|
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:
|
771
|
+
index: slideIndex,
|
696
772
|
isClone: true
|
697
773
|
};
|
698
774
|
before.push(clonedBefore);
|
699
775
|
var clonedAfter = cloneNode(h, slide);
|
700
|
-
|
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:
|
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
|
-
|
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
|
-
|
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
|
-
|
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
|
},
|
package/dist/hooper.min.js
CHANGED
@@ -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.
|
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.
|
21
|
-
"@commitlint/cli": "^8.
|
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
|
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": "^
|
35
|
+
"husky": "^3.0.3",
|
36
36
|
"jest": "24.8.0",
|
37
|
-
"lint-staged": "^
|
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.
|
42
|
+
"rollup": "^1.19.4",
|
43
43
|
"rollup-plugin-babel": "^4.3.3",
|
44
|
-
"rollup-plugin-commonjs": "^10.0.
|
44
|
+
"rollup-plugin-commonjs": "^10.0.2",
|
45
45
|
"rollup-plugin-css-only": "^1.0.0",
|
46
|
-
"rollup-plugin-node-resolve": "^5.
|
46
|
+
"rollup-plugin-node-resolve": "^5.2.0",
|
47
47
|
"rollup-plugin-replace": "^2.2.0",
|
48
|
-
"rollup-plugin-vue": "^5.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.
|
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>
|