@travelopia/web-components 0.5.6 → 0.5.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/declarations.d.ts
CHANGED
|
@@ -619,6 +619,7 @@ export class TPSliderSlidesElement extends HTMLElement {
|
|
|
619
619
|
export class TPSliderTrackElement extends HTMLElement {
|
|
620
620
|
}
|
|
621
621
|
|
|
622
|
+
import { TPSliderSlideElement } from './tp-slider-slide';
|
|
622
623
|
/**
|
|
623
624
|
* TP Slider.
|
|
624
625
|
*/
|
|
@@ -663,6 +664,10 @@ export class TPSliderElement extends HTMLElement {
|
|
|
663
664
|
* @return {number} Total slides.
|
|
664
665
|
*/
|
|
665
666
|
getTotalSlides(): number;
|
|
667
|
+
/**
|
|
668
|
+
* Get Slide Elements.
|
|
669
|
+
*/
|
|
670
|
+
getSlideElements(): NodeListOf<TPSliderSlideElement> | undefined;
|
|
666
671
|
/**
|
|
667
672
|
* Navigate to the next slide.
|
|
668
673
|
*/
|
package/dist/slider/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(()=>{"use strict";class t extends HTMLElement{constructor(){super(),this.touchStartX=0,this.getAttribute("current-slide")||this.setAttribute("current-slide","1"),this.slide(),this.setAttribute("initialized","yes"),"ResizeObserver"in window||(window.addEventListener("resize",this.handleResize.bind(this)),document.fonts.ready.then((()=>this.handleResize()))),this.addEventListener("touchstart",this.handleTouchStart.bind(this)),this.addEventListener("touchend",this.handleTouchEnd.bind(this))}static get observedAttributes(){return["current-slide","flexible-height","infinite","swipe"]}attributeChangedCallback(t="",e="",i=""){"current-slide"===t&&e!==i&&(this.slide(),this.dispatchEvent(new CustomEvent("slide-complete",{bubbles:!0}))),this.update()}get currentSlideIndex(){var t;return parseInt(null!==(t=this.getAttribute("current-slide"))&&void 0!==t?t:"1")}set currentSlideIndex(t){this.setCurrentSlide(t)}getTotalSlides(){const t=this.
|
|
1
|
+
(()=>{"use strict";class t extends HTMLElement{constructor(){super(),this.touchStartX=0,this.getAttribute("current-slide")||this.setAttribute("current-slide","1"),this.slide(),this.setAttribute("initialized","yes"),"ResizeObserver"in window||(window.addEventListener("resize",this.handleResize.bind(this)),document.fonts.ready.then((()=>this.handleResize()))),this.addEventListener("touchstart",this.handleTouchStart.bind(this)),this.addEventListener("touchend",this.handleTouchEnd.bind(this))}static get observedAttributes(){return["current-slide","flexible-height","infinite","swipe"]}attributeChangedCallback(t="",e="",i=""){"current-slide"===t&&e!==i&&(this.slide(),this.dispatchEvent(new CustomEvent("slide-complete",{bubbles:!0}))),this.update()}get currentSlideIndex(){var t;return parseInt(null!==(t=this.getAttribute("current-slide"))&&void 0!==t?t:"1")}set currentSlideIndex(t){this.setCurrentSlide(t)}getTotalSlides(){const t=this.getSlideElements();return t?t.length:0}getSlideElements(){const t=this.querySelector("tp-slider-slides");return null==t?void 0:t.querySelectorAll(":scope > tp-slider-slide")}next(){const t=this.getTotalSlides();this.currentSlideIndex>=t?"yes"===this.getAttribute("infinite")&&this.setCurrentSlide(1):this.setCurrentSlide(this.currentSlideIndex+1)}previous(){this.currentSlideIndex<=1?"yes"===this.getAttribute("infinite")&&this.setCurrentSlide(this.getTotalSlides()):this.setCurrentSlide(this.currentSlideIndex-1)}getCurrentSlide(){return this.currentSlideIndex}setCurrentSlide(t){t>this.getTotalSlides()||t<=0||(this.dispatchEvent(new CustomEvent("slide-set",{bubbles:!0,detail:{slideIndex:t}})),this.setAttribute("current-slide",t.toString()))}slide(){if("yes"===this.getAttribute("disabled"))return;const t=this.querySelector("tp-slider-slides"),e=this.getSlideElements();t&&e&&(this.updateHeight(),"fade"!==(this.getAttribute("behaviour")||"")&&e[this.currentSlideIndex-1]&&(t.style.left=`-${e[this.currentSlideIndex-1].offsetLeft}px`))}update(){const t=this.querySelectorAll("tp-slider-nav-item"),e=this.querySelectorAll("tp-slider-count"),i=this.querySelector('tp-slider-arrow[direction="previous"]'),s=this.querySelector('tp-slider-arrow[direction="next"]'),r=this.getSlideElements();null==r||r.forEach(((t,e)=>{this.currentSlideIndex-1===e?t.setAttribute("active","yes"):t.removeAttribute("active")})),t&&t.forEach(((t,e)=>{this.currentSlideIndex-1===e?t.setAttribute("current","yes"):t.removeAttribute("current")})),e&&(this.setAttribute("total",this.getTotalSlides().toString()),e.forEach((t=>{t.update()}))),"yes"!==this.getAttribute("infinite")?(this.getCurrentSlide()===this.getTotalSlides()?null==s||s.setAttribute("disabled","yes"):null==s||s.removeAttribute("disabled"),1===this.getCurrentSlide()?null==i||i.setAttribute("disabled","yes"):null==i||i.removeAttribute("disabled")):(null==s||s.removeAttribute("disabled"),null==i||i.removeAttribute("disabled"))}updateHeight(){const t=this.querySelector("tp-slider-slides");if(!t)return;if("yes"!==this.getAttribute("flexible-height"))return void t.style.removeProperty("height");const e=this.getSlideElements();if(!e)return;const i=e[this.currentSlideIndex-1].scrollHeight;t.style.height=`${i}px`}handleResize(){if(this.getAttribute("resizing"))return;this.setAttribute("resizing","yes"),this.slide();const t=this;setTimeout((function(){t.removeAttribute("resizing")}),20)}handleTouchStart(t){"yes"===this.getAttribute("swipe")&&(this.touchStartX=t.touches[0].clientX)}handleTouchEnd(t){if("yes"!==this.getAttribute("swipe"))return;const e=t.changedTouches[0].clientX-this.touchStartX;e>0?this.previous():e<0&&this.next()}}class e extends HTMLElement{}class i extends HTMLElement{}class s extends HTMLElement{connectedCallback(){"ResizeObserver"in window&&new ResizeObserver(this.handleHeightChange.bind(this)).observe(this)}handleHeightChange(){const t=this.closest("tp-slider");null==t||t.handleResize()}}class r extends HTMLElement{connectedCallback(){var t;null===(t=this.querySelector("button"))||void 0===t||t.addEventListener("click",this.handleClick.bind(this))}handleClick(){if("yes"===this.getAttribute("disabled"))return;const t=this.closest("tp-slider");t&&("previous"===this.getAttribute("direction")?t.previous():"next"===this.getAttribute("direction")&&t.next())}}class n extends HTMLElement{}class l extends HTMLElement{connectedCallback(){var t;null===(t=this.querySelector("button"))||void 0===t||t.addEventListener("click",this.handleClick.bind(this))}handleClick(){const t=this.closest("tp-slider");t&&t.setCurrentSlide(this.getIndex())}getIndex(){var t,e;if(this.getAttribute("index"))return parseInt(null!==(t=this.getAttribute("index"))&&void 0!==t?t:"0");const i=this.closest("tp-slider-nav");return Array.from(null!==(e=null==i?void 0:i.children)&&void 0!==e?e:[]).indexOf(this)+1}}class d extends HTMLElement{static get observedAttributes(){return["format"]}get format(){var t;return null!==(t=this.getAttribute("format"))&&void 0!==t?t:"$current / $total"}set format(t){this.setAttribute("format",t)}attributeChangedCallback(){this.update()}update(){const t=this.closest("tp-slider");if(!t)return;const e=t.getAttribute("current-slide"),i=t.getAttribute("total");this.innerHTML=this.format.replace("$current",e||"").replace("$total",i||""),this.setAttribute("current",e||""),this.setAttribute("total",i||"")}}customElements.define("tp-slider",t),customElements.define("tp-slider-track",e),customElements.define("tp-slider-slides",i),customElements.define("tp-slider-slide",s),customElements.define("tp-slider-arrow",r),customElements.define("tp-slider-nav",n),customElements.define("tp-slider-nav-item",l),customElements.define("tp-slider-count",d)})();
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/slider/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dist/slider/index.js","mappings":"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","sources":["webpack://@travelopia/web-components/./src/slider/tp-slider.ts","webpack://@travelopia/web-components/./src/slider/tp-slider-track.ts","webpack://@travelopia/web-components/./src/slider/tp-slider-slides.ts","webpack://@travelopia/web-components/./src/slider/tp-slider-slide.ts","webpack://@travelopia/web-components/./src/slider/tp-slider-arrow.ts","webpack://@travelopia/web-components/./src/slider/tp-slider-nav.ts","webpack://@travelopia/web-components/./src/slider/tp-slider-nav-item.ts","webpack://@travelopia/web-components/./src/slider/tp-slider-count.ts","webpack://@travelopia/web-components/./src/slider/index.ts"],"sourcesContent":["/**\n * Internal dependencies.\n */\nimport { TPSliderSlidesElement } from './tp-slider-slides';\nimport { TPSliderSlideElement } from './tp-slider-slide';\nimport { TPSliderCountElement } from './tp-slider-count';\nimport { TPSliderNavItemElement } from './tp-slider-nav-item';\nimport { TPSliderArrowElement } from './tp-slider-arrow';\n\n/**\n * TP Slider.\n */\nexport class TPSliderElement extends HTMLElement {\n\t/**\n\t * Properties.\n\t */\n\tprotected touchStartX: number = 0;\n\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\tsuper();\n\n\t\t// Set current slide.\n\t\tif ( ! this.getAttribute( 'current-slide' ) ) {\n\t\t\tthis.setAttribute( 'current-slide', '1' );\n\t\t}\n\n\t\t// Initialize slider.\n\t\tthis.slide();\n\t\tthis.setAttribute( 'initialized', 'yes' );\n\n\t\t// Event listeners.\n\t\tif ( ! ( 'ResizeObserver' in window ) ) {\n\t\t\t// We set the resize observer in `tp-slider-slide`\n\t\t\t// These are just fallbacks for browsers that don't support ResizeObserver.\n\t\t\t// @ts-ignore\n\t\t\twindow.addEventListener( 'resize', this.handleResize.bind( this ) );\n\t\t\tdocument.fonts.ready.then( () => this.handleResize() );\n\t\t}\n\n\t\tthis.addEventListener( 'touchstart', this.handleTouchStart.bind( this ) );\n\t\tthis.addEventListener( 'touchend', this.handleTouchEnd.bind( this ) );\n\t}\n\n\t/**\n\t * Get observed attributes.\n\t *\n\t * @return {Array} List of observed attributes.\n\t */\n\tstatic get observedAttributes(): string[] {\n\t\treturn [ 'current-slide', 'flexible-height', 'infinite', 'swipe' ];\n\t}\n\n\t/**\n\t * Attribute changed callback.\n\t *\n\t * @param {string} name Attribute name.\n\t * @param {string} oldValue Old value.\n\t * @param {string} newValue New value.\n\t */\n\tattributeChangedCallback( name: string = '', oldValue: string = '', newValue: string = '' ): void {\n\t\tif ( 'current-slide' === name && oldValue !== newValue ) {\n\t\t\tthis.slide();\n\t\t\tthis.dispatchEvent( new CustomEvent( 'slide-complete', { bubbles: true } ) );\n\t\t}\n\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Get current slide index.\n\t *\n\t * @return {number} Current slide index.\n\t */\n\tget currentSlideIndex(): number {\n\t\treturn parseInt( this.getAttribute( 'current-slide' ) ?? '1' );\n\t}\n\n\t/**\n\t * Set current slide index.\n\t *\n\t * @param {number} index Slide index.\n\t */\n\tset currentSlideIndex( index: number ) {\n\t\tthis.setCurrentSlide( index );\n\t}\n\n\t/**\n\t * Get total number of slides.\n\t *\n\t * @return {number} Total slides.\n\t */\n\tgetTotalSlides(): number {\n\t\tconst slides: NodeListOf<TPSliderSlideElement> | null = this.querySelectorAll( 'tp-slider-slide' );\n\t\tif ( slides ) {\n\t\t\treturn slides.length;\n\t\t}\n\n\t\treturn 0;\n\t}\n\n\t/**\n\t * Navigate to the next slide.\n\t */\n\tnext(): void {\n\t\tconst totalSlides: number = this.getTotalSlides();\n\n\t\tif ( this.currentSlideIndex >= totalSlides ) {\n\t\t\tif ( 'yes' === this.getAttribute( 'infinite' ) ) {\n\t\t\t\tthis.setCurrentSlide( 1 );\n\t\t\t}\n\n\t\t\treturn;\n\t\t}\n\n\t\tthis.setCurrentSlide( this.currentSlideIndex + 1 );\n\t}\n\n\t/**\n\t * Navigate to the previous slide.\n\t */\n\tprevious(): void {\n\t\tif ( this.currentSlideIndex <= 1 ) {\n\t\t\tif ( 'yes' === this.getAttribute( 'infinite' ) ) {\n\t\t\t\tthis.setCurrentSlide( this.getTotalSlides() );\n\t\t\t}\n\n\t\t\treturn;\n\t\t}\n\n\t\tthis.setCurrentSlide( this.currentSlideIndex - 1 );\n\t}\n\n\t/**\n\t * Get current slide index.\n\t *\n\t * @return {number} Current slide index.\n\t */\n\tgetCurrentSlide(): number {\n\t\treturn this.currentSlideIndex;\n\t}\n\n\t/**\n\t * Set the current slide index.\n\t *\n\t * @param {number} index Slide index.\n\t */\n\tsetCurrentSlide( index: number ): void {\n\t\tif ( index > this.getTotalSlides() || index <= 0 ) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.dispatchEvent( new CustomEvent( 'slide-set', {\n\t\t\tbubbles: true,\n\t\t\tdetail: {\n\t\t\t\tslideIndex: index,\n\t\t\t},\n\t\t} ) );\n\t\tthis.setAttribute( 'current-slide', index.toString() );\n\t}\n\n\t/**\n\t * Slide to the current slide.\n\t *\n\t * @protected\n\t */\n\tprotected slide(): void {\n\t\t// Check if slider is disabled.\n\t\tif ( 'yes' === this.getAttribute( 'disabled' ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Get slides.\n\t\tconst slidesContainer: TPSliderSlidesElement | null = this.querySelector( 'tp-slider-slides' );\n\t\tconst slides: NodeListOf<TPSliderSlideElement> | null = this.querySelectorAll( 'tp-slider-slide' );\n\t\tif ( ! slidesContainer || ! slides ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// First, update the height.\n\t\tthis.updateHeight();\n\n\t\t// Now lets slide!\n\t\tconst behaviour: string = this.getAttribute( 'behaviour' ) || '';\n\t\tif ( 'fade' !== behaviour && slides[ this.currentSlideIndex - 1 ] ) {\n\t\t\tslidesContainer.style.left = `-${ slides[ this.currentSlideIndex - 1 ].offsetLeft }px`;\n\t\t}\n\t}\n\n\t/**\n\t * Update stuff when any attribute has changed.\n\t * Example: Update subcomponents.\n\t */\n\tupdate(): void {\n\t\t// Get subcomponents.\n\t\tconst sliderNavItems: NodeListOf<TPSliderNavItemElement> | null = this.querySelectorAll( 'tp-slider-nav-item' );\n\t\tconst sliderCount: TPSliderCountElement | null = this.querySelector( 'tp-slider-count' );\n\t\tconst leftArrow: TPSliderArrowElement | null = this.querySelector( 'tp-slider-arrow[direction=\"previous\"]' );\n\t\tconst rightArrow: TPSliderArrowElement | null = this.querySelector( 'tp-slider-arrow[direction=\"next\"]' );\n\n\t\t// Set active slide.\n\t\tconst slides: NodeListOf<TPSliderSlideElement> | null = this.querySelectorAll( 'tp-slider-slide' );\n\t\tslides?.forEach( ( slide: TPSliderSlideElement, index: number ): void => {\n\t\t\tif ( this.currentSlideIndex - 1 === index ) {\n\t\t\t\tslide.setAttribute( 'active', 'yes' );\n\t\t\t} else {\n\t\t\t\tslide.removeAttribute( 'active' );\n\t\t\t}\n\t\t} );\n\n\t\t// Set current slider nav item.\n\t\tif ( sliderNavItems ) {\n\t\t\tsliderNavItems.forEach( ( navItem: TPSliderNavItemElement, index: number ): void => {\n\t\t\t\tif ( this.currentSlideIndex - 1 === index ) {\n\t\t\t\t\tnavItem.setAttribute( 'current', 'yes' );\n\t\t\t\t} else {\n\t\t\t\t\tnavItem.removeAttribute( 'current' );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\n\t\t// Update slider count.\n\t\tif ( sliderCount ) {\n\t\t\tsliderCount.setAttribute( 'current', this.getCurrentSlide().toString() );\n\t\t\tsliderCount.setAttribute( 'total', this.getTotalSlides().toString() );\n\t\t}\n\n\t\t// Enable / disable arrows.\n\t\tif ( 'yes' !== this.getAttribute( 'infinite' ) ) {\n\t\t\tif ( this.getCurrentSlide() === this.getTotalSlides() ) {\n\t\t\t\trightArrow?.setAttribute( 'disabled', 'yes' );\n\t\t\t} else {\n\t\t\t\trightArrow?.removeAttribute( 'disabled' );\n\t\t\t}\n\n\t\t\tif ( 1 === this.getCurrentSlide() ) {\n\t\t\t\tleftArrow?.setAttribute( 'disabled', 'yes' );\n\t\t\t} else {\n\t\t\t\tleftArrow?.removeAttribute( 'disabled' );\n\t\t\t}\n\t\t} else {\n\t\t\trightArrow?.removeAttribute( 'disabled' );\n\t\t\tleftArrow?.removeAttribute( 'disabled' );\n\t\t}\n\t}\n\n\t/**\n\t * Update the height of the slider based on current slide.\n\t */\n\tupdateHeight(): void {\n\t\t// Get slides container to resize.\n\t\tconst slidesContainer: TPSliderSlidesElement | null = this.querySelector( 'tp-slider-slides' );\n\t\tif ( ! slidesContainer ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Bail early if we don't want it to be flexible height.\n\t\tif ( 'yes' !== this.getAttribute( 'flexible-height' ) ) {\n\t\t\t// Remove height property for good measure!\n\t\t\tslidesContainer.style.removeProperty( 'height' );\n\t\t\treturn;\n\t\t}\n\n\t\t// Get slides.\n\t\tconst slides: NodeListOf<TPSliderSlideElement> | null = this.querySelectorAll( 'tp-slider-slide' );\n\t\tif ( ! slides ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Set the height of the container to be the height of the current slide.\n\t\tconst height: number = slides[ this.currentSlideIndex - 1 ].scrollHeight;\n\t\tslidesContainer.style.height = `${ height }px`;\n\t}\n\n\t/**\n\t * Resize the slider when the window is resized.\n\t *\n\t * @protected\n\t */\n\thandleResize(): void {\n\t\t// Check if we're already resizing.\n\t\tif ( this.getAttribute( 'resizing' ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// First, lets flag this component as resizing.\n\t\tthis.setAttribute( 'resizing', 'yes' );\n\n\t\t// Run the slide (so height can be resized).\n\t\tthis.slide();\n\n\t\t// Done, let's remove the flag.\n\t\t// We need to do this on a timeout to avoid a race condition with transitions.\n\t\tconst _this = this;\n\t\tsetTimeout( function() {\n\t\t\t_this.removeAttribute( 'resizing' );\n\t\t}, 20 );\n\t}\n\n\t/**\n\t * Detect touch start event, and store the starting location.\n\t *\n\t * @param {Event} e Touch event.\n\t *\n\t * @protected\n\t */\n\tprotected handleTouchStart( e: TouchEvent ): void {\n\t\tif ( 'yes' === this.getAttribute( 'swipe' ) ) {\n\t\t\tthis.touchStartX = e.touches[ 0 ].clientX;\n\t\t}\n\t}\n\n\t/**\n\t * Detect touch end event, and check if it was a left or right swipe.\n\t *\n\t * @param {Event} e Touch event.\n\t *\n\t * @protected\n\t */\n\tprotected handleTouchEnd( e: TouchEvent ): void {\n\t\tif ( 'yes' !== this.getAttribute( 'swipe' ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst touchEndX: number = e.changedTouches[ 0 ].clientX;\n\t\tconst swipeDistance: number = touchEndX - this.touchStartX;\n\n\t\tif ( swipeDistance > 0 ) {\n\t\t\tthis.previous();\n\t\t} else if ( swipeDistance < 0 ) {\n\t\t\tthis.next();\n\t\t}\n\t}\n}\n","/**\n * TP Slider Track.\n */\nexport class TPSliderTrackElement extends HTMLElement {\n}\n","/**\n * TP Slider Slides.\n */\nexport class TPSliderSlidesElement extends HTMLElement {\n}\n","/**\n * Internal dependencies.\n */\nimport { TPSliderElement } from './tp-slider';\n\n/**\n * TP Slider Slide.\n */\nexport class TPSliderSlideElement extends HTMLElement {\n\t/**\n\t * Connected callback.\n\t */\n\tconnectedCallback(): void {\n\t\t// Resize observer.\n\t\tif ( 'ResizeObserver' in window ) {\n\t\t\tnew ResizeObserver( this.handleHeightChange.bind( this ) ).observe( this );\n\t\t}\n\t}\n\n\t/**\n\t * Handle slide height change.\n\t */\n\tprotected handleHeightChange(): void {\n\t\tconst slider: TPSliderElement | null = this.closest( 'tp-slider' );\n\t\tslider?.handleResize();\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPSliderElement } from './tp-slider';\n\n/**\n * TP Slider Arrow.\n */\nexport class TPSliderArrowElement extends HTMLElement {\n\t/**\n\t * Connected callback.\n\t */\n\tconnectedCallback(): void {\n\t\tthis.querySelector( 'button' )?.addEventListener( 'click', this.handleClick.bind( this ) );\n\t}\n\n\t/**\n\t * Handle when the button is clicked.\n\t */\n\thandleClick(): void {\n\t\tif ( 'yes' === this.getAttribute( 'disabled' ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst slider: TPSliderElement | null = this.closest( 'tp-slider' );\n\t\tif ( ! slider ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( 'previous' === this.getAttribute( 'direction' ) ) {\n\t\t\tslider.previous();\n\t\t} else if ( 'next' === this.getAttribute( 'direction' ) ) {\n\t\t\tslider.next();\n\t\t}\n\t}\n}\n","/**\n * TP Slider Nav.\n */\nexport class TPSliderNavElement extends HTMLElement {\n}\n","/**\n * Internal dependencies.\n */\nimport { TPSliderElement } from './tp-slider';\nimport { TPSliderNavElement } from './tp-slider-nav';\n\n/**\n * TP Slider Nav Item.\n */\nexport class TPSliderNavItemElement extends HTMLElement {\n\t/**\n\t * Connected callback.\n\t */\n\tconnectedCallback(): void {\n\t\tthis.querySelector( 'button' )?.addEventListener( 'click', this.handleClick.bind( this ) );\n\t}\n\n\t/**\n\t * Handle when the button is clicked.\n\t */\n\thandleClick(): void {\n\t\tconst slider: TPSliderElement | null = this.closest( 'tp-slider' );\n\t\tif ( ! slider ) {\n\t\t\treturn;\n\t\t}\n\n\t\tslider.setCurrentSlide( this.getIndex() );\n\t}\n\n\t/**\n\t * Get index of this item inside the navigation.\n\t *\n\t * @return {number} Index.\n\t */\n\tgetIndex(): number {\n\t\tif ( this.getAttribute( 'index' ) ) {\n\t\t\treturn parseInt( this.getAttribute( 'index' ) ?? '0' );\n\t\t}\n\n\t\tconst slideNav: TPSliderNavElement | null = this.closest( 'tp-slider-nav' );\n\t\treturn Array.from( slideNav?.children ?? [] ).indexOf( this ) + 1;\n\t}\n}\n","/**\n * TP Slider Count.\n */\nexport class TPSliderCountElement extends HTMLElement {\n\t/**\n\t * Get observed attributes.\n\t *\n\t * @return {Array} Observed attributes.\n\t */\n\tstatic get observedAttributes(): string[] {\n\t\treturn [ 'current', 'total', 'format' ];\n\t}\n\n\t/**\n\t * Get format.\n\t *\n\t * @return {string} Format.\n\t */\n\tget format(): string {\n\t\treturn this.getAttribute( 'format' ) ?? '$current / $total';\n\t}\n\n\t/**\n\t * Set format.\n\t *\n\t * @param {string} format Format.\n\t */\n\tset format( format: string ) {\n\t\tthis.setAttribute( 'format', format );\n\t}\n\n\t/**\n\t * Attribute changed callback.\n\t */\n\tattributeChangedCallback(): void {\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Update component.\n\t */\n\tupdate(): void {\n\t\tthis.innerHTML =\n\t\t\tthis.format\n\t\t\t\t.replace( '$current', this.getAttribute( 'current' ) ?? '' )\n\t\t\t\t.replace( '$total', this.getAttribute( 'total' ) ?? '' );\n\t}\n}\n","/**\n * Styles.\n */\nimport './style.scss';\n\n/**\n * Components.\n */\nimport { TPSliderElement } from './tp-slider';\nimport { TPSliderTrackElement } from './tp-slider-track';\nimport { TPSliderSlidesElement } from './tp-slider-slides';\nimport { TPSliderSlideElement } from './tp-slider-slide';\nimport { TPSliderArrowElement } from './tp-slider-arrow';\nimport { TPSliderNavElement } from './tp-slider-nav';\nimport { TPSliderNavItemElement } from './tp-slider-nav-item';\nimport { TPSliderCountElement } from './tp-slider-count';\n\n/**\n * Register Components.\n */\ncustomElements.define( 'tp-slider', TPSliderElement );\ncustomElements.define( 'tp-slider-track', TPSliderTrackElement );\ncustomElements.define( 'tp-slider-slides', TPSliderSlidesElement );\ncustomElements.define( 'tp-slider-slide', TPSliderSlideElement );\ncustomElements.define( 'tp-slider-arrow', TPSliderArrowElement );\ncustomElements.define( 'tp-slider-nav', TPSliderNavElement );\ncustomElements.define( 'tp-slider-nav-item', TPSliderNavItemElement );\ncustomElements.define( 'tp-slider-count', TPSliderCountElement );\n"],"names":["TPSliderElement","HTMLElement","constructor","super","touchStartX","this","getAttribute","setAttribute","slide","window","addEventListener","handleResize","bind","document","fonts","ready","then","handleTouchStart","handleTouchEnd","observedAttributes","attributeChangedCallback","name","oldValue","newValue","dispatchEvent","CustomEvent","bubbles","update","currentSlideIndex","parseInt","index","setCurrentSlide","getTotalSlides","slides","querySelectorAll","length","next","totalSlides","previous","getCurrentSlide","detail","slideIndex","toString","slidesContainer","querySelector","updateHeight","style","left","offsetLeft","sliderNavItems","sliderCount","leftArrow","rightArrow","forEach","removeAttribute","navItem","removeProperty","height","scrollHeight","_this","setTimeout","e","touches","clientX","swipeDistance","changedTouches","TPSliderTrackElement","TPSliderSlidesElement","TPSliderSlideElement","connectedCallback","ResizeObserver","handleHeightChange","observe","slider","closest","TPSliderArrowElement","handleClick","TPSliderNavElement","TPSliderNavItemElement","getIndex","slideNav","Array","from","children","indexOf","TPSliderCountElement","format","innerHTML","replace","customElements","define"],"sourceRoot":""}
|
|
1
|
+
{"version":3,"file":"dist/slider/index.js","mappings":"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","sources":["webpack://@travelopia/web-components/./src/slider/tp-slider.ts","webpack://@travelopia/web-components/./src/slider/tp-slider-track.ts","webpack://@travelopia/web-components/./src/slider/tp-slider-slides.ts","webpack://@travelopia/web-components/./src/slider/tp-slider-slide.ts","webpack://@travelopia/web-components/./src/slider/tp-slider-arrow.ts","webpack://@travelopia/web-components/./src/slider/tp-slider-nav.ts","webpack://@travelopia/web-components/./src/slider/tp-slider-nav-item.ts","webpack://@travelopia/web-components/./src/slider/tp-slider-count.ts","webpack://@travelopia/web-components/./src/slider/index.ts"],"sourcesContent":["/**\n * Internal dependencies.\n */\nimport { TPSliderSlidesElement } from './tp-slider-slides';\nimport { TPSliderSlideElement } from './tp-slider-slide';\nimport { TPSliderCountElement } from './tp-slider-count';\nimport { TPSliderNavItemElement } from './tp-slider-nav-item';\nimport { TPSliderArrowElement } from './tp-slider-arrow';\n\n/**\n * TP Slider.\n */\nexport class TPSliderElement extends HTMLElement {\n\t/**\n\t * Properties.\n\t */\n\tprotected touchStartX: number = 0;\n\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\tsuper();\n\n\t\t// Set current slide.\n\t\tif ( ! this.getAttribute( 'current-slide' ) ) {\n\t\t\tthis.setAttribute( 'current-slide', '1' );\n\t\t}\n\n\t\t// Initialize slider.\n\t\tthis.slide();\n\t\tthis.setAttribute( 'initialized', 'yes' );\n\n\t\t// Event listeners.\n\t\tif ( ! ( 'ResizeObserver' in window ) ) {\n\t\t\t// We set the resize observer in `tp-slider-slide`\n\t\t\t// These are just fallbacks for browsers that don't support ResizeObserver.\n\t\t\t// @ts-ignore\n\t\t\twindow.addEventListener( 'resize', this.handleResize.bind( this ) );\n\t\t\tdocument.fonts.ready.then( () => this.handleResize() );\n\t\t}\n\n\t\tthis.addEventListener( 'touchstart', this.handleTouchStart.bind( this ) );\n\t\tthis.addEventListener( 'touchend', this.handleTouchEnd.bind( this ) );\n\t}\n\n\t/**\n\t * Get observed attributes.\n\t *\n\t * @return {Array} List of observed attributes.\n\t */\n\tstatic get observedAttributes(): string[] {\n\t\treturn [ 'current-slide', 'flexible-height', 'infinite', 'swipe' ];\n\t}\n\n\t/**\n\t * Attribute changed callback.\n\t *\n\t * @param {string} name Attribute name.\n\t * @param {string} oldValue Old value.\n\t * @param {string} newValue New value.\n\t */\n\tattributeChangedCallback( name: string = '', oldValue: string = '', newValue: string = '' ): void {\n\t\tif ( 'current-slide' === name && oldValue !== newValue ) {\n\t\t\tthis.slide();\n\t\t\tthis.dispatchEvent( new CustomEvent( 'slide-complete', { bubbles: true } ) );\n\t\t}\n\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Get current slide index.\n\t *\n\t * @return {number} Current slide index.\n\t */\n\tget currentSlideIndex(): number {\n\t\treturn parseInt( this.getAttribute( 'current-slide' ) ?? '1' );\n\t}\n\n\t/**\n\t * Set current slide index.\n\t *\n\t * @param {number} index Slide index.\n\t */\n\tset currentSlideIndex( index: number ) {\n\t\tthis.setCurrentSlide( index );\n\t}\n\n\t/**\n\t * Get total number of slides.\n\t *\n\t * @return {number} Total slides.\n\t */\n\tgetTotalSlides(): number {\n\t\tconst slides: NodeListOf<TPSliderSlideElement> | null | undefined = this.getSlideElements();\n\n\t\tif ( slides ) {\n\t\t\treturn slides.length;\n\t\t}\n\n\t\treturn 0;\n\t}\n\n\t/**\n\t * Get Slide Elements.\n\t */\n\tgetSlideElements() {\n\t\tconst slidesElement: TPSliderSlidesElement | null = this.querySelector( 'tp-slider-slides' );\n\t\tconst slides: NodeListOf<TPSliderSlideElement> | null | undefined = slidesElement?.querySelectorAll( ':scope > tp-slider-slide' );\n\n\t\treturn slides;\n\t}\n\n\t/**\n\t * Navigate to the next slide.\n\t */\n\tnext(): void {\n\t\tconst totalSlides: number = this.getTotalSlides();\n\n\t\tif ( this.currentSlideIndex >= totalSlides ) {\n\t\t\tif ( 'yes' === this.getAttribute( 'infinite' ) ) {\n\t\t\t\tthis.setCurrentSlide( 1 );\n\t\t\t}\n\n\t\t\treturn;\n\t\t}\n\n\t\tthis.setCurrentSlide( this.currentSlideIndex + 1 );\n\t}\n\n\t/**\n\t * Navigate to the previous slide.\n\t */\n\tprevious(): void {\n\t\tif ( this.currentSlideIndex <= 1 ) {\n\t\t\tif ( 'yes' === this.getAttribute( 'infinite' ) ) {\n\t\t\t\tthis.setCurrentSlide( this.getTotalSlides() );\n\t\t\t}\n\n\t\t\treturn;\n\t\t}\n\n\t\tthis.setCurrentSlide( this.currentSlideIndex - 1 );\n\t}\n\n\t/**\n\t * Get current slide index.\n\t *\n\t * @return {number} Current slide index.\n\t */\n\tgetCurrentSlide(): number {\n\t\treturn this.currentSlideIndex;\n\t}\n\n\t/**\n\t * Set the current slide index.\n\t *\n\t * @param {number} index Slide index.\n\t */\n\tsetCurrentSlide( index: number ): void {\n\t\tif ( index > this.getTotalSlides() || index <= 0 ) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.dispatchEvent( new CustomEvent( 'slide-set', {\n\t\t\tbubbles: true,\n\t\t\tdetail: {\n\t\t\t\tslideIndex: index,\n\t\t\t},\n\t\t} ) );\n\t\tthis.setAttribute( 'current-slide', index.toString() );\n\t}\n\n\t/**\n\t * Slide to the current slide.\n\t *\n\t * @protected\n\t */\n\tprotected slide(): void {\n\t\t// Check if slider is disabled.\n\t\tif ( 'yes' === this.getAttribute( 'disabled' ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Get slides.\n\t\tconst slidesContainer: TPSliderSlidesElement | null = this.querySelector( 'tp-slider-slides' );\n\t\tconst slides: NodeListOf<TPSliderSlideElement> | null | undefined = this.getSlideElements();\n\t\tif ( ! slidesContainer || ! slides ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// First, update the height.\n\t\tthis.updateHeight();\n\n\t\t// Now lets slide!\n\t\tconst behaviour: string = this.getAttribute( 'behaviour' ) || '';\n\t\tif ( 'fade' !== behaviour && slides[ this.currentSlideIndex - 1 ] ) {\n\t\t\tslidesContainer.style.left = `-${ slides[ this.currentSlideIndex - 1 ].offsetLeft }px`;\n\t\t}\n\t}\n\n\t/**\n\t * Update stuff when any attribute has changed.\n\t * Example: Update subcomponents.\n\t */\n\tupdate(): void {\n\t\t// Get subcomponents.\n\t\tconst sliderNavItems: NodeListOf<TPSliderNavItemElement> | null = this.querySelectorAll( 'tp-slider-nav-item' );\n\t\tconst sliderCounts: NodeListOf<TPSliderCountElement> | null = this.querySelectorAll( 'tp-slider-count' );\n\t\tconst leftArrow: TPSliderArrowElement | null = this.querySelector( 'tp-slider-arrow[direction=\"previous\"]' );\n\t\tconst rightArrow: TPSliderArrowElement | null = this.querySelector( 'tp-slider-arrow[direction=\"next\"]' );\n\n\t\t// Set active slide.\n\t\tconst slides: NodeListOf<TPSliderSlideElement> | null | undefined = this.getSlideElements();\n\t\tslides?.forEach( ( slide: TPSliderSlideElement, index: number ): void => {\n\t\t\tif ( this.currentSlideIndex - 1 === index ) {\n\t\t\t\tslide.setAttribute( 'active', 'yes' );\n\t\t\t} else {\n\t\t\t\tslide.removeAttribute( 'active' );\n\t\t\t}\n\t\t} );\n\n\t\t// Set current slider nav item.\n\t\tif ( sliderNavItems ) {\n\t\t\tsliderNavItems.forEach( ( navItem: TPSliderNavItemElement, index: number ): void => {\n\t\t\t\tif ( this.currentSlideIndex - 1 === index ) {\n\t\t\t\t\tnavItem.setAttribute( 'current', 'yes' );\n\t\t\t\t} else {\n\t\t\t\t\tnavItem.removeAttribute( 'current' );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\n\t\t// Update slider count.\n\t\tif ( sliderCounts ) {\n\t\t\t// Set total attribute.\n\t\t\tthis.setAttribute( 'total', this.getTotalSlides().toString() );\n\n\t\t\t// Update slider counts.\n\t\t\tsliderCounts.forEach( ( slideCount: TPSliderCountElement ) => {\n\t\t\t\tslideCount.update();\n\t\t\t} );\n\t\t}\n\n\t\t// Enable / disable arrows.\n\t\tif ( 'yes' !== this.getAttribute( 'infinite' ) ) {\n\t\t\tif ( this.getCurrentSlide() === this.getTotalSlides() ) {\n\t\t\t\trightArrow?.setAttribute( 'disabled', 'yes' );\n\t\t\t} else {\n\t\t\t\trightArrow?.removeAttribute( 'disabled' );\n\t\t\t}\n\n\t\t\tif ( 1 === this.getCurrentSlide() ) {\n\t\t\t\tleftArrow?.setAttribute( 'disabled', 'yes' );\n\t\t\t} else {\n\t\t\t\tleftArrow?.removeAttribute( 'disabled' );\n\t\t\t}\n\t\t} else {\n\t\t\trightArrow?.removeAttribute( 'disabled' );\n\t\t\tleftArrow?.removeAttribute( 'disabled' );\n\t\t}\n\t}\n\n\t/**\n\t * Update the height of the slider based on current slide.\n\t */\n\tupdateHeight(): void {\n\t\t// Get slides container to resize.\n\t\tconst slidesContainer: TPSliderSlidesElement | null = this.querySelector( 'tp-slider-slides' );\n\t\tif ( ! slidesContainer ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Bail early if we don't want it to be flexible height.\n\t\tif ( 'yes' !== this.getAttribute( 'flexible-height' ) ) {\n\t\t\t// Remove height property for good measure!\n\t\t\tslidesContainer.style.removeProperty( 'height' );\n\t\t\treturn;\n\t\t}\n\n\t\t// Get slides.\n\t\tconst slides: NodeListOf<TPSliderSlideElement> | null | undefined = this.getSlideElements();\n\t\tif ( ! slides ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Set the height of the container to be the height of the current slide.\n\t\tconst height: number = slides[ this.currentSlideIndex - 1 ].scrollHeight;\n\t\tslidesContainer.style.height = `${ height }px`;\n\t}\n\n\t/**\n\t * Resize the slider when the window is resized.\n\t *\n\t * @protected\n\t */\n\thandleResize(): void {\n\t\t// Check if we're already resizing.\n\t\tif ( this.getAttribute( 'resizing' ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// First, lets flag this component as resizing.\n\t\tthis.setAttribute( 'resizing', 'yes' );\n\n\t\t// Run the slide (so height can be resized).\n\t\tthis.slide();\n\n\t\t// Done, let's remove the flag.\n\t\t// We need to do this on a timeout to avoid a race condition with transitions.\n\t\tconst _this = this;\n\t\tsetTimeout( function() {\n\t\t\t_this.removeAttribute( 'resizing' );\n\t\t}, 20 );\n\t}\n\n\t/**\n\t * Detect touch start event, and store the starting location.\n\t *\n\t * @param {Event} e Touch event.\n\t *\n\t * @protected\n\t */\n\tprotected handleTouchStart( e: TouchEvent ): void {\n\t\tif ( 'yes' === this.getAttribute( 'swipe' ) ) {\n\t\t\tthis.touchStartX = e.touches[ 0 ].clientX;\n\t\t}\n\t}\n\n\t/**\n\t * Detect touch end event, and check if it was a left or right swipe.\n\t *\n\t * @param {Event} e Touch event.\n\t *\n\t * @protected\n\t */\n\tprotected handleTouchEnd( e: TouchEvent ): void {\n\t\tif ( 'yes' !== this.getAttribute( 'swipe' ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst touchEndX: number = e.changedTouches[ 0 ].clientX;\n\t\tconst swipeDistance: number = touchEndX - this.touchStartX;\n\n\t\tif ( swipeDistance > 0 ) {\n\t\t\tthis.previous();\n\t\t} else if ( swipeDistance < 0 ) {\n\t\t\tthis.next();\n\t\t}\n\t}\n}\n","/**\n * TP Slider Track.\n */\nexport class TPSliderTrackElement extends HTMLElement {\n}\n","/**\n * TP Slider Slides.\n */\nexport class TPSliderSlidesElement extends HTMLElement {\n}\n","/**\n * Internal dependencies.\n */\nimport { TPSliderElement } from './tp-slider';\n\n/**\n * TP Slider Slide.\n */\nexport class TPSliderSlideElement extends HTMLElement {\n\t/**\n\t * Connected callback.\n\t */\n\tconnectedCallback(): void {\n\t\t// Resize observer.\n\t\tif ( 'ResizeObserver' in window ) {\n\t\t\tnew ResizeObserver( this.handleHeightChange.bind( this ) ).observe( this );\n\t\t}\n\t}\n\n\t/**\n\t * Handle slide height change.\n\t */\n\tprotected handleHeightChange(): void {\n\t\tconst slider: TPSliderElement | null = this.closest( 'tp-slider' );\n\t\tslider?.handleResize();\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPSliderElement } from './tp-slider';\n\n/**\n * TP Slider Arrow.\n */\nexport class TPSliderArrowElement extends HTMLElement {\n\t/**\n\t * Connected callback.\n\t */\n\tconnectedCallback(): void {\n\t\tthis.querySelector( 'button' )?.addEventListener( 'click', this.handleClick.bind( this ) );\n\t}\n\n\t/**\n\t * Handle when the button is clicked.\n\t */\n\thandleClick(): void {\n\t\tif ( 'yes' === this.getAttribute( 'disabled' ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst slider: TPSliderElement | null = this.closest( 'tp-slider' );\n\t\tif ( ! slider ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( 'previous' === this.getAttribute( 'direction' ) ) {\n\t\t\tslider.previous();\n\t\t} else if ( 'next' === this.getAttribute( 'direction' ) ) {\n\t\t\tslider.next();\n\t\t}\n\t}\n}\n","/**\n * TP Slider Nav.\n */\nexport class TPSliderNavElement extends HTMLElement {\n}\n","/**\n * Internal dependencies.\n */\nimport { TPSliderElement } from './tp-slider';\nimport { TPSliderNavElement } from './tp-slider-nav';\n\n/**\n * TP Slider Nav Item.\n */\nexport class TPSliderNavItemElement extends HTMLElement {\n\t/**\n\t * Connected callback.\n\t */\n\tconnectedCallback(): void {\n\t\tthis.querySelector( 'button' )?.addEventListener( 'click', this.handleClick.bind( this ) );\n\t}\n\n\t/**\n\t * Handle when the button is clicked.\n\t */\n\thandleClick(): void {\n\t\tconst slider: TPSliderElement | null = this.closest( 'tp-slider' );\n\t\tif ( ! slider ) {\n\t\t\treturn;\n\t\t}\n\n\t\tslider.setCurrentSlide( this.getIndex() );\n\t}\n\n\t/**\n\t * Get index of this item inside the navigation.\n\t *\n\t * @return {number} Index.\n\t */\n\tgetIndex(): number {\n\t\tif ( this.getAttribute( 'index' ) ) {\n\t\t\treturn parseInt( this.getAttribute( 'index' ) ?? '0' );\n\t\t}\n\n\t\tconst slideNav: TPSliderNavElement | null = this.closest( 'tp-slider-nav' );\n\t\treturn Array.from( slideNav?.children ?? [] ).indexOf( this ) + 1;\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPSliderElement } from './tp-slider';\n\n/**\n * TP Slider Count.\n */\nexport class TPSliderCountElement extends HTMLElement {\n\t/**\n\t * Get observed attributes.\n\t *\n\t * @return {Array} Observed attributes.\n\t */\n\tstatic get observedAttributes(): string[] {\n\t\treturn [ 'format' ];\n\t}\n\n\t/**\n\t * Get format.\n\t *\n\t * @return {string} Format.\n\t */\n\tget format(): string {\n\t\treturn this.getAttribute( 'format' ) ?? '$current / $total';\n\t}\n\n\t/**\n\t * Set format.\n\t *\n\t * @param {string} format Format.\n\t */\n\tset format( format: string ) {\n\t\tthis.setAttribute( 'format', format );\n\t}\n\n\t/**\n\t * Attribute changed callback.\n\t */\n\tattributeChangedCallback(): void {\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Update component.\n\t */\n\tupdate(): void {\n\t\tconst slider: TPSliderElement | null = this.closest( 'tp-slider' );\n\t\tif ( ! slider ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst current = slider.getAttribute( 'current-slide' );\n\t\tconst total = slider.getAttribute( 'total' );\n\n\t\tthis.innerHTML =\n\t\t\tthis.format\n\t\t\t\t.replace( '$current', current || '' )\n\t\t\t\t.replace( '$total', total || '' );\n\n\t\tthis.setAttribute( 'current', current || '' );\n\t\tthis.setAttribute( 'total', total || '' );\n\t}\n}\n","/**\n * Styles.\n */\nimport './style.scss';\n\n/**\n * Components.\n */\nimport { TPSliderElement } from './tp-slider';\nimport { TPSliderTrackElement } from './tp-slider-track';\nimport { TPSliderSlidesElement } from './tp-slider-slides';\nimport { TPSliderSlideElement } from './tp-slider-slide';\nimport { TPSliderArrowElement } from './tp-slider-arrow';\nimport { TPSliderNavElement } from './tp-slider-nav';\nimport { TPSliderNavItemElement } from './tp-slider-nav-item';\nimport { TPSliderCountElement } from './tp-slider-count';\n\n/**\n * Register Components.\n */\ncustomElements.define( 'tp-slider', TPSliderElement );\ncustomElements.define( 'tp-slider-track', TPSliderTrackElement );\ncustomElements.define( 'tp-slider-slides', TPSliderSlidesElement );\ncustomElements.define( 'tp-slider-slide', TPSliderSlideElement );\ncustomElements.define( 'tp-slider-arrow', TPSliderArrowElement );\ncustomElements.define( 'tp-slider-nav', TPSliderNavElement );\ncustomElements.define( 'tp-slider-nav-item', TPSliderNavItemElement );\ncustomElements.define( 'tp-slider-count', TPSliderCountElement );\n"],"names":["TPSliderElement","HTMLElement","constructor","super","touchStartX","this","getAttribute","setAttribute","slide","window","addEventListener","handleResize","bind","document","fonts","ready","then","handleTouchStart","handleTouchEnd","observedAttributes","attributeChangedCallback","name","oldValue","newValue","dispatchEvent","CustomEvent","bubbles","update","currentSlideIndex","parseInt","index","setCurrentSlide","getTotalSlides","slides","getSlideElements","length","slidesElement","querySelector","querySelectorAll","next","totalSlides","previous","getCurrentSlide","detail","slideIndex","toString","slidesContainer","updateHeight","style","left","offsetLeft","sliderNavItems","sliderCounts","leftArrow","rightArrow","forEach","removeAttribute","navItem","slideCount","removeProperty","height","scrollHeight","_this","setTimeout","e","touches","clientX","swipeDistance","changedTouches","TPSliderTrackElement","TPSliderSlidesElement","TPSliderSlideElement","connectedCallback","ResizeObserver","handleHeightChange","observe","slider","closest","TPSliderArrowElement","handleClick","TPSliderNavElement","TPSliderNavItemElement","getIndex","slideNav","Array","from","children","indexOf","TPSliderCountElement","format","current","total","innerHTML","replace","customElements","define"],"sourceRoot":""}
|
package/dist/slider/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
tp-slider{display:block}tp-slider-track{display:block;overflow-y:visible;overflow-x:clip;position:relative}tp-slider-slides{position:relative;display:flex;align-items:flex-start}tp-slider:not([resizing=yes]) tp-slider-slides{transition-duration:.6s;transition-timing-function:cubic-bezier(0.42, 0, 0.58, 1)}tp-slider-slide{flex:0 0 100%;scroll-snap-align:start}tp-slider[flexible-height=yes]:not([initialized]) tp-slider-slide:not(:first-child){display:none}tp-slider-nav{display:flex;gap:10px}tp-slider[behaviour=fade] tp-slider-slides{display:block}tp-slider[behaviour=fade] tp-slider-slide{position:absolute;left:0;top:0;width:100%;height:auto;transition-property:opacity,visibility;transition-duration:.6s;transition-timing-function:ease;visibility:hidden;opacity:0}tp-slider[behaviour=fade] tp-slider-slide[active=yes]{visibility:visible;opacity:1}
|
|
1
|
+
tp-slider{display:block}tp-slider-track{display:block;overflow-y:visible;overflow-x:clip;position:relative}tp-slider-slides{position:relative;display:flex;align-items:flex-start}tp-slider:not([resizing=yes]) tp-slider-slides{transition-duration:.6s;transition-timing-function:cubic-bezier(0.42, 0, 0.58, 1)}tp-slider-slide{flex:0 0 100%;scroll-snap-align:start}tp-slider[flexible-height=yes]:not([initialized]) tp-slider-slide:not(:first-child){display:none}tp-slider-nav{display:flex;gap:10px}tp-slider[behaviour=fade] tp-slider-slides:first-of-type{display:block}tp-slider[behaviour=fade] tp-slider-slides:first-of-type>tp-slider-slide{position:absolute;left:0;top:0;width:100%;height:auto;transition-property:opacity,visibility;transition-duration:.6s;transition-timing-function:ease;visibility:hidden;opacity:0}tp-slider[behaviour=fade] tp-slider-slides:first-of-type>tp-slider-slide[active=yes]{visibility:visible;opacity:1}
|