4imprint Style Guide JavaScript Library : Dialogs

Dialogs

Dialog Javascript

Methods

init()

const exampleDialog = new Dialog4i();
const dialogContent = '<div class="spinner" role="alert" aria-busy="true" aria-atomic="true" aria-label="Loading example dialog, please wait"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div>';
exampleDialog.Init({
	triggerElements: [].slice.call(document.querySelectorAll(".buttonToTriggerDialog")),
	dialogClass: "mediumDialog", 
	title: "Loading Example Dialog", 
	content: dialogContent, 
	onOpen: open,
	onClose: close,
	arrows: {
		left: '<button id="scrollLeft" type="button" class="scrollLeft whiteLink noLine pointer"><svg class="rotate270 show" height="40px" width="40px" focusable="false" role="img" aria-label="Scroll to previous"><title>Scroll to previous</title><use xlink:href="#svgIcon-arrowLine"></use></svg></button>',
		right: '<button id="scrollRight" type="button" class="scrollRight whiteLink noLine pointer"><svg class="rotate90 show" height="40px" width="40px" focusable="false" role="img" aria-label="Scroll to next"><title>Scroll to next</title><use xlink:href="#svgIcon-arrowLine"></use></svg></button>'
	},
	keyEvents: LeftRightArrow
});

init() (module)

const exampleDialogs = await SetUpDialogs();
async function SetUpDialogs(){ 
	const { default: Dialog4i } = await import( './../library/dialog4i2022.js?v=1');
	const dialogContent = '<div class="spinner" role="alert" aria-busy="true" aria-atomic="true" aria-label="Loading example dialog, please wait"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div>';
	return new Dialog4i({
		triggerElements: [].slice.call(document.querySelectorAll(".buttonToTriggerDialog")),
		dialogClass: "mediumDialog", 
		title: "Loading Example Dialog", 
		content: dialogContent, 
		onOpen: open,
		onClose: close,
		arrows: {
			left: '<button id="scrollLeft" type="button" class="scrollLeft whiteLink noLine pointer"><svg class="rotate270 show" height="40px" width="40px" focusable="false" role="img" aria-label="Scroll to previous"><title>Scroll to previous</title><use xlink:href="#svgIcon-arrowLine"></use></svg></button>',
			right: '<button id="scrollRight" type="button" class="scrollRight whiteLink noLine pointer"><svg class="rotate90 show" height="40px" width="40px" focusable="false" role="img" aria-label="Scroll to next"><title>Scroll to next</title><use xlink:href="#svgIcon-arrowLine"></use></svg></button>'
		},
		keyEvents: LeftRightArrow
	});	
}

BindTriggerElements()

Binds new trigger element events.

exampleDialog.BindTriggerElements(btns);

BindCloseElements()

Binds any elements within the content with class close4iDialog to trigger the close() method.

exampleDialog.BindCloseElements();

Open()

Only use if absolutely needed.

exampleDialog.Open();

Close()

Only use if absolutely needed.

exampleDialog.Close();

HideCloseBtn()

Call on open function if hiding the close button in header is needed.

exampleDialog.HideCloseBtn();

ShowCloseBtn()

Makes the close button in the header visible again after hiding it.

exampleDialog.ShowCloseBtn();

Options

Option	Required	Type	Description
triggerElements	Required	Node(s) or [ ]	An array of all elements that open the dialog or an empty array.
dialogClass	Required	"smallDialog" "mediumDialog" "largeDialog" "xLDialog" "fullDialog"	Setting the width of your dialog: smallDialog = 20rem mediumDialog = 30rem largeDialog = 40rem xLDialog = 50rem fullDialog = 95%
title	Required	String or HTML	The heading of the dialog (can be updated later).
content	Required	HTML	The initial HTML for the content of the dialog.
arrows	Optional	"left" "right" HTML	Can specify both "left" & "right" arrow HTML.
onOpen	Optional	Function	Fired when the dialog is opened (great for updating the content HTML).
onClose	Optional	Function	Fired on close only when an element with close4iDialog class is clicked.
keyEvents	Optional	Function	Fired on keydown when the dialog is open (good to use for left/right arrows).

Notes

See Dialog Component.

Resources

Sass File(s)	/sass/components/_dialog4i.scss
JS File(s)	/library/dialog4i2022.js or /modules/library/dialog4i2022.js
JS Functions	See Above
Locale Keys	None

Accessibility

None at this time.