90 lines
1.9 KiB
JavaScript
90 lines
1.9 KiB
JavaScript
class BesPopupEl extends HTMLElement {
|
|
constructor() {
|
|
super()
|
|
this.attachShadow({ mode: 'open' })
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.render()
|
|
}
|
|
|
|
render() {
|
|
this.shadowRoot.innerHTML = `
|
|
<style>
|
|
:host {
|
|
position: relative;
|
|
display: inline-block;
|
|
z-index: -1
|
|
}
|
|
: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;
|
|
bacground-color: rgb(47, 50, 55);
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
|
border-radius: 5px;
|
|
padding: 8px;
|
|
}
|
|
.bes-toolbar {
|
|
display: flex;
|
|
justify-content: end;
|
|
padding: 5px 2px;
|
|
}
|
|
.bes-toolbar button {
|
|
margin-right: 2px;
|
|
}
|
|
.bes-text-div{
|
|
background-color: white;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
}
|
|
: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">
|
|
<button class="bes-close-btn">X</button>
|
|
</div>
|
|
<div class="bes-text-div">
|
|
<span class="popup-text">
|
|
Tole je testni popup
|
|
</span>
|
|
</div>
|
|
</div>
|
|
`
|
|
}
|
|
|
|
show(x, y) {
|
|
y = y + 20
|
|
this.style.position = 'fixed'
|
|
this.style.left = `${x}px`
|
|
this.style.top = `${y}px`
|
|
this.classList.add('show')
|
|
}
|
|
|
|
hide() {
|
|
this.classList.remove('show')
|
|
}
|
|
|
|
changeText(text) {
|
|
this.shadowRoot.querySelector('.popup-text').textContent = text
|
|
}
|
|
}
|
|
|
|
customElements.define('bes-popup-el', BesPopupEl)
|