Clean UI Dialog
This code allows you to add a dialog to your project. The dialog can be added with the cui-dialog html tag. And should have a name attribute in order to target the element to open/close it.
Basic usage
Include the following files to your project (as high as possible):
- /lib/cui-dialog-full.min.js
Bower
bower install cui-dialog
NPM
npm install cui-dialog
And use a dialog by adding the cui-dialog as followed:
HTML
<cui-dialog name="xxx"></cui-dialog>
Javascript
With cuiDialog API:
cuiDialog.open('xxx');
Or just by calling the open function on the domElement itself:
document.querySelector('cui-dialog[name=xxx]').open();
Features
The cui-dialog has several features which makes it a nice dialog for your projects. It is easy to use, simple to style/theme and is fully build in native Javascript (Ecmascript 5) without depencies. The features are divided in the following categories:
- API
- Direct Dom
- Events
API
If you want to use a centralized way to interaction with the cui-dialog you can use the global cuiDialog object. This global object has several functions which can be called by providing the name parameter. This means it will target the cui-dialog whith the corresponding name attribute.
Open
cuiDialog(name).open()
Adds an .__isOpen class to the cui-dialog domElement, which will display the dialog as open.
Close
cuiDialog(name).close()
Removes the .__isOpen class from the cui-dialog domElement, which will hide the dialog.
Toggle
cuiDialog(name).toggle()
Toggles the .__isOpen class on the cui-dialog domElement, which will hide/show the dialog.
Update content
cuiDialog(name).toggle(value)
Updates the content of the dialog.
Get content
cuiDialog(name).getContent()
Returns the content of the dialog.
Direct Dom
If you prefer to use domElements directly instead of the global API you can use the same function as described as above. In the following pseudocode
we assume that domElement is a domElement which you have gather by using something like document.querySelector('cui-dialog').
Open
domElement.open()
Adds an .__isOpen class to the cui-dialog domElement, which will display the dialog as open.
Close
domElement.close()
Removes the .__isOpen class from the cui-dialog domElement, which will hide the dialog.
Toggle
domElement.toggle()
Toggles the .__isOpen class on the cui-dialog domElement, which will hide/show the dialog.
Update content
domElement.updateContent(value)
Updates the content of the dialog.
Get content
domElement.getContent()
Returns the content of the dialog.
State (private)
domElement.state
A string which hold the value of the state the dialog is currently in
Initialized (private)
domElement.initialized
A boolean which is set to prevent a dialog from being initialized multiple times. This can occur when it takes more time to fully load the
document than it takes for the css animation to trigger the cuiDialogNodeInserted function.
Events
At the moment there is only 1 event and it is triggered on any state change.
Change dialog state
document.addEventListener("changeDialogState", function(event) {
console.log(event.detail.dialog);
});
event.detail.dialog This value refers to the domElement of the cui-dialog which state has changed