@legumeinfo/web-components
Version:
Web Components for the Legume Information System and other AgBio databases
256 lines • 8.58 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';
/**
* @htmlElement `<lis-pagination-element>`
*
* A Web Component that provides a pagination UI element.
*
* @example
* The pagination element's {@link page | `page`} attribute/property can be
* initialized via HTML or JavaScript. It will default to 1 if no value is
* provided:
* ```html
* <!-- page attribute/property will be given default value of 1 -->
* <lis-pagination-element></lis-pagination-element>
*
* <!-- setting the page attribute/property via HTML -->
* <lis-pagination-element page=2></lis-pagination-element>
*
* <!-- setting the page attribute/property via JavaScript -->
* <lis-pagination-element id="pagination"></lis-pagination-element>
* <script type="text/javascript">
* // get the pagination element
* const paginationElement = document.getElementById('pagination');
* // set the element's page property
* paginationElement.page = 3;
* </script>
* ```
*
* @example
* The pagination element can also go to the next/previous {@link page | `page`}
* programmatically using the {@link next | `next`} and
* {@link previous | `previous`} methods:
* ```html
* <!-- add the Web Component to your HTML -->
* <lis-pagination-element id="pagination"></lis-pagination-element>
*
* <!-- interact with the component via JavaScript -->
* <script type="text/javascript">
* // get the pagination element
* const paginationElement = document.getElementById('pagination');
* // go to the next page
* paginationElement.next();
* // go to the previous page
* paginationElement.previous();
* </script>
* ```
*
* @example
* Every time the {@link page | `page`} attribute/property changes, a
* {@link pageChange | `pageChange`} event is dispatched. The event can be
* observed and the new {@link page | `page`} value can be extracted from the
* event as follows:
* ```html
* <!-- add the Web Component to your HTML -->
* <lis-pagination-element id="pagination"></lis-pagination-element>
*
* <!-- interact with the component via JavaScript -->
* <script type="text/javascript">
* // get the pagination element
* const paginationElement = document.getElementById('pagination');
* // an function to handle pageChange events
* function eventHandler(event) {
* const page = event.detail.page;
* console.log(page); // 1
* }
* // subscribe to pageChange events
* paginationElement.addEventListener('pageChange', eventHandler);
* </script>
* ```
*
* @example
* An optional {@link scrollTarget | `scrollTarget`} property can be given an
* `HTMLElement` via JavaScript. If set, every time a pagination event occurs, the
* viewport will be scrolled so that the element given to the property is visible. For
* example:
* ```html
* <!-- an element to use as a scroll target -->
* <p id="paragraph">Some import text</p>
*
* <!-- add the Web Component to your HTML -->
* <lis-pagination-element id="pagination"></lis-pagination-element>
*
* <!-- set the scroll target via JavaScript -->
* <script type="text/javascript">
* // get the paragraph element
* const paragraphElement = document.getElementById('paragraph');
* // get the pagination element
* const paginationElement = document.getElementById('pagination');
* // set the scrollTarget property
* paginationElement.scrollTarget = paragraphElement;
* </script>
* ```
*/
let LisPaginationElement = class LisPaginationElement extends LitElement {
constructor() {
super(...arguments);
/**
* What page the element is currently on.
*
* @attribute
* @reflected
*/
this.page = 1;
/**
* Whether or not the next button should be enabled. Note that this will be overridden
* if a value is provided for `numPages`.
*
* @attribute
*/
this.hasNext = false;
/**
* The element to scroll to when the page changes.
*
* @attribute
*/
this.scrollTarget = null;
}
/** @ignore */
// disable Shadow DOM to inherit global styles
createRenderRoot() {
return this;
}
/**
* Programmatically go to the previous page.
*
* @param e - An optional {@link !Event | `Event`} that can be passed if
* called via a UI event,
* for example.
*/
previous(e) {
if (e !== undefined) {
e.preventDefault();
}
if (this.page > 1) {
this.page -= 1;
this._dispatchPageChange();
this._scrollToTarget();
}
}
/**
* Programmatically go to the next page.
*
* @param e - An optional {@link !Event | `Event`} that can be passed if
* called via a UI event,
* for example.
*/
next(e) {
if (e !== undefined) {
e.preventDefault();
}
if (this._hasNext()) {
this.page += 1;
this._dispatchPageChange();
this._scrollToTarget();
}
}
/** @ignore */
// determines whether or not there's a next page
_hasNext() {
if (this.numPages !== undefined) {
return this.page < this.numPages;
}
return this.hasNext;
}
/** @ignore */
// scrolls the view to the scrollTarget element
_scrollToTarget() {
if (this.scrollTarget != null) {
this.scrollTarget.scrollIntoView({ behavior: 'smooth' });
}
}
/** @ignore */
// emits a 'pageChange' event
_dispatchPageChange() {
const options = {
detail: { page: this.page },
bubbles: true,
composed: true,
};
const event = new CustomEvent('pageChange', options);
this.dispatchEvent(event);
}
/** @ignore */
// used by Lit to draw the template
_renderPreviousClass() {
if (this.page > 1) {
return 'uk-active';
}
return 'uk-disabled';
}
_pageInfo() {
if (!this.numPages) {
return html `Page ${this.page.toLocaleString()}`;
}
return html `Page ${this.page.toLocaleString()} of
${this.numPages.toLocaleString()}`;
}
/** @ignore */
// used by Lit to draw the template
_renderNextClass() {
if (this._hasNext()) {
return 'uk-active';
}
return 'uk-disabled';
}
/** @ignore */
// the template
render() {
const previousClass = this._renderPreviousClass();
const pageInfo = this._pageInfo();
const nextClass = this._renderNextClass();
return html `
<ul class="uk-pagination">
<li class="${previousClass}">
<a href="" =${this.previous}
><span class="uk-margin-small-right" uk-pagination-previous></span>
Previous</a
>
</li>
<li class="uk-active"><span>${pageInfo}</span></li>
<li class="uk-margin-auto-left ${nextClass}">
<a href="" =${this.next}
>Next <span class="uk-margin-small-left" uk-pagination-next></span
></a>
</li>
</ul>
`;
}
};
/** @ignore */
// used by Lit to style the Shadow DOM
// not necessary but exclusion breaks TypeDoc
LisPaginationElement.styles = css ``;
__decorate([
property({ type: Number, reflect: true })
], LisPaginationElement.prototype, "page", void 0);
__decorate([
property()
], LisPaginationElement.prototype, "numPages", void 0);
__decorate([
property({ type: Boolean })
], LisPaginationElement.prototype, "hasNext", void 0);
__decorate([
property({ type: HTMLElement, attribute: false })
], LisPaginationElement.prototype, "scrollTarget", void 0);
LisPaginationElement = __decorate([
customElement('lis-pagination-element')
], LisPaginationElement);
export { LisPaginationElement };
//# sourceMappingURL=lis-pagination-element.js.map