1 line
5.6 KiB
JavaScript
1 line
5.6 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 :host{\n --accent-color: #4d2588;\n --text-color: 17, 17, 17;\n --background-color: 255, 255, 255;\n }\n .text-field{\n display: flex;\n align-items: center;\n }\n .text{\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 .text:focus-visible{\n outline: none;\n background: solid rgba(var(--text-color), 0.06);\n }\n .editable{\n border-bottom: 0.15rem solid rgba(var(--text-color), 0.6);\n }\n .edit-button{\n display: grid;\n position: relative;\n margin-left: 0.5rem;\n background-color: transparent;\n border: none;\n }\n :host([disabled]) .edit-button{\n display: none;\n }\n .icon{\n grid-area: 1/-1;\n cursor: pointer;\n height: 1.2rem;\n width: 1.2rem;\n fill: rgba(var(--text-color), 1);\n }\n .hide{\n visibility: hidden;\n }\n</style>\n<div class="text-field">\n <div class="text" part="text"></div>\n <button class="edit-button">\n <svg class="icon" title="edit" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>\n <svg class="icon hide" title="Save" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>\n </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.iconsContainer=this.textField.children[1],this.editButton=this.textField.querySelector(".edit-button"),this.isTextEditable=!1,this.isDisabled=!1,this.fireEvent=this.fireEvent.bind(this),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["disabled","value"]}get value(){return this.text}set value(t){this.setAttribute("value",t)}set disabled(t){this.isDisabled=t,this.isDisabled?this.setAttribute("disabled",""):this.removeAttribute("disabled")}fireEvent(t){let e=new CustomEvent("change",{bubbles:!0,cancelable:!0,composed:!0,detail:{value:t}});this.dispatchEvent(e)}setEditable(){this.isTextEditable||(this.textContainer.contentEditable=!0,this.textContainer.classList.add("editable"),this.textContainer.focus(),document.execCommand("selectAll",!1,null),this.editButton.children[0].animate(this.rotateOut,this.animOptions).onfinish=(()=>{this.editButton.children[0].classList.add("hide")}),setTimeout(()=>{this.editButton.children[1].classList.remove("hide"),this.editButton.children[1].animate(this.rotateIn,this.animOptions)},100),this.isTextEditable=!0)}setNonEditable(){if(!this.isTextEditable)return;this.textContainer.contentEditable=!1,this.textContainer.classList.remove("editable");const t=this.textContainer.textContent.trim();this.text!==t&&""!==t?(this.setAttribute("value",this.textContainer.textContent),this.text=this.textContainer.textContent.trim(),this.fireEvent(this.text)):this.value=this.text,this.editButton.children[1].animate(this.rotateOut,this.animOptions).onfinish=(()=>{this.editButton.children[1].classList.add("hide")}),setTimeout(()=>{this.editButton.children[0].classList.remove("hide"),this.editButton.children[0].animate(this.rotateIn,this.animOptions)},100),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("disabled")?this.isDisabled=!0:this.isDisabled=!1,this.rotateOut=[{transform:"rotate(0)",opacity:1},{transform:"rotate(90deg)",opacity:0}],this.rotateIn=[{transform:"rotate(-90deg)",opacity:0},{transform:"rotate(0)",opacity:1}],this.animOptions={duration:300,easing:"cubic-bezier(0.175, 0.885, 0.32, 1.275)",fill:"forwards"},this.isDisabled||(this.iconsContainer.classList.remove("hide"),this.textContainer.addEventListener("dblclick",this.setEditable),this.editButton.addEventListener("click",this.toggleEditable))}attributeChangedCallback(t,e,i){"disabled"===t?this.hasAttribute("disabled")?(this.textContainer.removeEventListener("dblclick",this.setEditable),this.editButton.removeEventListener("click",this.toggleEditable),this.revert()):(this.textContainer.addEventListener("dblclick",this.setEditable),this.editButton.addEventListener("click",this.toggleEditable)):"value"===t&&(this.text=i,this.textContainer.textContent=i)}disconnectedCallback(){this.textContainer.removeEventListener("dblclick",this.setEditable),this.editButton.removeEventListener("click",this.toggleEditable)}}); |