iwmlib/lib/popupmenu.js

250 lines
8.4 KiB
JavaScript
Raw Permalink Normal View History

2019-03-21 09:57:27 +01:00
import Poppable from './poppable.js'
import Popup from './popup.js'
import { Elements } from './utils.js'
/** A Popup Menu that shows text labels in a vertical row.
*/
export default class PopupMenu extends Popup {
/**
2019-07-18 12:26:39 +02:00
* 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,
2019-03-21 09:57:27 +01:00
commands = null,
fontSize = '1em',
fontFamily = 'Arial',
padding = 16,
zIndex = 1,
spacing = '0px',
switchPos = false,
notchSize = 10,
maxWidth = 800,
backgroundColor = '#EEE',
normalColor = '#444',
highlightColor = 'black',
notchPosition = 'bottomLeft',
keepWithin = null,
2019-07-18 12:26:39 +02:00
autoClose = true
} = {}) {
super({
parent,
fontSize,
fontFamily,
padding,
notchSize,
notchPosition,
backgroundColor,
keepWithin,
normalColor,
autoClose
})
2019-03-21 09:57:27 +01:00
this.commands = commands
this.zIndex = zIndex
this.switchPos = switchPos
this.spacing = spacing
this.highlightColor = highlightColor
}
/** Setup menu with a dictionary of command labels and command functions.
* @param {Object} commands - A dict object with command label strings as keys
* and command functions as values.
* @return {PopupMenu} this
*/
setup(commands) {
this.commands = commands
this.items = {}
this.element = document.createElement('div')
this.element.style.zIndex = this.zIndex
Elements.addClass(this.element, 'unselectable')
this.notch = document.createElement('div')
Elements.setStyle(this.notch, this.notchStyle())
for (let key in commands) {
let item = document.createElement('div')
this.element.appendChild(item)
item.innerHTML = key
item.style.paddingBottom = item.style.paddingTop = this.spacing
2019-07-18 12:26:39 +02:00
Elements.setStyle(item, {
color: this.normalColor,
cursor: 'default'
})
2019-03-21 09:57:27 +01:00
Elements.addClass(item, 'unselectable')
Elements.addClass(item, 'popupMenuItem')
this.items[key] = item
2019-07-18 12:26:39 +02:00
item.onclick = event => {
this.perform(event, key)
2019-07-18 12:26:39 +02:00
}
item.ontap = event => {
this.perform(event, key)
2019-07-18 12:26:39 +02:00
}
item.onmouseover = event => {
this.over(event, key)
}
item.onmouseout = event => {
this.out(event, key)
}
2019-03-21 09:57:27 +01:00
}
this.element.appendChild(this.notch)
this.parent.appendChild(this.element)
this.insertedNode = this.element
Elements.setStyle(this.element, this.defaultStyle())
this.layout()
return this
}
/** Execute a menu command.
* @param {object} event - The trigger event.
2019-03-21 09:57:27 +01:00
* @param {string} key - The selected key.
*/
perform(event, key) {
2019-03-21 09:57:27 +01:00
let func = this.commands[key]
if (this.autoClose) {
this.close()
}
2021-02-24 16:13:50 +01:00
setTimeout(
(event, key) => {
func(event, key)
},
20,
event,
key
)
2019-03-21 09:57:27 +01:00
}
/** Update the menu item denoted by key.
* @param {string} key - The selected key.
* @param {boolean} highlight - Show the item highlighted.
*/
update(key, highlight = false) {
let text = this.items[key]
2019-07-18 12:26:39 +02:00
text.style.color = highlight ? this.highlightColor : this.normalColor
2019-03-21 09:57:27 +01:00
}
/** Mouse over handöer.
* @param {Event} event - The mouse event.
* @param {boolean} key - The selected key.
*/
over(event, key) {
for (let k in this.items) {
this.update(k, k == key)
}
}
/** Mouse out handöer.
* @param {Event} event - The mouse event.
* @param {boolean} key - The selected key.
*/
out(event, key) {
this.update(key)
}
/** Shows the PopupMenu with the given commands at the specified point.
* @param {Object} commands - A dict object with command label strings as keys
* and command functions as values.
* @param {Point} point - The position as x, y coordinates {px}.
* @return {PopupMenu} this
2019-07-18 12:26:39 +02:00
*/
2019-03-21 09:57:27 +01:00
showAt(commands, point) {
this.show(commands)
this.placeAt(point)
return this
}
/** Convenient static methods to show and reuse a PopupMenu implemented
* as a class variable.
* @param {Object} commands - A dict object with command label strings as keys
* and command functions as values.
* @param {Point} point - The position as x, y coordinates {px}.
* @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 {boolean} autoClose - Autoclose the menu after selecting an item
*/
2019-07-18 12:26:39 +02:00
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
} = {}
) {
2019-03-21 09:57:27 +01:00
let registered = Poppable.get(context)
if (registered) {
this.closePopup()
return
}
2019-07-18 12:26:39 +02:00
console.log('open', point)
2019-07-30 16:56:29 +02:00
let notchPosition = point.y < 50 && switchPos ? 'topCenter' : 'bottomCenter'
2019-03-21 09:57:27 +01:00
let popup = new PopupMenu({
2019-07-18 12:26:39 +02:00
parent,
fontSize,
padding,
zIndex,
spacing,
switchPos,
notchSize,
notchPosition,
maxWidth,
backgroundColor,
normalColor,
2019-03-21 09:57:27 +01:00
notchPosition,
2019-07-18 12:26:39 +02:00
keepWithin,
autoClose
2019-03-21 09:57:27 +01:00
})
popup.showAt(commands, point)
popup.register(context)
2019-07-18 12:26:39 +02:00
popup.closeEventListener = e => {
if (this.eventOutside(e)) this.closePopup(context)
2019-03-21 09:57:27 +01:00
}
if (autoClose) {
2019-07-30 16:56:29 +02:00
context.addEventListener('mousedown', popup.closeEventListener, true)
context.addEventListener('touchstart', popup.closeEventListener, true)
context.addEventListener('pointerdown', popup.closeEventListener, true)
2019-03-21 09:57:27 +01:00
}
}
static eventOutside(e) {
return !Elements.hasClass(e.target, 'popupMenuItem')
}
/** Convenient static methods to close the PopupMenu implemented
* as a class variable.
*/
2019-07-18 12:26:39 +02:00
static closePopup(context = window) {
2019-03-21 09:57:27 +01:00
let registered = Poppable.get(context)
if (registered) {
registered.close()
2019-07-30 16:56:29 +02:00
context.removeEventListener('mousedown', registered.closeEventListener)
context.removeEventListener('touchstart', registered.closeEventListener)
context.removeEventListener('pointerdown', registered.closeEventListener)
2019-03-21 09:57:27 +01:00
}
}
}