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

Add navigation buttons in popup #4

Browse Source
This commit is contained in:
Aljaž Grilc 2025-06-04 13:18:30 +02:00
parent 0f2fa218f3
commit e903917179
1 changed files with 44 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
service.js
View File

@ -354,6 +354,13 @@ class BesService {
this.findNextMistake(1)
}
break
case 'Enter':
if (e.ctrlKey) {
e.preventDefault()
e.stopPropagation()
// TODO: What to do when we have multiple replacements?
this.acceptReplacement()
}
default:
break
}
@ -1023,6 +1030,11 @@ class BesService {
)
}
static arrowBtnNavigation(value, service) {
const direction = value === 'forward' ? 1 : value === 'back' ? -1 : 0
service.findNextMistake(direction)
}
/**
* Creates auxiliary DOM elements for text adornments.
*/
@ -1130,7 +1142,7 @@ class BesService {
popup.setContent(el, match, this, this.isContentEditable())
this.highlightMistake(match)
})
popup.show(source.clientX, source.clientY)
popup.show(source.clientX, source.clientY, this)
}
/**
@ -1189,7 +1201,7 @@ class BesService {
this.highlightMistake(match)
match.highlights.forEach(el => {
const clientY = `${el.y + 150}`
popup.show(el.x, clientY)
popup.show(el.x, clientY, this)
})
}
@ -2863,7 +2875,7 @@ class BesPopup extends HTMLElement {
padding: 3px 2px;
}
.bes-toolbar button {
margin-right: 2px;
margin-right: 0px;
}
.bes-popup-title {
color: #333;
@ -2904,6 +2916,9 @@ class BesPopup extends HTMLElement {
width: 100%;
height: 100%;
}
.bes-mistake-nav{
margin-right: 10px;
}
:host{
--bes-close-icon: #485362;
--hover-bg-clr: #dee3ed;
@ -2948,12 +2963,36 @@ class BesPopup extends HTMLElement {
<div class="bes-popup-container">
<div class="bes-toolbar">
<div class="bes-popup-title">Besana</div>
<div class="bes-mistake-nav">
<button class="bes-close-btn" title="Prejšnja napaka">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="var(--bes-close-icon)" d="M11 20V7.825l-5.6 5.6L4 12l8-8l8 8l-1.4 1.425l-5.6-5.6V20z"/></svg>
</button>
<button class="bes-close-btn" title="Naslednja napaka">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="var(--bes-close-icon)" d="M11 4v12.175l-5.6-5.6L4 12l8 8l8-8l-1.4-1.425l-5.6 5.6V4z"/></svg>
</button>
</div>
<button class="bes-close-btn" onclick="BesPopup.dismiss()">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="var(--bes-close-icon)" d="M13.46 12L19 17.54V19h-1.46L12 13.46L6.46 19H5v-1.46L10.54 12L5 6.46V5h1.46L12 10.54L17.54 5H19v1.46z"/></svg>
</button>
</div>
</div>
`
const prevBtn = this.shadowRoot.querySelector(
'.bes-mistake-nav .bes-close-btn[title="Prejšnja napaka"]'
)
const nextBtn = this.shadowRoot.querySelector(
'.bes-mistake-nav .bes-close-btn[title="Naslednja napaka"]'
)
prevBtn.addEventListener('click', () => {
if (this.hostElService)
BesService.arrowBtnNavigation('back', this.hostElService)
})
nextBtn.addEventListener('click', () => {
if (this.hostElService)
BesService.arrowBtnNavigation('forward', this.hostElService)
})
this.addEventListener('mousedown', this.onMouseDown)
}
@ -2963,9 +3002,9 @@ class BesPopup extends HTMLElement {
* @param {Number} x X location hint
* @param {Number} y Y location hint
*/
show(x, y) {
console.log(x, y)
show(x, y, service) {
this.style.position = 'fixed'
this.hostElService = service
// Element needs some initial placement for the browser to provide this.offsetWidth and this.
// offsetHeight measurements.