@ebay/ebayui-core
Version:
Collection of core eBay components; considered to be the building blocks for all composite structures, pages & apps.
178 lines (177 loc) • 6.01 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
const eventUtils = __importStar(require("../../common/event-utils"));
const dom_1 = require("../../common/dom");
const MAX_PAGES = 9;
const MIN_PAGES = 5;
class Pagination {
handlePageNumberClick(index, originalEvent, el) {
this.emit("select", {
el,
originalEvent,
value: el.innerText,
index,
});
}
handleMenuPageNumber({ originalEvent, el, }) {
var _a;
const index = parseInt(el === null || el === void 0 ? void 0 : el.getAttribute("data-page-number"), 10);
this.emit("select", {
el,
originalEvent,
value: (_a = el === null || el === void 0 ? void 0 : el.innerText) !== null && _a !== void 0 ? _a : "",
index,
});
// Have to set timeout becasue menu will also trigger focus back to menu container
setTimeout(() => this.getEl("pageItem[]", index).focus(), 0);
}
handleNextPageClick(originalEvent, el) {
if (!el.hasAttribute("aria-disabled")) {
this.emit("next", {
el,
originalEvent,
});
}
}
handlePreviousPageClick(originalEvent, el) {
if (!el.hasAttribute("aria-disabled")) {
this.emit("previous", {
el,
originalEvent,
});
}
}
onCreate() {
this.state = { maxItems: MIN_PAGES };
}
onMount() {
this._calculateMaxItems();
this.subscribeTo(eventUtils.resizeUtil).on("resize", this._calculateMaxItems.bind(this));
}
getItemTag(item) {
if (item.variant) {
return item.variant === "link" ? "a" : "button";
}
return !!item.href ? "a" : "button";
}
/**
* Calculates the start and end offsets given the current maximum items
* that can be displayed.
*/
_getVisibleRange(items) {
const { state, input } = this;
const { maxItems } = state;
const { variant } = input;
const hasDots = variant === "show-last" || variant === "overflow";
const hasLeadingDots = variant === "overflow";
const hasOverflow = variant === "overflow";
const lastIndex = items.length - 1;
const dotsIndex = hasDots ? lastIndex : -1;
const leadingDotsIndex = hasLeadingDots ? 1 : -1;
let hideDots = false;
let hideLeadingDots = false;
const i = items.findIndex((item) => item.current);
const range = Math.floor(maxItems / 2);
let start = i - range;
let end = i + range;
if (start <= 0) {
end = maxItems - 1;
start = 0;
}
else if (end >= lastIndex) {
end = lastIndex;
start = lastIndex - (maxItems - 1);
}
else if (maxItems % 2 === 0) {
start++;
}
if (hasDots) {
if (i + range >= lastIndex || end >= lastIndex) {
hideDots = true;
}
else if (i <= end - 2) {
end -= 2;
}
else {
start += 1;
end -= 1;
}
}
if (hasLeadingDots) {
if (i - range <= 0) {
hideLeadingDots = true;
}
else if (i >= start - 1) {
start += 2;
}
else {
end -= 1;
start -= 1;
}
}
return {
start,
end,
hideDots,
dotsIndex,
hasOverflow,
leadingDotsIndex,
hideLeadingDots,
};
}
_calculateMaxItems() {
const { input, state } = this;
const items = input.item || [];
if (!items.some((item) => !item.type)) {
return;
}
const root = this.getEl("root");
if (!this._itemWidth) {
// calculate the width of the first visible item
const { children: items } = this.getEl("items");
for (let i = 0; i < items.length; i++) {
const item = items[i];
if (item.offsetWidth) {
this._itemWidth = item.offsetWidth;
break;
}
}
}
// subtract 2 from the rounded results to take into account previous/next page buttons
state.maxItems = Math.max(MIN_PAGES, Math.min(MAX_PAGES, Math.floor((0, dom_1.getMaxWidth)(root) / this._itemWidth) - 2));
}
}
module.exports = Pagination;