/* Msg v14.2.2 https://github.com/Merkoba/Msg */
const Msg = {}
Msg.num_created = 0
Msg.el = (query, root = document) => {
return root.querySelector(query)
}
Msg.els = (query, root = document) => {
return Array.from(root.querySelectorAll(query))
}
Msg.ev = (element, action, callback, extra) => {
element.addEventListener(action, callback, extra)
}
Msg.insert = (element_1, element_2, position = `beforeend`) => {
element_1.insertAdjacentHTML(position, element_2)
}
Msg.factory = (options = {}) => {
const instance = {}
instance.stack_pos_top = undefined
instance.stack_pos_bottom = undefined
instance.stack_pos_left = undefined
instance.stack_pos_right = undefined
instance.stack_width = undefined
instance.stack_height = undefined
instance.options = options
instance.check_options = () => {
if (instance.options.preset !== undefined) {
if (instance.options.preset === `popup`) {
if (instance.options.class === undefined)
instance.options.class = `green`
if (instance.options.enable_overlay === undefined)
instance.options.enable_overlay = false
if (instance.options.position === undefined)
instance.options.position = `bottomright`
if (instance.options.remove_after_close === undefined)
instance.options.remove_after_close = true
if (instance.options.zStack_level === undefined)
instance.options.zStack_level = 1
if (instance.options.window_width === undefined)
instance.options.window_width = `460px`
if (instance.options.lock === undefined) instance.options.lock = false
}
else if (instance.options.preset === `popup_autoclose`) {
if (instance.options.class === undefined)
instance.options.class = `green`
if (instance.options.enable_overlay === undefined)
instance.options.enable_overlay = false
if (instance.options.position === undefined)
instance.options.position = `bottomright`
if (instance.options.autoclose === undefined)
instance.options.autoclose = true
if (instance.options.enable_progressbar === undefined)
instance.options.enable_progressbar = true
if (instance.options.remove_after_close === undefined)
instance.options.remove_after_close = true
if (instance.options.zStack_level === undefined)
instance.options.zStack_level = 1
if (instance.options.window_width === undefined)
instance.options.window_width = `460px`
if (instance.options.lock === undefined) instance.options.lock = false
}
else if (instance.options.preset === `window`) {
if (instance.options.window_height === undefined)
instance.options.window_height = `100vh`
if (instance.options.window_min_height === undefined)
instance.options.window_min_height = `100vh`
if (instance.options.window_max_height === undefined)
instance.options.window_max_height = `100vh`
if (instance.options.window_width === undefined)
instance.options.window_width = `100vw`
if (instance.options.window_min_width === undefined)
instance.options.window_min_width = `100vw`
if (instance.options.window_max_width === undefined)
instance.options.window_max_width = `100vw`
if (instance.options.disable_transformations === undefined)
instance.options.disable_transformations = true
if (instance.options.disable_content_padding === undefined)
instance.options.disable_content_padding = true
if (instance.options.full_content === undefined)
instance.options.full_content = true
if (instance.options.window_x === undefined)
instance.options.window_x = `none`
}
}
if (instance.options.id === undefined) {
instance.options.id = Msg.num_created + 1
}
if (instance.options.class === undefined) {
instance.options.class = `default`
}
if (instance.options.lock === undefined) {
instance.options.lock = true
}
if (instance.options.closeable === undefined) {
instance.options.closeable = true
}
if (instance.options.enable_overlay === undefined) {
instance.options.enable_overlay = true
}
if (instance.options.close_on_overlay_click === undefined) {
instance.options.close_on_overlay_click = true
}
if (instance.options.enable_titlebar === undefined) {
instance.options.enable_titlebar = false
}
if (instance.options.center_titlebar === undefined) {
instance.options.center_titlebar = false
}
if (instance.options.window_x === undefined) {
if (instance.options.enable_titlebar) {
instance.options.window_x = `inner_right`
}
else {
instance.options.window_x = `floating_right`
}
}
if (instance.options.overlay_x === undefined) {
instance.options.overlay_x = `none`
}
if (instance.options.close_on_escape === undefined) {
instance.options.close_on_escape = true
}
if (instance.options.clear_editables === undefined) {
instance.options.clear_editables = false
}
if (instance.options.before_show === undefined) {
instance.options.before_show = () => {}
}
if (instance.options.after_show === undefined) {
instance.options.after_show = () => {}
}
if (instance.options.before_set === undefined) {
instance.options.before_set = () => {}
}
if (instance.options.after_set === undefined) {
instance.options.after_set = () => {}
}
if (instance.options.before_set_title === undefined) {
instance.options.before_set_title = () => {}
}
if (instance.options.after_set_title === undefined) {
instance.options.after_set_title = () => {}
}
if (instance.options.before_set_progress === undefined) {
instance.options.before_set_progress = () => {}
}
if (instance.options.after_set_progress === undefined) {
instance.options.after_set_progress = () => {}
}
if (instance.options.before_close === undefined) {
instance.options.before_close = () => {}
}
if (instance.options.after_close === undefined) {
instance.options.after_close = () => {}
}
if (instance.options.after_last_closed === undefined) {
instance.options.after_last_closed = () => {}
}
if (instance.options.before_toggle === undefined) {
instance.options.before_toggle = () => {}
}
if (instance.options.after_toggle === undefined) {
instance.options.after_toggle = () => {}
}
if (instance.options.before_create === undefined) {
instance.options.before_create = () => {}
}
if (instance.options.after_create === undefined) {
instance.options.after_create = () => {}
}
if (instance.options.before_destroy === undefined) {
instance.options.before_destroy = () => {}
}
if (instance.options.after_destroy === undefined) {
instance.options.after_destroy = () => {}
}
if (instance.options.on_click === undefined) {
instance.options.on_click = () => {}
}
if (instance.options.on_middle_click === undefined) {
instance.options.on_middle_click = () => {}
}
if (instance.options.on_wheel_down === undefined) {
instance.options.on_wheel_down = () => {}
}
if (instance.options.on_wheel_up === undefined) {
instance.options.on_wheel_up = () => {}
}
if (instance.options.on_overlay_click === undefined) {
instance.options.on_overlay_click = () => {}
}
if (instance.options.on_titlebar_click === undefined) {
instance.options.on_titlebar_click = () => {}
}
if (instance.options.on_x_button_click === undefined) {
instance.options.on_x_button_click = () => {}
}
if (instance.options.autoclose === undefined) {
instance.options.autoclose = false
}
if (instance.options.autoclose_delay === undefined) {
instance.options.autoclose_delay = 5000
}
else {
instance.options.autoclose_delay = parseInt(instance.options.autoclose_delay)
}
if (instance.options.persistent === undefined) {
instance.options.persistent = true
}
if (instance.options.remove_after_close === undefined) {
instance.options.remove_after_close = false
}
if (instance.options.position === undefined) {
instance.options.position = `center`
}
if (instance.options.enable_progressbar === undefined) {
instance.options.enable_progressbar = false
}
if (instance.options.bind_progressbar_to_autoclose === undefined) {
instance.options.bind_progressbar_to_autoclose = true
}
if (instance.options.reverse_autoclose_progressbar === undefined) {
instance.options.reverse_autoclose_progressbar = false
}
if (instance.options.edge_padding_x === undefined) {
instance.options.edge_padding_x = 20
}
else {
instance.options.edge_padding_x = parseInt(instance.options.edge_padding_x)
}
if (instance.options.edge_padding_y === undefined) {
instance.options.edge_padding_y = 20
}
else {
instance.options.edge_padding_y = parseInt(instance.options.edge_padding_y)
}
if (instance.options.sideStack_padding === undefined) {
instance.options.sideStack_padding = 20
}
if (instance.options.sideStack_padding === undefined) {
instance.options.sideStack_padding = 20
}
else {
instance.options.sideStack_padding = parseInt(instance.options.sideStack_padding)
}
if (instance.options.sideStack === undefined) {
instance.options.sideStack = `vertical`
}
if (instance.options.sideStack_collapse === undefined) {
instance.options.sideStack_collapse = true
}
if (instance.options.zStack_level === undefined) {
instance.options.zStack_level = 2
}
else {
instance.options.zStack_level = parseInt(instance.options.zStack_level)
}
if (instance.options.window_width === undefined) {
instance.options.window_width = `auto`
}
if (instance.options.window_height === undefined) {
instance.options.window_height = `auto`
}
if (instance.options.window_min_width === undefined) {
instance.options.window_min_width = `auto`
}
if (instance.options.window_min_height === undefined) {
instance.options.window_min_height = `auto`
}
if (instance.options.window_max_width === undefined) {
instance.options.window_max_width = `80vw`
}
if (instance.options.window_max_height === undefined) {
instance.options.window_max_height = `80vh`
}
if (instance.options.window_cursor === undefined) {
instance.options.window_cursor = `default`
}
if (instance.options.titlebar_cursor === undefined) {
instance.options.titlebar_cursor = `default`
}
if (instance.options.window_unselectable === undefined) {
instance.options.window_unselectable = false
}
if (instance.options.replace_linebreaks === undefined) {
instance.options.replace_linebreaks = false
}
if (instance.options.close_others_on_show === undefined) {
instance.options.close_others_on_show = false
}
if (instance.options.scroll_on_show === undefined) {
instance.options.scroll_on_show = true
}
if (instance.options.locked_element === undefined) {
instance.options.locked_element = `body`
}
if (instance.options.disable_transformations === undefined) {
instance.options.disable_transformations = false
}
if (instance.options.disable_content_padding === undefined) {
instance.options.disable_content_padding = false
}
if (instance.options.full_content === undefined) {
instance.options.full_content = false
}
}
instance.check_options()
instance.created = () => {
if (instance.container === undefined) {
return false
}
return true
}
instance.close = () => {
if (!instance.is_open()) {
return
}
if (!instance.options.closeable) {
return
}
if (instance.options.before_close(instance) === false) {
return
}
instance.container.style.display = `none`
if (instance.overlay !== undefined) {
instance.overlay.style.zIndex = -1000
}
instance.collapse_vStack()
instance.collapse_hStack()
instance.window.style.zIndex = -1000
instance.clear_autoclose_progressbar_interval()
instance.check_remove_overflow_hidden()
if (!instance.options.persistent) {
instance.destroy()
}
instance.options.after_close(instance)
if (instance.num_open() === 0) {
instance.options.after_last_closed(instance)
}
if (instance.options.remove_after_close) {
instance.remove()
}
}
instance.set = (html) => {
if (html === undefined) {
return
}
instance.create()
if (instance.options.before_set(instance) === false) {
return
}
if (typeof html === `object`) {
if (html instanceof Element) {
instance.content.innerHTML = ``
instance.content.appendChild(html)
}
}
else {
html = html.toString()
if (instance.options.replace_linebreaks) {
html = html.replace(/(\n)/g, `
`)
}
instance.content.innerHTML = html
}
instance.fix_stacks()
instance.options.after_set(instance)
}
instance.set_title = (html) => {
if (html === undefined) {
return
}
instance.create()
if (instance.titlebar === undefined) {
return
}
if (instance.options.before_set_title(instance) === false) {
return
}
if (typeof html === `object`) {
if (html instanceof Element) {
instance.titlebar.innerHTML = ``
instance.titlebar.appendChild(html)
}
}
else {
html = html.toString()
if (instance.options.replace_linebreaks) {
html = html.replace(/(\n)/g, `
`)
}
instance.titlebar.innerHTML = html
}
instance.fix_stacks()
instance.options.after_set_title(instance)
}
instance.hide_titlebar = () => {
if (!instance.topbar) {
return
}
instance.topbar.style.display = `none`
}
instance.show_titlebar = () => {
if (!instance.topbar) {
return
}
instance.topbar.style.display = `flex`
}
instance.set_or_show = (html,) => {
if (instance.is_highest()) {
instance.set(html)
}
else {
instance.show(html)
}
}
instance.show = (content) => {
if (instance.options.close_on_show && instance.is_open()) {
instance.close()
instance.show(content)
return
}
let title
let html
if (typeof content === `object` && !(content instanceof Element)) {
title = content[0]
html = content[1]
}
else {
html = content
}
instance.create()
if (instance.options.before_show(instance) === false) {
return
}
if (html !== undefined) {
instance.set(html)
}
if (title !== undefined) {
instance.set_title(title)
}
instance.reset_timers()
if (!instance.is_open()) {
if (instance.options.close_others_on_show) {
instance.close_all()
}
instance.container.style.display = `block`
instance.check_add_overflow_hidden()
instance.set_default_positions()
instance.reset_props()
if (instance.options.sideStack === `vertical`) {
instance.check_vStack()
}
else if (instance.options.sideStack === `horizontal`) {
instance.check_hStack()
}
}
instance.to_top()
if (instance.options.scroll_on_show) {
instance.content_container.scrollTop = 0
}
if (instance.options.autoclose) {
instance.autoclose_timer()
if (instance.options.enable_progressbar && instance.options.bind_progressbar_to_autoclose) {
instance.animate_autoclose_progressbar()
}
}
instance.options.after_show(instance)
}
instance.toggle = () => {
instance.create()
if (instance.options.before_toggle(instance) === false) {
return
}
instance.is_open() ? instance.close() : instance.show()
instance.options.after_toggle(instance)
}
instance.create = () => {
if (instance.created()) {
return
}
if (Msg.el(`#Msg-container-${instance.options.id}`) !== null) {
throw `Msg Error: The html elements for this id have already been created. Use a different id.`
}
if (instance.options.before_create(instance) === false) {
return
}
let styles = {}
styles.container = `
display: none;
`
styles.overlay = `
position: fixed;
opacity: 1;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1000;
user-select: none;
`
styles.overlay_x = `
cursor: pointer;
float: ${instance.options.overlay_x};
font-size: 28px;
font-family: sans-serif;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding-left: 0.6em;
padding-right: 0.6em;
padding-top: 0.035em;
padding-bottom: 0.2em;
`
let p = instance.options.position
let edge_x = instance.options.edge_padding_x
let edge_y = instance.options.edge_padding_y
let win_x, win_y, win_trans
if (instance.options.disable_transformations) {
win_x = `left: 0;`
win_y = `top: 0;`
win_trans = `transform: initial;`
instance.vStackable = false
instance.hStackable = false
}
else if (p === `top`) {
win_x = `left: 50%;`
win_y = `top: ${edge_y}px;`
win_trans = `transform: translateX(-50%);`
instance.vStackable = true
instance.hStackable = false
}
else if (p === `bottom`) {
win_x = `left: 50%;`
win_y = `bottom: ${edge_y}px;`
win_trans = `transform: translateX(-50%);`
instance.vStackable = true
instance.hStackable = false
}
else if (p === `left`) {
win_x = `left: ${edge_x}px;`
win_y = `top: 50%;`
win_trans = `transform: translateY(-50%);`
instance.vStackable = false
instance.hStackable = true
}
else if (p === `right`) {
win_x = `right: ${edge_x}px;`
win_y = `top: 50%;`
win_trans = `transform: translateY(-50%);`
instance.vStackable = false
instance.hStackable = true
}
else if (p === `topleft`) {
win_x = `left: ${edge_x}px;`
win_y = `top: ${edge_y}px;`
win_trans = ``
instance.vStackable = true
instance.hStackable = true
}
else if (p === `topright`) {
win_x = `right: ${edge_x}px;`
win_y = `top: ${edge_y}px;`
win_trans = ``
instance.vStackable = true
instance.hStackable = true
}
else if (p === `bottomleft`) {
win_x = `left: ${edge_x}px;`
win_y = `bottom: ${edge_y}px;`
win_trans = ``
instance.vStackable = true
instance.hStackable = true
}
else if (p === `bottomright`) {
win_x = `right: ${edge_x}px;`
win_y = `bottom: ${edge_y}px;`
win_trans = ``
instance.vStackable = true
instance.hStackable = true
}
else {
win_x = `left: 50%;`
win_y = `top: 50%;`
win_trans = `transform: translate(-50%, -50%);`
instance.vStackable = false
instance.hStackable = false
}
let wun
if (instance.options.window_unselectable) {
wun = `user-select: none;`
}
else {
wun = ``
}
styles.window = `
display: flex;
flex-direction: column;
opacity: 1;
${win_x}
${win_y}
position: fixed;
width: ${instance.options.window_width};
height: ${instance.options.window_height};
min-width: ${instance.options.window_min_width};
min-height: ${instance.options.window_min_height};
max-width: ${instance.options.window_max_width};
max-height: ${instance.options.window_max_height};
${win_trans}
outline: 0;
${wun}
cursor: ${instance.options.window_cursor};
z-index: -1000;
`
styles.topbar = `
overflow: hidden;
flex-shrink: 0;
display: flex;
flex-direction: row;
`
let padl = `padding-left: 0.4em;`
let padr = `padding-right: 0.4em;`
let justcnt = ``
if (instance.options.center_titlebar) {
justcnt = `justify-content: center`
}
if (instance.options.center_titlebar && instance.options.window_x === `inner_right`) {
padl = `padding-left: 50.78px;`
padr = `padding-right: 10.78px;`
}
if (instance.options.center_titlebar && instance.options.window_x === `inner_left`) {
padl = `padding-left: 10.78px;`
padr = `padding-right: 50.78px;`
}
styles.titlebar = `
display: flex;
align-items: center;
${justcnt};
overflow: hidden;
order: 2;
flex-grow: 1;
${padl}
${padr}
min-height: 27px;
font-size: 16px;
font-family: sans-serif;
font-weight: bold;
white-space: nowrap;
cursor:${instance.options.titlebar_cursor};
`
let ix_order, ix_margin
if (instance.options.window_x.includes(`left`)) {
ix_order = `1`
ix_margin = ``
}
else {
ix_order = `3`
ix_margin = `auto`
}
styles.window_inner_x = `
cursor: pointer;
margin-left: ${ix_margin};
font-size: 24px;
font-family: sans-serif;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
overflow: hidden;
order: ${ix_order};
padding-left: 0.6em;
padding-right: 0.6em;
padding-top: 0.035em;
padding-bottom: 0.2em;
`
let fs, fms
if (instance.options.window_x.includes(`left`)) {
fs = `left: 0px;`
fms = `margin-left: -10px;`
}
else {
fs = `right: 0px;`
fms = `margin-right: -10px;`
}
styles.window_floating_x = `
cursor: pointer;
position: absolute;
top: 0px;
${fs}
margin-top: -10px;
${fms}
font-size: 16px;
font-family: sans-serif;
height: 22px;
width: 22px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
overflow: hidden;
z-index: 9999999999999999;
display: block;
box-sizing: border-box;
border-width: 3px;
border-style: solid;
border-color: #2B2D30;
border-radius: 100%;
background: linear-gradient(-45deg, transparent 0%, transparent 46%, white 46%, white 56%,transparent 56%, transparent 100%), linear-gradient(45deg, transparent 0%, transparent 46%, white 46%, white 56%,transparent 56%, transparent 100%);
background-color: #2B2D30;
box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.5);
transition: all 0.3s ease;
`
let overflow_y = `auto`
if (instance.options.preset === `window`) {
overflow_y = `hidden`
}
styles.content_container = `
overflow-y: ${overflow_y};
overflow-x: hidden;
border: none;
outline: 0;
margin: 0;
flex-grow: 1;
`
let pad
if (instance.options.disable_content_padding) {
pad = `padding: 0;`
}
else {
pad = `padding: 1.2rem;`
}
let cwid, chgt
if (instance.options.full_content) {
cwid = `width: 100%;`
chgt = `height: 100%;`
}
else {
cwid = ``
chgt = ``
}
styles.content = `
font-size: 16px;
text-align: center;
overflow-wrap: break-word;
${pad}
${cwid}
${chgt}
`
styles.progressbar_container = `
height: 11px;
width: 100%;
`
styles.progressbar = `
height: 100%;
width: 0%;
`
let container_class =
instance.options.container_class !== undefined
? instance.options.container_class
: instance.options.class
let overlay_class =
instance.options.overlay_class !== undefined
? instance.options.overlay_class
: instance.options.class
let overlay_x_class =
instance.options.overlay_x_class !== undefined
? instance.options.overlay_x_class
: instance.options.class
let window_class =
instance.options.window_class !== undefined
? instance.options.window_class
: instance.options.class
let topbar_class =
instance.options.topbar_class !== undefined
? instance.options.topbar_class
: instance.options.class
let titlebar_class =
instance.options.titlebar_class !== undefined
? instance.options.titlebar_class
: instance.options.class
let window_inner_x_class =
instance.options.window_inner_x_class !== undefined
? instance.options.window_inner_x_class
: instance.options.class
let window_floating_x_class =
instance.options.window_floating_x_class !== undefined
? instance.options.window_floating_x_class
: instance.options.class
let content_container_class =
instance.options.content_container_class !== undefined
? instance.options.content_container_class
: instance.options.class
let content_class =
instance.options.content_class !== undefined
? instance.options.content_class
: instance.options.class
let progressbar_container_class =
instance.options.progressbar_container_class !== undefined
? instance.options.progressbar_container_class
: instance.options.class
let progressbar_class =
instance.options.progressbar_class !== undefined
? instance.options.progressbar_class
: instance.options.class
container_class = container_class
.split(/\s+/)
.map((w) => (w.startsWith(`!`) ? w.substring(1) : `Msg-container-${w}`))
.join(` `)
overlay_class = overlay_class
.split(/\s+/)
.map((w) => (w.startsWith(`!`) ? w.substring(1) : `Msg-overlay-${w}`))
.join(` `)
overlay_x_class = overlay_x_class
.split(/\s+/)
.map((w) => (w.startsWith(`!`) ? w.substring(1) : `Msg-overlay-x-${w}`))
.join(` `)
window_class = window_class
.split(/\s+/)
.map((w) => (w.startsWith(`!`) ? w.substring(1) : `Msg-window-${w}`))
.join(` `)
topbar_class = topbar_class
.split(/\s+/)
.map((w) => (w.startsWith(`!`) ? w.substring(1) : `Msg-topbar-${w}`))
.join(` `)
titlebar_class = titlebar_class
.split(/\s+/)
.map((w) => (w.startsWith(`!`) ? w.substring(1) : `Msg-titlebar-${w}`))
.join(` `)
window_inner_x_class = window_inner_x_class
.split(/\s+/)
.map((w) =>
w.startsWith(`!`) ? w.substring(1) : `Msg-window-inner-x-${w}`
)
.join(` `)
window_floating_x_class = window_floating_x_class
.split(/\s+/)
.map((w) =>
w.startsWith(`!`) ? w.substring(1) : `Msg-window-floating-x-${w}`
)
.join(` `)
content_container_class = content_container_class
.split(/\s+/)
.map((w) =>
w.startsWith(`!`) ? w.substring(1) : `Msg-content-container-${w}`
)
.join(` `)
content_class = content_class
.split(/\s+/)
.map((w) => (w.startsWith(`!`) ? w.substring(1) : `Msg-content-${w}`))
.join(` `)
progressbar_container_class = progressbar_container_class
.split(/\s+/)
.map((w) =>
w.startsWith(`!`) ? w.substring(1) : `Msg-progressbar-container-${w}`
)
.join(` `)
progressbar_class = progressbar_class
.split(/\s+/)
.map((w) => (w.startsWith(`!`) ? w.substring(1) : `Msg-progressbar-${w}`))
.join(` `)
let container_html = `