service2.js: Fix status icon and port status popup
However, status popup was disabled as deemed excessive for our use case.
This commit is contained in:
parent
5e339566f3
commit
e05abce7d9
187
service2.js
187
service2.js
@ -162,11 +162,11 @@ class BesService {
|
||||
this.statusDiv,
|
||||
this.hostElement.nextSibling
|
||||
)
|
||||
const statusPopup = document.createElement('bes-popup-status-el')
|
||||
document.body.appendChild(statusPopup)
|
||||
this.statusDiv.addEventListener('click', e =>
|
||||
this.handleStatusClick(e, statusPopup)
|
||||
)
|
||||
// const statusPopup = document.createElement('bes-popup-status')
|
||||
// document.body.appendChild(statusPopup)
|
||||
// this.statusDiv.addEventListener('click', e =>
|
||||
// statusPopup.show(e.clientX, e.clientY, this)
|
||||
// )
|
||||
}
|
||||
|
||||
/**
|
||||
@ -742,7 +742,7 @@ class BesDOMService extends BesService {
|
||||
}
|
||||
}
|
||||
}
|
||||
BesPopupEl.hide()
|
||||
BesPopup.hide()
|
||||
}
|
||||
|
||||
/**
|
||||
@ -784,14 +784,17 @@ class BesDOMService extends BesService {
|
||||
*
|
||||
* Grammar mistake popup dialog
|
||||
*
|
||||
*/
|
||||
class BesPopupEl extends HTMLElement {
|
||||
*************************************************************************/
|
||||
class BesPopup extends HTMLElement {
|
||||
constructor() {
|
||||
super()
|
||||
this.attachShadow({ mode: 'open' })
|
||||
}
|
||||
|
||||
render() {
|
||||
/**
|
||||
* Called each time the element is added to the document
|
||||
*/
|
||||
connectedCallback() {
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
:host {
|
||||
@ -859,7 +862,7 @@ class BesPopupEl extends HTMLElement {
|
||||
<div class="bes-popup-container">
|
||||
<div class="bes-toolbar">
|
||||
<div class="bes-popup-title">Besana</div>
|
||||
<button class="bes-close-btn" onclick="BesPopupEl.hide()">X</button>
|
||||
<button class="bes-close-btn" onclick="BesPopup.hide()">X</button>
|
||||
</div>
|
||||
<div class="bes-text-div">
|
||||
<span class="popup-text">
|
||||
@ -869,13 +872,14 @@ class BesPopupEl extends HTMLElement {
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
this.addEventListener('mousedown', this.onMouseDown)
|
||||
}
|
||||
|
||||
/**
|
||||
* Shows popup window.
|
||||
*
|
||||
* @param {*} x X location hint
|
||||
* @param {*} y Y location hint
|
||||
* @param {Number} x X location hint
|
||||
* @param {Number} y Y location hint
|
||||
*/
|
||||
show(x, y) {
|
||||
this.style.position = 'fixed'
|
||||
@ -929,7 +933,7 @@ class BesPopupEl extends HTMLElement {
|
||||
replacementBtn.addEventListener('click', () => {
|
||||
if (allowReplacements) {
|
||||
service.replaceText(el, match, replacement.value)
|
||||
BesPopupEl.hide()
|
||||
BesPopup.hide()
|
||||
}
|
||||
})
|
||||
replacementDiv.appendChild(replacementBtn)
|
||||
@ -992,14 +996,6 @@ class BesPopupEl extends HTMLElement {
|
||||
document.removeEventListener('mousemove', this.handleMouseMove)
|
||||
}
|
||||
|
||||
/**
|
||||
* Called each time the element is added to the document
|
||||
*/
|
||||
connectedCallback() {
|
||||
this.render()
|
||||
this.addEventListener('mousedown', this.onMouseDown)
|
||||
}
|
||||
|
||||
/**
|
||||
* Dismisses all the popups.
|
||||
*/
|
||||
@ -1010,7 +1006,154 @@ class BesPopupEl extends HTMLElement {
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('bes-popup-el', BesPopupEl)
|
||||
customElements.define('bes-popup-el', BesPopup)
|
||||
|
||||
// /*************************************************************************
|
||||
// *
|
||||
// * Status pop-up
|
||||
// *
|
||||
// *************************************************************************/
|
||||
// class BesStatusPopup extends HTMLElement {
|
||||
// constructor() {
|
||||
// super()
|
||||
// this.attachShadow({ mode: 'open' })
|
||||
// }
|
||||
|
||||
// /**
|
||||
// * Called each time the element is added to the document
|
||||
// */
|
||||
// connectedCallback() {
|
||||
// this.shadowRoot.innerHTML = `
|
||||
// <style>
|
||||
// :host {
|
||||
// display: none;
|
||||
// }
|
||||
// :host(.show){
|
||||
// z-index: 10;
|
||||
// }
|
||||
// .popup-text {
|
||||
// max-width: 160px;
|
||||
// color: black;
|
||||
// text-align: center;
|
||||
// padding: 8px 0;
|
||||
// z-index: 1;
|
||||
// }
|
||||
// .bes-popup-container {
|
||||
// visibility: hidden;
|
||||
// max-width: 300px;
|
||||
// background-color: rgb(241, 243, 249);
|
||||
// box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
||||
// border-radius: 5px;
|
||||
// padding: 8px;
|
||||
// z-index: 1;
|
||||
// }
|
||||
// .bes-toolbar {
|
||||
// display: flex;
|
||||
// justify-content: end;
|
||||
// padding: 5px 2px;
|
||||
// }
|
||||
// .bes-toolbar button {
|
||||
// margin-right: 2px;
|
||||
// }
|
||||
// .bes-popup-title {
|
||||
// flex-grow: 1;
|
||||
// }
|
||||
// .bes-text-div{
|
||||
// background-color: white;
|
||||
// padding: 10px;
|
||||
// border-radius: 5px;
|
||||
// }
|
||||
// .bes-service-btn{
|
||||
// background-color: none;
|
||||
// width: 30px;
|
||||
// height: 30px;
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
// }
|
||||
// .bes-turn-off{
|
||||
// width: 20px;
|
||||
// height: 20px;
|
||||
// }
|
||||
// :host(.show) .bes-popup-container {
|
||||
// visibility: visible;
|
||||
// animation: fadeIn 1s;
|
||||
// }
|
||||
// @keyframes fadeIn {
|
||||
// from {opacity: 0;}
|
||||
// to {opacity:1 ;}
|
||||
// }
|
||||
// </style>
|
||||
// <div class="bes-popup-container">
|
||||
// <div class="bes-toolbar">
|
||||
// <div class="bes-popup-title">Besana</div>
|
||||
// <button class="bes-close-btn" onclick="BesStatusPopup.hide()">X</button>
|
||||
// </div>
|
||||
// <div class="bes-text-div">
|
||||
// <span class="popup-text">
|
||||
// Če želite izključiti preverjanje pravopisa, kliknite na gumb.
|
||||
// </span>
|
||||
// <button class="bes-service-btn">
|
||||
// <img class="bes-turn-off" src="/images/turn-off-svgrepo-com.svg" alt="Izključi preverjanje pravopisa">
|
||||
// </button>
|
||||
// </div>
|
||||
// </div>
|
||||
// `
|
||||
// }
|
||||
|
||||
// /**
|
||||
// * Shows popup window.
|
||||
// *
|
||||
// * @param {Number} x X location hint
|
||||
// * @param {Number} y Y location hint
|
||||
// * @param {BesService} service Grammar checking service
|
||||
// */
|
||||
// show(x, y, service) {
|
||||
// this.style.position = 'fixed'
|
||||
// this.style.display = 'block'
|
||||
|
||||
// // Element needs some initial placement for the browser to provide this.offsetWidth and this.offsetHeight measurements.
|
||||
// // The fade-in effect on the popup window should prevent flicker.
|
||||
// this.style.left = `0px`
|
||||
// this.style.top = `0px`
|
||||
// this.classList.add('show')
|
||||
|
||||
// if (x + this.offsetWidth <= window.innerWidth) {
|
||||
// this.style.left = `${x}px`
|
||||
// } else if (this.offsetWidth <= x) {
|
||||
// this.style.left = `${x - this.offsetWidth}px`
|
||||
// } else {
|
||||
// this.style.left = `${x - this.offsetWidth / 2}px`
|
||||
// }
|
||||
|
||||
// if (y + 20 + this.offsetHeight <= window.innerHeight) {
|
||||
// this.style.top = `${y + 20}px`
|
||||
// } else if (this.offsetHeight <= y) {
|
||||
// this.style.top = `${y - this.offsetHeight}px`
|
||||
// } else {
|
||||
// this.style.top = `${y - this.offsetHeight / 2}px`
|
||||
// }
|
||||
|
||||
// if (service) {
|
||||
// const disableButton = this.shadowRoot.querySelector('.bes-service-btn')
|
||||
// disableButton.onclick = () => {
|
||||
// service.unregister()
|
||||
// BesStatusPopup.hide()
|
||||
// }
|
||||
// }
|
||||
// this.classList.add('show')
|
||||
// }
|
||||
|
||||
// /**
|
||||
// * Dismisses all the popups.
|
||||
// */
|
||||
// static hide() {
|
||||
// const popup = document.querySelector('bes-popup-status.show')
|
||||
// popup?.classList?.remove('show')
|
||||
// }
|
||||
// }
|
||||
|
||||
// customElements.define('bes-popup-status', BesStatusPopup)
|
||||
|
||||
// Auto-register all elements with bes-service class.
|
||||
window.addEventListener('load', () => {
|
||||
|
||||
10
styles.css
10
styles.css
@ -1,3 +1,5 @@
|
||||
/* TODO: Dark mode theme */
|
||||
|
||||
/* Mistake types styles */
|
||||
.bes-typo-mistake {
|
||||
border-bottom: 2px solid red;
|
||||
@ -79,17 +81,17 @@
|
||||
}
|
||||
|
||||
.bes-status-icon.bes-status-success {
|
||||
background-image: url('/images/checkmark-svgrepo-com.svg');
|
||||
background-image: url('images/checkmark-svgrepo-com.svg');
|
||||
}
|
||||
|
||||
.bes-status-icon.bes-status-loading {
|
||||
background-image: url('/images/loading-svgrepo-com.svg');
|
||||
background-image: url('images/loading-svgrepo-com.svg');
|
||||
}
|
||||
|
||||
.bes-status-icon.bes-status-error {
|
||||
background-image: url('/images/error-svgrepo-com.svg');
|
||||
background-image: url('images/error-svgrepo-com.svg');
|
||||
}
|
||||
|
||||
.bes-status-icon.bes-status-mistakes {
|
||||
background-image: url('/images/mistake-svgrepo-com.svg');
|
||||
background-image: url('images/mistake-svgrepo-com.svg');
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user