Skip to content

Commit 34e3854

Browse files
junaidbhurajunaidbhura
authored
Merge pull request #108 from Travelopia/feature/WP-183-dynamic-navigation-tp-slider-using-template
Dynamic navigation for TP slider using template
2 parents cbb5d4f + fe118d5 commit 34e3854

File tree

4 files changed

+69
-7
lines changed

4 files changed

+69
-7
lines changed

‎src/slider/index.html‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
<body>
3434
<main>
3535
<!--Slider that slides horizontally with responsive settings.-->
36-
<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}]'>
36+
<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}]'>
3737
<tp-slider-arrow direction="previous"><button>&laquo; Previous</button></tp-slider-arrow>
3838
<tp-slider-arrow direction="next"><button>Next &raquo;</button></tp-slider-arrow>
3939
<tp-slider-track>
@@ -51,10 +51,11 @@
5151
</tp-slider-slides>
5252
</tp-slider-track>
5353
<tp-slider-nav>
54-
<tp-slider-nav-item><button>1</button></tp-slider-nav-item>
55-
<tp-slider-nav-item><button>2</button></tp-slider-nav-item>
56-
<tp-slider-nav-item><button>3</button></tp-slider-nav-item>
57-
<tp-slider-nav-item><button>4</button></tp-slider-nav-item>
54+
<template>
55+
<tp-slider-nav-item>
56+
<button>$index</button>
57+
</tp-slider-nav-item>
58+
</template>
5859
</tp-slider-nav>
5960
<tp-slider-count current="1" total="4" format="$current / $total">1 / 4</tp-slider-count>
6061
</tp-slider>

‎src/slider/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,11 @@ import { TPSliderCountElement } from './tp-slider-count';
1818
/**
1919
* Register Components.
2020
*/
21+
customElements.define( 'tp-slider-nav', TPSliderNavElement );
2122
customElements.define( 'tp-slider', TPSliderElement );
2223
customElements.define( 'tp-slider-count', TPSliderCountElement );
2324
customElements.define( 'tp-slider-track', TPSliderTrackElement );
2425
customElements.define( 'tp-slider-slides', TPSliderSlidesElement );
2526
customElements.define( 'tp-slider-slide', TPSliderSlideElement );
2627
customElements.define( 'tp-slider-arrow', TPSliderArrowElement );
27-
customElements.define( 'tp-slider-nav', TPSliderNavElement );
2828
customElements.define( 'tp-slider-nav-item', TPSliderNavItemElement );

‎src/slider/tp-slider-nav.ts‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,59 @@
1+
/**
2+
* Internal dependencies.
3+
*/
4+
import { TPSliderElement } from './tp-slider';
5+
16
/**
27
* TP Slider Nav.
38
*/
49
export class TPSliderNavElement extends HTMLElement {
10+
/**
11+
* Properties.
12+
*/
13+
protected template: HTMLTemplateElement | null = null;
14+
protected slider: TPSliderElement | null = null;
15+
16+
/**
17+
* Constructor.
18+
*/
19+
constructor() {
20+
// Initialize parent.
21+
super();
22+
23+
// Get elements.
24+
this.template = this.querySelector( 'template' );
25+
this.slider = this.closest( 'tp-slider' );
26+
}
27+
28+
/**
29+
* Update nav items based on template.
30+
*/
31+
public updateNavItems(): void {
32+
// Bail if no template.
33+
if ( ! this.template || ! this.slider ) {
34+
// Exit.
35+
return;
36+
}
37+
38+
// Total slides.
39+
const step = Number( this.slider?.getAttribute( 'step' ) ? Number( this.slider?.getAttribute( 'per-view' ) ?? '1' ) : 1 );
40+
const totalSlides = Number( this.slider?.getAttribute( 'total' ) ?? 0 );
41+
42+
// Calculate the number of navigation items.
43+
const totalNavItems = Math.ceil( totalSlides / step );
44+
45+
// Clear the navigation.
46+
this.innerHTML = '';
47+
48+
// Append the navigation items.
49+
for ( let i = 1; i <= totalNavItems; i++ ) {
50+
// Clone the template.
51+
const navItem: Node = this.template.content.cloneNode( true );
52+
const div: HTMLDivElement = document.createElement( 'div' );
53+
div.appendChild( navItem );
54+
55+
// Append the navigation item.
56+
this.innerHTML += div.innerHTML.replace( '$index', i.toString() );
57+
}
58+
}
559
}

‎src/slider/tp-slider.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
import { TPSliderSlidesElement } from './tp-slider-slides';
55
import { TPSliderSlideElement } from './tp-slider-slide';
66
import { TPSliderCountElement } from './tp-slider-count';
7+
import { TPSliderNavElement } from './tp-slider-nav';
78
import { TPSliderNavItemElement } from './tp-slider-nav-item';
89
import { TPSliderArrowElement } from './tp-slider-arrow';
910

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

391+
// First, set the template for the slider nav.
392+
sliderNav?.updateNavItems();
393+
394+
// Once the template has been set, query the slider nav items.
395+
const sliderNavItems: NodeListOf<TPSliderNavItemElement> | null = this.querySelectorAll( 'tp-slider-nav-item' );
396+
390397
// Set current slider nav item.
391398
if ( sliderNavItems ) {
392399
sliderNavItems.forEach( ( navItem: TPSliderNavItemElement, index: number ): void => {

0 commit comments

Comments
 (0)