@randstad-design/orbit-multitheme/src/assets/js/components/pagination.js

multitheme Front-end code based on Randstad Human Forward components

/**
 * pagination.js
 * Script to resize pagination when it contains three digits
 */

/**
* Declare constants
*/
const attributeBase = 'data-rs-pagination';

export class Pagination {

	constructor(element) {		
		this.element = element;
		this.paginationList = this.element.querySelector('[' + this.attributes.paginationList + ']');
		this.listItems = [...this.paginationList.getElementsByTagName('li')];
		this.handleNextPreviousElements();
		this.handleListItems();
	}

	/**
	* Declare attributes
	*/
	get attributes() {
		return {
			paginationControl: attributeBase + '-control',
			paginationList: attributeBase + '-list'
		}
	}

	/**
	* Declare classes
	*/
	get classes() {
		return {
			paginationListSmall: 'pagination__list--s'
		}
	}	

	/**
	 * Handle list items - check for three digits, if length of one of the list items is at least three digits, add pagination__list--s class to element
	 */
	handleListItems() {
		let containsThreeDigits = false;

		if (this.listItems.length > 0) {
			// check first item in item list
			if (this.listItems[0].innerText.trim().length > 2) {
				containsThreeDigits = true;
			}
			// check last item in item list
			else if (this.listItems[this.listItems.length - 1].innerText.trim().length > 2) {
				containsThreeDigits = true;
			}
		}
		if (containsThreeDigits) {
			this.paginationList.classList.add(this.classes.paginationListSmall);
		}
	}

	/**
	 * Handle next previous elements - check if list items contain a pagination control ('<-' or '->'), if so remove these from list items
	 */
	handleNextPreviousElements() {
		const firstListItem = this.listItems[0];
		if (firstListItem.getAttribute(this.attributes.paginationControl) !== 'undefined'
			&& firstListItem.getAttribute(this.attributes.paginationControl) !== null) {
			// shift: remove first item from list
			this.listItems.shift();
		}

		const lastListItem = this.listItems[this.listItems.length - 1];
		if (lastListItem.getAttribute(this.attributes.paginationControl) !== 'undefined'
			&& lastListItem.getAttribute(this.attributes.paginationControl) !== null) {
			// pop: remove last item from list
			this.listItems.pop();
		}
	}

	/**
	 * Get selector
	 */
	static getSelector() {
		return '[' + attributeBase + ']';
	}
}