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

Implement creation and positioning of statusDiv within registered hostElement

Browse Source
This commit is contained in:
Aljaž Grilc 2024-03-21 08:04:32 +01:00
parent a48597b979
commit cdfe9618c2
2 changed files with 22 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
service.js
View File

@ -12,10 +12,11 @@ class BesService {
this.hostElement = hostElement this.hostElement = hostElement
this.timer = null this.timer = null
this.children = [] this.children = []
const { correctionPanel, scrollPanel, statusIcon } = const { correctionPanel, scrollPanel, statusDiv, statusIcon } =
this.createCorrectionPanel(hostElement) this.createCorrectionPanel(hostElement)
this.correctionPanel = correctionPanel this.correctionPanel = correctionPanel
this.scrollPanel = scrollPanel this.scrollPanel = scrollPanel
this.statusDiv = statusDiv
this.statusIcon = statusIcon this.statusIcon = statusIcon
this.offsetTop = null this.offsetTop = null
this.textAreaService = null this.textAreaService = null
@ -213,11 +214,15 @@ class BesService {
panelParent.appendChild(correctionPanel) panelParent.appendChild(correctionPanel)
hostElement.parentElement.insertBefore(panelParent, hostElement) hostElement.parentElement.insertBefore(panelParent, hostElement)
const statusDiv = document.createElement('div')
statusDiv.classList.add('bes-status-div')
const statusIcon = document.createElement('div') const statusIcon = document.createElement('div')
statusIcon.classList.add('bes-status-icon') statusIcon.classList.add('bes-status-icon')
correctionPanel.appendChild(statusIcon) statusDiv.appendChild(statusIcon)
this.setStatusDivPosition(hostElement, statusDiv)
hostElement.parentNode.insertBefore(statusDiv, hostElement.nextSibling)
return { correctionPanel, scrollPanel, statusIcon } return { correctionPanel, scrollPanel, statusDiv, statusIcon }
} }
/** /**
@ -587,6 +592,12 @@ class BesService {
scrollPanel.style.height = hostElement.scrollHeight + 'px' scrollPanel.style.height = hostElement.scrollHeight + 'px'
} }
setStatusDivPosition(hostElement, statusDiv) {
const hRects = hostElement.getBoundingClientRect()
statusDiv.style.left = hRects.right - 40 + 'px'
statusDiv.style.top = hRects.top + hRects.height - 30 + 'px'
}
static isPointInRect(x, y, rect) { static isPointInRect(x, y, rect) {
return ( return (
x >= rect.x && x >= rect.x &&
@ -974,6 +985,7 @@ window.onresize = () => {
service.correctionPanel, service.correctionPanel,
service.scrollPanel service.scrollPanel
) )
service.setStatusDivPosition(service.hostElement, service.statusDiv)
service.children.forEach(child => { service.children.forEach(child => {
service.clearMistakeMarkup(child.element) service.clearMistakeMarkup(child.element)
child.matches.forEach(match => { child.matches.forEach(match => {

8
styles.css
View File

@ -65,14 +65,20 @@
padding: 0px; padding: 0px;
} }
.bes-status-icon { .bes-status-div {
position: absolute; position: absolute;
z-index: 3;
}
.bes-status-icon {
position: relative;
right: 5px; right: 5px;
bottom: 5px; bottom: 5px;
width: 30px; width: 30px;
height: 30px; height: 30px;
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
cursor: pointer;
} }
.bes-status-icon.bes-status-success { .bes-status-icon.bes-status-success {