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

Improve displaying mistakes count and add TODOs

Browse Source
This commit is contained in:
Aljaž Grilc 2024-03-21 09:51:36 +01:00
parent cdfe9618c2
commit 73d7706749
3 changed files with 37 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
index.html
View File

@ -9,23 +9,24 @@
</head> </head>
<!-- TODO: Test besService functionality when page includes sidebars, headers, footers, etc. --> <!-- 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> <!-- TODO: In the case below, BesService suggests wrong replacement (with included HTML tag) -->
<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"><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> <!--<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>

33
service.js
View File

@ -44,6 +44,7 @@ class BesService {
service.proof(hostElement) service.proof(hostElement)
if (service.statusIcon.classList.contains('bes-status-loading')) { if (service.statusIcon.classList.contains('bes-status-loading')) {
service.updateStatusIcon('bes-status-success') service.updateStatusIcon('bes-status-success')
service.statusDiv.title = 'BesService je registriran.'
} }
if (textAreaService) service.textAreaService = textAreaService if (textAreaService) service.textAreaService = textAreaService
return service return service
@ -76,7 +77,7 @@ class BesService {
*/ */
async proof(node) { async proof(node) {
this.updateStatusIcon('bes-status-loading') this.updateStatusIcon('bes-status-loading')
let mistakesCounter = 0 this.statusDiv.title = 'BesService je v procesu preverjanja pravopisa.'
switch (node.nodeType) { switch (node.nodeType) {
case Node.TEXT_NODE: case Node.TEXT_NODE:
return [{ text: node.textContent, node: node, markup: false }] return [{ text: node.textContent, node: node, markup: false }]
@ -115,13 +116,13 @@ class BesService {
.then(response => { .then(response => {
if (!response.ok) { if (!response.ok) {
this.updateStatusIcon('bes-status-error') this.updateStatusIcon('bes-status-error')
this.statusDiv.title = 'Napaka pri preverjanju pravopisa.'
throw new Error('Backend server response was not OK') throw new Error('Backend server response was not OK')
} }
return response.json() return response.json()
}) })
.then(responseData => { .then(responseData => {
let matches = [] let matches = []
mistakesCounter += responseData.matches.length
responseData.matches.forEach(match => { responseData.matches.forEach(match => {
let range = document.createRange() let range = document.createRange()
@ -170,16 +171,19 @@ class BesService {
match: match match: match
}) })
}) })
this.markProofed(node, matches, mistakesCounter) this.markProofed(node, matches)
}) })
.catch(error => { .catch(error => {
if (error.name === 'AbortError') return if (error.name === 'AbortError') return
this.updateStatusIcon('bes-status-error') this.updateStatusIcon('bes-status-error')
this.statusDiv.title = 'Napaka pri preverjanju pravopisa.'
throw new Error( throw new Error(
'Parsing backend server response failed: ' + error 'Parsing backend server response failed: ' + error
) )
}) })
} }
this.updateStatusIcon('bes-status-success')
this.statusDiv.title = 'BesService je registriran.'
return [{ text: '<' + node.tagName + '/>', node: node, markup: true }] return [{ text: '<' + node.tagName + '/>', node: node, markup: true }]
} else { } else {
// Surround inline element with dummy <tagName>...</tagName>. // Surround inline element with dummy <tagName>...</tagName>.
@ -274,7 +278,7 @@ class BesService {
* @param {Element} el DOM element that was checked * @param {Element} el DOM element that was checked
* @param {Array} matches Grammar mistakes * @param {Array} matches Grammar mistakes
*/ */
markProofed(el, matches, mistakesCounter) { markProofed(el, matches) {
this.removeChild(el) this.removeChild(el)
this.children.push({ this.children.push({
isProofed: true, isProofed: true,
@ -282,8 +286,18 @@ class BesService {
matches: matches matches: matches
}) })
if (mistakesCounter > 0) this.updateStatusIcon('bes-status-mistakes') // TODO: This also shows the count of mistakes that are not visible, meaning that they are hidden behind the shown ones.
else this.updateStatusIcon('bes-status-success') const count = this.children.reduce(
(total, child) => total + child.matches.length,
0
)
if (count > 0) {
this.updateStatusIcon('bes-status-mistakes')
this.statusDiv.title = 'Število napak: ' + count
} else {
this.updateStatusIcon('bes-status-success')
this.statusDiv.title = 'V besedilu ni napak.'
}
} }
/** /**
@ -594,8 +608,9 @@ class BesService {
setStatusDivPosition(hostElement, statusDiv) { setStatusDivPosition(hostElement, statusDiv) {
const hRects = hostElement.getBoundingClientRect() const hRects = hostElement.getBoundingClientRect()
const scrollTop = window.scrollY || document.documentElement.scrollTop
statusDiv.style.left = hRects.right - 40 + 'px' statusDiv.style.left = hRects.right - 40 + 'px'
statusDiv.style.top = hRects.top + hRects.height - 30 + 'px' statusDiv.style.top = hRects.top + hRects.height - 30 + scrollTop + 'px'
} }
static isPointInRect(x, y, rect) { static isPointInRect(x, y, rect) {
@ -636,8 +651,8 @@ class BesCKService extends BesService {
* @param {Element} el DOM element that was checked * @param {Element} el DOM element that was checked
* @param {Array} matches Grammar mistakes * @param {Array} matches Grammar mistakes
*/ */
markProofed(el, matches, mistakesCounter) { markProofed(el, matches) {
super.markProofed(el, matches, mistakesCounter) super.markProofed(el, matches)
// This is a solution for displaying mistakes in CKEditor. It is not the best solution, but it works for now. // This is a solution for displaying mistakes in CKEditor. It is not the best solution, but it works for now.
if (this.ckEditorInstance) window.dispatchEvent(new Event('resize')) if (this.ckEditorInstance) window.dispatchEvent(new Event('resize'))

2
styles.css
View File

@ -78,7 +78,7 @@
height: 30px; height: 30px;
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
cursor: pointer; cursor: help;
} }
.bes-status-icon.bes-status-success { .bes-status-icon.bes-status-success {