A simple and lightweight modal popup library for JS (Javascript). Sturgeon General's warning: "Smoke-pure may be hazardous to your health".
Inspired by https://github.com/hxgf/smoke.js. I wanted to get rid of the DOM ID reliance that smoke.js had. This also fixes a bug where the actual base elements are never deleted after use, only hidden.
I removed some features. Might add them in later in a different way. Features removed (possibly not an exhaustive list):
“Less smoke, more health.”
title.smoke.cancel_reference.Added the autoclose property, which is true by default.
If true, clicking any regular button that would normally close a dialog (.e.g.: “ok”, “cancel”) actually closes the dialog (detaches it / cleans up listeners). Otherwise, “dialog.close()” must be run manually.
Setting autoclose to false can be useful in constructing a more persistent multi-event modal.
The cleanup code, which disconnects observers and removes global key event listeners, is now called “cleanup”.
The cleanup code is now standardized into one function instead of separate functions per modal type – to keep track of global key event listeners, they are added to an array called obj.listener_list.
For long pages (where the heght exceeds the screen height), input boxes no longer jump to the top of the screen when focused, and the modal top position is set to the scrollTop of the modal’s parent.
Added an ok_reference attribute. If specified, this will clone that reference into the “OK” button.
Moved the “ok” and “cancel” functions (as well as callback_ok and callback_cancel) from the object to object.dialog.
Added a title attribute with the properties “text” and “close_button”. This creates some HTML (a clone of the close button followed by some text) and inserts it into a newly defined title element inside the dialog.
You can now add a smoke_window.window_opened () function and a smoke_window.window_closed () callback. These run after a modal window is finished being built (the end of the smoke.build function) or after a dialog is removed from the DOM.
You can now call smoke_window.ok () or smoke_window.cancel () to programatically run “ok” or “cancel” on a modal window.
Removed the document.smoke_pure_obj object in favor of wrapping the “cancel” and “ok” functions with the current object.
Added a mutation observer, which will activate the “destroy_listeners” function if the modal is removed from the DOM by some means outside the function. This can be turned off via a new option called “observe_mutation”.
The custom css attribute lets you add classnames to anything in the modal’s structure.
smoke.custom_css = {"button.ok": "my_ok_button_style"}
// OR
smoke.custom_css = {"buttons.ok": ["my_ok_button_style1", "my_ok_button_style2"]}
var alert_div = smoke.alert (“Hey there!”, callback, options)
Live example:
http://agamemnus.github.io/smoke-pure.js/example.htm
// Options:
smoke.ok = "Ok" // Text for "Ok" button.
smoke.ok_reference = undefined // Instead of text, clone the supplied element and apply the "Ok" button features to that clone.
smoke.cancel = "Cancel" // Text for "Cancel" button.
smoke.cancel_reference = undefined // Instead of text, clone the supplied element and apply the "Cancel" button features to that clone.
smoke.point_event = 'click' // Point event ("click", "touchstart", etc.)
smoke.parent = document.body // Where the smoke div attaches. Note that if this is undefined (because document.body hasn't been added yet), the build function attempts to define it as document.body when the build function is run --that is, when the smoke DOM object is created.
smoke.zindex = 10000 // Z-index of the smoke DOM object. This should be a high number.
smoke.reverse_buttons = false // If false, the "Ok" button appears before (left of) the "Cancel" button. If true, the "Cancel" button appears before the "Ok" button.
smoke.autofocus = true // If true, the input is automatically focused when the smoke DOM object is created.
smoke.autoexit = true // If true, clicking outside the smoke dialog (but inside the dialog_wrapper) detaches the smoke DOM object, cleans up event listeners, and runs the callback with a parameter of (false, evt).
smoke.autoclose = true // If true, clicking any regular button that would normally close a dialog (.e.g.: "ok", "cancel") actually closes the dialog (detaches it / cleans up listeners). Otherwise, "dialog.close()" must be run manually.
smoke.custom_css = {} // Custom classes for each object in the structure. E.G.: smoke.custom_css = {"button.ok": "my_ok_button_style"} or smoke.custom_css = {"buttons.ok": ["my_ok_button_style1", "my_ok_button_style2"]}
smoke.css_prefix = "smoke" // The CSS prefix for the classes used in the .build function.
smoke.value = undefined // The initial value to set the prompt input text to.
smoke.callback = undefined // Function to run after user input is sent.
smoke.observe_mutation = true // If true, attachess a mutation observer that will destroy the keyboard listeners when the element is removed from the DOM.
smoke.window_opened = undefined // Function that runs at the end of smoke.build. Is in the form of "function (dom_window_object, text, processed_params)".
smoke.window_closed = undefined // Function that runs after the object is removed from the DOM. Is in the form of "function (dom_window_object, text, processed_params)". Requires observe_mutation to be true for full functionality.
smoke.title = {} // Title element with the below options. Required in order to have a close button.
smoke.title.text = undefined // Title text. If you don't want title text, don't define this.
smoke.title.close = undefined // Text for a "close" button. If you don't want a close button in the title, don't define this.
smoke.title.close_reference = undefined // Instead of text, clone the supplied element and apply the "Cancel" button features to that clone.
// Example:
// var modal = smoke.alert("This is an alert.", callback, options)
//
// Property | CSS
// -----------------------------------|-------------------------------
// var modal (return value) | smoke-base
// modal.dialog_wrapper | smoke-dialog_wrapper
// modal.dialog | smoke-dialog
// modal.dialog.title_element | smoke-dialog-title
// modal.dialog.title_element.text | smoke-dialog-title-text
// modal.dialog.title_element.close | smoke-dialog-title-close
// modal.dialog.text | smoke-dialog-text
// modal.dialog.prompt | smoke-dialog-prompt
// modal.dialog.prompt.input | smoke-dialog-prompt-input
// modal.dialog.buttons | smoke-dialog-buttons
// modal.dialog.buttons.ok | smoke-dialog-buttons-ok
// modal.dialog.buttons.cancel | smoke-dialog-buttons-cancel
//
// Extras:
// modal.dialog.ok () // <-- programatically run "ok" on the object.
// modal.dialog.cancel () // <-- programatically run "cancel" on the object.
No problem. I’ll take it. (Edit: gittip doesn’t exist anymore, so just send me pallets of cash – you know where to find me.)