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

Implement initial BesTAService class for grammar checking in textarea

Browse Source 
This commit introduces the BesTAService class, which is designed to register a grammar checking service for textarea elements. The core logic has been written, although the class is not yet fully functional.
This commit is contained in:
Aljaž Grilc 2024-03-19 08:46:43 +01:00
parent 2d1195ee96
commit 6444dab919
3 changed files with 85 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
index.html
View File

@ -7,24 +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>
<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 class="bes-service-textarea"></textarea>
<bes-popup-el></bes-popup-el> <bes-popup-el></bes-popup-el>
</body> </body>
</html> </html>
@ -42,5 +43,22 @@
overflow-y: auto; overflow-y: auto;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
z-index: 2; z-index: 2;
position: relative;
}
.bes-service-textarea {
width: 80%;
height: 300px;
margin: 0 auto;
padding: 20px;
border-radius: 10px;
background-color: #f5f5f5;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
line-height: 1.6;
white-space: pre-wrap;
overflow-y: auto;
font-family: Arial, Helvetica, sans-serif;
z-index: 2;
position: relative;
} }
</style> </style>

60
service.js
View File

@ -669,6 +669,61 @@ class BesCKService extends BesService {
} }
} }
class BesTAService {
constructor(textAreaEl) {
this.textAreaEl = textAreaEl
this.textAreaEl.spellcheck = false
this.cloneDiv = this.createCloneDiv(textAreaEl)
this.service = BesService.register(this.cloneDiv)
this.textAreaEl.addEventListener('input', () => this.handleInput())
}
createCloneDiv(textAreaEl) {
const cloneDiv = document.createElement('div')
const textAreaRect = textAreaEl.getBoundingClientRect()
cloneDiv.style.top = `${textAreaRect.top}px`
cloneDiv.style.left = `${textAreaRect.left}px`
const textAreaStyles = window.getComputedStyle(textAreaEl)
cloneDiv.style.fontSize = textAreaStyles.fontSize
cloneDiv.style.fontFamily = textAreaStyles.fontFamily
cloneDiv.style.lineHeight = textAreaStyles.lineHeight
cloneDiv.style.width = textAreaStyles.width
cloneDiv.style.height = textAreaStyles.height
cloneDiv.style.padding = textAreaStyles.padding
cloneDiv.style.margin = textAreaStyles.margin
cloneDiv.style.position = 'absolute'
textAreaEl.style.position = 'relative'
textAreaEl.style.zIndex = 2
textAreaEl.parentNode.insertBefore(cloneDiv, textAreaEl)
return cloneDiv
}
handleInput() {
const customEvent = new InputEvent('beforeinput')
const lines = this.textAreaEl.value.split('\n')
this.cloneDiv.innerHTML = ''
lines.forEach(line => {
const divEl = document.createElement('div')
divEl.textContent = line
this.cloneDiv.appendChild(divEl)
})
this.cloneDiv.dispatchEvent(customEvent)
}
/**
* Registers grammar checking service
*
* @param {Element} textAreaEl DOM element to register grammar checking service for
* @returns {BesTAService} Grammar checking service instance
*/
static register(textAreaEl) {
let service = new BesTAService(textAreaEl)
return service
}
}
/// ///
/// Grammar mistake popup dialog /// Grammar mistake popup dialog
/// ///
@ -814,7 +869,6 @@ class BesPopupEl extends HTMLElement {
} }
dragMouseDown(e) { dragMouseDown(e) {
e = e
e.preventDefault() e.preventDefault()
this.initialMouseX = e.clientX this.initialMouseX = e.clientX
this.initialMouseY = e.clientY this.initialMouseY = e.clientY
@ -824,7 +878,6 @@ class BesPopupEl extends HTMLElement {
// Function to handle the mousemove event // Function to handle the mousemove event
elementDrag(e) { elementDrag(e) {
e = e
e.preventDefault() e.preventDefault()
let diffX = this.initialMouseX - e.clientX let diffX = this.initialMouseX - e.clientX
@ -880,6 +933,9 @@ window.onload = () => {
document document
.querySelectorAll('.bes-service') .querySelectorAll('.bes-service')
.forEach(hostElement => BesService.register(hostElement)) .forEach(hostElement => BesService.register(hostElement))
document.querySelectorAll('.bes-service-textarea').forEach(hostElement => {
BesTAService.register(hostElement)
})
} }
window.onresize = () => { window.onresize = () => {

2
styles.css
View File

@ -11,7 +11,7 @@
} }
.bes-correction-panel-parent { .bes-correction-panel-parent {
z-index: auto; z-index: 3;
top: 0; top: 0;
left: 0; left: 0;
width: 0; width: 0;