Amebis/BesService
2
2
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Refine mistakes display for textarea inputs

Browse Source
This commit is contained in:
Aljaž Grilc 2024-03-21 15:00:47 +01:00
parent 02eb1a22e0
commit 517230ac49
2 changed files with 30 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
index.html
View File

@ -7,26 +7,25 @@
<link rel="stylesheet" href="styles.css" />
<script src="service.js"></script>
</head>
<!-- TODO: Test besService functionality when page includes sidebars, headers, footers, etc. -->
<body>
<div class="bes-service" contenteditable="true">Tukaj vpišite besedilo ki ga želite popraviti.</div>
<br>
<!-- <div class="bes-service" contenteditable="true"></div> -->
<!-- <br />
<div class="bes-service" contenteditable="true"><div>Popravite kar želite.</div></div> -->
<!-- TODO: In the case below, BesService suggests wrong replacement (with included HTML tag) -->
<!-- TODO: In the example below, BesService suggests wrong replacement (with included HTML tag) -->
<!-- <br>
<div class="bes-service" contenteditable="true"><div>Popravite <a href=".">kar želite</a>.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div></div> -->
<br>
<div class="bes-service" contenteditable="true">To je preiskus.</div>
<!-- <br>
<div class="bes-service" contenteditable="true">To je preiskus.</div> -->
<!--<br>
<div class="bes-service" contenteditable="true"><div class="contextual"><p>Madžarski premier Orban je tako očitno vendarle pristal na nadaljnjo makrofinančno pomoč Ukrajini v okviru revizije dolgoročnega proračuna unije 2021-2027. Ta vključuje 50 milijard evrov za Ukrajino za prihodnja štiri leta, od tega 33 milijard evrov posojil in 17 milijard evrov nepovratnih sredstev.</p></div></div>-->
<br>
<div class="bes-service" contenteditable="true"><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div></div>
<!-- <br>
<div class="bes-service" contenteditable="true"><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div></div> -->
<!-- <br>
<div class="bes-service" contenteditable="true"><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite. Na mizo nisem položil knjigo.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div></div> -->
<!-- <br />
<textarea class="bes-service-textarea"></textarea> -->
<br />
<textarea class="bes-service-textarea"></textarea>
<bes-popup-el></bes-popup-el>
</body>
</html>

39
service.js
View File

@ -710,28 +710,17 @@ class BesTAService {
this.cloneDiv = this.createCloneDiv(textAreaEl)
this.service = BesService.register(this.cloneDiv, this)
this.textAreaEl.addEventListener('input', () => this.handleInput())
this.textAreaEl.addEventListener('click', e => {
//TODO: Consider adding some kind of proofing?
this.textAreaEl.style.display = 'none'
const deepestElement = document.elementFromPoint(e.clientX, e.clientY)
this.textAreaEl.style.display = ''
const clickEvent = new CustomEvent('click', {
detail: {
clientX: e.clientX,
clientY: e.clientY,
targetElement: deepestElement
}
})
this.cloneDiv.dispatchEvent(clickEvent)
this.textAreaEl.addEventListener('click', e => this.handleTAClick(e))
this.textAreaEl.addEventListener('scroll', () => {
this.cloneDiv.scrollTop = this.textAreaEl.scrollTop
})
}
createCloneDiv(textAreaEl) {
const cloneDiv = document.createElement('div')
const textAreaRect = textAreaEl.getBoundingClientRect()
cloneDiv.style.top = `${textAreaRect.top}px`
const scrollTop = window.scrollY || document.documentElement.scrollTop
cloneDiv.style.top = `${textAreaRect.top + scrollTop}px`
cloneDiv.style.left = `${textAreaRect.left}px`
const textAreaStyles = window.getComputedStyle(textAreaEl)
cloneDiv.style.fontSize = textAreaStyles.fontSize
@ -739,8 +728,10 @@ class BesTAService {
cloneDiv.style.lineHeight = textAreaStyles.lineHeight
cloneDiv.style.width = textAreaStyles.width
cloneDiv.style.height = textAreaStyles.height
cloneDiv.style.maxHeight = textAreaStyles.height
cloneDiv.style.padding = textAreaStyles.padding
cloneDiv.style.margin = textAreaStyles.margin
cloneDiv.style.overflowY = 'auto'
cloneDiv.style.position = 'absolute'
textAreaEl.style.position = 'relative'
textAreaEl.style.zIndex = 2
@ -762,6 +753,22 @@ class BesTAService {
this.cloneDiv.dispatchEvent(customEvent)
}
handleTAClick(e) {
//TODO: Consider adding some kind of proofing?
this.textAreaEl.style.display = 'none'
const deepestElement = document.elementFromPoint(e.clientX, e.clientY)
this.textAreaEl.style.display = ''
const clickEvent = new CustomEvent('click', {
detail: {
clientX: e.clientX,
clientY: e.clientY,
targetElement: deepestElement
}
})
this.cloneDiv.dispatchEvent(clickEvent)
}
// TODO: think of a way to reposition the cursor after the replacement
handleReplacement(el) {
this.textAreaEl.value = el.outerText