Skip to content

Dynamic navigation for TP slider using template #108

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Apr 2, 2025
Merged

Dynamic navigation for TP slider using template #108

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
cb669a4
Fix navigation issue
monikatravelopia Mar 21, 2025
84b3284
WP-183 Dynamic navigation for TP slider using template
monikatravelopia Mar 28, 2025
f9d9b91
Revert navigation fix
monikatravelopia Mar 28, 2025
9913766
WP-183 Add nav based on step
monikatravelopia Apr 1, 2025
9bd7afb
WP-183 Remove multiple spaces
monikatravelopia Apr 1, 2025
2055ef0
WP-183 update dynamic nav items
junaid-travelopia Apr 2, 2025
10af0e4
WP-183 update index file
junaid-travelopia Apr 2, 2025
fe118d5
WP-183 update index file
junaid-travelopia Apr 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions src/slider/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
<body>
<main>
<!--Slider that slides horizontally with responsive settings.-->
<tp-slider swipe-threshold="210" flexible-height="yes" infinite="yes" swipe="yes" responsive='[{"media":"(min-width: 600px)","flexible-height":"yes","infinite":"no","swipe":"yes","auto-slide-interval":2000,"per-view":1,"step":2},{"media":"(min-width: 300px)","flexible-height":"yes","infinite":"no","swipe":"yes","behaviour":"fade","auto-slide-interval":2000,"per-view":1,"step":1}]'>
<tp-slider swipe-threshold="210" flexible-height="yes" infinite="yes" swipe="yes" responsive='[{"media":"(min-width: 600px)","flexible-height":"yes","infinite":"no","swipe":"yes","auto-slide-interval":2000,"per-view":2,"step":2},{"media":"(min-width: 300px)","flexible-height":"yes","infinite":"no","swipe":"yes","behaviour":"fade","auto-slide-interval":2000,"per-view":1,"step":1}]'>
<tp-slider-arrow direction="previous"><button>&laquo; Previous</button></tp-slider-arrow>
<tp-slider-arrow direction="next"><button>Next &raquo;</button></tp-slider-arrow>
<tp-slider-track>
Expand All @@ -51,10 +51,11 @@
</tp-slider-slides>
</tp-slider-track>
<tp-slider-nav>
<tp-slider-nav-item><button>1</button></tp-slider-nav-item>
<tp-slider-nav-item><button>2</button></tp-slider-nav-item>
<tp-slider-nav-item><button>3</button></tp-slider-nav-item>
<tp-slider-nav-item><button>4</button></tp-slider-nav-item>
<template>
<tp-slider-nav-item>
<button>$index</button>
</tp-slider-nav-item>
</template>
</tp-slider-nav>
<tp-slider-count current="1" total="4" format="$current / $total">1 / 4</tp-slider-count>
</tp-slider>
Expand Down
2 changes: 1 addition & 1 deletion src/slider/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,11 @@ import { TPSliderCountElement } from './tp-slider-count';
/**
* Register Components.
*/
customElements.define( 'tp-slider-nav', TPSliderNavElement );
customElements.define( 'tp-slider', TPSliderElement );
customElements.define( 'tp-slider-count', TPSliderCountElement );
customElements.define( 'tp-slider-track', TPSliderTrackElement );
customElements.define( 'tp-slider-slides', TPSliderSlidesElement );
customElements.define( 'tp-slider-slide', TPSliderSlideElement );
customElements.define( 'tp-slider-arrow', TPSliderArrowElement );
customElements.define( 'tp-slider-nav', TPSliderNavElement );
customElements.define( 'tp-slider-nav-item', TPSliderNavItemElement );
54 changes: 54 additions & 0 deletions src/slider/tp-slider-nav.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,59 @@
/**
* Internal dependencies.
*/
import { TPSliderElement } from './tp-slider';

/**
* TP Slider Nav.
*/
export class TPSliderNavElement extends HTMLElement {
/**
* Properties.
*/
protected template: HTMLTemplateElement | null = null;
protected slider: TPSliderElement | null = null;

/**
* Constructor.
*/
constructor() {
// Initialize parent.
super();

// Get elements.
this.template = this.querySelector( 'template' );
this.slider = this.closest( 'tp-slider' );
}

/**
* Update nav items based on template.
*/
public updateNavItems(): void {
// Bail if no template.
if ( ! this.template || ! this.slider ) {
// Exit.
return;
}

// Total slides.
const step = Number( this.slider?.getAttribute( 'step' ) ? Number( this.slider?.getAttribute( 'per-view' ) ?? '1' ) : 1 );
const totalSlides = Number( this.slider?.getAttribute( 'total' ) ?? 0 );

// Calculate the number of navigation items.
const totalNavItems = Math.ceil( totalSlides / step );

// Clear the navigation.
this.innerHTML = '';

// Append the navigation items.
for ( let i = 1; i <= totalNavItems; i++ ) {
// Clone the template.
const navItem: Node = this.template.content.cloneNode( true );
const div: HTMLDivElement = document.createElement( 'div' );
div.appendChild( navItem );

// Append the navigation item.
this.innerHTML += div.innerHTML.replace( '$index', i.toString() );
}
}
}
9 changes: 8 additions & 1 deletion src/slider/tp-slider.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
import { TPSliderSlidesElement } from './tp-slider-slides';
import { TPSliderSlideElement } from './tp-slider-slide';
import { TPSliderCountElement } from './tp-slider-count';
import { TPSliderNavElement } from './tp-slider-nav';
import { TPSliderNavItemElement } from './tp-slider-nav-item';
import { TPSliderArrowElement } from './tp-slider-arrow';

Expand Down Expand Up @@ -367,7 +368,7 @@ export class TPSliderElement extends HTMLElement {
*/
update(): void {
// Get sub-components.
const sliderNavItems: NodeListOf<TPSliderNavItemElement> | null = this.querySelectorAll( 'tp-slider-nav-item' );
const sliderNav: TPSliderNavElement | null = this.querySelector( 'tp-slider-nav' );
const sliderCounts: NodeListOf<TPSliderCountElement> | null = this.querySelectorAll( 'tp-slider-count' );
const leftArrow: TPSliderArrowElement | null = this.getArrow( 'tp-slider-arrow[direction="previous"]' );
const rightArrow: TPSliderArrowElement | null = this.getArrow( 'tp-slider-arrow[direction="next"]' );
Expand All @@ -387,6 +388,12 @@ export class TPSliderElement extends HTMLElement {
} );
}

// First, set the template for the slider nav.
sliderNav?.updateNavItems();

// Once the template has been set, query the slider nav items.
const sliderNavItems: NodeListOf<TPSliderNavItemElement> | null = this.querySelectorAll( 'tp-slider-nav-item' );

// Set current slider nav item.
if ( sliderNavItems ) {
sliderNavItems.forEach( ( navItem: TPSliderNavItemElement, index: number ): void => {
Expand Down