IWMBrowser/iwmlib
4
0
Fork 0
Code Issues 6 Pull Requests Releases Wiki Activity

Prettified all files.

Browse Source
This commit is contained in:
Sebastian Kupke
2019-07-18 12:26:39 +02:00
parent 7744b92771
commit 2d400a18ec
125 changed files with 11184 additions and 8154 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/popup.js
+194 -181
View File
@@ -1,5 +1,5 @@
import { Elements } from "./utils.js"
import Poppable from "./poppable.js"
import { Elements } from './utils.js'
import Poppable from './poppable.js'
/** A Popup that shows text labels, images, or html
*/
@@ -36,16 +36,16 @@ export default class Popup extends Poppable {
parent = null,
content = null,
context = window,
fontSize = "1em",
fontFamily = "Arial",
fontSize = '1em',
fontFamily = 'Arial',
padding = 16,
notchSize = 10,
switchPos = false,
minWidth = null,
maxWidth = 800,
backgroundColor = "#EEE",
normalColor = "#444",
notchPosition = "bottomCenter",
backgroundColor = '#EEE',
normalColor = '#444',
notchPosition = 'bottomCenter',
zIndex = 0,
keepWithin = null,
autoClose = true,
@@ -60,7 +60,7 @@ export default class Popup extends Poppable {
onResize = null,
onMove = null,
noStyle = false,
hideOnUp = true,
hideOnUp = true
} = {}) {
super()
this.context = context
@@ -108,38 +108,38 @@ export default class Popup extends Poppable {
//console.log("Popup.setup", this.draggable)
this.content = content
this.items = {}
this.element = document.createElement("div")
this.element.classList.add("popup")
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.addClass(this.element, 'unselectable')
this.notch = document.createElement('div')
Elements.setStyle(this.notch, this.notchStyle())
this.notch.className = "notch"
this.notch.className = 'notch'
this.setupDraggable()
if (this.closeIcon) {
let img = document.createElement("img")
img.setAttribute("draggable", false)
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.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"
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.setAttribute('draggable', true)
img.ondragstart = e => {
this.currentPos = { x: e.clientX, y: e.clientY }
return true
@@ -147,27 +147,27 @@ 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
}
this.currentPos = { x: e.clientX, y: e.clientY }
if (delta.x == 0 && delta.y == 0)
return
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"
target.style.width = width + 'px'
target.style.height = height + 'px'
switch (this.notchPosition) {
case "bottomLeft":
case "bottomCenter":
case 'bottomLeft':
case 'bottomCenter':
let bottom = parseFloat(this.element.style.bottom)
this.element.style.bottom = bottom - delta.y + "px"
this.element.style.bottom = bottom - delta.y + 'px'
break
default:
break
@@ -177,31 +177,30 @@ export default class Popup extends Poppable {
this.onResize({ target, delta, width, height })
}
}
img.ondragend = e => { }
img.ondragend = e => {}
this.element.appendChild(img)
}
for (let key in content) {
switch (key) {
case "selector":
case 'selector':
break
case "text":
let text = document.createElement("span")
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")
Elements.addClass(text, 'unselectable')
Elements.addClass(text, 'PopupContent')
this.insertedNode = text
this.loaded = true
break
case "img":
alert("img to be implemented")
case 'img':
alert('img to be implemented')
break
case "iframe":
let iframe = document.createElement("iframe")
iframe.setAttribute("frameBorder", 0)
case 'iframe':
let iframe = document.createElement('iframe')
iframe.setAttribute('frameBorder', 0)
iframe.src = content[key]
iframe.onload = e => {
let body = iframe.contentWindow.document.body
@@ -216,8 +215,8 @@ export default class Popup extends Poppable {
})
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"
iframe.style.width = w + 'px'
iframe.style.height = h + 'px'
this.layoutAfterInsert()
if (this.onload != null) {
this.onload()
@@ -225,13 +224,13 @@ export default class Popup extends Poppable {
this.loaded = true
}
this.element.appendChild(iframe)
Elements.addClass(iframe, "PopupContent")
Elements.addClass(iframe, 'PopupContent')
this.insertIntoDOM()
return
case "html":
case 'html':
this.loaded = false
let div = document.createElement("div")
Elements.addClass(div, "PopupContent")
let div = document.createElement('div')
Elements.addClass(div, 'PopupContent')
this.element.appendChild(div)
div.innerHTML = content.html
//console.log("insert", content)
@@ -242,8 +241,7 @@ export default class Popup extends Poppable {
div.innerHTML = `<p style="color:red;">Popup content not found. Missing ${selector}</p>`
this.insertedNode = div.firstElementChild
}
}
else {
} else {
this.insertedNode = div.firstElementChild || div
}
this.setAlpha(this.insertedNode, 0)
@@ -252,9 +250,12 @@ 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)
console.log('image not complete', image.src)
image.onload = e => {
count += 1
if (count == total) {
@@ -271,15 +272,15 @@ export default class Popup extends Poppable {
this.loaded = true
}
break
case "node":
case 'node':
this.loaded = true
Elements.addClass(content.node, "PopupContent")
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)
alert('Unexpected content type: ' + key)
break
}
}
@@ -293,8 +294,7 @@ export default class Popup extends Poppable {
let closing = this.closingEvent(e)
if (closing) {
this.close()
}
else {
} else {
this.setupCloseHandler()
}
}
@@ -303,18 +303,36 @@ export default class Popup extends Poppable {
let close = this.handleClose
if (this.hideOnUp) {
if (window.PointerEvent)
this.parent.addEventListener("pointerup", close.bind(this), { capture: true, once: true })
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 })
this.parent.addEventListener('touchend', close.bind(this), {
capture: true,
once: true
})
else
this.parent.addEventListener("mouseup", close.bind(this), { capture: true, once: true })
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 })
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 })
this.parent.addEventListener('touchstart', close.bind(this), {
capture: true,
once: true
})
else
this.parent.addEventListener("mousedown", close.bind(this), { capture: true, once: true })
this.parent.addEventListener('mousedown', close.bind(this), {
capture: true,
once: true
})
}
}
@@ -326,7 +344,7 @@ export default class Popup extends Poppable {
closingEvent(e) {
if (this.interactive) {
let node = e.target.closest(".PopupContent")
let node = e.target.closest('.PopupContent')
return node == null
}
return true
@@ -336,18 +354,19 @@ export default class Popup extends Poppable {
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"
iframe.style.width = w + 'px'
iframe.style.height = h + 'px'
}
setupDraggable() {
if (this.draggable) {
let target = this.element
target.setAttribute("draggable", true)
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'
img.src =
'data:image/gifbase64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
e.dataTransfer.setDragImage(img, 0, 0)
}
target.ondrag = e => {
@@ -378,9 +397,7 @@ export default class Popup extends Poppable {
}
}
moveDragged(target) {
}
moveDragged(target) {}
insertIntoDOM(layout = true) {
this.setAlpha(this.insertedNode, 0)
@@ -396,8 +413,7 @@ export default class Popup extends Poppable {
/** Layout the menu items. Needed only in the subclass.
*/
layout() { }
layout() {}
remove() {
if (this.parent.contains(this.element))
@@ -412,8 +428,7 @@ export default class Popup extends Poppable {
this.unregister(this.context)
if (this.closeCommand) {
this.closeCommand(this, () => this.remove())
}
else {
} else {
this.remove()
}
}
@@ -427,10 +442,10 @@ export default class Popup extends Poppable {
* @memberof Popup
*/
setAlpha(targets, value) {
let objs = (targets instanceof Array) ? targets : [targets]
let objs = targets instanceof Array ? targets : [targets]
for (let obj of objs) {
if (value) {
obj.style.transition = "opacity 0.2s ease-in"
obj.style.transition = 'opacity 0.2s ease-in'
}
obj.style.opacity = value
}
@@ -459,12 +474,11 @@ export default class Popup extends Poppable {
*/
showAt(content, point) {
this.setup(content)
console.log("showAt", this.loaded)
console.log('showAt', this.loaded)
if (this.loaded) {
this.placeAt(point)
this.fadeIn()
}
else {
} else {
this.setAlpha([this.element, this.insertedNode], 0)
this.onload = () => {
this.layoutAfterInsert()
@@ -483,7 +497,7 @@ export default class Popup extends Poppable {
* @memberof Popup
*/
placeOrigin(x, y) {
Elements.setStyle(this.element, { left: x + "px", top: y + "px" })
Elements.setStyle(this.element, { left: x + 'px', top: y + 'px' })
}
/**
@@ -523,25 +537,24 @@ export default class Popup extends Poppable {
* @memberof Popup
*/
notchPositionWithin(x, y) {
let horizontal = "Center"
let vertical = "center"
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"
vertical = 'top'
}
if (local.y > height * 0.66) {
vertical = "bottom"
vertical = 'bottom'
}
if (local.x < width * 0.33) {
horizontal = "Left"
horizontal = 'Left'
}
if (local.x > width * 0.66) {
horizontal = "Right"
horizontal = 'Right'
}
let result = vertical + horizontal
if (result == "centerCenter")
return this.notchPosition
if (result == 'centerCenter') return this.notchPosition
return result
}
@@ -553,37 +566,39 @@ export default class Popup extends Poppable {
notchPosition = this.notchPositionWithin(x, y)
}
Elements.setStyle(this.notch, this.notchStyle(notchPosition))
this.notch.className = "notch " + 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 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":
case 'bottomLeft':
case 'bottomRight':
case 'bottomCenter':
y = bbTop
if (!this.useEventPosWithBoundingBox)
x = (bbLeft + bbRight) / 2
break
case "topLeft":
case "topRight":
case "topCenter":
case 'topLeft':
case 'topRight':
case 'topCenter':
y = bbBottom
if (!this.useEventPosWithBoundingBox)
x = (bbLeft + bbRight) / 2
break
case "centerRight":
case 'centerRight':
x = bbLeft
if (!this.useEventPosWithBoundingBox)
y = (bbTop + bbBottom) / 2
break
case "centerLeft":
case 'centerLeft':
x = bbRight
if (!this.useEventPosWithBoundingBox)
y = (bbTop + bbBottom) / 2
@@ -595,14 +610,14 @@ export default class Popup extends Poppable {
//calculate position depending on several (optional) parameters
switch (notchPosition) {
case "bottomLeft":
case 'bottomLeft':
x -= this.padding
x -= this.notchSize
y -= height
y -= this.notchSize * 2
y -= this.posOffset
break
case "bottomRight":
case 'bottomRight':
x -= width
x += this.padding
x += this.notchSize
@@ -610,36 +625,36 @@ export default class Popup extends Poppable {
y -= this.notchSize * 2
y -= this.posOffset
break
case "bottomCenter":
case 'bottomCenter':
x -= width / 2
y -= height
y -= this.notchSize * 2
y -= this.posOffset
break
case "topLeft":
case 'topLeft':
x -= this.padding
x -= this.notchSize
y += this.notchSize * 2
y += this.posOffset
break
case "topRight":
case 'topRight':
x -= width
x += this.padding
x += this.notchSize
y += this.notchSize * 2
y += this.posOffset
break
case "topCenter":
case 'topCenter':
x -= width / 2
y += this.notchSize * 2
y += this.posOffset
break
case "centerRight":
case 'centerRight':
x -= width + this.notchSize * 2
x -= this.posOffset
y -= height / 2
break
case "centerLeft":
case 'centerLeft':
//console.log("height", height)
y -= height / 2
x += this.notchSize * 2
@@ -667,23 +682,23 @@ export default class Popup extends Poppable {
defaultStyle() {
let padding = this.padding
let style = {
maxWidth: this.maxWidth + "px",
maxWidth: this.maxWidth + 'px',
zIndex: this.zIndex,
position: "absolute",
position: 'absolute'
}
if (this.minWidth) {
style.minWidth = this.minWidth + "px"
style.minWidth = this.minWidth + 'px'
}
if (!this.noStyle) {
Object.assign(style, {
borderRadius: Math.round(this.padding / 2) + "px",
borderRadius: Math.round(this.padding / 2) + 'px',
backgroundColor: this.backgroundColor,
padding: this.padding + "px",
boxShadow: "0 10px 15px rgba(0, 0, 0, 0.3)",
padding: this.padding + 'px',
boxShadow: '0 10px 15px rgba(0, 0, 0, 0.3)',
fontFamily: this.fontFamily,
fontSize: this.fontSize,
stroke: "black",
fill: "white"
stroke: 'black',
fill: 'white'
})
}
@@ -700,58 +715,58 @@ export default class Popup extends Poppable {
let height = 0
let left = this.padding
let size = this.localDimensions()
if (notchPosition.endsWith("Right")) {
if (notchPosition.endsWith('Right')) {
left = size.width - this.padding - this.notchSize * 2
}
if (notchPosition.endsWith("Center")) {
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 (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",
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",
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 (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",
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 {
@@ -759,31 +774,29 @@ export default class Popup extends Poppable {
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",
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('Left')) {
left = -this.notchSize * 2 + 'px'
}
if (notchPosition.endsWith("Right")) {
left = size.width + "px"
if (notchPosition.endsWith('Right')) {
left = size.width + 'px'
}
let top = size.height / 2 - this.notchSize
top = Math.round(top) + 'px'
return {
width,
height,
@@ -791,29 +804,30 @@ export default class Popup extends Poppable {
top,
borderRightWidth: this.notchSize,
borderLeftWidth: this.notchSize,
position: "absolute",
borderTop: this.notchSize + "px solid transparent",
borderBottom: this.notchSize + "px solid transparent"
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 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('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)"
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,
@@ -822,9 +836,9 @@ export default class Popup extends Poppable {
borderRight,
borderLeft,
// boxShadow,
position: "absolute",
borderTop: this.notchSize + "px solid transparent",
borderBottom: this.notchSize + "px solid transparent"
position: 'absolute',
borderTop: this.notchSize + 'px solid transparent',
borderBottom: this.notchSize + 'px solid transparent'
}
}
}
@@ -842,16 +856,16 @@ export default class Popup extends Poppable {
{
parent = null,
context = window,
fontSize = "1em",
fontFamily = "Arial",
fontSize = '1em',
fontFamily = 'Arial',
padding = 16,
notchSize = 10,
switchPos = false,
minWidth = null,
maxWidth = 800,
backgroundColor = "#EEE",
backgroundColor = '#EEE',
zIndex = 0,
normalColor = "#444",
normalColor = '#444',
closeIcon = null,
resizeIcon = null,
closeCommand = null,
@@ -866,9 +880,8 @@ 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,