Display besService status icon in bottom-right corner
The .svg icons were created on www.svgrepo.com and have PD License
This commit is contained in:
parent
3bb8b6df1c
commit
9680ece493
11
images/checkmark-svgrepo-com.svg
Normal file
11
images/checkmark-svgrepo-com.svg
Normal file
@ -0,0 +1,11 @@
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
|
||||
<svg fill="#000000" width="800px" height="800px" viewBox="0 0 24 24" id="check-mark-square" data-name="Flat Line" xmlns="http://www.w3.org/2000/svg" class="icon flat-line">
|
||||
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
|
||||
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<g id="SVGRepo_iconCarrier">
|
||||
<rect id="secondary" x="3" y="3" width="18" height="18" rx="1" style="fill: #7ce467; stroke-width: 2;"/>
|
||||
<polyline id="primary" points="16 9.5 11 14.5 8 11.5" style="fill: none; stroke: #000000; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"/>
|
||||
<rect id="primary-2" data-name="primary" x="3" y="3" width="18" height="18" rx="1" style="fill: none; stroke: #000000; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 979 B |
16
images/error-svgrepo-com.svg
Normal file
16
images/error-svgrepo-com.svg
Normal file
@ -0,0 +1,16 @@
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 0 24.00 24.00" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
|
||||
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
|
||||
|
||||
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
|
||||
<g id="SVGRepo_iconCarrier">
|
||||
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm-1.5-5.009c0-.867.659-1.491 1.491-1.491.85 0 1.509.624 1.509 1.491 0 .867-.659 1.509-1.509 1.509-.832 0-1.491-.642-1.491-1.509zM11.172 6a.5.5 0 0 0-.499.522l.306 7a.5.5 0 0 0 .5.478h1.043a.5.5 0 0 0 .5-.478l.305-7a.5.5 0 0 0-.5-.522h-1.655z" fill="#f03838"/>
|
||||
|
||||
</g>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 845 B |
7
images/loading-svgrepo-com.svg
Normal file
7
images/loading-svgrepo-com.svg
Normal file
@ -0,0 +1,7 @@
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
|
||||
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<g id="SVGRepo_iconCarrier"> <path d="M12 2.99988V5.99988M12 20.9999V17.9999M4.20577 16.4999L6.80385 14.9999M21 11.9999H18M16.5 19.7941L15 17.196M3 11.9999H6M7.5 4.20565L9 6.80373M7.5 19.7941L9 17.196M19.7942 16.4999L17.1962 14.9999M4.20577 7.49988L6.80385 8.99988" stroke="#5eb3e8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 776 B |
12
images/mistake-svgrepo-com.svg
Normal file
12
images/mistake-svgrepo-com.svg
Normal file
@ -0,0 +1,12 @@
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
|
||||
<svg fill="#000000" width="800px" height="800px" viewBox="0 0 24 24" id="file-corrupt" data-name="Line Color" xmlns="http://www.w3.org/2000/svg" class="icon line-color">
|
||||
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
|
||||
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<g id="SVGRepo_iconCarrier">
|
||||
<line id="secondary-upstroke" x1="18.95" y1="20.5" x2="19.05" y2="20.5" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; stroke: #ec4141;"/>
|
||||
<path id="primary" d="M14,21H6a1,1,0,0,1-1-1V4A1,1,0,0,1,6,3H17l2,2V9" style="fill: none; stroke: #000000; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"/>
|
||||
<polygon id="primary-2" data-name="primary" points="19 5 17 5 17 3 19 5" style="fill: none; stroke: #000000; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"/>
|
||||
<path id="secondary" d="M15,17H9m0-4h6M9,9h6m4,7V13" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; stroke: #ec4141;"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
50
service.js
50
service.js
@ -12,10 +12,11 @@ class BesService {
|
||||
this.hostElement = hostElement
|
||||
this.timer = null
|
||||
this.children = []
|
||||
const { correctionPanel, scrollPanel } =
|
||||
const { correctionPanel, scrollPanel, statusIcon } =
|
||||
this.createCorrectionPanel(hostElement)
|
||||
this.correctionPanel = correctionPanel
|
||||
this.scrollPanel = scrollPanel
|
||||
this.statusIcon = statusIcon
|
||||
this.offsetTop = null
|
||||
this.originalSpellcheck = hostElement.spellcheck
|
||||
this.abortController = new AbortController()
|
||||
@ -39,6 +40,9 @@ class BesService {
|
||||
static register(hostElement) {
|
||||
let service = new BesService(hostElement)
|
||||
service.proof(hostElement)
|
||||
if (service.statusIcon.classList.contains('bes-status-loading')) {
|
||||
service.updateStatusIcon('bes-status-success')
|
||||
}
|
||||
return service
|
||||
}
|
||||
|
||||
@ -68,6 +72,8 @@ class BesService {
|
||||
* @returns {Array} Markup of text to proof using BesStr
|
||||
*/
|
||||
async proof(node) {
|
||||
this.updateStatusIcon('bes-status-loading')
|
||||
let mistakesCounter = 0
|
||||
switch (node.nodeType) {
|
||||
case Node.TEXT_NODE:
|
||||
return [{ text: node.textContent, node: node, markup: false }]
|
||||
@ -105,13 +111,14 @@ class BesService {
|
||||
fetch(request, { signal })
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
// TODO: Make connectivity and BesStr issues non-fatal. But show an error sign somewhere in the UI.
|
||||
this.updateStatusIcon('bes-status-error')
|
||||
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()
|
||||
|
||||
@ -160,11 +167,11 @@ class BesService {
|
||||
match: match
|
||||
})
|
||||
})
|
||||
this.markProofed(node, matches)
|
||||
this.markProofed(node, matches, mistakesCounter)
|
||||
})
|
||||
.catch(error => {
|
||||
if (error.name === 'AbortError') return
|
||||
// TODO: Make parsing issues non-fatal. But show an error sign somewhere in the UI.
|
||||
this.updateStatusIcon('bes-status-error')
|
||||
throw new Error(
|
||||
'Parsing backend server response failed: ' + error
|
||||
)
|
||||
@ -204,7 +211,11 @@ class BesService {
|
||||
panelParent.appendChild(correctionPanel)
|
||||
hostElement.parentElement.insertBefore(panelParent, hostElement)
|
||||
|
||||
return { correctionPanel, scrollPanel }
|
||||
const statusIcon = document.createElement('div')
|
||||
statusIcon.classList.add('bes-status-icon')
|
||||
correctionPanel.appendChild(statusIcon)
|
||||
|
||||
return { correctionPanel, scrollPanel, statusIcon }
|
||||
}
|
||||
|
||||
/**
|
||||
@ -256,13 +267,16 @@ class BesService {
|
||||
* @param {Element} el DOM element that was checked
|
||||
* @param {Array} matches Grammar mistakes
|
||||
*/
|
||||
markProofed(el, matches) {
|
||||
markProofed(el, matches, mistakesCounter) {
|
||||
this.removeChild(el)
|
||||
this.children.push({
|
||||
isProofed: true,
|
||||
element: el,
|
||||
matches: matches
|
||||
})
|
||||
|
||||
if (mistakesCounter > 0) this.updateStatusIcon('bes-status-mistakes')
|
||||
else this.updateStatusIcon('bes-status-success')
|
||||
}
|
||||
|
||||
/**
|
||||
@ -331,6 +345,19 @@ class BesService {
|
||||
return { clientRects, highlights }
|
||||
}
|
||||
|
||||
updateStatusIcon(status) {
|
||||
const statuses = [
|
||||
'bes-status-loading',
|
||||
'bes-status-success',
|
||||
'bes-status-mistakes',
|
||||
'bes-status-error'
|
||||
]
|
||||
statuses.forEach(statusClass => {
|
||||
this.statusIcon.classList.remove(statusClass)
|
||||
})
|
||||
this.statusIcon.classList.add(status)
|
||||
}
|
||||
|
||||
/**
|
||||
* Tests if given element is block element.
|
||||
*
|
||||
@ -536,12 +563,7 @@ class BesService {
|
||||
|
||||
setCorrectionPanelSize(hostElement, correctionPanel, scrollPanel) {
|
||||
const styles = window.getComputedStyle(hostElement)
|
||||
const totalWidth =
|
||||
parseFloat(styles.width) +
|
||||
parseFloat(styles.marginLeft) +
|
||||
parseFloat(styles.marginRight) +
|
||||
parseFloat(styles.paddingLeft) +
|
||||
parseFloat(styles.paddingRight)
|
||||
const totalWidth = parseFloat(styles.width)
|
||||
const totalHeight =
|
||||
parseFloat(styles.height) +
|
||||
parseFloat(styles.marginTop) +
|
||||
@ -550,6 +572,10 @@ class BesService {
|
||||
parseFloat(styles.paddingBottom)
|
||||
correctionPanel.style.width = totalWidth + 'px'
|
||||
correctionPanel.style.height = totalHeight + 'px'
|
||||
correctionPanel.style.marginLeft = styles.marginLeft
|
||||
correctionPanel.style.marginRight = styles.marginRight
|
||||
correctionPanel.style.paddingLeft = styles.paddingLeft
|
||||
correctionPanel.style.paddingRight = styles.paddingRight
|
||||
scrollPanel.style.height = hostElement.scrollHeight + 'px'
|
||||
}
|
||||
|
||||
|
||||
26
styles.css
26
styles.css
@ -64,3 +64,29 @@
|
||||
outline: initial;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.bes-status-icon {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
bottom: 5px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.bes-status-icon.bes-status-success {
|
||||
background-image: url('/images/checkmark-svgrepo-com.svg');
|
||||
}
|
||||
|
||||
.bes-status-icon.bes-status-loading {
|
||||
background-image: url('/images/loading-svgrepo-com.svg');
|
||||
}
|
||||
|
||||
.bes-status-icon.bes-status-error {
|
||||
background-image: url('/images/error-svgrepo-com.svg');
|
||||
}
|
||||
|
||||
.bes-status-icon.bes-status-mistakes {
|
||||
background-image: url('/images/mistake-svgrepo-com.svg');
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user