Skip to content

Commit

Permalink
Build
Browse files Browse the repository at this point in the history
  • Loading branch information
Norman Rusch committed Sep 14, 2021
1 parent fc3c098 commit 1fa380a
Show file tree
Hide file tree
Showing 4 changed files with 87 additions and 102 deletions.
53 changes: 28 additions & 25 deletions dist/caroucssel.cjs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,18 +142,13 @@ const DEFAULTS = {
let __instanceCount = 0;
let __scrollbar;
class Carousel {
static resetInstanceCount() {
}
_el;
_id;
_conf;
_mask = null;
_isSmooth = false;
_previous = null;
_next = null;
_pagination = null;
_paginationButtons = null;
constructor(el, options = {}) {
this._mask = null;
this._isSmooth = false;
this._previous = null;
this._next = null;
this._pagination = null;
this._paginationButtons = null;
if (!el || !(el instanceof Element)) {
throw new Error(`Carousel needs a dom element but "${(typeof el)}" was passed.`);
}
Expand All @@ -163,7 +158,7 @@ class Carousel {
el.id = el.id || ID_NAME(__instanceCount);
this._id = el.id;
this._mask = null;
const opts = { ...DEFAULTS, ...options };
const opts = Object.assign(Object.assign({}, DEFAULTS), options);
this._conf = opts;
this._addButtons();
this._addPagination();
Expand All @@ -182,6 +177,8 @@ class Carousel {
el.addEventListener(EVENT_SCROLL, this._onScroll);
window.addEventListener(EVENT_RESIZE, this._onResize);
}
static resetInstanceCount() {
}
get el() {
return this._el;
}
Expand Down Expand Up @@ -235,7 +232,7 @@ class Carousel {
}
clearCache(this, CACHE_KEY_INDEX);
const behavior = this._isSmooth ? 'smooth' : 'auto';
el.scrollTo({ ...to, behavior });
el.scrollTo(Object.assign(Object.assign({}, to), { behavior }));
}
get items() {
return fromCache(this, CACHE_KEY_ITEMS, () => {
Expand Down Expand Up @@ -266,7 +263,7 @@ class Carousel {
const { left, width } = item;
const prevPage = pages[pages.length - 1];
const firstItem = prevPage[0];
let start = firstItem?.left || 0;
let start = (firstItem === null || firstItem === void 0 ? void 0 : firstItem.left) || 0;
if (prevPage === pages[0]) {
start = 0;
}
Expand Down Expand Up @@ -337,11 +334,12 @@ class Carousel {
height = 0;
}
this._mask = this._mask || (() => {
var _a;
const mask = document.createElement('div');
mask.className = scrollbarsMaskClassName;
mask.style.overflow = 'hidden';
mask.style.height = '100%';
el.parentNode?.insertBefore(mask, this.el);
(_a = el.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(mask, this.el);
mask.appendChild(el);
return mask;
})();
Expand All @@ -355,25 +353,27 @@ class Carousel {
element.style.marginBottom = `${height * -1}px`;
}
_removeScrollbars() {
var _a, _b;
const { _mask, el } = this;
if (!_mask) {
return;
}
_mask.parentNode?.insertBefore(el, _mask);
_mask.parentNode?.removeChild(_mask);
(_a = _mask.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(el, _mask);
(_b = _mask.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(_mask);
el.removeAttribute('style');
this._mask = null;
}
_addButtons() {
var _a, _b;
const { el, id, _conf: _options } = this;
if (!_options.hasButtons) {
return;
}
const { buttonTemplate, buttonClassName, buttonPrevious, buttonNext } = _options;
const controls = id;
const [previous, next] = [
{ ...DEFAULTS_BUTTON_PREVIOUS, ...buttonPrevious, controls, className: [buttonClassName, buttonPrevious.className].join(' ') },
{ ...DEFAULTS_BUTTON_NEXT, ...buttonNext, controls, className: [buttonClassName, buttonNext.className].join(' ') },
Object.assign(Object.assign(Object.assign({}, DEFAULTS_BUTTON_PREVIOUS), buttonPrevious), { controls, className: [buttonClassName, buttonPrevious.className].join(' ') }),
Object.assign(Object.assign(Object.assign({}, DEFAULTS_BUTTON_NEXT), buttonNext), { controls, className: [buttonClassName, buttonNext.className].join(' ') }),
].map((params) => render(buttonTemplate, params));
if (previous) {
const onPrevious = () => {
Expand All @@ -382,7 +382,7 @@ class Carousel {
this.index = index;
};
previous.onclick = onPrevious;
el.parentNode?.appendChild(previous);
(_a = el.parentNode) === null || _a === void 0 ? void 0 : _a.appendChild(previous);
}
this._previous = previous;
if (next) {
Expand All @@ -392,7 +392,7 @@ class Carousel {
this.index = index;
};
next.onclick = onNext;
el.parentNode?.appendChild(next);
(_b = el.parentNode) === null || _b === void 0 ? void 0 : _b.appendChild(next);
}
this._next = next;
this._updateButtons();
Expand All @@ -417,11 +417,12 @@ class Carousel {
_removeButtons() {
const { _previous, _next } = this;
[_previous, _next].forEach((button) => {
var _a;
if (!button) {
return;
}
button.onclick = null;
button.parentNode?.removeChild(button);
(_a = button.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(button);
});
}
_addPagination() {
Expand Down Expand Up @@ -450,7 +451,7 @@ class Carousel {
return button;
});
const target = (_mask || el).parentNode;
target?.appendChild(pagination);
target === null || target === void 0 ? void 0 : target.appendChild(pagination);
this._pagination = pagination;
this._paginationButtons = buttons;
this._updatePagination();
Expand All @@ -467,13 +468,15 @@ class Carousel {
_paginationButtons.forEach((button, at) => button.disabled = (at === pageIndex));
}
_removePagination() {
var _a;
const { _pagination, _paginationButtons } = this;
(_paginationButtons || []).forEach((button) => {
var _a;
button.onclick = null;
button.parentNode?.removeChild(button);
(_a = button.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(button);
});
this._paginationButtons = null;
_pagination && _pagination.parentNode?.removeChild(_pagination);
_pagination && ((_a = _pagination.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(_pagination));
this._pagination = null;
}
_onScroll(event) {
Expand Down
63 changes: 33 additions & 30 deletions dist/caroucssel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,23 +66,13 @@ const DEFAULTS = {
let __instanceCount = 0;
let __scrollbar;
export class Carousel {
static resetInstanceCount() {
// This can be used for testing purposes to reset the instance count which is
// used to create unique id's.
if (process.env.NODE_ENV === 'test') {
__instanceCount = 0;
}
}
_el;
_id;
_conf;
_mask = null;
_isSmooth = false;
_previous = null;
_next = null;
_pagination = null;
_paginationButtons = null;
constructor(el, options = {}) {
this._mask = null;
this._isSmooth = false;
this._previous = null;
this._next = null;
this._pagination = null;
this._paginationButtons = null;
if (!el || !(el instanceof Element)) {
throw new Error(`Carousel needs a dom element but "${(typeof el)}" was passed.`);
}
Expand All @@ -97,7 +87,7 @@ export class Carousel {
// Mask will be rendered after scrollbar detection.
this._mask = null;
// extend options and defaults:
const opts = { ...DEFAULTS, ...options };
const opts = Object.assign(Object.assign({}, DEFAULTS), options);
this._conf = opts;
// Render:
this._addButtons();
Expand Down Expand Up @@ -129,6 +119,13 @@ export class Carousel {
window.addEventListener(EVENT_RESIZE, this._onResize);
/* eslint-enable @typescript-eslint/unbound-method */
}
static resetInstanceCount() {
// This can be used for testing purposes to reset the instance count which is
// used to create unique id's.
if (process.env.NODE_ENV === 'test') {
__instanceCount = 0;
}
}
get el() {
return this._el;
}
Expand Down Expand Up @@ -186,7 +183,7 @@ export class Carousel {
}
clearCache(this, CACHE_KEY_INDEX);
const behavior = this._isSmooth ? 'smooth' : 'auto';
el.scrollTo({ ...to, behavior });
el.scrollTo(Object.assign(Object.assign({}, to), { behavior }));
}
get items() {
return fromCache(this, CACHE_KEY_ITEMS, () => {
Expand Down Expand Up @@ -237,7 +234,7 @@ export class Carousel {
const { left, width } = item;
const prevPage = pages[pages.length - 1];
const firstItem = prevPage[0];
let start = firstItem?.left || 0;
let start = (firstItem === null || firstItem === void 0 ? void 0 : firstItem.left) || 0;
// This is required for the first page. The first page always
// needs to start from the left=0. Any offset from the
// left of the first visual item needs to be ignored, otherwise
Expand Down Expand Up @@ -345,11 +342,12 @@ export class Carousel {
height = 0;
}
this._mask = this._mask || (() => {
var _a;
const mask = document.createElement('div');
mask.className = scrollbarsMaskClassName;
mask.style.overflow = 'hidden';
mask.style.height = '100%';
el.parentNode?.insertBefore(mask, this.el);
(_a = el.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(mask, this.el);
mask.appendChild(el);
return mask;
})();
Expand All @@ -363,16 +361,18 @@ export class Carousel {
element.style.marginBottom = `${height * -1}px`;
}
_removeScrollbars() {
var _a, _b;
const { _mask, el } = this;
if (!_mask) {
return;
}
_mask.parentNode?.insertBefore(el, _mask);
_mask.parentNode?.removeChild(_mask);
(_a = _mask.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(el, _mask);
(_b = _mask.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(_mask);
el.removeAttribute('style');
this._mask = null;
}
_addButtons() {
var _a, _b;
const { el, id, _conf: _options } = this;
if (!_options.hasButtons) {
return;
Expand All @@ -381,8 +381,8 @@ export class Carousel {
const controls = id;
// Create button elements:
const [previous, next] = [
{ ...DEFAULTS_BUTTON_PREVIOUS, ...buttonPrevious, controls, className: [buttonClassName, buttonPrevious.className].join(' ') },
{ ...DEFAULTS_BUTTON_NEXT, ...buttonNext, controls, className: [buttonClassName, buttonNext.className].join(' ') },
Object.assign(Object.assign(Object.assign({}, DEFAULTS_BUTTON_PREVIOUS), buttonPrevious), { controls, className: [buttonClassName, buttonPrevious.className].join(' ') }),
Object.assign(Object.assign(Object.assign({}, DEFAULTS_BUTTON_NEXT), buttonNext), { controls, className: [buttonClassName, buttonNext.className].join(' ') }),
].map((params) => render(buttonTemplate, params));
if (previous) {
const onPrevious = () => {
Expand All @@ -391,7 +391,7 @@ export class Carousel {
this.index = index;
};
previous.onclick = onPrevious;
el.parentNode?.appendChild(previous);
(_a = el.parentNode) === null || _a === void 0 ? void 0 : _a.appendChild(previous);
}
this._previous = previous;
if (next) {
Expand All @@ -401,7 +401,7 @@ export class Carousel {
this.index = index;
};
next.onclick = onNext;
el.parentNode?.appendChild(next);
(_b = el.parentNode) === null || _b === void 0 ? void 0 : _b.appendChild(next);
}
this._next = next;
this._updateButtons();
Expand All @@ -426,11 +426,12 @@ export class Carousel {
_removeButtons() {
const { _previous, _next } = this;
[_previous, _next].forEach((button) => {
var _a;
if (!button) {
return;
}
button.onclick = null;
button.parentNode?.removeChild(button);
(_a = button.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(button);
});
}
_addPagination() {
Expand Down Expand Up @@ -460,7 +461,7 @@ export class Carousel {
return button;
});
const target = (_mask || el).parentNode;
target?.appendChild(pagination);
target === null || target === void 0 ? void 0 : target.appendChild(pagination);
this._pagination = pagination;
this._paginationButtons = buttons;
this._updatePagination();
Expand All @@ -477,13 +478,15 @@ export class Carousel {
_paginationButtons.forEach((button, at) => button.disabled = (at === pageIndex));
}
_removePagination() {
var _a;
const { _pagination, _paginationButtons } = this;
(_paginationButtons || []).forEach((button) => {
var _a;
button.onclick = null;
button.parentNode?.removeChild(button);
(_a = button.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(button);
});
this._paginationButtons = null;
_pagination && _pagination.parentNode?.removeChild(_pagination);
_pagination && ((_a = _pagination.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(_pagination));
this._pagination = null;
}
_onScroll(event) {
Expand Down
Loading

0 comments on commit 1fa380a

Please sign in to comment.