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;