/* 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 = `
` let overlay_html = `
` let overlay_x_html = `
x
` let window_html = `
` let topbar_html = `
` let titlebar_html = `
` let window_inner_x_html = `
x
` let window_floating_x_html = `
` let content_container_html = `
` let content_html = `
` let progressbar_container_html = `
` let progressbar_html = `
` Msg.insert(document.body, container_html) instance.container = Msg.el(`#Msg-container-${instance.options.id}`) if (instance.options.enable_overlay) { Msg.insert(instance.container, overlay_html) instance.overlay = Msg.el(`#Msg-overlay-${instance.options.id}`) if (instance.options.overlay_x !== `none`) { Msg.insert(instance.overlay, overlay_x_html) instance.overlay_x = Msg.el(`#Msg-overlay-x-${instance.options.id}`) } } Msg.insert(instance.container, window_html) instance.window = Msg.el(`#Msg-window-${instance.options.id}`) if (instance.options.enable_titlebar || instance.options.window_x.includes(`inner`)) { Msg.insert(instance.window, topbar_html) instance.topbar = Msg.el(`#Msg-topbar-${instance.options.id}`) if (instance.options.enable_titlebar) { Msg.insert(instance.topbar, titlebar_html) instance.titlebar = Msg.el(`#Msg-titlebar-${instance.options.id}`) } if (instance.options.window_x.includes(`inner`)) { Msg.insert(instance.topbar, window_inner_x_html) instance.window_inner_x = Msg.el(`#Msg-window-inner-x-${instance.options.id}`) } } if (instance.options.window_x.includes(`floating`)) { Msg.insert(instance.window, window_floating_x_html, `afterbegin`) instance.window_floating_x = Msg.el(`#Msg-window-floating-x-${instance.options.id}`) } Msg.insert(instance.window, content_container_html) instance.content_container = Msg.el(`#Msg-content-container-${instance.options.id}`) Msg.insert(instance.content_container, content_html) instance.content = Msg.el(`#Msg-content-${instance.options.id}`) if (instance.options.enable_progressbar) { Msg.insert(instance.window, progressbar_container_html) instance.progressbar_container = Msg.el(`#Msg-progressbar-container-${instance.options.id}`) Msg.insert(instance.progressbar_container, progressbar_html) instance.progressbar = Msg.el(`#Msg-progressbar-${instance.options.id}`) } if (instance.overlay !== undefined) { Msg.ev(instance.overlay, `click`, () => { if (instance.options.close_on_overlay_click) { instance.options.on_overlay_click(instance) instance.close() } }) } if (instance.titlebar !== undefined) { Msg.ev(instance.titlebar, `click`, () => { if (instance.options.close_on_titlebar_click) { instance.options.on_titlebar_click(instance) instance.close() } }) } Msg.ev(instance.window, `click`, (e) => { instance.options.on_click(instance) }) Msg.ev(instance.window, `wheel`, (e) => { let direction = e.deltaY > 0 ? `down` : `up` if (direction === `down`) { instance.options.on_wheel_down(instance) } else if (direction === `up`) { instance.options.on_wheel_up(instance) } }) Msg.ev(instance.window, `auxclick`, (e) => { if (e.which === 2) { instance.options.on_middle_click(instance) } }) if (instance.window_inner_x !== undefined) { Msg.ev(instance.window_inner_x, `click`, (e) => { instance.options.on_x_button_click(instance) instance.close() e.stopPropagation() }) } if (instance.window_floating_x !== undefined) { Msg.ev(instance.window_floating_x, `click`, (e) => { instance.options.on_x_button_click(instance) instance.close() e.stopPropagation() }) } if (instance.overlay_x !== undefined) { Msg.ev(instance.overlay_x, `click`, (e) => { instance.options.on_x_button_click(instance) instance.close() e.stopPropagation() }) } instance.options.after_create(instance) } instance.recreate = () => { instance.destroy() instance.create() } instance.destroy = () => { if (instance.created()) { if (instance.options.before_destroy(instance) === false) { return } instance.check_remove_overflow_hidden() instance.container.parentNode.removeChild(instance.container) instance.container = undefined instance.overlay = undefined instance.overlay_x = undefined instance.window = undefined instance.topbar = undefined instance.titlebar = undefined instance.window_inner_x = undefined instance.window_floating_x = undefined instance.content_container = undefined instance.content = undefined instance.progressbar_container = undefined instance.progressbar = undefined instance.options.after_destroy(instance) } } instance.is_open = () => { if (!instance.created() || instance.container.style.display === `none`) { return false } else { return true } } instance.any_open = () => { for (let inst of Msg.instances) { if (inst.is_open()) { return true } } return false } instance.any_higher_open = () => { for (let inst of Msg.instances) { if (inst.options.zStack_level === 2) { if (inst.is_open()) { return true } } } return false } instance.any_lower_open = () => { for (let inst of Msg.instances) { if (inst.options.zStack_level === 1) { if (inst.is_open()) { return true } } } return false } instance.num_open = () => { let num_open = 0 for (let inst of Msg.instances) { if (inst.is_open()) { num_open += 1 } } return num_open } instance.num_open_higher = () => { let num_open = 0 for (let inst of Msg.instances) { if (inst.is_open()) { if (inst.options.zStack_level === 2) { num_open += 1 } } } return num_open } instance.num_open_lower = () => { let num_open = 0 for (let inst of Msg.instances) { if (inst.is_open()) { if (inst.options.zStack_level === 1) { num_open += 1 } } } return num_open } instance.show_all = () => { for (let i = 0; i < Msg.instances.length; i++) { Msg.instances[i].show() } } instance.close_all = () => { if (!instance.any_open()) { return false } for (let i = 0; i < Msg.instances.length; i++) { Msg.instances[i].close() } } instance.close_all_higher = () => { if (!instance.any_higher_open()) { return false } for (let higher of instance.higher_instances()) { higher.close() } } instance.close_all_lower = () => { if (!instance.any_lower_open()) { return false } for (let lower of instance.lower_instances()) { lower.close() } } instance.create_all = () => { for (let i = 0; i < Msg.instances.length; i++) { Msg.instances[i].create() } } instance.recreate_all = () => { for (let i = 0; i < Msg.instances.length; i++) { Msg.instances[i].recreate() } } instance.destroy_all = () => { for (let i = 0; i < Msg.instances.length; i++) { Msg.instances[i].destroy() } } instance.common_zIndex = (zIndex) => { zIndex = parseInt(zIndex) let common if (zIndex > 0) { common = parseInt(zIndex.toString().substring(1)) } else { common = -2000 } return common } instance.highest_zIndex = () => { let highest = -2000 let windows = Msg.els(`.Msg-window`) for (let i = 0; i < windows.length; i++) { let zIndex = parseInt(windows[i].style.zIndex) if (zIndex > highest) { highest = zIndex } } return parseInt(highest) } instance.highest_instance = () => { let zIndex = instance.highest_zIndex() if (zIndex < 0) { return false } for (let i of Msg.instances) { if (i.window !== undefined) { if (parseInt(i.window.style.zIndex) === zIndex) { return i } } } return false } instance.highest_common_zIndex = () => { let highest = -2000 let windows = Msg.els(`.Msg-window`) for (let i = 0; i < windows.length; i++) { let zIndex = instance.common_zIndex(windows[i].style.zIndex) if (zIndex > highest) { highest = zIndex } } return highest } instance.is_highest = () => { if (instance.is_open()) { let zIndex = instance.highest_zIndex() if (parseInt(instance.window.style.zIndex) === zIndex) { return true } } return false } instance.html = () => { if (instance.created()) { return instance.content.innerHTML } return `` } instance.title_html = () => { if (instance.titlebar !== undefined) { return instance.titlebar.innerHTML } return `` } instance.check_add_overflow_hidden = () => { if (instance.options.lock) { document .querySelector(instance.options.locked_element) .classList.add(`Msg-overflow-hidden`) } } instance.check_remove_overflow_hidden = () => { for (let i of Msg.instances) { if (i.is_open()) { if (i.options.lock) { return } } } document .querySelector(instance.options.locked_element) .classList.remove(`Msg-overflow-hidden`) } instance.to_top = () => { if (instance.is_open()) { let zIndex = parseInt(instance.window.style.zIndex) let highest_common = instance.highest_common_zIndex() let highest if (instance.options.zStack_level === 1) { highest = Math.max(5000000, 5000000 + highest_common) } else { highest = Math.max(50000000, 50000000 + highest_common) } if (highest > zIndex) { if (instance.overlay !== undefined) { instance.overlay.style.zIndex = highest + 1 } instance.window.style.zIndex = highest + 2 } } } instance.instances = () => { return Msg.instances } instance.higher_instances = () => { let instances = [] for (let inst of Msg.instances) { if (inst.options.zStack_level === 2) { instances.push(inst) } } return instances } instance.lower_instances = () => { let instances = [] for (let inst of Msg.instances) { if (inst.options.zStack_level === 1) { instances.push(inst) } } return instances } instance.get_instance_by_id = (id) => { for (let i of Msg.instances) { if (i.options.id == id) { return i } } } instance.autoclose_timer = () => { instance.autoclose_timeout = setTimeout(() => { instance.close() }, instance.options.autoclose_delay) } instance.reset_timers = () => { clearTimeout(instance.autoclose_timeout) } instance.clear_autoclose_progressbar_interval = () => { clearInterval(instance.progressbar_animation) } instance.animate_autoclose_progressbar = () => { instance.clear_autoclose_progressbar_interval() if (instance.options.reverse_autoclose_progressbar) { let percentage = 0 instance.progressbar.style.width = `0%` instance.progressbar_animation = setInterval(() => { if (!instance.created()) { clearInterval(instance.progressbar_animation) } percentage += 1 instance.set_progress(percentage) if (percentage >= 100) { clearInterval(instance.progressbar_animation) } }, instance.options.autoclose_delay / 100) } else { let percentage = 100 instance.progressbar.style.width = `100%` instance.progressbar_animation = setInterval(() => { if (!instance.created()) { clearInterval(instance.progressbar_animation) } percentage -= 1 instance.set_progress(percentage) if (percentage <= 0) { clearInterval(instance.progressbar_animation) } }, instance.options.autoclose_delay / 100) } } instance.set_progress = (percentage) => { if (percentage === undefined) { return } instance.create() if (instance.progressbar === undefined) { return } if (instance.options.before_set_progress(instance) === false) { return } if (percentage > 100) { percentage = 100 } if (percentage < 0) { percentage = 0 } instance.progressbar.style.width = `${percentage}%` instance.options.after_set_progress(instance) } instance.get_progress = () => { if (instance.progressbar === undefined) { return } return Math.round((instance.progressbar.offsetWidth / instance.window.offsetWidth) * 100) } instance.reset_props = () => { if (instance.overlay !== undefined) { instance.overlay.style.opacity = 1 } instance.window.style.opacity = 1 instance.window.style.zoom = 1 } instance.stack_pos_top_sort = (a, b) => { return a.stack_pos_top - b.stack_pos_top } instance.stack_pos_top_sort2 = (a, b) => { return b.stack_pos_top - a.stack_pos_top } instance.stack_pos_bottom_sort = (a, b) => { return a.stack_pos_bottom - b.stack_pos_bottom } instance.stack_pos_bottom_sort2 = (a, b) => { return b.stack_pos_bottom - a.stack_pos_bottom } instance.stack_pos_left_sort = (a, b) => { return a.stack_pos_left - b.stack_pos_left } instance.stack_pos_left_sort2 = (a, b) => { return b.stack_pos_left - a.stack_pos_left } instance.stack_pos_right_sort = (a, b) => { return a.stack_pos_right - b.stack_pos_right } instance.stack_pos_right_sort2 = (a, b) => { return b.stack_pos_right - a.stack_pos_right } instance.highest_in_position = (mode) => { let highest = -2000 let highest_ins let p = instance.options.position for (let i of Msg.instances) { if (i.is_open()) { if (i.options.position === p) { let pos if (mode === `vertical`) { if (p.includes(`top`)) { pos = i.stack_pos_top } else if (p.includes(`bottom`)) { pos = i.stack_pos_bottom } } else if (mode === `horizontal`) { if (p.includes(`left`)) { pos = i.stack_pos_left } else if (p.includes(`right`)) { pos = i.stack_pos_right } } if (pos !== undefined) { if (pos > highest) { highest = pos highest_ins = i } } } } } return highest_ins } instance.lowest_in_position = (mode) => { let lowest = 200000000 let lowest_ins let p = instance.options.position for (let i of Msg.instances) { if (i.is_open()) { if (i.options.position === p) { let pos if (mode === `vertical`) { if (p.includes(`top`)) { pos = i.stack_pos_top } else if (p.includes(`bottom`)) { pos = i.stack_pos_bottom } } else if (mode === `horizontal`) { if (p.includes(`left`)) { pos = i.stack_pos_left } else if (p.includes(`right`)) { pos = i.stack_pos_right } } if (pos !== undefined) { if (pos < lowest) { lowest = pos lowest_ins = i } } } } } return lowest_ins } instance.above_in_position = (ins, mode) => { let ins_above = [] let p = ins.options.position for (let i of Msg.instances) { if (i.is_open()) { if (i.options.position === p) { if (mode === `vertical`) { if (p.includes(`top`)) { if (i.stack_pos_top > ins.stack_pos_top) { ins_above.push(i) } } else if (p.includes(`bottom`)) { if (i.stack_pos_bottom > ins.stack_pos_bottom) { ins_above.push(i) } } } else if (mode === `horizontal`) { if (p.includes(`left`)) { if (i.stack_pos_left > ins.stack_pos_left) { ins_above.push(i) } } else if (p.includes(`right`)) { if (i.stack_pos_right > ins.stack_pos_right) { ins_above.push(i) } } } } } } if (mode === `vertical`) { if (p.includes(`top`)) { ins_above.sort(instance.stack_pos_top_sort) } else if (p.includes(`bottom`)) { ins_above.sort(instance.stack_pos_bottom_sort) } } else if (mode === `horizontal`) { if (p.includes(`left`)) { ins_above.sort(instance.stack_pos_left_sort) } else if (p.includes(`right`)) { ins_above.sort(instance.stack_pos_right_sort) } } return ins_above } instance.nextbelow_in_position = (ins, mode) => { let ins_below = [] let p = ins.options.position for (let i of Msg.instances) { if (i.is_open()) { let ip = i.options.position if (ip === p) { if (mode === `vertical`) { let sp if (ip.includes(`left`)) { sp = i.stack_pos_left } else if (ip.includes(`right`)) { sp = i.stack_pos_right } if (sp !== undefined) { if ((sp > i.options.edge_padding_x + 2) || (sp < i.options.edge_padding_x - 2)) { continue } } if (p.includes(`top`)) { if (i.stack_pos_top < ins.stack_pos_top) { ins_below.push(i) } } else if (p.includes(`bottom`)) { if (i.stack_pos_bottom < ins.stack_pos_bottom) { ins_below.push(i) } } } else if (mode === `horizontal`) { if (p.includes(`left`)) { if (i.stack_pos_left < ins.stack_pos_left) { ins_below.push(i) } } else if (p.includes(`right`)) { if (i.stack_pos_right < ins.stack_pos_right) { ins_below.push(i) } } } } } } if (mode === `vertical`) { if (p.includes(`top`)) { ins_below.sort(instance.stack_pos_top_sort2) } else if (p.includes(`bottom`)) { ins_below.sort(instance.stack_pos_bottom_sort2) } } else if (mode === `horizontal`) { if (p.includes(`left`)) { ins_below.sort(instance.stack_pos_left_sort2) } else if (p.includes(`right`)) { ins_below.sort(instance.stack_pos_right_sort2) } } return ins_below[0] } instance.check_vStack = () => { if (instance.vStackable) { let p = instance.options.position if (p.includes(`top`)) { instance.stack_pos_top = -1000000 } else if (p.includes(`bottom`)) { instance.stack_pos_bottom = -1000000 } let highest = instance.highest_in_position(`vertical`) let new_top, new_bottom if (highest !== undefined && highest !== instance) { if (p.includes(`top`)) { new_top = highest.stack_pos_top + highest.stack_height + instance.options.sideStack_padding instance.window.style.top = new_top + `px` } else if (p.includes(`bottom`)) { new_bottom = highest.stack_pos_bottom + highest.stack_height + instance.options.sideStack_padding instance.window.style.bottom = new_bottom + `px` } } else { if (p.includes(`top`)) { new_top = instance.options.edge_padding_y instance.window.style.top = new_top + `px` } else if (p.includes(`bottom`)) { new_bottom = instance.options.edge_padding_y instance.window.style.bottom = new_bottom + `px` } } if (p.includes(`top`)) { instance.stack_pos_top = new_top } else if (p.includes(`bottom`)) { instance.stack_pos_bottom = new_bottom } } } instance.collapse_vStack = () => { let p = instance.options.position let ins_above = instance.above_in_position(instance, `vertical`) for (let i of ins_above) { if (!i.options.sideStack_collapse || i.options.sideStack !== `vertical`) { continue } let below = instance.nextbelow_in_position(i, `vertical`) let new_top, new_bottom if (below !== undefined) { if (p.includes(`top`)) { new_top = below.stack_pos_top + below.window.offsetHeight + i.options.sideStack_padding i.window.style.top = new_top + `px` } else if (p.includes(`bottom`)) { new_bottom = below.stack_pos_bottom + below.window.offsetHeight + i.options.sideStack_padding i.window.style.bottom = new_bottom + `px` } } else { if (p.includes(`top`)) { new_top = i.options.edge_padding_y i.window.style.top = new_top + `px` } else if (p.includes(`bottom`)) { new_bottom = i.options.edge_padding_y i.window.style.bottom = new_bottom + `px` } } if (p.includes(`top`)) { i.stack_pos_top = new_top } else if (p.includes(`bottom`)) { i.stack_pos_bottom = new_bottom } } } instance.fix_vStack = () => { let p = instance.options.position let below = instance.lowest_in_position(`vertical`) let new_top, new_bottom if (below !== undefined) { let above = instance.above_in_position(below, `vertical`) for (let i of above) { if (p.includes(`top`)) { new_top = below.stack_pos_top + below.window.offsetHeight + i.options.sideStack_padding i.window.style.top = new_top + `px` i.stack_pos_top = new_top } else if (p.includes(`bottom`)) { new_bottom = below.stack_pos_bottom + below.window.offsetHeight + i.options.sideStack_padding i.window.style.bottom = new_bottom + `px` i.stack_pos_bottom = new_bottom } below = i } } } instance.check_hStack = () => { if (instance.hStackable) { let p = instance.options.position if (p.includes(`left`)) { instance.stack_pos_left = -1000000 } else if (p.includes(`right`)) { instance.stack_pos_right = -1000000 } let highest = instance.highest_in_position(`horizontal`) let new_left, new_right if (highest !== undefined && highest !== instance) { if (p.includes(`left`)) { new_left = highest.stack_pos_left + highest.stack_width + instance.options.sideStack_padding instance.window.style.left = new_left + `px` } else if (p.includes(`right`)) { new_right = highest.stack_pos_right + highest.stack_width + instance.options.sideStack_padding instance.window.style.right = new_right + `px` } } else { if (p.includes(`left`)) { new_left = instance.options.edge_padding_x instance.window.style.left = new_left + `px` } else if (p.includes(`right`)) { new_right = instance.options.edge_padding_x instance.window.style.right = new_right + `px` } } if (p.includes(`left`)) { instance.stack_pos_left = new_left } else if (p.includes(`right`)) { instance.stack_pos_right = new_right } } } instance.collapse_hStack = () => { let p = instance.options.position let ins_above = instance.above_in_position(instance, `horizontal`) for (let i of ins_above) { if (!i.options.sideStack_collapse || i.options.sideStack !== `horizontal`) { continue } let below = instance.nextbelow_in_position(i, `horizontal`) let new_left, new_right if (below !== undefined) { if (p.includes(`left`)) { new_left = below.stack_pos_left + below.window.offsetWidth + i.options.sideStack_padding i.window.style.left = new_left + `px` } else if (p.includes(`right`)) { new_right = below.stack_pos_right + below.window.offsetWidth + i.options.sideStack_padding i.window.style.right = new_right + `px` } } else { if (p.includes(`left`)) { new_left = i.options.edge_padding_x i.window.style.left = new_left + `px` } else if (p.includes(`right`)) { new_right = i.options.edge_padding_x i.window.style.right = new_right + `px` } } if (p.includes(`left`)) { i.stack_pos_left = new_left } else if (p.includes(`right`)) { i.stack_pos_right = new_right } } } instance.fix_hStack = () => { let p = instance.options.position let below = instance.lowest_in_position(`horizontal`) if (below !== undefined) { let above = instance.above_in_position(below, `horizontal`) let new_left, new_right for (let i of above) { if (p.includes(`left`)) { new_left = below.stack_pos_left + below.window.offsetWidth + i.options.sideStack_padding i.window.style.left = new_left + `px` i.stack_pos_left = new_left } else if (p.includes(`right`)) { new_right = below.stack_pos_right + below.window.offsetWidth + i.options.sideStack_padding i.window.style.right = new_right + `px` i.stack_pos_right = new_right } below = i } } } instance.fix_stacks = () => { if (instance.is_open()) { instance.fix_vStack() instance.fix_hStack() } } instance.set_default_positions = () => { let p = instance.options.position let edge_x = instance.options.edge_padding_x let edge_y = instance.options.edge_padding_y if (p === `top`) { instance.stack_pos_top = edge_y instance.stack_pos_bottom = undefined instance.stack_pos_left = undefined instance.stack_pos_right = undefined } else if (p === `bottom`) { instance.stack_pos_top = undefined instance.stack_pos_bottom = edge_y instance.stack_pos_left = undefined instance.stack_pos_right = undefined } else if (p === `left`) { instance.stack_pos_top = undefined instance.stack_pos_bottom = undefined instance.stack_pos_left = edge_x instance.stack_pos_right = undefined } else if (p === `right`) { instance.stack_pos_top = undefined instance.stack_pos_bottom = undefined instance.stack_pos_left = undefined instance.stack_pos_right = edge_x } else if (p === `topleft`) { instance.stack_pos_top = edge_y instance.stack_pos_bottom = undefined instance.stack_pos_left = edge_x instance.stack_pos_right = undefined } else if (p === `topright`) { instance.stack_pos_top = edge_y instance.stack_pos_bottom = undefined instance.stack_pos_left = undefined instance.stack_pos_right = edge_x } else if (p === `bottomleft`) { instance.stack_pos_top = undefined instance.stack_pos_bottom = edge_y instance.stack_pos_left = edge_x instance.stack_pos_right = undefined } else if (p === `bottomright`) { instance.stack_pos_top = undefined instance.stack_pos_bottom = edge_y instance.stack_pos_left = undefined instance.stack_pos_right = edge_x } else { instance.stack_pos_top = undefined instance.stack_pos_bottom = undefined instance.stack_pos_left = undefined instance.stack_pos_right = undefined } instance.stack_width = instance.window.offsetWidth instance.stack_height = instance.window.offsetHeight } instance.remove = () => { instance.destroy() for (let i = 0; i < Msg.instances.length; i++) { if (Msg.instances[i].options.id === instance.options.id) { Msg.instances.splice(i, 1) break } } } instance.is_textbox = (element) => { let tag_name = element.tagName.toLowerCase() if (tag_name === `textarea`) return true if (tag_name !== `input`) return false let type = element.getAttribute(`type`) if (!type) { return false } let input_types = [ `text`, `password`, `number`, `email`, `tel`, `url`, `search`, `date`, `datetime`, `datetime-local`, `time`, `month`, `week`, ] return input_types.includes(type.toLowerCase()) } if (Msg.msg === undefined && instance.options.id !== `__internal_instance__`) { Msg.msg = Msg.factory({ id: `__internal_instance__` }) let style = document.createElement(`style`) let css = ` .Msg-overflow-hidden{overflow: hidden} .Msg-overlay{background-color: rgba(0, 0, 0, 0.7)} .Msg-window{background-color: white;color: #222222} .Msg-titlebar{background-color: #c8c8c8;color: #222222} .Msg-progressbar{background-color: #c8c8c8} .Msg-window-inner-x:hover{background-color: #cacaca} .Msg-window-floating-x{background-color: #3a3a3a;color: white} .Msg-window-floating-x:hover{background-color: #2a2a2a} .Msg-overlay-x{color: white} .Msg-overlay-x:hover{background-color: #686868} .Msg-overlay-blue{background-color: rgba(101, 107, 124, 0.7)} .Msg-window-blue{background-color: #4f84b8;color: white} .Msg-titlebar-blue{background-color: #43729f;color: white} .Msg-progressbar-blue{background-color: #43729f} .Msg-window-inner-x-blue:hover{background-color: #476b8f} .Msg-overlay-x-blue{color: white} .Msg-overlay-x-blue:hover{background-color: #747484} .Msg-overlay-red{background-color: rgba(104, 64, 64, 0.7)} .Msg-window-red{background-color: #ca4e4e;color: white} .Msg-titlebar-red{background-color: #af3f3f;color: white} .Msg-progressbar-red{background-color: #af3f3f} .Msg-window-inner-x-red:hover{background-color: #9d4d4d} .Msg-overlay-x-red{color: white} .Msg-overlay-x-red:hover{background-color: #805e5e} .Msg-overlay-green{background-color: rgba(121, 159, 133, 0.7)} .Msg-window-green{background-color: #58a564;color: white} .Msg-titlebar-green{background-color: #52935c;color: white} .Msg-progressbar-green{background-color: #52935c} .Msg-window-inner-x-green:hover{background-color: #4e8456} .Msg-overlay-x-green{color: white} .Msg-overlay-x-green:hover{background-color: #7c957c} .Msg-overlay-black{background-color: rgba(121, 121, 121, 0.7)} .Msg-window-black{background-color: #1D1F21;color: white} .Msg-titlebar-black{background-color: #3c3c3c;color: white} .Msg-progressbar-black{background-color: #3c3c3c} .Msg-window-inner-x-black:hover{background-color: #424242} .Msg-overlay-x-black{color: white} .Msg-overlay-x-black:hover{background-color: #686868} ` style.innerHTML = css document.head.appendChild(style) Msg.ev(document, `keydown`, (e) => { let highest = Msg.msg.highest_instance() if (!highest) return if (e.key === `Escape`) { let highest = Msg.msg.highest_instance() if (!highest) return if (highest.options.clear_editables) { let el = document.activeElement if (highest.is_textbox(el)) { if (!el.readOnly && !el.disabled) { if (el.value.trim() !== ``) { let split = el.value.trimEnd().split(` `) let new_value = split.slice(0, -1).join(` `) + ` ` if (new_value.trim() === ``) { new_value = `` } el.value = new_value let event = new Event(`input`, { bubbles: true, cancelable: true, }) el.dispatchEvent(event) return } } } } if (highest.options.close_on_escape) { highest.close() } } }) } if (instance.options.id !== `__internal_instance__`) { Msg.instances.push(instance) Msg.num_created += 1 } return instance } Msg.instances = [] try { module.exports = Msg } catch (e) {}