@coffeekraken/dialog-webcomponent

Coffeekraken dialog webcomponent

Powerful, fully featured and easy to use dialog component

Features

1. Fully customizable
2. Support multiple content source (inline content / DOM element / Ajax request)
3. Support modal option
4. And more...

Table of content

1. Install
2. Get Started
3. Dialog types
4. Javascript API
5. Styling classes
6. Coffeekraken

Install

npm install @coffeekraken/dialog-webcomponent --save

Get Started

First, import the component into your javascript file like so:

import DialogWebcomponent from '@coffeekraken/dialog-webcomponent'

Then simply use it inside your html like so:

<!-- inline content -->
<ck-dialog id="my-cool-dialog">
	<template><!-- optional template tag -->
		<h1>Hello World</h1>
		<p>Phasellus nec dictum arcu, finibus semper tellus. Aliquam mattis dictum.</p>
	</template>
</ck-dialog>
<a href="#my-cool-dialog">Click to open the dialog</a>

<!-- automatically opened dialog -->
<ck-dialog opened content="data/my-cool-dialog.html"></ck-dialog>

Dialog types

This webcomponent offers you multiple way to instanciate a dialog. Here's the list:

Dom component

Open a dialog using a dom component present in the page. This dom element can be a template tag too.

<a href="#my-cool-dialog" class="btn btn--primary">Open dialog</a>
<div class="hidden">
    <ck-dialog id="my-cool-dialog">
        <h1 class="h1 m-b">
            My cool dialog
        </h1>
        <p class="p">
            Vivamus vestibulum ultrices eros nec bibendum. In sit amet ultrices mi. Etiam nunc ante, efficitur ac aliquam eget, iaculis quis massa. Duis quis molestie orci. Sed ultricies sem ante, in.
        </p>
    </ck-dialog>
</div>

Iframe

Open a content inside an iframe. Usefull to load for example youtube/vimeo/etc... content

<ck-dialog iframe>
    <a class="btn btn--primary" href="/data/iframe-demo.html">
        Open my content in an iframe dialog
    </a>
</ck-dialog>

Modal

Open a dialog in modal mode. This mean that the user cannot close the dialog by clicking outside or by the escape key and your in full control of it's state

<a href="#my-cool-dialog" class="btn btn--primary">Open dialog</a>
<div class="hidden">
    <ck-dialog id="my-cool-dialog" modal>
        <h1 class="h1 m-b">
            Hello world
        </h1>
        <p class="p m-b">
            Vivamus vestibulum ultrices eros nec bibendum. In sit amet ultrices mi. Etiam nunc ante, efficitur ac aliquam eget, iaculis quis massa. Duis quis molestie orci. Sed ultricies sem ante, in.
        </p>
        <a class="btn btn--secondary" ck-dialog-ok>
            Close dialog
        </a>
    </ck-dialog>
</div>

Ajax content

Open a dialog and load his content through an ajax request

<ck-dialog>
    <a href="/data/ajax-demo.html" class="btn btn--primary">Open ajax dialog</a>
</ck-dialog>

Programatical dialog

Open a dialog fully programatically

import strToHtml from '@coffeekraken/sugar/js/string/strToHtml'
import DialogWebcomponent from '@coffeekraken/dialog-webcomponent'
const myDialog = DialogWebcomponent.open(strToHtml('<p>Hello World</p>'), {
	modal: true
})
setTimeout(() => {
	myDialog.close()
}, 5000)

Coffeekraken

We are a young collective of front-end creative developers with one goal in mind. Build tools to make every team working day life better. This is our first and only concern. All our tools are build around that purpose. All what we provide are some cool tools that you can use the way you want. These tools features cover a large scope of the front-end workflow (styleguide generation, colors/fonts management, etc...). You can use only the parts that you need and let the rest aside...