Restructured library.
This commit is contained in:
+967
@@ -0,0 +1,967 @@
|
||||
import { Elements } from "./utils.js"
|
||||
import Poppable from "./poppable.js"
|
||||
|
||||
/** A Popup that shows text labels, images, or html
|
||||
*/
|
||||
export default class Popup extends Poppable {
|
||||
/**
|
||||
* Creates an instance of Popup.
|
||||
* @param {any} [{
|
||||
* parent = null, - The DOM parent element.
|
||||
* content = null, - A dict object with type strings (text, img, html) as keys
|
||||
* and corresponding values.
|
||||
* context = window, - A context object for poppable elements
|
||||
* fontSize = "1em", - Describes the font size as CSS value
|
||||
* fontFamily = "Arial", - Describes the font family as CSS value
|
||||
* padding = 16, - {number || string} padding - Describes the padding as CSS value
|
||||
* notchSize = 10, - {number || string} notchSize - Describes the size of the notch (callout) as CSS value
|
||||
* switchPos = false,
|
||||
* minWidth = null,
|
||||
* maxWidth = 800,
|
||||
* backgroundColor = "#EEE", - The color of the background as CSS value
|
||||
* normalColor = "#444", - normalColor - The color of textitems as CSS value
|
||||
* notchPosition = "bottomLeft",
|
||||
* zIndex = 0,
|
||||
* keepWithin = null, - Ensure that popup is visible within the bounds of the given container
|
||||
* autoClose = true, - Autoclose the Popup on tap
|
||||
* closeIcon = null,
|
||||
* resizeIcon = null,
|
||||
* closeCommand = null,
|
||||
* draggable = false
|
||||
* noStyle = false - When true, prevents the popup from doing any aesthetic manipulations to the DOM leaving the styling completely to the style sheets.
|
||||
* }={}]
|
||||
* @memberof Popup
|
||||
*/
|
||||
constructor({
|
||||
parent = null,
|
||||
content = null,
|
||||
context = window,
|
||||
fontSize = "1em",
|
||||
fontFamily = "Arial",
|
||||
padding = 16,
|
||||
notchSize = 10,
|
||||
switchPos = false,
|
||||
minWidth = null,
|
||||
maxWidth = 800,
|
||||
backgroundColor = "#EEE",
|
||||
normalColor = "#444",
|
||||
notchPosition = "bottomCenter",
|
||||
zIndex = 0,
|
||||
keepWithin = null,
|
||||
autoClose = true,
|
||||
closeIcon = null,
|
||||
resizeIcon = null,
|
||||
closeCommand = null,
|
||||
draggable = false,
|
||||
posOffset = 0,
|
||||
targetBoundingBox = null,
|
||||
useEventPosWithBoundingBox = false,
|
||||
interactive = false,
|
||||
onResize = null,
|
||||
onMove = null,
|
||||
noStyle = false,
|
||||
hideOnUp = true,
|
||||
} = {}) {
|
||||
super()
|
||||
this.context = context
|
||||
this.noStyle = noStyle
|
||||
this.hideOnUp = hideOnUp
|
||||
this.padding = padding
|
||||
this.notchPosition = notchPosition
|
||||
this.notchSize = notchSize
|
||||
this.switchPos = switchPos
|
||||
this.fontSize = fontSize
|
||||
this.fontFamily = fontFamily
|
||||
this.minWidth = minWidth
|
||||
this.maxWidth = maxWidth
|
||||
this.normalColor = normalColor
|
||||
this.backgroundColor = backgroundColor
|
||||
this.keepWithin = keepWithin
|
||||
this.autoClose = autoClose
|
||||
this.resizeIcon = resizeIcon
|
||||
this.closeIcon = closeIcon
|
||||
this.closeCommand = closeCommand
|
||||
this.zIndex = zIndex
|
||||
this.parent = parent || document.body
|
||||
this.draggable = draggable
|
||||
this.posOffset = posOffset
|
||||
this.targetBoundingBox = targetBoundingBox
|
||||
this.useEventPosWithBoundingBox = useEventPosWithBoundingBox
|
||||
this.currentPos = null
|
||||
this.insertedNode = null
|
||||
this.loaded = false
|
||||
this.interactive = interactive
|
||||
this.onload = null
|
||||
this.onResize = onResize
|
||||
this.onMove = onMove
|
||||
if (content) {
|
||||
this.show(content)
|
||||
}
|
||||
}
|
||||
|
||||
/** Setup popup with a dictionary of content types and contents.
|
||||
* @param {Object} content - A dict object with type strings (text, img, html) as keys
|
||||
* and corresponding values.
|
||||
* @return {Popup} this
|
||||
*/
|
||||
setup(content) {
|
||||
//console.log("Popup.setup", this.draggable)
|
||||
this.content = content
|
||||
this.items = {}
|
||||
this.element = document.createElement("div")
|
||||
this.element.classList.add("popup")
|
||||
this.setAlpha(this.element, 0)
|
||||
// this.element.style.opacity = 0
|
||||
Elements.addClass(this.element, "unselectable")
|
||||
this.notch = document.createElement("div")
|
||||
Elements.setStyle(this.notch, this.notchStyle())
|
||||
this.notch.className = "notch"
|
||||
this.setupDraggable()
|
||||
if (this.closeIcon) {
|
||||
let img = document.createElement("img")
|
||||
img.setAttribute("draggable", false)
|
||||
img.src = this.closeIcon
|
||||
img.style.position = "absolute"
|
||||
img.style.right = "0px"
|
||||
img.style.top = "0px"
|
||||
img.style.width = "16px"
|
||||
img.style.height = "16px"
|
||||
img.onclick = e => {
|
||||
this.close()
|
||||
}
|
||||
this.element.appendChild(img)
|
||||
}
|
||||
if (this.resizeIcon) {
|
||||
let img = document.createElement("img")
|
||||
img.style.position = "absolute"
|
||||
img.style.right = "0px"
|
||||
img.style.bottom = "0px"
|
||||
img.style.width = "16px"
|
||||
img.style.height = "16px"
|
||||
img.src = this.resizeIcon
|
||||
img.setAttribute("draggable", true)
|
||||
img.ondragstart = e => {
|
||||
this.currentPos = { x: e.clientX, y: e.clientY }
|
||||
return true
|
||||
}
|
||||
img.ondrag = e => {
|
||||
e.preventDefault()
|
||||
|
||||
let target = this.element.querySelector("iframe") || this.element
|
||||
let delta = {
|
||||
x: e.clientX - this.currentPos.x,
|
||||
y: e.clientY - this.currentPos.y
|
||||
}
|
||||
|
||||
this.currentPos = { x: e.clientX, y: e.clientY }
|
||||
if (delta.x == 0 && delta.y == 0)
|
||||
return
|
||||
|
||||
let rect = target.getBoundingClientRect()
|
||||
let width = rect.width + delta.x
|
||||
let height = rect.height + delta.y
|
||||
target.style.width = width + "px"
|
||||
target.style.height = height + "px"
|
||||
|
||||
switch (this.notchPosition) {
|
||||
case "bottomLeft":
|
||||
case "bottomCenter":
|
||||
let bottom = parseFloat(this.element.style.bottom)
|
||||
this.element.style.bottom = bottom - delta.y + "px"
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
//console.log("onResize", this.onResize)
|
||||
if (this.onResize) {
|
||||
this.onResize({ target, delta, width, height })
|
||||
}
|
||||
}
|
||||
img.ondragend = e => { }
|
||||
this.element.appendChild(img)
|
||||
}
|
||||
|
||||
|
||||
for (let key in content) {
|
||||
switch (key) {
|
||||
case "selector":
|
||||
break
|
||||
case "text":
|
||||
let text = document.createElement("span")
|
||||
this.element.appendChild(text)
|
||||
text.innerHTML = content[key]
|
||||
Elements.setStyle(text, { color: this.normalColor })
|
||||
Elements.addClass(text, "unselectable")
|
||||
Elements.addClass(text, "PopupContent")
|
||||
this.insertedNode = text
|
||||
this.loaded = true
|
||||
break
|
||||
case "img":
|
||||
alert("img to be implemented")
|
||||
break
|
||||
case "iframe":
|
||||
let iframe = document.createElement("iframe")
|
||||
iframe.setAttribute("frameBorder", 0)
|
||||
iframe.src = content[key]
|
||||
iframe.onload = e => {
|
||||
let body = iframe.contentWindow.document.body
|
||||
let observer = new MutationObserver(() => {
|
||||
this.iframeChanged(iframe)
|
||||
})
|
||||
observer.observe(iframe.contentWindow.document, {
|
||||
attributes: true,
|
||||
subtree: true,
|
||||
childList: true,
|
||||
characterData: true
|
||||
})
|
||||
let w = Math.max(body.scrollWidth, body.offsetWidth)
|
||||
let h = Math.max(body.scrollHeight, body.offsetHeight)
|
||||
iframe.style.width = w + "px"
|
||||
iframe.style.height = h + "px"
|
||||
this.layoutAfterInsert()
|
||||
if (this.onload != null) {
|
||||
this.onload()
|
||||
}
|
||||
this.loaded = true
|
||||
}
|
||||
this.element.appendChild(iframe)
|
||||
Elements.addClass(iframe, "PopupContent")
|
||||
this.insertIntoDOM()
|
||||
return
|
||||
case "html":
|
||||
this.loaded = false
|
||||
let div = document.createElement("div")
|
||||
Elements.addClass(div, "PopupContent")
|
||||
this.element.appendChild(div)
|
||||
div.innerHTML = content.html
|
||||
//console.log("insert", content)
|
||||
let selector = content.selector
|
||||
if (selector) {
|
||||
this.insertedNode = div.querySelector(selector)
|
||||
if (this.insertedNode == null) {
|
||||
div.innerHTML = `<p style="color:red;">Popup content not found. Missing ${selector}</p>`
|
||||
this.insertedNode = div.firstElementChild
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.insertedNode = div.firstElementChild || div
|
||||
}
|
||||
this.setAlpha(this.insertedNode, 0)
|
||||
let images = this.element.querySelectorAll('img')
|
||||
let total = 0
|
||||
if (images.length > 0) {
|
||||
let count = 0
|
||||
for (let image of images) {
|
||||
if (!image.complete && !image.src.startsWith('data:')) {
|
||||
total += 1
|
||||
console.log("image not complete", image.src)
|
||||
image.onload = e => {
|
||||
count += 1
|
||||
if (count == total) {
|
||||
this.loaded = true
|
||||
if (this.onload != null) {
|
||||
this.onload()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (total == 0) {
|
||||
this.loaded = true
|
||||
}
|
||||
break
|
||||
case "node":
|
||||
this.loaded = true
|
||||
Elements.addClass(content.node, "PopupContent")
|
||||
this.element.appendChild(content.node)
|
||||
this.insertedNode = content.node
|
||||
this.setAlpha(this.insertedNode, 0)
|
||||
break
|
||||
default:
|
||||
alert("Unexpected content type: " + key)
|
||||
break
|
||||
}
|
||||
}
|
||||
this.insertIntoDOM()
|
||||
this.layoutAfterInsert()
|
||||
this.setupEventHandler()
|
||||
return this
|
||||
}
|
||||
|
||||
handleClose(e) {
|
||||
let closing = this.closingEvent(e)
|
||||
if (closing) {
|
||||
this.close()
|
||||
}
|
||||
else {
|
||||
this.setupCloseHandler()
|
||||
}
|
||||
}
|
||||
|
||||
setupCloseHandler() {
|
||||
let close = this.handleClose
|
||||
if (this.hideOnUp) {
|
||||
if (window.PointerEvent)
|
||||
this.parent.addEventListener("pointerup", close.bind(this), { capture: true, once: true })
|
||||
else if (window.TouchEvent)
|
||||
this.parent.addEventListener("touchend", close.bind(this), { capture: true, once: true })
|
||||
else
|
||||
this.parent.addEventListener("mouseup", close.bind(this), { capture: true, once: true })
|
||||
} else {
|
||||
if (window.PointerEvent)
|
||||
this.parent.addEventListener("pointerdown", close.bind(this), { capture: true, once: true })
|
||||
else if (window.TouchEvent)
|
||||
this.parent.addEventListener("touchstart", close.bind(this), { capture: true, once: true })
|
||||
else
|
||||
this.parent.addEventListener("mousedown", close.bind(this), { capture: true, once: true })
|
||||
}
|
||||
}
|
||||
|
||||
setupEventHandler() {
|
||||
if (this.autoClose) {
|
||||
this.setupCloseHandler()
|
||||
}
|
||||
}
|
||||
|
||||
closingEvent(e) {
|
||||
if (this.interactive) {
|
||||
let node = e.target.closest(".PopupContent")
|
||||
return node == null
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
iframeChanged(iframe) {
|
||||
let body = iframe.contentWindow.document.body
|
||||
let w = Math.max(body.scrollWidth, body.offsetWidth)
|
||||
let h = Math.max(body.scrollHeight, body.offsetHeight)
|
||||
iframe.style.width = w + "px"
|
||||
iframe.style.height = h + "px"
|
||||
}
|
||||
|
||||
setupDraggable() {
|
||||
if (this.draggable) {
|
||||
let target = this.element
|
||||
target.setAttribute("draggable", true)
|
||||
target.ondragstart = e => {
|
||||
this.currentPos = { x: e.clientX, y: e.clientY }
|
||||
var img = document.createElement('img')
|
||||
img.src = 'data:image/gifbase64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
|
||||
e.dataTransfer.setDragImage(img, 0, 0)
|
||||
}
|
||||
target.ondrag = e => {
|
||||
e.preventDefault()
|
||||
let delta = {
|
||||
x: e.clientX - this.currentPos.x,
|
||||
y: e.clientY - this.currentPos.y
|
||||
}
|
||||
this.currentPos = { x: e.clientX, y: e.clientY }
|
||||
let left = parseFloat(target.style.left)
|
||||
let top = parseFloat(target.style.top)
|
||||
|
||||
target.style.left = left + delta.x + 'px'
|
||||
target.style.top = top + delta.y + 'px'
|
||||
|
||||
//console.log("Popup.ondrag", target, event.target)
|
||||
if (this.onMove) {
|
||||
this.onMove({ target, delta })
|
||||
}
|
||||
|
||||
this.lastDrag = { left, top }
|
||||
}
|
||||
target.ondragend = e => {
|
||||
target.style.left = this.lastDrag.left + 'px'
|
||||
target.style.top = this.lastDrag.top + 'px'
|
||||
this.currentPos = null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
moveDragged(target) {
|
||||
|
||||
}
|
||||
|
||||
insertIntoDOM(layout = true) {
|
||||
this.setAlpha(this.insertedNode, 0)
|
||||
this.element.appendChild(this.notch)
|
||||
this.parent.appendChild(this.element)
|
||||
}
|
||||
|
||||
layoutAfterInsert() {
|
||||
Elements.setStyle(this.element, this.defaultStyle())
|
||||
this.layout()
|
||||
//this.element.style.opacity = 1
|
||||
}
|
||||
|
||||
/** Layout the menu items. Needed only in the subclass.
|
||||
*/
|
||||
layout() { }
|
||||
|
||||
|
||||
remove() {
|
||||
if (this.parent.contains(this.element))
|
||||
this.parent.removeChild(this.element)
|
||||
this.unregister(this.context)
|
||||
}
|
||||
|
||||
/** Close and remove the Popup from the DOM tree.
|
||||
*/
|
||||
close() {
|
||||
//console.log("Popup.close", this.closeCommand)
|
||||
this.unregister(this.context)
|
||||
if (this.closeCommand) {
|
||||
this.closeCommand(this, () => this.remove())
|
||||
}
|
||||
else {
|
||||
this.remove()
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the alpha value to show or hide the popup. Uses CSS transitions.
|
||||
* (A former dependency on TweenLite has beeen removed.)
|
||||
*
|
||||
* @param {*} targets
|
||||
* @param {*} value
|
||||
* @memberof Popup
|
||||
*/
|
||||
setAlpha(targets, value) {
|
||||
let objs = (targets instanceof Array) ? targets : [targets]
|
||||
for (let obj of objs) {
|
||||
if (value) {
|
||||
obj.style.transition = "opacity 0.2s ease-in"
|
||||
}
|
||||
obj.style.opacity = value
|
||||
}
|
||||
// if (value) {
|
||||
// TweenLite.to(targets, 0.2, { autoAlpha: value })
|
||||
// }
|
||||
// else {
|
||||
// TweenLite.set(targets, { autoAlpha: 0 })
|
||||
// }
|
||||
}
|
||||
|
||||
/**
|
||||
* Starts a fade in animation.
|
||||
*
|
||||
* @memberof Popup
|
||||
*/
|
||||
fadeIn() {
|
||||
this.setAlpha([this.element, this.insertedNode], 1)
|
||||
}
|
||||
|
||||
/** Shows the Popup with the given commands at the specified point.
|
||||
* @param {Object} content - A dict object with type strings (text, img, html) as keys
|
||||
* and corresponding values.
|
||||
* @param {Point} point - The position as x, y coordinates {px}.
|
||||
* @return {Popup} this
|
||||
*/
|
||||
showAt(content, point) {
|
||||
this.setup(content)
|
||||
console.log("showAt", this.loaded)
|
||||
if (this.loaded) {
|
||||
this.placeAt(point)
|
||||
this.fadeIn()
|
||||
}
|
||||
else {
|
||||
this.setAlpha([this.element, this.insertedNode], 0)
|
||||
this.onload = () => {
|
||||
this.layoutAfterInsert()
|
||||
this.placeAt(point)
|
||||
this.fadeIn()
|
||||
}
|
||||
}
|
||||
return this
|
||||
}
|
||||
|
||||
/**
|
||||
* Place the origin, i.e. the upper left corner at the given position using CSS styles.
|
||||
*
|
||||
* @param {any} x
|
||||
* @param {any} y
|
||||
* @memberof Popup
|
||||
*/
|
||||
placeOrigin(x, y) {
|
||||
Elements.setStyle(this.element, { left: x + "px", top: y + "px" })
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate the local coordinates within the keepWithin container.
|
||||
*
|
||||
* @param {any} x
|
||||
* @param {any} y
|
||||
* @returns
|
||||
* @memberof Popup
|
||||
*/
|
||||
localPointWithin(x, y, width, height) {
|
||||
let pt = { x, y }
|
||||
return pt
|
||||
}
|
||||
|
||||
withinDimensions() {
|
||||
return {
|
||||
width: this.keepWithin.offsetWidth,
|
||||
height: this.keepWithin.offsetHeight
|
||||
}
|
||||
}
|
||||
|
||||
localDimensions() {
|
||||
return {
|
||||
width: this.element.offsetWidth,
|
||||
height: this.element.offsetHeight
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the notch position depending on the local coordinates within the keepWithin container
|
||||
* Divides the space vertically into top, center, bottom and horizontally into left, center, right
|
||||
*
|
||||
* @param {any} x
|
||||
* @param {any} y
|
||||
* @returns
|
||||
* @memberof Popup
|
||||
*/
|
||||
notchPositionWithin(x, y) {
|
||||
let horizontal = "Center"
|
||||
let vertical = "center"
|
||||
let { width, height } = this.withinDimensions()
|
||||
let local = this.localPointWithin(x, y, width, height)
|
||||
if (local.y < height * 0.33) {
|
||||
vertical = "top"
|
||||
}
|
||||
if (local.y > height * 0.66) {
|
||||
vertical = "bottom"
|
||||
}
|
||||
if (local.x < width * 0.33) {
|
||||
horizontal = "Left"
|
||||
}
|
||||
if (local.x > width * 0.66) {
|
||||
horizontal = "Right"
|
||||
}
|
||||
let result = vertical + horizontal
|
||||
if (result == "centerCenter")
|
||||
return this.notchPosition
|
||||
return result
|
||||
}
|
||||
|
||||
placeAt(point) {
|
||||
let x = point.x
|
||||
let y = point.y
|
||||
let notchPosition = this.notchPosition
|
||||
if (this.keepWithin != null) {
|
||||
notchPosition = this.notchPositionWithin(x, y)
|
||||
}
|
||||
Elements.setStyle(this.notch, this.notchStyle(notchPosition))
|
||||
this.notch.className = "notch " + notchPosition
|
||||
let { width, height } = this.localDimensions()
|
||||
|
||||
//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 bbLeft = this.targetBoundingBox.x
|
||||
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
|
||||
break
|
||||
case "topLeft":
|
||||
case "topRight":
|
||||
case "topCenter":
|
||||
y = bbBottom
|
||||
if (!this.useEventPosWithBoundingBox)
|
||||
x = (bbLeft + bbRight) / 2
|
||||
break
|
||||
case "centerRight":
|
||||
x = bbLeft
|
||||
if (!this.useEventPosWithBoundingBox)
|
||||
y = (bbTop + bbBottom) / 2
|
||||
break
|
||||
case "centerLeft":
|
||||
x = bbRight
|
||||
if (!this.useEventPosWithBoundingBox)
|
||||
y = (bbTop + bbBottom) / 2
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
//calculate position depending on several (optional) parameters
|
||||
switch (notchPosition) {
|
||||
case "bottomLeft":
|
||||
x -= this.padding
|
||||
x -= this.notchSize
|
||||
y -= height
|
||||
y -= this.notchSize * 2
|
||||
y -= this.posOffset
|
||||
break
|
||||
case "bottomRight":
|
||||
x -= width
|
||||
x += this.padding
|
||||
x += this.notchSize
|
||||
y -= height
|
||||
y -= this.notchSize * 2
|
||||
y -= this.posOffset
|
||||
break
|
||||
case "bottomCenter":
|
||||
x -= width / 2
|
||||
y -= height
|
||||
y -= this.notchSize * 2
|
||||
y -= this.posOffset
|
||||
break
|
||||
case "topLeft":
|
||||
x -= this.padding
|
||||
x -= this.notchSize
|
||||
y += this.notchSize * 2
|
||||
y += this.posOffset
|
||||
break
|
||||
case "topRight":
|
||||
x -= width
|
||||
x += this.padding
|
||||
x += this.notchSize
|
||||
y += this.notchSize * 2
|
||||
y += this.posOffset
|
||||
break
|
||||
case "topCenter":
|
||||
x -= width / 2
|
||||
y += this.notchSize * 2
|
||||
y += this.posOffset
|
||||
break
|
||||
case "centerRight":
|
||||
x -= width + this.notchSize * 2
|
||||
x -= this.posOffset
|
||||
y -= height / 2
|
||||
break
|
||||
case "centerLeft":
|
||||
//console.log("height", height)
|
||||
y -= height / 2
|
||||
x += this.notchSize * 2
|
||||
x += this.posOffset
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
this.placeOrigin(x, y)
|
||||
}
|
||||
|
||||
/** Shows the Popup with the given commands at the current position.
|
||||
* @param {Object} content - A dict object with type strings (text, img, html) as keys
|
||||
* and corresponding values.
|
||||
* @return {Popup} this
|
||||
*/
|
||||
show(content) {
|
||||
this.setup(content)
|
||||
this.fadeIn()
|
||||
return this
|
||||
}
|
||||
|
||||
/** Configuration object. Return default styles as CSS values.
|
||||
*/
|
||||
defaultStyle() {
|
||||
let padding = this.padding
|
||||
let style = {
|
||||
maxWidth: this.maxWidth + "px",
|
||||
zIndex: this.zIndex,
|
||||
position: "absolute",
|
||||
}
|
||||
if (this.minWidth) {
|
||||
style.minWidth = this.minWidth + "px"
|
||||
}
|
||||
if (!this.noStyle) {
|
||||
Object.assign(style, {
|
||||
borderRadius: Math.round(this.padding / 2) + "px",
|
||||
backgroundColor: this.backgroundColor,
|
||||
padding: this.padding + "px",
|
||||
boxShadow: "0 10px 15px rgba(0, 0, 0, 0.3)",
|
||||
fontFamily: this.fontFamily,
|
||||
fontSize: this.fontSize,
|
||||
stroke: "black",
|
||||
fill: "white"
|
||||
})
|
||||
}
|
||||
|
||||
return style
|
||||
}
|
||||
|
||||
/** Configuration object. Return notch styles as CSS values.
|
||||
*/
|
||||
notchStyle(notchPosition = null) {
|
||||
if (notchPosition == null) {
|
||||
notchPosition = this.notchPosition
|
||||
}
|
||||
let width = 0
|
||||
let height = 0
|
||||
let left = this.padding
|
||||
let size = this.localDimensions()
|
||||
if (notchPosition.endsWith("Right")) {
|
||||
left = size.width - this.padding - this.notchSize * 2
|
||||
}
|
||||
if (notchPosition.endsWith("Center")) {
|
||||
left = size.width / 2 - this.notchSize
|
||||
}
|
||||
left = Math.round(left) + 'px'
|
||||
let borderBottom = 0
|
||||
let borderTop = 0
|
||||
|
||||
if (notchPosition.startsWith("bottom")) {
|
||||
if (this.noStyle) {
|
||||
return {
|
||||
width,
|
||||
height,
|
||||
left,
|
||||
bottom: -this.notchSize + "px",
|
||||
position: "absolute",
|
||||
borderStyle: "solid",
|
||||
borderTopWidth: this.notchSize + "px",
|
||||
borderRight: this.notchSize + "px solid transparent",
|
||||
borderLeft: this.notchSize + "px solid transparent",
|
||||
borderBottom: 0
|
||||
}
|
||||
|
||||
} else {
|
||||
return {
|
||||
width,
|
||||
height,
|
||||
left,
|
||||
boxShadow: "0 12px 15px rgba(0, 0, 0, 0.1)",
|
||||
bottom: -this.notchSize + "px",
|
||||
position: "absolute",
|
||||
borderTop: this.notchSize + "px solid " + this.backgroundColor,
|
||||
borderRight: this.notchSize + "px solid transparent",
|
||||
borderLeft: this.notchSize + "px solid transparent",
|
||||
borderBottom: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
if (notchPosition.startsWith("top")) {
|
||||
if (this.noStyle) {
|
||||
return {
|
||||
width,
|
||||
height,
|
||||
left,
|
||||
top: -this.notchSize + "px",
|
||||
position: "absolute",
|
||||
borderStyle: "solid",
|
||||
borderBottomWidth: this.notchSize + "px",
|
||||
borderRight: this.notchSize + "px solid transparent",
|
||||
borderLeft: this.notchSize + "px solid transparent",
|
||||
borderTop: 0
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
width,
|
||||
height,
|
||||
left,
|
||||
top: -this.notchSize + "px",
|
||||
position: "absolute",
|
||||
borderBottom: this.notchSize + "px solid " + this.backgroundColor,
|
||||
borderRight: this.notchSize + "px solid transparent",
|
||||
borderLeft: this.notchSize + "px solid transparent",
|
||||
borderTop: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (this.noStyle) {
|
||||
|
||||
if (notchPosition.endsWith("Left")) {
|
||||
left = -this.notchSize * 2 + "px"
|
||||
}
|
||||
|
||||
if (notchPosition.endsWith("Right")) {
|
||||
left = size.width + "px"
|
||||
}
|
||||
|
||||
|
||||
let top = size.height / 2 - this.notchSize
|
||||
top = Math.round(top) + 'px'
|
||||
|
||||
|
||||
return {
|
||||
width,
|
||||
height,
|
||||
left,
|
||||
top,
|
||||
borderRightWidth: this.notchSize,
|
||||
borderLeftWidth: this.notchSize,
|
||||
position: "absolute",
|
||||
borderTop: this.notchSize + "px solid transparent",
|
||||
borderBottom: this.notchSize + "px solid transparent"
|
||||
}
|
||||
|
||||
} else {
|
||||
let borderRight = this.notchSize + "px solid transparent"
|
||||
let borderLeft = this.notchSize + "px solid transparent"
|
||||
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)"
|
||||
}
|
||||
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)"
|
||||
}
|
||||
|
||||
top = Math.round(top) + 'px'
|
||||
|
||||
|
||||
return {
|
||||
width,
|
||||
height,
|
||||
left,
|
||||
top,
|
||||
borderRight,
|
||||
borderLeft,
|
||||
// boxShadow,
|
||||
position: "absolute",
|
||||
borderTop: this.notchSize + "px solid transparent",
|
||||
borderBottom: this.notchSize + "px solid transparent"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** Convenient static methods to show and reuse a Popup implemented
|
||||
* as a class variable.
|
||||
* @param {Object} content - A dict object with type strings (text, img, html) as keys
|
||||
* and corresponding values.
|
||||
* @param {Point} point - The position as x, y coordinates {px}.
|
||||
* @param {boolean} autoClose - Autoclose the menu after selecting an item.
|
||||
*/
|
||||
static open(
|
||||
content,
|
||||
point,
|
||||
{
|
||||
parent = null,
|
||||
context = window,
|
||||
fontSize = "1em",
|
||||
fontFamily = "Arial",
|
||||
padding = 16,
|
||||
notchSize = 10,
|
||||
switchPos = false,
|
||||
minWidth = null,
|
||||
maxWidth = 800,
|
||||
backgroundColor = "#EEE",
|
||||
zIndex = 0,
|
||||
normalColor = "#444",
|
||||
closeIcon = null,
|
||||
resizeIcon = null,
|
||||
closeCommand = null,
|
||||
autoClose = true,
|
||||
keepWithin = null,
|
||||
draggable = false,
|
||||
posOffset = 0,
|
||||
targetBoundingBox = null,
|
||||
useEventPosWithBoundingBox = false,
|
||||
interactive = false,
|
||||
onResize = null,
|
||||
onMove = null
|
||||
} = {}
|
||||
) {
|
||||
|
||||
|
||||
let notchPosition = (switchPos && point.y < 50) ? "topCenter" : "bottomCenter"
|
||||
let popup = new Popup({
|
||||
parent,
|
||||
context,
|
||||
fontFamily,
|
||||
fontSize,
|
||||
padding,
|
||||
notchSize,
|
||||
switchPos,
|
||||
minWidth,
|
||||
maxWidth,
|
||||
backgroundColor,
|
||||
normalColor,
|
||||
notchPosition,
|
||||
zIndex,
|
||||
autoClose,
|
||||
keepWithin,
|
||||
closeCommand,
|
||||
closeIcon,
|
||||
resizeIcon,
|
||||
draggable,
|
||||
posOffset,
|
||||
targetBoundingBox,
|
||||
useEventPosWithBoundingBox,
|
||||
interactive,
|
||||
onResize,
|
||||
onMove
|
||||
})
|
||||
popup.register(context)
|
||||
popup.showAt(content, point)
|
||||
return popup
|
||||
}
|
||||
|
||||
/** Convenient static method to close the Popup implemented
|
||||
* as a class variable. Calls the close command.
|
||||
*/
|
||||
static closePopup(context = window) {
|
||||
let popup = Poppable.registrations.get(context)
|
||||
if (popup != null) {
|
||||
popup.close()
|
||||
}
|
||||
}
|
||||
|
||||
/** Convenient static methods to remove the Popup implemented
|
||||
* as a class variable. Removes the popup without performing the close command.
|
||||
*/
|
||||
static remove(context = window) {
|
||||
let popup = Poppable.registrations.get(context)
|
||||
if (popup != null) {
|
||||
popup.remove()
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Convenient static method to compute the clicked rect of objects that have multiple clients rects.
|
||||
* Needed to position popups correctly above objects with line breaks, e.g. spans
|
||||
*
|
||||
* @static
|
||||
* @param {*} event
|
||||
* @returns {*} DOMRect
|
||||
* @memberof Popup
|
||||
*/
|
||||
static targetRect(event) {
|
||||
let target = event.target
|
||||
let x = event.pageX
|
||||
let y = event.pageY
|
||||
for (let rect of target.getClientRects()) {
|
||||
let withinX = x >= rect.left && x <= rect.left + rect.width
|
||||
let withinY = y >= rect.top && y <= rect.top + rect.height
|
||||
if (withinX && withinY) {
|
||||
return rect
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
/**
|
||||
* Convenient static method to compute the center of objects that have multiple clients rects.
|
||||
* Needed to position popups correctly above objects with line breaks, e.g. spans
|
||||
*
|
||||
* @static
|
||||
* @param {*} event
|
||||
* @returns {*} Point
|
||||
* @memberof Popup
|
||||
*/
|
||||
static targetCenter(event) {
|
||||
let target = event.target
|
||||
let x = event.pageX
|
||||
let y = event.pageY
|
||||
let rect = Popup.targetRect(event)
|
||||
if (rect != null) {
|
||||
x = rect.left + rect.width / 2
|
||||
y = rect.top + rect.height / 2
|
||||
}
|
||||
return { x, y }
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user