1 line
4.4 KiB
JavaScript
1 line
4.4 KiB
JavaScript
const textField=document.createElement("template");textField.innerHTML='\n<style>\n *{\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n } \n .text-field{\n display: flex;\n align-items: center;\n }\n .text{\n padding: 0.6rem 0;\n transition: background-color 0.3s;\n border-bottom: 0.15rem solid transparent;\n overflow-wrap: break-word;\n word-wrap: break-word;\n word-break: break-all;\n word-break: break-word;\n -moz-hyphens: auto;\n -webkit-hyphens: auto;\n hyphens: auto;\n }\n .text:focus{\n outline: none;\n border-bottom: 0.15rem solid var(--accent-color);\n }\n :host([editable]) .text{\n border-bottom: 0.15rem solid rgba(var(--text-color, 17,17,17), 0.6);\n }\n :host([editable]:focus-within) .text{\n border-bottom: 0.15rem solid var(--accent-color);\n }\n .edit-button{\n display: inline-flex;\n justify-content: center;\n cursor: pointer;\n border: none;\n padding: 0.4rem;\n background-color: rgba(var(--text-color, (17,17,17)), 0.06);\n border-radius: var(--button-border-radius, 0.3rem);\n transition: background-color 0.2s;\n font-family: inherit;\n color: inherit;\n font-size: 0.7rem;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.05rem;\n margin-left: 0.3rem;\n }\n .edit-button:active{\n background-color: rgba(var(--text-color, (17,17,17)), 0.1);\n }\n .hide{\n display: none;\n }\n @media (any-hover: hover){\n .edit-button:hover{\n background-color: rgba(var(--text-color, (17,17,17)), 0.1);\n }\n }\n</style>\n<div class="text-field">\n <div class="text" part="text"></div>\n <button class="edit-button" part="edit-button">Edit</button>\n</div>\n',customElements.define("text-field",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(textField.content.cloneNode(!0)),this.textField=this.shadowRoot.querySelector(".text-field"),this.textContainer=this.textField.children[0],this.editButton=this.textField.querySelector(".edit-button"),this.isTextEditable=!1,this.isDisabled=!1,this.setEditable=this.setEditable.bind(this),this.setNonEditable=this.setNonEditable.bind(this),this.toggleEditable=this.toggleEditable.bind(this),this.revert=this.revert.bind(this)}static get observedAttributes(){return["disable"]}get value(){return this.text}set value(t){this.text=t,this.textContainer.textContent=t,this.setAttribute("value",t)}set disabled(t){this.isDisabled=t,this.isDisabled?this.setAttribute("disable",""):this.removeAttribute("disable")}setEditable(){this.isTextEditable||(this.textContainer.contentEditable=!0,this.setAttribute("editable",""),this.textContainer.focus(),document.execCommand("selectAll",!1,null),this.editButton.textContent="Done",this.isTextEditable=!0)}setNonEditable(){this.isTextEditable&&(this.textContainer.contentEditable=!1,this.removeAttribute("editable"),this.text!==this.textContainer.textContent.trim()&&(this.setAttribute("value",this.textContainer.textContent),this.text=this.textContainer.textContent.trim(),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0,composed:!0}))),this.editButton.textContent="Edit",this.isTextEditable=!1)}toggleEditable(){this.isTextEditable?this.setNonEditable():this.setEditable()}revert(){this.textContainer.isContentEditable&&(this.value=this.text,this.setNonEditable())}connectedCallback(){this.text,this.hasAttribute("value")&&(this.text=this.getAttribute("value"),this.textContainer.textContent=this.text),this.hasAttribute("disable")?this.isDisabled=!0:this.isDisabled=!1,this.isDisabled||(this.textContainer.addEventListener("dblclick",this.setEditable),this.editButton.addEventListener("click",this.toggleEditable))}attributeChangedCallback(t){"disable"===t&&(this.hasAttribute("disable")?(this.editButton.classList.add("hide"),this.textContainer.removeEventListener("dblclick",this.setEditable),this.editButton.removeEventListener("click",this.toggleEditable),this.revert()):(this.editButton.classList.remove("hide"),this.textContainer.addEventListener("dblclick",this.setEditable),this.editButton.addEventListener("click",this.toggleEditable)))}disconnectedCallback(){this.textContainer.removeEventListener("dblclick",this.setEditable),this.editButton.removeEventListener("click",this.toggleEditable)}}); |