@coderundebug/ui-web/ui-pagination.js

A collection of UI web components that can be used in any web project.

/* By Stephen Paul Hassall (web: https://coderundebug.com) */
import{UiTools as t}from"./ui-tools.js";export class UiPagination extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=UiPagination.uiHtml,this.shadowRoot.adoptedStyleSheets=[UiPagination.uiCssStyleSheet],this.t=this.shadowRoot.getElementById("start"),this.i=this.shadowRoot.getElementById("previous"),this.o=this.shadowRoot.getElementById("next"),this.h=this.shadowRoot.getElementById("end"),this.l=this.shadowRoot.getElementById("start-page"),this.u=this.shadowRoot.getElementById("start-dots"),this.p=this.shadowRoot.getElementById("middle-pages"),this.v=this.shadowRoot.getElementById("end-dots"),this.m=this.shadowRoot.getElementById("end-page"),this.k=this.k.bind(this),this.I=this.I.bind(this),this.C=this.C.bind(this),this._=this._.bind(this),this.M=this.M.bind(this),this.P=this.P.bind(this),this.B=this.B.bind(this),this.U=-1,this.j=-1,this.A=-1,this.D=1}get total(){return!1===this.hasAttribute("total")?0:parseInt(this.getAttribute("total"))}set total(t){this.setAttribute("total",t.toString())}get show(){return!1===this.hasAttribute("show")?1:parseInt(this.getAttribute("show"))}set show(t){this.setAttribute("show",t.toString())}get page(){return!1===this.hasAttribute("page")?-1===this.A?0:this.A:parseInt(this.getAttribute("page"))}set page(t){this.setAttribute("page",t.toString())}attributeChangedCallback(t,i,e){this.H()}static get observedAttributes(){return["page","show","total"]}connectedCallback(){this.t.addEventListener("click",this.k),this.i.addEventListener("click",this.I),this.o.addEventListener("click",this.C),this.h.addEventListener("click",this._),this.l.addEventListener("click",this.M),this.p.addEventListener("click",this.P),this.m.addEventListener("click",this.B),this.H()}disconnectedCallback(){this.t.removeEventListener("click",this.k),this.i.removeEventListener("click",this.I),this.o.removeEventListener("click",this.C),this.h.removeEventListener("click",this._),this.l.removeEventListener("click",this.M),this.p.removeEventListener("click",this.P),this.m.removeEventListener("click",this.B)}k(){let t=1;!0===this.hasAttribute("page")&&(t=parseInt(this.getAttribute("page")));let i=0;!0===this.hasAttribute("total")&&(i=parseInt(this.getAttribute("total"))),0!==i&&1!==t&&this.setAttribute("page","1")}I(){let t=1;!0===this.hasAttribute("page")&&(t=parseInt(this.getAttribute("page")));let i=0;!0===this.hasAttribute("total")&&(i=parseInt(this.getAttribute("total"))),0!==i&&1!==t&&(t--,this.setAttribute("page",t.toString()))}C(){let t=1;!0===this.hasAttribute("page")&&(t=parseInt(this.getAttribute("page")));let i=0;!0===this.hasAttribute("total")&&(i=parseInt(this.getAttribute("total"))),0!==i&&t!==i&&(t++,this.setAttribute("page",t.toString()))}_(){let t=1;!0===this.hasAttribute("page")&&(t=parseInt(this.getAttribute("page")));let i=0;!0===this.hasAttribute("total")&&(i=parseInt(this.getAttribute("total"))),0!==i&&t!==i&&this.setAttribute("page",i.toString())}M(){this.k()}P(t){const i=t.target._uiPage;this.setAttribute("page",i.toString())}B(){this._()}H(){!0===this.hasAttribute("numbers-only")?this.L():this.N()}L(){let t=1;!0===this.hasAttribute("page")&&(t=parseInt(this.getAttribute("page")));let i=1;!0===this.hasAttribute("show")&&(i=parseInt(this.getAttribute("show")));let e=0;if(!0===this.hasAttribute("total")&&(e=parseInt(this.getAttribute("total"))),t===this.A&&i===this.j&&e===this.U)return;if(0===e)return this.l.style.display="none",this.u.style.display="none",this.p.style.display="none",this.m.style.display="none",void(this.v.style.display="none");this.O(),this.A=t,this.j=i,this.U=e;let s=i,n=0,o=t-i+1;if(o<1&&(o=1),n=t<this.D?t:this.D<o?o:this.D,0===s&&(this.p.style.display="none"),0!==s){this.p.style.display="inline-flex",this.p.innerHTML="";for(let i=0;i<s;i++){const e=n+i,s=document.createElement("button");s.textContent=e.toString(),s._uiPage=e,s.setAttribute("type","button"),e===t&&s.classList.add("selected"),this.p.appendChild(s)}}this.D=n}N(){let t=1;!0===this.hasAttribute("page")&&(t=parseInt(this.getAttribute("page")));let i=1;!0===this.hasAttribute("show")&&(i=parseInt(this.getAttribute("show")));let e=0;if(!0===this.hasAttribute("total")&&(e=parseInt(this.getAttribute("total"))),t===this.A&&i===this.j&&e===this.U)return;if(0===e)return this.l.style.display="none",this.u.style.display="none",this.p.style.display="none",this.m.style.display="none",void(this.v.style.display="none");this.O(),this.A=t,this.j=i,this.U=e;let s=!1,n=!1,o=0,a=0;if(i>4&&i<e){const e=i-4;t>Math.ceil(i/2)+Math.floor(e/2)&&(s=!0)}if(i>4&&i<e){const s=i-4;t<=e-Math.ceil(i/2)-Math.floor(s/2)&&(n=!0)}if(!0===s&&!1===n&&(o=i-2),!1===s&&!0===n&&(o=i-2),!0===s&&!0===n&&(o=i-4),!1===s&&!1===n&&(o=i),i<=4||i>e){let e=t-i+1;e<1&&(e=1),a=t<this.D?t:this.D<e?e:this.D}else{if(!1===s&&(a=1),!0===s&&!0===n){const i=t-o+1;a=t<this.D?t:this.D<i?i:this.D}if(!1===n){const t=e-o+1;a=this.D<t?t:this.D}}if(!0===s?(this.l.textContent="1",this.l._uiPage=1,this.l.style.display="inline-flex",this.u.style.display="inline-flex",1===t?this.u.classList.add("selected"):this.u.classList.remove("selected")):(this.l.style.display="none",this.u.style.display="none"),!0===n?(this.m.textContent=e.toString(),this.m._uiPage=e,this.m.style.display="inline-flex",this.v.style.display="inline-flex",t===e?this.v.classList.add("selected"):this.v.classList.remove("selected")):(this.m.style.display="none",this.v.style.display="none"),0===o&&(this.p.style.display="none"),0!==o){this.p.style.display="inline-flex",this.p.innerHTML="";for(let i=0;i<o;i++){const e=a+i,s=document.createElement("button");s.textContent=e.toString(),s._uiPage=e,s.setAttribute("type","button"),e===t&&s.classList.add("selected"),this.p.appendChild(s)}}this.D=a}O(){const t=new Event("selected",{bubbles:!0,cancelable:!0,composed:!1});this.dispatchEvent(t)}}UiPagination.uiCss=" :host{display:inline-flex;flex-wrap:nowrap;gap:var(--ui-pagination-gap, 4px);--ui-pagination-font-size:var(--ui-pagination-normal-font-size, var(--ui-font-size-normal, 16px));--ui-pagination-size:calc(var(--ui-pagination-font-size) * 2);--ui-pagination-icon-height:var(--ui-pagination-normal-icon-height, 16px);}:host([small]){--ui-pagination-font-size:var(--ui-pagination-small-font-size, var(--ui-font-size-small, 12px));--ui-pagination-icon-height:var(--ui-pagination-small-icon-height, 12px);}:host([large]){--ui-pagination-font-size:var(--ui-pagination-large-font-size, var(--ui-font-size-large, 24px));--ui-pagination-icon-height:var(--ui-pagination-large-icon-height, 36px);}.page-list, #middle-pages{display:inline-flex;flex-wrap:nowrap;gap:var(--ui-pagination-gap, 4px);}#start, #end{display:none;}:host([numbers-only]){& #start, #end{display:inline-flex;}& #start-page, #start-dots, #end-dots, #end-page{display:none;}} button{display:inline-flex;align-items:center;justify-content:center;font-size:var(--ui-pagination-font-size);user-select:none;-webkit-user-select:none;padding:0;height:var(--ui-pagination-size);min-width:var(--ui-pagination-size);background-color:var(--ui-pagination-background, transparent);color:var(--ui-pagination-foreground, var(--ui-default-foreground, hsl(0 0% 30% / 1)));border-radius:var(--ui-pagination-button-radius, var(--ui-border-radius-normal, 4px));border:none;}svg{display:block;height:var(--ui-pagination-icon-height);min-width:8px;min-height:8px;}svg:not(.dots){fill:none;stroke:var(--ui-pagination-foreground, var(--ui-default-foreground, hsl(0 0% 30% / 1)));stroke-width:var(--ui-pagination-stroke-width, 2);stroke-linecap:round;stroke-linejoin:round;}svg.dots{fill:var(--ui-pagination-foreground, var(--ui-default-foreground, hsl(0 0% 30% / 1)));stroke:none;}#start-dots, #end-dots{min-width:var(--ui-pagination-size);display:flex;align-items:center;justify-content:center;box-sizing:border-box;}button.selected{background-color:var(--ui-pagination-selected-background, var(--ui-selected-background, hsl(215 50% 90% / 1)));color:var(--ui-pagination-selected-foreground, var(--ui-selected-foreground, hsl(215 50% 30% / 1)));}:host([boxed]){gap:0;--ui-pagination-size:calc(var(--ui-pagination-font-size) * 2.5);}:host([boxed]){& .page-list, #middle-pages{gap:0;}& #start, #previous, #start-page, #start-dots, #middle-pages button, #next, #end-dots, #end-page, #end{border-radius:0;border-block-start:var(--ui-pagination-boxed-border-width, 2px) solid var(--ui-pagination-boxed-color, var(--ui-midground, hsl(0 0% 90% / 1)));border-block-end:var(--ui-pagination-boxed-border-width, 2px) solid var(--ui-pagination-boxed-color, var(--ui-midground, hsl(0 0% 90% / 1)));}& #start, #previous, #start-page, #start-dots, #middle-pages button:not(:last-child){border-inline-end:var(--ui-pagination-boxed-bar-width, 1px) solid var(--ui-pagination-boxed-color, var(--ui-midground, hsl(0 0% 90% / 1)));}& #end, #next, #end-page, #end-dots{border-inline-start:var(--ui-pagination-boxed-bar-width, 1px) solid var(--ui-pagination-boxed-color, var(--ui-midground, hsl(0 0% 90% / 1)));}& #start-dots, #end-dots{background-color:var(--ui-pagination-background, transparent);}} :host([boxed][numbers-only]) #start, :host([boxed]:not([numbers-only])) #previous{border-inline-start:var(--ui-pagination-boxed-border-width, 2px) solid var(--ui-pagination-boxed-color, var(--ui-midground, hsl(0 0% 90% / 1)));border-start-start-radius:var(--ui-pagination-boxed-radius, var(--ui-border-radius-normal, 4px));border-end-start-radius:var(--ui-pagination-boxed-radius, var(--ui-border-radius-normal, 4px));}:host([boxed][numbers-only]) #end, :host([boxed]:not([numbers-only])) #next{border-inline-end:var(--ui-pagination-boxed-border-width, 2px) solid var(--ui-pagination-boxed-color, var(--ui-midground, hsl(0 0% 90% / 1)));border-start-end-radius:var(--ui-pagination-boxed-radius, var(--ui-border-radius-normal, 4px));border-end-end-radius:var(--ui-pagination-boxed-radius, var(--ui-border-radius-normal, 4px));}button:focus-visible{outline-offset:-2px;outline-style:solid;outline-width:2px;outline-color:var(--ui-pagination-foreground, var(--ui-default-foreground, hsl(0 0% 30% / 1)));}button.selected:focus-visible{outline-color:var(--ui-pagination-selected-foreground, var(--ui-selected-foreground, hsl(215 50% 30% / 1)));}@media (hover:hover){button:hover{background-color:var(--ui-pagination-hover-background, var(--ui-default-background, hsl(0 0% 90% / 1)));color:var(--ui-pagination-hover-foreground, var(--ui-default-foreground, hsl(0 0% 30% / 1)));cursor:pointer;}button:hover.selected{background-color:var(--ui-pagination-selected-background, var(--ui-selected-background, hsl(215 50% 90% / 1)));color:var(--ui-pagination-selected-foreground, var(--ui-selected-foreground, hsl(215 50% 30% / 1)));filter:brightness(85%);}} button:active, button.selected:active{filter:brightness(65%);}@media (forced-colors:active) or (prefers-contrast:more){div, button{border:none !important;}button.selected{outline-offset:-4px;outline-width:4px;outline-style:dashed;}}",UiPagination.uiHtml='<button id="start" type="button"><svg viewBox="0 0 16 16"><path d="M 13,12 9,8 13,4"></path><path d="M 7,12 3,8 7,4"></path></svg></button><button id="previous" type="button"><svg viewBox="0 0 16 16"><path d="m 10,4 -4,4 4,4"></path></svg></button><div class="page-list"><button id="start-page"></button><div id="start-dots"><svg viewBox="0 0 16 16" class="dots"><circle cx="4" cy="8"r="1"></circle><circle cx="8" cy="8"r="1"></circle><circle cx="12" cy="8"r="1"></circle></svg></div><div id="middle-pages"></div><div id="end-dots"><svg viewBox="0 0 16 16" class="dots"><circle cx="4" cy="8"r="1"></circle><circle cx="8" cy="8"r="1"></circle><circle cx="12" cy="8"r="1"></circle></svg></div><button id="end-page" type="button"></button></div><button id="next" type="button"><svg viewBox="0 0 16 16"><path d="m 6,4 4,4 -4,4"></path></svg></button><button id="end" type="button"><svg viewBox="0 0 16 16"><path d="m 9,4 4,4 -4,4"></path><path d="M 3,4 7,8 3,12"></path></svg></button>',t.createUi(UiPagination,"ui-pagination",import.meta.url);