Coffeekraken.io 0.0.1

SDialogComponent

Extends SWebComponent

Provide a simple to use dialog component that support:

  • Modal
  • HTMLElement as content
  • Url to load by ajax as content
  • HTML string as content

Example

    <!-- simple modal -->
<s-dialog id="my-cool-dialog">
    <!-- dialog content here... -->
</s-dialog>
<a href="#my-cool-dialog" title="open my cool dialog">Open dialog</a>

<!-- wrap an "<a>" tag with a dialog -->
<s-dialog>
    <a href="/content/my-cool-dialog.html" title="open my dialog">
     Open my dialog
 </a>
</s-dialog>

Author : Olivier Bossel olivier.bossel@gmail.com

Examples

Here's some usage examples.

Dialog

Create a simple dialog

Example

    <s-dialog id="my-cool-dialog">
    <h1 class="h1 m-b">
        Hello World
    </h1>
    <p class="p">
     Pellentesque vulputate fermentum leo, non efficitur risus fermentum at. Fusce maximus volutpat ipsum in tristique. Etiam neque massa, lobortis et libero et, hendrerit blandit risus. Praesent ultrices condimentum magna quis.
    </p>
</s-dialog>
<a href="#my-cool-dialog" title="open my cool dialog">Open dialog</a>

Author : Olivier Bossel olivier.bossel@gmail.com

Attributes

Here's the list of available attribute to set on the element.

for

Specify the element that will trigger the dialog

Type : { String }

Default : null

content

Specify the content to use for the dialog Can be an html id selector like "#myCoolContent" an url to load by through ajax like "myCoolContent.html" a mix like "myCoolContent.html#myCoolContent" or nothing. In this case, the element itself will be the dialog content

Type : { String }

Default : null

id

The dialog id that can be used to open the dialog through the url hash

Type : { String }

Default : null

Specify if the dialog is a modal or not

Type : { Boolean }

Default : false

onOpen

Callback when the modal opens

Type : { Function }

Default : null

opened

Specify if the modal is opened or not

Type : { Boolean }

Default : false

openOn

Set when to open the dialog This can be 'click'|'hover'|'init'

Type : { String }

Default : click

openTimeout

Set an open timeout to use in conjunction with the openOn="init"

Type : { Number }

Default : 0

Methods

open

Open the dialog

Name Type Description Status Default
content { String , HTMLElement } The content for the modal. Can be an HTMLElement, an url to load by ajax or an HTML string optional null

Default : null) {

close

Close

Name Type Description Status Default
force { Boolean } Bypass the modal property or not required

Default : true) {

ok

Validate the modal

Name Type Description Status Default
value { Mixed } The value to pass the the promise required

Default : null) {

cancel

Cancel the modal by rejecting the promise

Name Type Description Status Default
value { Mixed } The value to pass the the promise required

Default : null) {

isOpened

Check if is opened

Return { Boolean } If is opened or not