diff --git a/service.js b/service.js index 89185ae..5d32ec6 100644 --- a/service.js +++ b/service.js @@ -12,10 +12,11 @@ class BesService { this.hostElement = hostElement this.timer = null this.children = [] - const { correctionPanel, scrollPanel, statusIcon } = + const { correctionPanel, scrollPanel, statusDiv, statusIcon } = this.createCorrectionPanel(hostElement) this.correctionPanel = correctionPanel this.scrollPanel = scrollPanel + this.statusDiv = statusDiv this.statusIcon = statusIcon this.offsetTop = null this.textAreaService = null @@ -213,11 +214,15 @@ class BesService { panelParent.appendChild(correctionPanel) hostElement.parentElement.insertBefore(panelParent, hostElement) + const statusDiv = document.createElement('div') + statusDiv.classList.add('bes-status-div') const statusIcon = document.createElement('div') 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' } + 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) { return ( x >= rect.x && @@ -974,6 +985,7 @@ window.onresize = () => { service.correctionPanel, service.scrollPanel ) + service.setStatusDivPosition(service.hostElement, service.statusDiv) service.children.forEach(child => { service.clearMistakeMarkup(child.element) child.matches.forEach(match => { diff --git a/styles.css b/styles.css index ec88065..3eb2810 100644 --- a/styles.css +++ b/styles.css @@ -65,14 +65,20 @@ padding: 0px; } -.bes-status-icon { +.bes-status-div { position: absolute; + z-index: 3; +} + +.bes-status-icon { + position: relative; right: 5px; bottom: 5px; width: 30px; height: 30px; background-size: contain; background-repeat: no-repeat; + cursor: pointer; } .bes-status-icon.bes-status-success {