Working on stacked buttons.
This commit is contained in:
+16
-34
@@ -147,8 +147,7 @@ export default class Popup extends Poppable {
|
||||
img.ondrag = e => {
|
||||
e.preventDefault()
|
||||
|
||||
let target =
|
||||
this.element.querySelector('iframe') || this.element
|
||||
let target = this.element.querySelector('iframe') || this.element
|
||||
let delta = {
|
||||
x: e.clientX - this.currentPos.x,
|
||||
y: e.clientY - this.currentPos.y
|
||||
@@ -250,10 +249,7 @@ export default class Popup extends Poppable {
|
||||
if (images.length > 0) {
|
||||
let count = 0
|
||||
for (let image of images) {
|
||||
if (
|
||||
!image.complete &&
|
||||
!image.src.startsWith('data:')
|
||||
) {
|
||||
if (!image.complete && !image.src.startsWith('data:')) {
|
||||
total += 1
|
||||
console.log('image not complete', image.src)
|
||||
image.onload = e => {
|
||||
@@ -365,8 +361,7 @@ export default class Popup extends Poppable {
|
||||
target.ondragstart = e => {
|
||||
this.currentPos = { x: e.clientX, y: e.clientY }
|
||||
var img = document.createElement('img')
|
||||
img.src =
|
||||
'data:image/gifbase64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
|
||||
img.src = 'data:image/gifbase64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
|
||||
e.dataTransfer.setDragImage(img, 0, 0)
|
||||
}
|
||||
target.ondrag = e => {
|
||||
@@ -416,8 +411,7 @@ export default class Popup extends Poppable {
|
||||
layout() {}
|
||||
|
||||
remove() {
|
||||
if (this.parent.contains(this.element))
|
||||
this.parent.removeChild(this.element)
|
||||
if (this.parent.contains(this.element)) this.parent.removeChild(this.element)
|
||||
this.unregister(this.context)
|
||||
}
|
||||
|
||||
@@ -572,36 +566,30 @@ export default class Popup extends Poppable {
|
||||
//if targetBoundingBox is set, popup is placed next to the rectangle
|
||||
if (this.targetBoundingBox) {
|
||||
let bbTop = this.targetBoundingBox.y
|
||||
let bbBottom =
|
||||
this.targetBoundingBox.y + this.targetBoundingBox.height
|
||||
let bbBottom = this.targetBoundingBox.y + this.targetBoundingBox.height
|
||||
let bbLeft = this.targetBoundingBox.x
|
||||
let bbRight =
|
||||
this.targetBoundingBox.x + this.targetBoundingBox.width
|
||||
let bbRight = this.targetBoundingBox.x + this.targetBoundingBox.width
|
||||
//console.log("place popup with bb set:", x, y, bbTop, bbBottom, bbLeft, bbRight)
|
||||
switch (notchPosition) {
|
||||
case 'bottomLeft':
|
||||
case 'bottomRight':
|
||||
case 'bottomCenter':
|
||||
y = bbTop
|
||||
if (!this.useEventPosWithBoundingBox)
|
||||
x = (bbLeft + bbRight) / 2
|
||||
if (!this.useEventPosWithBoundingBox) x = (bbLeft + bbRight) / 2
|
||||
break
|
||||
case 'topLeft':
|
||||
case 'topRight':
|
||||
case 'topCenter':
|
||||
y = bbBottom
|
||||
if (!this.useEventPosWithBoundingBox)
|
||||
x = (bbLeft + bbRight) / 2
|
||||
if (!this.useEventPosWithBoundingBox) x = (bbLeft + bbRight) / 2
|
||||
break
|
||||
case 'centerRight':
|
||||
x = bbLeft
|
||||
if (!this.useEventPosWithBoundingBox)
|
||||
y = (bbTop + bbBottom) / 2
|
||||
if (!this.useEventPosWithBoundingBox) y = (bbTop + bbBottom) / 2
|
||||
break
|
||||
case 'centerLeft':
|
||||
x = bbRight
|
||||
if (!this.useEventPosWithBoundingBox)
|
||||
y = (bbTop + bbBottom) / 2
|
||||
if (!this.useEventPosWithBoundingBox) y = (bbTop + bbBottom) / 2
|
||||
break
|
||||
default:
|
||||
break
|
||||
@@ -747,8 +735,7 @@ export default class Popup extends Poppable {
|
||||
boxShadow: '0 12px 15px rgba(0, 0, 0, 0.1)',
|
||||
bottom: -this.notchSize + 'px',
|
||||
position: 'absolute',
|
||||
borderTop:
|
||||
this.notchSize + 'px solid ' + this.backgroundColor,
|
||||
borderTop: this.notchSize + 'px solid ' + this.backgroundColor,
|
||||
borderRight: this.notchSize + 'px solid transparent',
|
||||
borderLeft: this.notchSize + 'px solid transparent',
|
||||
borderBottom: 0
|
||||
@@ -776,8 +763,7 @@ export default class Popup extends Poppable {
|
||||
left,
|
||||
top: -this.notchSize + 'px',
|
||||
position: 'absolute',
|
||||
borderBottom:
|
||||
this.notchSize + 'px solid ' + this.backgroundColor,
|
||||
borderBottom: this.notchSize + 'px solid ' + this.backgroundColor,
|
||||
borderRight: this.notchSize + 'px solid transparent',
|
||||
borderLeft: this.notchSize + 'px solid transparent',
|
||||
borderTop: 0
|
||||
@@ -814,16 +800,13 @@ export default class Popup extends Poppable {
|
||||
let top = size.height / 2 - this.notchSize
|
||||
if (notchPosition.endsWith('Left')) {
|
||||
left = -this.notchSize * 2 + 'px'
|
||||
borderRight =
|
||||
this.notchSize + 'px solid ' + this.backgroundColor
|
||||
this.element.style.boxShadow =
|
||||
'15px 10px 15px rgba(0, 0, 0, 0.3)'
|
||||
borderRight = this.notchSize + 'px solid ' + this.backgroundColor
|
||||
this.element.style.boxShadow = '15px 10px 15px rgba(0, 0, 0, 0.3)'
|
||||
}
|
||||
if (notchPosition.endsWith('Right')) {
|
||||
left = size.width + 'px'
|
||||
borderLeft = this.notchSize + 'px solid ' + this.backgroundColor
|
||||
this.element.style.boxShadow =
|
||||
'15px 5px 15px rgba(0, 0, 0, 0.3)'
|
||||
this.element.style.boxShadow = '15px 5px 15px rgba(0, 0, 0, 0.3)'
|
||||
}
|
||||
|
||||
top = Math.round(top) + 'px'
|
||||
@@ -880,8 +863,7 @@ export default class Popup extends Poppable {
|
||||
onMove = null
|
||||
} = {}
|
||||
) {
|
||||
let notchPosition =
|
||||
switchPos && point.y < 50 ? 'topCenter' : 'bottomCenter'
|
||||
let notchPosition = switchPos && point.y < 50 ? 'topCenter' : 'bottomCenter'
|
||||
let popup = new Popup({
|
||||
parent,
|
||||
context,
|
||||
|
||||
Reference in New Issue
Block a user