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" /> <link rel="stylesheet" href="styles.css" />
<script src="service.js"></script> <script src="service.js"></script>
</head> </head>
<!-- TODO: Test besService functionality when page includes sidebars, headers, footers, etc. -->
<body> <body>
<div class="bes-service" contenteditable="true">Tukaj vpišite besedilo ki ga želite popraviti.</div> <div class="bes-service" contenteditable="true">Tukaj vpišite besedilo ki ga želite popraviti.</div>
<br> <br>
<!-- <div class="bes-service" contenteditable="true"></div> --> <!-- <div class="bes-service" contenteditable="true"></div> -->
<!-- <br /> <!-- <br />
<div class="bes-service" contenteditable="true"><div>Popravite kar želite.</div></div> --> <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> <!-- <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> --> <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> <!-- <br>
<div class="bes-service" contenteditable="true">To je preiskus.</div> <div class="bes-service" contenteditable="true">To je preiskus.</div> -->
<!--<br> <!--<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>--> <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> <!-- <br>
<div class="bes-service" contenteditable="true"><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div></div> <div class="bes-service" contenteditable="true"><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div></div> -->
<!-- <br> <!-- <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> --> <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 /> <br />
<textarea class="bes-service-textarea"></textarea> --> <textarea class="bes-service-textarea"></textarea>
<bes-popup-el></bes-popup-el> <bes-popup-el></bes-popup-el>
</body> </body>
</html> </html>

39
service.js
View File

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