f1cafd2267
- Fixed the logic for the "show more" button text to correctly reflect the current state. - Updated button color for better visibility and adjusted styles by removing the minimum width constraint.
5 lines
11 KiB
JavaScript
5 lines
11 KiB
JavaScript
(function(){"use strict";const P="#wrapper{display:flex;flex-direction:column;font-family:inherit}.wrapper-dialog{position:fixed;top:60px;right:60px;z-index:1000;width:340px;max-height:480px;background:#fff;border-radius:.25rem;box-shadow:0 0 6px #0000911a;border:1px solid #e5e5e5;overflow:hidden}#header{display:none;justify-content:center;align-items:center;padding:4px 16px;background:transparent;border-bottom:1px solid #dfe2ea;min-height:48px;position:relative}#header-logo{height:25px;width:auto;object-fit:contain;display:block;margin:0 auto}#close{position:absolute;right:16px}#close{background:none;border:none;color:#64748b;cursor:pointer;font-size:36px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s}#close:hover{background-color:#f0f0f0}#close:focus{outline:2px solid #0a76f6}#footer{display:none;padding:16px;background:transparent;border-top:1px solid #dfe2ea;justify-content:flex-end}#ok-button{background:#3e5de7;color:#fff;border:none;border-radius:6px;padding:8px 16px;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .2s;min-width:60px}#ok-button:hover{background:#1d4ed8}#ok-button:focus{outline:2px solid #0a76f6}#content{flex:1;display:flex;flex-direction:column;overflow-y:auto;min-height:0}#loading{display:flex;align-items:center;justify-content:center;padding:40px 20px;color:#666;font-size:14px;margin:16px}#error{display:flex;align-items:center;justify-content:center;padding:40px 20px;color:#dc3545;font-size:14px;text-align:center;margin:16px}#services-grid{grid-template-columns:repeat(3,1fr);gap:4px;justify-items:center;list-style:none;padding:0;margin:0}.service-card{background:transparent;text-align:center;transition:all .2s ease;position:relative;display:flex;flex-direction:column;align-items:center;width:100%;list-style:none;padding:0;margin:0}#main-apps{padding:16px}#more-apps{border-top:1px solid #dfe2ea;padding:16px;background:transparent;display:flex;flex-direction:column-reverse}#more-services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;justify-items:center;list-style:none;padding:0;margin:0 0 16px}#show-more-container{display:flex;justify-content:center;align-items:center;width:100%}#show-more-button{background:none;color:#626a80;border:none;border-radius:6px;padding:8px 16px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:8px}#show-more-button:hover{background:#f1f5f9;color:#475569}#show-more-button:focus{outline:none}#show-more-button:focus-visible{outline:2px solid #0a76f6;outline-offset:2px}#show-more-chevron{width:16px;height:16px;transition:transform .2s ease}#show-more-chevron.opened{transform:rotate(180deg)}.service-card:hover{background-color:#eef1f4;border-radius:6px}.service-card a{position:relative;padding:8px;width:100%;text-decoration:none;display:block}.service-logo{width:42px;height:42px;object-fit:contain}.maturity-badge{position:absolute;top:40px;left:50%;transform:translate(-50%);background:#eef1f4;color:#2845c1;border-radius:12px;padding:2px 4px;font-size:9px;line-height:9px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap}.service-info{display:flex;flex-direction:column;align-items:center;width:100%;padding-top:4px}.service-name{font-weight:600;font-size:14px;color:#1e40af;margin-bottom:2px;line-height:1.2;text-align:center}#more-services-grid{display:grid}#more-services-grid.hidden{display:none}@media (max-width: 480px){#wrapper{width:100%;inset:0!important;border-radius:0;max-height:100vh;position:fixed!important}#more-services-grid{display:grid!important}#show-more-button{display:none}#header{height:40px;display:flex}#header-logo{height:35px}#footer{display:flex}#services-grid,#more-services-grid{grid-template-columns:repeat(3,1fr);gap:12px}.service-card{width:70px;padding:6px}.service-logo,.service-logo-placeholder{width:40px;height:40px}.service-name{font-size:11px}}#content::-webkit-scrollbar{width:4px}#content::-webkit-scrollbar-track{background:transparent}#content::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:2px}#content::-webkit-scrollbar-thumb:hover{background:#94a3b8}",U=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M8 8.40004L11.0667 5.33337L12 6.26671L8 10.2667L4 6.26671L4.93333 5.33337L8 8.40004Z" fill="#626A80"/>
|
|
</svg>
|
|
`;function G(e,t,r){const s=`lasuite-widget-${e}-shadow`,u=document.getElementById(s);u&&u.remove();const c=document.createElement("div");c.id=s;const m=c.attachShadow({mode:"open"}),p=document.createElement("style");p.textContent=r;const l=document.createElement("div");return l.innerHTML=t,m.appendChild(p),m.appendChild(l),c}const D="lasuite-widget",a=(e,t,r,s)=>document.dispatchEvent(new CustomEvent(`${D}-${e}-${t}`,r?{detail:r}:void 0)),g=(e,t,r,s,u)=>{const c=p=>u(p.detail),m=e?`${D}-${e}-${t}`:t;return(r||document).addEventListener(m,c,s?{once:!0}:void 0),()=>(r||document).removeEventListener(m,c,s?{once:!0}:void 0)},E=2,F=e=>window._lasuite_widget?._loaded?.[e],I=(e,t)=>{window._lasuite_widget?._loaded&&(window._lasuite_widget._loaded[e]=t)},R=e=>{window._lasuite_widget||(window._lasuite_widget=[]);const t=window._lasuite_widget;if(t._loaded||(t._loaded={}),F(e)!==E){t.push=(...r)=>{for(const s of r)F(s[0])===E?a(s[0],s[1],s[2]):t[t.length]=s;return t.length},I(e,E);for(const r of t.splice(0,t.length))t.push(r)}a(e,"loaded")},V=e=>e.offsetWidth>0&&e.offsetHeight>0,A=(e,t,r)=>{const s=u=>{if(u.key!=="Tab")return;const c=Array.from(t.querySelectorAll(r)).filter(l=>V(l));if(c.length===0)return;const m=c[0],p=c[c.length-1];u.shiftKey&&e.activeElement===m?(u.preventDefault(),p.focus()):!u.shiftKey&&e.activeElement===p&&(u.preventDefault(),m.focus())};return t.addEventListener("keydown",s),()=>{t.removeEventListener("keydown",s)}},J=e=>{const t=r=>{r.key==="Escape"&&(r.preventDefault(),e())};return document.addEventListener("keydown",t),()=>{document.removeEventListener("keydown",t)}},n="lagaufre";let S=!1;g(n,"init",null,!1,async e=>{if(!e.api&&!e.data){console.error("Missing API URL");return}S&&(a(n,"destroy"),await new Promise(o=>setTimeout(o,10)));const t=[];let r=!1;const s=e.viewMoreLabel||"More apps",u=e.viewLessLabel||"Fewer apps",c=e.showMoreLimit||6,m='<div id="wrapper" role="dialog" aria-modal="true" tabindex="-1"><div id="header">'+(e.headerLogo?e.headerUrl?`<a href="${e.headerUrl}" target="_blank"><img src="${e.headerLogo}" id="header-logo"></a>`:`<img src="${e.headerLogo}" id="header-logo">`:"")+`<button type="button" id="close">×</button></div><div id="content"><div id="loading">Loading...</div><div id="main-apps"><ul role="list" id="services-grid" style="display: none;"></ul></div><div id="more-apps" style="display: none;"><div id="show-more-container"><button type="button" id="show-more-button"><span id="show-more-chevron" aria-hidden="true">${U}</span><span id="show-more-text">${s}</span></button></div><ul role="list" id="more-services-grid"></ul></div><div id="error" style="display: none;"></div></div><div id="footer"><button id="ok-button">OK</button></div></div>`,p=G(n,m,P),l=p.shadowRoot,f=l.querySelector("#wrapper"),C=l.querySelector("#loading"),y=l.querySelector("#services-grid"),H=l.querySelector("#more-apps"),b=l.querySelector("#more-services-grid"),Z=l.querySelector("#show-more-button"),_=l.querySelector("#show-more-chevron"),Q=l.querySelector("#show-more-text"),q=l.querySelector("#error"),w=l.querySelector("#close"),W=l.querySelector("#ok-button"),K=l.querySelector("#header-logo"),M=o=>{const h=["top","bottom","left","right"],k=i=>{h.forEach(d=>{f.style[d]=typeof i[d]=="number"?`${i[d]}px`:"unset"})};if(h.every(i=>o[i]===void 0)||k(o),o.position)if(typeof o.position=="function"){const i=o.position();f.style.position=i.position,k(i)}else f.style.position=o.position;o.fontFamily&&(f.style.fontFamily=o.fontFamily),o.background&&(f.style.background=o.background);const L=o.label||"Services",O=o.closeLabel||"Close";C.textContent=o.loadingText||"Loading…",f.setAttribute("aria-label",L),w&&w.setAttribute("aria-label",O),K&&(K.alt=(o.headerLabel||"About LaSuite")+(o.newWindowLabelSuffix||""))};M(e),t.push(g("","resize",window,!1,()=>{M(e),e.data&&T(e.data)})),f.style.display="none";const $=o=>{C.style.display="none",y.style.display="none",q.style.display="block",q.textContent=o},T=o=>{y.innerHTML="",b.innerHTML="";const h=c,k=o.services.length>h,L=i=>{if(!i.logo)return null;i.maturity=="stable"&&delete i.maturity;const d=document.createElement("li");d.className="service-card",d.innerHTML=`<a target="_blank"><img alt="" class="service-logo" onerror="this.style.display='none'"><div class="service-info"><div class="service-name"></div></div></a>`;const x=d.querySelector("a"),v=d.querySelector("img"),X=d.querySelector(".service-name");if(i.maturity){const B=document.createElement("div");B.className="maturity-badge",B.textContent=i.maturity,x.insertBefore(B,v.nextSibling)}return x.setAttribute("aria-label",i.name+(i.maturity?` (${i.maturity})`:"")+(e.newWindowLabelSuffix||"")),x.href=i.url,v.src=i.logo,X.textContent=i.name,d};if(o.services.slice(0,h).forEach(i=>{const d=L(i);d&&y.appendChild(d)}),k){o.services.slice(h).forEach(x=>{const v=L(x);v&&b.appendChild(v)}),H.style.display="flex",b.classList.add("hidden"),_.classList.remove("opened");const d=()=>{b.classList.toggle("hidden"),_.classList.toggle("opened");const x=_.classList.contains("opened");Q.textContent=x?u:s};Z.addEventListener("click",()=>{d()})}else H.style.display="none";C.style.display="none",q.style.display="none",y.style.display="grid"};if(e.data)T(e.data);else try{const h=await(await fetch(e.api,{method:"GET"})).json();h.error?$(`Error: ${JSON.stringify(h.error)}`):h.services&&h.services.length>0?T(h):$("No services found")}catch(o){$(`Failed to load services: ${o instanceof Error?o.message:"Unknown error"}`)}const N=o=>{e.dialogElement||p.contains(o.target)||a(n,"close")};let j=null,z=null;t.push(g(n,"open",null,!1,()=>{f.style.display="flex",setTimeout(()=>{r=!0,document.addEventListener("click",N),f.focus()},200),j=A(l,f,"a,button"),e.dialogElement||(z=J(()=>{a(n,"close")})),e.buttonElement&&e.buttonElement.setAttribute("aria-expanded","true"),a(n,"opened")})),t.push(g(n,"close",null,!1,()=>{j&&j(),z&&z(),r&&(f.style.display="none",r=!1,e.buttonElement&&(e.buttonElement.focus(),e.buttonElement.setAttribute("aria-expanded","false")),document.removeEventListener("click",N),a(n,"closed"))})),t.push(g(n,"toggle",null,!1,()=>{r?a(n,"close"):a(n,"open")})),t.push(g(n,"configure",null,!1,M)),W&&W.addEventListener("click",()=>{a(n,"close")}),w&&w.addEventListener("click",()=>{a(n,"close")}),e.buttonElement&&t.push(g("","click",e.buttonElement,!1,()=>{a(n,"toggle")})),e.dialogElement?e.dialogElement.appendChild(p):(f.className="wrapper-dialog",document.body.appendChild(p)),g(n,"destroy",null,!0,()=>{a(n,"close"),S=!1,p.remove(),t.forEach(o=>o())}),S=!0,a(n,"initialized"),e.open&&a(n,"open")}),R(n)})();
|