70 lines
1.5 KiB
JavaScript
70 lines
1.5 KiB
JavaScript
class MyComponent extends HTMLElement {
|
|
constructor() {
|
|
super()
|
|
this.attachShadow({ mode: 'open' })
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.render()
|
|
}
|
|
|
|
render() {
|
|
this.shadowRoot.innerHTML = `
|
|
<style>
|
|
:host {
|
|
position: relative;
|
|
display: inline-block;
|
|
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: 200px;
|
|
background-color: white;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
|
border-radius: 5px;
|
|
padding: 8px;
|
|
}
|
|
:host(.show) .bes-popup-container {
|
|
visibility: visible;
|
|
animation: fadeIn 1s;
|
|
}
|
|
@keyframes fadeIn {
|
|
from {opacity: 0;}
|
|
to {opacity:1 ;}
|
|
}
|
|
</style>
|
|
<div class="bes-popup-container">
|
|
<span class="popup-text">
|
|
Tole je testni popup
|
|
</span>
|
|
</div>
|
|
`
|
|
}
|
|
|
|
show(x, y) {
|
|
console.log(x, y)
|
|
y = y + 20
|
|
this.style.position = 'fixed'
|
|
this.style.left = `${x}px`
|
|
this.style.top = `${y}px`
|
|
this.classList.add('show')
|
|
}
|
|
|
|
toggle() {
|
|
this.classList.toggle('show')
|
|
}
|
|
|
|
changeText(text) {
|
|
this.shadowRoot.querySelector('.popup-text').textContent = text
|
|
}
|
|
}
|
|
|
|
customElements.define('my-component', MyComponent)
|