ui/modal-builder

Note this module needs to be initialized before dialogs!

• ui/modal-builder
  • static
    • .initializer
    • .setDefaults(options)
    • .init()
    • .buildModal(content, options)
  • inner
    • ~separateDialogOptions(config) ⇒ Object
    • ~DefaultModalOptions ⇒ string | string | string

ui/modal-builder.initializer

Modal Builder Component Initializer

Kind: static constant of ui/modal-builder

ui/modal-builder.setDefaults(options)

Kind: static method of ui/modal-builder

Param	Type	Description
options	Object	Change options used as default for dialogs, can then be overridden by data attribute settings on element

ui/modal-builder.init()

Initialize everything in document

• This will only initialize elements once, it is safe to call on page changes

Kind: static method of ui/modal-builder

ui/modal-builder.buildModal(content, options)

Kind: static method of ui/modal-builder

Param	Type	Description
content	Node	Content element of the dialog (what is inserted into the body)
options	Object	Options for built dialog (see defaults)

ui/modal-builder~separateDialogOptions(config) ⇒ Object

Returns JSON string to embed in data-ulu-dialog for dialog handling

Kind: inner method of ui/modal-builder

Param	Type	Description
config	Object	Config object to pull dialog specific settings from

ui/modal-builder~DefaultModalOptions ⇒ string | string | string

Default builder options (extends dialog defaults, watch name collisions)

• Decided to extend defaults so the interface in HTML is singular
• This is sometimes easier to template (merging and serializing options in twig for example)

Kind: inner typedef of ui/modal-builder
Returns: string - The HTML string for the close icon.string - The HTML string for the resizer icon.string - Markup for the modal.

Param	Type	Description
template.id	string	The ID for the new modal.
template.config	DefaultModalOptions	The resolved modal options.

Properties

Name	Type	Description
title	string | null	The title of the modal. Defaults to null.
titleIcon	string | null	The class name for an icon to display in the title. Defaults to null.
titleClass	string	Extra class/classes to add to title
labelledby	string	Set the aria-labelledby attribute to a specific title within the modal, to connect to a custom title implementation, if using built in title this will be set automatically
describedby	string	Set the aria-describedby on the dialog, elements id, to tie a specific part of the content to be the accessible description
nonModal	boolean	If true, the modal will not prevent interaction with elements behind it. Defaults to false.
documentEnd	boolean	If true, the modal will be appended to the end of the document.body. Defaults to true.
allowResize	boolean	If true, the modal will be resizable. Defaults to false.
position	"center" | "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right"	The initial position of the modal. Defaults to "center".
bodyFills	boolean	If true, the modal body will fill the available space. Defaults to false.
noBackdrop	boolean	If true, no backdrop will be displayed behind the modal. Defaults to false.
size	"default" | "small" | "large" | "fullscreen"	The size of the modal. Defaults to "default".
print	boolean	If true, the modal content will be optimized for printing. Defaults to false.
noMinHeight	boolean	If true, the modal will not have a minimum height. Defaults to false.
class	string	Additional CSS class(es) to add to the modal. Defaults to "".
baseClass	string	The base CSS class for the modal elements. Defaults to "modal".
classClose	string	The class name for the close button. Defaults to 'button button--icon' styling.
classCloseIcon	string	The class name for the close icon. Defaults to 'button__icon' styling. Uses the wrapped setting string.
classResizerIcon	string	The class name for the resizer icon. Uses the wrapped setting string.
footerElement	string | Node	Element or selector to use as the footer (will be moved to dialog on creation, used for DOM API)
footerHtml	string | Node	Markup to use in the footer
debug	boolean	Enables debug logging. Defaults to false.
templateCloseIcon	function	A function that returns the HTML for the close icon.
templateCloseIcon.config	function	The resolved modal configuration object.
templateResizerIcon	function	A function that returns the HTML for the resizer icon.
templateResizerIcon.config	function	The resolved modal configuration object.
template	function	The default modal template function.