From 1fa380aaa3de3fa49ec231f285cbee7e96959f71 Mon Sep 17 00:00:00 2001 From: Norman Rusch Date: Tue, 14 Sep 2021 14:39:30 +0200 Subject: [PATCH] Build --- dist/caroucssel.cjs.js | 53 ++++++++++++++++--------------- dist/caroucssel.js | 63 +++++++++++++++++++------------------ dist/caroucssel.min.js | 2 +- dist/caroucssel.umd.js | 71 +++++++++++++++--------------------------- 4 files changed, 87 insertions(+), 102 deletions(-) diff --git a/dist/caroucssel.cjs.js b/dist/caroucssel.cjs.js index 146d8310..83bb12d7 100644 --- a/dist/caroucssel.cjs.js +++ b/dist/caroucssel.cjs.js @@ -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.`); } @@ -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(); @@ -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; } @@ -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, () => { @@ -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; } @@ -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; })(); @@ -355,16 +353,18 @@ 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; @@ -372,8 +372,8 @@ class Carousel { 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 = () => { @@ -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) { @@ -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(); @@ -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() { @@ -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(); @@ -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) { diff --git a/dist/caroucssel.js b/dist/caroucssel.js index 138e2bac..33795d76 100644 --- a/dist/caroucssel.js +++ b/dist/caroucssel.js @@ -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.`); } @@ -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(); @@ -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; } @@ -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, () => { @@ -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 @@ -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; })(); @@ -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; @@ -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 = () => { @@ -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) { @@ -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(); @@ -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() { @@ -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(); @@ -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) { diff --git a/dist/caroucssel.min.js b/dist/caroucssel.min.js index 94efaa4d..0147db88 100644 --- a/dist/caroucssel.min.js +++ b/dist/caroucssel.min.js @@ -1 +1 @@ -!function(t,e){if("function"==typeof define&&define.amd)define("caroucssel",["exports"],e);else if("undefined"!=typeof exports)e(exports);else{var n={exports:{}};e(n.exports),t.caroucssel=n.exports}}("undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:this,(function(t){function e(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null==n)return;var i,o,r=[],a=!0,s=!1;try{for(n=n.call(t);!(a=(i=n.next()).done)&&(r.push(i.value),!e||r.length!==e);a=!0);}catch(t){s=!0,o=t}finally{try{a||null==n.return||n.return()}finally{if(s)throw o}}return r}(t,e)||function(t,e){if(!t)return;if("string"==typeof t)return n(t,e);var i=Object.prototype.toString.call(t).slice(8,-1);"Object"===i&&t.constructor&&(i=t.constructor.name);if("Map"===i||"Set"===i)return Array.from(t);if("Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i))return n(t,e)}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function n(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,i=new Array(e);n\n\t\t\t').concat(i,"\n\t\t\n\t")},buttonPrevious:B,buttonNext:O,hasPagination:!1,paginationClassName:"pagination",paginationLabel:function(t){var e=t.index;return"".concat(e+1)},paginationTitle:function(t){var e=t.index;return"Go to ".concat(e+1,". page")},paginationTemplate:function(t){var e=t.className,n=t.controls,i=t.pages,o=t.label,r=t.title;return'\n\t\t\n\t")},hasScrollbars:!1,scrollbarsMaskClassName:"caroucssel-mask",filterItem:function(){return!0},onScroll:function(){}},j=0,A=function(){function t(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(s(this,t),a(this,"_el",void 0),a(this,"_id",void 0),a(this,"_conf",void 0),a(this,"_mask",null),a(this,"_isSmooth",!1),a(this,"_previous",null),a(this,"_next",null),a(this,"_pagination",null),a(this,"_paginationButtons",null),!(e&&e instanceof Element))throw new Error('Carousel needs a dom element but "'.concat(r(e),'" was passed.'));this._el=e,g=g||new m,j++,e.id=e.id||y(j),this._id=e.id,this._mask=null;var i=o(o({},E),n);switch(this._conf=i,this._addButtons(),this._addPagination(),this._updateScrollbars(),!0){case Array.isArray(n.index):this.index=n.index;break;case!isNaN(n.index):this.index=[n.index]}this._isSmooth=!0,this._onScroll=p(this._onScroll.bind(this),25),this._onResize=p(this._onResize.bind(this),25),e.addEventListener(C,this._onScroll),window.addEventListener(P,this._onResize)}return u(t,[{key:"el",get:function(){return this._el}},{key:"id",get:function(){return this._id}},{key:"index",get:function(){var t=this;return h(this,_,(function(){for(var e=t.el,n=t.items,i=n.length,o=e.clientWidth,r=e.getBoundingClientRect().left,a=[],s=0;s=0&&c+.75*u<=o&&a.push(s)}return 0===a.length?[0]:a}))},set:function(t){var e=this.el,n=this.items,i=n.length;if(Array.isArray(t)&&t.length&&0!==i){var r=t[0]||0;r=Math.max(Math.min(r,i-1),0);var a=e.scrollLeft,s={left:n[r].offsetLeft};if(r===this.pages[0][0]&&(s.left=0),a!==s.left){f(this,_);var l=this._isSmooth?"smooth":"auto";e.scrollTo(o(o({},s),{},{behavior:l}))}}}},{key:"items",get:function(){var t=this;return h(this,"items",(function(){var e=t.el,n=t._conf.filterItem;return Array.from(e.children).filter((function(t){return!S.test(t.tagName)&&!t.hidden})).filter(n)}))}},{key:"pages",get:function(){var t=this;return h(this,x,(function(){var e=t.el,n=t.items,i=e.clientWidth;if(0===i)return n.map((function(t,e){return[e]}));var o=[[]];return n.map((function(t,e){return{left:t.offsetLeft,width:t.clientWidth,item:t,index:e}})).sort((function(t,e){return t.left-e.left})).forEach((function(t){var e=t.left,n=t.width,r=o[o.length-1],a=r[0],s=(null==a?void 0:a.left)||0;r===o[0]&&(s=0);for(var l=Math.floor((e-s+.75*n)/i);l>0;)o.push([]),l--;o[o.length-1].push(t)})),(o=o.filter((function(t){return 0!==t.length}))).map((function(t){return t.map((function(t){return t.index}))}))}))}},{key:"pageIndex",get:function(){var t=this;return h(this,k,(function(){var e=t.el,n=t.items,i=t.index,o=t.pages,r=e.getBoundingClientRect().left,a=e.clientWidth,s=i.reduce((function(t,e){if(!n[e])return t;var i=n[e].getBoundingClientRect(),o=i.left,s=i.right;return o=Math.round(o-r),s=Math.round(s-r),o<0||at.length)&&(e=t.length);for(var n=0,i=new Array(e);n\n\t\t\t').concat(i,"\n\t\t\n\t")},buttonPrevious:S,buttonNext:w,hasPagination:!1,paginationClassName:"pagination",paginationLabel:function(t){var e=t.index;return"".concat(e+1)},paginationTitle:function(t){var e=t.index;return"Go to ".concat(e+1,". page")},paginationTemplate:function(t){var e=t.className,n=t.controls,i=t.pages,o=t.label,a=t.title;return'\n\t\t
    \n\t\t\t').concat(i.map((function(t,e){var r={index:e,page:t,pages:i},s=o(r),l=a(r);return'
  • \n\t\t\t\t\t\n\t\t\t\t
    • ")})).join(""),"\n\t\t
\n\t")},hasScrollbars:!1,scrollbarsMaskClassName:"caroucssel-mask",filterItem:function(){return!0},onScroll:function(){}},E=0,j=function(){function t(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(o(this,t),this._mask=null,this._isSmooth=!1,this._previous=null,this._next=null,this._pagination=null,this._paginationButtons=null,!(e&&e instanceof Element))throw new Error('Carousel needs a dom element but "'.concat(i(e),'" was passed.'));this._el=e,d=d||new p,E++,e.id=e.id||v(E),this._id=e.id,this._mask=null;var a=Object.assign(Object.assign({},B),n);switch(this._conf=a,this._addButtons(),this._addPagination(),this._updateScrollbars(),!0){case Array.isArray(n.index):this.index=n.index;break;case!isNaN(n.index):this.index=[n.index]}this._isSmooth=!0,this._onScroll=h(this._onScroll.bind(this),25),this._onResize=h(this._onResize.bind(this),25),e.addEventListener(N,this._onScroll),window.addEventListener(C,this._onResize)}return r(t,[{key:"el",get:function(){return this._el}},{key:"id",get:function(){return this._id}},{key:"index",get:function(){var t=this;return l(this,m,(function(){for(var e=t.el,n=t.items,i=n.length,o=e.clientWidth,a=e.getBoundingClientRect().left,r=[],s=0;s=0&&c+.75*u<=o&&r.push(s)}return 0===r.length?[0]:r}))},set:function(t){var e=this.el,n=this.items,i=n.length;if(Array.isArray(t)&&t.length&&0!==i){var o=t[0]||0;o=Math.max(Math.min(o,i-1),0);var a=e.scrollLeft,r={left:n[o].offsetLeft};if(o===this.pages[0][0]&&(r.left=0),a!==r.left){u(this,m);var s=this._isSmooth?"smooth":"auto";e.scrollTo(Object.assign(Object.assign({},r),{behavior:s}))}}}},{key:"items",get:function(){var t=this;return l(this,"items",(function(){var e=t.el,n=t._conf.filterItem;return Array.from(e.children).filter((function(t){return!k.test(t.tagName)&&!t.hidden})).filter(n)}))}},{key:"pages",get:function(){var t=this;return l(this,y,(function(){var e=t.el,n=t.items,i=e.clientWidth;if(0===i)return n.map((function(t,e){return[e]}));var o=[[]];return n.map((function(t,e){return{left:t.offsetLeft,width:t.clientWidth,item:t,index:e}})).sort((function(t,e){return t.left-e.left})).forEach((function(t){var e=t.left,n=t.width,a=o[o.length-1],r=a[0],s=(null==r?void 0:r.left)||0;a===o[0]&&(s=0);for(var l=Math.floor((e-s+.75*n)/i);l>0;)o.push([]),l--;o[o.length-1].push(t)})),(o=o.filter((function(t){return 0!==t.length}))).map((function(t){return t.map((function(t){return t.index}))}))}))}},{key:"pageIndex",get:function(){var t=this;return l(this,b,(function(){var e=t.el,n=t.items,i=t.index,o=t.pages,a=e.getBoundingClientRect().left,r=e.clientWidth,s=i.reduce((function(t,e){if(!n[e])return t;var i=n[e].getBoundingClientRect(),o=i.left,s=i.right;return o=Math.round(o-a),s=Math.round(s-a),o<0||r