Where does it come from?
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.` 142 | lorem += `
Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).` 143 | lorem += `
Where can I get some?
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.` 144 | let sm = `This is a simple message.` 145 | let sc = `There are options to give elements different ids and classes. Then it's a matter of customizing and reusing parts however you want.` 146 | let s2 = `
Bubbagum
`
147 | let s3 = `Open Another Window
`
148 | let s4 = `This window will autoclose.`
149 | let stoy = `Symmetric Harmony
By Tiffany Rayside
`
150 | let pops = []
151 | let colors = [`green`, `blue`, `red`, `black`]
152 | let current_color = 0
153 |
154 | function pop (position) {
155 | let color = colors[current_color]
156 | current_color += 1
157 |
158 | if (current_color === colors.length) {
159 | current_color = 0
160 | }
161 |
162 | let message, title
163 |
164 | if (color === `green`) {
165 | message = `Your popup is ready.`
166 | title = `Success`
167 | }
168 | else if (color === `blue`) {
169 | message = `You can click the popups.`
170 | title = `Reminder`
171 | }
172 | else if (color === `red`) {
173 | message = `Your ice cream is melting.`
174 | title = `Warning`
175 | }
176 | else if (color === `black`) {
177 | message = `Try giving me a star on GitHub!`
178 | title = `Tip`
179 | }
180 |
181 | let sideStack = el(`#select_sideStack`).value
182 | let autoclose = el(`#input_autoclose`).checked
183 | let sideStack_collapse = el(`#input_sideStack_collapse`).checked
184 | let enable_titlebar = el(`#input_enable_titlebar`).checked
185 | let window_x = el(`#select_window_x`).value
186 | let overlay_x = el(`#select_overlay_x`).value
187 | let enable_overlay = el(`#input_enable_overlay`).checked
188 | let lock = el(`#input_lock`).checked
189 | let enable_progressbar
190 |
191 | if (autoclose) {
192 | enable_progressbar = true
193 | }
194 | else {
195 | enable_progressbar = false
196 | }
197 |
198 | let popup = Msg.factory({
199 | class: color,
200 | preset: `popup`,
201 | position: position,
202 | autoclose: autoclose,
203 | autoclose_delay: 2000,
204 | window_x: window_x,
205 | overlay_x: overlay_x,
206 | enable_overlay: enable_overlay,
207 | enable_progressbar: enable_progressbar,
208 | lock: lock,
209 | sideStack: sideStack,
210 | sideStack_collapse: sideStack_collapse,
211 | enable_titlebar: enable_titlebar,
212 | edge_padding_x: el(`#input_edge_padding_x`).value,
213 | edge_padding_y: el(`#input_edge_padding_y`).value,
214 | sideStack_padding: el(`#input_sideStack_padding`).value,
215 | window_cursor: `pointer`,
216 | window_unselectable: true,
217 | on_click: function (instance) {
218 | show_options(instance)
219 | },
220 | })
221 |
222 | pops.push(popup)
223 | popup.show([title, message])
224 | }
225 |
226 | function show_options (popup) {
227 | let msg = Msg.factory({
228 | class: popup.options.class,
229 | enable_titlebar: true,
230 | center_titlebar: true,
231 | })
232 |
233 | let s = ``
234 | let keys = Object.keys(popup.options)
235 |
236 | for (let key of keys) {
237 | let prop = popup.options[key]
238 |
239 | if (typeof prop === `string`) {
240 | prop = `"${prop}"`
241 | }
242 |
243 | s += key + `: `
244 | s += prop + `` 245 | } 246 | 247 | msg.show([`Popup Properties`, s]) 248 | } 249 | 250 | let msg_window = Msg.factory({ 251 | id: `window`, 252 | preset: `window`, 253 | }) 254 | 255 | let txt = ` 256 |
257 |
281 | `
282 |
283 | function open_window () {
284 | msg_window.show(txt)
285 | }
286 |
287 | function show_color (color) {
288 | if (color.includes(`titlebar`)) {
289 | color = color.split(`_`)[0]
290 |
291 | let msg = Msg.factory({
292 | class: color,
293 | enable_titlebar: true,
294 | persistent: false,
295 | window_min_width: `20rem`,
296 | })
297 |
298 | let text = `let msg = Msg.factory({
299 | class: "${color}",
300 | enable_titlebar: true
301 | })`
302 | msg.show([`Theme`, `
258 | A wonderful serenity has taken possession of my entire soul,
259 | like these sweet mornings of spring which I enjoy with my whole heart.
260 | I am alone, and feel the charm of existence in this spot, which was created for the bliss
261 | of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere
262 | tranquil existence, that I neglect my talents. I should be incapable of drawing a single
263 | stroke at the present moment; and yet I feel that I never was a greater artist than now.
264 | When, while the lovely valley teems with vapour around me, and the meridian sun strikes
265 | the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal
266 | into the inner sanctuary, I throw myself down among the tall grass by the trickling stream;
267 | and, as I lie close to the earth, a thousand unknown plants are noticed by me: when I hear
268 | the buzz of the little world among the stalks, and grow familiar with the countless indescribable
269 | forms of the insects and flies, then I feel the presence of the Almighty, who formed us in his
270 | own image, and the breath of that universal love which bears and sustains us, as it floats around
271 | us in an eternity of bliss; and then, my friend, when darkness overspreads my eyes, and heaven and
272 | earth seem to dwell in my soul and absorb its power, like the form of a beloved mistress,
273 | then I often think with longing, Oh, would I could describe these conceptions, could impress
274 | upon paper all that is living so full and warm within me, that it might be the mirror of my soul,
275 | as my soul is the mirror of the infinite God! O my friend -- but it is too much for my strength
276 | -- I sink under the weight of the splendour of these visions! A wonderful serenity has taken
277 | possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.
278 |
279 |
280 |
Close This Window
280 |
${text}${text}")),t.content.innerHTML=o),t.fix_stacks(),t.options.after_set(t)))},t.set_title=o=>{void 0!==o&&(t.create(),void 0!==t.titlebar&&!1!==t.options.before_set_title(t)&&("object"==typeof o?o instanceof Element&&(t.titlebar.innerHTML="",t.titlebar.appendChild(o)):(o=o.toString(),t.options.replace_linebreaks&&(o=o.replace(/(\n)/g,"
")),t.titlebar.innerHTML=o),t.fix_stacks(),t.options.after_set_title(t)))},t.hide_titlebar=()=>{t.topbar&&(t.topbar.style.display="none")},t.show_titlebar=()=>{t.topbar&&(t.topbar.style.display="flex")},t.set_or_show=o=>{t.is_highest()?t.set(o):t.show(o)},t.show=o=>{if(t.options.close_on_show&&t.is_open())return t.close(),void t.show(o);let e,n;"object"!=typeof o||o instanceof Element?n=o:(e=o[0],n=o[1]),t.create(),!1!==t.options.before_show(t)&&(void 0!==n&&t.set(n),void 0!==e&&t.set_title(e),t.reset_timers(),t.is_open()||(t.options.close_others_on_show&&t.close_all(),t.container.style.display="block",t.check_add_overflow_hidden(),t.set_default_positions(),t.reset_props(),"vertical"===t.options.sideStack?t.check_vStack():"horizontal"===t.options.sideStack&&t.check_hStack()),t.to_top(),t.options.scroll_on_show&&(t.content_container.scrollTop=0),t.options.autoclose&&(t.autoclose_timer(),t.options.enable_progressbar&&t.options.bind_progressbar_to_autoclose&&t.animate_autoclose_progressbar()),t.options.after_show(t))},t.toggle=()=>{t.create(),!1!==t.options.before_toggle(t)&&(t.is_open()?t.close():t.show(),t.options.after_toggle(t))},t.create=()=>{if(t.created())return;if(null!==Msg.el(`#Msg-container-${t.options.id}`))throw"Msg Error: The html elements for this id have already been created. Use a different id.";if(!1===t.options.before_create(t))return;let o={container:"\n display: none;\n ",overlay:"\n position: fixed;\n opacity: 1;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n z-index: -1000;\n user-select: none;\n "};o.overlay_x=`\n cursor: pointer;\n float: ${t.options.overlay_x};\n font-size: 28px;\n font-family: sans-serif;\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n padding-left: 0.6em;\n padding-right: 0.6em;\n padding-top: 0.035em;\n padding-bottom: 0.2em;\n `;let e,n,s,i,r=t.options.position,a=t.options.edge_padding_x,l=t.options.edge_padding_y;t.options.disable_transformations?(e="left: 0;",n="top: 0;",s="transform: initial;",t.vStackable=!1,t.hStackable=!1):"top"===r?(e="left: 50%;",n=`top: ${l}px;`,s="transform: translateX(-50%);",t.vStackable=!0,t.hStackable=!1):"bottom"===r?(e="left: 50%;",n=`bottom: ${l}px;`,s="transform: translateX(-50%);",t.vStackable=!0,t.hStackable=!1):"left"===r?(e=`left: ${a}px;`,n="top: 50%;",s="transform: translateY(-50%);",t.vStackable=!1,t.hStackable=!0):"right"===r?(e=`right: ${a}px;`,n="top: 50%;",s="transform: translateY(-50%);",t.vStackable=!1,t.hStackable=!0):"topleft"===r?(e=`left: ${a}px;`,n=`top: ${l}px;`,s="",t.vStackable=!0,t.hStackable=!0):"topright"===r?(e=`right: ${a}px;`,n=`top: ${l}px;`,s="",t.vStackable=!0,t.hStackable=!0):"bottomleft"===r?(e=`left: ${a}px;`,n=`bottom: ${l}px;`,s="",t.vStackable=!0,t.hStackable=!0):"bottomright"===r?(e=`right: ${a}px;`,n=`bottom: ${l}px;`,s="",t.vStackable=!0,t.hStackable=!0):(e="left: 50%;",n="top: 50%;",s="transform: translate(-50%, -50%);",t.vStackable=!1,t.hStackable=!1),i=t.options.window_unselectable?"user-select: none;":"",o.window=`\n display: flex;\n flex-direction: column;\n opacity: 1;\n ${e}\n ${n}\n position: fixed;\n width: ${t.options.window_width};\n height: ${t.options.window_height};\n min-width: ${t.options.window_min_width};\n min-height: ${t.options.window_min_height};\n max-width: ${t.options.window_max_width};\n max-height: ${t.options.window_max_height};\n ${s}\n outline: 0;\n ${i}\n cursor: ${t.options.window_cursor};\n z-index: -1000;\n `,o.topbar="\n overflow: hidden;\n flex-shrink: 0;\n display: flex;\n flex-direction: row;\n ";let p,_,c,d,g="padding-left: 0.4em;",w="padding-right: 0.4em;",h="";t.options.center_titlebar&&(h="justify-content: center"),t.options.center_titlebar&&"inner_right"===t.options.window_x&&(g="padding-left: 50.78px;",w="padding-right: 10.78px;"),t.options.center_titlebar&&"inner_left"===t.options.window_x&&(g="padding-left: 10.78px;",w="padding-right: 50.78px;"),o.titlebar=`\n display: flex;\n align-items: center;\n ${h};\n overflow: hidden;\n order: 2;\n flex-grow: 1;\n ${g}\n ${w}\n min-height: 27px;\n font-size: 16px;\n font-family: sans-serif;\n font-weight: bold;\n white-space: nowrap;\n cursor:${t.options.titlebar_cursor};\n `,t.options.window_x.includes("left")?(p="1",_=""):(p="3",_="auto"),o.window_inner_x=`\n cursor: pointer;\n margin-left: ${_};\n font-size: 24px;\n font-family: sans-serif;\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n overflow: hidden;\n order: ${p};\n padding-left: 0.6em;\n padding-right: 0.6em;\n padding-top: 0.035em;\n padding-bottom: 0.2em;\n `,t.options.window_x.includes("left")?(c="left: 0px;",d="margin-left: -10px;"):(c="right: 0px;",d="margin-right: -10px;"),o.window_floating_x=`\n cursor: pointer;\n position: absolute;\n top: 0px;\n ${c}\n margin-top: -10px;\n ${d}\n font-size: 16px;\n font-family: sans-serif;\n height: 22px;\n width: 22px;\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n overflow: hidden;\n z-index: 9999999999999999;\n display: block;\n box-sizing: border-box;\n border-width: 3px;\n border-style: solid;\n border-color: #2B2D30;\n border-radius: 100%;\n 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%);\n background-color: #2B2D30;\n box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.5);\n transition: all 0.3s ease;\n `;let v,b,f,k="auto";"window"===t.options.preset&&(k="hidden"),o.content_container=`\n overflow-y: ${k};\n overflow-x: hidden;\n border: none;\n outline: 0;\n margin: 0;\n flex-grow: 1;\n `,v=t.options.disable_content_padding?"padding: 0;":"padding: 1.2rem;",t.options.full_content?(b="width: 100%;",f="height: 100%;"):(b="",f=""),o.content=`\n font-size: 16px;\n text-align: center;\n overflow-wrap: break-word;\n ${v}\n ${b}\n ${f}\n `,o.progressbar_container="\n height: 11px;\n width: 100%;\n ",o.progressbar="\n height: 100%;\n width: 0%;\n ";let u=void 0!==t.options.container_class?t.options.container_class:t.options.class,m=void 0!==t.options.overlay_class?t.options.overlay_class:t.options.class,x=void 0!==t.options.overlay_x_class?t.options.overlay_x_class:t.options.class,y=void 0!==t.options.window_class?t.options.window_class:t.options.class,M=void 0!==t.options.topbar_class?t.options.topbar_class:t.options.class,$=void 0!==t.options.titlebar_class?t.options.titlebar_class:t.options.class,S=void 0!==t.options.window_inner_x_class?t.options.window_inner_x_class:t.options.class,z=void 0!==t.options.window_floating_x_class?t.options.window_floating_x_class:t.options.class,I=void 0!==t.options.content_container_class?t.options.content_container_class:t.options.class,W=void 0!==t.options.content_class?t.options.content_class:t.options.class,j=void 0!==t.options.progressbar_container_class?t.options.progressbar_container_class:t.options.class,H=void 0!==t.options.progressbar_class?t.options.progressbar_class:t.options.class;u=u.split(/\s+/).map((o=>o.startsWith("!")?o.substring(1):`Msg-container-${o}`)).join(" "),m=m.split(/\s+/).map((o=>o.startsWith("!")?o.substring(1):`Msg-overlay-${o}`)).join(" "),x=x.split(/\s+/).map((o=>o.startsWith("!")?o.substring(1):`Msg-overlay-x-${o}`)).join(" "),y=y.split(/\s+/).map((o=>o.startsWith("!")?o.substring(1):`Msg-window-${o}`)).join(" "),M=M.split(/\s+/).map((o=>o.startsWith("!")?o.substring(1):`Msg-topbar-${o}`)).join(" "),$=$.split(/\s+/).map((o=>o.startsWith("!")?o.substring(1):`Msg-titlebar-${o}`)).join(" "),S=S.split(/\s+/).map((o=>o.startsWith("!")?o.substring(1):`Msg-window-inner-x-${o}`)).join(" "),z=z.split(/\s+/).map((o=>o.startsWith("!")?o.substring(1):`Msg-window-floating-x-${o}`)).join(" "),I=I.split(/\s+/).map((o=>o.startsWith("!")?o.substring(1):`Msg-content-container-${o}`)).join(" "),W=W.split(/\s+/).map((o=>o.startsWith("!")?o.substring(1):`Msg-content-${o}`)).join(" "),j=j.split(/\s+/).map((o=>o.startsWith("!")?o.substring(1):`Msg-progressbar-container-${o}`)).join(" "),H=H.split(/\s+/).map((o=>o.startsWith("!")?o.substring(1):`Msg-progressbar-${o}`)).join(" ");let T=``,L=``,E=``,C=``,q=``,A=``,D=`
x
`,P=``,Y=``,B=``,N=``,X=``;Msg.insert(document.body,T),t.container=Msg.el(`#Msg-container-${t.options.id}`),t.options.enable_overlay&&(Msg.insert(t.container,L),t.overlay=Msg.el(`#Msg-overlay-${t.options.id}`),"none"!==t.options.overlay_x&&(Msg.insert(t.overlay,E),t.overlay_x=Msg.el(`#Msg-overlay-x-${t.options.id}`))),Msg.insert(t.container,C),t.window=Msg.el(`#Msg-window-${t.options.id}`),(t.options.enable_titlebar||t.options.window_x.includes("inner"))&&(Msg.insert(t.window,q),t.topbar=Msg.el(`#Msg-topbar-${t.options.id}`),t.options.enable_titlebar&&(Msg.insert(t.topbar,A),t.titlebar=Msg.el(`#Msg-titlebar-${t.options.id}`)),t.options.window_x.includes("inner")&&(Msg.insert(t.topbar,D),t.window_inner_x=Msg.el(`#Msg-window-inner-x-${t.options.id}`))),t.options.window_x.includes("floating")&&(Msg.insert(t.window,P,"afterbegin"),t.window_floating_x=Msg.el(`#Msg-window-floating-x-${t.options.id}`)),Msg.insert(t.window,Y),t.content_container=Msg.el(`#Msg-content-container-${t.options.id}`),Msg.insert(t.content_container,B),t.content=Msg.el(`#Msg-content-${t.options.id}`),t.options.enable_progressbar&&(Msg.insert(t.window,N),t.progressbar_container=Msg.el(`#Msg-progressbar-container-${t.options.id}`),Msg.insert(t.progressbar_container,X),t.progressbar=Msg.el(`#Msg-progressbar-${t.options.id}`)),void 0!==t.overlay&&Msg.ev(t.overlay,"click",(()=>{t.options.close_on_overlay_click&&(t.options.on_overlay_click(t),t.close())})),void 0!==t.titlebar&&Msg.ev(t.titlebar,"click",(()=>{t.options.close_on_titlebar_click&&(t.options.on_titlebar_click(t),t.close())})),Msg.ev(t.window,"click",(o=>{t.options.on_click(t)})),Msg.ev(t.window,"wheel",(o=>{let e=o.deltaY>0?"down":"up";"down"===e?t.options.on_wheel_down(t):"up"===e&&t.options.on_wheel_up(t)})),Msg.ev(t.window,"auxclick",(o=>{2===o.which&&t.options.on_middle_click(t)})),void 0!==t.window_inner_x&&Msg.ev(t.window_inner_x,"click",(o=>{t.options.on_x_button_click(t),t.close(),o.stopPropagation()})),void 0!==t.window_floating_x&&Msg.ev(t.window_floating_x,"click",(o=>{t.options.on_x_button_click(t),t.close(),o.stopPropagation()})),void 0!==t.overlay_x&&Msg.ev(t.overlay_x,"click",(o=>{t.options.on_x_button_click(t),t.close(),o.stopPropagation()})),t.options.after_create(t)},t.recreate=()=>{t.destroy(),t.create()},t.destroy=()=>{if(t.created()){if(!1===t.options.before_destroy(t))return;t.check_remove_overflow_hidden(),t.container.parentNode.removeChild(t.container),t.container=void 0,t.overlay=void 0,t.overlay_x=void 0,t.window=void 0,t.topbar=void 0,t.titlebar=void 0,t.window_inner_x=void 0,t.window_floating_x=void 0,t.content_container=void 0,t.content=void 0,t.progressbar_container=void 0,t.progressbar=void 0,t.options.after_destroy(t)}},t.is_open=()=>!(!t.created()||"none"===t.container.style.display),t.any_open=()=>{for(let o of Msg.instances)if(o.is_open())return!0;return!1},t.any_higher_open=()=>{for(let o of Msg.instances)if(2===o.options.zStack_level&&o.is_open())return!0;return!1},t.any_lower_open=()=>{for(let o of Msg.instances)if(1===o.options.zStack_level&&o.is_open())return!0;return!1},t.num_open=()=>{let o=0;for(let t of Msg.instances)t.is_open()&&(o+=1);return o},t.num_open_higher=()=>{let o=0;for(let t of Msg.instances)t.is_open()&&2===t.options.zStack_level&&(o+=1);return o},t.num_open_lower=()=>{let o=0;for(let t of Msg.instances)t.is_open()&&1===t.options.zStack_level&&(o+=1);return o},t.show_all=()=>{for(let o=0;o
26 |
27 |
31 | 32 | Modal 33 | Popups 34 | Windows 35 | Installation 36 | Basic Usage 37 | 38 |
39 | 40 | Structure 41 | Styling 42 | Options 43 | Properties 44 | Methods 45 | Presets 46 | 47 |
48 | 49 | 50 |
55 | 56 | 57 | Demo 1 58 | Demo 2 59 | Demo 3 60 | Demo 4 64 | 65 | 66 | 67 |
68 |
71 | 72 | Keep clicking the demos to stack the popups: 73 | 74 |
75 | 76 | 77 | edge_padding_x: 78 | 79 | 80 | edge_padding_y: 81 | 82 | 83 |
84 | 85 | sideStack: 86 | 87 | 92 | 93 | sideStack_padding: 94 | 95 | 96 |
97 | 98 | autoclose: 99 | 100 | sideStack_collapse: 101 | 102 | 103 | enable_titlebar: 104 | 105 | 106 | lock: 107 | 108 | 109 |
110 | 111 | window_x: 112 | 113 | 120 | 121 | enable_overlay: 122 | 123 | 124 | overlay_x: 125 | 126 | 131 | 132 |
133 | 134 | center 135 | top 136 | bottom 137 | left 138 | right 139 | topleft 140 | bottomleft 141 | topright 142 | bottomright 143 | 144 |
145 | 146 | 147 |
164 | 165 | Open Window 167 | 168 |
To install just include the file in /dist:
182 |
187 |
213 |
msg.show("<i>Hello</i> <b>World</b>") 224 |
225 |
msg.show(document.getElementsByTagName("h1")[0]) 229 |
230 | 231 |
You can re-use the same instance to display different things. 232 |
Note that an instance can only show one thing at a time. 233 |
If you want to have multiple windows open you need to create 234 | multiple instances.
You can create factory functions to create 235 | and show instances on the fly.
The "persistent" option is to 236 | be considered when creating on the fly instances. If you're not going to 237 | use the instance again, it's advised to use persistent: false, which 238 | destroys the html elements after close, to avoid filling the dom with 239 | unncecesary elements. 240 | 241 |
270 | 271 | 272 |
275 | "Msg-container-id" (with classes: "Msg-container" and 276 | "Msg-container-class")
277 | "Msg-window-id" (with classes: "Msg-window" and "Msg-window-class")
278 | "Msg-content-container-id" (with classes: "Msg-content-container" and 279 | "Msg-content-container-class")
280 | "Msg-content-id" (with classes: "Msg-content" and "Msg-content-class")
281 | 282 | These elements are optional:
283 | "Msg-overlay-id" (with classes: "Msg-overlay" and "Msg-overlay-class") 284 | (Created by default)
285 | "Msg-topbar-id" (with classes: "Msg-topbar" and "Msg-topbar-class") 286 | (Created if Msg-window-inner-x or Msg-titlebar are created)
287 | "Msg-titlebar-id" (with classes: "Msg-titlebar" and "Msg-titlebar-class") 288 | (Not created by default)
289 | "Msg-window-inner-x-id" (with classes: "Msg-window-inner-x" and 290 | "Msg-window-inner-x-class") (Created by default)
291 | "Msg-window-floating-x-id" (with classes: "Msg-window-floating-x" and 292 | "Msg-window-floating-x-class") (Not created by default)
293 | "Msg-overlay-x-id" (with classes: "Msg-overlay-x" and 294 | "Msg-overlay-x-class") (Not created by default)
295 | "Msg-progressbar-container-id" (with classes: "Msg-progressbar-container" 296 | and "Msg-progressbar-container-class") (Created if Msg-progressbar is 297 | created)
298 | "Msg-progressbar-id" (with classes: "Msg-progressbar" and 299 | "Msg-progressbar-class") (Not created by default)
300 | 301 |
The structure looks like this: 302 | 303 |
334 | 335 | The z-index values of the windows are generated when they are shown, 336 | allowing for windows with different ids to stack on top of each other. 337 | This stack is called the zStack.
338 | 339 |
Stack Demo
340 | 341 | 342 |
345 | 346 | You can play with the ids and classes to have different types of 347 | windows.
348 | 349 | Elements can have multiple classes. For example, class:"foo bar" would 350 | create all elements with those classes, for example, content would have 351 | the classes "Msg-content", "Msg-content-foo" and "Msg-content-bar". It 352 | also works with specific classes, like content_class:"foo bar".
353 | 354 | If you don't want a class name to be turned into the Msg-element-classname 355 | format, you can append a "!" to it. For example overlay_class:"!glow" 356 | would use "glow" instead of "Msg-overlay-glow".
357 | 358 | The Msg-content's padding is set depending on your settings, to try to 359 | make it look pleasing in different situations.
360 | 361 | To override the css you will probably need to use !important 362 | declarations.
363 | 364 |
409 | 410 | 411 | There are some pre-made classes: 412 | 413 |
414 | 415 | Red 416 | Blue 417 | Green 418 | Black 419 | 420 |
With titlebar enabled: 421 | 422 |
423 | 424 | Red 425 | Blue 426 | Green 427 | Black 428 | 429 | 430 |
431 |
434 | 435 | id (Default: Number of instances): The id of the instance. For 436 | example, id:"foo".
437 | 438 | class (Default: "default"): The class of the instance. For example, 439 | class:"bar". It can be multiple classes, for example, class:"one two 440 | three".
441 | 442 | container_class (Default: undefined): If this is defined, the 443 | Msg-container will use this instead of the class option.
444 | 445 | overlay_class (Default: undefined): If this is defined, the 446 | Msg-overlay will use this instead of the class option.
447 | 448 | window_class (Default: undefined): If this is defined, the 449 | Msg-window will use this instead of the class option.
450 | 451 | topbar_class (Default: undefined): If this is defined, the 452 | Msg-topbar will use this instead of the class option.
453 | 454 | titlebar_class (Default: undefined): If this is defined, the 455 | Msg-titlebar will use this instead of the class option.
456 | 457 | content_class (Default: undefined): If this is defined, the 458 | Msg-content will use this instead of the class option.
459 | 460 | window_inner_x_class (Default: undefined): If this is defined, the 461 | Msg-window-inner-x will use this instead of the class option.
462 | 463 | window_floating_x_class (Default: undefined): If this is defined, 464 | the Msg-window-floating-x will use this instead of the class option.
465 | 466 | window_overlay_x_class (Default: undefined): If this is defined, 467 | the Msg-overlay-x will use this instead of the class option.
468 | 469 | progressbar_container_class (Default: undefined): If this is 470 | defined, the Msg-progressbar-container will use this instead of the class 471 | option.
472 | 473 | progressbar_class (Default: undefined): If this is defined, the 474 | Msg-progressbar will use this instead of the class option.
475 | 476 | lock (Default: true): Prevents scrolling from propagating to the 477 | body. This is done through css by adding a class to the body 478 | temporarily.
479 | 480 | locked_element (Default: "body"): String argument for 481 | document.querySelector() to find the element to be locked.
482 | 483 | close_on_overlay_click (Default: true): Closes the window when the 484 | overlay is clicked.
485 | 486 | close_on_escape (Default: true): Closes the window when Escape is 487 | pressed.
488 | 489 | closeable (Default: true): Whether the window is closable at 490 | all.
491 | 492 | clear_editables (Default: false): When pressing Escape, it removes the last word from an active input=text or textarea element, if it has a value. 493 | If it's empty and close_on_escape is true, it closes the window.
494 | 495 | clear_editables_full (Default: false): Modifies clear_editables to clear the whole input on Escape instead of word per word.
496 | 497 | persistent (Default: true): When true, it keeps the html elements 498 | in the dom when the window is closed. If false, it destroys the html 499 | elements on close.
500 | 501 | remove_after_close (Default: true): If true, it will destroy the 502 | html elements and remove the instance from the instance registry after 503 | close.
504 | 505 | position (Default: "center"): The position of the window in the 506 | screen. Either "center", "left" (hStackable), "right" (hStackable), "top" 507 | (vStackable), "bottom" (vStackable), "topleft" (vStackable) (hStackable), 508 | "topright" (vStackable) (hStackable), "bottomleft" (vStackable) 509 | (hStackable), or "bottomright" (vStackable) (hStackable).
510 | 511 | window_width (Default: "auto"): The width of the Msg-window.
512 | 513 | window_height (Default: "auto"): The height of the Msg-window.
514 | 515 | window_min_width (Default: "auto"): The min-width of the 516 | Msg-window.
517 | 518 | window_min_height (Default: "auto"): The min-height of the 519 | Msg-window.
520 | 521 | window_max_width (Default: "80vw"): The max-width of the 522 | Msg-window.
523 | 524 | window_max_height (Default: "80vh"): The max-height of the 525 | Msg-window.
526 | 527 | window_cursor (Default: "default"): The cursor of the Msg-window. 528 | For example, "pointer" or "none".
529 | 530 | titlebar_cursor (Default: "default"): The cursor of the Msg-titlebar. 531 | For example, "pointer" or "none".
532 | 533 | window_unselectable (Default: false): If true, it will make the 534 | window's content unselectable. For example by dragging with the mouse.
535 | 536 | edge_padding_x (Default: 20): The horizontal padding in pixels from 537 | the edge of the screen. Some positions don't support this.
538 | 539 | edge_padding_y (Default: 20): The vertical padding in pixels from 540 | the edge of the screen. Some positions don't support this.
541 | 542 | sideStack (Default: "vertical"): Either "vertical", "horizontal" or 543 | "none". This is what allows popup windows to stack on top of each other 544 | vertically or appear side by side horizontally.
545 | 546 | sideStack_padding (Default: 20): The separation in pixels between 547 | vertically or horizontally stacked windows.
548 | 549 | sideStack_collapse (Default: true): Whether windows in a vertical 550 | or horizontal stack collapse when a window is closed.
551 | 552 | zStack_level (Default: 2): Level 1 zStacks start at a z-index of 553 | 5000000 (5 with 6 zeros), Level 2 zStacks start at a z-index of 50000000 554 | (5 with 7 zeros). This is useful if you want to have popup messages that 555 | don't go above the modal windows.
556 | 557 | autoclose (Default: false): Closes the window automatically after a 558 | certain amount of time.
559 | 560 | autoclose_delay (Default: 5000): The amount of time in milliseconds 561 | that must pass before closing the window.
562 | 563 | enable_titlebar (Default: false): Whether Msg-titlebar is created 564 | or not.
565 | 566 | center_titlebar (Default: false): A mode where the text is placed 567 | in the center relative to the window. It adjusts to window_x settings.
568 | 569 | enable_progressbar (Default: false): Whether Msg-progressbar is 570 | created or not.
571 | 572 | bind_progressbar_to_autoclose (Default: true): If this is true, the 573 | progressbar will reflect the autoclose delay when the window is shown.
574 | 575 | reverse_autoclose_progressbar (Default: false): If this is true, 576 | instead of the autoclose progressbar animation starting at 100% width and 577 | going down to 0%, it starts at 0% and goes up to 100%.
578 | 579 | close_on_show (Default: false): When show() is called it will first 580 | close the window and then show it.
581 | close_others_on_show (Default: false): When the window is first 582 | shown it will close all other open windows.
583 | 584 | scroll_on_show (Default: true): Whether the scrolltop of 585 | Msg-content-container will become 0 on show. In other words, if it will 586 | automatically be scrolled to the top on show if there is overflow.
587 | enable_overlay (Default: true): Whether the overlay is created or 588 | not.
589 | 590 | window_x (Default: "inner_right"): Makes an x to close the window 591 | inside the window. Either "inner_right", "inner_left", "floating_right", 592 | "floating_left" or "none".
593 | 594 | overlay_x (Default: "none"): Makes an x to close the window inside 595 | the overlay. Either "right", "left" or "none".
596 | 597 | replace_linebreaks (Default: false): If true, strings passed to 598 | show() or set() will have every "\n" replaced with an html linebreak.
599 | 600 | before_show (Default: Empty Function): Function that triggers 601 | before the show method. Receives the instance as an argument. If false is 602 | returned it aborts the execution.
603 | 604 | after_show (Default: Empty Function): Function that triggers after 605 | the show method. Receives the instance as an argument.
606 | 607 | before_set (Default: Empty Function): Function that triggers before 608 | the set method. Receives the instance as an argument. If false is returned 609 | it aborts the execution.
610 | 611 | after_set (Default: Empty Function): Function that triggers after 612 | the set method. Receives the instance as an argument.
613 | 614 | before_set_title (Default: Empty Function): Function that triggers 615 | before the set_title method. Receives the instance as an argument. If 616 | false is returned it aborts the execution.
617 | 618 | after_set_title (Default: Empty Function): Function that triggers 619 | after the set_title method. Receives the instance as an argument.
620 | 621 | before_set_progress (Default: Empty Function): Function that 622 | triggers before the set_progress method. Receives the instance as an 623 | argument. If false is returned it aborts the execution.
624 | 625 | after_set_progress (Default: Empty Function): Function that 626 | triggers after the set_progress method. Receives the instance as an 627 | argument.
628 | 629 | before_close (Default: Empty Function): Function that triggers 630 | before the close method. Receives the instance as an argument. If false is 631 | returned it aborts the execution.
632 | 633 | after_close (Default: Empty Function): Function that triggers after 634 | the close method. Receives the instance as an argument.
635 | 636 | after_last_closed (Default: Empty Function): Function that triggers 637 | after the last remaining open window was closed. Receives the instance as 638 | an argument.
639 | 640 | before_toggle (Default: Empty Function): Function that triggers 641 | before the toggle method. Receives the instance as an argument. If false 642 | is returned it aborts the execution.
643 | 644 | after_toggle (Default: Empty Function): Function that triggers 645 | after the toggle method. Receives the instance as an argument.
646 | 647 | before_create (Default: Empty Function): Function that triggers 648 | before the create method. Receives the instance as an argument. If false 649 | is returned it aborts the execution.
650 | 651 | after_create (Default: Empty Function): Function that triggers 652 | after the create method. Receives the instance as an argument.
653 | 654 | before_destroy (Default: Empty Function): Function that triggers 655 | before the destroy method. Receives the instance as an argument. If false 656 | is returned it aborts the execution.
657 | 658 | after_destroy (Default: Empty Function): Function that triggers 659 | after the destroy method. Receives the instance as an argument.
660 | 661 | on_click (Default: Empty Function): Function that triggers when 662 | the window is clicked.
663 | 664 | on_middle_click (Default: Empty Function): Function that triggers when 665 | the window is middle_clicked.
666 | 667 | on_wheel_down (Default: Empty Function): Function that triggers on 668 | mouse scroll wheel down.
669 | 670 | on_wheel_up (Default: Empty Function): Function that triggers on 671 | mouse scroll wheel up.
672 | 673 | on_overlay_click (Default: Empty Function): Function that triggers when 674 | the overlay is clicked.
675 | 676 | on_titlebar_click (Default: Empty Function): Function that triggers when 677 | the titlebar is clicked.
678 | 679 | on_x_button_click (Default: Empty Function): Function that triggers when 680 | an X close button is clicked.
681 | 682 | disable_transformations (Default: false): Disables transformations 683 | applied to windows to center them or put them in a certain place. Applies 684 | top and left to 0 as well.
685 | disable_content_padding (Default: false): Doesn't apply padding to 686 | content.
687 | 688 | full_content (Default: false): Makes content height 100vh and width 689 | 100vw.
690 | 691 | Example: 692 | 693 |
731 | 732 | 733 |
736 | 737 | instance.overlay: The Msg-overlay html element.
738 | 739 | instance.overlay_x: The Msg-overlay-x html element.
740 | 741 | instance.topbar: The Msg-topbar html element.
742 | 743 | instance.titlebar: The Msg-titlebar html element.
744 | 745 | instance.window_inner_x: The Msg-window-inner-x html element.
746 | 747 | instance.window_floating_x: The Msg-window-floating-x html 748 | element.
749 | 750 | instance.window: The Msg-window html element.
751 | 752 | instance.content-container: The Msg-content-container html 753 | element.
754 | 755 | instance.content: The Msg-content html element.
756 | 757 | instance.progressbar-container: The Msg-progressbar-container html 758 | element.
759 | 760 | instance.progressbar: The Msg-progressbar html element.
761 | 762 | instance.options: The options object of the instance.
763 | 764 | 765 |
769 | 770 | instance.show([title, html]): An alternative way to call show is 771 | passing an array with the title for the titlebar and the content html. 772 | Useful if you have the titlebar enabled and you want to change both things 773 | in the same call.
774 | 775 | instance.show(): If no arguments are passed to show(), it displays 776 | the window with the last used html or the one passed to set() and puts it 777 | at the top of the zStack.
778 | 779 | instance.set(html): Updates the html of the window without opening 780 | it. This is useful if you want to prepare the content without showing the 781 | window or if you want to change the content of the window without 782 | triggering the show events.
783 | 784 | instance.set_or_show(html): If the window is open and at the top of 785 | the stack it changes the html content by calling set(). If the window is 786 | closed or not at the top of the stack it opens the window and shows the 787 | html content by calling show().
788 | 789 | instance.set_title(html): Updates the html of the titlebar. This 790 | doesn't open the window.
791 | 792 | instance.close(): Closes the window.
793 | 794 | instance.toggle(): If the window is closed it opens it. If the 795 | window is open it closes it.
796 | 797 | instance.html(): A shortcut for instance.content.innerHTML. Returns 798 | "" if the html elements have not been created yet.
799 | 800 | instance.title_html(): A shortcut for instance.titlebar.innerHTML. 801 | Returns "" if the titlebar element is not created.
802 | 803 | instance.is_open(): Returns true if the window is open.
804 | 805 | instance.any_open(): Returns true if any window with any id is 806 | open.
807 | 808 | instance.any_higher_open(): Returns true if any window with 809 | zStack_level 2 is open. These are usually modals and windows.
810 | 811 | instance.any_lower_open(): Returns true if any window with 812 | zStack_level 1 is open.
813 | 814 | instance.num_open(): Returns the number of windows open.
815 | 816 | instance.num_open_higher(): Returns the number of windows open with 817 | zStack_level 2. These are usually modals and windows.
818 | 819 | instance.num_open_lower(): Returns the number of windows open with 820 | zStack_level 1.
821 | 822 | instance.create(): Creates the html elements if they don't exist 823 | yet. This is done automatically on the first show() or set(), but there 824 | might be cases where you might want to create them first without showing 825 | anything.
826 | 827 | instance.recreate(): Removes the html elements from the dom and 828 | creates them again. This should be called after ids or classes are 829 | changed.
830 | 831 | instance.destroy(): Removes the html elements from the dom.
832 | 833 | instance.remove(): Destroys the html elements and removes the 834 | instance from the instance registry. So it won't appear in 835 | instance.instances() for example.
836 | 837 | instance.highest_zIndex(): Returns the highest z-index among all 838 | the created Msg-container elements. If it retuns -2000 it means no 839 | elements have been created.
840 | instance.highest_instance(): It returns the instance with the 841 | highest z-index. If none is open it returns false.
842 | 843 | instance.is_highest(): Returns true if the window is visible and at 844 | the top of the zStack.
845 | 846 | instance.to_top(): Puts an already opened window at the top of the 847 | zStack. This is done automatically by show(), but there might be cases 848 | where you want to do this without triggering the show events.
849 | 850 | instance.check_options(): This is done automatically when creating 851 | an instance. It checks the options object and applies the corresponding 852 | defaults to undefined properties.
853 | 854 | instance.set_progress(percentage): Fills the progressbar to the 855 | specified percentage.
856 | 857 | instance.get_progress(): Returns the current percentage of the 858 | progressbar.
859 | 860 | instance.instances(): Returns a list with the created instances.
861 | 862 | instance.higher_instances(): Returns a list with the created 863 | instances with zStack_level 2. These are usually modals and windows.
864 | 865 | instance.lower_instances(): Returns a list with the created 866 | instances with zStack_level 1.
867 | 868 | instance.get_instance_by_id(id): Returns an instance that has the 869 | specified instance id.
870 | 871 | instance.show_all(): Opens all the windows.
872 | 873 | instance.close_all(): Closes all the windows.
874 | 875 | instance.close_all_higher(): Closes all the windows with 876 | zStack_level 2. These are usually modals and windows.
877 | 878 | instance.close_all_lower(): Closes all the windows with 879 | zStack_level 1.
880 | 881 | instance.create_all(): Creates the html elements of all the 882 | instances.
883 | 884 | instance.recreate_all(): Recreates the html elements of all the 885 | instances.
886 | 887 | instance.destroy_all(): Removes the html elements of all the 888 | instances.
889 | 890 | instance.hide_titlebar(): Hides the titlebar including the inner_x. The whole topbar is hidden.
891 | 892 | instance.show_titlebar(): Shows the titlebar including the inner_x. The whole topbar is shown.
893 | 894 | 895 |
898 | instance.options.class = "green";
899 | instance.options.enable_overlay = false;
900 | instance.options.position = "bottomright";
901 | instance.options.remove_after_close = true;
902 | instance.options.zStack_level = 1;
903 | instance.options.window_width = "460px";
904 | instance.options.lock = false;
905 | 906 |
preset: "popup_autoclose"
907 | instance.options.class = "green";
908 | instance.options.enable_overlay = false;
909 | instance.options.position = "bottomright";
910 | instance.options.autoclose = true;
911 | instance.options.enable_progressbar = true;
912 | instance.options.remove_after_close = true;
913 | instance.options.zStack_level = 1;
914 | instance.options.window_width = "460px";
915 | instance.options.lock = false;
916 | 917 |
preset: "window"
918 | instance.options.window_height = "100vh";
919 | instance.options.window_min_height = "100vh";
920 | instance.options.window_max_height = "100vh";
921 | instance.options.window_width = "100vw";
922 | instance.options.window_min_width = "100vw";
923 | instance.options.window_max_width = "100vw";
924 | instance.options.disable_transformations = true;
925 | instance.options.disable_content_padding = true;
926 | instance.options.full_content = true;
927 | instance.options.window_x = "none";
928 | 929 |
930 | 931 | Note: It's advised to not modify the "display" or "z-index" css properties 932 | of the Msg HTML elements since they are handled internally. 933 | 934 |
935 | 936 | One Last Demo 937 | 938 |
939 | 940 | GitHub 941 | 942 | 943 | 944 | Open Wiki 945 | 946 | 947 | 948 | Issues 949 | 950 |
951 |
952 |
953 |
954 |
955 |
956 |
957 |
--------------------------------------------------------------------------------
/dist/msg.js:
--------------------------------------------------------------------------------
1 | /* Msg v14.9.0 https://github.com/Merkoba/Msg */
2 |
3 | const Msg = {}
4 | Msg.num_created = 0
5 |
6 | Msg.el = (query, root = document) => {
7 | return root.querySelector(query)
8 | }
9 |
10 | Msg.els = (query, root = document) => {
11 | return Array.from(root.querySelectorAll(query))
12 | }
13 |
14 | Msg.ev = (element, action, callback, extra) => {
15 | element.addEventListener(action, callback, extra)
16 | }
17 |
18 | Msg.insert = (element_1, element_2, position = `beforeend`) => {
19 | element_1.insertAdjacentHTML(position, element_2)
20 | }
21 |
22 | Msg.factory = (options = {}) => {
23 | const instance = {}
24 |
25 | instance.stack_pos_top = undefined
26 | instance.stack_pos_bottom = undefined
27 | instance.stack_pos_left = undefined
28 | instance.stack_pos_right = undefined
29 | instance.stack_width = undefined
30 | instance.stack_height = undefined
31 | instance.options = options
32 |
33 | instance.check_options = () => {
34 | if (instance.options.preset !== undefined) {
35 | if (instance.options.preset === `popup`) {
36 | if (instance.options.class === undefined) {
37 | instance.options.class = `green`
38 | }
39 |
40 | if (instance.options.enable_overlay === undefined) {
41 | instance.options.enable_overlay = false
42 | }
43 |
44 | if (instance.options.position === undefined) {
45 | instance.options.position = `bottomright`
46 | }
47 |
48 | if (instance.options.remove_after_close === undefined) {
49 | instance.options.remove_after_close = true
50 | }
51 |
52 | if (instance.options.zStack_level === undefined) {
53 | instance.options.zStack_level = 1
54 | }
55 |
56 | if (instance.options.window_width === undefined) {
57 | instance.options.window_width = `460px`
58 | }
59 |
60 | if (instance.options.lock === undefined) {
61 | instance.options.lock = false
62 | }
63 | }
64 | else if (instance.options.preset === `popup_autoclose`) {
65 | if (instance.options.class === undefined) {
66 | instance.options.class = `green`
67 | }
68 |
69 | if (instance.options.enable_overlay === undefined) {
70 | instance.options.enable_overlay = false
71 | }
72 |
73 | if (instance.options.position === undefined) {
74 | instance.options.position = `bottomright`
75 | }
76 |
77 | if (instance.options.autoclose === undefined) {
78 | instance.options.autoclose = true
79 | }
80 |
81 | if (instance.options.enable_progressbar === undefined) {
82 | instance.options.enable_progressbar = true
83 | }
84 |
85 | if (instance.options.remove_after_close === undefined) {
86 | instance.options.remove_after_close = true
87 | }
88 |
89 | if (instance.options.zStack_level === undefined) {
90 | instance.options.zStack_level = 1
91 | }
92 |
93 | if (instance.options.window_width === undefined) {
94 | instance.options.window_width = `460px`
95 | }
96 |
97 | if (instance.options.lock === undefined) {
98 | instance.options.lock = false
99 | }
100 | }
101 | else if (instance.options.preset === `window`) {
102 | if (instance.options.window_height === undefined) {
103 | instance.options.window_height = `100vh`
104 | }
105 |
106 | if (instance.options.window_min_height === undefined) {
107 | instance.options.window_min_height = `100vh`
108 | }
109 |
110 | if (instance.options.window_max_height === undefined) {
111 | instance.options.window_max_height = `100vh`
112 | }
113 |
114 | if (instance.options.window_width === undefined) {
115 | instance.options.window_width = `100vw`
116 | }
117 |
118 | if (instance.options.window_min_width === undefined) {
119 | instance.options.window_min_width = `100vw`
120 | }
121 |
122 | if (instance.options.window_max_width === undefined) {
123 | instance.options.window_max_width = `100vw`
124 | }
125 |
126 | if (instance.options.disable_transformations === undefined) {
127 | instance.options.disable_transformations = true
128 | }
129 |
130 | if (instance.options.disable_content_padding === undefined) {
131 | instance.options.disable_content_padding = true
132 | }
133 |
134 | if (instance.options.full_content === undefined) {
135 | instance.options.full_content = true
136 | }
137 |
138 | if (instance.options.window_x === undefined) {
139 | instance.options.window_x = `none`
140 | }
141 | }
142 | }
143 |
144 | if (instance.options.id === undefined) {
145 | instance.options.id = Msg.num_created + 1
146 | }
147 |
148 | if (instance.options.class === undefined) {
149 | instance.options.class = `default`
150 | }
151 |
152 | if (instance.options.lock === undefined) {
153 | instance.options.lock = true
154 | }
155 |
156 | if (instance.options.closeable === undefined) {
157 | instance.options.closeable = true
158 | }
159 |
160 | if (instance.options.enable_overlay === undefined) {
161 | instance.options.enable_overlay = true
162 | }
163 |
164 | if (instance.options.close_on_overlay_click === undefined) {
165 | instance.options.close_on_overlay_click = true
166 | }
167 |
168 | if (instance.options.enable_titlebar === undefined) {
169 | instance.options.enable_titlebar = false
170 | }
171 |
172 | if (instance.options.center_titlebar === undefined) {
173 | instance.options.center_titlebar = false
174 | }
175 |
176 | if (instance.options.window_x === undefined) {
177 | if (instance.options.enable_titlebar) {
178 | instance.options.window_x = `inner_right`
179 | }
180 | else {
181 | instance.options.window_x = `floating_right`
182 | }
183 | }
184 |
185 | if (instance.options.overlay_x === undefined) {
186 | instance.options.overlay_x = `none`
187 | }
188 |
189 | if (instance.options.close_on_escape === undefined) {
190 | instance.options.close_on_escape = true
191 | }
192 |
193 | if (instance.options.clear_editables === undefined) {
194 | instance.options.clear_editables = false
195 | }
196 |
197 | if (instance.options.clear_editables_full === undefined) {
198 | instance.options.clear_editables_full = false
199 | }
200 |
201 | if (instance.options.before_show === undefined) {
202 | instance.options.before_show = () => { }
203 | }
204 |
205 | if (instance.options.after_show === undefined) {
206 | instance.options.after_show = () => { }
207 | }
208 |
209 | if (instance.options.before_set === undefined) {
210 | instance.options.before_set = () => { }
211 | }
212 |
213 | if (instance.options.after_set === undefined) {
214 | instance.options.after_set = () => { }
215 | }
216 |
217 | if (instance.options.before_set_title === undefined) {
218 | instance.options.before_set_title = () => { }
219 | }
220 |
221 | if (instance.options.after_set_title === undefined) {
222 | instance.options.after_set_title = () => { }
223 | }
224 |
225 | if (instance.options.before_set_progress === undefined) {
226 | instance.options.before_set_progress = () => { }
227 | }
228 |
229 | if (instance.options.after_set_progress === undefined) {
230 | instance.options.after_set_progress = () => { }
231 | }
232 |
233 | if (instance.options.before_close === undefined) {
234 | instance.options.before_close = () => { }
235 | }
236 |
237 | if (instance.options.after_close === undefined) {
238 | instance.options.after_close = () => { }
239 | }
240 |
241 | if (instance.options.after_last_closed === undefined) {
242 | instance.options.after_last_closed = () => { }
243 | }
244 |
245 | if (instance.options.before_toggle === undefined) {
246 | instance.options.before_toggle = () => { }
247 | }
248 |
249 | if (instance.options.after_toggle === undefined) {
250 | instance.options.after_toggle = () => { }
251 | }
252 |
253 | if (instance.options.before_create === undefined) {
254 | instance.options.before_create = () => { }
255 | }
256 |
257 | if (instance.options.after_create === undefined) {
258 | instance.options.after_create = () => { }
259 | }
260 |
261 | if (instance.options.before_destroy === undefined) {
262 | instance.options.before_destroy = () => { }
263 | }
264 |
265 | if (instance.options.after_destroy === undefined) {
266 | instance.options.after_destroy = () => { }
267 | }
268 |
269 | if (instance.options.on_click === undefined) {
270 | instance.options.on_click = () => { }
271 | }
272 |
273 | if (instance.options.on_middle_click === undefined) {
274 | instance.options.on_middle_click = () => { }
275 | }
276 |
277 | if (instance.options.on_wheel_down === undefined) {
278 | instance.options.on_wheel_down = () => { }
279 | }
280 |
281 | if (instance.options.on_wheel_up === undefined) {
282 | instance.options.on_wheel_up = () => { }
283 | }
284 |
285 | if (instance.options.on_overlay_click === undefined) {
286 | instance.options.on_overlay_click = () => { }
287 | }
288 |
289 | if (instance.options.on_titlebar_click === undefined) {
290 | instance.options.on_titlebar_click = () => { }
291 | }
292 |
293 | if (instance.options.on_x_button_click === undefined) {
294 | instance.options.on_x_button_click = () => { }
295 | }
296 |
297 | if (instance.options.autoclose === undefined) {
298 | instance.options.autoclose = false
299 | }
300 |
301 | if (instance.options.autoclose_delay === undefined) {
302 | instance.options.autoclose_delay = 5000
303 | }
304 | else {
305 | instance.options.autoclose_delay = parseInt(instance.options.autoclose_delay)
306 | }
307 |
308 | if (instance.options.persistent === undefined) {
309 | instance.options.persistent = true
310 | }
311 |
312 | if (instance.options.remove_after_close === undefined) {
313 | instance.options.remove_after_close = false
314 | }
315 |
316 | if (instance.options.position === undefined) {
317 | instance.options.position = `center`
318 | }
319 |
320 | if (instance.options.enable_progressbar === undefined) {
321 | instance.options.enable_progressbar = false
322 | }
323 |
324 | if (instance.options.bind_progressbar_to_autoclose === undefined) {
325 | instance.options.bind_progressbar_to_autoclose = true
326 | }
327 |
328 | if (instance.options.reverse_autoclose_progressbar === undefined) {
329 | instance.options.reverse_autoclose_progressbar = false
330 | }
331 |
332 | if (instance.options.edge_padding_x === undefined) {
333 | instance.options.edge_padding_x = 20
334 | }
335 | else {
336 | instance.options.edge_padding_x = parseInt(instance.options.edge_padding_x)
337 | }
338 |
339 | if (instance.options.edge_padding_y === undefined) {
340 | instance.options.edge_padding_y = 20
341 | }
342 | else {
343 | instance.options.edge_padding_y = parseInt(instance.options.edge_padding_y)
344 | }
345 |
346 | if (instance.options.sideStack_padding === undefined) {
347 | instance.options.sideStack_padding = 20
348 | }
349 |
350 | if (instance.options.sideStack_padding === undefined) {
351 | instance.options.sideStack_padding = 20
352 | }
353 | else {
354 | instance.options.sideStack_padding = parseInt(instance.options.sideStack_padding)
355 | }
356 |
357 | if (instance.options.sideStack === undefined) {
358 | instance.options.sideStack = `vertical`
359 | }
360 |
361 | if (instance.options.sideStack_collapse === undefined) {
362 | instance.options.sideStack_collapse = true
363 | }
364 |
365 | if (instance.options.zStack_level === undefined) {
366 | instance.options.zStack_level = 2
367 | }
368 | else {
369 | instance.options.zStack_level = parseInt(instance.options.zStack_level)
370 | }
371 |
372 | if (instance.options.window_width === undefined) {
373 | instance.options.window_width = `auto`
374 | }
375 |
376 | if (instance.options.window_height === undefined) {
377 | instance.options.window_height = `auto`
378 | }
379 |
380 | if (instance.options.window_min_width === undefined) {
381 | instance.options.window_min_width = `auto`
382 | }
383 |
384 | if (instance.options.window_min_height === undefined) {
385 | instance.options.window_min_height = `auto`
386 | }
387 |
388 | if (instance.options.window_max_width === undefined) {
389 | instance.options.window_max_width = `80vw`
390 | }
391 |
392 | if (instance.options.window_max_height === undefined) {
393 | instance.options.window_max_height = `80vh`
394 | }
395 |
396 | if (instance.options.window_cursor === undefined) {
397 | instance.options.window_cursor = `default`
398 | }
399 |
400 | if (instance.options.titlebar_cursor === undefined) {
401 | instance.options.titlebar_cursor = `default`
402 | }
403 |
404 | if (instance.options.window_unselectable === undefined) {
405 | instance.options.window_unselectable = false
406 | }
407 |
408 | if (instance.options.replace_linebreaks === undefined) {
409 | instance.options.replace_linebreaks = false
410 | }
411 |
412 | if (instance.options.close_others_on_show === undefined) {
413 | instance.options.close_others_on_show = false
414 | }
415 |
416 | if (instance.options.scroll_on_show === undefined) {
417 | instance.options.scroll_on_show = true
418 | }
419 |
420 | if (instance.options.locked_element === undefined) {
421 | instance.options.locked_element = `body`
422 | }
423 |
424 | if (instance.options.disable_transformations === undefined) {
425 | instance.options.disable_transformations = false
426 | }
427 |
428 | if (instance.options.disable_content_padding === undefined) {
429 | instance.options.disable_content_padding = false
430 | }
431 |
432 | if (instance.options.full_content === undefined) {
433 | instance.options.full_content = false
434 | }
435 | }
436 |
437 | instance.check_options()
438 |
439 | instance.created = () => {
440 | if (instance.container === undefined) {
441 | return false
442 | }
443 |
444 | return true
445 | }
446 |
447 | instance.close = () => {
448 | if (!instance.is_open()) {
449 | return
450 | }
451 |
452 | if (!instance.options.closeable) {
453 | return
454 | }
455 |
456 | if (instance.options.before_close(instance) === false) {
457 | return
458 | }
459 |
460 | instance.container.style.display = `none`
461 |
462 | if (instance.overlay !== undefined) {
463 | instance.overlay.style.zIndex = -1000
464 | }
465 |
466 | instance.collapse_vStack()
467 | instance.collapse_hStack()
468 | instance.window.style.zIndex = -1000
469 | instance.clear_autoclose_progressbar_interval()
470 | instance.check_remove_overflow_hidden()
471 |
472 | if (!instance.options.persistent) {
473 | instance.destroy()
474 | }
475 |
476 | instance.options.after_close(instance)
477 |
478 | if (instance.num_open() === 0) {
479 | instance.options.after_last_closed(instance)
480 | }
481 |
482 | if (instance.options.remove_after_close) {
483 | instance.remove()
484 | }
485 | }
486 |
487 | instance.set = (html) => {
488 | if (html === undefined) {
489 | return
490 | }
491 |
492 | instance.create()
493 |
494 | if (instance.options.before_set(instance) === false) {
495 | return
496 | }
497 |
498 | if (typeof html === `object`) {
499 | if (html instanceof Element) {
500 | instance.content.innerHTML = ``
501 | instance.content.appendChild(html)
502 | }
503 | }
504 | else {
505 | html = html.toString()
506 |
507 | if (instance.options.replace_linebreaks) {
508 | html = html.replace(/(\n)/g, `27 |
Msg
28 | 29 | A javascript library to create and manage highly customizable modal 30 | windows and popup messages.31 | 32 | Modal 33 | Popups 34 | Windows 35 | Installation 36 | Basic Usage 37 | 38 |
39 | 40 | Structure 41 | Styling 42 | Options 43 | Properties 44 | Methods 45 | Presets 46 | 47 |
48 | 49 | 50 |
Modal
51 | 52 | Modal windows with different options and appearance can be created. 53 | 54 |55 | 56 | 57 | Demo 1 58 | Demo 2 59 | Demo 3 60 | Demo 4 64 | 65 | 66 | 67 |
68 |
Popups
69 | 70 | You can create stackable popup messages using certain options.71 | 72 | Keep clicking the demos to stack the popups: 73 | 74 |
75 | 76 | 77 | edge_padding_x: 78 | 79 | 80 | edge_padding_y: 81 | 82 | 83 |
84 | 85 | sideStack: 86 | 87 | 92 | 93 | sideStack_padding: 94 | 95 | 96 |
97 | 98 | autoclose: 99 | 100 | sideStack_collapse: 101 | 102 | 103 | enable_titlebar: 104 | 105 | 106 | lock: 107 | 108 | 109 |
110 | 111 | window_x: 112 | 113 | 120 | 121 | enable_overlay: 122 | 123 | 124 | overlay_x: 125 | 126 | 131 | 132 |
133 | 134 | center 135 | top 136 | bottom 137 | left 138 | right 139 | topleft 140 | bottomleft 141 | topright 142 | bottomright 143 | 144 |
145 | 146 | 147 |
148 |153 | 154 | 155 |152 |let msg_pop = Msg.factory({ 149 | preset: "popup" // or "popup_autoclose", 150 | position: "bottomright" 151 | })
Full Windows
156 | 157 | Using the "window" preset, full page, clean windows, can be created as a 158 | canvas to create anything on top. This is useful to add different layers 159 | to your application while still taking advantage of the Msg instance 160 | control system. The content takes 100vh height and 100vw width. If you 161 | want to have scrolling content you must create your own containers. 162 | 163 |164 | 165 | Open Window 167 | 168 |
169 |173 | 174 | 175 |172 |let msg_window = Msg.factory({ 170 | preset:"window" 171 | })
Installation
176 | 177 | Get the code here 180 | 181 |To install just include the file in /dist:
182 |
183 |185 | 186 | Or the minified, smaller file:184 |<script src="msg.js"></script>
187 |
188 |190 | 191 | It's also available on NPM: 192 | 193 |189 |<script src="msg.min.js"></script>
194 |196 | 197 | Then you can include the file: 198 | 199 |195 |npm install msg-modal
200 |202 | 203 | Or the minified version: 204 | 205 |201 |<script src="node_modules/msg-modal/dist/msg.js"></script>
206 |208 | 209 | 210 |207 |<script src="node_modules/msg-modal/dist/msg.min.js"></script>
Basic Usage
211 | 212 | To use, first make an instance:213 |
214 |216 | 217 | To show a window just pass a string or an html element to the show 218 | method: 219 | 220 |215 |let msg = Msg.factory()
msg.show("<i>Hello</i> <b>World</b>") 224 |
225 |
msg.show(document.getElementsByTagName("h1")[0]) 229 |
230 | 231 |
You can re-use the same instance to display different things. 232 |
Note that an instance can only show one thing at a time. 233 |
If you want to have multiple windows open you need to create 234 | multiple instances.
You can create factory functions to create 235 | and show instances on the fly.
The "persistent" option is to 236 | be considered when creating on the fly instances. If you're not going to 237 | use the instance again, it's advised to use persistent: false, which 238 | destroys the html elements after close, to avoid filling the dom with 239 | unncecesary elements. 240 | 241 |
242 |254 | 255 | 266 | 267 | Run This Demo 268 | 269 |253 |function remind(html) { 243 | let msg = Msg.factory({ 244 | class: "green", 245 | enable_titlebar: true, 246 | persistent: false 247 | }) 248 | 249 | msg.show(["Reminder", html]) 250 | } 251 | 252 | remind("Water the trees.")
270 | 271 | 272 |
Structure
273 | 274 | Four elements are created with the following ids:275 | "Msg-container-id" (with classes: "Msg-container" and 276 | "Msg-container-class")
277 | "Msg-window-id" (with classes: "Msg-window" and "Msg-window-class")
278 | "Msg-content-container-id" (with classes: "Msg-content-container" and 279 | "Msg-content-container-class")
280 | "Msg-content-id" (with classes: "Msg-content" and "Msg-content-class")
281 | 282 | These elements are optional:
283 | "Msg-overlay-id" (with classes: "Msg-overlay" and "Msg-overlay-class") 284 | (Created by default)
285 | "Msg-topbar-id" (with classes: "Msg-topbar" and "Msg-topbar-class") 286 | (Created if Msg-window-inner-x or Msg-titlebar are created)
287 | "Msg-titlebar-id" (with classes: "Msg-titlebar" and "Msg-titlebar-class") 288 | (Not created by default)
289 | "Msg-window-inner-x-id" (with classes: "Msg-window-inner-x" and 290 | "Msg-window-inner-x-class") (Created by default)
291 | "Msg-window-floating-x-id" (with classes: "Msg-window-floating-x" and 292 | "Msg-window-floating-x-class") (Not created by default)
293 | "Msg-overlay-x-id" (with classes: "Msg-overlay-x" and 294 | "Msg-overlay-x-class") (Not created by default)
295 | "Msg-progressbar-container-id" (with classes: "Msg-progressbar-container" 296 | and "Msg-progressbar-container-class") (Created if Msg-progressbar is 297 | created)
298 | "Msg-progressbar-id" (with classes: "Msg-progressbar" and 299 | "Msg-progressbar-class") (Not created by default)
300 | 301 |
The structure looks like this: 302 | 303 |
304 |331 | 332 | By default, ids are based on the number of instances created, they are 333 | incremental. Custom ids and classes can be specified via options.330 |[container] (instance.container) 305 | 306 | [overlay] (Optional) (instance.overlay) 307 | [overlay-x][/overlay-x] (Optional) (instance.overlay_x) 308 | [/overlay] 309 | 310 | [window] (instance.window) 311 | 312 | [window-floating-x][/window-floating-x] (Optional) (instance.window_floating_x) 313 | 314 | [topbar] (instance.topbar) 315 | [titlebar][/titlebar] (Optional) (instance.titlebar) 316 | [window-inner-x][/window-inner-x] (Optional) (instance.window_inner_x) 317 | [/topbar] 318 | 319 | [content-container] (instance.content_container) 320 | [content][/content] (instance.content) 321 | [/content-container] 322 | 323 | [progressbar-container] (instance.progressbar_container) 324 | [progressbar][/progressbar] (instance.progressbar) 325 | [/progressbar-container] 326 | 327 | [/window] 328 | 329 | [/container]
334 | 335 | The z-index values of the windows are generated when they are shown, 336 | allowing for windows with different ids to stack on top of each other. 337 | This stack is called the zStack.
338 | 339 |
Stack Demo
340 | 341 | 342 |
Styling
343 | 344 | You can set custom ids and classes via options.345 | 346 | You can play with the ids and classes to have different types of 347 | windows.
348 | 349 | Elements can have multiple classes. For example, class:"foo bar" would 350 | create all elements with those classes, for example, content would have 351 | the classes "Msg-content", "Msg-content-foo" and "Msg-content-bar". It 352 | also works with specific classes, like content_class:"foo bar".
353 | 354 | If you don't want a class name to be turned into the Msg-element-classname 355 | format, you can append a "!" to it. For example overlay_class:"!glow" 356 | would use "glow" instead of "Msg-overlay-glow".
357 | 358 | The Msg-content's padding is set depending on your settings, to try to 359 | make it look pleasing in different situations.
360 | 361 | To override the css you will probably need to use !important 362 | declarations.
363 | 364 |
365 |406 | 407 | Run This Demo 408 |405 |Demo Code: 366 | 367 | //js 368 | 369 | let msg_custom = Msg.factory({ 370 | id: `foo`, 371 | class: `bar`, 372 | content_class: `!big`, 373 | enable_titlebar: true, 374 | }) 375 | 376 | //css 377 | 378 | #Msg-overlay-foo { 379 | background-color: rgba(61, 157, 192, 0.7) !important; 380 | } 381 | 382 | .Msg-window-bar { 383 | background-color: yellow !important; 384 | } 385 | 386 | .Msg-titlebar-bar { 387 | background-color: green !important; 388 | color: white !important; 389 | } 390 | 391 | #Msg-window-inner-x-foo { 392 | background-color: red !important; 393 | color: #ffffff !important; 394 | } 395 | 396 | #Msg-window-inner-x-foo:hover { 397 | background-color: #a72b2b !important; 398 | } 399 | 400 | .big { 401 | font-size: 1.8em !important; 402 | } 403 | 404 | msg.show(["Window Example", some_text])
409 | 410 | 411 | There are some pre-made classes: 412 | 413 |
414 | 415 | Red 416 | Blue 417 | Green 418 | Black 419 | 420 |
With titlebar enabled: 421 | 422 |
423 | 424 | Red 425 | Blue 426 | Green 427 | Black 428 | 429 | 430 |
431 |
Options
432 | The following options can be passed inside an object when creating an 433 | instance:434 | 435 | id (Default: Number of instances): The id of the instance. For 436 | example, id:"foo".
437 | 438 | class (Default: "default"): The class of the instance. For example, 439 | class:"bar". It can be multiple classes, for example, class:"one two 440 | three".
441 | 442 | container_class (Default: undefined): If this is defined, the 443 | Msg-container will use this instead of the class option.
444 | 445 | overlay_class (Default: undefined): If this is defined, the 446 | Msg-overlay will use this instead of the class option.
447 | 448 | window_class (Default: undefined): If this is defined, the 449 | Msg-window will use this instead of the class option.
450 | 451 | topbar_class (Default: undefined): If this is defined, the 452 | Msg-topbar will use this instead of the class option.
453 | 454 | titlebar_class (Default: undefined): If this is defined, the 455 | Msg-titlebar will use this instead of the class option.
456 | 457 | content_class (Default: undefined): If this is defined, the 458 | Msg-content will use this instead of the class option.
459 | 460 | window_inner_x_class (Default: undefined): If this is defined, the 461 | Msg-window-inner-x will use this instead of the class option.
462 | 463 | window_floating_x_class (Default: undefined): If this is defined, 464 | the Msg-window-floating-x will use this instead of the class option.
465 | 466 | window_overlay_x_class (Default: undefined): If this is defined, 467 | the Msg-overlay-x will use this instead of the class option.
468 | 469 | progressbar_container_class (Default: undefined): If this is 470 | defined, the Msg-progressbar-container will use this instead of the class 471 | option.
472 | 473 | progressbar_class (Default: undefined): If this is defined, the 474 | Msg-progressbar will use this instead of the class option.
475 | 476 | lock (Default: true): Prevents scrolling from propagating to the 477 | body. This is done through css by adding a class to the body 478 | temporarily.
479 | 480 | locked_element (Default: "body"): String argument for 481 | document.querySelector() to find the element to be locked.
482 | 483 | close_on_overlay_click (Default: true): Closes the window when the 484 | overlay is clicked.
485 | 486 | close_on_escape (Default: true): Closes the window when Escape is 487 | pressed.
488 | 489 | closeable (Default: true): Whether the window is closable at 490 | all.
491 | 492 | clear_editables (Default: false): When pressing Escape, it removes the last word from an active input=text or textarea element, if it has a value. 493 | If it's empty and close_on_escape is true, it closes the window.
494 | 495 | clear_editables_full (Default: false): Modifies clear_editables to clear the whole input on Escape instead of word per word.
496 | 497 | persistent (Default: true): When true, it keeps the html elements 498 | in the dom when the window is closed. If false, it destroys the html 499 | elements on close.
500 | 501 | remove_after_close (Default: true): If true, it will destroy the 502 | html elements and remove the instance from the instance registry after 503 | close.
504 | 505 | position (Default: "center"): The position of the window in the 506 | screen. Either "center", "left" (hStackable), "right" (hStackable), "top" 507 | (vStackable), "bottom" (vStackable), "topleft" (vStackable) (hStackable), 508 | "topright" (vStackable) (hStackable), "bottomleft" (vStackable) 509 | (hStackable), or "bottomright" (vStackable) (hStackable).
510 | 511 | window_width (Default: "auto"): The width of the Msg-window.
512 | 513 | window_height (Default: "auto"): The height of the Msg-window.
514 | 515 | window_min_width (Default: "auto"): The min-width of the 516 | Msg-window.
517 | 518 | window_min_height (Default: "auto"): The min-height of the 519 | Msg-window.
520 | 521 | window_max_width (Default: "80vw"): The max-width of the 522 | Msg-window.
523 | 524 | window_max_height (Default: "80vh"): The max-height of the 525 | Msg-window.
526 | 527 | window_cursor (Default: "default"): The cursor of the Msg-window. 528 | For example, "pointer" or "none".
529 | 530 | titlebar_cursor (Default: "default"): The cursor of the Msg-titlebar. 531 | For example, "pointer" or "none".
532 | 533 | window_unselectable (Default: false): If true, it will make the 534 | window's content unselectable. For example by dragging with the mouse.
535 | 536 | edge_padding_x (Default: 20): The horizontal padding in pixels from 537 | the edge of the screen. Some positions don't support this.
538 | 539 | edge_padding_y (Default: 20): The vertical padding in pixels from 540 | the edge of the screen. Some positions don't support this.
541 | 542 | sideStack (Default: "vertical"): Either "vertical", "horizontal" or 543 | "none". This is what allows popup windows to stack on top of each other 544 | vertically or appear side by side horizontally.
545 | 546 | sideStack_padding (Default: 20): The separation in pixels between 547 | vertically or horizontally stacked windows.
548 | 549 | sideStack_collapse (Default: true): Whether windows in a vertical 550 | or horizontal stack collapse when a window is closed.
551 | 552 | zStack_level (Default: 2): Level 1 zStacks start at a z-index of 553 | 5000000 (5 with 6 zeros), Level 2 zStacks start at a z-index of 50000000 554 | (5 with 7 zeros). This is useful if you want to have popup messages that 555 | don't go above the modal windows.
556 | 557 | autoclose (Default: false): Closes the window automatically after a 558 | certain amount of time.
559 | 560 | autoclose_delay (Default: 5000): The amount of time in milliseconds 561 | that must pass before closing the window.
562 | 563 | enable_titlebar (Default: false): Whether Msg-titlebar is created 564 | or not.
565 | 566 | center_titlebar (Default: false): A mode where the text is placed 567 | in the center relative to the window. It adjusts to window_x settings.
568 | 569 | enable_progressbar (Default: false): Whether Msg-progressbar is 570 | created or not.
571 | 572 | bind_progressbar_to_autoclose (Default: true): If this is true, the 573 | progressbar will reflect the autoclose delay when the window is shown.
574 | 575 | reverse_autoclose_progressbar (Default: false): If this is true, 576 | instead of the autoclose progressbar animation starting at 100% width and 577 | going down to 0%, it starts at 0% and goes up to 100%.
578 | 579 | close_on_show (Default: false): When show() is called it will first 580 | close the window and then show it.
581 | close_others_on_show (Default: false): When the window is first 582 | shown it will close all other open windows.
583 | 584 | scroll_on_show (Default: true): Whether the scrolltop of 585 | Msg-content-container will become 0 on show. In other words, if it will 586 | automatically be scrolled to the top on show if there is overflow.
587 | enable_overlay (Default: true): Whether the overlay is created or 588 | not.
589 | 590 | window_x (Default: "inner_right"): Makes an x to close the window 591 | inside the window. Either "inner_right", "inner_left", "floating_right", 592 | "floating_left" or "none".
593 | 594 | overlay_x (Default: "none"): Makes an x to close the window inside 595 | the overlay. Either "right", "left" or "none".
596 | 597 | replace_linebreaks (Default: false): If true, strings passed to 598 | show() or set() will have every "\n" replaced with an html linebreak.
599 | 600 | before_show (Default: Empty Function): Function that triggers 601 | before the show method. Receives the instance as an argument. If false is 602 | returned it aborts the execution.
603 | 604 | after_show (Default: Empty Function): Function that triggers after 605 | the show method. Receives the instance as an argument.
606 | 607 | before_set (Default: Empty Function): Function that triggers before 608 | the set method. Receives the instance as an argument. If false is returned 609 | it aborts the execution.
610 | 611 | after_set (Default: Empty Function): Function that triggers after 612 | the set method. Receives the instance as an argument.
613 | 614 | before_set_title (Default: Empty Function): Function that triggers 615 | before the set_title method. Receives the instance as an argument. If 616 | false is returned it aborts the execution.
617 | 618 | after_set_title (Default: Empty Function): Function that triggers 619 | after the set_title method. Receives the instance as an argument.
620 | 621 | before_set_progress (Default: Empty Function): Function that 622 | triggers before the set_progress method. Receives the instance as an 623 | argument. If false is returned it aborts the execution.
624 | 625 | after_set_progress (Default: Empty Function): Function that 626 | triggers after the set_progress method. Receives the instance as an 627 | argument.
628 | 629 | before_close (Default: Empty Function): Function that triggers 630 | before the close method. Receives the instance as an argument. If false is 631 | returned it aborts the execution.
632 | 633 | after_close (Default: Empty Function): Function that triggers after 634 | the close method. Receives the instance as an argument.
635 | 636 | after_last_closed (Default: Empty Function): Function that triggers 637 | after the last remaining open window was closed. Receives the instance as 638 | an argument.
639 | 640 | before_toggle (Default: Empty Function): Function that triggers 641 | before the toggle method. Receives the instance as an argument. If false 642 | is returned it aborts the execution.
643 | 644 | after_toggle (Default: Empty Function): Function that triggers 645 | after the toggle method. Receives the instance as an argument.
646 | 647 | before_create (Default: Empty Function): Function that triggers 648 | before the create method. Receives the instance as an argument. If false 649 | is returned it aborts the execution.
650 | 651 | after_create (Default: Empty Function): Function that triggers 652 | after the create method. Receives the instance as an argument.
653 | 654 | before_destroy (Default: Empty Function): Function that triggers 655 | before the destroy method. Receives the instance as an argument. If false 656 | is returned it aborts the execution.
657 | 658 | after_destroy (Default: Empty Function): Function that triggers 659 | after the destroy method. Receives the instance as an argument.
660 | 661 | on_click (Default: Empty Function): Function that triggers when 662 | the window is clicked.
663 | 664 | on_middle_click (Default: Empty Function): Function that triggers when 665 | the window is middle_clicked.
666 | 667 | on_wheel_down (Default: Empty Function): Function that triggers on 668 | mouse scroll wheel down.
669 | 670 | on_wheel_up (Default: Empty Function): Function that triggers on 671 | mouse scroll wheel up.
672 | 673 | on_overlay_click (Default: Empty Function): Function that triggers when 674 | the overlay is clicked.
675 | 676 | on_titlebar_click (Default: Empty Function): Function that triggers when 677 | the titlebar is clicked.
678 | 679 | on_x_button_click (Default: Empty Function): Function that triggers when 680 | an X close button is clicked.
681 | 682 | disable_transformations (Default: false): Disables transformations 683 | applied to windows to center them or put them in a certain place. Applies 684 | top and left to 0 as well.
685 | disable_content_padding (Default: false): Doesn't apply padding to 686 | content.
687 | 688 | full_content (Default: false): Makes content height 100vh and width 689 | 100vw.
690 | 691 | Example: 692 | 693 |
694 |711 | 712 | 728 | Test It 729 | 730 |710 |let msg_test = Msg.factory({ 695 | id: "test", 696 | class: "black", 697 | window_x: "floating_left", 698 | after_show: function(instance) { 699 | instance.set(instance.html() + ", Mr. Roboto"); 700 | }, 701 | after_set: function(instance) { 702 | console.log("instance.content.innerHTML set to: " + instance.html()); 703 | }, 704 | before_close: function(instance) { 705 | return confirm("Are you sure?"); 706 | } 707 | }) 708 | 709 | msg_test.show("Domo Arigato")
731 | 732 | 733 |
Properties
734 | 735 | instance.container: The Msg-container html element.736 | 737 | instance.overlay: The Msg-overlay html element.
738 | 739 | instance.overlay_x: The Msg-overlay-x html element.
740 | 741 | instance.topbar: The Msg-topbar html element.
742 | 743 | instance.titlebar: The Msg-titlebar html element.
744 | 745 | instance.window_inner_x: The Msg-window-inner-x html element.
746 | 747 | instance.window_floating_x: The Msg-window-floating-x html 748 | element.
749 | 750 | instance.window: The Msg-window html element.
751 | 752 | instance.content-container: The Msg-content-container html 753 | element.
754 | 755 | instance.content: The Msg-content html element.
756 | 757 | instance.progressbar-container: The Msg-progressbar-container html 758 | element.
759 | 760 | instance.progressbar: The Msg-progressbar html element.
761 | 762 | instance.options: The options object of the instance.
763 | 764 | 765 |
Methods
766 | 767 | instance.show(html): Opens a window with the received string or 768 | html element as its content and puts it at the top of the zStack.769 | 770 | instance.show([title, html]): An alternative way to call show is 771 | passing an array with the title for the titlebar and the content html. 772 | Useful if you have the titlebar enabled and you want to change both things 773 | in the same call.
774 | 775 | instance.show(): If no arguments are passed to show(), it displays 776 | the window with the last used html or the one passed to set() and puts it 777 | at the top of the zStack.
778 | 779 | instance.set(html): Updates the html of the window without opening 780 | it. This is useful if you want to prepare the content without showing the 781 | window or if you want to change the content of the window without 782 | triggering the show events.
783 | 784 | instance.set_or_show(html): If the window is open and at the top of 785 | the stack it changes the html content by calling set(). If the window is 786 | closed or not at the top of the stack it opens the window and shows the 787 | html content by calling show().
788 | 789 | instance.set_title(html): Updates the html of the titlebar. This 790 | doesn't open the window.
791 | 792 | instance.close(): Closes the window.
793 | 794 | instance.toggle(): If the window is closed it opens it. If the 795 | window is open it closes it.
796 | 797 | instance.html(): A shortcut for instance.content.innerHTML. Returns 798 | "" if the html elements have not been created yet.
799 | 800 | instance.title_html(): A shortcut for instance.titlebar.innerHTML. 801 | Returns "" if the titlebar element is not created.
802 | 803 | instance.is_open(): Returns true if the window is open.
804 | 805 | instance.any_open(): Returns true if any window with any id is 806 | open.
807 | 808 | instance.any_higher_open(): Returns true if any window with 809 | zStack_level 2 is open. These are usually modals and windows.
810 | 811 | instance.any_lower_open(): Returns true if any window with 812 | zStack_level 1 is open.
813 | 814 | instance.num_open(): Returns the number of windows open.
815 | 816 | instance.num_open_higher(): Returns the number of windows open with 817 | zStack_level 2. These are usually modals and windows.
818 | 819 | instance.num_open_lower(): Returns the number of windows open with 820 | zStack_level 1.
821 | 822 | instance.create(): Creates the html elements if they don't exist 823 | yet. This is done automatically on the first show() or set(), but there 824 | might be cases where you might want to create them first without showing 825 | anything.
826 | 827 | instance.recreate(): Removes the html elements from the dom and 828 | creates them again. This should be called after ids or classes are 829 | changed.
830 | 831 | instance.destroy(): Removes the html elements from the dom.
832 | 833 | instance.remove(): Destroys the html elements and removes the 834 | instance from the instance registry. So it won't appear in 835 | instance.instances() for example.
836 | 837 | instance.highest_zIndex(): Returns the highest z-index among all 838 | the created Msg-container elements. If it retuns -2000 it means no 839 | elements have been created.
840 | instance.highest_instance(): It returns the instance with the 841 | highest z-index. If none is open it returns false.
842 | 843 | instance.is_highest(): Returns true if the window is visible and at 844 | the top of the zStack.
845 | 846 | instance.to_top(): Puts an already opened window at the top of the 847 | zStack. This is done automatically by show(), but there might be cases 848 | where you want to do this without triggering the show events.
849 | 850 | instance.check_options(): This is done automatically when creating 851 | an instance. It checks the options object and applies the corresponding 852 | defaults to undefined properties.
853 | 854 | instance.set_progress(percentage): Fills the progressbar to the 855 | specified percentage.
856 | 857 | instance.get_progress(): Returns the current percentage of the 858 | progressbar.
859 | 860 | instance.instances(): Returns a list with the created instances.
861 | 862 | instance.higher_instances(): Returns a list with the created 863 | instances with zStack_level 2. These are usually modals and windows.
864 | 865 | instance.lower_instances(): Returns a list with the created 866 | instances with zStack_level 1.
867 | 868 | instance.get_instance_by_id(id): Returns an instance that has the 869 | specified instance id.
870 | 871 | instance.show_all(): Opens all the windows.
872 | 873 | instance.close_all(): Closes all the windows.
874 | 875 | instance.close_all_higher(): Closes all the windows with 876 | zStack_level 2. These are usually modals and windows.
877 | 878 | instance.close_all_lower(): Closes all the windows with 879 | zStack_level 1.
880 | 881 | instance.create_all(): Creates the html elements of all the 882 | instances.
883 | 884 | instance.recreate_all(): Recreates the html elements of all the 885 | instances.
886 | 887 | instance.destroy_all(): Removes the html elements of all the 888 | instances.
889 | 890 | instance.hide_titlebar(): Hides the titlebar including the inner_x. The whole topbar is hidden.
891 | 892 | instance.show_titlebar(): Shows the titlebar including the inner_x. The whole topbar is shown.
893 | 894 | 895 |
Presets
896 | 897 | preset: "popup"898 | instance.options.class = "green";
899 | instance.options.enable_overlay = false;
900 | instance.options.position = "bottomright";
901 | instance.options.remove_after_close = true;
902 | instance.options.zStack_level = 1;
903 | instance.options.window_width = "460px";
904 | instance.options.lock = false;
905 | 906 |
preset: "popup_autoclose"
907 | instance.options.class = "green";
908 | instance.options.enable_overlay = false;
909 | instance.options.position = "bottomright";
910 | instance.options.autoclose = true;
911 | instance.options.enable_progressbar = true;
912 | instance.options.remove_after_close = true;
913 | instance.options.zStack_level = 1;
914 | instance.options.window_width = "460px";
915 | instance.options.lock = false;
916 | 917 |
preset: "window"
918 | instance.options.window_height = "100vh";
919 | instance.options.window_min_height = "100vh";
920 | instance.options.window_max_height = "100vh";
921 | instance.options.window_width = "100vw";
922 | instance.options.window_min_width = "100vw";
923 | instance.options.window_max_width = "100vw";
924 | instance.options.disable_transformations = true;
925 | instance.options.disable_content_padding = true;
926 | instance.options.full_content = true;
927 | instance.options.window_x = "none";
928 | 929 |
930 | 931 | Note: It's advised to not modify the "display" or "z-index" css properties 932 | of the Msg HTML elements since they are handled internally. 933 | 934 |
935 | 936 | One Last Demo 937 | 938 |
939 | 940 | GitHub 941 | 942 | 943 | 944 | Open Wiki 945 | 946 | 947 | 948 | Issues 949 | 950 |
951 |
952 |
`) 509 | } 510 | 511 | instance.content.innerHTML = html 512 | } 513 | 514 | instance.fix_stacks() 515 | instance.options.after_set(instance) 516 | } 517 | 518 | instance.set_title = (html) => { 519 | if (html === undefined) { 520 | return 521 | } 522 | 523 | instance.create() 524 | 525 | if (instance.titlebar === undefined) { 526 | return 527 | } 528 | 529 | if (instance.options.before_set_title(instance) === false) { 530 | return 531 | } 532 | 533 | if (typeof html === `object`) { 534 | if (html instanceof Element) { 535 | instance.titlebar.innerHTML = `` 536 | instance.titlebar.appendChild(html) 537 | } 538 | } 539 | else { 540 | html = html.toString() 541 | 542 | if (instance.options.replace_linebreaks) { 543 | html = html.replace(/(\n)/g, `
`) 544 | } 545 | 546 | instance.titlebar.innerHTML = html 547 | } 548 | 549 | instance.fix_stacks() 550 | instance.options.after_set_title(instance) 551 | } 552 | 553 | instance.hide_titlebar = () => { 554 | if (!instance.topbar) { 555 | return 556 | } 557 | 558 | instance.topbar.style.display = `none` 559 | } 560 | 561 | instance.show_titlebar = () => { 562 | if (!instance.topbar) { 563 | return 564 | } 565 | 566 | instance.topbar.style.display = `flex` 567 | } 568 | 569 | instance.set_or_show = (html) => { 570 | if (instance.is_highest()) { 571 | instance.set(html) 572 | } 573 | else { 574 | instance.show(html) 575 | } 576 | } 577 | 578 | instance.show = (content) => { 579 | if (instance.options.close_on_show && instance.is_open()) { 580 | instance.close() 581 | instance.show(content) 582 | return 583 | } 584 | 585 | let title 586 | let html 587 | 588 | if ((typeof content === `object`) && !(content instanceof Element)) { 589 | title = content[0] 590 | html = content[1] 591 | } 592 | else { 593 | html = content 594 | } 595 | 596 | instance.create() 597 | 598 | if (instance.options.before_show(instance) === false) { 599 | return 600 | } 601 | 602 | if (html !== undefined) { 603 | instance.set(html) 604 | } 605 | 606 | if (title !== undefined) { 607 | instance.set_title(title) 608 | } 609 | 610 | instance.reset_timers() 611 | 612 | if (!instance.is_open()) { 613 | if (instance.options.close_others_on_show) { 614 | instance.close_all() 615 | } 616 | 617 | instance.container.style.display = `block` 618 | instance.check_add_overflow_hidden() 619 | instance.set_default_positions() 620 | instance.reset_props() 621 | 622 | if (instance.options.sideStack === `vertical`) { 623 | instance.check_vStack() 624 | } 625 | else if (instance.options.sideStack === `horizontal`) { 626 | instance.check_hStack() 627 | } 628 | } 629 | 630 | instance.to_top() 631 | 632 | if (instance.options.scroll_on_show) { 633 | instance.content_container.scrollTop = 0 634 | } 635 | 636 | if (instance.options.autoclose) { 637 | instance.autoclose_timer() 638 | 639 | if (instance.options.enable_progressbar && instance.options.bind_progressbar_to_autoclose) { 640 | instance.animate_autoclose_progressbar() 641 | } 642 | } 643 | 644 | instance.options.after_show(instance) 645 | } 646 | 647 | instance.toggle = () => { 648 | instance.create() 649 | 650 | if (instance.options.before_toggle(instance) === false) { 651 | return 652 | } 653 | 654 | instance.is_open() ? instance.close() : instance.show() 655 | instance.options.after_toggle(instance) 656 | } 657 | 658 | instance.create = () => { 659 | if (instance.created()) { 660 | return 661 | } 662 | 663 | if (Msg.el(`#Msg-container-${instance.options.id}`) !== null) { 664 | throw `Msg Error: The html elements for this id have already been created. Use a different id.` 665 | } 666 | 667 | if (instance.options.before_create(instance) === false) { 668 | return 669 | } 670 | 671 | let styles = {} 672 | 673 | styles.container = ` 674 | display: none; 675 | ` 676 | 677 | styles.overlay = ` 678 | position: fixed; 679 | opacity: 1; 680 | top: 0; 681 | left: 0; 682 | height: 100%; 683 | width: 100%; 684 | z-index: -1000; 685 | user-select: none; 686 | ` 687 | 688 | styles.overlay_x = ` 689 | cursor: pointer; 690 | float: ${instance.options.overlay_x}; 691 | font-size: 28px; 692 | font-family: sans-serif; 693 | -webkit-touch-callout: none; 694 | -webkit-user-select: none; 695 | -khtml-user-select: none; 696 | -moz-user-select: none; 697 | -ms-user-select: none; 698 | user-select: none; 699 | padding-left: 0.6em; 700 | padding-right: 0.6em; 701 | padding-top: 0.035em; 702 | padding-bottom: 0.2em; 703 | ` 704 | 705 | let p = instance.options.position 706 | let edge_x = instance.options.edge_padding_x 707 | let edge_y = instance.options.edge_padding_y 708 | let win_x, win_y, win_trans 709 | 710 | if (instance.options.disable_transformations) { 711 | win_x = `left: 0;` 712 | win_y = `top: 0;` 713 | win_trans = `transform: initial;` 714 | 715 | instance.vStackable = false 716 | instance.hStackable = false 717 | } 718 | else if (p === `top`) { 719 | win_x = `left: 50%;` 720 | win_y = `top: ${edge_y}px;` 721 | win_trans = `transform: translateX(-50%);` 722 | 723 | instance.vStackable = true 724 | instance.hStackable = false 725 | } 726 | else if (p === `bottom`) { 727 | win_x = `left: 50%;` 728 | win_y = `bottom: ${edge_y}px;` 729 | win_trans = `transform: translateX(-50%);` 730 | 731 | instance.vStackable = true 732 | instance.hStackable = false 733 | } 734 | else if (p === `left`) { 735 | win_x = `left: ${edge_x}px;` 736 | win_y = `top: 50%;` 737 | win_trans = `transform: translateY(-50%);` 738 | 739 | instance.vStackable = false 740 | instance.hStackable = true 741 | } 742 | else if (p === `right`) { 743 | win_x = `right: ${edge_x}px;` 744 | win_y = `top: 50%;` 745 | win_trans = `transform: translateY(-50%);` 746 | 747 | instance.vStackable = false 748 | instance.hStackable = true 749 | } 750 | else if (p === `topleft`) { 751 | win_x = `left: ${edge_x}px;` 752 | win_y = `top: ${edge_y}px;` 753 | win_trans = `` 754 | 755 | instance.vStackable = true 756 | instance.hStackable = true 757 | } 758 | else if (p === `topright`) { 759 | win_x = `right: ${edge_x}px;` 760 | win_y = `top: ${edge_y}px;` 761 | win_trans = `` 762 | 763 | instance.vStackable = true 764 | instance.hStackable = true 765 | } 766 | else if (p === `bottomleft`) { 767 | win_x = `left: ${edge_x}px;` 768 | win_y = `bottom: ${edge_y}px;` 769 | win_trans = `` 770 | 771 | instance.vStackable = true 772 | instance.hStackable = true 773 | } 774 | else if (p === `bottomright`) { 775 | win_x = `right: ${edge_x}px;` 776 | win_y = `bottom: ${edge_y}px;` 777 | win_trans = `` 778 | 779 | instance.vStackable = true 780 | instance.hStackable = true 781 | } 782 | else { 783 | win_x = `left: 50%;` 784 | win_y = `top: 50%;` 785 | win_trans = `transform: translate(-50%, -50%);` 786 | 787 | instance.vStackable = false 788 | instance.hStackable = false 789 | } 790 | 791 | let wun 792 | 793 | if (instance.options.window_unselectable) { 794 | wun = `user-select: none;` 795 | } 796 | else { 797 | wun = `` 798 | } 799 | 800 | styles.window = ` 801 | display: flex; 802 | flex-direction: column; 803 | opacity: 1; 804 | ${win_x} 805 | ${win_y} 806 | position: fixed; 807 | width: ${instance.options.window_width}; 808 | height: ${instance.options.window_height}; 809 | min-width: ${instance.options.window_min_width}; 810 | min-height: ${instance.options.window_min_height}; 811 | max-width: ${instance.options.window_max_width}; 812 | max-height: ${instance.options.window_max_height}; 813 | ${win_trans} 814 | outline: 0; 815 | ${wun} 816 | cursor: ${instance.options.window_cursor}; 817 | z-index: -1000; 818 | ` 819 | 820 | styles.topbar = ` 821 | overflow: hidden; 822 | flex-shrink: 0; 823 | display: flex; 824 | flex-direction: row; 825 | ` 826 | 827 | let padl = `padding-left: 0.4em;` 828 | let padr = `padding-right: 0.4em;` 829 | let justcnt = `` 830 | 831 | if (instance.options.center_titlebar) { 832 | justcnt = `justify-content: center` 833 | } 834 | 835 | if (instance.options.center_titlebar && (instance.options.window_x === `inner_right`)) { 836 | padl = `padding-left: 50.78px;` 837 | padr = `padding-right: 10.78px;` 838 | } 839 | 840 | if (instance.options.center_titlebar && (instance.options.window_x === `inner_left`)) { 841 | padl = `padding-left: 10.78px;` 842 | padr = `padding-right: 50.78px;` 843 | } 844 | 845 | styles.titlebar = ` 846 | display: flex; 847 | align-items: center; 848 | ${justcnt}; 849 | overflow: hidden; 850 | order: 2; 851 | flex-grow: 1; 852 | ${padl} 853 | ${padr} 854 | min-height: 27px; 855 | font-size: 16px; 856 | font-family: sans-serif; 857 | font-weight: bold; 858 | white-space: nowrap; 859 | cursor:${instance.options.titlebar_cursor}; 860 | ` 861 | 862 | let ix_order, ix_margin 863 | 864 | if (instance.options.window_x.includes(`left`)) { 865 | ix_order = `1` 866 | ix_margin = `` 867 | } 868 | else { 869 | ix_order = `3` 870 | ix_margin = `auto` 871 | } 872 | 873 | styles.window_inner_x = ` 874 | cursor: pointer; 875 | margin-left: ${ix_margin}; 876 | font-size: 24px; 877 | font-family: sans-serif; 878 | -webkit-touch-callout: none; 879 | -webkit-user-select: none; 880 | -khtml-user-select: none; 881 | -moz-user-select: none; 882 | -ms-user-select: none; 883 | user-select: none; 884 | overflow: hidden; 885 | order: ${ix_order}; 886 | padding-left: 0.6em; 887 | padding-right: 0.6em; 888 | padding-top: 0.035em; 889 | padding-bottom: 0.2em; 890 | ` 891 | 892 | let fs, fms 893 | 894 | if (instance.options.window_x.includes(`left`)) { 895 | fs = `left: 0px;` 896 | fms = `margin-left: -10px;` 897 | } 898 | else { 899 | fs = `right: 0px;` 900 | fms = `margin-right: -10px;` 901 | } 902 | 903 | styles.window_floating_x = ` 904 | cursor: pointer; 905 | position: absolute; 906 | top: 0px; 907 | ${fs} 908 | margin-top: -10px; 909 | ${fms} 910 | font-size: 16px; 911 | font-family: sans-serif; 912 | height: 22px; 913 | width: 22px; 914 | -webkit-touch-callout: none; 915 | -webkit-user-select: none; 916 | -khtml-user-select: none; 917 | -moz-user-select: none; 918 | -ms-user-select: none; 919 | user-select: none; 920 | overflow: hidden; 921 | z-index: 9999999999999999; 922 | display: block; 923 | box-sizing: border-box; 924 | border-width: 3px; 925 | border-style: solid; 926 | border-color: #2B2D30; 927 | border-radius: 100%; 928 | 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%); 929 | background-color: #2B2D30; 930 | box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.5); 931 | transition: all 0.3s ease; 932 | ` 933 | 934 | let overflow_y = `auto` 935 | 936 | if (instance.options.preset === `window`) { 937 | overflow_y = `hidden` 938 | } 939 | 940 | styles.content_container = ` 941 | overflow-y: ${overflow_y}; 942 | overflow-x: hidden; 943 | border: none; 944 | outline: 0; 945 | margin: 0; 946 | flex-grow: 1; 947 | ` 948 | 949 | let pad 950 | 951 | if (instance.options.disable_content_padding) { 952 | pad = `padding: 0;` 953 | } 954 | else { 955 | pad = `padding: 1.2rem;` 956 | } 957 | 958 | let cwid, chgt 959 | 960 | if (instance.options.full_content) { 961 | cwid = `width: 100%;` 962 | chgt = `height: 100%;` 963 | } 964 | else { 965 | cwid = `` 966 | chgt = `` 967 | } 968 | 969 | styles.content = ` 970 | font-size: 16px; 971 | text-align: center; 972 | overflow-wrap: break-word; 973 | ${pad} 974 | ${cwid} 975 | ${chgt} 976 | ` 977 | 978 | styles.progressbar_container = ` 979 | height: 11px; 980 | width: 100%; 981 | ` 982 | 983 | styles.progressbar = ` 984 | height: 100%; 985 | width: 0%; 986 | ` 987 | 988 | let container_class = 989 | instance.options.container_class !== undefined 990 | ? instance.options.container_class 991 | : instance.options.class 992 | let overlay_class = 993 | instance.options.overlay_class !== undefined 994 | ? instance.options.overlay_class 995 | : instance.options.class 996 | let overlay_x_class = 997 | instance.options.overlay_x_class !== undefined 998 | ? instance.options.overlay_x_class 999 | : instance.options.class 1000 | let window_class = 1001 | instance.options.window_class !== undefined 1002 | ? instance.options.window_class 1003 | : instance.options.class 1004 | let topbar_class = 1005 | instance.options.topbar_class !== undefined 1006 | ? instance.options.topbar_class 1007 | : instance.options.class 1008 | let titlebar_class = 1009 | instance.options.titlebar_class !== undefined 1010 | ? instance.options.titlebar_class 1011 | : instance.options.class 1012 | let window_inner_x_class = 1013 | instance.options.window_inner_x_class !== undefined 1014 | ? instance.options.window_inner_x_class 1015 | : instance.options.class 1016 | let window_floating_x_class = 1017 | instance.options.window_floating_x_class !== undefined 1018 | ? instance.options.window_floating_x_class 1019 | : instance.options.class 1020 | let content_container_class = 1021 | instance.options.content_container_class !== undefined 1022 | ? instance.options.content_container_class 1023 | : instance.options.class 1024 | let content_class = 1025 | instance.options.content_class !== undefined 1026 | ? instance.options.content_class 1027 | : instance.options.class 1028 | let progressbar_container_class = 1029 | instance.options.progressbar_container_class !== undefined 1030 | ? instance.options.progressbar_container_class 1031 | : instance.options.class 1032 | let progressbar_class = 1033 | instance.options.progressbar_class !== undefined 1034 | ? instance.options.progressbar_class 1035 | : instance.options.class 1036 | 1037 | container_class = container_class 1038 | .split(/\s+/) 1039 | .map((w) => (w.startsWith(`!`) ? w.substring(1) : `Msg-container-${w}`)) 1040 | .join(` `) 1041 | overlay_class = overlay_class 1042 | .split(/\s+/) 1043 | .map((w) => (w.startsWith(`!`) ? w.substring(1) : `Msg-overlay-${w}`)) 1044 | .join(` `) 1045 | overlay_x_class = overlay_x_class 1046 | .split(/\s+/) 1047 | .map((w) => (w.startsWith(`!`) ? w.substring(1) : `Msg-overlay-x-${w}`)) 1048 | .join(` `) 1049 | window_class = window_class 1050 | .split(/\s+/) 1051 | .map((w) => (w.startsWith(`!`) ? w.substring(1) : `Msg-window-${w}`)) 1052 | .join(` `) 1053 | topbar_class = topbar_class 1054 | .split(/\s+/) 1055 | .map((w) => (w.startsWith(`!`) ? w.substring(1) : `Msg-topbar-${w}`)) 1056 | .join(` `) 1057 | titlebar_class = titlebar_class 1058 | .split(/\s+/) 1059 | .map((w) => (w.startsWith(`!`) ? w.substring(1) : `Msg-titlebar-${w}`)) 1060 | .join(` `) 1061 | window_inner_x_class = window_inner_x_class 1062 | .split(/\s+/) 1063 | .map((w) => 1064 | w.startsWith(`!`) ? w.substring(1) : `Msg-window-inner-x-${w}`, 1065 | ) 1066 | .join(` `) 1067 | window_floating_x_class = window_floating_x_class 1068 | .split(/\s+/) 1069 | .map((w) => 1070 | w.startsWith(`!`) ? w.substring(1) : `Msg-window-floating-x-${w}`, 1071 | ) 1072 | .join(` `) 1073 | content_container_class = content_container_class 1074 | .split(/\s+/) 1075 | .map((w) => 1076 | w.startsWith(`!`) ? w.substring(1) : `Msg-content-container-${w}`, 1077 | ) 1078 | .join(` `) 1079 | content_class = content_class 1080 | .split(/\s+/) 1081 | .map((w) => (w.startsWith(`!`) ? w.substring(1) : `Msg-content-${w}`)) 1082 | .join(` `) 1083 | progressbar_container_class = progressbar_container_class 1084 | .split(/\s+/) 1085 | .map((w) => 1086 | w.startsWith(`!`) ? w.substring(1) : `Msg-progressbar-container-${w}`, 1087 | ) 1088 | .join(` `) 1089 | progressbar_class = progressbar_class 1090 | .split(/\s+/) 1091 | .map((w) => (w.startsWith(`!`) ? w.substring(1) : `Msg-progressbar-${w}`)) 1092 | .join(` `) 1093 | 1094 | let container_html = `` 1095 | let overlay_html = `` 1096 | let overlay_x_html = `` 1097 | let window_html = `` 1098 | let topbar_html = `` 1099 | let titlebar_html = `` 1100 | let window_inner_x_html = `
x
`
1101 | let window_floating_x_html = ``
1102 | let content_container_html = ``
1103 | let content_html = ``
1104 | let progressbar_container_html = ``
1105 | let progressbar_html = ``
1106 |
1107 | Msg.insert(document.body, container_html)
1108 | instance.container = Msg.el(`#Msg-container-${instance.options.id}`)
1109 |
1110 | if (instance.options.enable_overlay) {
1111 | Msg.insert(instance.container, overlay_html)
1112 | instance.overlay = Msg.el(`#Msg-overlay-${instance.options.id}`)
1113 |
1114 | if (instance.options.overlay_x !== `none`) {
1115 | Msg.insert(instance.overlay, overlay_x_html)
1116 | instance.overlay_x = Msg.el(`#Msg-overlay-x-${instance.options.id}`)
1117 | }
1118 | }
1119 |
1120 | Msg.insert(instance.container, window_html)
1121 | instance.window = Msg.el(`#Msg-window-${instance.options.id}`)
1122 |
1123 | if (instance.options.enable_titlebar || instance.options.window_x.includes(`inner`)) {
1124 | Msg.insert(instance.window, topbar_html)
1125 | instance.topbar = Msg.el(`#Msg-topbar-${instance.options.id}`)
1126 |
1127 | if (instance.options.enable_titlebar) {
1128 | Msg.insert(instance.topbar, titlebar_html)
1129 | instance.titlebar = Msg.el(`#Msg-titlebar-${instance.options.id}`)
1130 | }
1131 |
1132 | if (instance.options.window_x.includes(`inner`)) {
1133 | Msg.insert(instance.topbar, window_inner_x_html)
1134 | instance.window_inner_x = Msg.el(`#Msg-window-inner-x-${instance.options.id}`)
1135 | }
1136 | }
1137 |
1138 | if (instance.options.window_x.includes(`floating`)) {
1139 | Msg.insert(instance.window, window_floating_x_html, `afterbegin`)
1140 | instance.window_floating_x = Msg.el(`#Msg-window-floating-x-${instance.options.id}`)
1141 | }
1142 |
1143 | Msg.insert(instance.window, content_container_html)
1144 | instance.content_container = Msg.el(`#Msg-content-container-${instance.options.id}`)
1145 | Msg.insert(instance.content_container, content_html)
1146 | instance.content = Msg.el(`#Msg-content-${instance.options.id}`)
1147 |
1148 | if (instance.options.enable_progressbar) {
1149 | Msg.insert(instance.window, progressbar_container_html)
1150 | instance.progressbar_container = Msg.el(`#Msg-progressbar-container-${instance.options.id}`)
1151 | Msg.insert(instance.progressbar_container, progressbar_html)
1152 | instance.progressbar = Msg.el(`#Msg-progressbar-${instance.options.id}`)
1153 | }
1154 |
1155 | if (instance.overlay !== undefined) {
1156 | Msg.ev(instance.overlay, `click`, () => {
1157 | if (instance.options.close_on_overlay_click) {
1158 | instance.options.on_overlay_click(instance)
1159 | instance.close()
1160 | }
1161 | })
1162 | }
1163 |
1164 | if (instance.titlebar !== undefined) {
1165 | Msg.ev(instance.titlebar, `click`, () => {
1166 | if (instance.options.close_on_titlebar_click) {
1167 | instance.options.on_titlebar_click(instance)
1168 | instance.close()
1169 | }
1170 | })
1171 | }
1172 |
1173 | Msg.ev(instance.window, `click`, (e) => {
1174 | instance.options.on_click(instance)
1175 | })
1176 |
1177 | Msg.ev(instance.window, `wheel`, (e) => {
1178 | let direction = e.deltaY > 0 ? `down` : `up`
1179 |
1180 | if (direction === `down`) {
1181 | instance.options.on_wheel_down(instance)
1182 | }
1183 | else if (direction === `up`) {
1184 | instance.options.on_wheel_up(instance)
1185 | }
1186 | })
1187 |
1188 | Msg.ev(instance.window, `auxclick`, (e) => {
1189 | if (e.which === 2) {
1190 | instance.options.on_middle_click(instance)
1191 | }
1192 | })
1193 |
1194 | if (instance.window_inner_x !== undefined) {
1195 | Msg.ev(instance.window_inner_x, `click`, (e) => {
1196 | instance.options.on_x_button_click(instance)
1197 | instance.close()
1198 | e.stopPropagation()
1199 | })
1200 | }
1201 |
1202 | if (instance.window_floating_x !== undefined) {
1203 | Msg.ev(instance.window_floating_x, `click`, (e) => {
1204 | instance.options.on_x_button_click(instance)
1205 | instance.close()
1206 | e.stopPropagation()
1207 | })
1208 | }
1209 |
1210 | if (instance.overlay_x !== undefined) {
1211 | Msg.ev(instance.overlay_x, `click`, (e) => {
1212 | instance.options.on_x_button_click(instance)
1213 | instance.close()
1214 | e.stopPropagation()
1215 | })
1216 | }
1217 |
1218 | instance.options.after_create(instance)
1219 | }
1220 |
1221 | instance.recreate = () => {
1222 | instance.destroy()
1223 | instance.create()
1224 | }
1225 |
1226 | instance.destroy = () => {
1227 | if (instance.created()) {
1228 | if (instance.options.before_destroy(instance) === false) {
1229 | return
1230 | }
1231 |
1232 | instance.check_remove_overflow_hidden()
1233 | instance.container.parentNode.removeChild(instance.container)
1234 |
1235 | instance.container = undefined
1236 | instance.overlay = undefined
1237 | instance.overlay_x = undefined
1238 | instance.window = undefined
1239 | instance.topbar = undefined
1240 | instance.titlebar = undefined
1241 | instance.window_inner_x = undefined
1242 | instance.window_floating_x = undefined
1243 | instance.content_container = undefined
1244 | instance.content = undefined
1245 | instance.progressbar_container = undefined
1246 | instance.progressbar = undefined
1247 |
1248 | instance.options.after_destroy(instance)
1249 | }
1250 | }
1251 |
1252 | instance.is_open = () => {
1253 | if (!instance.created() || (instance.container.style.display === `none`)) {
1254 | return false
1255 | }
1256 |
1257 | return true
1258 | }
1259 |
1260 | instance.any_open = () => {
1261 | for (let inst of Msg.instances) {
1262 | if (inst.is_open()) {
1263 | return true
1264 | }
1265 | }
1266 |
1267 | return false
1268 | }
1269 |
1270 | instance.any_higher_open = () => {
1271 | for (let inst of Msg.instances) {
1272 | if (inst.options.zStack_level === 2) {
1273 | if (inst.is_open()) {
1274 | return true
1275 | }
1276 | }
1277 | }
1278 |
1279 | return false
1280 | }
1281 |
1282 | instance.any_lower_open = () => {
1283 | for (let inst of Msg.instances) {
1284 | if (inst.options.zStack_level === 1) {
1285 | if (inst.is_open()) {
1286 | return true
1287 | }
1288 | }
1289 | }
1290 |
1291 | return false
1292 | }
1293 |
1294 | instance.num_open = () => {
1295 | let num_open = 0
1296 |
1297 | for (let inst of Msg.instances) {
1298 | if (inst.is_open()) {
1299 | num_open += 1
1300 | }
1301 | }
1302 |
1303 | return num_open
1304 | }
1305 |
1306 | instance.num_open_higher = () => {
1307 | let num_open = 0
1308 |
1309 | for (let inst of Msg.instances) {
1310 | if (inst.is_open()) {
1311 | if (inst.options.zStack_level === 2) {
1312 | num_open += 1
1313 | }
1314 | }
1315 | }
1316 |
1317 | return num_open
1318 | }
1319 |
1320 | instance.num_open_lower = () => {
1321 | let num_open = 0
1322 |
1323 | for (let inst of Msg.instances) {
1324 | if (inst.is_open()) {
1325 | if (inst.options.zStack_level === 1) {
1326 | num_open += 1
1327 | }
1328 | }
1329 | }
1330 |
1331 | return num_open
1332 | }
1333 |
1334 | instance.show_all = () => {
1335 | for (let i = 0; i < Msg.instances.length; i++) {
1336 | Msg.instances[i].show()
1337 | }
1338 | }
1339 |
1340 | instance.close_all = () => {
1341 | if (!instance.any_open()) {
1342 | return false
1343 | }
1344 |
1345 | for (let i = 0; i < Msg.instances.length; i++) {
1346 | Msg.instances[i].close()
1347 | }
1348 | }
1349 |
1350 | instance.close_all_higher = () => {
1351 | if (!instance.any_higher_open()) {
1352 | return false
1353 | }
1354 |
1355 | for (let higher of instance.higher_instances()) {
1356 | higher.close()
1357 | }
1358 | }
1359 |
1360 | instance.close_all_lower = () => {
1361 | if (!instance.any_lower_open()) {
1362 | return false
1363 | }
1364 |
1365 | for (let lower of instance.lower_instances()) {
1366 | lower.close()
1367 | }
1368 | }
1369 |
1370 | instance.create_all = () => {
1371 | for (let i = 0; i < Msg.instances.length; i++) {
1372 | Msg.instances[i].create()
1373 | }
1374 | }
1375 |
1376 | instance.recreate_all = () => {
1377 | for (let i = 0; i < Msg.instances.length; i++) {
1378 | Msg.instances[i].recreate()
1379 | }
1380 | }
1381 |
1382 | instance.destroy_all = () => {
1383 | for (let i = 0; i < Msg.instances.length; i++) {
1384 | Msg.instances[i].destroy()
1385 | }
1386 | }
1387 |
1388 | instance.common_zIndex = (zIndex) => {
1389 | zIndex = parseInt(zIndex)
1390 | let common
1391 |
1392 | if (zIndex > 0) {
1393 | common = parseInt(zIndex.toString().substring(1))
1394 | }
1395 | else {
1396 | common = -2000
1397 | }
1398 |
1399 | return common
1400 | }
1401 |
1402 | instance.highest_zIndex = () => {
1403 | let highest = -2000
1404 | let windows = Msg.els(`.Msg-window`)
1405 |
1406 | for (let i = 0; i < windows.length; i++) {
1407 | let zIndex = parseInt(windows[i].style.zIndex)
1408 |
1409 | if (zIndex > highest) {
1410 | highest = zIndex
1411 | }
1412 | }
1413 |
1414 | return parseInt(highest)
1415 | }
1416 |
1417 | instance.highest_instance = () => {
1418 | let zIndex = instance.highest_zIndex()
1419 |
1420 | if (zIndex < 0) {
1421 | return false
1422 | }
1423 |
1424 | for (let i of Msg.instances) {
1425 | if (i.window !== undefined) {
1426 | if (parseInt(i.window.style.zIndex) === zIndex) {
1427 | return i
1428 | }
1429 | }
1430 | }
1431 |
1432 | return false
1433 | }
1434 |
1435 | instance.highest_common_zIndex = () => {
1436 | let highest = -2000
1437 | let windows = Msg.els(`.Msg-window`)
1438 |
1439 | for (let i = 0; i < windows.length; i++) {
1440 | let zIndex = instance.common_zIndex(windows[i].style.zIndex)
1441 |
1442 | if (zIndex > highest) {
1443 | highest = zIndex
1444 | }
1445 | }
1446 |
1447 | return highest
1448 | }
1449 |
1450 | instance.is_highest = () => {
1451 | if (instance.is_open()) {
1452 | let zIndex = instance.highest_zIndex()
1453 |
1454 | if (parseInt(instance.window.style.zIndex) === zIndex) {
1455 | return true
1456 | }
1457 | }
1458 |
1459 | return false
1460 | }
1461 |
1462 | instance.html = () => {
1463 | if (instance.created()) {
1464 | return instance.content.innerHTML
1465 | }
1466 |
1467 | return ``
1468 | }
1469 |
1470 | instance.title_html = () => {
1471 | if (instance.titlebar !== undefined) {
1472 | return instance.titlebar.innerHTML
1473 | }
1474 |
1475 | return ``
1476 | }
1477 |
1478 | instance.check_add_overflow_hidden = () => {
1479 | if (instance.options.lock) {
1480 | document
1481 | .querySelector(instance.options.locked_element)
1482 | .classList.add(`Msg-overflow-hidden`)
1483 | }
1484 | }
1485 |
1486 | instance.check_remove_overflow_hidden = () => {
1487 | for (let i of Msg.instances) {
1488 | if (i.is_open()) {
1489 | if (i.options.lock) {
1490 | return
1491 | }
1492 | }
1493 | }
1494 |
1495 | document
1496 | .querySelector(instance.options.locked_element)
1497 | .classList.remove(`Msg-overflow-hidden`)
1498 | }
1499 |
1500 | instance.to_top = () => {
1501 | if (instance.is_open()) {
1502 | let zIndex = parseInt(instance.window.style.zIndex)
1503 | let highest_common = instance.highest_common_zIndex()
1504 | let highest
1505 |
1506 | if (instance.options.zStack_level === 1) {
1507 | highest = Math.max(5000000, 5000000 + highest_common)
1508 | }
1509 | else {
1510 | highest = Math.max(50000000, 50000000 + highest_common)
1511 | }
1512 |
1513 | if (highest > zIndex) {
1514 | if (instance.overlay !== undefined) {
1515 | instance.overlay.style.zIndex = highest + 1
1516 | }
1517 |
1518 | instance.window.style.zIndex = highest + 2
1519 | }
1520 | }
1521 | }
1522 |
1523 | instance.instances = () => {
1524 | return Msg.instances
1525 | }
1526 |
1527 | instance.higher_instances = () => {
1528 | let instances = []
1529 |
1530 | for (let inst of Msg.instances) {
1531 | if (inst.options.zStack_level === 2) {
1532 | instances.push(inst)
1533 | }
1534 | }
1535 |
1536 | return instances
1537 | }
1538 |
1539 | instance.lower_instances = () => {
1540 | let instances = []
1541 |
1542 | for (let inst of Msg.instances) {
1543 | if (inst.options.zStack_level === 1) {
1544 | instances.push(inst)
1545 | }
1546 | }
1547 |
1548 | return instances
1549 | }
1550 |
1551 | instance.get_instance_by_id = (id) => {
1552 | for (let i of Msg.instances) {
1553 | if (i.options.id.toString() === id.toString()) {
1554 | return i
1555 | }
1556 | }
1557 | }
1558 |
1559 | instance.autoclose_timer = () => {
1560 | instance.autoclose_timeout = setTimeout(() => {
1561 | instance.close()
1562 | }, instance.options.autoclose_delay)
1563 | }
1564 |
1565 | instance.reset_timers = () => {
1566 | clearTimeout(instance.autoclose_timeout)
1567 | }
1568 |
1569 | instance.clear_autoclose_progressbar_interval = () => {
1570 | clearInterval(instance.progressbar_animation)
1571 | }
1572 |
1573 | instance.animate_autoclose_progressbar = () => {
1574 | instance.clear_autoclose_progressbar_interval()
1575 |
1576 | if (instance.options.reverse_autoclose_progressbar) {
1577 | let percentage = 0
1578 | instance.progressbar.style.width = `0%`
1579 |
1580 | instance.progressbar_animation = setInterval(() => {
1581 | if (!instance.created()) {
1582 | clearInterval(instance.progressbar_animation)
1583 | }
1584 |
1585 | percentage += 1
1586 |
1587 | instance.set_progress(percentage)
1588 |
1589 | if (percentage >= 100) {
1590 | clearInterval(instance.progressbar_animation)
1591 | }
1592 | }, instance.options.autoclose_delay / 100)
1593 | }
1594 | else {
1595 | let percentage = 100
1596 | instance.progressbar.style.width = `100%`
1597 |
1598 | instance.progressbar_animation = setInterval(() => {
1599 | if (!instance.created()) {
1600 | clearInterval(instance.progressbar_animation)
1601 | }
1602 |
1603 | percentage -= 1
1604 |
1605 | instance.set_progress(percentage)
1606 |
1607 | if (percentage <= 0) {
1608 | clearInterval(instance.progressbar_animation)
1609 | }
1610 | }, instance.options.autoclose_delay / 100)
1611 | }
1612 | }
1613 |
1614 | instance.set_progress = (percentage) => {
1615 | if (percentage === undefined) {
1616 | return
1617 | }
1618 |
1619 | instance.create()
1620 |
1621 | if (instance.progressbar === undefined) {
1622 | return
1623 | }
1624 |
1625 | if (instance.options.before_set_progress(instance) === false) {
1626 | return
1627 | }
1628 |
1629 | if (percentage > 100) {
1630 | percentage = 100
1631 | }
1632 |
1633 | if (percentage < 0) {
1634 | percentage = 0
1635 | }
1636 |
1637 | instance.progressbar.style.width = `${percentage}%`
1638 | instance.options.after_set_progress(instance)
1639 | }
1640 |
1641 | instance.get_progress = () => {
1642 | if (instance.progressbar === undefined) {
1643 | return
1644 | }
1645 |
1646 | return Math.round((instance.progressbar.offsetWidth / instance.window.offsetWidth) * 100)
1647 | }
1648 |
1649 | instance.reset_props = () => {
1650 | if (instance.overlay !== undefined) {
1651 | instance.overlay.style.opacity = 1
1652 | }
1653 |
1654 | instance.window.style.opacity = 1
1655 | instance.window.style.zoom = 1
1656 | }
1657 |
1658 | instance.stack_pos_top_sort = (a, b) => {
1659 | return a.stack_pos_top - b.stack_pos_top
1660 | }
1661 |
1662 | instance.stack_pos_top_sort2 = (a, b) => {
1663 | return b.stack_pos_top - a.stack_pos_top
1664 | }
1665 |
1666 | instance.stack_pos_bottom_sort = (a, b) => {
1667 | return a.stack_pos_bottom - b.stack_pos_bottom
1668 | }
1669 |
1670 | instance.stack_pos_bottom_sort2 = (a, b) => {
1671 | return b.stack_pos_bottom - a.stack_pos_bottom
1672 | }
1673 |
1674 | instance.stack_pos_left_sort = (a, b) => {
1675 | return a.stack_pos_left - b.stack_pos_left
1676 | }
1677 |
1678 | instance.stack_pos_left_sort2 = (a, b) => {
1679 | return b.stack_pos_left - a.stack_pos_left
1680 | }
1681 |
1682 | instance.stack_pos_right_sort = (a, b) => {
1683 | return a.stack_pos_right - b.stack_pos_right
1684 | }
1685 |
1686 | instance.stack_pos_right_sort2 = (a, b) => {
1687 | return b.stack_pos_right - a.stack_pos_right
1688 | }
1689 |
1690 | instance.highest_in_position = (mode) => {
1691 | let highest = -2000
1692 | let highest_ins
1693 | let p = instance.options.position
1694 |
1695 | for (let i of Msg.instances) {
1696 | if (i.is_open()) {
1697 | if (i.options.position === p) {
1698 | let pos
1699 |
1700 | if (mode === `vertical`) {
1701 | if (p.includes(`top`)) {
1702 | pos = i.stack_pos_top
1703 | }
1704 | else if (p.includes(`bottom`)) {
1705 | pos = i.stack_pos_bottom
1706 | }
1707 | }
1708 | else if (mode === `horizontal`) {
1709 | if (p.includes(`left`)) {
1710 | pos = i.stack_pos_left
1711 | }
1712 | else if (p.includes(`right`)) {
1713 | pos = i.stack_pos_right
1714 | }
1715 | }
1716 |
1717 | if (pos !== undefined) {
1718 | if (pos > highest) {
1719 | highest = pos
1720 | highest_ins = i
1721 | }
1722 | }
1723 | }
1724 | }
1725 | }
1726 |
1727 | return highest_ins
1728 | }
1729 |
1730 | instance.lowest_in_position = (mode) => {
1731 | let lowest = 200000000
1732 | let lowest_ins
1733 | let p = instance.options.position
1734 |
1735 | for (let i of Msg.instances) {
1736 | if (i.is_open()) {
1737 | if (i.options.position === p) {
1738 | let pos
1739 |
1740 | if (mode === `vertical`) {
1741 | if (p.includes(`top`)) {
1742 | pos = i.stack_pos_top
1743 | }
1744 | else if (p.includes(`bottom`)) {
1745 | pos = i.stack_pos_bottom
1746 | }
1747 | }
1748 | else if (mode === `horizontal`) {
1749 | if (p.includes(`left`)) {
1750 | pos = i.stack_pos_left
1751 | }
1752 | else if (p.includes(`right`)) {
1753 | pos = i.stack_pos_right
1754 | }
1755 | }
1756 |
1757 | if (pos !== undefined) {
1758 | if (pos < lowest) {
1759 | lowest = pos
1760 | lowest_ins = i
1761 | }
1762 | }
1763 | }
1764 | }
1765 | }
1766 |
1767 | return lowest_ins
1768 | }
1769 |
1770 | instance.above_in_position = (ins, mode) => {
1771 | let ins_above = []
1772 | let p = ins.options.position
1773 |
1774 | for (let i of Msg.instances) {
1775 | if (i.is_open()) {
1776 | if (i.options.position === p) {
1777 | if (mode === `vertical`) {
1778 | if (p.includes(`top`)) {
1779 | if (i.stack_pos_top > ins.stack_pos_top) {
1780 | ins_above.push(i)
1781 | }
1782 | }
1783 | else if (p.includes(`bottom`)) {
1784 | if (i.stack_pos_bottom > ins.stack_pos_bottom) {
1785 | ins_above.push(i)
1786 | }
1787 | }
1788 | }
1789 | else if (mode === `horizontal`) {
1790 | if (p.includes(`left`)) {
1791 | if (i.stack_pos_left > ins.stack_pos_left) {
1792 | ins_above.push(i)
1793 | }
1794 | }
1795 | else if (p.includes(`right`)) {
1796 | if (i.stack_pos_right > ins.stack_pos_right) {
1797 | ins_above.push(i)
1798 | }
1799 | }
1800 | }
1801 | }
1802 | }
1803 | }
1804 |
1805 | if (mode === `vertical`) {
1806 | if (p.includes(`top`)) {
1807 | ins_above.sort(instance.stack_pos_top_sort)
1808 | }
1809 | else if (p.includes(`bottom`)) {
1810 | ins_above.sort(instance.stack_pos_bottom_sort)
1811 | }
1812 | }
1813 | else if (mode === `horizontal`) {
1814 | if (p.includes(`left`)) {
1815 | ins_above.sort(instance.stack_pos_left_sort)
1816 | }
1817 | else if (p.includes(`right`)) {
1818 | ins_above.sort(instance.stack_pos_right_sort)
1819 | }
1820 | }
1821 |
1822 | return ins_above
1823 | }
1824 |
1825 | instance.nextbelow_in_position = (ins, mode) => {
1826 | let ins_below = []
1827 |
1828 | let p = ins.options.position
1829 |
1830 | for (let i of Msg.instances) {
1831 | if (i.is_open()) {
1832 | let ip = i.options.position
1833 |
1834 | if (ip === p) {
1835 | if (mode === `vertical`) {
1836 | let sp
1837 |
1838 | if (ip.includes(`left`)) {
1839 | sp = i.stack_pos_left
1840 | }
1841 | else if (ip.includes(`right`)) {
1842 | sp = i.stack_pos_right
1843 | }
1844 |
1845 | if (sp !== undefined) {
1846 | if ((sp > i.options.edge_padding_x + 2) || (sp < i.options.edge_padding_x - 2)) {
1847 | continue
1848 | }
1849 | }
1850 |
1851 | if (p.includes(`top`)) {
1852 | if (i.stack_pos_top < ins.stack_pos_top) {
1853 | ins_below.push(i)
1854 | }
1855 | }
1856 | else if (p.includes(`bottom`)) {
1857 | if (i.stack_pos_bottom < ins.stack_pos_bottom) {
1858 | ins_below.push(i)
1859 | }
1860 | }
1861 | }
1862 | else if (mode === `horizontal`) {
1863 | if (p.includes(`left`)) {
1864 | if (i.stack_pos_left < ins.stack_pos_left) {
1865 | ins_below.push(i)
1866 | }
1867 | }
1868 | else if (p.includes(`right`)) {
1869 | if (i.stack_pos_right < ins.stack_pos_right) {
1870 | ins_below.push(i)
1871 | }
1872 | }
1873 | }
1874 | }
1875 | }
1876 | }
1877 |
1878 | if (mode === `vertical`) {
1879 | if (p.includes(`top`)) {
1880 | ins_below.sort(instance.stack_pos_top_sort2)
1881 | }
1882 | else if (p.includes(`bottom`)) {
1883 | ins_below.sort(instance.stack_pos_bottom_sort2)
1884 | }
1885 | }
1886 | else if (mode === `horizontal`) {
1887 | if (p.includes(`left`)) {
1888 | ins_below.sort(instance.stack_pos_left_sort2)
1889 | }
1890 | else if (p.includes(`right`)) {
1891 | ins_below.sort(instance.stack_pos_right_sort2)
1892 | }
1893 | }
1894 |
1895 | return ins_below[0]
1896 | }
1897 |
1898 | instance.check_vStack = () => {
1899 | if (instance.vStackable) {
1900 | let p = instance.options.position
1901 |
1902 | if (p.includes(`top`)) {
1903 | instance.stack_pos_top = -1000000
1904 | }
1905 | else if (p.includes(`bottom`)) {
1906 | instance.stack_pos_bottom = -1000000
1907 | }
1908 |
1909 | let highest = instance.highest_in_position(`vertical`)
1910 |
1911 | let new_top, new_bottom
1912 |
1913 | if ((highest !== undefined) && (highest !== instance)) {
1914 | if (p.includes(`top`)) {
1915 | new_top =
1916 | highest.stack_pos_top +
1917 | highest.stack_height +
1918 | instance.options.sideStack_padding
1919 |
1920 | instance.window.style.top = new_top + `px`
1921 | }
1922 | else if (p.includes(`bottom`)) {
1923 | new_bottom =
1924 | highest.stack_pos_bottom +
1925 | highest.stack_height +
1926 | instance.options.sideStack_padding
1927 |
1928 | instance.window.style.bottom = new_bottom + `px`
1929 | }
1930 | }
1931 | else if (p.includes(`top`)) {
1932 | new_top = instance.options.edge_padding_y
1933 | instance.window.style.top = new_top + `px`
1934 | }
1935 | else if (p.includes(`bottom`)) {
1936 | new_bottom = instance.options.edge_padding_y
1937 | instance.window.style.bottom = new_bottom + `px`
1938 | }
1939 |
1940 | if (p.includes(`top`)) {
1941 | instance.stack_pos_top = new_top
1942 | }
1943 | else if (p.includes(`bottom`)) {
1944 | instance.stack_pos_bottom = new_bottom
1945 | }
1946 | }
1947 | }
1948 |
1949 | instance.collapse_vStack = () => {
1950 | let p = instance.options.position
1951 | let ins_above = instance.above_in_position(instance, `vertical`)
1952 |
1953 | for (let i of ins_above) {
1954 | if (!i.options.sideStack_collapse || (i.options.sideStack !== `vertical`)) {
1955 | continue
1956 | }
1957 |
1958 | let below = instance.nextbelow_in_position(i, `vertical`)
1959 |
1960 | let new_top, new_bottom
1961 |
1962 | if (below !== undefined) {
1963 | if (p.includes(`top`)) {
1964 | new_top =
1965 | below.stack_pos_top +
1966 | below.window.offsetHeight +
1967 | i.options.sideStack_padding
1968 |
1969 | i.window.style.top = new_top + `px`
1970 | }
1971 | else if (p.includes(`bottom`)) {
1972 | new_bottom =
1973 | below.stack_pos_bottom +
1974 | below.window.offsetHeight +
1975 | i.options.sideStack_padding
1976 |
1977 | i.window.style.bottom = new_bottom + `px`
1978 | }
1979 | }
1980 | else if (p.includes(`top`)) {
1981 | new_top = i.options.edge_padding_y
1982 | i.window.style.top = new_top + `px`
1983 | }
1984 | else if (p.includes(`bottom`)) {
1985 | new_bottom = i.options.edge_padding_y
1986 | i.window.style.bottom = new_bottom + `px`
1987 | }
1988 |
1989 | if (p.includes(`top`)) {
1990 | i.stack_pos_top = new_top
1991 | }
1992 | else if (p.includes(`bottom`)) {
1993 | i.stack_pos_bottom = new_bottom
1994 | }
1995 | }
1996 | }
1997 |
1998 | instance.fix_vStack = () => {
1999 | let p = instance.options.position
2000 | let below = instance.lowest_in_position(`vertical`)
2001 | let new_top, new_bottom
2002 |
2003 | if (below !== undefined) {
2004 | let above = instance.above_in_position(below, `vertical`)
2005 |
2006 | for (let i of above) {
2007 | if (p.includes(`top`)) {
2008 | new_top =
2009 | below.stack_pos_top +
2010 | below.window.offsetHeight +
2011 | i.options.sideStack_padding
2012 |
2013 | i.window.style.top = new_top + `px`
2014 | i.stack_pos_top = new_top
2015 | }
2016 | else if (p.includes(`bottom`)) {
2017 | new_bottom =
2018 | below.stack_pos_bottom +
2019 | below.window.offsetHeight +
2020 | i.options.sideStack_padding
2021 |
2022 | i.window.style.bottom = new_bottom + `px`
2023 | i.stack_pos_bottom = new_bottom
2024 | }
2025 |
2026 | below = i
2027 | }
2028 | }
2029 | }
2030 |
2031 | instance.check_hStack = () => {
2032 | if (instance.hStackable) {
2033 | let p = instance.options.position
2034 |
2035 | if (p.includes(`left`)) {
2036 | instance.stack_pos_left = -1000000
2037 | }
2038 | else if (p.includes(`right`)) {
2039 | instance.stack_pos_right = -1000000
2040 | }
2041 |
2042 | let highest = instance.highest_in_position(`horizontal`)
2043 | let new_left, new_right
2044 |
2045 | if ((highest !== undefined) && (highest !== instance)) {
2046 | if (p.includes(`left`)) {
2047 | new_left =
2048 | highest.stack_pos_left +
2049 | highest.stack_width +
2050 | instance.options.sideStack_padding
2051 |
2052 | instance.window.style.left = new_left + `px`
2053 | }
2054 | else if (p.includes(`right`)) {
2055 | new_right =
2056 | highest.stack_pos_right +
2057 | highest.stack_width +
2058 | instance.options.sideStack_padding
2059 |
2060 | instance.window.style.right = new_right + `px`
2061 | }
2062 | }
2063 | else if (p.includes(`left`)) {
2064 | new_left = instance.options.edge_padding_x
2065 | instance.window.style.left = new_left + `px`
2066 | }
2067 | else if (p.includes(`right`)) {
2068 | new_right = instance.options.edge_padding_x
2069 | instance.window.style.right = new_right + `px`
2070 | }
2071 |
2072 | if (p.includes(`left`)) {
2073 | instance.stack_pos_left = new_left
2074 | }
2075 | else if (p.includes(`right`)) {
2076 | instance.stack_pos_right = new_right
2077 | }
2078 | }
2079 | }
2080 |
2081 | instance.collapse_hStack = () => {
2082 | let p = instance.options.position
2083 | let ins_above = instance.above_in_position(instance, `horizontal`)
2084 |
2085 | for (let i of ins_above) {
2086 | if (!i.options.sideStack_collapse || (i.options.sideStack !== `horizontal`)) {
2087 | continue
2088 | }
2089 |
2090 | let below = instance.nextbelow_in_position(i, `horizontal`)
2091 | let new_left, new_right
2092 |
2093 | if (below !== undefined) {
2094 | if (p.includes(`left`)) {
2095 | new_left =
2096 | below.stack_pos_left +
2097 | below.window.offsetWidth +
2098 | i.options.sideStack_padding
2099 |
2100 | i.window.style.left = new_left + `px`
2101 | }
2102 | else if (p.includes(`right`)) {
2103 | new_right =
2104 | below.stack_pos_right +
2105 | below.window.offsetWidth +
2106 | i.options.sideStack_padding
2107 |
2108 | i.window.style.right = new_right + `px`
2109 | }
2110 | }
2111 | else if (p.includes(`left`)) {
2112 | new_left = i.options.edge_padding_x
2113 | i.window.style.left = new_left + `px`
2114 | }
2115 | else if (p.includes(`right`)) {
2116 | new_right = i.options.edge_padding_x
2117 | i.window.style.right = new_right + `px`
2118 | }
2119 |
2120 | if (p.includes(`left`)) {
2121 | i.stack_pos_left = new_left
2122 | }
2123 | else if (p.includes(`right`)) {
2124 | i.stack_pos_right = new_right
2125 | }
2126 | }
2127 | }
2128 |
2129 | instance.fix_hStack = () => {
2130 | let p = instance.options.position
2131 |
2132 | let below = instance.lowest_in_position(`horizontal`)
2133 |
2134 | if (below !== undefined) {
2135 | let above = instance.above_in_position(below, `horizontal`)
2136 |
2137 | let new_left, new_right
2138 |
2139 | for (let i of above) {
2140 | if (p.includes(`left`)) {
2141 | new_left =
2142 | below.stack_pos_left +
2143 | below.window.offsetWidth +
2144 | i.options.sideStack_padding
2145 |
2146 | i.window.style.left = new_left + `px`
2147 | i.stack_pos_left = new_left
2148 | }
2149 | else if (p.includes(`right`)) {
2150 | new_right =
2151 | below.stack_pos_right +
2152 | below.window.offsetWidth +
2153 | i.options.sideStack_padding
2154 |
2155 | i.window.style.right = new_right + `px`
2156 | i.stack_pos_right = new_right
2157 | }
2158 |
2159 | below = i
2160 | }
2161 | }
2162 | }
2163 |
2164 | instance.fix_stacks = () => {
2165 | if (instance.is_open()) {
2166 | instance.fix_vStack()
2167 | instance.fix_hStack()
2168 | }
2169 | }
2170 |
2171 | instance.scroll_top = () => {
2172 | instance.content_container.scrollTop = 0
2173 | }
2174 |
2175 | instance.scroll_bottom = () => {
2176 | instance.content_container.scrollTop = instance.content_container.scrollHeight
2177 | }
2178 |
2179 | instance.set_default_positions = () => {
2180 | let p = instance.options.position
2181 | let edge_x = instance.options.edge_padding_x
2182 | let edge_y = instance.options.edge_padding_y
2183 |
2184 | if (p === `top`) {
2185 | instance.stack_pos_top = edge_y
2186 | instance.stack_pos_bottom = undefined
2187 | instance.stack_pos_left = undefined
2188 | instance.stack_pos_right = undefined
2189 | }
2190 | else if (p === `bottom`) {
2191 | instance.stack_pos_top = undefined
2192 | instance.stack_pos_bottom = edge_y
2193 | instance.stack_pos_left = undefined
2194 | instance.stack_pos_right = undefined
2195 | }
2196 | else if (p === `left`) {
2197 | instance.stack_pos_top = undefined
2198 | instance.stack_pos_bottom = undefined
2199 | instance.stack_pos_left = edge_x
2200 | instance.stack_pos_right = undefined
2201 | }
2202 | else if (p === `right`) {
2203 | instance.stack_pos_top = undefined
2204 | instance.stack_pos_bottom = undefined
2205 | instance.stack_pos_left = undefined
2206 | instance.stack_pos_right = edge_x
2207 | }
2208 | else if (p === `topleft`) {
2209 | instance.stack_pos_top = edge_y
2210 | instance.stack_pos_bottom = undefined
2211 | instance.stack_pos_left = edge_x
2212 | instance.stack_pos_right = undefined
2213 | }
2214 | else if (p === `topright`) {
2215 | instance.stack_pos_top = edge_y
2216 | instance.stack_pos_bottom = undefined
2217 | instance.stack_pos_left = undefined
2218 | instance.stack_pos_right = edge_x
2219 | }
2220 | else if (p === `bottomleft`) {
2221 | instance.stack_pos_top = undefined
2222 | instance.stack_pos_bottom = edge_y
2223 | instance.stack_pos_left = edge_x
2224 | instance.stack_pos_right = undefined
2225 | }
2226 | else if (p === `bottomright`) {
2227 | instance.stack_pos_top = undefined
2228 | instance.stack_pos_bottom = edge_y
2229 | instance.stack_pos_left = undefined
2230 | instance.stack_pos_right = edge_x
2231 | }
2232 | else {
2233 | instance.stack_pos_top = undefined
2234 | instance.stack_pos_bottom = undefined
2235 | instance.stack_pos_left = undefined
2236 | instance.stack_pos_right = undefined
2237 | }
2238 |
2239 | instance.stack_width = instance.window.offsetWidth
2240 | instance.stack_height = instance.window.offsetHeight
2241 | }
2242 |
2243 | instance.remove = () => {
2244 | instance.destroy()
2245 |
2246 | for (let i = 0; i < Msg.instances.length; i++) {
2247 | if (Msg.instances[i].options.id === instance.options.id) {
2248 | Msg.instances.splice(i, 1)
2249 | break
2250 | }
2251 | }
2252 | }
2253 |
2254 | instance.is_textbox = (element) => {
2255 | let tag_name = element.tagName.toLowerCase()
2256 | if (tag_name === `textarea`) { return true }
2257 |
2258 | if (tag_name !== `input`) { return false }
2259 |
2260 | let type = element.getAttribute(`type`)
2261 |
2262 | if (!type) {
2263 | return false
2264 | }
2265 |
2266 | let input_types = [
2267 | `text`,
2268 | `password`,
2269 | `number`,
2270 | `email`,
2271 | `tel`,
2272 | `url`,
2273 | `search`,
2274 | `date`,
2275 | `datetime`,
2276 | `datetime-local`,
2277 | `time`,
2278 | `month`,
2279 | `week`,
2280 | ]
2281 |
2282 | return input_types.includes(type.toLowerCase())
2283 | }
2284 |
2285 | if ((Msg.msg === undefined) && (instance.options.id !== `__internal_instance__`)) {
2286 | Msg.msg = Msg.factory({id: `__internal_instance__`})
2287 | let style = document.createElement(`style`)
2288 |
2289 | let css = `
2290 | .Msg-overflow-hidden {
2291 | overflow: hidden;
2292 | }
2293 |
2294 | .Msg-overlay {
2295 | background-color: rgba(0, 0, 0, 0.7);
2296 | }
2297 |
2298 | .Msg-window {
2299 | background-color: white;
2300 | color: #222222;
2301 | }
2302 |
2303 | .Msg-titlebar {
2304 | background-color: #c8c8c8;
2305 | color: #222222;
2306 | }
2307 |
2308 | .Msg-progressbar {
2309 | background-color: #c8c8c8;
2310 | }
2311 |
2312 | .Msg-window-inner-x:hover {
2313 | background-color: #cacaca !important;
2314 | }
2315 |
2316 | .Msg-window-floating-x {
2317 | background-color: #3a3a3a;
2318 | color: white;
2319 | }
2320 |
2321 | .Msg-window-floating-x:hover {
2322 | background-color: #6c6c6c !important;
2323 | border-color: #6c6c6c !important;
2324 | }
2325 |
2326 | .Msg-overlay-x {
2327 | color: white;
2328 | }
2329 |
2330 | .Msg-overlay-x:hover {
2331 | background-color: #686868 !important;
2332 | }
2333 |
2334 | .Msg-overlay-blue {
2335 | background-color: rgba(101, 107, 124, 0.7);
2336 | }
2337 |
2338 | .Msg-window-blue {
2339 | background-color: #4f84b8; color: white;
2340 | }
2341 |
2342 | .Msg-titlebar-blue {
2343 | background-color: #43729f; color: white;
2344 | }
2345 |
2346 | .Msg-progressbar-blue {
2347 | background-color: #43729f;
2348 | }
2349 |
2350 | .Msg-window-inner-x-blue:hover {
2351 | background-color: #476b8f !important;
2352 | }
2353 |
2354 | .Msg-overlay-x-blue {
2355 | color: white;
2356 | }
2357 |
2358 | .Msg-overlay-x-blue:hover {
2359 | background-color: #747484 !important
2360 | }
2361 |
2362 | .Msg-overlay-red {
2363 | background-color: rgba(104, 64, 64, 0.7);
2364 | }
2365 |
2366 | .Msg-window-red {
2367 | background-color: #ca4e4e; color: white;
2368 | }
2369 |
2370 | .Msg-titlebar-red {
2371 | background-color: #af3f3f; color: white;
2372 | }
2373 |
2374 | .Msg-progressbar-red {
2375 | background-color: #af3f3f;
2376 | }
2377 |
2378 | .Msg-window-inner-x-red:hover {
2379 | background-color: #9d4d4d !important;
2380 | }
2381 |
2382 | .Msg-overlay-x-red {
2383 | color: white;
2384 | }
2385 |
2386 | .Msg-overlay-x-red:hover {
2387 | background-color: #805e5e !important;
2388 | }
2389 |
2390 | .Msg-overlay-green {
2391 | background-color: rgba(121, 159, 133, 0.7);
2392 | }
2393 |
2394 | .Msg-window-green {
2395 | background-color: #58a564; color: white;
2396 | }
2397 |
2398 | .Msg-titlebar-green {
2399 | background-color: #52935c; color: white;
2400 | }
2401 |
2402 | .Msg-progressbar-green {
2403 | background-color: #52935c;
2404 | }
2405 |
2406 | .Msg-window-inner-x-green:hover {
2407 | background-color: #4e8456 !important;
2408 | }
2409 |
2410 | .Msg-overlay-x-green {
2411 | color: white;
2412 | }
2413 |
2414 | .Msg-overlay-x-green:hover {
2415 | background-color: #7c957c !important;
2416 | }
2417 |
2418 | .Msg-overlay-black {
2419 | background-color: rgba(121, 121, 121, 0.7);
2420 | }
2421 |
2422 | .Msg-window-black {
2423 | background-color: #1D1F21; color: white;
2424 | }
2425 |
2426 | .Msg-titlebar-black {
2427 | background-color: #3c3c3c; color: white;
2428 | }
2429 |
2430 | .Msg-progressbar-black {
2431 | background-color: #3c3c3c;
2432 | }
2433 |
2434 | .Msg-window-inner-x-black:hover {
2435 | background-color: #424242 !important;
2436 | }
2437 |
2438 | .Msg-overlay-x-black {
2439 | color: white;
2440 | }
2441 |
2442 | .Msg-overlay-x-black:hover{
2443 | background-color: #686868 !important;
2444 | }
2445 | `
2446 |
2447 | style.innerHTML = css
2448 | document.head.appendChild(style)
2449 |
2450 | Msg.ev(document, `keydown`, (e) => {
2451 | let highest = Msg.msg.highest_instance()
2452 | if (!highest) { return }
2453 |
2454 | if (e.key === `Escape`) {
2455 | let highest = Msg.msg.highest_instance()
2456 | if (!highest) { return }
2457 |
2458 | if (highest.options.clear_editables) {
2459 | let el = document.activeElement
2460 |
2461 | if (highest.is_textbox(el)) {
2462 | if (!el.readOnly && !el.disabled) {
2463 | if (el.value.trim() !== ``) {
2464 | if (highest.options.clear_editables_full) {
2465 | el.value = ``
2466 | }
2467 | else {
2468 | let split = el.value.trimEnd().split(` `)
2469 | let new_value = split.slice(0, -1).join(` `) + ` `
2470 |
2471 | if (new_value.trim() === ``) {
2472 | new_value = ``
2473 | }
2474 |
2475 | el.value = new_value
2476 | }
2477 |
2478 | let event = new Event(`input`, {
2479 | bubbles: true,
2480 | cancelable: true,
2481 | })
2482 |
2483 | el.dispatchEvent(event)
2484 |
2485 | return
2486 | }
2487 | }
2488 | }
2489 | }
2490 |
2491 | if (highest.options.close_on_escape) {
2492 | highest.close()
2493 | }
2494 | }
2495 | })
2496 | }
2497 |
2498 | if (instance.options.id !== `__internal_instance__`) {
2499 | Msg.instances.push(instance)
2500 | Msg.num_created += 1
2501 | }
2502 |
2503 | return instance
2504 | }
2505 |
2506 | Msg.instances = []
2507 |
2508 | try {
2509 | module.exports = Msg
2510 | }
2511 | catch (e) {
2512 | // Nothing
2513 | }
--------------------------------------------------------------------------------