@ebay/ebayui-core
Version:
Collection of core eBay components; considered to be the building blocks for all composite structures, pages & apps.
135 lines (134 loc) • 5.71 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");
class Breadcrumbs {
handleClick(originalEvent) {
this.emit("select", { originalEvent, el: originalEvent === null || originalEvent === void 0 ? void 0 : originalEvent.target });
}
handleMenuBreadcrumb(originalEvent) {
this.emit("select", { originalEvent, el: originalEvent === null || originalEvent === void 0 ? void 0 : originalEvent.el });
}
onCreate() {
this.state = { hiddenIndex: [] };
}
onMount() {
this._calculateMaxItems();
this.subscribeTo(eventUtils.resizeUtil).on("resize", this._calculateMaxItems.bind(this));
}
onInput(input) {
var _a;
this.cachedWidths = [];
const hiddenIndex = [];
const items = [...((_a = input.item) !== null && _a !== void 0 ? _a : [])];
if ((items || []).length > 4) {
// If we have more than 4 items, we automatically add them into hiddenIndexes.
// The first, second to last, and last indexes will be shown automatically
for (let i = 1; i < items.length - 2; i++) {
hiddenIndex.push(i);
}
}
this.state.hiddenIndex = hiddenIndex;
this.newInput = true;
}
onUpdate() {
if (this.newInput) {
this.newInput = false;
this._calculateMaxItems();
}
}
_getItemWidths(itemContainer) {
let itemWidths = this.cachedWidths;
if (itemWidths.length !== itemContainer.children.length) {
itemWidths = [];
for (let i = 0; i < itemContainer.children.length; i++) {
const currentItem = itemContainer.children[i];
// We need to remove the hidden attribute to get the width
if (currentItem.hasAttribute("hidden")) {
currentItem.removeAttribute("hidden");
itemWidths[i] = currentItem.offsetWidth;
currentItem.setAttribute("hidden", "");
}
else {
itemWidths[i] = currentItem.offsetWidth;
}
}
this.cachedWidths = itemWidths;
}
return itemWidths;
}
_calculateMaxItems() {
var _a;
const { input, state } = this;
const items = [...((_a = input.item) !== null && _a !== void 0 ? _a : [])];
if (!items.some((item) => !item.type)) {
return;
}
const itemContainer = this.getEl("items");
const maxWidth = (0, dom_1.getMaxWidth)(itemContainer);
const lastItemIndex = itemContainer.children.length - 1;
const itemWidths = this._getItemWidths(itemContainer);
const hasOverflowMenu = state.hiddenIndex.length > 0;
// Skip the first element
let startRange = 1;
// End at the item before the last
const endRange = lastItemIndex - 1;
// Only show a maximum of root + 3 other items.
const indexCutoff = endRange - 2;
// Get the total width of the first and last item
let runningTotalWidth = itemWidths[0] + itemWidths[lastItemIndex];
// When we show the overflow menu, it is now rendered within the dom.
// This increases the number of items by 1 in itemsContainer
if (hasOverflowMenu) {
// Add overflow menu to the count and increse the start range
runningTotalWidth += itemWidths[startRange];
startRange++;
}
const hiddenIndex = [];
// We only need to check the length of the second to last and third to last items.
// All other items will be truncated automatically. (due to indexCutoff variable)
for (let i = endRange; i >= startRange; i--) {
runningTotalWidth += itemWidths[i];
if (runningTotalWidth > maxWidth || indexCutoff >= i) {
// Since the overflow menu will cause a shift in indexes, we need to fix that
// So that the indexes match the input.items
hiddenIndex.unshift(hasOverflowMenu ? i - 1 : i);
}
}
state.hiddenIndex = hiddenIndex;
}
}
module.exports = Breadcrumbs;