@travelopia/web-components 0.7.1 → 0.7.3
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 +16 -0
- package/dist/lightbox/index.js +1 -1
- package/dist/lightbox/index.js.map +1 -1
- package/dist/slider/index.js +1 -1
- package/dist/slider/index.js.map +1 -1
- package/dist/tooltip/index.js +2 -0
- package/dist/tooltip/index.js.map +1 -0
- package/dist/tooltip/style.css +1 -0
- package/package.json +1 -1
package/dist/declarations.d.ts
CHANGED
|
@@ -323,6 +323,10 @@ export class TPLightboxElement extends HTMLElement {
|
|
|
323
323
|
protected currentTemplate: HTMLTemplateElement | null;
|
|
324
324
|
protected currentGroup: string;
|
|
325
325
|
protected allGroups: NodeListOf<TPLightboxTriggerElement> | null;
|
|
326
|
+
protected touchStartX: number;
|
|
327
|
+
protected touchStartY: number;
|
|
328
|
+
protected swipeThreshold: number;
|
|
329
|
+
protected dialogElement: HTMLDialogElement | null;
|
|
326
330
|
/**
|
|
327
331
|
* Constructor.
|
|
328
332
|
*/
|
|
@@ -415,6 +419,18 @@ export class TPLightboxElement extends HTMLElement {
|
|
|
415
419
|
* @param {Event} e Click event.
|
|
416
420
|
*/
|
|
417
421
|
handleDialogClick(e: MouseEvent): void;
|
|
422
|
+
/**
|
|
423
|
+
* Handles the touch start event.
|
|
424
|
+
*
|
|
425
|
+
* @param { TouchEvent } evt The touch event.
|
|
426
|
+
*/
|
|
427
|
+
handleTouchStart(evt: TouchEvent): void;
|
|
428
|
+
/**
|
|
429
|
+
* Handles the touch end event.
|
|
430
|
+
*
|
|
431
|
+
* @param { TouchEvent } evt The touch event.
|
|
432
|
+
*/
|
|
433
|
+
handleTouchEnd(evt: TouchEvent): void;
|
|
418
434
|
}
|
|
419
435
|
|
|
420
436
|
/**
|
package/dist/lightbox/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(()=>{"use strict";class t extends HTMLElement{constructor(){var t;super(),this.currentTemplate=null,this.currentGroup="",this.allGroups=null,
|
|
1
|
+
(()=>{"use strict";class t extends HTMLElement{constructor(){var t,e,s;super(),this.currentTemplate=null,this.currentGroup="",this.allGroups=null,this.touchStartX=0,this.touchStartY=0,this.swipeThreshold=200,this.dialogElement=this.querySelector("dialog"),null===(t=this.dialogElement)||void 0===t||t.addEventListener("click",this.handleDialogClick.bind(this)),null===(e=this.dialogElement)||void 0===e||e.addEventListener("touchstart",this.handleTouchStart.bind(this)),null===(s=this.dialogElement)||void 0===s||s.addEventListener("touchend",this.handleTouchEnd.bind(this))}static get observedAttributes(){return["open","index","total","close-on-overlay-click","loading"]}attributeChangedCallback(t="",e="",s=""){e!==s&&(this.dispatchEvent(new CustomEvent("change")),"index"===t&&this.triggerCurrentIndexTarget())}get template(){return this.currentTemplate}set template(t){this.currentTemplate=t,this.dispatchEvent(new CustomEvent("template-set"));const e=this.querySelector("tp-lightbox-content");if(e)if(this.currentTemplate){const t=this.currentTemplate.content.cloneNode(!0);e.replaceChildren(t),this.dispatchEvent(new CustomEvent("content-change")),setTimeout((()=>{this.prepareImageLoading(),this.prepareNavigation()}),0)}else e.innerHTML=""}get group(){return this.currentGroup}set group(t){this.currentGroup=t}get currentIndex(){var t;return parseInt(null!==(t=this.getAttribute("index"))&&void 0!==t?t:"1")}set currentIndex(t){t<1&&(t=1),this.setAttribute("index",t.toString())}triggerCurrentIndexTarget(){const t=this.getAllGroups();t&&t[this.currentIndex-1]&&t[this.currentIndex-1].trigger()}open(){const t=this.querySelector("dialog");t&&!t.open&&(""===this.group||this.allGroups||this.updateAllGroups(),t.showModal(),this.setAttribute("open","yes"))}close(){const t=this.querySelector("dialog");null==t||t.close(),this.removeAttribute("open"),this.allGroups=null}previous(){""!==this.group&&this.getAllGroups()&&this.currentIndex>1&&this.currentIndex--}next(){if(""===this.group)return;const t=this.getAllGroups();t&&this.currentIndex<t.length&&this.currentIndex++}updateAllGroups(t=null){if(t&&t.length)return this.allGroups=t,void this.setAttribute("total",this.allGroups.length.toString());this.allGroups=document.querySelectorAll(`tp-lightbox-trigger[group="${this.group}"]`),this.allGroups.length?this.setAttribute("total",this.allGroups.length.toString()):this.allGroups=null}getAllGroups(){return this.allGroups}prepareNavigation(){const t=this.querySelector("tp-lightbox-count");null==t||t.update();const e=this.querySelector("tp-lightbox-previous"),s=this.querySelector("tp-lightbox-next");if(!e&&!s)return;if(""===this.group)return null==e||e.setAttribute("disabled","yes"),void(null==s||s.setAttribute("disabled","yes"));const i=this.getAllGroups();if(!i)return null==e||e.setAttribute("disabled","yes"),void(null==s||s.setAttribute("disabled","yes"));this.currentIndex<=1?null==e||e.setAttribute("disabled","yes"):null==e||e.removeAttribute("disabled"),this.currentIndex<i.length?null==s||s.removeAttribute("disabled"):null==s||s.setAttribute("disabled","yes")}prepareImageLoading(){const t=this.querySelector("tp-lightbox-content");if(!t)return;const e=t.querySelectorAll("img");if(!e.length)return void this.removeAttribute("loading");this.setAttribute("loading","yes");let s=0;const i=e.length,r=()=>{s++,s===i&&this.removeAttribute("loading")};e.forEach((t=>{t.complete?r():t.addEventListener("load",r,{once:!0})}))}handleDialogClick(t){"yes"===this.getAttribute("close-on-overlay-click")&&this.querySelector("dialog")===t.target&&this.close()}handleTouchStart(t){"yes"===this.getAttribute("swipe")&&(this.touchStartX=t.touches[0].clientX,this.touchStartY=t.touches[0].clientY)}handleTouchEnd(t){var e;if("yes"!==this.getAttribute("swipe"))return;const s=t.changedTouches[0].clientX,i=t.changedTouches[0].clientY,r=s-this.touchStartX,n=i-this.touchStartY;Math.abs(r)>Math.abs(n)&&(this.swipeThreshold=Number(null!==(e=this.getAttribute("swipe-threshold"))&&void 0!==e?e:"200"),r>0?r<this.swipeThreshold&&this.previous():r<0&&r>-this.swipeThreshold&&this.next())}}class e extends HTMLElement{}class s extends HTMLElement{constructor(){var t;super(),null===(t=this.querySelector("button"))||void 0===t||t.addEventListener("click",this.close.bind(this))}close(){const t=this.closest("tp-lightbox");t&&setTimeout((()=>{t.close()}),0)}}class i extends HTMLElement{constructor(){var t;super(),null===(t=this.querySelector("button"))||void 0===t||t.addEventListener("click",this.previous.bind(this))}previous(){if("yes"===this.getAttribute("disabled"))return;const t=this.closest("tp-lightbox");t&&setTimeout((()=>{t.previous()}),0)}}class r extends HTMLElement{constructor(){var t;super(),null===(t=this.querySelector("button"))||void 0===t||t.addEventListener("click",this.next.bind(this))}next(){if("yes"===this.getAttribute("disabled"))return;const t=this.closest("tp-lightbox");t&&setTimeout((()=>{t.next()}),0)}}class n 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(){var t;const e=this.closest("tp-lightbox");if(!e)return;const s=e.currentIndex.toString(),i=null!==(t=e.getAttribute("total"))&&void 0!==t?t:"";this.innerHTML=this.format.replace("$current",s).replace("$total",i),this.setAttribute("current",s),this.setAttribute("total",i)}}class l extends HTMLElement{constructor(){var t;super(),null===(t=this.querySelector("button"))||void 0===t||t.addEventListener("click",this.trigger.bind(this))}trigger(){var t;const e=this.getAttribute("lightbox"),s=this.querySelector("template");if(!e||!s)return;const i=document.querySelector(`#${e.toString()}`);if(!i)return;const r=null!==(t=this.getAttribute("group"))&&void 0!==t?t:"";setTimeout((()=>{if(i.template=s,i.group=r,""!==r){const t=document.querySelectorAll(`tp-lightbox-trigger[group="${r}"]`);t.length&&(i.updateAllGroups(t),t.forEach(((t,e)=>{this===t&&(i.currentIndex=e+1)})))}i.open()}),0)}}customElements.define("tp-lightbox",t),customElements.define("tp-lightbox-content",e),customElements.define("tp-lightbox-close",s),customElements.define("tp-lightbox-previous",i),customElements.define("tp-lightbox-next",r),customElements.define("tp-lightbox-count",n),customElements.define("tp-lightbox-trigger",l)})();
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dist/lightbox/index.js","mappings":"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","sources":["webpack://@travelopia/web-components/./src/lightbox/tp-lightbox.ts","webpack://@travelopia/web-components/./src/lightbox/tp-lightbox-content.ts","webpack://@travelopia/web-components/./src/lightbox/tp-lightbox-close.ts","webpack://@travelopia/web-components/./src/lightbox/tp-lightbox-previous.ts","webpack://@travelopia/web-components/./src/lightbox/tp-lightbox-next.ts","webpack://@travelopia/web-components/./src/lightbox/tp-lightbox-count.ts","webpack://@travelopia/web-components/./src/lightbox/tp-lightbox-trigger.ts","webpack://@travelopia/web-components/./src/lightbox/index.ts"],"sourcesContent":["/**\n * Internal dependencies.\n */\nimport { TPLightboxContentElement } from './tp-lightbox-content';\nimport { TPLightboxPreviousElement } from './tp-lightbox-previous';\nimport { TPLightboxNextElement } from './tp-lightbox-next';\nimport { TPLightboxTriggerElement } from './tp-lightbox-trigger';\nimport { TPLightboxCountElement } from './tp-lightbox-count';\n\n/**\n * TP Lightbox.\n */\nexport class TPLightboxElement extends HTMLElement {\n\t/**\n\t * Properties.\n\t */\n\tprotected currentTemplate: HTMLTemplateElement | null = null;\n\tprotected currentGroup: string = '';\n\tprotected allGroups: NodeListOf<TPLightboxTriggerElement> | null = null;\n\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Event listeners.\n\t\tthis.querySelector( 'dialog' )?.addEventListener( 'click', this.handleDialogClick.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\t// Attributes to observe.\n\t\treturn [ 'open', 'index', 'total', 'close-on-overlay-click', 'loading' ];\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\t// Prevent redundant updates.\n\t\tif ( oldValue === newValue ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Trigger change event.\n\t\tthis.dispatchEvent( new CustomEvent( 'change' ) );\n\n\t\t// Trigger current index target if index has changed.\n\t\tif ( 'index' === name ) {\n\t\t\tthis.triggerCurrentIndexTarget();\n\t\t}\n\t}\n\n\t/**\n\t * Get template.\n\t */\n\tget template(): HTMLTemplateElement | null {\n\t\t// Return current template.\n\t\treturn this.currentTemplate;\n\t}\n\n\t/**\n\t * Set template.\n\t *\n\t * @param {HTMLTemplateElement} template The template.\n\t */\n\tset template( template: HTMLTemplateElement | null ) {\n\t\t// Set the template.\n\t\tthis.currentTemplate = template;\n\t\tthis.dispatchEvent( new CustomEvent( 'template-set' ) );\n\n\t\t// Get lightbox content element.\n\t\tconst content: TPLightboxContentElement | null = this.querySelector( 'tp-lightbox-content' );\n\n\t\t// Check if we have a content.\n\t\tif ( ! content ) {\n\t\t\t// No we don't. Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Check if we have a template.\n\t\tif ( this.currentTemplate ) {\n\t\t\t/**\n\t\t\t * We do, update content with template's content.\n\t\t\t * We do this rather than a string to avoid script injection.\n\t\t\t */\n\t\t\tconst templateContent: Node = this.currentTemplate.content.cloneNode( true );\n\t\t\tcontent.replaceChildren( templateContent );\n\t\t\tthis.dispatchEvent( new CustomEvent( 'content-change' ) );\n\n\t\t\t// Prepare image loading.\n\t\t\tsetTimeout( (): void => {\n\t\t\t\t// We do, prepare image loading.\n\t\t\t\tthis.prepareImageLoading();\n\t\t\t\tthis.prepareNavigation();\n\t\t\t}, 0 );\n\t\t} else {\n\t\t\t// We don't, set content as empty.\n\t\t\tcontent.innerHTML = '';\n\t\t}\n\t}\n\n\t/**\n\t * Get current group.\n\t */\n\tget group(): string {\n\t\t// Return current group.\n\t\treturn this.currentGroup;\n\t}\n\n\t/**\n\t * Set current group.\n\t *\n\t * @param {string} group Group name.\n\t */\n\tset group( group: string ) {\n\t\t// Set current group.\n\t\tthis.currentGroup = group;\n\t}\n\n\t/**\n\t * Get current index.\n\t */\n\tget currentIndex(): number {\n\t\t// Return current index.\n\t\treturn parseInt( this.getAttribute( 'index' ) ?? '1' );\n\t}\n\n\t/**\n\t * Set current index.\n\t *\n\t * @param {number} index Current index.\n\t */\n\tset currentIndex( index: number ) {\n\t\t// Set current index.\n\t\tif ( index < 1 ) {\n\t\t\tindex = 1;\n\t\t}\n\n\t\t// Setting this attributes triggers a re-trigger.\n\t\tthis.setAttribute( 'index', index.toString() );\n\t}\n\n\t/**\n\t * Trigger the target that matches the current index within current group.\n\t */\n\ttriggerCurrentIndexTarget(): void {\n\t\t// Get all groups and check if current index exists within group.\n\t\tconst allGroups: NodeListOf<TPLightboxTriggerElement> | null = this.getAllGroups();\n\n\t\t// Bail early if we don't have groups.\n\t\tif ( ! allGroups || ! allGroups[ this.currentIndex - 1 ] ) {\n\t\t\t// No we don't. Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Trigger element within group.\n\t\tallGroups[ this.currentIndex - 1 ].trigger();\n\t}\n\n\t/**\n\t * Open lightbox.\n\t */\n\topen(): void {\n\t\t// Get the dialog element.\n\t\tconst dialog: HTMLDialogElement | null = this.querySelector( 'dialog' );\n\n\t\t// Check if dialog exists or is already open.\n\t\tif ( ! dialog || dialog.open ) {\n\t\t\t// Yes it is, Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// First, take this opportunity to update all groups (if it wasn't set from the trigger).\n\t\tif ( '' !== this.group && ! this.allGroups ) {\n\t\t\tthis.updateAllGroups();\n\t\t}\n\n\t\t// Now, show the modal.\n\t\tdialog.showModal();\n\t\tthis.setAttribute( 'open', 'yes' );\n\t}\n\n\t/**\n\t * Close lightbox.\n\t */\n\tclose(): void {\n\t\t// Find and close the dialog.\n\t\tconst dialog: HTMLDialogElement | null = this.querySelector( 'dialog' );\n\t\tdialog?.close();\n\t\tthis.removeAttribute( 'open' );\n\n\t\t// Clear groups from memory.\n\t\tthis.allGroups = null;\n\t}\n\n\t/**\n\t * Navigate previous.\n\t */\n\tprevious(): void {\n\t\t// Check if we even have a group.\n\t\tif ( '' === this.group ) {\n\t\t\t// No we don't. Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Check if we have elements within group.\n\t\tconst allGroups: NodeListOf<TPLightboxTriggerElement> | null = this.getAllGroups();\n\n\t\t// Bail early if we don't have groups.\n\t\tif ( ! allGroups ) {\n\t\t\t// No we don't. Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Decrement the current index.\n\t\tif ( this.currentIndex > 1 ) {\n\t\t\tthis.currentIndex--;\n\t\t}\n\t}\n\n\t/**\n\t * Navigate next.\n\t */\n\tnext(): void {\n\t\t// Check if we even have a group.\n\t\tif ( '' === this.group ) {\n\t\t\t// No we don't. Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Check if we have elements within group.\n\t\tconst allGroups: NodeListOf<TPLightboxTriggerElement> | null = this.getAllGroups();\n\n\t\t// Bail early if we don't have groups.\n\t\tif ( ! allGroups ) {\n\t\t\t// No we don't. Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Increment the current index.\n\t\tif ( this.currentIndex < allGroups.length ) {\n\t\t\tthis.currentIndex++;\n\t\t}\n\t}\n\n\t/**\n\t * Update all groups and save it to memory.\n\t *\n\t * @param {NodeList} allGroups All groups.\n\t */\n\tupdateAllGroups( allGroups: NodeListOf<TPLightboxTriggerElement> | null = null ): void {\n\t\t// Update all groups.\n\t\tif ( allGroups && allGroups.length ) {\n\t\t\tthis.allGroups = allGroups;\n\t\t\tthis.setAttribute( 'total', this.allGroups.length.toString() );\n\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get all groups.\n\t\tthis.allGroups = document.querySelectorAll( `tp-lightbox-trigger[group=\"${ this.group }\"]` );\n\n\t\t// Update total.\n\t\tif ( ! this.allGroups.length ) {\n\t\t\tthis.allGroups = null;\n\t\t} else {\n\t\t\tthis.setAttribute( 'total', this.allGroups.length.toString() );\n\t\t}\n\t}\n\n\t/**\n\t * Get all groups from memory.\n\t */\n\tgetAllGroups(): NodeListOf<TPLightboxTriggerElement> | null {\n\t\t// Return all groups.\n\t\treturn this.allGroups;\n\t}\n\n\t/**\n\t * Prepare navigation.\n\t */\n\tprepareNavigation(): void {\n\t\t// Update counter.\n\t\tconst count: TPLightboxCountElement | null = this.querySelector( 'tp-lightbox-count' );\n\t\tcount?.update();\n\n\t\t// Get previous and next elements.\n\t\tconst previous: TPLightboxPreviousElement | null = this.querySelector( 'tp-lightbox-previous' );\n\t\tconst next: TPLightboxNextElement | null = this.querySelector( 'tp-lightbox-next' );\n\n\t\t// Bail early if we don't have either.\n\t\tif ( ! previous && ! next ) {\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Check if we have a group.\n\t\tif ( '' === this.group ) {\n\t\t\tprevious?.setAttribute( 'disabled', 'yes' );\n\t\t\tnext?.setAttribute( 'disabled', 'yes' );\n\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Check if we have elements within the group.\n\t\tconst allGroups: NodeListOf<TPLightboxTriggerElement> | null = this.getAllGroups();\n\n\t\t// Disable if we don't have any.\n\t\tif ( ! allGroups ) {\n\t\t\tprevious?.setAttribute( 'disabled', 'yes' );\n\t\t\tnext?.setAttribute( 'disabled', 'yes' );\n\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Enable / disable previous navigation.\n\t\tif ( this.currentIndex <= 1 ) {\n\t\t\tprevious?.setAttribute( 'disabled', 'yes' );\n\t\t} else {\n\t\t\tprevious?.removeAttribute( 'disabled' );\n\t\t}\n\n\t\t// Enable / disable next navigation.\n\t\tif ( this.currentIndex < allGroups.length ) {\n\t\t\tnext?.removeAttribute( 'disabled' );\n\t\t} else {\n\t\t\tnext?.setAttribute( 'disabled', 'yes' );\n\t\t}\n\t}\n\n\t/**\n\t * Prepare image loading.\n\t */\n\tprepareImageLoading(): void {\n\t\t// Get lightbox content element.\n\t\tconst content: TPLightboxContentElement | null = this.querySelector( 'tp-lightbox-content' );\n\n\t\t// Bail early if we don't have content.\n\t\tif ( ! content ) {\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Bail if there are no images within current content.\n\t\tconst images: NodeListOf<HTMLImageElement> = content.querySelectorAll( 'img' );\n\n\t\t// Exit early if there are no images.\n\t\tif ( ! images.length ) {\n\t\t\tthis.removeAttribute( 'loading' );\n\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Start off by setting the state as loading.\n\t\tthis.setAttribute( 'loading', 'yes' );\n\n\t\t// Prepare increment variables.\n\t\tlet counter: number = 0;\n\t\tconst totalImages: number = images.length;\n\n\t\t/**\n\t\t * Increment counter.\n\t\t */\n\t\tconst incrementLoadingCounter = (): void => {\n\t\t\t// Increment\n\t\t\tcounter++;\n\n\t\t\t// Remove loading attribute once all images have loaded.\n\t\t\tif ( counter === totalImages ) {\n\t\t\t\tthis.removeAttribute( 'loading' );\n\t\t\t}\n\t\t};\n\n\t\t// Check if images have loaded, else add an event listener.\n\t\timages.forEach( ( image: HTMLImageElement ): void => {\n\t\t\t// Check if image has loaded.\n\t\t\tif ( image.complete ) {\n\t\t\t\tincrementLoadingCounter();\n\t\t\t} else {\n\t\t\t\timage.addEventListener( 'load', incrementLoadingCounter, { once: true } );\n\t\t\t}\n\t\t} );\n\t}\n\n\t/**\n\t * Handle when the dialog is clicked.\n\t *\n\t * @param {Event} e Click event.\n\t */\n\thandleDialogClick( e: MouseEvent ): void {\n\t\t// Close on overlay click.\n\t\tif (\n\t\t\t'yes' === this.getAttribute( 'close-on-overlay-click' ) &&\n\t\t\tthis.querySelector( 'dialog' ) === e.target\n\t\t) {\n\t\t\tthis.close();\n\t\t}\n\t}\n}\n","/**\n * TP Lightbox Content.\n */\nexport class TPLightboxContentElement extends HTMLElement {\n}\n","/**\n * Internal dependencies.\n */\nimport { TPLightboxElement } from './tp-lightbox';\n\n/**\n * TP Lightbox Close.\n */\nexport class TPLightboxCloseElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Events.\n\t\tthis.querySelector( 'button' )?.addEventListener( 'click', this.close.bind( this ) );\n\t}\n\n\t/**\n\t * Close the lightbox.\n\t */\n\tclose(): void {\n\t\t// Get lightbox.\n\t\tconst lightbox: TPLightboxElement | null = this.closest( 'tp-lightbox' );\n\n\t\t// Check if we have a lightbox.\n\t\tif ( lightbox ) {\n\t\t\tsetTimeout( (): void => {\n\t\t\t\t// Close the lightbox.\n\t\t\t\tlightbox.close();\n\t\t\t}, 0 );\n\t\t}\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPLightboxElement } from './tp-lightbox';\n\n/**\n * TP Lightbox Close.\n */\nexport class TPLightboxPreviousElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Events.\n\t\tthis.querySelector( 'button' )?.addEventListener( 'click', this.previous.bind( this ) );\n\t}\n\n\t/**\n\t * Navigate previous.\n\t */\n\tprevious(): void {\n\t\t// Check if we are disabled.\n\t\tif ( 'yes' === this.getAttribute( 'disabled' ) ) {\n\t\t\t// No we don't. Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get lightbox.\n\t\tconst lightbox: TPLightboxElement | null = this.closest( 'tp-lightbox' );\n\n\t\t// Check if we have a lightbox.\n\t\tif ( lightbox ) {\n\t\t\tsetTimeout( (): void => {\n\t\t\t\t// Previous.\n\t\t\t\tlightbox.previous();\n\t\t\t}, 0 );\n\t\t}\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPLightboxElement } from './tp-lightbox';\n\n/**\n * TP Lightbox Close.\n */\nexport class TPLightboxNextElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Events.\n\t\tthis.querySelector( 'button' )?.addEventListener( 'click', this.next.bind( this ) );\n\t}\n\n\t/**\n\t * Navigate next.\n\t */\n\tnext(): void {\n\t\t// Check if next is disabled.\n\t\tif ( 'yes' === this.getAttribute( 'disabled' ) ) {\n\t\t\t// Yes it is. Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get lightbox.\n\t\tconst lightbox: TPLightboxElement | null = this.closest( 'tp-lightbox' );\n\n\t\t// Check if we have a lightbox.\n\t\tif ( lightbox ) {\n\t\t\tsetTimeout( (): void => {\n\t\t\t\t// Initiate next.\n\t\t\t\tlightbox.next();\n\t\t\t}, 0 );\n\t\t}\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPLightboxElement } from './tp-lightbox';\n\n/**\n * TP Slider Count.\n */\nexport class TPLightboxCountElement 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\t// Attributes to observe.\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\t// Get format.\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\t// Set the 'format' attribute value.\n\t\tthis.setAttribute( 'format', format );\n\t}\n\n\t/**\n\t * Attribute changed callback.\n\t */\n\tattributeChangedCallback(): void {\n\t\t// On change of format attribute, update the component.\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Update component.\n\t */\n\tupdate(): void {\n\t\t// Get lightbox.\n\t\tconst lightbox: TPLightboxElement | null = this.closest( 'tp-lightbox' );\n\n\t\t// Check if we have a lightbox.\n\t\tif ( ! lightbox ) {\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get current and total.\n\t\tconst current: string = lightbox.currentIndex.toString();\n\t\tconst total: string = lightbox.getAttribute( 'total' ) ?? '';\n\n\t\t// Update variables in format attribute.\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\t// Update current and total attributes.\n\t\tthis.setAttribute( 'current', current );\n\t\tthis.setAttribute( 'total', total );\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPLightboxElement } from './tp-lightbox';\n\n/**\n * TP Lightbox Trigger.\n */\nexport class TPLightboxTriggerElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Events.\n\t\tthis.querySelector( 'button' )?.addEventListener( 'click', this.trigger.bind( this ) );\n\t}\n\n\t/**\n\t * Trigger the lightbox.\n\t */\n\ttrigger(): void {\n\t\t// Get lightbox ID and template.\n\t\tconst lightboxId: string | null = this.getAttribute( 'lightbox' );\n\t\tconst template: HTMLTemplateElement | null = this.querySelector( 'template' );\n\n\t\t// We can't proceed without them.\n\t\tif ( ! lightboxId || ! template ) {\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get the lightbox.\n\t\tconst lightbox: TPLightboxElement | null = document.querySelector( `#${ lightboxId.toString() }` );\n\n\t\t// Check to see if we have a lightbox.\n\t\tif ( ! lightbox ) {\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Check to see if we have a group.\n\t\tconst group: string = this.getAttribute( 'group' ) ?? '';\n\n\t\t// Yield to main thread.\n\t\tsetTimeout( (): void => {\n\t\t\t// Prepare lightbox.\n\t\t\tlightbox.template = template;\n\t\t\tlightbox.group = group;\n\n\t\t\t// Set index and group if we have them.\n\t\t\tif ( '' !== group ) {\n\t\t\t\tconst allGroups: NodeListOf<TPLightboxTriggerElement> = document.querySelectorAll( `tp-lightbox-trigger[group=\"${ group }\"]` );\n\n\t\t\t\t// Update all groups.\n\t\t\t\tif ( allGroups.length ) {\n\t\t\t\t\t/**\n\t\t\t\t\t * We do this when we're opening a lightbox, or navigating.\n\t\t\t\t\t * This allows consumers to inject elements at any point.\n\t\t\t\t\t */\n\t\t\t\t\tlightbox.updateAllGroups( allGroups );\n\n\t\t\t\t\t// Get current trigger's index within the group.\n\t\t\t\t\tallGroups.forEach( ( triggerElement: TPLightboxTriggerElement, index: number ): void => {\n\t\t\t\t\t\t// Update current index.\n\t\t\t\t\t\tif ( this === triggerElement ) {\n\t\t\t\t\t\t\tlightbox.currentIndex = index + 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// All done, lets open the lightbox.\n\t\t\tlightbox.open();\n\t\t}, 0 );\n\t}\n}\n","/**\n * Styles.\n */\nimport './style.scss';\n\n/**\n * Components.\n */\nimport { TPLightboxElement } from './tp-lightbox';\nimport { TPLightboxContentElement } from './tp-lightbox-content';\nimport { TPLightboxCloseElement } from './tp-lightbox-close';\nimport { TPLightboxPreviousElement } from './tp-lightbox-previous';\nimport { TPLightboxNextElement } from './tp-lightbox-next';\nimport { TPLightboxCountElement } from './tp-lightbox-count';\nimport { TPLightboxTriggerElement } from './tp-lightbox-trigger';\n\n/**\n * Register Components.\n */\ncustomElements.define( 'tp-lightbox', TPLightboxElement );\ncustomElements.define( 'tp-lightbox-content', TPLightboxContentElement );\ncustomElements.define( 'tp-lightbox-close', TPLightboxCloseElement );\ncustomElements.define( 'tp-lightbox-previous', TPLightboxPreviousElement );\ncustomElements.define( 'tp-lightbox-next', TPLightboxNextElement );\ncustomElements.define( 'tp-lightbox-count', TPLightboxCountElement );\ncustomElements.define( 'tp-lightbox-trigger', TPLightboxTriggerElement );\n"],"names":["TPLightboxElement","HTMLElement","constructor","super","currentTemplate","currentGroup","allGroups","this","querySelector","addEventListener","handleDialogClick","bind","observedAttributes","attributeChangedCallback","name","oldValue","newValue","dispatchEvent","CustomEvent","triggerCurrentIndexTarget","template","content","templateContent","cloneNode","replaceChildren","setTimeout","prepareImageLoading","prepareNavigation","innerHTML","group","currentIndex","parseInt","getAttribute","index","setAttribute","toString","getAllGroups","trigger","open","dialog","updateAllGroups","showModal","close","removeAttribute","previous","next","length","document","querySelectorAll","count","update","images","counter","totalImages","incrementLoadingCounter","forEach","image","complete","once","e","target","TPLightboxContentElement","TPLightboxCloseElement","lightbox","closest","TPLightboxPreviousElement","TPLightboxNextElement","TPLightboxCountElement","format","current","total","replace","TPLightboxTriggerElement","lightboxId","triggerElement","customElements","define"],"sourceRoot":""}
|
|
1
|
+
{"version":3,"file":"dist/lightbox/index.js","mappings":"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","sources":["webpack://@travelopia/web-components/./src/lightbox/tp-lightbox.ts","webpack://@travelopia/web-components/./src/lightbox/tp-lightbox-content.ts","webpack://@travelopia/web-components/./src/lightbox/tp-lightbox-close.ts","webpack://@travelopia/web-components/./src/lightbox/tp-lightbox-previous.ts","webpack://@travelopia/web-components/./src/lightbox/tp-lightbox-next.ts","webpack://@travelopia/web-components/./src/lightbox/tp-lightbox-count.ts","webpack://@travelopia/web-components/./src/lightbox/tp-lightbox-trigger.ts","webpack://@travelopia/web-components/./src/lightbox/index.ts"],"sourcesContent":["/**\n * Internal dependencies.\n */\nimport { TPLightboxContentElement } from './tp-lightbox-content';\nimport { TPLightboxPreviousElement } from './tp-lightbox-previous';\nimport { TPLightboxNextElement } from './tp-lightbox-next';\nimport { TPLightboxTriggerElement } from './tp-lightbox-trigger';\nimport { TPLightboxCountElement } from './tp-lightbox-count';\n\n/**\n * TP Lightbox.\n */\nexport class TPLightboxElement extends HTMLElement {\n\t/**\n\t * Properties.\n\t */\n\tprotected currentTemplate: HTMLTemplateElement | null = null;\n\tprotected currentGroup: string = '';\n\tprotected allGroups: NodeListOf<TPLightboxTriggerElement> | null = null;\n\tprotected touchStartX: number = 0;\n\tprotected touchStartY: number = 0;\n\tprotected swipeThreshold: number = 200;\n\tprotected dialogElement: HTMLDialogElement | null;\n\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Initialize\n\t\tthis.dialogElement = this.querySelector( 'dialog' );\n\n\t\t// Event listeners.\n\t\tthis.dialogElement?.addEventListener( 'click', this.handleDialogClick.bind( this ) );\n\t\tthis.dialogElement?.addEventListener( 'touchstart', this.handleTouchStart.bind( this ) );\n\t\tthis.dialogElement?.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\t// Attributes to observe.\n\t\treturn [ 'open', 'index', 'total', 'close-on-overlay-click', 'loading' ];\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\t// Prevent redundant updates.\n\t\tif ( oldValue === newValue ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Trigger change event.\n\t\tthis.dispatchEvent( new CustomEvent( 'change' ) );\n\n\t\t// Trigger current index target if index has changed.\n\t\tif ( 'index' === name ) {\n\t\t\tthis.triggerCurrentIndexTarget();\n\t\t}\n\t}\n\n\t/**\n\t * Get template.\n\t */\n\tget template(): HTMLTemplateElement | null {\n\t\t// Return current template.\n\t\treturn this.currentTemplate;\n\t}\n\n\t/**\n\t * Set template.\n\t *\n\t * @param {HTMLTemplateElement} template The template.\n\t */\n\tset template( template: HTMLTemplateElement | null ) {\n\t\t// Set the template.\n\t\tthis.currentTemplate = template;\n\t\tthis.dispatchEvent( new CustomEvent( 'template-set' ) );\n\n\t\t// Get lightbox content element.\n\t\tconst content: TPLightboxContentElement | null = this.querySelector( 'tp-lightbox-content' );\n\n\t\t// Check if we have a content.\n\t\tif ( ! content ) {\n\t\t\t// No we don't. Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Check if we have a template.\n\t\tif ( this.currentTemplate ) {\n\t\t\t/**\n\t\t\t * We do, update content with template's content.\n\t\t\t * We do this rather than a string to avoid script injection.\n\t\t\t */\n\t\t\tconst templateContent: Node = this.currentTemplate.content.cloneNode( true );\n\t\t\tcontent.replaceChildren( templateContent );\n\t\t\tthis.dispatchEvent( new CustomEvent( 'content-change' ) );\n\n\t\t\t// Prepare image loading.\n\t\t\tsetTimeout( (): void => {\n\t\t\t\t// We do, prepare image loading.\n\t\t\t\tthis.prepareImageLoading();\n\t\t\t\tthis.prepareNavigation();\n\t\t\t}, 0 );\n\t\t} else {\n\t\t\t// We don't, set content as empty.\n\t\t\tcontent.innerHTML = '';\n\t\t}\n\t}\n\n\t/**\n\t * Get current group.\n\t */\n\tget group(): string {\n\t\t// Return current group.\n\t\treturn this.currentGroup;\n\t}\n\n\t/**\n\t * Set current group.\n\t *\n\t * @param {string} group Group name.\n\t */\n\tset group( group: string ) {\n\t\t// Set current group.\n\t\tthis.currentGroup = group;\n\t}\n\n\t/**\n\t * Get current index.\n\t */\n\tget currentIndex(): number {\n\t\t// Return current index.\n\t\treturn parseInt( this.getAttribute( 'index' ) ?? '1' );\n\t}\n\n\t/**\n\t * Set current index.\n\t *\n\t * @param {number} index Current index.\n\t */\n\tset currentIndex( index: number ) {\n\t\t// Set current index.\n\t\tif ( index < 1 ) {\n\t\t\tindex = 1;\n\t\t}\n\n\t\t// Setting this attributes triggers a re-trigger.\n\t\tthis.setAttribute( 'index', index.toString() );\n\t}\n\n\t/**\n\t * Trigger the target that matches the current index within current group.\n\t */\n\ttriggerCurrentIndexTarget(): void {\n\t\t// Get all groups and check if current index exists within group.\n\t\tconst allGroups: NodeListOf<TPLightboxTriggerElement> | null = this.getAllGroups();\n\n\t\t// Bail early if we don't have groups.\n\t\tif ( ! allGroups || ! allGroups[ this.currentIndex - 1 ] ) {\n\t\t\t// No we don't. Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Trigger element within group.\n\t\tallGroups[ this.currentIndex - 1 ].trigger();\n\t}\n\n\t/**\n\t * Open lightbox.\n\t */\n\topen(): void {\n\t\t// Get the dialog element.\n\t\tconst dialog: HTMLDialogElement | null = this.querySelector( 'dialog' );\n\n\t\t// Check if dialog exists or is already open.\n\t\tif ( ! dialog || dialog.open ) {\n\t\t\t// Yes it is, Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// First, take this opportunity to update all groups (if it wasn't set from the trigger).\n\t\tif ( '' !== this.group && ! this.allGroups ) {\n\t\t\tthis.updateAllGroups();\n\t\t}\n\n\t\t// Now, show the modal.\n\t\tdialog.showModal();\n\t\tthis.setAttribute( 'open', 'yes' );\n\t}\n\n\t/**\n\t * Close lightbox.\n\t */\n\tclose(): void {\n\t\t// Find and close the dialog.\n\t\tconst dialog: HTMLDialogElement | null = this.querySelector( 'dialog' );\n\t\tdialog?.close();\n\t\tthis.removeAttribute( 'open' );\n\n\t\t// Clear groups from memory.\n\t\tthis.allGroups = null;\n\t}\n\n\t/**\n\t * Navigate previous.\n\t */\n\tprevious(): void {\n\t\t// Check if we even have a group.\n\t\tif ( '' === this.group ) {\n\t\t\t// No we don't. Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Check if we have elements within group.\n\t\tconst allGroups: NodeListOf<TPLightboxTriggerElement> | null = this.getAllGroups();\n\n\t\t// Bail early if we don't have groups.\n\t\tif ( ! allGroups ) {\n\t\t\t// No we don't. Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Decrement the current index.\n\t\tif ( this.currentIndex > 1 ) {\n\t\t\tthis.currentIndex--;\n\t\t}\n\t}\n\n\t/**\n\t * Navigate next.\n\t */\n\tnext(): void {\n\t\t// Check if we even have a group.\n\t\tif ( '' === this.group ) {\n\t\t\t// No we don't. Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Check if we have elements within group.\n\t\tconst allGroups: NodeListOf<TPLightboxTriggerElement> | null = this.getAllGroups();\n\n\t\t// Bail early if we don't have groups.\n\t\tif ( ! allGroups ) {\n\t\t\t// No we don't. Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Increment the current index.\n\t\tif ( this.currentIndex < allGroups.length ) {\n\t\t\tthis.currentIndex++;\n\t\t}\n\t}\n\n\t/**\n\t * Update all groups and save it to memory.\n\t *\n\t * @param {NodeList} allGroups All groups.\n\t */\n\tupdateAllGroups( allGroups: NodeListOf<TPLightboxTriggerElement> | null = null ): void {\n\t\t// Update all groups.\n\t\tif ( allGroups && allGroups.length ) {\n\t\t\tthis.allGroups = allGroups;\n\t\t\tthis.setAttribute( 'total', this.allGroups.length.toString() );\n\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get all groups.\n\t\tthis.allGroups = document.querySelectorAll( `tp-lightbox-trigger[group=\"${ this.group }\"]` );\n\n\t\t// Update total.\n\t\tif ( ! this.allGroups.length ) {\n\t\t\tthis.allGroups = null;\n\t\t} else {\n\t\t\tthis.setAttribute( 'total', this.allGroups.length.toString() );\n\t\t}\n\t}\n\n\t/**\n\t * Get all groups from memory.\n\t */\n\tgetAllGroups(): NodeListOf<TPLightboxTriggerElement> | null {\n\t\t// Return all groups.\n\t\treturn this.allGroups;\n\t}\n\n\t/**\n\t * Prepare navigation.\n\t */\n\tprepareNavigation(): void {\n\t\t// Update counter.\n\t\tconst count: TPLightboxCountElement | null = this.querySelector( 'tp-lightbox-count' );\n\t\tcount?.update();\n\n\t\t// Get previous and next elements.\n\t\tconst previous: TPLightboxPreviousElement | null = this.querySelector( 'tp-lightbox-previous' );\n\t\tconst next: TPLightboxNextElement | null = this.querySelector( 'tp-lightbox-next' );\n\n\t\t// Bail early if we don't have either.\n\t\tif ( ! previous && ! next ) {\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Check if we have a group.\n\t\tif ( '' === this.group ) {\n\t\t\tprevious?.setAttribute( 'disabled', 'yes' );\n\t\t\tnext?.setAttribute( 'disabled', 'yes' );\n\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Check if we have elements within the group.\n\t\tconst allGroups: NodeListOf<TPLightboxTriggerElement> | null = this.getAllGroups();\n\n\t\t// Disable if we don't have any.\n\t\tif ( ! allGroups ) {\n\t\t\tprevious?.setAttribute( 'disabled', 'yes' );\n\t\t\tnext?.setAttribute( 'disabled', 'yes' );\n\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Enable / disable previous navigation.\n\t\tif ( this.currentIndex <= 1 ) {\n\t\t\tprevious?.setAttribute( 'disabled', 'yes' );\n\t\t} else {\n\t\t\tprevious?.removeAttribute( 'disabled' );\n\t\t}\n\n\t\t// Enable / disable next navigation.\n\t\tif ( this.currentIndex < allGroups.length ) {\n\t\t\tnext?.removeAttribute( 'disabled' );\n\t\t} else {\n\t\t\tnext?.setAttribute( 'disabled', 'yes' );\n\t\t}\n\t}\n\n\t/**\n\t * Prepare image loading.\n\t */\n\tprepareImageLoading(): void {\n\t\t// Get lightbox content element.\n\t\tconst content: TPLightboxContentElement | null = this.querySelector( 'tp-lightbox-content' );\n\n\t\t// Bail early if we don't have content.\n\t\tif ( ! content ) {\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Bail if there are no images within current content.\n\t\tconst images: NodeListOf<HTMLImageElement> = content.querySelectorAll( 'img' );\n\n\t\t// Exit early if there are no images.\n\t\tif ( ! images.length ) {\n\t\t\tthis.removeAttribute( 'loading' );\n\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Start off by setting the state as loading.\n\t\tthis.setAttribute( 'loading', 'yes' );\n\n\t\t// Prepare increment variables.\n\t\tlet counter: number = 0;\n\t\tconst totalImages: number = images.length;\n\n\t\t/**\n\t\t * Increment counter.\n\t\t */\n\t\tconst incrementLoadingCounter = (): void => {\n\t\t\t// Increment\n\t\t\tcounter++;\n\n\t\t\t// Remove loading attribute once all images have loaded.\n\t\t\tif ( counter === totalImages ) {\n\t\t\t\tthis.removeAttribute( 'loading' );\n\t\t\t}\n\t\t};\n\n\t\t// Check if images have loaded, else add an event listener.\n\t\timages.forEach( ( image: HTMLImageElement ): void => {\n\t\t\t// Check if image has loaded.\n\t\t\tif ( image.complete ) {\n\t\t\t\tincrementLoadingCounter();\n\t\t\t} else {\n\t\t\t\timage.addEventListener( 'load', incrementLoadingCounter, { once: true } );\n\t\t\t}\n\t\t} );\n\t}\n\n\t/**\n\t * Handle when the dialog is clicked.\n\t *\n\t * @param {Event} e Click event.\n\t */\n\thandleDialogClick( e: MouseEvent ): void {\n\t\t// Close on overlay click.\n\t\tif (\n\t\t\t'yes' === this.getAttribute( 'close-on-overlay-click' ) &&\n\t\t\tthis.querySelector( 'dialog' ) === e.target\n\t\t) {\n\t\t\tthis.close();\n\t\t}\n\t}\n\n\t/**\n\t * Handles the touch start event.\n\t *\n\t * @param { TouchEvent } evt The touch event.\n\t */\n\thandleTouchStart( evt: TouchEvent ): void {\n\t\t// Check if we should allow swiping?\n\t\tif ( 'yes' !== this.getAttribute( 'swipe' ) ) {\n\t\t\t// Nope.\n\t\t\treturn;\n\t\t}\n\n\t\t// Set the start points.\n\t\tthis.touchStartX = evt.touches[ 0 ].clientX;\n\t\tthis.touchStartY = evt.touches[ 0 ].clientY;\n\t}\n\n\t/**\n\t * Handles the touch end event.\n\t *\n\t * @param { TouchEvent } evt The touch event.\n\t */\n\thandleTouchEnd( evt: TouchEvent ): void {\n\t\t// Check if we should allow swiping?\n\t\tif ( 'yes' !== this.getAttribute( 'swipe' ) ) {\n\t\t\t// Nope.\n\t\t\treturn;\n\t\t}\n\n\t\t// Calculate the distances.\n\t\tconst touchEndX: number = evt.changedTouches[ 0 ].clientX;\n\t\tconst touchEndY: number = evt.changedTouches[ 0 ].clientY;\n\t\tconst swipeDistanceX: number = touchEndX - this.touchStartX;\n\t\tconst swipeDistanceY: number = touchEndY - this.touchStartY;\n\n\t\t// Is this horizontal swipe?\n\t\tconst isHorizontalSwipe = Math.abs( swipeDistanceX ) > Math.abs( swipeDistanceY );\n\n\t\t// Check if this was a horizontal swipe?\n\t\tif ( ! isHorizontalSwipe ) {\n\t\t\t// Bail.\n\t\t\treturn;\n\t\t}\n\n\t\t// Swipe settings\n\t\tthis.swipeThreshold = Number( this.getAttribute( 'swipe-threshold' ) ?? '200' );\n\n\t\t// Check if it's a right or left swipe.\n\t\tif ( swipeDistanceX > 0 ) {\n\t\t\t// Right-Swipe: Check if horizontal swipe distance is less than the threshold.\n\t\t\tif ( swipeDistanceX < this.swipeThreshold ) {\n\t\t\t\tthis.previous();\n\t\t\t}\n\t\t} else if ( swipeDistanceX < 0 ) {\n\t\t\t// Left-Swipe: Check if horizontal swipe distance is less than the threshold.\n\t\t\tif ( swipeDistanceX > -this.swipeThreshold ) {\n\t\t\t\tthis.next();\n\t\t\t}\n\t\t}\n\t}\n}\n","/**\n * TP Lightbox Content.\n */\nexport class TPLightboxContentElement extends HTMLElement {\n}\n","/**\n * Internal dependencies.\n */\nimport { TPLightboxElement } from './tp-lightbox';\n\n/**\n * TP Lightbox Close.\n */\nexport class TPLightboxCloseElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Events.\n\t\tthis.querySelector( 'button' )?.addEventListener( 'click', this.close.bind( this ) );\n\t}\n\n\t/**\n\t * Close the lightbox.\n\t */\n\tclose(): void {\n\t\t// Get lightbox.\n\t\tconst lightbox: TPLightboxElement | null = this.closest( 'tp-lightbox' );\n\n\t\t// Check if we have a lightbox.\n\t\tif ( lightbox ) {\n\t\t\tsetTimeout( (): void => {\n\t\t\t\t// Close the lightbox.\n\t\t\t\tlightbox.close();\n\t\t\t}, 0 );\n\t\t}\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPLightboxElement } from './tp-lightbox';\n\n/**\n * TP Lightbox Close.\n */\nexport class TPLightboxPreviousElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Events.\n\t\tthis.querySelector( 'button' )?.addEventListener( 'click', this.previous.bind( this ) );\n\t}\n\n\t/**\n\t * Navigate previous.\n\t */\n\tprevious(): void {\n\t\t// Check if we are disabled.\n\t\tif ( 'yes' === this.getAttribute( 'disabled' ) ) {\n\t\t\t// No we don't. Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get lightbox.\n\t\tconst lightbox: TPLightboxElement | null = this.closest( 'tp-lightbox' );\n\n\t\t// Check if we have a lightbox.\n\t\tif ( lightbox ) {\n\t\t\tsetTimeout( (): void => {\n\t\t\t\t// Previous.\n\t\t\t\tlightbox.previous();\n\t\t\t}, 0 );\n\t\t}\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPLightboxElement } from './tp-lightbox';\n\n/**\n * TP Lightbox Close.\n */\nexport class TPLightboxNextElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Events.\n\t\tthis.querySelector( 'button' )?.addEventListener( 'click', this.next.bind( this ) );\n\t}\n\n\t/**\n\t * Navigate next.\n\t */\n\tnext(): void {\n\t\t// Check if next is disabled.\n\t\tif ( 'yes' === this.getAttribute( 'disabled' ) ) {\n\t\t\t// Yes it is. Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get lightbox.\n\t\tconst lightbox: TPLightboxElement | null = this.closest( 'tp-lightbox' );\n\n\t\t// Check if we have a lightbox.\n\t\tif ( lightbox ) {\n\t\t\tsetTimeout( (): void => {\n\t\t\t\t// Initiate next.\n\t\t\t\tlightbox.next();\n\t\t\t}, 0 );\n\t\t}\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPLightboxElement } from './tp-lightbox';\n\n/**\n * TP Slider Count.\n */\nexport class TPLightboxCountElement 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\t// Attributes to observe.\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\t// Get format.\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\t// Set the 'format' attribute value.\n\t\tthis.setAttribute( 'format', format );\n\t}\n\n\t/**\n\t * Attribute changed callback.\n\t */\n\tattributeChangedCallback(): void {\n\t\t// On change of format attribute, update the component.\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Update component.\n\t */\n\tupdate(): void {\n\t\t// Get lightbox.\n\t\tconst lightbox: TPLightboxElement | null = this.closest( 'tp-lightbox' );\n\n\t\t// Check if we have a lightbox.\n\t\tif ( ! lightbox ) {\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get current and total.\n\t\tconst current: string = lightbox.currentIndex.toString();\n\t\tconst total: string = lightbox.getAttribute( 'total' ) ?? '';\n\n\t\t// Update variables in format attribute.\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\t// Update current and total attributes.\n\t\tthis.setAttribute( 'current', current );\n\t\tthis.setAttribute( 'total', total );\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPLightboxElement } from './tp-lightbox';\n\n/**\n * TP Lightbox Trigger.\n */\nexport class TPLightboxTriggerElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Events.\n\t\tthis.querySelector( 'button' )?.addEventListener( 'click', this.trigger.bind( this ) );\n\t}\n\n\t/**\n\t * Trigger the lightbox.\n\t */\n\ttrigger(): void {\n\t\t// Get lightbox ID and template.\n\t\tconst lightboxId: string | null = this.getAttribute( 'lightbox' );\n\t\tconst template: HTMLTemplateElement | null = this.querySelector( 'template' );\n\n\t\t// We can't proceed without them.\n\t\tif ( ! lightboxId || ! template ) {\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get the lightbox.\n\t\tconst lightbox: TPLightboxElement | null = document.querySelector( `#${ lightboxId.toString() }` );\n\n\t\t// Check to see if we have a lightbox.\n\t\tif ( ! lightbox ) {\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Check to see if we have a group.\n\t\tconst group: string = this.getAttribute( 'group' ) ?? '';\n\n\t\t// Yield to main thread.\n\t\tsetTimeout( (): void => {\n\t\t\t// Prepare lightbox.\n\t\t\tlightbox.template = template;\n\t\t\tlightbox.group = group;\n\n\t\t\t// Set index and group if we have them.\n\t\t\tif ( '' !== group ) {\n\t\t\t\tconst allGroups: NodeListOf<TPLightboxTriggerElement> = document.querySelectorAll( `tp-lightbox-trigger[group=\"${ group }\"]` );\n\n\t\t\t\t// Update all groups.\n\t\t\t\tif ( allGroups.length ) {\n\t\t\t\t\t/**\n\t\t\t\t\t * We do this when we're opening a lightbox, or navigating.\n\t\t\t\t\t * This allows consumers to inject elements at any point.\n\t\t\t\t\t */\n\t\t\t\t\tlightbox.updateAllGroups( allGroups );\n\n\t\t\t\t\t// Get current trigger's index within the group.\n\t\t\t\t\tallGroups.forEach( ( triggerElement: TPLightboxTriggerElement, index: number ): void => {\n\t\t\t\t\t\t// Update current index.\n\t\t\t\t\t\tif ( this === triggerElement ) {\n\t\t\t\t\t\t\tlightbox.currentIndex = index + 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// All done, lets open the lightbox.\n\t\t\tlightbox.open();\n\t\t}, 0 );\n\t}\n}\n","/**\n * Styles.\n */\nimport './style.scss';\n\n/**\n * Components.\n */\nimport { TPLightboxElement } from './tp-lightbox';\nimport { TPLightboxContentElement } from './tp-lightbox-content';\nimport { TPLightboxCloseElement } from './tp-lightbox-close';\nimport { TPLightboxPreviousElement } from './tp-lightbox-previous';\nimport { TPLightboxNextElement } from './tp-lightbox-next';\nimport { TPLightboxCountElement } from './tp-lightbox-count';\nimport { TPLightboxTriggerElement } from './tp-lightbox-trigger';\n\n/**\n * Register Components.\n */\ncustomElements.define( 'tp-lightbox', TPLightboxElement );\ncustomElements.define( 'tp-lightbox-content', TPLightboxContentElement );\ncustomElements.define( 'tp-lightbox-close', TPLightboxCloseElement );\ncustomElements.define( 'tp-lightbox-previous', TPLightboxPreviousElement );\ncustomElements.define( 'tp-lightbox-next', TPLightboxNextElement );\ncustomElements.define( 'tp-lightbox-count', TPLightboxCountElement );\ncustomElements.define( 'tp-lightbox-trigger', TPLightboxTriggerElement );\n"],"names":["TPLightboxElement","HTMLElement","constructor","super","currentTemplate","currentGroup","allGroups","touchStartX","touchStartY","swipeThreshold","this","dialogElement","querySelector","addEventListener","handleDialogClick","bind","handleTouchStart","handleTouchEnd","observedAttributes","attributeChangedCallback","name","oldValue","newValue","dispatchEvent","CustomEvent","triggerCurrentIndexTarget","template","content","templateContent","cloneNode","replaceChildren","setTimeout","prepareImageLoading","prepareNavigation","innerHTML","group","currentIndex","parseInt","getAttribute","index","setAttribute","toString","getAllGroups","trigger","open","dialog","updateAllGroups","showModal","close","removeAttribute","previous","next","length","document","querySelectorAll","count","update","images","counter","totalImages","incrementLoadingCounter","forEach","image","complete","once","e","target","evt","touches","clientX","clientY","touchEndX","changedTouches","touchEndY","swipeDistanceX","swipeDistanceY","Math","abs","Number","TPLightboxContentElement","TPLightboxCloseElement","lightbox","closest","TPLightboxPreviousElement","TPLightboxNextElement","TPLightboxCountElement","format","current","total","replace","TPLightboxTriggerElement","lightboxId","triggerElement","customElements","define"],"sourceRoot":""}
|
package/dist/slider/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(()=>{"use strict";class t extends HTMLElement{constructor(){var t;super(),this.touchStartX=0,this.touchStartY=0,this.swipeThreshold=200,this.allowedResponsiveKeys=["flexible-height","infinite","swipe","behaviour","auto-slide-interval","per-view","step","responsive"],this.getAttribute("current-slide")||this.setAttribute("current-slide","1"),this.swipeThreshold=Number(null!==(t=null==this?void 0:this.getAttribute("swipe-threshold"))&&void 0!==t?t:"200"),this.slide(),this.autoSlide(),this.setAttribute("initialized","yes");const e=this.getAttribute("responsive")||"";this.responsiveSettings=e?JSON.parse(e):[],"ResizeObserver"in window||(window.addEventListener("resize",this.handleResize.bind(this)),document.fonts.ready.then((()=>this.handleResize()))),this.addEventListener("touchstart",this.handleTouchStart.bind(this),{passive:!0}),this.addEventListener("touchend",this.handleTouchEnd.bind(this))}connectedCallback(){this.update()}static get observedAttributes(){return["current-slide","flexible-height","infinite","swipe","per-view","step"]}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)}get step(){var t;return parseInt(null!==(t=this.getAttribute("step"))&&void 0!==t?t:"1")}set step(t){this.setAttribute("step",t.toString())}get perView(){var t;return parseInt(null!==(t=this.getAttribute("per-view"))&&void 0!==t?t:"1")}set perView(t){this.setAttribute("per-view",t.toString())}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();if(this.currentSlideIndex>=t-this.perView+1)return void("yes"===this.getAttribute("infinite")&&this.setCurrentSlide(1));const e=this.currentSlideIndex+Math.min(this.step,t-this.currentSlideIndex-this.perView+1);e>t-this.perView+1||this.setCurrentSlide(e)}previous(){if(this.currentSlideIndex<=1)return void("yes"===this.getAttribute("infinite")&&this.setCurrentSlide(this.getTotalSlides()-this.perView+1));const t=this.currentSlideIndex-this.step;t>1?this.setCurrentSlide(t):this.setCurrentSlide(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`))}getArrow(t){const e=this.querySelectorAll(t),i=this;let s=this.querySelector(t);return e.forEach((t=>{i===t.closest("tp-slider")&&(s=t)})),s}update(){const t=this.querySelectorAll("tp-slider-nav-item"),e=this.querySelectorAll("tp-slider-count"),i=this.getArrow('tp-slider-arrow[direction="previous"]'),s=this.getArrow('tp-slider-arrow[direction="next"]'),r=this.getSlideElements();r&&r.forEach(((t,e)=>{this.currentSlideIndex-1===e?t.setAttribute("active","yes"):t.removeAttribute("active")})),t&&t.forEach(((t,e)=>{Math.ceil(this.currentSlideIndex/this.step)-1===e?t.setAttribute("current","yes"):t.removeAttribute("current")})),e&&(this.setAttribute("total",this.getTotalSlides().toString()),e.forEach((t=>{"function"==typeof t.update&&t.update()}))),"yes"!==this.getAttribute("infinite")?(this.getCurrentSlide()===this.getTotalSlides()-this.perView+1?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")&&"fade"!==this.getAttribute("behaviour"))return void t.style.removeProperty("height");const e=this.getSlideElements();if(e)if("yes"===this.getAttribute("flexible-height"))if(this.perView>1){const i=this.currentSlideIndex-1,s=i+this.perView;let r=0;for(let t=i;t<s;t++)e[t].scrollHeight>r&&(r=e[t].scrollHeight);t.style.height=`${r}px`}else{const i=e[this.currentSlideIndex-1].scrollHeight;t.style.height=`${i}px`}else{let i=0;e.forEach((t=>{t.scrollHeight>i&&(i=t.scrollHeight)})),t.style.height=`${i}px`}}handleResize(){setTimeout((()=>{this.updateAttributesResponsively()}),0),this.getAttribute("resizing")||(this.setAttribute("resizing","yes"),this.slide(),this.removeAttribute("resizing"))}updateAttributesResponsively(){this.responsiveSettings.length&&(this.allowedResponsiveKeys.forEach((t=>{this.removeAttribute(t)})),this.responsiveSettings.every((t=>{if(window.matchMedia(t.media).matches){for(const e in t)"media"!==e&&this.allowedResponsiveKeys.includes(e)&&this.setAttribute(e,t[e]);return!1}return!0})))}handleTouchStart(t){"yes"===this.getAttribute("swipe")&&(this.touchStartX=t.touches[0].clientX,this.touchStartY=t.touches[0].clientY)}handleTouchEnd(t){if("yes"!==this.getAttribute("swipe"))return;const e=t.changedTouches[0].clientX,i=t.changedTouches[0].clientY,s=e-this.touchStartX,r=i-this.touchStartY;Math.abs(s)>Math.abs(r)&&(s>0?s<this.swipeThreshold&&this.previous():s<0&&s>-this.swipeThreshold&&this.next())}autoSlide(){const t=this.getAttribute("auto-slide-interval");if(!t)return;const e=parseInt(t);e<=0||setTimeout((()=>{this.next(),this.autoSlide(),this.dispatchEvent(new CustomEvent("auto-slide-complete"))}),e)}}class e extends HTMLElement{}class i extends HTMLElement{}class s extends HTMLElement{constructor(){super(),"ResizeObserver"in window&&new ResizeObserver(this.handleHeightChange.bind(this)).observe(this)}handleHeightChange(){const t=this.closest("tp-slider");t&&setTimeout((()=>{t.handleResize()}),0)}}class r extends HTMLElement{constructor(){var t;super(),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{constructor(){var t;super(),this.slider=this.closest("tp-slider"),null===(t=this.querySelector("button"))||void 0===t||t.addEventListener("click",this.handleClick.bind(this))}handleClick(){this.slider&&this.slider.setCurrentSlide(this.getIndex())}getIndex(){var t,e,i;if(this.getAttribute("index"))return parseInt(null!==(t=this.getAttribute("index"))&&void 0!==t?t:"0");const s=this.closest("tp-slider-nav"),r=null===(e=this.slider)||void 0===e?void 0:e.step;return Array.from(null!==(i=null==s?void 0:s.children)&&void 0!==i?i:[]).indexOf(this)*(null!=r?r:1)+1}}class h 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(){var t;const e=this.closest("tp-slider");if(!e)return;const i=Math.min(e.currentSlideIndex-1+e.step,e.getTotalSlides()),s=null!==(t=e.getAttribute("total"))&&void 0!==t?t:"";this.innerHTML=this.format.replace("$current",i.toString()).replace("$total",s||""),this.setAttribute("current",i.toString()),this.setAttribute("total",s||"")}}customElements.define("tp-slider
|
|
1
|
+
(()=>{"use strict";class t extends HTMLElement{constructor(){var t;super(),this.touchStartX=0,this.touchStartY=0,this.swipeThreshold=200,this.allowedResponsiveKeys=["flexible-height","infinite","swipe","behaviour","auto-slide-interval","per-view","step","responsive"],this.getAttribute("current-slide")||this.setAttribute("current-slide","1"),this.swipeThreshold=Number(null!==(t=null==this?void 0:this.getAttribute("swipe-threshold"))&&void 0!==t?t:"200"),this.slide(),this.autoSlide(),this.setAttribute("initialized","yes");const e=this.getAttribute("responsive")||"";this.responsiveSettings=e?JSON.parse(e):[],"ResizeObserver"in window||(window.addEventListener("resize",this.handleResize.bind(this)),document.fonts.ready.then((()=>this.handleResize()))),this.addEventListener("touchstart",this.handleTouchStart.bind(this),{passive:!0}),this.addEventListener("touchend",this.handleTouchEnd.bind(this))}connectedCallback(){this.update()}static get observedAttributes(){return["current-slide","flexible-height","infinite","swipe","per-view","step"]}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)}get step(){var t;return parseInt(null!==(t=this.getAttribute("step"))&&void 0!==t?t:"1")}set step(t){this.setAttribute("step",t.toString())}get perView(){var t;return parseInt(null!==(t=this.getAttribute("per-view"))&&void 0!==t?t:"1")}set perView(t){this.setAttribute("per-view",t.toString())}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();if(this.currentSlideIndex>=t-this.perView+1)return void("yes"===this.getAttribute("infinite")&&this.setCurrentSlide(1));const e=this.currentSlideIndex+Math.min(this.step,t-this.currentSlideIndex-this.perView+1);e>t-this.perView+1||this.setCurrentSlide(e)}previous(){if(this.currentSlideIndex<=1)return void("yes"===this.getAttribute("infinite")&&this.setCurrentSlide(this.getTotalSlides()-this.perView+1));const t=this.currentSlideIndex-this.step;t>1?this.setCurrentSlide(t):this.setCurrentSlide(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`))}getArrow(t){const e=this.querySelectorAll(t),i=this;let s=this.querySelector(t);return e.forEach((t=>{i===t.closest("tp-slider")&&(s=t)})),s}update(){const t=this.querySelectorAll("tp-slider-nav-item"),e=this.querySelectorAll("tp-slider-count"),i=this.getArrow('tp-slider-arrow[direction="previous"]'),s=this.getArrow('tp-slider-arrow[direction="next"]'),r=this.getSlideElements();r&&r.forEach(((t,e)=>{this.currentSlideIndex-1===e?t.setAttribute("active","yes"):t.removeAttribute("active")})),t&&t.forEach(((t,e)=>{Math.ceil(this.currentSlideIndex/this.step)-1===e?t.setAttribute("current","yes"):t.removeAttribute("current")})),e&&(this.setAttribute("total",this.getTotalSlides().toString()),e.forEach((t=>{"function"==typeof t.update&&t.update()}))),"yes"!==this.getAttribute("infinite")?(this.getCurrentSlide()===this.getTotalSlides()-this.perView+1?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")&&"fade"!==this.getAttribute("behaviour"))return void t.style.removeProperty("height");const e=this.getSlideElements();if(e)if("yes"===this.getAttribute("flexible-height"))if(this.perView>1){const i=this.currentSlideIndex-1,s=i+this.perView;let r=0;for(let t=i;t<s;t++)e[t].scrollHeight>r&&(r=e[t].scrollHeight);t.style.height=`${r}px`}else{const i=e[this.currentSlideIndex-1].scrollHeight;t.style.height=`${i}px`}else{let i=0;e.forEach((t=>{t.scrollHeight>i&&(i=t.scrollHeight)})),t.style.height=`${i}px`}}handleResize(){setTimeout((()=>{this.updateAttributesResponsively()}),0),this.getAttribute("resizing")||(this.setAttribute("resizing","yes"),this.slide(),this.removeAttribute("resizing"))}updateAttributesResponsively(){this.responsiveSettings.length&&(this.allowedResponsiveKeys.forEach((t=>{this.removeAttribute(t)})),this.responsiveSettings.every((t=>{if(window.matchMedia(t.media).matches){for(const e in t)"media"!==e&&this.allowedResponsiveKeys.includes(e)&&this.setAttribute(e,t[e]);return!1}return!0})))}handleTouchStart(t){"yes"===this.getAttribute("swipe")&&(this.touchStartX=t.touches[0].clientX,this.touchStartY=t.touches[0].clientY)}handleTouchEnd(t){if("yes"!==this.getAttribute("swipe"))return;const e=t.changedTouches[0].clientX,i=t.changedTouches[0].clientY,s=e-this.touchStartX,r=i-this.touchStartY;Math.abs(s)>Math.abs(r)&&(s>0?s<this.swipeThreshold&&this.previous():s<0&&s>-this.swipeThreshold&&this.next())}autoSlide(){const t=this.getAttribute("auto-slide-interval");if(!t)return;const e=parseInt(t);e<=0||setTimeout((()=>{this.next(),this.autoSlide(),this.dispatchEvent(new CustomEvent("auto-slide-complete"))}),e)}}class e extends HTMLElement{}class i extends HTMLElement{}class s extends HTMLElement{constructor(){super(),"ResizeObserver"in window&&new ResizeObserver(this.handleHeightChange.bind(this)).observe(this)}handleHeightChange(){const t=this.closest("tp-slider");t&&setTimeout((()=>{t.handleResize()}),0)}}class r extends HTMLElement{constructor(){var t;super(),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{constructor(){var t;super(),this.slider=this.closest("tp-slider"),null===(t=this.querySelector("button"))||void 0===t||t.addEventListener("click",this.handleClick.bind(this))}handleClick(){this.slider&&this.slider.setCurrentSlide(this.getIndex())}getIndex(){var t,e,i;if(this.getAttribute("index"))return parseInt(null!==(t=this.getAttribute("index"))&&void 0!==t?t:"0");const s=this.closest("tp-slider-nav"),r=null===(e=this.slider)||void 0===e?void 0:e.step;return Array.from(null!==(i=null==s?void 0:s.children)&&void 0!==i?i:[]).indexOf(this)*(null!=r?r:1)+1}}class h 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(){var t;const e=this.closest("tp-slider");if(!e)return;const i=Math.min(e.currentSlideIndex-1+e.step,e.getTotalSlides()),s=null!==(t=e.getAttribute("total"))&&void 0!==t?t:"";this.innerHTML=this.format.replace("$current",i.toString()).replace("$total",s||""),this.setAttribute("current",i.toString()),this.setAttribute("total",s||"")}}customElements.define("tp-slider",t),customElements.define("tp-slider-count",h),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)})();
|
|
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\tprotected touchStartY: number = 0;\n\tprotected swipeThreshold: number = 200;\n\tprotected responsiveSettings: { [ key: string ]: any };\n\tprotected allowedResponsiveKeys: string[] = [\n\t\t'flexible-height',\n\t\t'infinite',\n\t\t'swipe',\n\t\t'behaviour',\n\t\t'auto-slide-interval',\n\t\t'per-view',\n\t\t'step',\n\t\t'responsive',\n\t];\n\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\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// Threshold Setting.\n\t\tthis.swipeThreshold = Number( this?.getAttribute( 'swipe-threshold' ) ?? '200' );\n\n\t\t// Initialize slider.\n\t\tthis.slide();\n\t\tthis.autoSlide();\n\t\tthis.setAttribute( 'initialized', 'yes' );\n\n\t\t// Responsive Settings.\n\t\tconst responsiveSettingsJSON: string = this.getAttribute( 'responsive' ) || '';\n\t\tthis.responsiveSettings = responsiveSettingsJSON ? JSON.parse( responsiveSettingsJSON ) : [];\n\n\t\t// Event listeners.\n\t\tif ( ! ( 'ResizeObserver' in window ) ) {\n\t\t\t/**\n\t\t\t * We set the resize observer in `tp-slider-slide`\n\t\t\t * because These are just fallbacks for browsers that don't support ResizeObserver.\n\t\t\t */\n\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\t// Touch listeners.\n\t\tthis.addEventListener( 'touchstart', this.handleTouchStart.bind( this ), { passive: true } );\n\t\tthis.addEventListener( 'touchend', this.handleTouchEnd.bind( this ) );\n\t}\n\n\t/**\n\t * Connected callback.\n\t */\n\tconnectedCallback() {\n\t\t/**\n\t\t * Update on initial render.\n\t\t *\n\t\t * This is so that the disabled values of the navigation arrows\n\t\t * can be set because attributeChangedCallback does not get fired when\n\t\t * no attributes are passed to the slider.\n\t\t */\n\t\tthis.update();\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\t// Observed attributes.\n\t\treturn [ 'current-slide', 'flexible-height', 'infinite', 'swipe', 'per-view', 'step' ];\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\t// Keep an eye on current slide.\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\t// Update the component after the attribute change.\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\t// To get the current slide index.\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\t// Set the current slide index.\n\t\tthis.setCurrentSlide( index );\n\t}\n\n\t/**\n\t * Get current step.\n\t *\n\t * @return {number} Current step.\n\t */\n\tget step(): number {\n\t\t// To get the current step.\n\t\treturn parseInt( this.getAttribute( 'step' ) ?? '1' );\n\t}\n\n\t/**\n\t * Set current step.\n\t *\n\t * @param {number} step Step.\n\t */\n\tset step( step: number ) {\n\t\t// Set the current step.\n\t\tthis.setAttribute( 'step', step.toString() );\n\t}\n\n\t/**\n\t * Get per view.\n\t *\n\t * @return {number} Current step.\n\t */\n\tget perView(): number {\n\t\t// To get number of slides per view.\n\t\treturn parseInt( this.getAttribute( 'per-view' ) ?? '1' );\n\t}\n\n\t/**\n\t * Set per view.\n\t *\n\t * @param {number} perView Per view.\n\t */\n\tset perView( perView: number ) {\n\t\t// Set the number of slides per view.\n\t\tthis.setAttribute( 'per-view', perView.toString() );\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\t// To get the total number of slides.\n\t\tconst slides: NodeListOf<TPSliderSlideElement> | null | undefined = this.getSlideElements();\n\n\t\t// Check if slides are available.\n\t\tif ( slides ) {\n\t\t\t// Tell the total number of slides.\n\t\t\treturn slides.length;\n\t\t}\n\n\t\t// Else return 0.\n\t\treturn 0;\n\t}\n\n\t/**\n\t * Get Slide Elements.\n\t */\n\tgetSlideElements() {\n\t\t// Get slides.\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\t// Return array of slides.\n\t\treturn slides;\n\t}\n\n\t/**\n\t * Navigate to the next slide.\n\t */\n\tnext(): void {\n\t\t// Initialize total slides variable.\n\t\tconst totalSlides: number = this.getTotalSlides();\n\n\t\t// Check if we are at the last slide considering per view attribute.\n\t\tif ( this.currentSlideIndex >= totalSlides - this.perView + 1 ) {\n\t\t\t// Check if we are in infinite mode.\n\t\t\tif ( 'yes' === this.getAttribute( 'infinite' ) ) {\n\t\t\t\t// Yes, we are, and go back to first slide.\n\t\t\t\tthis.setCurrentSlide( 1 );\n\t\t\t}\n\n\t\t\t// Terminate.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get next slide index by adding minimum of step or remaining number of slides.\n\t\tconst nextSlideIndex: number = this.currentSlideIndex + Math.min( this.step, totalSlides - this.currentSlideIndex - this.perView + 1 );\n\n\t\t// Check if the next slide step is not taking it beyond the last slide.\n\t\tif ( nextSlideIndex > ( totalSlides - this.perView + 1 ) ) {\n\t\t\t// Yes, it is.\n\t\t\treturn;\n\t\t}\n\n\t\t// Everything is good, go to next slide.\n\t\tthis.setCurrentSlide( nextSlideIndex );\n\t}\n\n\t/**\n\t * Navigate to the previous slide.\n\t */\n\tprevious(): void {\n\t\t// Check if we are at the first slide.\n\t\tif ( this.currentSlideIndex <= 1 ) {\n\t\t\t// Check if we are in infinite mode.\n\t\t\tif ( 'yes' === this.getAttribute( 'infinite' ) ) {\n\t\t\t\tthis.setCurrentSlide( this.getTotalSlides() - this.perView + 1 );\n\t\t\t}\n\n\t\t\t// Terminate.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get previous slide index.\n\t\tconst previousSlideNumber: number = this.currentSlideIndex - this.step;\n\n\t\t// Check if the previous slide step is not taking it beyond the first slide.\n\t\tif ( previousSlideNumber > 1 ) {\n\t\t\tthis.setCurrentSlide( previousSlideNumber );\n\t\t} else {\n\t\t\tthis.setCurrentSlide( 1 );\n\t\t}\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\t// Get current slide index.\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\t// Check if slide index is valid.\n\t\tif ( index > this.getTotalSlides() || index <= 0 ) {\n\t\t\t// Stop! It's not valid.\n\t\t\treturn;\n\t\t}\n\n\t\t// dispatch slide-set event.\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\n\t\t// Set current slide index.\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\t// Yes, it is. So stop.\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\n\t\t// Check if we have slide container and slides.\n\t\tif ( ! slidesContainer || ! slides ) {\n\t\t\t// No, we don't. Either one of them or both are missing. So stop.\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\n\t\t// Check if behaviour is set to fade and slide on the current slide index is present in the slides array.\n\t\tif ( 'fade' !== behaviour && slides[ this.currentSlideIndex - 1 ] ) {\n\t\t\t// Yes, it is. So slide to the current slide.\n\t\t\tslidesContainer.style.left = `-${ slides[ this.currentSlideIndex - 1 ].offsetLeft }px`;\n\t\t}\n\t}\n\n\t/**\n\t * Get the arrow element by selector.\n\t *\n\t * In case of nested sliders, it difficult to find the correct arrow\n\t * because arrows can be placed anywhere.\n\t * This function checks if the parent tp-slider belongs to this component,\n\t * then return that arrow element, using 'this'.\n\t *\n\t * @param {string} selector Selector.\n\t */\n\tgetArrow( selector: string ) {\n\t\t// Get all arrows.\n\t\tconst arrows: NodeListOf<TPSliderArrowElement> | null = this.querySelectorAll( selector );\n\t\tconst parentSliderElement: TPSliderElement = this;\n\t\tlet theArrow: TPSliderArrowElement | null = this.querySelector( selector );\n\n\t\t// Loop through all the arrows including the one's inside nested slider.\n\t\tarrows.forEach( ( arrow ) => {\n\t\t\t/**\n\t\t\t * If the closest tp-slider is the same as the parentSliderElement, that means we have found\n\t\t\t * the correct arrow.\n\t\t\t */\n\t\t\tif ( parentSliderElement === arrow.closest( 'tp-slider' ) ) {\n\t\t\t\ttheArrow = arrow;\n\t\t\t}\n\t\t} );\n\n\t\t// Return arrow.\n\t\treturn theArrow;\n\t}\n\n\t/**\n\t * Update stuff when any attribute has changed.\n\t * Example: Update sub-components.\n\t */\n\tupdate(): void {\n\t\t// Get sub-components.\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.getArrow( 'tp-slider-arrow[direction=\"previous\"]' );\n\t\tconst rightArrow: TPSliderArrowElement | null = this.getArrow( 'tp-slider-arrow[direction=\"next\"]' );\n\n\t\t// Set active slide.\n\t\tconst slides: NodeListOf<TPSliderSlideElement> | null | undefined = this.getSlideElements();\n\n\t\t// Check if slides are available.\n\t\tif ( slides ) {\n\t\t\tslides.forEach( ( slide: TPSliderSlideElement, index: number ): void => {\n\t\t\t\t// Update active attribute.\n\t\t\t\tif ( this.currentSlideIndex - 1 === index ) {\n\t\t\t\t\tslide.setAttribute( 'active', 'yes' );\n\t\t\t\t} else {\n\t\t\t\t\tslide.removeAttribute( 'active' );\n\t\t\t\t}\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\t// Update current attribute after considering step.\n\t\t\t\tif ( Math.ceil( this.currentSlideIndex / this.step ) - 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\t// Check if the slideCount.update is a function.\n\t\t\t\tif ( 'function' === typeof slideCount.update ) {\n\t\t\t\t\t// Update slide count.\n\t\t\t\t\tslideCount.update();\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\n\t\t// Enable / disable arrows.\n\t\tif ( 'yes' !== this.getAttribute( 'infinite' ) ) {\n\t\t\t// For the last slide.\n\t\t\tif ( this.getCurrentSlide() === this.getTotalSlides() - this.perView + 1 ) {\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\t// For the first slide.\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\n\t\t// Check if slides container is available.\n\t\tif ( ! slidesContainer ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Bail early if we don't want it to be flexible height - as long as it doesn't fade.\n\t\tif ( 'yes' !== this.getAttribute( 'flexible-height' ) && 'fade' !== this.getAttribute( 'behaviour' ) ) {\n\t\t\t// Remove height property for good measure!\n\t\t\tslidesContainer.style.removeProperty( 'height' );\n\n\t\t\t// Bail early.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get slides.\n\t\tconst slides: NodeListOf<TPSliderSlideElement> | null | undefined = this.getSlideElements();\n\n\t\t// Check if slides are available.\n\t\tif ( ! slides ) {\n\t\t\t// No slides to resize.\n\t\t\treturn;\n\t\t}\n\n\t\t// Check if we have a flexible height.\n\t\tif ( 'yes' === this.getAttribute( 'flexible-height' ) ) {\n\t\t\t// Check if per-view is greater than 1.\n\t\t\tif ( this.perView > 1 ) {\n\t\t\t\tconst currentIndex: number = this.currentSlideIndex - 1;\n\t\t\t\tconst slidesOnCurrentView: number = currentIndex + this.perView;\n\t\t\t\tlet maxHeight: number = 0;\n\n\t\t\t\t// Traverse all slides in the current view and add their height to the array.\n\t\t\t\tfor ( let i: number = currentIndex; i < slidesOnCurrentView; i++ ) {\n\t\t\t\t\t// Check if the slide exists.\n\t\t\t\t\tif ( slides[ i ].scrollHeight > maxHeight ) {\n\t\t\t\t\t\tmaxHeight = slides[ i ].scrollHeight;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t// Set the height of the container to be the max height of the slides in the current view.\n\t\t\t\tslidesContainer.style.height = `${ maxHeight }px`;\n\t\t\t} else {\n\t\t\t\t// Set the height of the container to be the height of the current slide.\n\t\t\t\tconst height: number = slides[ this.currentSlideIndex - 1 ].scrollHeight;\n\t\t\t\tslidesContainer.style.height = `${ height }px`;\n\t\t\t}\n\t\t} else {\n\t\t\t// Set the height of the container to be the height of the tallest slide.\n\t\t\tlet height: number = 0;\n\n\t\t\t// Traverse all slides and add their height to the array.\n\t\t\tslides.forEach( ( slide: TPSliderSlideElement ): void => {\n\t\t\t\t// Set the height of the container to be the height of the tallest slide.\n\t\t\t\tif ( slide.scrollHeight > height ) {\n\t\t\t\t\theight = slide.scrollHeight;\n\t\t\t\t}\n\t\t\t} );\n\n\t\t\t// Set the height of the container to be the height of the tallest slide.\n\t\t\tslidesContainer.style.height = `${ height }px`;\n\t\t}\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// Update responsive settings. We are using setTimeout for INP( Interaction for Next Paint ).\n\t\tsetTimeout( () => {\n\t\t\t// Update attributes responsive settings.\n\t\t\tthis.updateAttributesResponsively();\n\t\t}, 0 );\n\n\t\t// Check if we're already resizing.\n\t\tif ( this.getAttribute( 'resizing' ) ) {\n\t\t\t// Yes we are, early return.\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\tthis.removeAttribute( 'resizing' );\n\t}\n\n\t/**\n\t * Update attributes responsive settings.\n\t */\n\tupdateAttributesResponsively(): void {\n\t\t// Check if responsiveSettings exist.\n\t\tif ( ! this.responsiveSettings.length ) {\n\t\t\t// Early Return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Step 2: First remove all the allowed responsive keys.\n\t\tthis.allowedResponsiveKeys.forEach( ( key: string ) => {\n\t\t\t// Remove.\n\t\t\tthis.removeAttribute( key );\n\t\t} );\n\n\t\t// Step 3: Loop through responsiveSettings and check if the media query is matched.\n\t\tthis.responsiveSettings.every( ( settings: { [ key: string ]: any } ) => {\n\t\t\t// Check if media query is matched.\n\t\t\tif ( window.matchMedia( settings.media ).matches ) {\n\t\t\t\t// If yes, loop through the settings at this media breakpoint.\n\t\t\t\tfor ( const settingKey in settings ) {\n\t\t\t\t\t// Check if the setting key is not media.\n\t\t\t\t\tif ( 'media' !== settingKey && this.allowedResponsiveKeys.includes( settingKey ) ) {\n\t\t\t\t\t\t// Set those keys as attributes.\n\t\t\t\t\t\tthis.setAttribute( settingKey, settings[ settingKey ] );\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t// Return false to break out of the loop.\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\t// Return true so that the loop continues, if it does not break above.\n\t\t\treturn true;\n\t\t} );\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\t// initialize touch start coordinates\n\t\tif ( 'yes' === this.getAttribute( 'swipe' ) ) {\n\t\t\tthis.touchStartX = e.touches[ 0 ].clientX;\n\t\t\tthis.touchStartY = e.touches[ 0 ].clientY;\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\t// Early return if swipe is not enabled.\n\t\tif ( 'yes' !== this.getAttribute( 'swipe' ) ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Calculate the horizontal and vertical distance moved.\n\t\tconst touchEndX: number = e.changedTouches[ 0 ].clientX;\n\t\tconst touchEndY: number = e.changedTouches[ 0 ].clientY;\n\t\tconst swipeDistanceX: number = touchEndX - this.touchStartX;\n\t\tconst swipeDistanceY: number = touchEndY - this.touchStartY;\n\n\t\t// Determine if the swipe is predominantly horizontal or vertical.\n\t\tconst isHorizontalSwipe: boolean = Math.abs( swipeDistanceX ) > Math.abs( swipeDistanceY );\n\n\t\t// If it's not horizontal swipe, return\n\t\tif ( ! isHorizontalSwipe ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Check if it's a right or left swipe.\n\t\tif ( swipeDistanceX > 0 ) {\n\t\t\t// Right-Swipe: Check if horizontal swipe distance is less than the threshold.\n\t\t\tif ( swipeDistanceX < this.swipeThreshold ) {\n\t\t\t\tthis.previous();\n\t\t\t}\n\t\t} else if ( swipeDistanceX < 0 ) {\n\t\t\t// Left-Swipe: Check if horizontal swipe distance is less than the threshold.\n\t\t\tif ( swipeDistanceX > -this.swipeThreshold ) {\n\t\t\t\tthis.next();\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Auto slide.\n\t */\n\tprotected autoSlide(): void {\n\t\t// Auto Slide.\n\t\tconst autoSlideInterval: string | null = this.getAttribute( 'auto-slide-interval' );\n\n\t\t// Check if we have an auto slider interval.\n\t\tif ( ! autoSlideInterval ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Check for a valid interval.\n\t\tconst interval: number = parseInt( autoSlideInterval );\n\n\t\t// Check if interval is valid.\n\t\tif ( interval <= 0 ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Run this on a timeout, rather than interval, so the interval can be controlled after the component is initialized.\n\t\tsetTimeout( (): void => {\n\t\t\t// Run the next slide.\n\t\t\tthis.next();\n\t\t\tthis.autoSlide();\n\t\t\tthis.dispatchEvent( new CustomEvent( 'auto-slide-complete' ) );\n\t\t}, interval );\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 * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\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\t// Get the parent tp-slider element.\n\t\tconst slider: TPSliderElement | null = this.closest( 'tp-slider' );\n\n\t\t// Bail if not found.\n\t\tif ( ! slider ) {\n\t\t\t// Bail early if not found.\n\t\t\treturn;\n\t\t}\n\n\t\t/**\n\t\t * Yield to main thread to avoid observation errors.\n\t\t *\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver#observation_errors\n\t\t */\n\t\tsetTimeout( (): void => {\n\t\t\t// Handle resize.\n\t\t\tslider.handleResize();\n\t\t}, 0 );\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 * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Get the button and add event listener.\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\t// If disabled, do nothing.\n\t\tif ( 'yes' === this.getAttribute( 'disabled' ) ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get the slider.\n\t\tconst slider: TPSliderElement | null = this.closest( 'tp-slider' );\n\n\t\t// If no slider, early return.\n\t\tif ( ! slider ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Initiate slider according to the direction of the button clicked.\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 * Properties.\n\t */\n\tprotected slider : TPSliderElement | null;\n\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\t\tthis.slider = this.closest( 'tp-slider' );\n\n\t\t// Get the nav-item button.\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\t// Check if slider exists.\n\t\tif ( ! this.slider ) {\n\t\t\t// No its not! Terminate.\n\t\t\treturn;\n\t\t}\n\n\t\t// Set current slide.\n\t\tthis.slider.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\t// Check if we have an index.\n\t\tif ( this.getAttribute( 'index' ) ) {\n\t\t\t// Yes, return it.\n\t\t\treturn parseInt( this.getAttribute( 'index' ) ?? '0' );\n\t\t}\n\n\t\t// No, find it in the navigation.\n\t\tconst slideNav: TPSliderNavElement | null = this.closest( 'tp-slider-nav' );\n\t\tconst step = this.slider?.step;\n\n\t\t// Return index of this element considering the step value.\n\t\treturn ( Array.from( slideNav?.children ?? [] ).indexOf( this ) * ( step ?? 1 ) ) + 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\t// Attributes observed by this component.\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\t// Get the 'format' attribute value.\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\t// Set the 'format' attribute value.\n\t\tthis.setAttribute( 'format', format );\n\t}\n\n\t/**\n\t * Attribute changed callback.\n\t */\n\tattributeChangedCallback(): void {\n\t\t// On change of format attribute, update the component.\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Update component.\n\t */\n\tupdate(): void {\n\t\t// Get slider.\n\t\tconst slider: TPSliderElement | null = this.closest( 'tp-slider' );\n\n\t\t// Check if slider exists.\n\t\tif ( ! slider ) {\n\t\t\t// No its not! Terminate.\n\t\t\treturn;\n\t\t}\n\n\t\t// Initializing current variable including step. Along with initializing total variable.\n\t\tconst current: number = Math.min( slider.currentSlideIndex - 1 + slider.step, slider.getTotalSlides() );\n\t\tconst total: string = slider.getAttribute( 'total' ) ?? '';\n\n\t\t// Updating variables in format attribute.\n\t\tthis.innerHTML =\n\t\t\tthis.format\n\t\t\t\t.replace( '$current', current.toString() )\n\t\t\t\t.replace( '$total', total || '' );\n\n\t\t// Updating current and total attributes.\n\t\tthis.setAttribute( 'current', current.toString() );\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-count', TPSliderCountElement );\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 );\n"],"names":["TPSliderElement","HTMLElement","constructor","super","touchStartX","touchStartY","swipeThreshold","allowedResponsiveKeys","this","getAttribute","setAttribute","Number","slide","autoSlide","responsiveSettingsJSON","responsiveSettings","JSON","parse","window","addEventListener","handleResize","bind","document","fonts","ready","then","handleTouchStart","passive","handleTouchEnd","connectedCallback","update","observedAttributes","attributeChangedCallback","name","oldValue","newValue","dispatchEvent","CustomEvent","bubbles","currentSlideIndex","parseInt","index","setCurrentSlide","step","toString","perView","getTotalSlides","slides","getSlideElements","length","slidesElement","querySelector","querySelectorAll","next","totalSlides","nextSlideIndex","Math","min","previous","previousSlideNumber","getCurrentSlide","detail","slideIndex","slidesContainer","updateHeight","style","left","offsetLeft","getArrow","selector","arrows","parentSliderElement","theArrow","forEach","arrow","closest","sliderNavItems","sliderCounts","leftArrow","rightArrow","removeAttribute","navItem","ceil","slideCount","removeProperty","currentIndex","slidesOnCurrentView","maxHeight","i","scrollHeight","height","setTimeout","updateAttributesResponsively","key","every","settings","matchMedia","media","matches","settingKey","includes","e","touches","clientX","clientY","touchEndX","changedTouches","touchEndY","swipeDistanceX","swipeDistanceY","abs","autoSlideInterval","interval","TPSliderTrackElement","TPSliderSlidesElement","TPSliderSlideElement","ResizeObserver","handleHeightChange","observe","slider","TPSliderArrowElement","handleClick","TPSliderNavElement","TPSliderNavItemElement","getIndex","slideNav","Array","from","children","indexOf","TPSliderCountElement","format","current","total","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\tprotected touchStartY: number = 0;\n\tprotected swipeThreshold: number = 200;\n\tprotected responsiveSettings: { [ key: string ]: any };\n\tprotected allowedResponsiveKeys: string[] = [\n\t\t'flexible-height',\n\t\t'infinite',\n\t\t'swipe',\n\t\t'behaviour',\n\t\t'auto-slide-interval',\n\t\t'per-view',\n\t\t'step',\n\t\t'responsive',\n\t];\n\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\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// Threshold Setting.\n\t\tthis.swipeThreshold = Number( this?.getAttribute( 'swipe-threshold' ) ?? '200' );\n\n\t\t// Initialize slider.\n\t\tthis.slide();\n\t\tthis.autoSlide();\n\t\tthis.setAttribute( 'initialized', 'yes' );\n\n\t\t// Responsive Settings.\n\t\tconst responsiveSettingsJSON: string = this.getAttribute( 'responsive' ) || '';\n\t\tthis.responsiveSettings = responsiveSettingsJSON ? JSON.parse( responsiveSettingsJSON ) : [];\n\n\t\t// Event listeners.\n\t\tif ( ! ( 'ResizeObserver' in window ) ) {\n\t\t\t/**\n\t\t\t * We set the resize observer in `tp-slider-slide`\n\t\t\t * because These are just fallbacks for browsers that don't support ResizeObserver.\n\t\t\t */\n\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\t// Touch listeners.\n\t\tthis.addEventListener( 'touchstart', this.handleTouchStart.bind( this ), { passive: true } );\n\t\tthis.addEventListener( 'touchend', this.handleTouchEnd.bind( this ) );\n\t}\n\n\t/**\n\t * Connected callback.\n\t */\n\tconnectedCallback() {\n\t\t/**\n\t\t * Update on initial render.\n\t\t *\n\t\t * This is so that the disabled values of the navigation arrows\n\t\t * can be set because attributeChangedCallback does not get fired when\n\t\t * no attributes are passed to the slider.\n\t\t */\n\t\tthis.update();\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\t// Observed attributes.\n\t\treturn [ 'current-slide', 'flexible-height', 'infinite', 'swipe', 'per-view', 'step' ];\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\t// Keep an eye on current slide.\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\t// Update the component after the attribute change.\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\t// To get the current slide index.\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\t// Set the current slide index.\n\t\tthis.setCurrentSlide( index );\n\t}\n\n\t/**\n\t * Get current step.\n\t *\n\t * @return {number} Current step.\n\t */\n\tget step(): number {\n\t\t// To get the current step.\n\t\treturn parseInt( this.getAttribute( 'step' ) ?? '1' );\n\t}\n\n\t/**\n\t * Set current step.\n\t *\n\t * @param {number} step Step.\n\t */\n\tset step( step: number ) {\n\t\t// Set the current step.\n\t\tthis.setAttribute( 'step', step.toString() );\n\t}\n\n\t/**\n\t * Get per view.\n\t *\n\t * @return {number} Current step.\n\t */\n\tget perView(): number {\n\t\t// To get number of slides per view.\n\t\treturn parseInt( this.getAttribute( 'per-view' ) ?? '1' );\n\t}\n\n\t/**\n\t * Set per view.\n\t *\n\t * @param {number} perView Per view.\n\t */\n\tset perView( perView: number ) {\n\t\t// Set the number of slides per view.\n\t\tthis.setAttribute( 'per-view', perView.toString() );\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\t// To get the total number of slides.\n\t\tconst slides: NodeListOf<TPSliderSlideElement> | null | undefined = this.getSlideElements();\n\n\t\t// Check if slides are available.\n\t\tif ( slides ) {\n\t\t\t// Tell the total number of slides.\n\t\t\treturn slides.length;\n\t\t}\n\n\t\t// Else return 0.\n\t\treturn 0;\n\t}\n\n\t/**\n\t * Get Slide Elements.\n\t */\n\tgetSlideElements() {\n\t\t// Get slides.\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\t// Return array of slides.\n\t\treturn slides;\n\t}\n\n\t/**\n\t * Navigate to the next slide.\n\t */\n\tnext(): void {\n\t\t// Initialize total slides variable.\n\t\tconst totalSlides: number = this.getTotalSlides();\n\n\t\t// Check if we are at the last slide considering per view attribute.\n\t\tif ( this.currentSlideIndex >= totalSlides - this.perView + 1 ) {\n\t\t\t// Check if we are in infinite mode.\n\t\t\tif ( 'yes' === this.getAttribute( 'infinite' ) ) {\n\t\t\t\t// Yes, we are, and go back to first slide.\n\t\t\t\tthis.setCurrentSlide( 1 );\n\t\t\t}\n\n\t\t\t// Terminate.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get next slide index by adding minimum of step or remaining number of slides.\n\t\tconst nextSlideIndex: number = this.currentSlideIndex + Math.min( this.step, totalSlides - this.currentSlideIndex - this.perView + 1 );\n\n\t\t// Check if the next slide step is not taking it beyond the last slide.\n\t\tif ( nextSlideIndex > ( totalSlides - this.perView + 1 ) ) {\n\t\t\t// Yes, it is.\n\t\t\treturn;\n\t\t}\n\n\t\t// Everything is good, go to next slide.\n\t\tthis.setCurrentSlide( nextSlideIndex );\n\t}\n\n\t/**\n\t * Navigate to the previous slide.\n\t */\n\tprevious(): void {\n\t\t// Check if we are at the first slide.\n\t\tif ( this.currentSlideIndex <= 1 ) {\n\t\t\t// Check if we are in infinite mode.\n\t\t\tif ( 'yes' === this.getAttribute( 'infinite' ) ) {\n\t\t\t\tthis.setCurrentSlide( this.getTotalSlides() - this.perView + 1 );\n\t\t\t}\n\n\t\t\t// Terminate.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get previous slide index.\n\t\tconst previousSlideNumber: number = this.currentSlideIndex - this.step;\n\n\t\t// Check if the previous slide step is not taking it beyond the first slide.\n\t\tif ( previousSlideNumber > 1 ) {\n\t\t\tthis.setCurrentSlide( previousSlideNumber );\n\t\t} else {\n\t\t\tthis.setCurrentSlide( 1 );\n\t\t}\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\t// Get current slide index.\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\t// Check if slide index is valid.\n\t\tif ( index > this.getTotalSlides() || index <= 0 ) {\n\t\t\t// Stop! It's not valid.\n\t\t\treturn;\n\t\t}\n\n\t\t// dispatch slide-set event.\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\n\t\t// Set current slide index.\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\t// Yes, it is. So stop.\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\n\t\t// Check if we have slide container and slides.\n\t\tif ( ! slidesContainer || ! slides ) {\n\t\t\t// No, we don't. Either one of them or both are missing. So stop.\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\n\t\t// Check if behaviour is set to fade and slide on the current slide index is present in the slides array.\n\t\tif ( 'fade' !== behaviour && slides[ this.currentSlideIndex - 1 ] ) {\n\t\t\t// Yes, it is. So slide to the current slide.\n\t\t\tslidesContainer.style.left = `-${ slides[ this.currentSlideIndex - 1 ].offsetLeft }px`;\n\t\t}\n\t}\n\n\t/**\n\t * Get the arrow element by selector.\n\t *\n\t * In case of nested sliders, it difficult to find the correct arrow\n\t * because arrows can be placed anywhere.\n\t * This function checks if the parent tp-slider belongs to this component,\n\t * then return that arrow element, using 'this'.\n\t *\n\t * @param {string} selector Selector.\n\t */\n\tgetArrow( selector: string ) {\n\t\t// Get all arrows.\n\t\tconst arrows: NodeListOf<TPSliderArrowElement> | null = this.querySelectorAll( selector );\n\t\tconst parentSliderElement: TPSliderElement = this;\n\t\tlet theArrow: TPSliderArrowElement | null = this.querySelector( selector );\n\n\t\t// Loop through all the arrows including the one's inside nested slider.\n\t\tarrows.forEach( ( arrow ) => {\n\t\t\t/**\n\t\t\t * If the closest tp-slider is the same as the parentSliderElement, that means we have found\n\t\t\t * the correct arrow.\n\t\t\t */\n\t\t\tif ( parentSliderElement === arrow.closest( 'tp-slider' ) ) {\n\t\t\t\ttheArrow = arrow;\n\t\t\t}\n\t\t} );\n\n\t\t// Return arrow.\n\t\treturn theArrow;\n\t}\n\n\t/**\n\t * Update stuff when any attribute has changed.\n\t * Example: Update sub-components.\n\t */\n\tupdate(): void {\n\t\t// Get sub-components.\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.getArrow( 'tp-slider-arrow[direction=\"previous\"]' );\n\t\tconst rightArrow: TPSliderArrowElement | null = this.getArrow( 'tp-slider-arrow[direction=\"next\"]' );\n\n\t\t// Set active slide.\n\t\tconst slides: NodeListOf<TPSliderSlideElement> | null | undefined = this.getSlideElements();\n\n\t\t// Check if slides are available.\n\t\tif ( slides ) {\n\t\t\tslides.forEach( ( slide: TPSliderSlideElement, index: number ): void => {\n\t\t\t\t// Update active attribute.\n\t\t\t\tif ( this.currentSlideIndex - 1 === index ) {\n\t\t\t\t\tslide.setAttribute( 'active', 'yes' );\n\t\t\t\t} else {\n\t\t\t\t\tslide.removeAttribute( 'active' );\n\t\t\t\t}\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\t// Update current attribute after considering step.\n\t\t\t\tif ( Math.ceil( this.currentSlideIndex / this.step ) - 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\t// Check if the slideCount.update is a function.\n\t\t\t\tif ( 'function' === typeof slideCount.update ) {\n\t\t\t\t\t// Update slide count.\n\t\t\t\t\tslideCount.update();\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\n\t\t// Enable / disable arrows.\n\t\tif ( 'yes' !== this.getAttribute( 'infinite' ) ) {\n\t\t\t// For the last slide.\n\t\t\tif ( this.getCurrentSlide() === this.getTotalSlides() - this.perView + 1 ) {\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\t// For the first slide.\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\n\t\t// Check if slides container is available.\n\t\tif ( ! slidesContainer ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Bail early if we don't want it to be flexible height - as long as it doesn't fade.\n\t\tif ( 'yes' !== this.getAttribute( 'flexible-height' ) && 'fade' !== this.getAttribute( 'behaviour' ) ) {\n\t\t\t// Remove height property for good measure!\n\t\t\tslidesContainer.style.removeProperty( 'height' );\n\n\t\t\t// Bail early.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get slides.\n\t\tconst slides: NodeListOf<TPSliderSlideElement> | null | undefined = this.getSlideElements();\n\n\t\t// Check if slides are available.\n\t\tif ( ! slides ) {\n\t\t\t// No slides to resize.\n\t\t\treturn;\n\t\t}\n\n\t\t// Check if we have a flexible height.\n\t\tif ( 'yes' === this.getAttribute( 'flexible-height' ) ) {\n\t\t\t// Check if per-view is greater than 1.\n\t\t\tif ( this.perView > 1 ) {\n\t\t\t\tconst currentIndex: number = this.currentSlideIndex - 1;\n\t\t\t\tconst slidesOnCurrentView: number = currentIndex + this.perView;\n\t\t\t\tlet maxHeight: number = 0;\n\n\t\t\t\t// Traverse all slides in the current view and add their height to the array.\n\t\t\t\tfor ( let i: number = currentIndex; i < slidesOnCurrentView; i++ ) {\n\t\t\t\t\t// Check if the slide exists.\n\t\t\t\t\tif ( slides[ i ].scrollHeight > maxHeight ) {\n\t\t\t\t\t\tmaxHeight = slides[ i ].scrollHeight;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t// Set the height of the container to be the max height of the slides in the current view.\n\t\t\t\tslidesContainer.style.height = `${ maxHeight }px`;\n\t\t\t} else {\n\t\t\t\t// Set the height of the container to be the height of the current slide.\n\t\t\t\tconst height: number = slides[ this.currentSlideIndex - 1 ].scrollHeight;\n\t\t\t\tslidesContainer.style.height = `${ height }px`;\n\t\t\t}\n\t\t} else {\n\t\t\t// Set the height of the container to be the height of the tallest slide.\n\t\t\tlet height: number = 0;\n\n\t\t\t// Traverse all slides and add their height to the array.\n\t\t\tslides.forEach( ( slide: TPSliderSlideElement ): void => {\n\t\t\t\t// Set the height of the container to be the height of the tallest slide.\n\t\t\t\tif ( slide.scrollHeight > height ) {\n\t\t\t\t\theight = slide.scrollHeight;\n\t\t\t\t}\n\t\t\t} );\n\n\t\t\t// Set the height of the container to be the height of the tallest slide.\n\t\t\tslidesContainer.style.height = `${ height }px`;\n\t\t}\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// Update responsive settings. We are using setTimeout for INP( Interaction for Next Paint ).\n\t\tsetTimeout( () => {\n\t\t\t// Update attributes responsive settings.\n\t\t\tthis.updateAttributesResponsively();\n\t\t}, 0 );\n\n\t\t// Check if we're already resizing.\n\t\tif ( this.getAttribute( 'resizing' ) ) {\n\t\t\t// Yes we are, early return.\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\tthis.removeAttribute( 'resizing' );\n\t}\n\n\t/**\n\t * Update attributes responsive settings.\n\t */\n\tupdateAttributesResponsively(): void {\n\t\t// Check if responsiveSettings exist.\n\t\tif ( ! this.responsiveSettings.length ) {\n\t\t\t// Early Return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Step 2: First remove all the allowed responsive keys.\n\t\tthis.allowedResponsiveKeys.forEach( ( key: string ) => {\n\t\t\t// Remove.\n\t\t\tthis.removeAttribute( key );\n\t\t} );\n\n\t\t// Step 3: Loop through responsiveSettings and check if the media query is matched.\n\t\tthis.responsiveSettings.every( ( settings: { [ key: string ]: any } ) => {\n\t\t\t// Check if media query is matched.\n\t\t\tif ( window.matchMedia( settings.media ).matches ) {\n\t\t\t\t// If yes, loop through the settings at this media breakpoint.\n\t\t\t\tfor ( const settingKey in settings ) {\n\t\t\t\t\t// Check if the setting key is not media.\n\t\t\t\t\tif ( 'media' !== settingKey && this.allowedResponsiveKeys.includes( settingKey ) ) {\n\t\t\t\t\t\t// Set those keys as attributes.\n\t\t\t\t\t\tthis.setAttribute( settingKey, settings[ settingKey ] );\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t// Return false to break out of the loop.\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\t// Return true so that the loop continues, if it does not break above.\n\t\t\treturn true;\n\t\t} );\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\t// initialize touch start coordinates\n\t\tif ( 'yes' === this.getAttribute( 'swipe' ) ) {\n\t\t\tthis.touchStartX = e.touches[ 0 ].clientX;\n\t\t\tthis.touchStartY = e.touches[ 0 ].clientY;\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\t// Early return if swipe is not enabled.\n\t\tif ( 'yes' !== this.getAttribute( 'swipe' ) ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Calculate the horizontal and vertical distance moved.\n\t\tconst touchEndX: number = e.changedTouches[ 0 ].clientX;\n\t\tconst touchEndY: number = e.changedTouches[ 0 ].clientY;\n\t\tconst swipeDistanceX: number = touchEndX - this.touchStartX;\n\t\tconst swipeDistanceY: number = touchEndY - this.touchStartY;\n\n\t\t// Determine if the swipe is predominantly horizontal or vertical.\n\t\tconst isHorizontalSwipe: boolean = Math.abs( swipeDistanceX ) > Math.abs( swipeDistanceY );\n\n\t\t// If it's not horizontal swipe, return\n\t\tif ( ! isHorizontalSwipe ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Check if it's a right or left swipe.\n\t\tif ( swipeDistanceX > 0 ) {\n\t\t\t// Right-Swipe: Check if horizontal swipe distance is less than the threshold.\n\t\t\tif ( swipeDistanceX < this.swipeThreshold ) {\n\t\t\t\tthis.previous();\n\t\t\t}\n\t\t} else if ( swipeDistanceX < 0 ) {\n\t\t\t// Left-Swipe: Check if horizontal swipe distance is less than the threshold.\n\t\t\tif ( swipeDistanceX > -this.swipeThreshold ) {\n\t\t\t\tthis.next();\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Auto slide.\n\t */\n\tprotected autoSlide(): void {\n\t\t// Auto Slide.\n\t\tconst autoSlideInterval: string | null = this.getAttribute( 'auto-slide-interval' );\n\n\t\t// Check if we have an auto slider interval.\n\t\tif ( ! autoSlideInterval ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Check for a valid interval.\n\t\tconst interval: number = parseInt( autoSlideInterval );\n\n\t\t// Check if interval is valid.\n\t\tif ( interval <= 0 ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Run this on a timeout, rather than interval, so the interval can be controlled after the component is initialized.\n\t\tsetTimeout( (): void => {\n\t\t\t// Run the next slide.\n\t\t\tthis.next();\n\t\t\tthis.autoSlide();\n\t\t\tthis.dispatchEvent( new CustomEvent( 'auto-slide-complete' ) );\n\t\t}, interval );\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 * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\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\t// Get the parent tp-slider element.\n\t\tconst slider: TPSliderElement | null = this.closest( 'tp-slider' );\n\n\t\t// Bail if not found.\n\t\tif ( ! slider ) {\n\t\t\t// Bail early if not found.\n\t\t\treturn;\n\t\t}\n\n\t\t/**\n\t\t * Yield to main thread to avoid observation errors.\n\t\t *\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver#observation_errors\n\t\t */\n\t\tsetTimeout( (): void => {\n\t\t\t// Handle resize.\n\t\t\tslider.handleResize();\n\t\t}, 0 );\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 * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Get the button and add event listener.\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\t// If disabled, do nothing.\n\t\tif ( 'yes' === this.getAttribute( 'disabled' ) ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get the slider.\n\t\tconst slider: TPSliderElement | null = this.closest( 'tp-slider' );\n\n\t\t// If no slider, early return.\n\t\tif ( ! slider ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Initiate slider according to the direction of the button clicked.\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 * Properties.\n\t */\n\tprotected slider : TPSliderElement | null;\n\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\t\tthis.slider = this.closest( 'tp-slider' );\n\n\t\t// Get the nav-item button.\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\t// Check if slider exists.\n\t\tif ( ! this.slider ) {\n\t\t\t// No its not! Terminate.\n\t\t\treturn;\n\t\t}\n\n\t\t// Set current slide.\n\t\tthis.slider.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\t// Check if we have an index.\n\t\tif ( this.getAttribute( 'index' ) ) {\n\t\t\t// Yes, return it.\n\t\t\treturn parseInt( this.getAttribute( 'index' ) ?? '0' );\n\t\t}\n\n\t\t// No, find it in the navigation.\n\t\tconst slideNav: TPSliderNavElement | null = this.closest( 'tp-slider-nav' );\n\t\tconst step = this.slider?.step;\n\n\t\t// Return index of this element considering the step value.\n\t\treturn ( Array.from( slideNav?.children ?? [] ).indexOf( this ) * ( step ?? 1 ) ) + 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\t// Attributes observed by this component.\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\t// Get the 'format' attribute value.\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\t// Set the 'format' attribute value.\n\t\tthis.setAttribute( 'format', format );\n\t}\n\n\t/**\n\t * Attribute changed callback.\n\t */\n\tattributeChangedCallback(): void {\n\t\t// On change of format attribute, update the component.\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Update component.\n\t */\n\tupdate(): void {\n\t\t// Get slider.\n\t\tconst slider: TPSliderElement | null = this.closest( 'tp-slider' );\n\n\t\t// Check if slider exists.\n\t\tif ( ! slider ) {\n\t\t\t// No its not! Terminate.\n\t\t\treturn;\n\t\t}\n\n\t\t// Initializing current variable including step. Along with initializing total variable.\n\t\tconst current: number = Math.min( slider.currentSlideIndex - 1 + slider.step, slider.getTotalSlides() );\n\t\tconst total: string = slider.getAttribute( 'total' ) ?? '';\n\n\t\t// Updating variables in format attribute.\n\t\tthis.innerHTML =\n\t\t\tthis.format\n\t\t\t\t.replace( '$current', current.toString() )\n\t\t\t\t.replace( '$total', total || '' );\n\n\t\t// Updating current and total attributes.\n\t\tthis.setAttribute( 'current', current.toString() );\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-count', TPSliderCountElement );\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 );\n"],"names":["TPSliderElement","HTMLElement","constructor","super","touchStartX","touchStartY","swipeThreshold","allowedResponsiveKeys","this","getAttribute","setAttribute","Number","slide","autoSlide","responsiveSettingsJSON","responsiveSettings","JSON","parse","window","addEventListener","handleResize","bind","document","fonts","ready","then","handleTouchStart","passive","handleTouchEnd","connectedCallback","update","observedAttributes","attributeChangedCallback","name","oldValue","newValue","dispatchEvent","CustomEvent","bubbles","currentSlideIndex","parseInt","index","setCurrentSlide","step","toString","perView","getTotalSlides","slides","getSlideElements","length","slidesElement","querySelector","querySelectorAll","next","totalSlides","nextSlideIndex","Math","min","previous","previousSlideNumber","getCurrentSlide","detail","slideIndex","slidesContainer","updateHeight","style","left","offsetLeft","getArrow","selector","arrows","parentSliderElement","theArrow","forEach","arrow","closest","sliderNavItems","sliderCounts","leftArrow","rightArrow","removeAttribute","navItem","ceil","slideCount","removeProperty","currentIndex","slidesOnCurrentView","maxHeight","i","scrollHeight","height","setTimeout","updateAttributesResponsively","key","every","settings","matchMedia","media","matches","settingKey","includes","e","touches","clientX","clientY","touchEndX","changedTouches","touchEndY","swipeDistanceX","swipeDistanceY","abs","autoSlideInterval","interval","TPSliderTrackElement","TPSliderSlidesElement","TPSliderSlideElement","ResizeObserver","handleHeightChange","observe","slider","TPSliderArrowElement","handleClick","TPSliderNavElement","TPSliderNavItemElement","getIndex","slideNav","Array","from","children","indexOf","TPSliderCountElement","format","current","total","innerHTML","replace","customElements","define"],"sourceRoot":""}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
(()=>{"use strict";class t extends HTMLElement{constructor(){super(),this.uniqueId=crypto.randomUUID(),this.target=this.querySelector(":scope > tp-tooltip-popover"),this.appendTriggerButton(),this.setPopoverTarget()}appendTriggerButton(){const t=this.querySelector("tp-tooltip-trigger");if(!t)return void console.error("tp-tooltip-trigger not found");const o=document.createElement("button");(null==t?void 0:t.firstElementChild)&&(null==o||o.appendChild(t.firstElementChild)),o.setAttribute("popovertarget",this.uniqueId),o.addEventListener("mouseover",(()=>{var t;null===(t=this.target)||void 0===t||t.showTooltip()})),o.addEventListener("mouseleave",(()=>{var t;null===(t=this.target)||void 0===t||t.hideTooltip()})),null==t||t.appendChild(o)}setPopoverTarget(){this.target?(this.target.setAttribute("popover","auto"),this.target.setAttribute("id",this.uniqueId)):console.error("tp-tooltip-popover not found")}}class o extends HTMLElement{}class e extends HTMLElement{constructor(){super(),this.trigger=this.closest("tp-tooltip"),this.tooltipWidth=parseInt(this.style.width)||0,this.tooltipArrowHeight=parseInt(this.getAttribute("arrow-height")||"8"),this.tooltipGap=parseInt(this.getAttribute("gap")||"10")}showTooltip(){this.showPopover(),this.positionTooltip()}hideTooltip(){this.hidePopover(),this.style.setProperty("--arrow-top-positioning",null),this.style.setProperty("--arrow-left-positioning",null)}positionTooltip(){if(!this.trigger)return;const t=this.getElementPosition(this);console.log(t);const o=this.getElementPosition(this.trigger),e=this.getElementPosition(this.trigger.parentNode);if(t&&o&&e){const i=o.bottom-o.height,r=Math.max(document.documentElement.clientWidth||0,window.innerWidth||0),s=o.width/2,n=this.tooltipWidth/2,h=0;let l,p,g;t.height+h>i?(l=o.bottom+this.tooltipGap+this.tooltipArrowHeight,this.style.setProperty("--border-bottom-color","#121212"),p=o.bottom-this.tooltipArrowHeight+this.tooltipGap):(l=o.bottom-t.height-o.height-this.tooltipGap-this.tooltipArrowHeight,this.style.setProperty("--border-top-color","#121212"),p=o.bottom-o.height-this.tooltipGap-this.tooltipArrowHeight),console.log(o.bottom,l,p),this.style.marginTop=`calc(${l}px )`,this.style.setProperty("--arrow-top-positioning",`${p}px`);const d=o.right-s;g=r-o.right+s<n+h?e.right-this.tooltipWidth:o.right-s<n+h?e.right-e.width:o.right-n-s,this.style.marginLeft=g+"px",this.style.setProperty("--arrow-left-positioning",`${d}px`)}}getElementPosition(t){return null==t?void 0:t.getBoundingClientRect()}}customElements.define("tp-tooltip",t),customElements.define("tp-tooltip-trigger",o),customElements.define("tp-tooltip-popover",e)})();
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dist/tooltip/index.js","mappings":"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","sources":["webpack://@travelopia/web-components/./src/tooltip/tp-tooltip.ts","webpack://@travelopia/web-components/./src/tooltip/tp-tooltip-trigger.ts","webpack://@travelopia/web-components/./src/tooltip/tp-tooltip-popover.ts","webpack://@travelopia/web-components/./src/tooltip/index.ts"],"sourcesContent":["import { TPTooltipPopoverElement } from \"./tp-tooltip-popover\";\nimport { TPTooltipTriggerElement } from \"./tp-tooltip-trigger\";\n\n/**\n * TP Tooltip Popover.\n */\nexport class TPTooltipElement extends HTMLElement {\n\t/**\n\t * Properties.\n\t */\n\tprotected uniqueId: string = crypto.randomUUID();\n\tprotected target: TPTooltipPopoverElement | null;\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\t\tthis.target = this.querySelector( ':scope > tp-tooltip-popover' );\n\n\t\tthis.appendTriggerButton();\n\t\tthis.setPopoverTarget();\n\t}\n\n\t/**\n\t * Append a button to the trigger element. This button will be the actual target of mouse events.\n\t * Because popover API only work with Button element as a trigger point.\n\t * We move the slotted content into the button and add listeners to show/hide the tooltip.\n\t * If no trigger element is found, log an error and do nothing.\n\t */\n\n\tappendTriggerButton() {\n\t\tconst trigger: TPTooltipTriggerElement | null = this.querySelector( 'tp-tooltip-trigger' );\n\n\t\tif ( ! trigger ) {\n\t\t\tconsole.error( 'tp-tooltip-trigger not found' );\n\t\t\treturn;\n\t\t}\n\t\t// Move slotted content into the button\n\t\tconst button = document.createElement( 'button' );\n\t\tif ( trigger?.firstElementChild ) {\n\t\t\tbutton?.appendChild(trigger.firstElementChild);\n\t\t}\n\n\t\tbutton.setAttribute( 'popovertarget', this.uniqueId );\n\n\t\tbutton.addEventListener( 'mouseover', () => {\n\t\t\tthis.target?.showTooltip();\n\t\t});\n\t\tbutton.addEventListener( 'mouseleave', () => {\n\t\t\tthis.target?.hideTooltip();\n\t\t});\n\n\t\ttrigger?.appendChild( button );\n\t}\n\n\t/**\n\t * Set the popover target and unique id of the tp-tooltip-popover element.\n\t * The popover target is set to \"auto\" and the id is set to the uniqueId property.\n\t * If no target element is found, log an error and do nothing.\n\t */\n\tsetPopoverTarget() {\n\t\tif( ! this.target ) {\n\t\t\tconsole.error( 'tp-tooltip-popover not found' );\n\t\t\treturn;\n\t\t}\n\t\tthis.target.setAttribute( 'popover', \"auto\" );\n\t\tthis.target.setAttribute( 'id', this.uniqueId );\n\t}\n}\n","/**\n * TP Tooltip Trigger.\n */\nexport class TPTooltipTriggerElement extends HTMLElement {\n}","import { TPTooltipElement } from \"./tp-tooltip\";\n\n/**\n * TP Tooltip Popover.\n */\nexport class TPTooltipPopoverElement extends HTMLElement {\n\t/**\n\t * Properties.\n\t */\n\tprotected trigger: TPTooltipElement | null;\n\tprotected tooltipWidth: number;\n\tprotected tooltipArrowHeight: number;\n\tprotected tooltipGap: number;\n\n\tconstructor() {\n\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\tthis.trigger = this.closest( 'tp-tooltip' );\n\t\tthis.tooltipWidth = parseInt(this.style.width) || 0;\n\t\tthis.tooltipArrowHeight = parseInt(this.getAttribute( 'arrow-height' ) || '8');\n\t\tthis.tooltipGap = parseInt(this.getAttribute( 'gap' ) || '10');\n\t}\n\n\tshowTooltip() {\n\t\tthis.showPopover();\n\t\tthis.positionTooltip();\n\t}\n\n\thideTooltip() {\n\t\tthis.hidePopover();\n\t\tthis.style.setProperty( '--arrow-top-positioning', null );\n\t\tthis.style.setProperty( '--arrow-left-positioning', null );\n\t}\n\n\t/**\n\t * Position tooltip according to the position of the trigger element.\n\t * Position is calculated based on the following rules:\n\t * 1. If there is enough space above the trigger element, tooltip will be placed below the trigger element else it will be above.\n\t * 2. If there is enough space to the right of the trigger element tooltip will be aligned with the parent container of tp-tooltip element\n\t * the tooltip will be placed to the left of the trigger element.\n\t * 3. Similarly if there is not enough space on right of the trigger element.\n\t */\n\tpositionTooltip() {\n\t\t// Early return if button not found.\n\t\tif( !this.trigger ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Getting positions of elements of interest.\n\t\t// Getting position for tooltip popover.\n\t\tconst tooltipPopoverPosition = this.getElementPosition( this );\n\t\tconsole.log(tooltipPopoverPosition);\n\n\t\t// Getting position for tooltip trigger button.\n\t\tconst tooltipTriggerPosition = this.getElementPosition( this.trigger );\n\n\t\t// Getting position for tooltip parent element.\n\t\t// It will be used to position tooltip when there is not enough space to the right and left.\n\t\tconst parentPosition = this.getElementPosition( this.trigger.parentNode as Element );\n\n\t\tif( tooltipPopoverPosition && tooltipTriggerPosition && parentPosition) {\n\t\t\tconst distanceFromTopWall = (tooltipTriggerPosition.bottom - tooltipTriggerPosition.height);\n\n\t\t\t// Getting viewport width.\n\t\t\tconst viewportWidth = Math.max( document.documentElement.clientWidth || 0, window.innerWidth || 0 );\n\n\t\t\tconst tooltipTriggerHalfWidth = tooltipTriggerPosition.width / 2;\n\t\t\tconst tooltipPopupHalfWidth = this.tooltipWidth / 2;\n\t\t\tconst marginFromWalls = 0;\n\n\t\t\t// Setting tooltip text and arrow position in Y direction\n\t\t\tlet textMarginTop;\n\t\t\tlet arrowTopPosition;\n\n\t\t\tif( tooltipPopoverPosition.height + marginFromWalls > distanceFromTopWall ) {\n\t\t\t\ttextMarginTop = tooltipTriggerPosition.bottom + this.tooltipGap + this.tooltipArrowHeight;\n\t\t\t\tthis.style.setProperty( '--border-bottom-color', \"#121212\" );\n\t\t\t\tarrowTopPosition = tooltipTriggerPosition.bottom - this.tooltipArrowHeight + this.tooltipGap;\n\t\t\t} else {\n\t\t\t\ttextMarginTop = tooltipTriggerPosition.bottom - tooltipPopoverPosition.height - tooltipTriggerPosition.height - this.tooltipGap - this.tooltipArrowHeight;\n\t\t\t\tthis.style.setProperty( '--border-top-color', \"#121212\" );\n\t\t\t\tarrowTopPosition = tooltipTriggerPosition.bottom - tooltipTriggerPosition.height - this.tooltipGap - this.tooltipArrowHeight;\n\t\t\t}\n\t\t\tconsole.log(tooltipTriggerPosition.bottom, textMarginTop, arrowTopPosition);\n\n\t\t\tthis.style.marginTop = `calc(${ textMarginTop }px )`;\n\t\t\tthis.style.setProperty( '--arrow-top-positioning', `${ arrowTopPosition }px` );\n\n\n\t\t\t// Position tooltip in X direction.\n\t\t\tlet textMarginLeft;\n\t\t\tconst arrowLeftPosition = tooltipTriggerPosition.right - tooltipTriggerHalfWidth;\n\n\t\t\tif ( viewportWidth - tooltipTriggerPosition.right + tooltipTriggerHalfWidth < tooltipPopupHalfWidth + marginFromWalls ) {\n\t\t\t\t// Position of tooltip if there is not enough space to the right.\n\t\t\t\ttextMarginLeft = parentPosition.right - this.tooltipWidth;\n\t\t\t} else if ( tooltipTriggerPosition.right - tooltipTriggerHalfWidth < tooltipPopupHalfWidth + marginFromWalls ) {\n\t\t\t\t// Position of tooltip if there is not enough space to the left.\n\t\t\t\ttextMarginLeft = parentPosition.right - parentPosition.width;\n\t\t\t} else {\n\t\t\t\ttextMarginLeft = tooltipTriggerPosition.right - tooltipPopupHalfWidth - tooltipTriggerHalfWidth;\n\t\t\t}\n\n\t\t\t// Setting location of the tooltip text.\n\t\t\tthis.style.marginLeft = textMarginLeft + 'px';\n\t\t\tthis.style.setProperty( '--arrow-left-positioning', `${ arrowLeftPosition }px` );\n\t\t}\n\t}\n\n\t/**\n\t * Gets the position of a given element in the viewport.\n\t */\n\tgetElementPosition( element : Element | null ) {\n\t\tconst elementRect = element?.getBoundingClientRect();\n\t\treturn elementRect;\n\t}\n}\n","/**\n * Styles.\n */\nimport './style.scss';\n\n/**\n * Components.\n */\nimport { TPTooltipElement } from './tp-tooltip';\nimport { TPTooltipTriggerElement } from './tp-tooltip-trigger';\nimport { TPTooltipPopoverElement } from './tp-tooltip-popover';\n\n\n/**\n * Register Components.\n */\n\ncustomElements.define( 'tp-tooltip', TPTooltipElement );\ncustomElements.define( 'tp-tooltip-trigger', TPTooltipTriggerElement );\ncustomElements.define( 'tp-tooltip-popover', TPTooltipPopoverElement );"],"names":["TPTooltipElement","HTMLElement","constructor","super","uniqueId","crypto","randomUUID","this","target","querySelector","appendTriggerButton","setPopoverTarget","trigger","console","error","button","document","createElement","firstElementChild","appendChild","setAttribute","addEventListener","showTooltip","hideTooltip","TPTooltipTriggerElement","TPTooltipPopoverElement","closest","tooltipWidth","parseInt","style","width","tooltipArrowHeight","getAttribute","tooltipGap","showPopover","positionTooltip","hidePopover","setProperty","tooltipPopoverPosition","getElementPosition","log","tooltipTriggerPosition","parentPosition","parentNode","distanceFromTopWall","bottom","height","viewportWidth","Math","max","documentElement","clientWidth","window","innerWidth","tooltipTriggerHalfWidth","tooltipPopupHalfWidth","marginFromWalls","textMarginTop","arrowTopPosition","textMarginLeft","marginTop","arrowLeftPosition","right","marginLeft","element","getBoundingClientRect","customElements","define"],"sourceRoot":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
tp-tooltip-trigger>button{background-color:rgba(0,0,0,0);border:none;outline:none;cursor:pointer;padding:0}tp-tooltip-popover{--arrow-top-positioning: 0;--arrow-left-positioning: 0;--border-top-color: transparent;--border-bottom-color: transparent;background-color:#fff}tp-tooltip-popover::backdrop{width:0;height:0;border-width:8px;border-style:solid;border-top-color:var(--border-top-color);border-bottom-color:var(--border-bottom-color);border-left-color:rgba(0,0,0,0);border-right-color:rgba(0,0,0,0);top:var(--arrow-top-positioning);left:var(--arrow-left-positioning);transform:translateX(-50%)}
|