Improve displaying mistakes count and add TODOs
This commit is contained in:
parent
cdfe9618c2
commit
73d7706749
21
index.html
21
index.html
@ -9,23 +9,24 @@
|
||||
</head>
|
||||
<!-- TODO: Test besService functionality when page includes sidebars, headers, footers, etc. -->
|
||||
<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>
|
||||
<div class="bes-service" contenteditable="true"></div> -->
|
||||
<!-- <div class="bes-service" contenteditable="true"></div> -->
|
||||
<!-- <br />
|
||||
<div class="bes-service" contenteditable="true"><div>Popravite kar želite.</div></div>
|
||||
<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 kar želite.</div></div> -->
|
||||
<!-- TODO: In the case below, BesService suggests wrong replacement (with included HTML tag) -->
|
||||
<!-- <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>
|
||||
<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>
|
||||
<div class="bes-service" contenteditable="true"><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div></div>-->
|
||||
<br>
|
||||
<div class="bes-service" contenteditable="true"><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div></div>
|
||||
<!-- <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> -->
|
||||
<br />
|
||||
<textarea class="bes-service-textarea"></textarea>
|
||||
<!-- <br />
|
||||
<textarea class="bes-service-textarea"></textarea> -->
|
||||
<bes-popup-el></bes-popup-el>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
33
service.js
33
service.js
@ -44,6 +44,7 @@ class BesService {
|
||||
service.proof(hostElement)
|
||||
if (service.statusIcon.classList.contains('bes-status-loading')) {
|
||||
service.updateStatusIcon('bes-status-success')
|
||||
service.statusDiv.title = 'BesService je registriran.'
|
||||
}
|
||||
if (textAreaService) service.textAreaService = textAreaService
|
||||
return service
|
||||
@ -76,7 +77,7 @@ class BesService {
|
||||
*/
|
||||
async proof(node) {
|
||||
this.updateStatusIcon('bes-status-loading')
|
||||
let mistakesCounter = 0
|
||||
this.statusDiv.title = 'BesService je v procesu preverjanja pravopisa.'
|
||||
switch (node.nodeType) {
|
||||
case Node.TEXT_NODE:
|
||||
return [{ text: node.textContent, node: node, markup: false }]
|
||||
@ -115,13 +116,13 @@ class BesService {
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
this.updateStatusIcon('bes-status-error')
|
||||
this.statusDiv.title = 'Napaka pri preverjanju pravopisa.'
|
||||
throw new Error('Backend server response was not OK')
|
||||
}
|
||||
return response.json()
|
||||
})
|
||||
.then(responseData => {
|
||||
let matches = []
|
||||
mistakesCounter += responseData.matches.length
|
||||
responseData.matches.forEach(match => {
|
||||
let range = document.createRange()
|
||||
|
||||
@ -170,16 +171,19 @@ class BesService {
|
||||
match: match
|
||||
})
|
||||
})
|
||||
this.markProofed(node, matches, mistakesCounter)
|
||||
this.markProofed(node, matches)
|
||||
})
|
||||
.catch(error => {
|
||||
if (error.name === 'AbortError') return
|
||||
this.updateStatusIcon('bes-status-error')
|
||||
this.statusDiv.title = 'Napaka pri preverjanju pravopisa.'
|
||||
throw new 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 }]
|
||||
} else {
|
||||
// Surround inline element with dummy <tagName>...</tagName>.
|
||||
@ -274,7 +278,7 @@ class BesService {
|
||||
* @param {Element} el DOM element that was checked
|
||||
* @param {Array} matches Grammar mistakes
|
||||
*/
|
||||
markProofed(el, matches, mistakesCounter) {
|
||||
markProofed(el, matches) {
|
||||
this.removeChild(el)
|
||||
this.children.push({
|
||||
isProofed: true,
|
||||
@ -282,8 +286,18 @@ class BesService {
|
||||
matches: matches
|
||||
})
|
||||
|
||||
if (mistakesCounter > 0) this.updateStatusIcon('bes-status-mistakes')
|
||||
else this.updateStatusIcon('bes-status-success')
|
||||
// TODO: This also shows the count of mistakes that are not visible, meaning that they are hidden behind the shown ones.
|
||||
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) {
|
||||
const hRects = hostElement.getBoundingClientRect()
|
||||
const scrollTop = window.scrollY || document.documentElement.scrollTop
|
||||
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) {
|
||||
@ -636,8 +651,8 @@ class BesCKService extends BesService {
|
||||
* @param {Element} el DOM element that was checked
|
||||
* @param {Array} matches Grammar mistakes
|
||||
*/
|
||||
markProofed(el, matches, mistakesCounter) {
|
||||
super.markProofed(el, matches, mistakesCounter)
|
||||
markProofed(el, matches) {
|
||||
super.markProofed(el, matches)
|
||||
|
||||
// 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'))
|
||||
|
||||
@ -78,7 +78,7 @@
|
||||
height: 30px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
cursor: pointer;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.bes-status-icon.bes-status-success {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user