dzonzbonz / proto-dialog-js

JS Proto Dialog - jQuery

proto-dialog-js

Table of Contents

• Usage
• Options
  • Actions
  • onAction
  • onInit
  • onOpen
  • onOpened
  • onClose
  • onClosed
  • onResize
• Methods
  • open
  • close
  • settings
• Advanced usage
  • Dialog
  • Controller

Usage

<link rel="stylesheet" type="text/css" href="proto-dialog.css"/>

<!-- ... -->

<script type="text/javascript" src="jquery.proto-dialog.js"></script>

<!-- ... -->

<div id="proto-dialog">
    <div id="proto-dialog-header"></div>
    <div id="proto-dialog-content"></div>
    <div id="proto-dialog-footer"></div>
<!-- ... -->
</div>

Add the UI.Layout module as a dependency to your application module:

$('#proto-dialog').protoDialog({ ... });

Options

var protoDialogOptions = {
    actions: {
    },
    animation: {
        'open': false,
        'close': false
    },
    onInit: function($dialog) {
    },
    onOpen: function($dialog) {
    },
    onOpened: function($dialog) {
    },
    onClose: function($dialog) {
    },
    onClosed: function($dialog) {
    },
    onResize: function($dialog) {
    },
    onAction: function(_action, $dialog) {
    }
};

actions

Type: Object Default: {}

Define buttons that you want on action bar

var actions = {
    'actionOne': {
        'label': 'button label',
        'class': 'html classes',
        'on': {
            'click': function(event, $dialog) {
                $(this).html('custom - custom on click event');
            },
            'mouseover': function(event, $dialog) {
                $(this).html('custom - custom on mouse over event');
            }
        }
    },
    'actionTwo': {
        'label': 'button label',
        'class': 'html classes'
    },
    'actionTree': {
        'label': 'button label',
        'class': 'html classes'
    }
};

onAction

Type: Function Default: function ($_action, _event, $dialog) {}

This method is called each time when an action button is clicked. If you want to have full control on action button events use the on key in actions.

var onAction = function (action, _event, $dialog) {
    switch(_action) {
        case 'actionTwo':
            /* Some specific action for button actionTwo */
            break;
        default:
            $(this).html(_action + ' - auto click event');
            break;
    }
};

onInit

Type: Function Default: function ($dialog) {}

This method is called when the dialog is initialized for the first time, and it is called one time only from the widget.

var onInit: function ($dialog) {
    var protoDialogContent = $dialog.find('.proto-dialog-content');
    var dialogFooter = $dialog.find('#proto-dialog-footer');
    var dialogHeader = $(this).find('#proto-dialog-header');
};

onOpen

Type: Function Default: function ($dialog) {}

This method is called each time before the dialog is to be opened.

onOpened

Type: Function Default: function ($dialog) {}

This method is called each time after the dialog has been opened.

onClose

Type: Function Default: function ($dialog) {}

This method is called each time before the dialog is to be closed.

onClosed

Type: Function Default: function ($dialog) {}

This method is called each time after the dialog has been closed.

onResize

Type: Function Default: function ($dialog) {}

This method is called each time when the screen size changes.

Methods

Take a look at the list of methods to control the dialog.

open

This method is called to open a dialog manually.

$('#proto-dialog').protoDialog('open', {
    ['title': ... ]
    [, 'content': ... ]
});

close

This method is called to close a dialog manually.

$('#proto-dialog').protoDialog('close');

settings

This method is called when you want to override settings.

$('#proto-dialog').protoDialog('settings', { ... });

Advanced usage

The advanced usage is about taking full control of the dialog.

Dialog

Take a look at the dialog HTML structure in order to have a better view, and push your ideas further. When ever you have a $dialog variable in a on*** function, this will be your $('.proto-dialog-overlay') object. The <!-- Dialog content --> is replaced by your target object that the widget is applied to.

<div class="proto-dialog-overlay">
    <div class="proto-dialog-window">
        <div class="proto-dialog-inner">
            <button type="button" class="proto-dialog-close proto-dialog-button"></button>
            <div class="proto-dialog-title">
                <h3><!-- Title --></h3>
            </div>
            <div class="proto-dialog-content">
                <!-- Dialog content -->
            </div>
            <div class="proto-dialog-actions">
                <!-- Action buttons -->
            </div>
        </div>
    </div>
</div>

Controller

var controllerInterface = {
    /**
     * Closes the dialog
     */
    'close': function () {},
    /**
     * Openes the dialog
     */
    'open': function () {},
    /**
     * Is dialog opened
     */
    'isOpened': function () {},
    /**
     * Sets the title
     */
    'setTitle': function () {},
    /**
     * Sets the content
     */
    'setContent': function () {},
    /**
     * Defines new settings
     */
    'setSettings': function () {},
    /**
     * Get current settings
     */
    'getSettings': function () {},
};

/* Get dialog controller instance */
var _data = $('#proto-dialog').data('protoDialog');

// If the widget is initialized
if (_data) {
    var _controller = _data['controller'];
    var _settings = _data['settings'];
    var $target = _data['target']; // === $('#proto-dialog')
}