107 lines
3.7 KiB
TypeScript
107 lines
3.7 KiB
TypeScript
import { $ } from "mdui"
|
|
|
|
export default class MduiPatchedTextAreaElement extends HTMLElement {
|
|
static observedAttributes = ['value', 'placeholder']
|
|
declare inputDiv?: HTMLDivElement
|
|
declare inputContainerDiv?: HTMLDivElement
|
|
declare placeholder?: string | number | null
|
|
constructor() {
|
|
super()
|
|
|
|
this.attachShadow({ mode: 'open' })
|
|
}
|
|
|
|
_lastValue = ''
|
|
connectedCallback() {
|
|
const shadow = this.shadowRoot as ShadowRoot
|
|
|
|
this.inputContainerDiv = new DOMParser().parseFromString(`
|
|
<div style="overflow-y: auto; height: 100%;">
|
|
<div role="textbox" aria-multiline="true" aria-labelledby="txtboxMultilineLabel" contentEditable="true" style="outline: none !important; color: rgb(var(--mdui-color-on-surface-variant)); display: inline-block; word-break: break-word; white-space: pre-wrap;"></div>
|
|
<style>
|
|
[contenteditable="true"]:empty:before {
|
|
content: attr(data-placeholder);
|
|
}
|
|
*::-webkit-scrollbar {
|
|
width: 7px;
|
|
height: 10px;
|
|
}
|
|
|
|
*::-webkit-scrollbar-track {
|
|
width: 6px;
|
|
background: rgba(#101f1c, 0.1);
|
|
-webkit-border-radius: 2em;
|
|
-moz-border-radius: 2em;
|
|
border-radius: 2em;
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb {
|
|
background-color: rgba(144, 147, 153, 0.5);
|
|
background-clip: padding-box;
|
|
min-height: 28px;
|
|
-webkit-border-radius: 2em;
|
|
-moz-border-radius: 2em;
|
|
border-radius: 2em;
|
|
transition: background-color 0.3s;
|
|
cursor: pointer;
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb:hover {
|
|
background-color: rgba(144, 147, 153, 0.3);
|
|
}
|
|
</style>
|
|
</div>
|
|
`, 'text/html').body.firstChild as HTMLDivElement
|
|
|
|
this.inputDiv = this.inputContainerDiv.children[0] as HTMLDivElement
|
|
|
|
this.inputDiv.addEventListener('blur', () => {
|
|
if (this._lastValue !== this.value) {
|
|
this._lastValue = this.value || ''
|
|
this.dispatchEvent(new Event('change', { bubbles: true }))
|
|
}
|
|
})
|
|
this.inputDiv.addEventListener('paste', (e: ClipboardEvent) => {
|
|
e.preventDefault()
|
|
document.execCommand('insertText', false, e.clipboardData?.getData("text/plain") || '')
|
|
})
|
|
|
|
this.inputDiv.style.width = '100%'
|
|
|
|
$(this.inputDiv).attr('data-placeholder', $(this).attr('placeholder'))
|
|
|
|
shadow.appendChild(this.inputContainerDiv)
|
|
}
|
|
attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
|
|
// console.log(this.inputDiv, name, oldValue, newValue)
|
|
switch (name) {
|
|
case 'value': {
|
|
this.value = newValue || ''
|
|
break
|
|
}
|
|
case 'placeholder': {
|
|
this.inputDiv && $(this.inputDiv).attr('data-placeholder', newValue)
|
|
break
|
|
}
|
|
}
|
|
}
|
|
focus() {
|
|
this.inputDiv?.focus()
|
|
}
|
|
blur() {
|
|
this.inputDiv?.blur()
|
|
}
|
|
checkValidity() {
|
|
// TODO: implment this method
|
|
return true
|
|
}
|
|
get value() {
|
|
return this.inputDiv?.textContent || ''
|
|
}
|
|
set value(v) {
|
|
this.inputDiv && (this.inputDiv.textContent = v)
|
|
}
|
|
}
|
|
|
|
customElements.define('mdui-patched-textarea', MduiPatchedTextAreaElement)
|