Prettified all files.
This commit is contained in:
+114
-55
@@ -6,21 +6,22 @@ import { Elements } from './utils.js'
|
||||
*/
|
||||
export default class PopupMenu extends Popup {
|
||||
/**
|
||||
* The constructor.
|
||||
* @constructor
|
||||
* @param {DOM Element} parent - The DOM parent element.
|
||||
* @param {Object} commands - A dict object with command label strings as keys
|
||||
* and command functions as values.
|
||||
* @param {string} fontSize - Describes the font size as CSS value
|
||||
* @param {number || string} padding - Describes the padding as CSS value
|
||||
* @param {number || string} notchSize - Describes the size of the notch (callout) as CSS value
|
||||
* @param {string} highlightColor - The color of highlighted menu items as CSS value
|
||||
* @param {string} backgroundColor - The color of the background as CSS value
|
||||
* @param {string} normalColor - The color of normal menu items as CSS value
|
||||
* @param {DOM Element} keepWithin - The container to stay within
|
||||
* @param {boolean} autoClose - Autoclose the menu after selecting an item
|
||||
*/
|
||||
constructor({ parent = null,
|
||||
* The constructor.
|
||||
* @constructor
|
||||
* @param {DOM Element} parent - The DOM parent element.
|
||||
* @param {Object} commands - A dict object with command label strings as keys
|
||||
* and command functions as values.
|
||||
* @param {string} fontSize - Describes the font size as CSS value
|
||||
* @param {number || string} padding - Describes the padding as CSS value
|
||||
* @param {number || string} notchSize - Describes the size of the notch (callout) as CSS value
|
||||
* @param {string} highlightColor - The color of highlighted menu items as CSS value
|
||||
* @param {string} backgroundColor - The color of the background as CSS value
|
||||
* @param {string} normalColor - The color of normal menu items as CSS value
|
||||
* @param {DOM Element} keepWithin - The container to stay within
|
||||
* @param {boolean} autoClose - Autoclose the menu after selecting an item
|
||||
*/
|
||||
constructor({
|
||||
parent = null,
|
||||
commands = null,
|
||||
fontSize = '1em',
|
||||
fontFamily = 'Arial',
|
||||
@@ -35,8 +36,20 @@ export default class PopupMenu extends Popup {
|
||||
highlightColor = 'black',
|
||||
notchPosition = 'bottomLeft',
|
||||
keepWithin = null,
|
||||
autoClose = true } = {}) {
|
||||
super({ parent, fontSize, fontFamily, padding, notchSize, notchPosition, backgroundColor, keepWithin, normalColor, autoClose })
|
||||
autoClose = true
|
||||
} = {}) {
|
||||
super({
|
||||
parent,
|
||||
fontSize,
|
||||
fontFamily,
|
||||
padding,
|
||||
notchSize,
|
||||
notchPosition,
|
||||
backgroundColor,
|
||||
keepWithin,
|
||||
normalColor,
|
||||
autoClose
|
||||
})
|
||||
this.commands = commands
|
||||
this.zIndex = zIndex
|
||||
this.switchPos = switchPos
|
||||
@@ -50,7 +63,6 @@ export default class PopupMenu extends Popup {
|
||||
* @return {PopupMenu} this
|
||||
*/
|
||||
setup(commands) {
|
||||
|
||||
this.commands = commands
|
||||
this.items = {}
|
||||
this.element = document.createElement('div')
|
||||
@@ -63,14 +75,25 @@ export default class PopupMenu extends Popup {
|
||||
this.element.appendChild(item)
|
||||
item.innerHTML = key
|
||||
item.style.paddingBottom = item.style.paddingTop = this.spacing
|
||||
Elements.setStyle(item, { color: this.normalColor, cursor: 'default' })
|
||||
Elements.setStyle(item, {
|
||||
color: this.normalColor,
|
||||
cursor: 'default'
|
||||
})
|
||||
Elements.addClass(item, 'unselectable')
|
||||
Elements.addClass(item, 'popupMenuItem')
|
||||
this.items[key] = item
|
||||
item.onclick = (event) => { this.perform(key) }
|
||||
item.ontap = (event) => { this.perform(key) }
|
||||
item.onmouseover = (event) => { this.over(event, key) }
|
||||
item.onmouseout = (event) => { this.out(event, key) }
|
||||
item.onclick = event => {
|
||||
this.perform(key)
|
||||
}
|
||||
item.ontap = event => {
|
||||
this.perform(key)
|
||||
}
|
||||
item.onmouseover = event => {
|
||||
this.over(event, key)
|
||||
}
|
||||
item.onmouseout = event => {
|
||||
this.out(event, key)
|
||||
}
|
||||
}
|
||||
|
||||
this.element.appendChild(this.notch)
|
||||
@@ -100,7 +123,7 @@ export default class PopupMenu extends Popup {
|
||||
*/
|
||||
update(key, highlight = false) {
|
||||
let text = this.items[key]
|
||||
text.style.color = (highlight) ? this.highlightColor : this.normalColor
|
||||
text.style.color = highlight ? this.highlightColor : this.normalColor
|
||||
}
|
||||
|
||||
/** Mouse over handöer.
|
||||
@@ -126,7 +149,7 @@ export default class PopupMenu extends Popup {
|
||||
* and command functions as values.
|
||||
* @param {Point} point - The position as x, y coordinates {px}.
|
||||
* @return {PopupMenu} this
|
||||
*/
|
||||
*/
|
||||
showAt(commands, point) {
|
||||
this.show(commands)
|
||||
this.placeAt(point)
|
||||
@@ -146,44 +169,71 @@ export default class PopupMenu extends Popup {
|
||||
* @param {string} normalColor - The color of normal menu items as CSS value
|
||||
* @param {boolean} autoClose - Autoclose the menu after selecting an item
|
||||
*/
|
||||
static open(commands, point, { parent = null,
|
||||
context = window,
|
||||
fontSize = '1em',
|
||||
fontFamily = 'Arial',
|
||||
padding = 16,
|
||||
zIndex = 1,
|
||||
spacing = '0px',
|
||||
switchPos = false,
|
||||
notchSize = 10,
|
||||
maxWidth = 800,
|
||||
keepWithin = null,
|
||||
backgroundColor = '#EEE',
|
||||
normalColor = '#444',
|
||||
autoClose = true } = {}) {
|
||||
|
||||
static open(
|
||||
commands,
|
||||
point,
|
||||
{
|
||||
parent = null,
|
||||
context = window,
|
||||
fontSize = '1em',
|
||||
fontFamily = 'Arial',
|
||||
padding = 16,
|
||||
zIndex = 1,
|
||||
spacing = '0px',
|
||||
switchPos = false,
|
||||
notchSize = 10,
|
||||
maxWidth = 800,
|
||||
keepWithin = null,
|
||||
backgroundColor = '#EEE',
|
||||
normalColor = '#444',
|
||||
autoClose = true
|
||||
} = {}
|
||||
) {
|
||||
let registered = Poppable.get(context)
|
||||
if (registered) {
|
||||
this.closePopup()
|
||||
return
|
||||
}
|
||||
console.log("open", point)
|
||||
let notchPosition = (point.y < 50 && switchPos) ? 'topCenter' : 'bottomCenter'
|
||||
console.log('open', point)
|
||||
let notchPosition =
|
||||
point.y < 50 && switchPos ? 'topCenter' : 'bottomCenter'
|
||||
let popup = new PopupMenu({
|
||||
parent, fontSize, padding, zIndex, spacing, switchPos, notchSize,
|
||||
parent,
|
||||
fontSize,
|
||||
padding,
|
||||
zIndex,
|
||||
spacing,
|
||||
switchPos,
|
||||
notchSize,
|
||||
notchPosition,
|
||||
maxWidth, backgroundColor, normalColor,
|
||||
notchPosition, keepWithin, autoClose
|
||||
maxWidth,
|
||||
backgroundColor,
|
||||
normalColor,
|
||||
notchPosition,
|
||||
keepWithin,
|
||||
autoClose
|
||||
})
|
||||
popup.showAt(commands, point)
|
||||
popup.register(context)
|
||||
popup.closeEventListener = (e) => {
|
||||
if (this.eventOutside(e))
|
||||
this.closePopup(context)
|
||||
popup.closeEventListener = e => {
|
||||
if (this.eventOutside(e)) this.closePopup(context)
|
||||
}
|
||||
if (autoClose) {
|
||||
context.addEventListener('mousedown', popup.closeEventListener, true)
|
||||
context.addEventListener('touchstart', popup.closeEventListener, true)
|
||||
context.addEventListener('pointerdown', popup.closeEventListener, true)
|
||||
context.addEventListener(
|
||||
'mousedown',
|
||||
popup.closeEventListener,
|
||||
true
|
||||
)
|
||||
context.addEventListener(
|
||||
'touchstart',
|
||||
popup.closeEventListener,
|
||||
true
|
||||
)
|
||||
context.addEventListener(
|
||||
'pointerdown',
|
||||
popup.closeEventListener,
|
||||
true
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -194,13 +244,22 @@ export default class PopupMenu extends Popup {
|
||||
/** Convenient static methods to close the PopupMenu implemented
|
||||
* as a class variable.
|
||||
*/
|
||||
static closePopup(context=window) {
|
||||
static closePopup(context = window) {
|
||||
let registered = Poppable.get(context)
|
||||
if (registered) {
|
||||
registered.close()
|
||||
context.removeEventListener('mousedown', registered.closeEventListener)
|
||||
context.removeEventListener('touchstart', registered.closeEventListener)
|
||||
context.removeEventListener('pointerdown', registered.closeEventListener)
|
||||
context.removeEventListener(
|
||||
'mousedown',
|
||||
registered.closeEventListener
|
||||
)
|
||||
context.removeEventListener(
|
||||
'touchstart',
|
||||
registered.closeEventListener
|
||||
)
|
||||
context.removeEventListener(
|
||||
'pointerdown',
|
||||
registered.closeEventListener
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user