1 line
2.2 KiB
JavaScript
1 line
2.2 KiB
JavaScript
const collapsedText=document.createElement("template");collapsedText.innerHTML='\n <style>\n .wrapper {\n position: relative;\n display: flex;\n flex-direction: column;\n width: 100%;\n }\n .collapsed-text {\n display: -webkit-box;\n -webkit-line-clamp: var(--line-clamp,3);\n -webkit-box-orient: vertical; \n text-overflow: ellipsis;\n overflow: hidden;\n }\n :host([open]) .collapsed-text {\n -webkit-line-clamp: unset;\n }\n .toggle-button {\n margin-top: 0.5rem;\n margin-right: auto;\n cursor: pointer;\n font-weight: 500;\n background: var(--button-background, #fff);\n border: none;\n outline: none;\n color: var(--accent-color,teal);\n font-size: inherit;\n font-family: inherit;\n z-index: 1;\n }\n </style>\n <div class="wrapper">\n <div class="collapsed-text"><slot></slot></div>\n <button class="toggle-button">Show more</button>\n </div>\n';class CollapsedText extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(collapsedText.content.cloneNode(!0)),this.isCollapsed=!0,this.toggleCollapsedText=this.toggleCollapsedText.bind(this),this.wrapper=this.shadowRoot.querySelector(".collapsed-text"),this.toggleButton=this.shadowRoot.querySelector(".toggle-button")}toggleCollapsedText(){this.toggleButton.textContent=this.isCollapsed?"Show less":"Show more",this.isCollapsed?(this.setAttribute("open",""),this.wrapper.removeEventListener("click",this.toggleCollapsedText)):(this.removeAttribute("open"),this.wrapper.addEventListener("click",this.toggleCollapsedText)),this.isCollapsed=!this.isCollapsed}connectedCallback(){this.wrapper.addEventListener("click",this.toggleCollapsedText),this.toggleButton.addEventListener("click",this.toggleCollapsedText)}disconnectedCallback(){this.wrapper.removeEventListener("click",this.toggleCollapsedText),this.toggleButton.removeEventListener("click",this.toggleCollapsedText)}}window.customElements.define("collapsed-text",CollapsedText); |