From 6444dab9193dec11f53758241f135a40b4144e32 Mon Sep 17 00:00:00 2001 From: Aljaz Grilc Date: Tue, 19 Mar 2024 08:46:43 +0100 Subject: [PATCH] Implement initial BesTAService class for grammar checking in textarea 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. --- index.html | 34 +++++++++++++++++++++++-------- service.js | 60 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- styles.css | 2 +- 3 files changed, 85 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 987d60a..4f14c4f 100644 --- a/index.html +++ b/index.html @@ -7,24 +7,25 @@ + -
Tukaj vpišite besedilo ki ga želite popraviti.
+ -
-
To je preiskus.
+ -
-
Popravite kar želite.
Na mizo nisem položil knjigo. Popravite kar želite.
Popravite kar želite.
Na mizo nisem položil knjigo. Popravite kar želite. Na mizo nisem položil knjigo.
Popravite kar želite.
Na mizo nisem položil knjigo. Popravite kar želite.
Popravite kar želite.
Na mizo nisem položil knjigo. Popravite kar želite.
Popravite kar želite.
Na mizo nisem položil knjigo. Popravite kar želite.
Popravite kar želite.
Na mizo nisem položil knjigo. Popravite kar želite.
Popravite kar želite.
Na mizo nisem položil knjigo. Popravite kar želite.
Popravite kar želite.
Na mizo nisem položil knjigo. Popravite kar želite.
Popravite kar želite.
Na mizo nisem položil knjigo. Popravite kar želite.
- + +
+ @@ -42,5 +43,22 @@ overflow-y: auto; font-family: Arial, Helvetica, sans-serif; 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; } diff --git a/service.js b/service.js index d66ff98..201cf5b 100644 --- a/service.js +++ b/service.js @@ -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 /// @@ -814,7 +869,6 @@ class BesPopupEl extends HTMLElement { } dragMouseDown(e) { - e = e e.preventDefault() this.initialMouseX = e.clientX this.initialMouseY = e.clientY @@ -824,7 +878,6 @@ class BesPopupEl extends HTMLElement { // Function to handle the mousemove event elementDrag(e) { - e = e e.preventDefault() let diffX = this.initialMouseX - e.clientX @@ -880,6 +933,9 @@ window.onload = () => { document .querySelectorAll('.bes-service') .forEach(hostElement => BesService.register(hostElement)) + document.querySelectorAll('.bes-service-textarea').forEach(hostElement => { + BesTAService.register(hostElement) + }) } window.onresize = () => { diff --git a/styles.css b/styles.css index b92c621..ec88065 100644 --- a/styles.css +++ b/styles.css @@ -11,7 +11,7 @@ } .bes-correction-panel-parent { - z-index: auto; + z-index: 3; top: 0; left: 0; width: 0;