experimental disjointed popups
This commit is contained in:
parent
c83657a072
commit
fd831a27f4
4 changed files with 26 additions and 14 deletions
|
|
@ -43,6 +43,7 @@ const Popover = {
|
|||
methods: {
|
||||
containerBoundingClientRect () {
|
||||
const container = this.boundToSelector ? this.$el.closest(this.boundToSelector) : this.$el.offsetParent
|
||||
console.log(container)
|
||||
return container.getBoundingClientRect()
|
||||
},
|
||||
updateStyles () {
|
||||
|
|
@ -125,10 +126,17 @@ const Popover = {
|
|||
|
||||
// Note, separate translateX and translateY avoids blurry text on chromium,
|
||||
// single translate or translate3d resulted in blurry text.
|
||||
console.log(translateX + screenBox.x + screenBox.width)
|
||||
console.log(Math.round(parentBounds.width))
|
||||
this.styles = {
|
||||
opacity: 1,
|
||||
transform: `translateX(${Math.round(translateX)}px) translateY(${Math.round(translateY)}px)`
|
||||
// transform: `translateX(${Math.round(translateX)}px) translateY(${Math.round(translateY)}px)`
|
||||
left: `${Math.round(translateX + screenBox.x + screenBox.width / 2)}px`,
|
||||
top: `${Math.round(translateY + screenBox.y + screenBox.height / 2)}px`,
|
||||
maxWidth: `${Math.round(parentBounds.width)}px`,
|
||||
position: 'fixed'
|
||||
}
|
||||
console.log(this.styles)
|
||||
},
|
||||
showPopover () {
|
||||
const wasHidden = this.hidden
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue