Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

hooper

Package Overview
Dependencies
Maintainers
2
Versions
23
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

hooper - npm Package Compare versions

Comparing version 0.2.3 to 0.3.0

805

dist/hooper.esm.js
/**
* Hopper 0.2.3
* Hopper 0.3.0
* (c) 2019

@@ -42,2 +42,22 @@ * @license MIT

function _toConsumableArray(arr) {
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
}
function _arrayWithoutHoles(arr) {
if (Array.isArray(arr)) {
for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
return arr2;
}
}
function _iterableToArray(iter) {
if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance");
}
function getInRange(value, min, max) {

@@ -80,85 +100,35 @@ return Math.max(Math.min(value, max), min);

function normalizeSlideIndex(index, slidesCount) {
var realIndex;
if (index < 0) {
return (index + slidesCount) % slidesCount;
realIndex = (index + slidesCount) % slidesCount;
} else {
realIndex = index % slidesCount;
} // Test for NaN
if (realIndex !== realIndex) {
return 0;
}
return index % slidesCount;
return realIndex;
}
function extractData(vnode, indx) {
var cOpts = vnode.componentOptions;
var data = {
class: vnode.data.class,
staticClass: vnode.data.staticClass,
style: vnode.data.style,
attrs: vnode.data.attrs,
props: _objectSpread({}, cOpts.propsData, {
isClone: true,
index: indx
}),
on: cOpts.listeners,
nativeOn: vnode.data.nativeOn,
directives: vnode.data.directives,
scopesSlots: vnode.data.scopesSlots,
slot: vnode.data.slot,
ref: vnode.data.ref,
key: vnode.data.key ? "".concat(indx, "-clone") : undefined
};
return data;
}
function cloneSlide(vnode, indx) {
function cloneNode(h, vNode) {
// use the context that the original vnode was created in.
var h = vnode.context && vnode.context.$createElement;
var children = vnode.componentOptions.children;
var data = extractData(vnode, indx);
var tag = vnode.componentOptions.Ctor;
return h(tag, data, children);
var children = vNode.children || vNode.componentOptions.children || vNode.text;
var tag = vNode.componentOptions.Ctor;
return h(tag, vNode.data, children);
} // IE11 :)
function normalizeChildren(context) {
var slotProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
function assignPoly(target) {
if (target === undefined || target === null) {
throw new TypeError('Cannot convert first argument to object');
if (context.$scopedSlots.default) {
return context.$scopedSlots.default(slotProps) || [];
}
var to = Object(target);
for (var i = 1; i < arguments.length; i++) {
var nextSource = arguments[i];
if (nextSource === undefined || nextSource === null) {
continue;
}
nextSource = Object(nextSource);
var keysArray = Object.keys(Object(nextSource));
for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
var nextKey = keysArray[nextIndex];
var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
if (desc !== undefined && desc.enumerable) {
to[nextKey] = nextSource[nextKey];
}
}
}
return to;
return context.$slots.default || [];
}
var assign = Object.assign || assignPoly;
function signPoly(value) {
if (value < 0) {
return -1;
}
return value > 0 ? 1 : 0;
}
var sign = Math.sign || signPoly;
//
var EMITTER = new Vue();
var script = {
var Carousel = {
name: 'Hooper',

@@ -282,3 +252,2 @@ provide: function provide() {

timer: null,
slides: [],
defaults: {},

@@ -427,25 +396,5 @@ breakpoints: {},

this.breakpoints = this.settings.breakpoints;
this.defaults = assign({}, this.$props, this.settings);
this.config = assign({}, this.defaults);
this.defaults = Object.assign({}, this.$props, this.settings);
this.config = Object.assign({}, this.defaults);
},
initSlides: function initSlides() {
var _this3 = this;
this.slides = this.filteredSlides();
this.slidesCount = this.slides.length;
this.slides.forEach(function (slide, indx) {
slide.componentOptions.propsData.index = indx;
});
if (this.config.infiniteScroll) {
var before = [];
var after = [];
this.slides.forEach(function (slide, indx) {
before.push(cloneSlide(slide, indx - _this3.slidesCount));
after.push(cloneSlide(slide, indx + _this3.slidesCount));
});
this.$slots['clone-before'] = before;
this.$slots['clone-after'] = after;
}
},
// updating methods

@@ -496,3 +445,3 @@ update: function update() {

updateConfig: function updateConfig() {
var _this4 = this;
var _this3 = this;

@@ -507,3 +456,3 @@ var breakpoints = Object.keys(this.breakpoints).sort(function (a, b) {

if (matched) {
_this4.config = assign({}, _this4.config, _this4.defaults, _this4.breakpoints[breakpoint]);
_this3.config = Object.assign({}, _this3.config, _this3.defaults, _this3.breakpoints[breakpoint]);
return true;

@@ -514,3 +463,3 @@ }

if (!matched) {
this.config = assign(this.config, this.defaults);
this.config = Object.assign(this.config, this.defaults);
}

@@ -524,7 +473,6 @@ },

restart: function restart() {
var _this5 = this;
var _this4 = this;
this.initSlides();
this.$nextTick(function () {
_this5.update();
_this4.update();
});

@@ -578,7 +526,7 @@ },

var draggedSlides = Math.round(Math.abs(this.delta.y / this.slideHeight) + tolerance);
this.slideTo(this.currentSlide - sign(this.delta.y) * draggedSlides);
this.slideTo(this.currentSlide - Math.sign(this.delta.y) * draggedSlides);
}
if (!this.config.vertical) {
var direction = (this.config.rtl ? -1 : 1) * sign(this.delta.x);
var direction = (this.config.rtl ? -1 : 1) * Math.sign(this.delta.x);

@@ -651,3 +599,3 @@ var _draggedSlides = Math.round(Math.abs(this.delta.x / this.slideWidth) + tolerance);

var value = event.wheelDelta || -event.deltaY;
var delta = sign(value);
var delta = Math.sign(value);

@@ -662,13 +610,4 @@ if (delta === -1) {

},
filteredSlides: function filteredSlides() {
return this.$slots.default.filter(function (el) {
if (!el.componentOptions || !el.componentOptions.Ctor) {
return false;
}
return el.componentOptions.Ctor.options.name === 'HooperSlide';
});
},
addGroupListeners: function addGroupListeners() {
var _this6 = this;
var _this5 = this;

@@ -681,3 +620,3 @@ if (!this.group) {

// set the isSource to false to prevent infinite emitting loop.
_this6.slideTo(slideIndex, false);
_this5.slideTo(slideIndex, false);
};

@@ -688,16 +627,7 @@

},
beforeUpdate: function beforeUpdate() {
var isForcUpdated = this.config.infiniteScroll && (!this.$slots['clone-before'] || !this.$slots['clone-after']);
var isSlidesUpdated = this.filteredSlides().length !== this.slidesCount;
if (isForcUpdated || isSlidesUpdated) {
this.initSlides();
}
},
created: function created() {
this.initDefaults();
this.initSlides();
},
mounted: function mounted() {
var _this7 = this;
var _this6 = this;

@@ -707,7 +637,7 @@ this.initEvents();

this.$nextTick(function () {
_this7.update();
_this6.update();
_this7.slideTo(_this7.config.initialSlide);
_this6.slideTo(_this6.config.initialSlide || 0);
_this7.$emit('loaded');
_this6.$emit('loaded');
});

@@ -725,185 +655,142 @@ },

}
},
render: function render(h) {
var _this7 = this;
var body = renderBody.call(this, h);
return h('section', {
class: {
hooper: true,
'is-vertical': this.config.vertical,
'is-rtl': this.config.rtl
},
attrs: {
tabindex: '0'
},
on: {
focusin: function focusin() {
return _this7.isFocus = true;
},
focusout: function focusout() {
return _this7.isFocus = false;
},
mouseover: function mouseover() {
return _this7.isHover = true;
},
mouseleave: function mouseleave() {
return _this7.isHover = false;
}
}
}, body);
}
};
/**
* Renders additional slides for infinite slides mode.
* By cloning Slides VNodes before and after either edges.
*/
function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier
/* server only */
, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
if (typeof shadowMode !== 'boolean') {
createInjectorSSR = createInjector;
createInjector = shadowMode;
shadowMode = false;
} // Vue.extend constructor export interop.
function renderBufferSlides(h, slides) {
var before = [];
var after = []; // reduce prop access
var slidesCount = slides.length;
var options = typeof script === 'function' ? script.options : script; // render functions
if (template && template.render) {
options.render = template.render;
options.staticRenderFns = template.staticRenderFns;
options._compiled = true; // functional template
if (isFunctionalTemplate) {
options.functional = true;
}
} // scopedId
if (scopeId) {
options._scopeId = scopeId;
for (var i = 0; i < slidesCount; i++) {
var slide = slides[i];
var clonedBefore = cloneNode(h, slide);
clonedBefore.data.key = "index-".concat(i - slidesCount);
clonedBefore.key = clonedBefore.data.key;
clonedBefore.data.props = {
index: i - slidesCount,
isClone: true
};
before.push(clonedBefore);
var clonedAfter = cloneNode(h, slide);
clonedAfter.data.key = "index-".concat(i + slidesCount);
clonedAfter.key = clonedAfter.data.key;
clonedAfter.data.props = {
index: i + slidesCount,
isClone: true
};
after.push(clonedAfter);
}
var hook;
return [].concat(before, _toConsumableArray(slides), after);
}
/**
* Produces the VNodes for the Slides.
* requires {this} to be bound to hooper.
* So use with .call or .bind
*/
if (moduleIdentifier) {
// server build
hook = function hook(context) {
// 2.3 injection
context = context || // cached call
this.$vnode && this.$vnode.ssrContext || // stateful
this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional
// 2.2 with runInNewContext: true
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__;
} // inject component styles
function renderSlides(h) {
var children = normalizeChildren(this);
var childrenCount = children.length;
var idx = 0;
var slides = [];
for (var i = 0; i < childrenCount; i++) {
var child = children[i];
var ctor = child.componentOptions && child.componentOptions.Ctor;
if (style) {
style.call(this, createInjectorSSR(context));
} // register component module identifier for async chunk inference
if (!ctor || ctor.options.name !== 'HooperSlide') {
continue;
} // give slide an index behind the scenes
if (context && context._registeredComponents) {
context._registeredComponents.add(moduleIdentifier);
}
}; // used by ssr in case component is cached and beforeCreate
// never gets called
child.componentOptions.propsData.index = idx;
child.data.key = idx;
child.key = idx;
child.data.props = _objectSpread({}, child.data.props || {}, {
isClone: false,
index: idx++
});
slides.push(child);
} // update hooper's information of the slide count.
options._ssrRegister = hook;
} else if (style) {
hook = shadowMode ? function () {
style.call(this, createInjectorShadow(this.$root.$options.shadowRoot));
} : function (context) {
style.call(this, createInjector(context));
};
}
this.slidesCount = slides.length;
if (hook) {
if (options.functional) {
// register for functional component in vue file
var originalRender = options.render;
options.render = function renderWithStyleInjection(h, context) {
hook.call(context);
return originalRender(h, context);
};
} else {
// inject component registration as beforeCreate hook
var existing = options.beforeCreate;
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
}
if (this.config.infiniteScroll) {
slides = renderBufferSlides(h, slides);
}
return script;
}
var normalizeComponent_1 = normalizeComponent;
/* script */
var __vue_script__ = script;
/* template */
var __vue_render__ = function __vue_render__() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c('section', {
staticClass: "hooper",
return h('ul', {
class: {
'is-vertical': _vm.config.vertical,
'is-rtl': _vm.config.rtl
'hooper-track': true,
'is-dragging': this.isDragging
},
attrs: {
"tabindex": "0"
},
style: this.trackTransform + this.trackTransition,
ref: 'track',
on: {
"mouseover": function mouseover($event) {
_vm.isHover = true;
},
"mouseleave": function mouseleave($event) {
_vm.isHover = false;
},
"focusin": function focusin($event) {
_vm.isFocus = true;
},
"focusout": function focusout($event) {
_vm.isFocus = false;
}
transitionend: this.onTransitionend
}
}, [_c('div', {
staticClass: "hooper-list"
}, [_c('ul', {
ref: "track",
staticClass: "hooper-track",
class: {
'is-dragging': _vm.isDragging
},
style: _vm.trackTransform + _vm.trackTransition,
on: {
"transitionend": _vm.onTransitionend
}
}, [_vm._t("clone-before"), _vm._v(" "), _vm._t("default"), _vm._v(" "), _vm._t("clone-after")], 2)]), _vm._v(" "), _vm._t("hooper-addons"), _vm._v(" "), _c('div', {
staticClass: "hooper-liveregion hooper-sr-only",
}, slides);
}
/**
* Builds the VNodes for the hooper body.
* Which is the slides, addons if available, and a11y stuff.
* REQUIRES {this} to be bound to the hooper instance.
* use with .call or .bind
*/
function renderBody(h) {
var slides = renderSlides.call(this, h);
var addons = this.$slots['hooper-addons'] || [];
var a11y = h('div', {
class: 'hooper-liveregion hooper-sr-only',
attrs: {
"aria-live": "polite",
"aria-atomic": "true"
'aria-live': 'polite',
'aria-atomic': 'true'
}
}, [_vm._v("\n " + _vm._s("Item " + (_vm.currentSlide + 1) + " of " + _vm.slidesCount) + "\n ")])], 2);
};
}, "Item ".concat(this.currentSlide + 1, " of ").concat(this.slidesCount));
var children = [slides].concat(_toConsumableArray(addons), [a11y]);
return [h('div', {
class: 'hooper-list'
}, children)];
}
var __vue_staticRenderFns__ = [];
/* style */
var __vue_inject_styles__ = undefined;
/* scoped */
var __vue_scope_id__ = undefined;
/* module identifier */
var __vue_module_identifier__ = undefined;
/* functional template */
var __vue_is_functional_template__ = false;
/* style inject */
/* style inject SSR */
var Hooper = normalizeComponent_1({
render: __vue_render__,
staticRenderFns: __vue_staticRenderFns__
}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, undefined, undefined);
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
var script$1 = {
var Slide = {
name: 'HooperSlide',

@@ -963,54 +850,23 @@ inject: ['$hooper'],

}
},
render: function render(h) {
var classes = {
'hooper-slide': true,
'is-clone': this.isClone,
'is-active': this.isActive,
'is-prev': this.isPrev,
'is-next': this.isNext,
'is-current': this.isCurrent
};
var children = normalizeChildren(this);
return h('li', {
class: classes,
style: this.style,
attrs: {
'aria-hidden': !this.isActive
}
}, children);
}
};
/* script */
var __vue_script__$1 = script$1;
/* template */
var __vue_render__$1 = function __vue_render__() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c('li', {
staticClass: "hooper-slide",
class: {
'is-clone': _vm.isClone,
'is-active': _vm.isActive,
'is-prev': _vm.isPrev,
'is-next': _vm.isNext,
'is-current': _vm.isCurrent
},
style: _vm.style,
attrs: {
"aria-hidden": _vm.isActive
}
}, [_vm._t("default")], 2);
};
var __vue_staticRenderFns__$1 = [];
/* style */
var __vue_inject_styles__$1 = undefined;
/* scoped */
var __vue_scope_id__$1 = undefined;
/* module identifier */
var __vue_module_identifier__$1 = undefined;
/* functional template */
var __vue_is_functional_template__$1 = false;
/* style inject */
/* style inject SSR */
var Slide = normalizeComponent_1({
render: __vue_render__$1,
staticRenderFns: __vue_staticRenderFns__$1
}, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, undefined, undefined);
var Mixin = {

@@ -1026,3 +882,3 @@ inject: ['$hooper']

};
var Icons = {
var Icon = {
name: 'HooperIcon',

@@ -1067,4 +923,3 @@ functional: true,

//
var script$2 = {
var Progress = {
inject: ['$hooper'],

@@ -1080,48 +935,50 @@ name: 'HooperProgress',

}
},
render: function render(h) {
return h('div', {
class: 'hooper-progress'
}, [h('div', {
class: 'hooper-progress-inner',
style: "width: ".concat(this.progress, "%")
})]);
}
};
/* script */
var __vue_script__$2 = script$2;
/* template */
function renderFraction(h, current, totalCount) {
return [h('span', current + 1), h('span', '/'), h('span', totalCount)];
}
var __vue_render__$2 = function __vue_render__() {
var _vm = this;
function renderIndicator(h, index, isCurrent, onClick) {
return h('li', [h('button', {
class: {
'hooper-indicator': true,
'is-active': isCurrent
},
on: {
click: onClick
}
}, [h('span', {
class: 'hooper-sr-only'
}, "item ".concat(index))])]);
}
var _h = _vm.$createElement;
function renderDefault(h, current, totalCount, slideToIndex) {
var children = [];
var _c = _vm._self._c || _h;
var _loop = function _loop(i) {
children.push(renderIndicator(h, i, i === current, function () {
return slideToIndex(i);
}));
};
return _c('div', {
staticClass: "hooper-progress"
}, [_c('div', {
staticClass: "hooper-progress-inner",
style: "width: " + _vm.progress + "%"
})]);
};
for (var i = 0; i < totalCount; i++) {
_loop(i);
}
var __vue_staticRenderFns__$2 = [];
/* style */
return [h('ol', {
class: 'hooper-indicators'
}, children)];
}
var __vue_inject_styles__$2 = undefined;
/* scoped */
var __vue_scope_id__$2 = undefined;
/* module identifier */
var __vue_module_identifier__$2 = undefined;
/* functional template */
var __vue_is_functional_template__$2 = false;
/* style inject */
/* style inject SSR */
var Progress = normalizeComponent_1({
render: __vue_render__$2,
staticRenderFns: __vue_staticRenderFns__$2
}, __vue_inject_styles__$2, __vue_script__$2, __vue_scope_id__$2, __vue_is_functional_template__$2, __vue_module_identifier__$2, undefined, undefined);
//
var script$3 = {
var Pagination = {
inject: ['$hooper'],

@@ -1145,71 +1002,51 @@ name: 'HooperPagination',

}
}
};
},
render: function render(h) {
var _this = this;
/* script */
var __vue_script__$3 = script$3;
/* template */
var __vue_render__$3 = function __vue_render__() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c('div', {
staticClass: "hooper-pagination",
class: {
'is-vertical': _vm.$hooper.config.vertical
}
}, [_vm.mode === 'indicator' ? _c('ol', {
staticClass: "hooper-indicators"
}, _vm._l(_vm.slides, function (index) {
return _c('li', {
key: index
}, [_c('button', {
staticClass: "hooper-indicator",
var totalCount = this.$hooper.slidesCount;
var children = this.mode === 'indicator' ? renderDefault(h, this.currentSlide, totalCount, function (index) {
return _this.$hooper.slideTo(index);
}) : renderFraction(h, this.currentSlide, totalCount);
return h('div', {
class: {
'is-active': _vm.currentSlide === index
},
on: {
"click": function click($event) {
return _vm.$hooper.slideTo(index);
}
'hooper-pagination': true,
'is-vertical': this.$hooper.config.vertical
}
}, [_c('span', {
staticClass: "hooper-sr-only"
}, [_vm._v("item " + _vm._s(index))])])]);
}), 0) : _vm._e(), _vm._v(" "), _vm.mode === 'fraction' ? [_c('span', [_vm._v(_vm._s(_vm.currentSlide + 1))]), _vm._v(" "), _c('span', [_vm._v("/")]), _vm._v(" "), _c('span', [_vm._v(_vm._s(_vm.$hooper.slidesCount))])] : _vm._e()], 2);
}, children);
}
};
var __vue_staticRenderFns__$3 = [];
/* style */
function iconName(isVertical, isRTL, isPrev) {
if (isPrev) {
return isVertical ? 'arrowUp' : isRTL ? 'arrowRight' : 'arrowLeft';
}
var __vue_inject_styles__$3 = undefined;
/* scoped */
return isVertical ? 'arrowDown' : isRTL ? 'arrowLeft' : 'arrowRight';
}
var __vue_scope_id__$3 = undefined;
/* module identifier */
function renderButton(h, disabled, slot, isPrev, _ref, onClick) {
var _class;
var __vue_module_identifier__$3 = undefined;
/* functional template */
var isVertical = _ref.isVertical,
isRTL = _ref.isRTL;
var children = slot && slot.length ? slot : [h(Icon, {
props: {
name: iconName(isVertical, isRTL, isPrev)
}
})];
return h('button', {
class: (_class = {}, _defineProperty(_class, "hooper-".concat(isPrev ? 'prev' : 'next'), true), _defineProperty(_class, 'is-disabled', disabled), _class),
attrs: {
type: 'button'
},
on: {
click: onClick
}
}, children);
}
var __vue_is_functional_template__$3 = false;
/* style inject */
/* style inject SSR */
var Pagination = normalizeComponent_1({
render: __vue_render__$3,
staticRenderFns: __vue_staticRenderFns__$3
}, __vue_inject_styles__$3, __vue_script__$3, __vue_scope_id__$3, __vue_is_functional_template__$3, __vue_module_identifier__$3, undefined, undefined);
//
var script$4 = {
var Navigation = {
inject: ['$hooper'],
name: 'HooperNavigation',
components: {
Icons: Icons
},
computed: {

@@ -1229,8 +1066,2 @@ isPrevDisabled: function isPrevDisabled() {

return this.$hooper.currentSlide === this.$hooper.slidesCount - 1;
},
isRTL: function isRTL() {
return this.$hooper.config.rtl;
},
isVertical: function isVertical() {
return this.$hooper.config.vertical;
}

@@ -1247,78 +1078,26 @@ },

}
},
render: function render(h) {
var _this = this;
var config = {
isRTL: this.$hooper.config.rtl,
isVertical: this.$hooper.config.vertical
};
var children = [renderButton(h, this.isPrevDisabled, this.$slots['hooper-prev'], true, config, function () {
return _this.slidePrev();
}), renderButton(h, this.isNextDisabled, this.$slots['hooper-next'], false, config, function () {
return _this.slideNext();
})];
return h('div', {
class: {
'hooper-navigation': true,
'is-vertical': this.$hooper.config.vertical,
'is-rtl': this.$hooper.config.rtl
}
}, children);
}
};
/* script */
var __vue_script__$4 = script$4;
/* template */
var __vue_render__$4 = function __vue_render__() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c('div', {
staticClass: "hooper-navigation",
class: {
'is-vertical': _vm.$hooper.config.vertical,
'is-rtl': _vm.$hooper.config.rtl
}
}, [_c('button', {
staticClass: "hooper-prev",
class: {
'is-disabled': _vm.isPrevDisabled
},
attrs: {
"type": "button"
},
on: {
"click": _vm.slidePrev
}
}, [_vm._t("hooper-prev", [_c('Icons', {
attrs: {
"name": _vm.isVertical ? 'arrowUp' : _vm.isRTL ? 'arrowRight' : 'arrowLeft'
}
})])], 2), _vm._v(" "), _c('button', {
staticClass: "hooper-next",
class: {
'is-disabled': _vm.isNextDisabled
},
attrs: {
"type": "button"
},
on: {
"click": _vm.slideNext
}
}, [_vm._t("hooper-next", [_c('Icons', {
attrs: {
"name": _vm.isVertical ? 'arrowDown' : _vm.isRTL ? 'arrowLeft' : 'arrowRight'
}
})])], 2)]);
};
var __vue_staticRenderFns__$4 = [];
/* style */
var __vue_inject_styles__$4 = undefined;
/* scoped */
var __vue_scope_id__$4 = undefined;
/* module identifier */
var __vue_module_identifier__$4 = undefined;
/* functional template */
var __vue_is_functional_template__$4 = false;
/* style inject */
/* style inject SSR */
var Navigation = normalizeComponent_1({
render: __vue_render__$4,
staticRenderFns: __vue_staticRenderFns__$4
}, __vue_inject_styles__$4, __vue_script__$4, __vue_scope_id__$4, __vue_is_functional_template__$4, __vue_module_identifier__$4, undefined, undefined);
export default Hooper;
export { Hooper, Icons, Navigation, Pagination, Progress, Slide, Mixin as addonMixin };
export default Carousel;
export { Carousel as Hooper, Icon, Navigation, Pagination, Progress, Slide, Mixin as addonMixin };

807

dist/hooper.js
/**
* Hopper 0.2.3
* Hopper 0.3.0
* (c) 2019

@@ -48,2 +48,22 @@ * @license MIT

function _toConsumableArray(arr) {
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
}
function _arrayWithoutHoles(arr) {
if (Array.isArray(arr)) {
for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
return arr2;
}
}
function _iterableToArray(iter) {
if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance");
}
function getInRange(value, min, max) {

@@ -86,85 +106,35 @@ return Math.max(Math.min(value, max), min);

function normalizeSlideIndex(index, slidesCount) {
var realIndex;
if (index < 0) {
return (index + slidesCount) % slidesCount;
realIndex = (index + slidesCount) % slidesCount;
} else {
realIndex = index % slidesCount;
} // Test for NaN
if (realIndex !== realIndex) {
return 0;
}
return index % slidesCount;
return realIndex;
}
function extractData(vnode, indx) {
var cOpts = vnode.componentOptions;
var data = {
class: vnode.data.class,
staticClass: vnode.data.staticClass,
style: vnode.data.style,
attrs: vnode.data.attrs,
props: _objectSpread({}, cOpts.propsData, {
isClone: true,
index: indx
}),
on: cOpts.listeners,
nativeOn: vnode.data.nativeOn,
directives: vnode.data.directives,
scopesSlots: vnode.data.scopesSlots,
slot: vnode.data.slot,
ref: vnode.data.ref,
key: vnode.data.key ? "".concat(indx, "-clone") : undefined
};
return data;
}
function cloneSlide(vnode, indx) {
function cloneNode(h, vNode) {
// use the context that the original vnode was created in.
var h = vnode.context && vnode.context.$createElement;
var children = vnode.componentOptions.children;
var data = extractData(vnode, indx);
var tag = vnode.componentOptions.Ctor;
return h(tag, data, children);
var children = vNode.children || vNode.componentOptions.children || vNode.text;
var tag = vNode.componentOptions.Ctor;
return h(tag, vNode.data, children);
} // IE11 :)
function normalizeChildren(context) {
var slotProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
function assignPoly(target) {
if (target === undefined || target === null) {
throw new TypeError('Cannot convert first argument to object');
if (context.$scopedSlots.default) {
return context.$scopedSlots.default(slotProps) || [];
}
var to = Object(target);
for (var i = 1; i < arguments.length; i++) {
var nextSource = arguments[i];
if (nextSource === undefined || nextSource === null) {
continue;
}
nextSource = Object(nextSource);
var keysArray = Object.keys(Object(nextSource));
for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
var nextKey = keysArray[nextIndex];
var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
if (desc !== undefined && desc.enumerable) {
to[nextKey] = nextSource[nextKey];
}
}
}
return to;
return context.$slots.default || [];
}
var assign = Object.assign || assignPoly;
function signPoly(value) {
if (value < 0) {
return -1;
}
return value > 0 ? 1 : 0;
}
var sign = Math.sign || signPoly;
//
var EMITTER = new Vue();
var script = {
var Carousel = {
name: 'Hooper',

@@ -288,3 +258,2 @@ provide: function provide() {

timer: null,
slides: [],
defaults: {},

@@ -433,25 +402,5 @@ breakpoints: {},

this.breakpoints = this.settings.breakpoints;
this.defaults = assign({}, this.$props, this.settings);
this.config = assign({}, this.defaults);
this.defaults = Object.assign({}, this.$props, this.settings);
this.config = Object.assign({}, this.defaults);
},
initSlides: function initSlides() {
var _this3 = this;
this.slides = this.filteredSlides();
this.slidesCount = this.slides.length;
this.slides.forEach(function (slide, indx) {
slide.componentOptions.propsData.index = indx;
});
if (this.config.infiniteScroll) {
var before = [];
var after = [];
this.slides.forEach(function (slide, indx) {
before.push(cloneSlide(slide, indx - _this3.slidesCount));
after.push(cloneSlide(slide, indx + _this3.slidesCount));
});
this.$slots['clone-before'] = before;
this.$slots['clone-after'] = after;
}
},
// updating methods

@@ -502,3 +451,3 @@ update: function update() {

updateConfig: function updateConfig() {
var _this4 = this;
var _this3 = this;

@@ -513,3 +462,3 @@ var breakpoints = Object.keys(this.breakpoints).sort(function (a, b) {

if (matched) {
_this4.config = assign({}, _this4.config, _this4.defaults, _this4.breakpoints[breakpoint]);
_this3.config = Object.assign({}, _this3.config, _this3.defaults, _this3.breakpoints[breakpoint]);
return true;

@@ -520,3 +469,3 @@ }

if (!matched) {
this.config = assign(this.config, this.defaults);
this.config = Object.assign(this.config, this.defaults);
}

@@ -530,7 +479,6 @@ },

restart: function restart() {
var _this5 = this;
var _this4 = this;
this.initSlides();
this.$nextTick(function () {
_this5.update();
_this4.update();
});

@@ -584,7 +532,7 @@ },

var draggedSlides = Math.round(Math.abs(this.delta.y / this.slideHeight) + tolerance);
this.slideTo(this.currentSlide - sign(this.delta.y) * draggedSlides);
this.slideTo(this.currentSlide - Math.sign(this.delta.y) * draggedSlides);
}
if (!this.config.vertical) {
var direction = (this.config.rtl ? -1 : 1) * sign(this.delta.x);
var direction = (this.config.rtl ? -1 : 1) * Math.sign(this.delta.x);

@@ -657,3 +605,3 @@ var _draggedSlides = Math.round(Math.abs(this.delta.x / this.slideWidth) + tolerance);

var value = event.wheelDelta || -event.deltaY;
var delta = sign(value);
var delta = Math.sign(value);

@@ -668,13 +616,4 @@ if (delta === -1) {

},
filteredSlides: function filteredSlides() {
return this.$slots.default.filter(function (el) {
if (!el.componentOptions || !el.componentOptions.Ctor) {
return false;
}
return el.componentOptions.Ctor.options.name === 'HooperSlide';
});
},
addGroupListeners: function addGroupListeners() {
var _this6 = this;
var _this5 = this;

@@ -687,3 +626,3 @@ if (!this.group) {

// set the isSource to false to prevent infinite emitting loop.
_this6.slideTo(slideIndex, false);
_this5.slideTo(slideIndex, false);
};

@@ -694,16 +633,7 @@

},
beforeUpdate: function beforeUpdate() {
var isForcUpdated = this.config.infiniteScroll && (!this.$slots['clone-before'] || !this.$slots['clone-after']);
var isSlidesUpdated = this.filteredSlides().length !== this.slidesCount;
if (isForcUpdated || isSlidesUpdated) {
this.initSlides();
}
},
created: function created() {
this.initDefaults();
this.initSlides();
},
mounted: function mounted() {
var _this7 = this;
var _this6 = this;

@@ -713,7 +643,7 @@ this.initEvents();

this.$nextTick(function () {
_this7.update();
_this6.update();
_this7.slideTo(_this7.config.initialSlide);
_this6.slideTo(_this6.config.initialSlide || 0);
_this7.$emit('loaded');
_this6.$emit('loaded');
});

@@ -731,185 +661,142 @@ },

}
},
render: function render(h) {
var _this7 = this;
var body = renderBody.call(this, h);
return h('section', {
class: {
hooper: true,
'is-vertical': this.config.vertical,
'is-rtl': this.config.rtl
},
attrs: {
tabindex: '0'
},
on: {
focusin: function focusin() {
return _this7.isFocus = true;
},
focusout: function focusout() {
return _this7.isFocus = false;
},
mouseover: function mouseover() {
return _this7.isHover = true;
},
mouseleave: function mouseleave() {
return _this7.isHover = false;
}
}
}, body);
}
};
/**
* Renders additional slides for infinite slides mode.
* By cloning Slides VNodes before and after either edges.
*/
function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier
/* server only */
, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
if (typeof shadowMode !== 'boolean') {
createInjectorSSR = createInjector;
createInjector = shadowMode;
shadowMode = false;
} // Vue.extend constructor export interop.
function renderBufferSlides(h, slides) {
var before = [];
var after = []; // reduce prop access
var slidesCount = slides.length;
var options = typeof script === 'function' ? script.options : script; // render functions
if (template && template.render) {
options.render = template.render;
options.staticRenderFns = template.staticRenderFns;
options._compiled = true; // functional template
if (isFunctionalTemplate) {
options.functional = true;
}
} // scopedId
if (scopeId) {
options._scopeId = scopeId;
for (var i = 0; i < slidesCount; i++) {
var slide = slides[i];
var clonedBefore = cloneNode(h, slide);
clonedBefore.data.key = "index-".concat(i - slidesCount);
clonedBefore.key = clonedBefore.data.key;
clonedBefore.data.props = {
index: i - slidesCount,
isClone: true
};
before.push(clonedBefore);
var clonedAfter = cloneNode(h, slide);
clonedAfter.data.key = "index-".concat(i + slidesCount);
clonedAfter.key = clonedAfter.data.key;
clonedAfter.data.props = {
index: i + slidesCount,
isClone: true
};
after.push(clonedAfter);
}
var hook;
return [].concat(before, _toConsumableArray(slides), after);
}
/**
* Produces the VNodes for the Slides.
* requires {this} to be bound to hooper.
* So use with .call or .bind
*/
if (moduleIdentifier) {
// server build
hook = function hook(context) {
// 2.3 injection
context = context || // cached call
this.$vnode && this.$vnode.ssrContext || // stateful
this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional
// 2.2 with runInNewContext: true
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__;
} // inject component styles
function renderSlides(h) {
var children = normalizeChildren(this);
var childrenCount = children.length;
var idx = 0;
var slides = [];
for (var i = 0; i < childrenCount; i++) {
var child = children[i];
var ctor = child.componentOptions && child.componentOptions.Ctor;
if (style) {
style.call(this, createInjectorSSR(context));
} // register component module identifier for async chunk inference
if (!ctor || ctor.options.name !== 'HooperSlide') {
continue;
} // give slide an index behind the scenes
if (context && context._registeredComponents) {
context._registeredComponents.add(moduleIdentifier);
}
}; // used by ssr in case component is cached and beforeCreate
// never gets called
child.componentOptions.propsData.index = idx;
child.data.key = idx;
child.key = idx;
child.data.props = _objectSpread({}, child.data.props || {}, {
isClone: false,
index: idx++
});
slides.push(child);
} // update hooper's information of the slide count.
options._ssrRegister = hook;
} else if (style) {
hook = shadowMode ? function () {
style.call(this, createInjectorShadow(this.$root.$options.shadowRoot));
} : function (context) {
style.call(this, createInjector(context));
};
}
this.slidesCount = slides.length;
if (hook) {
if (options.functional) {
// register for functional component in vue file
var originalRender = options.render;
options.render = function renderWithStyleInjection(h, context) {
hook.call(context);
return originalRender(h, context);
};
} else {
// inject component registration as beforeCreate hook
var existing = options.beforeCreate;
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
}
if (this.config.infiniteScroll) {
slides = renderBufferSlides(h, slides);
}
return script;
}
var normalizeComponent_1 = normalizeComponent;
/* script */
var __vue_script__ = script;
/* template */
var __vue_render__ = function __vue_render__() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c('section', {
staticClass: "hooper",
return h('ul', {
class: {
'is-vertical': _vm.config.vertical,
'is-rtl': _vm.config.rtl
'hooper-track': true,
'is-dragging': this.isDragging
},
attrs: {
"tabindex": "0"
},
style: this.trackTransform + this.trackTransition,
ref: 'track',
on: {
"mouseover": function mouseover($event) {
_vm.isHover = true;
},
"mouseleave": function mouseleave($event) {
_vm.isHover = false;
},
"focusin": function focusin($event) {
_vm.isFocus = true;
},
"focusout": function focusout($event) {
_vm.isFocus = false;
}
transitionend: this.onTransitionend
}
}, [_c('div', {
staticClass: "hooper-list"
}, [_c('ul', {
ref: "track",
staticClass: "hooper-track",
class: {
'is-dragging': _vm.isDragging
},
style: _vm.trackTransform + _vm.trackTransition,
on: {
"transitionend": _vm.onTransitionend
}
}, [_vm._t("clone-before"), _vm._v(" "), _vm._t("default"), _vm._v(" "), _vm._t("clone-after")], 2)]), _vm._v(" "), _vm._t("hooper-addons"), _vm._v(" "), _c('div', {
staticClass: "hooper-liveregion hooper-sr-only",
}, slides);
}
/**
* Builds the VNodes for the hooper body.
* Which is the slides, addons if available, and a11y stuff.
* REQUIRES {this} to be bound to the hooper instance.
* use with .call or .bind
*/
function renderBody(h) {
var slides = renderSlides.call(this, h);
var addons = this.$slots['hooper-addons'] || [];
var a11y = h('div', {
class: 'hooper-liveregion hooper-sr-only',
attrs: {
"aria-live": "polite",
"aria-atomic": "true"
'aria-live': 'polite',
'aria-atomic': 'true'
}
}, [_vm._v("\n " + _vm._s("Item " + (_vm.currentSlide + 1) + " of " + _vm.slidesCount) + "\n ")])], 2);
};
}, "Item ".concat(this.currentSlide + 1, " of ").concat(this.slidesCount));
var children = [slides].concat(_toConsumableArray(addons), [a11y]);
return [h('div', {
class: 'hooper-list'
}, children)];
}
var __vue_staticRenderFns__ = [];
/* style */
var __vue_inject_styles__ = undefined;
/* scoped */
var __vue_scope_id__ = undefined;
/* module identifier */
var __vue_module_identifier__ = undefined;
/* functional template */
var __vue_is_functional_template__ = false;
/* style inject */
/* style inject SSR */
var Hooper = normalizeComponent_1({
render: __vue_render__,
staticRenderFns: __vue_staticRenderFns__
}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, undefined, undefined);
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
var script$1 = {
var Slide = {
name: 'HooperSlide',

@@ -969,54 +856,23 @@ inject: ['$hooper'],

}
},
render: function render(h) {
var classes = {
'hooper-slide': true,
'is-clone': this.isClone,
'is-active': this.isActive,
'is-prev': this.isPrev,
'is-next': this.isNext,
'is-current': this.isCurrent
};
var children = normalizeChildren(this);
return h('li', {
class: classes,
style: this.style,
attrs: {
'aria-hidden': !this.isActive
}
}, children);
}
};
/* script */
var __vue_script__$1 = script$1;
/* template */
var __vue_render__$1 = function __vue_render__() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c('li', {
staticClass: "hooper-slide",
class: {
'is-clone': _vm.isClone,
'is-active': _vm.isActive,
'is-prev': _vm.isPrev,
'is-next': _vm.isNext,
'is-current': _vm.isCurrent
},
style: _vm.style,
attrs: {
"aria-hidden": _vm.isActive
}
}, [_vm._t("default")], 2);
};
var __vue_staticRenderFns__$1 = [];
/* style */
var __vue_inject_styles__$1 = undefined;
/* scoped */
var __vue_scope_id__$1 = undefined;
/* module identifier */
var __vue_module_identifier__$1 = undefined;
/* functional template */
var __vue_is_functional_template__$1 = false;
/* style inject */
/* style inject SSR */
var Slide = normalizeComponent_1({
render: __vue_render__$1,
staticRenderFns: __vue_staticRenderFns__$1
}, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, undefined, undefined);
var Mixin = {

@@ -1032,3 +888,3 @@ inject: ['$hooper']

};
var Icons = {
var Icon = {
name: 'HooperIcon',

@@ -1073,4 +929,3 @@ functional: true,

//
var script$2 = {
var Progress = {
inject: ['$hooper'],

@@ -1086,48 +941,50 @@ name: 'HooperProgress',

}
},
render: function render(h) {
return h('div', {
class: 'hooper-progress'
}, [h('div', {
class: 'hooper-progress-inner',
style: "width: ".concat(this.progress, "%")
})]);
}
};
/* script */
var __vue_script__$2 = script$2;
/* template */
function renderFraction(h, current, totalCount) {
return [h('span', current + 1), h('span', '/'), h('span', totalCount)];
}
var __vue_render__$2 = function __vue_render__() {
var _vm = this;
function renderIndicator(h, index, isCurrent, onClick) {
return h('li', [h('button', {
class: {
'hooper-indicator': true,
'is-active': isCurrent
},
on: {
click: onClick
}
}, [h('span', {
class: 'hooper-sr-only'
}, "item ".concat(index))])]);
}
var _h = _vm.$createElement;
function renderDefault(h, current, totalCount, slideToIndex) {
var children = [];
var _c = _vm._self._c || _h;
var _loop = function _loop(i) {
children.push(renderIndicator(h, i, i === current, function () {
return slideToIndex(i);
}));
};
return _c('div', {
staticClass: "hooper-progress"
}, [_c('div', {
staticClass: "hooper-progress-inner",
style: "width: " + _vm.progress + "%"
})]);
};
for (var i = 0; i < totalCount; i++) {
_loop(i);
}
var __vue_staticRenderFns__$2 = [];
/* style */
return [h('ol', {
class: 'hooper-indicators'
}, children)];
}
var __vue_inject_styles__$2 = undefined;
/* scoped */
var __vue_scope_id__$2 = undefined;
/* module identifier */
var __vue_module_identifier__$2 = undefined;
/* functional template */
var __vue_is_functional_template__$2 = false;
/* style inject */
/* style inject SSR */
var Progress = normalizeComponent_1({
render: __vue_render__$2,
staticRenderFns: __vue_staticRenderFns__$2
}, __vue_inject_styles__$2, __vue_script__$2, __vue_scope_id__$2, __vue_is_functional_template__$2, __vue_module_identifier__$2, undefined, undefined);
//
var script$3 = {
var Pagination = {
inject: ['$hooper'],

@@ -1151,71 +1008,51 @@ name: 'HooperPagination',

}
}
};
},
render: function render(h) {
var _this = this;
/* script */
var __vue_script__$3 = script$3;
/* template */
var __vue_render__$3 = function __vue_render__() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c('div', {
staticClass: "hooper-pagination",
class: {
'is-vertical': _vm.$hooper.config.vertical
}
}, [_vm.mode === 'indicator' ? _c('ol', {
staticClass: "hooper-indicators"
}, _vm._l(_vm.slides, function (index) {
return _c('li', {
key: index
}, [_c('button', {
staticClass: "hooper-indicator",
var totalCount = this.$hooper.slidesCount;
var children = this.mode === 'indicator' ? renderDefault(h, this.currentSlide, totalCount, function (index) {
return _this.$hooper.slideTo(index);
}) : renderFraction(h, this.currentSlide, totalCount);
return h('div', {
class: {
'is-active': _vm.currentSlide === index
},
on: {
"click": function click($event) {
return _vm.$hooper.slideTo(index);
}
'hooper-pagination': true,
'is-vertical': this.$hooper.config.vertical
}
}, [_c('span', {
staticClass: "hooper-sr-only"
}, [_vm._v("item " + _vm._s(index))])])]);
}), 0) : _vm._e(), _vm._v(" "), _vm.mode === 'fraction' ? [_c('span', [_vm._v(_vm._s(_vm.currentSlide + 1))]), _vm._v(" "), _c('span', [_vm._v("/")]), _vm._v(" "), _c('span', [_vm._v(_vm._s(_vm.$hooper.slidesCount))])] : _vm._e()], 2);
}, children);
}
};
var __vue_staticRenderFns__$3 = [];
/* style */
function iconName(isVertical, isRTL, isPrev) {
if (isPrev) {
return isVertical ? 'arrowUp' : isRTL ? 'arrowRight' : 'arrowLeft';
}
var __vue_inject_styles__$3 = undefined;
/* scoped */
return isVertical ? 'arrowDown' : isRTL ? 'arrowLeft' : 'arrowRight';
}
var __vue_scope_id__$3 = undefined;
/* module identifier */
function renderButton(h, disabled, slot, isPrev, _ref, onClick) {
var _class;
var __vue_module_identifier__$3 = undefined;
/* functional template */
var isVertical = _ref.isVertical,
isRTL = _ref.isRTL;
var children = slot && slot.length ? slot : [h(Icon, {
props: {
name: iconName(isVertical, isRTL, isPrev)
}
})];
return h('button', {
class: (_class = {}, _defineProperty(_class, "hooper-".concat(isPrev ? 'prev' : 'next'), true), _defineProperty(_class, 'is-disabled', disabled), _class),
attrs: {
type: 'button'
},
on: {
click: onClick
}
}, children);
}
var __vue_is_functional_template__$3 = false;
/* style inject */
/* style inject SSR */
var Pagination = normalizeComponent_1({
render: __vue_render__$3,
staticRenderFns: __vue_staticRenderFns__$3
}, __vue_inject_styles__$3, __vue_script__$3, __vue_scope_id__$3, __vue_is_functional_template__$3, __vue_module_identifier__$3, undefined, undefined);
//
var script$4 = {
var Navigation = {
inject: ['$hooper'],
name: 'HooperNavigation',
components: {
Icons: Icons
},
computed: {

@@ -1235,8 +1072,2 @@ isPrevDisabled: function isPrevDisabled() {

return this.$hooper.currentSlide === this.$hooper.slidesCount - 1;
},
isRTL: function isRTL() {
return this.$hooper.config.rtl;
},
isVertical: function isVertical() {
return this.$hooper.config.vertical;
}

@@ -1253,79 +1084,27 @@ },

}
},
render: function render(h) {
var _this = this;
var config = {
isRTL: this.$hooper.config.rtl,
isVertical: this.$hooper.config.vertical
};
var children = [renderButton(h, this.isPrevDisabled, this.$slots['hooper-prev'], true, config, function () {
return _this.slidePrev();
}), renderButton(h, this.isNextDisabled, this.$slots['hooper-next'], false, config, function () {
return _this.slideNext();
})];
return h('div', {
class: {
'hooper-navigation': true,
'is-vertical': this.$hooper.config.vertical,
'is-rtl': this.$hooper.config.rtl
}
}, children);
}
};
/* script */
var __vue_script__$4 = script$4;
/* template */
var __vue_render__$4 = function __vue_render__() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c('div', {
staticClass: "hooper-navigation",
class: {
'is-vertical': _vm.$hooper.config.vertical,
'is-rtl': _vm.$hooper.config.rtl
}
}, [_c('button', {
staticClass: "hooper-prev",
class: {
'is-disabled': _vm.isPrevDisabled
},
attrs: {
"type": "button"
},
on: {
"click": _vm.slidePrev
}
}, [_vm._t("hooper-prev", [_c('Icons', {
attrs: {
"name": _vm.isVertical ? 'arrowUp' : _vm.isRTL ? 'arrowRight' : 'arrowLeft'
}
})])], 2), _vm._v(" "), _c('button', {
staticClass: "hooper-next",
class: {
'is-disabled': _vm.isNextDisabled
},
attrs: {
"type": "button"
},
on: {
"click": _vm.slideNext
}
}, [_vm._t("hooper-next", [_c('Icons', {
attrs: {
"name": _vm.isVertical ? 'arrowDown' : _vm.isRTL ? 'arrowLeft' : 'arrowRight'
}
})])], 2)]);
};
var __vue_staticRenderFns__$4 = [];
/* style */
var __vue_inject_styles__$4 = undefined;
/* scoped */
var __vue_scope_id__$4 = undefined;
/* module identifier */
var __vue_module_identifier__$4 = undefined;
/* functional template */
var __vue_is_functional_template__$4 = false;
/* style inject */
/* style inject SSR */
var Navigation = normalizeComponent_1({
render: __vue_render__$4,
staticRenderFns: __vue_staticRenderFns__$4
}, __vue_inject_styles__$4, __vue_script__$4, __vue_scope_id__$4, __vue_is_functional_template__$4, __vue_module_identifier__$4, undefined, undefined);
exports.Hooper = Hooper;
exports.Icons = Icons;
exports.Hooper = Carousel;
exports.Icon = Icon;
exports.Navigation = Navigation;

@@ -1336,3 +1115,3 @@ exports.Pagination = Pagination;

exports.addonMixin = Mixin;
exports.default = Hooper;
exports.default = Carousel;

@@ -1339,0 +1118,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

2

dist/hooper.min.js

@@ -1,1 +0,1 @@

var t,i;t=this,i=function(t,i){"use strict";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){return t<0?(t+i)%i:t%i}function o(t,i){var e=t.componentOptions;return{class:t.data.class,staticClass:t.data.staticClass,style:t.data.style,attrs:t.data.attrs,props:function(s){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{},i=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(o).filter(function(t){return Object.getOwnPropertyDescriptor(o,t).enumerable}))),i.forEach(function(t){var i,e,n;i=s,n=o[e=t],e in i?Object.defineProperty(i,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):i[e]=n})}return s}({},e.propsData,{isClone:!0,index:i}),on:e.listeners,nativeOn:t.data.nativeOn,directives:t.data.directives,scopesSlots:t.data.scopesSlots,slot:t.data.slot,ref:t.data.ref,key:t.data.key?"".concat(i,"-clone"):void 0}}function r(t,i){var e=t.context&&t.context.$createElement,n=t.componentOptions.children,s=o(t,i);return e(t.componentOptions.Ctor,s,n)}i=i&&i.hasOwnProperty("default")?i.default:i;var s=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 s=Object.keys(Object(n)),o=0,r=s.length;o<r;o++){var a=s[o],l=Object.getOwnPropertyDescriptor(n,a);void 0!==l&&l.enumerable&&(i[a]=n[a])}}}return i};var a=Math.sign||function(t){return t<0?-1:0<t?1:0},h=new i;var l=function(t,i,e,n,s,o,r,a,l,c){"boolean"!=typeof r&&(l=a,a=r,r=!1);var h,d="function"==typeof e?e.options:e;if(t&&t.render&&(d.render=t.render,d.staticRenderFns=t.staticRenderFns,d._compiled=!0,s&&(d.functional=!0)),n&&(d._scopeId=n),o?(h=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),i&&i.call(this,l(t)),t&&t._registeredComponents&&t._registeredComponents.add(o)},d._ssrRegister=h):i&&(h=r?function(){i.call(this,c(this.$root.$options.shadowRoot))}:function(t){i.call(this,a(t))}),h)if(d.functional){var u=d.render;d.render=function(t,i){return h.call(i),u(t,i)}}else{var f=d.beforeCreate;d.beforeCreate=f?[].concat(f,h):[h]}return e},d=l({render:function(){var i=this,t=i.$createElement,e=i._self._c||t;return e("section",{staticClass:"hooper",class:{"is-vertical":i.config.vertical,"is-rtl":i.config.rtl},attrs:{tabindex:"0"},on:{mouseover:function(t){i.isHover=!0},mouseleave:function(t){i.isHover=!1},focusin:function(t){i.isFocus=!0},focusout:function(t){i.isFocus=!1}}},[e("div",{staticClass:"hooper-list"},[e("ul",{ref:"track",staticClass:"hooper-track",class:{"is-dragging":i.isDragging},style:i.trackTransform+i.trackTransition,on:{transitionend:i.onTransitionend}},[i._t("clone-before"),i._v(" "),i._t("default"),i._v(" "),i._t("clone-after")],2)]),i._v(" "),i._t("hooper-addons"),i._v(" "),e("div",{staticClass:"hooper-liveregion hooper-sr-only",attrs:{"aria-live":"polite","aria-atomic":"true"}},[i._v("\n "+i._s("Item "+(i.currentSlide+1)+" of "+i.slidesCount)+"\n ")])],2)},staticRenderFns:[]},void 0,{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,slides:[],defaults:{},breakpoints:{},delta:{x:0,y:0},config:{}}},computed:{trackTransform:function(){var t=this.config,i=t.infiniteScroll,e=t.vertical,n=t.rtl,s=t.centerMode,o=n?-1:1,r=e?this.slideHeight:this.slideWidth,a=e?this.containerHeight:this.containerWidth,l=(e?this.delta.y:this.delta.x)+o*((s?(a-r)/2:0)-(i?r*this.slidesCount:0)-this.currentSlide*r);return e?"transform: translate(0, ".concat(l,"px);"):"transform: translate(".concat(l,"px, 0);")},trackTransition:function(){return this.isSliding?"transition: ".concat(this.config.transition,"ms"):""}},watch:{group:function(t,i){t!==i&&(h.$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:l});var s=this.config,o=s.infiniteScroll,r=s.transition,a=this.currentSlide,l=o?t:function(t,i,e){return Math.max(Math.min(t,e),i)}(t,this.trimStart,this.slidesCount-this.trimEnd);this.group&&n&&h.$emit("slideGroup:".concat(this.group),t),this.currentSlide=l,this.isSliding=!0,window.setTimeout(function(){e.isSliding=!1,e.currentSlide=c(l,e.slidesCount)},r),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=s({},this.$props,this.settings),this.config=s({},this.defaults)},initSlides:function(){var e=this;if(this.slides=this.filteredSlides(),this.slidesCount=this.slides.length,this.slides.forEach(function(t,i){t.componentOptions.propsData.index=i}),this.config.infiniteScroll){var n=[],s=[];this.slides.forEach(function(t,i){n.push(r(t,i-e.slidesCount)),s.push(r(t,i+e.slidesCount))}),this.$slots["clone-before"]=n,this.$slots["clone-after"]=s}},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,s=t.infiniteScroll;if(!i||s)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=s({},e.config,e.defaults,e.breakpoints[t]),!0}),i||(this.config=s(this.config,this.defaults))},restartTimer:function(){this.timer&&this.timer.restart()},restart:function(){var t=this;this.initSlides(),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-a(this.delta.y)*i)}if(!this.config.vertical){var e=(this.config.rtl?-1:1)*a(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=a(i);-1===e&&this.slideNext(),1===e&&this.slidePrev()}},filteredSlides:function(){return this.$slots.default.filter(function(t){return!(!t.componentOptions||!t.componentOptions.Ctor)&&"HooperSlide"===t.componentOptions.Ctor.options.name})},addGroupListeners:function(){var i=this;this.group&&(this._groupSlideHandler=function(t){i.slideTo(t,!1)},h.$on("slideGroup:".concat(this.group),this._groupSlideHandler))}},beforeUpdate:function(){var t=this.config.infiniteScroll&&(!this.$slots["clone-before"]||!this.$slots["clone-after"]),i=this.filteredSlides().length!==this.slidesCount;(t||i)&&this.initSlides()},created:function(){this.initDefaults(),this.initSlides()},mounted:function(){var t=this;this.initEvents(),this.addGroupListeners(),this.$nextTick(function(){t.update(),t.slideTo(t.config.initialSlide),t.$emit("loaded")})},beforeDestroy:function(){window.removeEventListener("resize",this.update),this.group&&h.$off("slideGroup:".concat(this.group),this._groupSlideHandler),this.timer&&this.timer.stop()}},void 0,!1,void 0,void 0,void 0),u=l({render:function(){var t=this,i=t.$createElement;return(t._self._c||i)("li",{staticClass:"hooper-slide",class:{"is-clone":t.isClone,"is-active":t.isActive,"is-prev":t.isPrev,"is-next":t.isNext,"is-current":t.isCurrent},style:t.style,attrs:{"aria-hidden":t.isActive}},[t._t("default")],2)},staticRenderFns:[]},void 0,{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}}},void 0,!1,void 0,void 0,void 0),f={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"},p={name:"HooperIcon",functional:!0,inheritAttrs:!0,props:{name:{type:String,required:!0,validator:function(t){return t in f}}},render:function(t,i){var e=i.props,n=f[e.name],s=[];return s.push(t("title",function(t){return(t=t.replace(/([A-Z]+)/g," $1")).charAt(0).toUpperCase()+t.slice(1)}(e.name))),s.push(t("path",{attrs:{d:"M0 0h24v24H0z",fill:"none"}})),s.push(t("path",{attrs:{d:n}})),t("svg",{attrs:{class:"icon icon-".concat(e.name),viewBox:"0 0 24 24",width:"24px",height:"24px"}},s)}},v=l({render:function(){var t=this.$createElement,i=this._self._c||t;return i("div",{staticClass:"hooper-progress"},[i("div",{staticClass:"hooper-progress-inner",style:"width: "+this.progress+"%"})])},staticRenderFns:[]},void 0,{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}}},void 0,!1,void 0,void 0,void 0),g=l({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"hooper-pagination",class:{"is-vertical":e.$hooper.config.vertical}},["indicator"===e.mode?n("ol",{staticClass:"hooper-indicators"},e._l(e.slides,function(i){return n("li",{key:i},[n("button",{staticClass:"hooper-indicator",class:{"is-active":e.currentSlide===i},on:{click:function(t){return e.$hooper.slideTo(i)}}},[n("span",{staticClass:"hooper-sr-only"},[e._v("item "+e._s(i))])])])}),0):e._e(),e._v(" "),"fraction"===e.mode?[n("span",[e._v(e._s(e.currentSlide+1))]),e._v(" "),n("span",[e._v("/")]),e._v(" "),n("span",[e._v(e._s(e.$hooper.slidesCount))])]:e._e()],2)},staticRenderFns:[]},void 0,{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)}}},void 0,!1,void 0,void 0,void 0),m=l({render:function(){var t=this,i=t.$createElement,e=t._self._c||i;return e("div",{staticClass:"hooper-navigation",class:{"is-vertical":t.$hooper.config.vertical,"is-rtl":t.$hooper.config.rtl}},[e("button",{staticClass:"hooper-prev",class:{"is-disabled":t.isPrevDisabled},attrs:{type:"button"},on:{click:t.slidePrev}},[t._t("hooper-prev",[e("Icons",{attrs:{name:t.isVertical?"arrowUp":t.isRTL?"arrowRight":"arrowLeft"}})])],2),t._v(" "),e("button",{staticClass:"hooper-next",class:{"is-disabled":t.isNextDisabled},attrs:{type:"button"},on:{click:t.slideNext}},[t._t("hooper-next",[e("Icons",{attrs:{name:t.isVertical?"arrowDown":t.isRTL?"arrowLeft":"arrowRight"}})])],2)])},staticRenderFns:[]},void 0,{inject:["$hooper"],name:"HooperNavigation",components:{Icons:p},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},isRTL:function(){return this.$hooper.config.rtl},isVertical:function(){return this.$hooper.config.vertical}},methods:{slideNext:function(){this.$hooper.slideNext(),this.$hooper.restartTimer()},slidePrev:function(){this.$hooper.slidePrev(),this.$hooper.restartTimer()}}},void 0,!1,void 0,void 0,void 0);t.Hooper=d,t.Icons=p,t.Navigation=m,t.Pagination=g,t.Progress=v,t.Slide=u,t.addonMixin={inject:["$hooper"]},t.default=d,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);
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);

22

package.json
{
"name": "hooper",
"version": "0.2.3",
"version": "0.3.0",
"description": "A customizable accessible carousel slider optimized for Vue",

@@ -27,6 +27,6 @@ "module": "dist/hooper.esm.js",

"chalk": "^2.4.2",
"eslint": "^5.16.0",
"eslint-config-prettier": "^5.0.0",
"eslint": "^6.0.1",
"eslint-config-prettier": "^6.0.0",
"eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-vue": "^5.2.2",
"eslint-plugin-vue": "^5.2.3",
"filesize": "^4.1.2",

@@ -36,3 +36,3 @@ "friendly-errors-webpack-plugin": "^1.7.0",

"html-webpack-plugin": "^3.2.0",
"husky": "^2.4.1",
"husky": "^2.5.0",
"jest": "24.8.0",

@@ -44,7 +44,7 @@ "lint-staged": "^8.2.1",

"progress-bar-webpack-plugin": "^1.12.1",
"rollup": "^1.15.6",
"rollup-plugin-babel": "^4.3.2",
"rollup": "^1.16.2",
"rollup-plugin-babel": "^4.3.3",
"rollup-plugin-commonjs": "^10.0.0",
"rollup-plugin-css-only": "^1.0.0",
"rollup-plugin-node-resolve": "^5.0.3",
"rollup-plugin-node-resolve": "^5.1.0",
"rollup-plugin-replace": "^2.2.0",

@@ -57,5 +57,5 @@ "rollup-plugin-vue": "^5.0.0",

"vue-template-compiler": "^2.6.10",
"vuepress": "^1.0.1",
"webpack": "^4.34.0",
"webpack-cli": "^3.3.4",
"vuepress": "^1.0.2",
"webpack": "^4.35.0",
"webpack-cli": "^3.3.5",
"webpack-dev-server": "^3.7.2"

@@ -62,0 +62,0 @@ },

dist/hooper.css

Sorry, the diff of this file is not supported yet

dist/index.html

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc