Skip to content

Commit

Permalink
simplify webui-carousel config
Browse files Browse the repository at this point in the history
  • Loading branch information
basher committed Apr 24, 2024
1 parent 53fef6b commit e56f5a5
Show file tree
Hide file tree
Showing 6 changed files with 22 additions and 54 deletions.
4 changes: 2 additions & 2 deletions ui/npm-shrinkwrap.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "web-ui-boilerplate",
"description": "UI boilerplate for websites/webapps using vanilla HTML/CSS/JavaScript, powered by Storybook, bundled by Parcel.",
"author": "basher",
"version": "3.1.5",
"version": "3.1.6",
"license": "ISC",
"repository": {
"type": "git",
Expand Down
56 changes: 12 additions & 44 deletions ui/src/javascript/web-components/webui-carousel.ts
Original file line number Diff line number Diff line change
@@ -1,70 +1,47 @@
type CarouselConfig = {
showSlideCount: boolean;
showSlideCountPips: boolean;
showPrevNextButtons: boolean;
};

export default class WebUICarousel extends HTMLElement {
private carousel: HTMLUListElement | null;
private slides: NodeListOf<HTMLElement>;
private hasPrevNextButtons?: boolean;
private hasSlideCount?: boolean;
private hasSlideCountPips?: boolean;
private visibleSlideClass: string;
private currentSlideClass: string;
private currentPipClass: string;

private config: CarouselConfig = {
showSlideCount: false,
showSlideCountPips: false,
showPrevNextButtons: false,
};

constructor() {
super();

this.carousel = this.querySelector('.carousel');
this.slides = this.querySelectorAll('.carousel__slide');
this.hasPrevNextButtons = this.hasAttribute('data-prev-next-buttons');
this.hasSlideCount = this.hasAttribute('data-slide-count');
this.hasSlideCountPips = this.hasAttribute('data-slide-count-pips');

this.visibleSlideClass = 'is-visible';
this.currentSlideClass = 'is-current';
this.currentPipClass = 'is-current';

if (!this.carousel || this.slides.length === 0) return;

this.initConfiguration();
this.init();
}

private initConfiguration(): void {
// HTML 'data-' attribute flags.
const flags = {
showSlideCount: 'data-slide-count',
showSlideCountPips: 'data-slide-count-pips',
showPrevNextButtons: 'data-prev-next-buttons',
};

for (const prop in flags) {
if (Object.prototype.hasOwnProperty.call(flags, prop)) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
this.config[prop] = this.getBoolAttribute(flags[prop]);
}
}
}

private init(): void {
this.setupA11y();
this.setVisibleSlide();

// Show slide counter (text).
if (this.config.showSlideCount) {
if (this.hasSlideCount) {
this.showSlideCount();
}

// Show slide counter (coins/pips).
if (this.config.showSlideCountPips) {
if (this.hasSlideCountPips) {
this.showSlideCountPips();
}

// Show PREV/NEXT buttons.
if (this.config.showPrevNextButtons) {
if (this.hasPrevNextButtons) {
this.showPrevNextButtons();
}

Expand Down Expand Up @@ -103,7 +80,7 @@ export default class WebUICarousel extends HTMLElement {
entry.target.classList.remove(this.visibleSlideClass);

// When using PREV/NEXT buttons, make clickable elements inside non-visible slides non-focusable. This enables keyboard :FOCUS via TAB key to the "current" slide.
if (this.config.showPrevNextButtons) {
if (this.hasPrevNextButtons) {
focusableItems.forEach((focusableItem) => {
focusableItem.setAttribute('tabIndex', '-1');
});
Expand All @@ -113,7 +90,7 @@ export default class WebUICarousel extends HTMLElement {
entry.target.classList.add(this.visibleSlideClass);

// Reinstate focusability when slides are visible.
if (this.config.showPrevNextButtons) {
if (this.hasPrevNextButtons) {
focusableItems.forEach((focusableItem) => {
focusableItem.removeAttribute('tabIndex');
});
Expand Down Expand Up @@ -306,13 +283,4 @@ export default class WebUICarousel extends HTMLElement {
}
});
}

private getBoolAttribute(name: string): boolean {
return this.getAttribute(name) === 'true';
}

// Handle constructor() event listeners.
public handleEvent(e: MouseEvent) {
//
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@ const style = `
export const WebUICarouselHtml = (args) => `
${style}
<webui-carousel
${args.showSlideCount === true ? 'data-slide-count="true"' : ''}
${args.showSlideCountPips === true ? 'data-slide-count-pips="true"' : ''}
${args.showPrevNextButtons === true ? 'data-prev-next-buttons="true"' : ''}
${args.showPrevNextButtons === true ? 'data-prev-next-buttons' : ''}
${args.showSlideCount === true ? 'data-slide-count' : ''}
${args.showSlideCountPips === true ? 'data-slide-count-pips' : ''}
>
<section class="carousel-wrapper" aria-label="[meaningful label for carousel]"
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@ import * as WebUICarousel from './WebUICarousel.stories';

Attribute | Behaviour
--- | ---
`data-slide-count="true"` | Optional. Displays slide count & current slide.
`data-slide-count-pips="true"` | Optional. Displays slide count & current slide as pips instead of text.
`data-prev-next-buttons="true"` | Optional. Displays PREV and NEXT slide buttons.
`data-prev-next-buttons` | Optional. Displays PREV and NEXT slide buttons.
`data-slide-count` | Optional. Displays slide count & current slide.
`data-slide-count-pips` | Optional. Displays slide count & current slide as pips instead of text.

## TODO
- Update counter with touch/swipe events?
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ export default {
},
},
argTypes: {
showPrevNextButtons: { control: 'boolean' },
showSlideCount: { control: 'boolean' },
showSlideCountPips: { control: 'boolean' },
showPrevNextButtons: { control: 'boolean' },
},
};

Expand Down

0 comments on commit e56f5a5

Please sign in to comment.