Skip to content

Commit

Permalink
new files for separated parts of the component, truncation working on…
Browse files Browse the repository at this point in the history 
… the right, when the first part of the left is selected, adding proper menu items
  • Loading branch information
@anna-lach
anna-lach committed Sep 18, 2024
1 parent 02461fe commit a232e59
Show file tree
Hide file tree
Showing 5 changed files with 146 additions and 30 deletions.
Empty file added packages/components/paginator/src/page-size.ts
View file
Empty file.
Empty file added packages/components/paginator/src/page.ts
View file
Empty file.
18 changes: 11 additions & 7 deletions packages/components/paginator/src/paginator.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,13 @@
// justify-content: space-between;;
// flex-direction: column;
padding-block: 8px;
padding-inline: 4px;
align-items: center;
gap: 16px;
display: grid;
grid-template-columns: 1fr auto 2fr;
padding-inline: 0;
// padding-inline: 4px;
//align-items: center;
//gap: 16px;
//display: grid;
//grid-template-columns: 1fr auto 2fr;
display: flex;
}

// :host([collapsible][collapsed]) {
Expand Down Expand Up @@ -127,6 +129,7 @@ sl-button[active],
.pages-wrapper {
display: flex;
overflow: hidden;
align-items: center;
}

.page-sizes {
Expand All @@ -145,9 +148,10 @@ sl-button[active],
ul {
//display: flex;
align-items: center;
gap: 8px;
// gap: 8px;
display: grid;
grid-template-columns: 1fr 10fr 1fr;
grid-template-columns: 1fr auto 1fr;
padding: 0;
}

li {
Expand Down
158 changes: 135 additions & 23 deletions packages/components/paginator/src/paginator.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,7 @@ export class Paginator extends ScopedElementsMixin(LitElement) {
// TODO: next and previous should be wrapped by 'li' as well

return html`
${start} - ${end} of ${this.total} items
<div style="display: none;">${start} - ${end} of ${this.total} items</div>
<nav class="container">
<ul>
<sl-button aria-label="Go to the previous page {page}" fill="ghost" size="md" ?disabled=${this.activePage === 1} @click=${this.#onClickPrevButton}
Expand Down Expand Up @@ -220,7 +220,7 @@ export class Paginator extends ScopedElementsMixin(LitElement) {
></sl-button>
</ul>
</nav>
<div class="details">
<div class="details" style="display: none;">
<div>Total elements: ${this.total}</div>
<div>Items per page: ${this.itemsPerPage}</div>
${this.total && this.itemsPerPage
Expand Down Expand Up @@ -428,7 +428,7 @@ export class Paginator extends ScopedElementsMixin(LitElement) {
const pages = this.renderRoot.querySelectorAll<Button>('sl-button.page'); // TODO: should work also for links, not only for buttons

/**
* First variant, when 1 is active and not enought space - last one -1 should get ellipsis - or even more
* First variant, when 1 is active and not enough space - last one -1 should get ellipsis - or even more
* Second variant, when last page is active and not enough space, 2nd one should get ellipsis - or even more
* Third variant, ellipsis on the left and on the right, after 1st and before last page. check how many items are currently visible and when the middle one is active?
* Maybe use slice to manipulate the visible/hidden arrays?
Expand All @@ -447,12 +447,15 @@ export class Paginator extends ScopedElementsMixin(LitElement) {

const lastPage = pages.length;

let totalWidth = 0;
let hiddenButtons: Button[] = [];

pages.forEach(page => {
page.style.display = '';
totalPagesWidth += page.offsetWidth; // + gap;
});

const moreButton = document.createElement('sl-menu-button') as MenuButton;
const moreButton = /*document*/this.shadowRoot?.createElement('sl-menu-button') as MenuButton;
console.log('moreButton', moreButton);
moreButton.fill = 'ghost';
moreButton.classList.add('more-button');
Expand All @@ -465,9 +468,25 @@ export class Paginator extends ScopedElementsMixin(LitElement) {
icon.name = 'ellipsis';
moreButton.appendChild(icon);

let menuItems: Node[] = [];

const menuItem = document.createElement('sl-menu-item') as MenuItem;
menuItem.innerHTML = '1';
moreButton.appendChild(menuItem);
const menuItems3 = hiddenButtons?.forEach(() => { return document.createElement('sl-menu-item') as MenuItem});
const menuItems2 = hiddenButtons.map(
(button) => {
// Temporarily make the button visible
button.style.display = 'block';
const innerHTML = button.innerText;
// Revert the display property back to none
button.style.display = 'none';
return innerHTML;
// return item.className;
}
) ?? [];
// debugger;
console.log('menuItems', menuItems, hiddenButtons, menuItems2);
// moreButton.appendChild(menuItem);

if (container && pages[0]) {
const itemsPerRow = Math.floor(container?.clientWidth / pages[0].clientWidth);
Expand All @@ -478,34 +497,105 @@ export class Paginator extends ScopedElementsMixin(LitElement) {

// TODO: how many pages can be visible (check with buttons ellipsis) - always the same amount

// TODO: for array slice - starting point and end like 1-10 1 selected, 1 to length -1 slice from selected to length -1?


console.log('totalPagesWidth', totalPagesWidth, 'lastPage', lastPage, 'moreButton', moreButton, container, this.activePage === lastPage - 1, this.activePage, lastPage - 1, lastPage, this.activePage === lastPage);

let totalWidth = 0;
let hiddenButtons: Button[] = [];
// let totalWidth = 0;
// let hiddenButtons: Button[] = [];

// TODO: slice here below on pages:

console.log('pages slice', Array.from(pages).slice(0, -1)); // or -1 instead of length -1 /*pages.length -1)*/

// (Array.from(pages).slice(0, -1)).forEach(button => {
// // Ensure all pages are visible initially
// button.style.display = 'inline-block';
// totalWidth += button.offsetWidth;
//
// console.log('should hide buttons?', pagesWrapper && totalWidth > pagesWrapper.clientWidth);
//
// if (pagesWrapper && totalWidth > pagesWrapper.clientWidth /*container && totalWidth > container.clientWidth*/) { // TODO: or pagesWrapper???
// button.style.display = 'none';
// hiddenButtons.push(button);
// }
// });
//
const visibleButtons = pages.length - hiddenButtons.length;
//
console.log('Visible buttons1:', pages.length - hiddenButtons.length, pages.length, totalWidth);
console.log(`Hidden buttons1:`, hiddenButtons?.length, hiddenButtons);
console.log('visibleButtons and activePage - buttons1:', visibleButtons, this.activePage, 'half', Math.ceil(visibleButtons / 2),'activePage bigger than half', this.activePage > Math.ceil(visibleButtons / 2));

pages.forEach(button => {
// Ensure all pages are visible initially
button.style.display = 'inline-block';
totalWidth += button.offsetWidth;
// TODO: add hidden buttons to sl-menu

console.log('should hide buttons?', pagesWrapper && totalWidth > pagesWrapper.clientWidth);

if (pagesWrapper && totalWidth > pagesWrapper.clientWidth /*container && totalWidth > container.clientWidth*/) { // TODO: or pagesWrapper???
button.style.display = 'none';
hiddenButtons.push(button);
}
});
if (pagesWrapper && pagesWrapper.clientWidth < pagesWrapper.scrollWidth - moreButton.offsetWidth /*container && container.clientWidth < container.scrollWidth*/) {
console.log('on RESIZE ---- container ----- not enpough space, should show ellipsis', container);
if (this.activePage === 1 || this.activePage === 2) {

(Array.from(pages).slice(0, -1)).forEach(button => {
// Ensure all pages are visible initially
button.style.display = 'inline-block';
totalWidth += button.offsetWidth;

console.log('should hide buttons?', pagesWrapper && totalWidth > pagesWrapper.clientWidth);

if (pagesWrapper && totalWidth > pagesWrapper.clientWidth - moreButton.offsetWidth /*container && totalWidth > container.clientWidth*/) { // TODO: or pagesWrapper???
hiddenButtons.push(button);

const menuItems1 = hiddenButtons?.forEach(() => { return document.createElement('sl-menu-item') as MenuItem});
const menuItems2 = hiddenButtons.map(
(button) => {
// Temporarily make the button visible
// button.style.display = 'block';
// const innerHTML = button.innerText;
// // Revert the display property back to none
// button.style.display = 'none';
// return innerHTML;
// return item.className;
// const newItem = document.createElement('sl-menu-item') as MenuItem;
// newItem.innerText = button.innerText.trim();
return button.innerText.trim();
}
) ?? [];
menuItems = hiddenButtons.map(
(button) => {
// Temporarily make the button visible
// button.style.display = 'block';
// const innerHTML = button.innerText;
// // Revert the display property back to none
// button.style.display = 'none';
// return innerHTML;
// return item.className;
const newItem = document.createElement('sl-menu-item') as MenuItem;
newItem.innerText = button.innerText.trim();
return newItem;
}
) ?? [];
// debugger;
console.log('menuItems2', menuItems1, hiddenButtons, menuItems, menuItems2);
// moreButton.appendChild(menuItems);
// menuItems.forEach(item => moreButton.appendChild(item));

// menuItems.forEach(item => moreButton.appendChild(item));
console.log('menuItems and moreButton', menuItems, moreButton);

button.style.display = 'none';
}
});

console.log('Visible buttons:', pages.length - hiddenButtons.length, pages.length, totalWidth);
console.log(`Hidden buttons:`, hiddenButtons.length, hiddenButtons);
// moreButton.innerHTML = '';
menuItems.forEach(item => moreButton.appendChild(item));

// TODO: add hidden buttons to sl-menu
const visibleButtons = pages.length - hiddenButtons.length;

console.log('Visible buttons:', pages.length - hiddenButtons.length, pages.length, totalWidth);
console.log(`Hidden buttons:`, hiddenButtons.length, hiddenButtons);
console.log('visibleButtons and activePage - buttons:', visibleButtons, this.activePage, 'half', Math.ceil(visibleButtons / 2),'activePage bigger than half', this.activePage > Math.ceil(visibleButtons / 2));


if (pagesWrapper && pagesWrapper.clientWidth < pagesWrapper.scrollWidth /*container && container.clientWidth < container.scrollWidth*/) {
console.log('on RESIZE ---- container ----- not enpough space, should show ellipsis', container);
if (this.activePage === 1 || this.activePage === 2) {
// const pages = this.renderRoot.querySelectorAll('sl-button.page');
const toHide = Array.from(pages)?.find(page => {
// return page.textContent?.trim() === (this.activePage + 1)?.toString();
Expand All @@ -524,6 +614,28 @@ export class Paginator extends ScopedElementsMixin(LitElement) {
}
}
} else if (this.activePage === lastPage) {


(Array.from(pages).reverse().slice(0, -1)).forEach(button => {
// Ensure all pages are visible initially
button.style.display = 'inline-block';
totalWidth += button.offsetWidth;

console.log('should hide buttons?', pagesWrapper && totalWidth > pagesWrapper.clientWidth);

if (pagesWrapper && totalWidth > pagesWrapper.clientWidth /*container && totalWidth > container.clientWidth*/) { // TODO: or pagesWrapper???
hiddenButtons.push(button);
button.style.display = 'none';
}
});

const visibleButtons = pages.length - hiddenButtons.length;

console.log('Visible buttons:', pages.length - hiddenButtons.length, pages.length, totalWidth);
console.log(`Hidden buttons:`, hiddenButtons.length, hiddenButtons);
console.log('visibleButtons and activePage - buttons:', visibleButtons, this.activePage, 'half', Math.ceil(visibleButtons / 2),'activePage bigger than half', this.activePage > Math.ceil(visibleButtons / 2));


const toHide = Array.from(pages)?.find(page => {
return page.textContent?.trim() === '2';
// return page.textContent?.trim() === (pages.length - 1)?.toString();
Expand Down
Empty file added packages/components/paginator/src/visible-items.ts
View file
Empty file.

0 comments on commit a232e59

Please sign in to comment.