@travelopia/web-components 0.7.3 → 0.7.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/declarations.d.ts
CHANGED
|
@@ -270,6 +270,40 @@ export class TPLightboxCountElement extends HTMLElement {
|
|
|
270
270
|
update(): void;
|
|
271
271
|
}
|
|
272
272
|
|
|
273
|
+
/**
|
|
274
|
+
* Internal dependencies.
|
|
275
|
+
*/
|
|
276
|
+
import { TPLightboxElement } from './tp-lightbox';
|
|
277
|
+
/**
|
|
278
|
+
* TP Lightbox Nav Item.
|
|
279
|
+
*/
|
|
280
|
+
export class TPLightboxNavItemElement extends HTMLElement {
|
|
281
|
+
/**
|
|
282
|
+
* Properties.
|
|
283
|
+
*/
|
|
284
|
+
protected lightbox: TPLightboxElement | null;
|
|
285
|
+
/**
|
|
286
|
+
* Constructor.
|
|
287
|
+
*/
|
|
288
|
+
constructor();
|
|
289
|
+
/**
|
|
290
|
+
* Handle when the button is clicked.
|
|
291
|
+
*/
|
|
292
|
+
handleClick(): void;
|
|
293
|
+
/**
|
|
294
|
+
* Get index of this item inside the navigation.
|
|
295
|
+
*
|
|
296
|
+
* @return {number} Index.
|
|
297
|
+
*/
|
|
298
|
+
getIndex(): number;
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
/**
|
|
302
|
+
* TP Lightbox Nav.
|
|
303
|
+
*/
|
|
304
|
+
export class TPLightboxNavElement extends HTMLElement {
|
|
305
|
+
}
|
|
306
|
+
|
|
273
307
|
/**
|
|
274
308
|
* TP Lightbox Close.
|
|
275
309
|
*/
|
|
@@ -313,6 +347,7 @@ export class TPLightboxTriggerElement extends HTMLElement {
|
|
|
313
347
|
}
|
|
314
348
|
|
|
315
349
|
import { TPLightboxTriggerElement } from './tp-lightbox-trigger';
|
|
350
|
+
import { TPLightboxNavItemElement } from './tp-lightbox-nav-item';
|
|
316
351
|
/**
|
|
317
352
|
* TP Lightbox.
|
|
318
353
|
*/
|
|
@@ -327,6 +362,7 @@ export class TPLightboxElement extends HTMLElement {
|
|
|
327
362
|
protected touchStartY: number;
|
|
328
363
|
protected swipeThreshold: number;
|
|
329
364
|
protected dialogElement: HTMLDialogElement | null;
|
|
365
|
+
protected lightboxNavItems: NodeListOf<TPLightboxNavItemElement> | null;
|
|
330
366
|
/**
|
|
331
367
|
* Constructor.
|
|
332
368
|
*/
|
|
@@ -431,6 +467,10 @@ export class TPLightboxElement extends HTMLElement {
|
|
|
431
467
|
* @param { TouchEvent } evt The touch event.
|
|
432
468
|
*/
|
|
433
469
|
handleTouchEnd(evt: TouchEvent): void;
|
|
470
|
+
/**
|
|
471
|
+
* Update current item in navigation.
|
|
472
|
+
*/
|
|
473
|
+
updateNavCurrentItem(): void;
|
|
434
474
|
}
|
|
435
475
|
|
|
436
476
|
/**
|
package/dist/lightbox/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(()=>{"use strict";class t extends HTMLElement{constructor(){var t,e,
|
|
1
|
+
(()=>{"use strict";class t extends HTMLElement{constructor(){var t,e,i;super(),this.currentTemplate=null,this.currentGroup="",this.allGroups=null,this.touchStartX=0,this.touchStartY=0,this.swipeThreshold=200,this.dialogElement=this.querySelector("dialog"),this.lightboxNavItems=this.querySelectorAll("tp-lightbox-nav-item"),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===(i=this.dialogElement)||void 0===i||i.addEventListener("touchend",this.handleTouchEnd.bind(this))}static get observedAttributes(){return["open","index","total","close-on-overlay-click","loading"]}attributeChangedCallback(t="",e="",i=""){e!==i&&(this.dispatchEvent(new CustomEvent("change")),"index"===t&&this.triggerCurrentIndexTarget(),"open"!==t&&"index"!==t||this.updateNavCurrentItem())}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()),this.dispatchEvent(new CustomEvent("slide-set",{detail:{slideIndex:t}}))}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"),i=this.querySelector("tp-lightbox-next");if(!e&&!i)return;if(""===this.group)return null==e||e.setAttribute("disabled","yes"),void(null==i||i.setAttribute("disabled","yes"));const s=this.getAllGroups();if(!s)return null==e||e.setAttribute("disabled","yes"),void(null==i||i.setAttribute("disabled","yes"));this.currentIndex<=1?null==e||e.setAttribute("disabled","yes"):null==e||e.removeAttribute("disabled"),this.currentIndex<s.length?null==i||i.removeAttribute("disabled"):null==i||i.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 i=0;const s=e.length,r=()=>{i++,i===s&&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 i=t.changedTouches[0].clientX,s=t.changedTouches[0].clientY,r=i-this.touchStartX,n=s-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())}updateNavCurrentItem(){this.lightboxNavItems&&this.lightboxNavItems.forEach(((t,e)=>{this.currentIndex-1===e?t.setAttribute("current","yes"):t.removeAttribute("current")}))}}class e extends HTMLElement{}class i 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 s 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 i=e.currentIndex.toString(),s=null!==(t=e.getAttribute("total"))&&void 0!==t?t:"";this.innerHTML=this.format.replace("$current",i).replace("$total",s),this.setAttribute("current",i),this.setAttribute("total",s)}}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"),i=this.querySelector("template");if(!e||!i)return;const s=document.querySelector(`#${e.toString()}`);if(!s)return;const r=null!==(t=this.getAttribute("group"))&&void 0!==t?t:"";setTimeout((()=>{if(s.template=i,s.group=r,""!==r){const t=document.querySelectorAll(`tp-lightbox-trigger[group="${r}"]`);t.length&&(s.updateAllGroups(t),t.forEach(((t,e)=>{this===t&&(s.currentIndex=e+1)})))}s.open()}),0)}}class o extends HTMLElement{}class u extends HTMLElement{constructor(){var t;super(),this.lightbox=this.closest("tp-lightbox"),null===(t=this.querySelector("button"))||void 0===t||t.addEventListener("click",this.handleClick.bind(this))}handleClick(){var t;this.lightbox&&(this.lightbox.currentIndex=null!==(t=Number(this.getIndex()))&&void 0!==t?t:1,this.lightbox.updateNavCurrentItem())}getIndex(){var t;if(!this.lightbox)return 0;const e=this.closest("tp-lightbox-nav");return Array.from(null!==(t=null==e?void 0:e.children)&&void 0!==t?t:[]).indexOf(this)+1}}customElements.define("tp-lightbox",t),customElements.define("tp-lightbox-content",e),customElements.define("tp-lightbox-close",i),customElements.define("tp-lightbox-previous",s),customElements.define("tp-lightbox-next",r),customElements.define("tp-lightbox-count",n),customElements.define("tp-lightbox-trigger",l),customElements.define("tp-lightbox-nav",o),customElements.define("tp-lightbox-nav-item",u)})();
|
|
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\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":""}
|
|
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/tp-lightbox-nav.ts","webpack://@travelopia/web-components/./src/lightbox/tp-lightbox-nav-item.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';\nimport { TPLightboxNavItemElement } from './tp-lightbox-nav-item';\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\tprotected lightboxNavItems: NodeListOf<TPLightboxNavItemElement> | 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\t\tthis.lightboxNavItems = this.querySelectorAll( 'tp-lightbox-nav-item' );\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\n\t\t// Trigger navigation update if open or index has changed.\n\t\tif ( 'open' === name || 'index' === name ) {\n\t\t\tthis.updateNavCurrentItem();\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\n\t\t// dispatch slide-set event.\n\t\tthis.dispatchEvent( new CustomEvent( 'slide-set', {\n\t\t\tdetail: {\n\t\t\t\tslideIndex: index,\n\t\t\t},\n\t\t} ) );\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\t/**\n\t * Update current item in navigation.\n\t */\n\tupdateNavCurrentItem(): void {\n\t\t// Bail if we don't have nav items.\n\t\tif ( ! this.lightboxNavItems ) {\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Update current item.\n\t\tthis.lightboxNavItems.forEach( ( navItem: TPLightboxNavItemElement, index: number ): void => {\n\t\t\t// Update current attribute.\n\t\t\tif ( this.currentIndex - 1 === index ) {\n\t\t\t\tnavItem.setAttribute( 'current', 'yes' );\n\t\t\t} else {\n\t\t\t\tnavItem.removeAttribute( 'current' );\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 * TP Lightbox Nav.\n */\nexport class TPLightboxNavElement extends HTMLElement {\n}\n","/**\n * Internal dependencies.\n */\nimport { TPLightboxElement } from './tp-lightbox';\nimport { TPLightboxNavElement } from './tp-lightbox-nav';\n\n/**\n * TP Lightbox Nav Item.\n */\nexport class TPLightboxNavItemElement extends HTMLElement {\n\t/**\n\t * Properties.\n\t */\n\tprotected lightbox : TPLightboxElement | null;\n\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\t\tthis.lightbox = this.closest( 'tp-lightbox' );\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 lightbox exists.\n\t\tif ( ! this.lightbox ) {\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.lightbox.currentIndex = Number( this.getIndex() ) ?? 1;\n\n\t\t// Update navigation current item.\n\t\tthis.lightbox.updateNavCurrentItem();\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// Bail if no lightbox.\n\t\tif ( ! this.lightbox ) {\n\t\t\t// Exit.\n\t\t\treturn 0;\n\t\t}\n\n\t\t// No, find it in the navigation.\n\t\tconst lightboxNav: TPLightboxNavElement | null = this.closest( 'tp-lightbox-nav' );\n\n\t\t// Return index of this element considering the step value.\n\t\treturn ( Array.from( lightboxNav?.children ?? [] ).indexOf( this ) ) + 1;\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';\nimport { TPLightboxNavElement } from './tp-lightbox-nav';\nimport { TPLightboxNavItemElement } from './tp-lightbox-nav-item';\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 );\ncustomElements.define( 'tp-lightbox-nav', TPLightboxNavElement );\ncustomElements.define( 'tp-lightbox-nav-item', TPLightboxNavItemElement );\n"],"names":["TPLightboxElement","HTMLElement","constructor","super","currentTemplate","currentGroup","allGroups","touchStartX","touchStartY","swipeThreshold","this","dialogElement","querySelector","lightboxNavItems","querySelectorAll","addEventListener","handleDialogClick","bind","handleTouchStart","handleTouchEnd","observedAttributes","attributeChangedCallback","name","oldValue","newValue","dispatchEvent","CustomEvent","triggerCurrentIndexTarget","updateNavCurrentItem","template","content","templateContent","cloneNode","replaceChildren","setTimeout","prepareImageLoading","prepareNavigation","innerHTML","group","currentIndex","parseInt","getAttribute","index","setAttribute","toString","detail","slideIndex","getAllGroups","trigger","open","dialog","updateAllGroups","showModal","close","removeAttribute","previous","next","length","document","count","update","images","counter","totalImages","incrementLoadingCounter","forEach","image","complete","once","e","target","evt","touches","clientX","clientY","touchEndX","changedTouches","touchEndY","swipeDistanceX","swipeDistanceY","Math","abs","Number","navItem","TPLightboxContentElement","TPLightboxCloseElement","lightbox","closest","TPLightboxPreviousElement","TPLightboxNextElement","TPLightboxCountElement","format","current","total","replace","TPLightboxTriggerElement","lightboxId","triggerElement","TPLightboxNavElement","TPLightboxNavItemElement","handleClick","getIndex","lightboxNav","Array","from","children","indexOf","customElements","define"],"sourceRoot":""}
|