bebraw
10/19/2010 - 6:29 AM

dialog.js

        var dialog = new Dialog({
            title: 'Clear Canvas',
            text: 'Are you sure you want to clear the canvas?',
            triggers: ['Yes', 'No'],
            onYes: function() {
                // clear the canvas now :)
            }
        });
            var currentName = 'foobar';

            var dialog = new Dialog({
                title: 'Rename Layer',
                fields: {'Name': currentName}, // fields shown within the dialog. infers it's a "text" input autom.
                triggers: ['OK', 'Cancel'],
                onOK: function(fields) { // note the field access
                    console.log(fields.name); // got a new name hopefully :)
                }
            });
                var dialog = new Dialog({
                    title: 'Remove Layer', // dialog title
                    text: 'Are you sure you want to remove the selected layer?', // text shown within the dialog
                    triggers: ['Yes', 'No'], // confirmation buttons shown at the bottom of the dialog
                    onYes: function() { // note that handler naming is defined based on triggers
                        ... // do some stuff here
                    }
                });

                dialog.show(); // shows the dialog. same thing with Lightbox really :)
var Dialog = new Class({
    include: Options,
    
    Options: {
        title: '',
        text: '',
        fields: {},
        triggers: [],
    },
    initialize: function(options) {
        this.setOptions(options);
    },
    show: function() {
        var lightbox = new Lightbox({showCloseButton: false});
        var $content = $E('div');

        lightbox.setTitle(this.options.title);

        this._initText($content);
        this._initFields($content);
        this._initTriggers(lightbox);

        lightbox.show($content);
    },
    _initText: function($parent) {
        if(this.options.text) {
            $E('div').text(this.options.text).insertTo($parent);
        }
    },
    _initFields: function($parent) {
        this._$fields = {};

        for(var name in this.options.fields) {
            var content = this.options.fields[name];

            if(isString(content)) {
                var $label = $E('label').text(name + ':');
                var $input = $E('input', {type: 'text', value: content});
                
                $input.insertTo($label);
                $label.insertTo($parent);

                $input.getValue = function() {
                    return this.get('value');
                };

                this._$fields[name] = $input;
            }
        }
    },
    _initTriggers: function(lightbox) {
        var scope = this;
        var i = 2;

        this.options.triggers.each(function(name) {
            var trigger = new Button(name);
            var triggerHandlerName = 'on' + name;

            if(triggerHandlerName in scope.options) {
                var triggerHandler = scope.options[triggerHandlerName];

                var handler = function() {
                    var fields = scope._getFields();

                    triggerHandler(fields);
                    lightbox.hide();
                };

                trigger.on('click', handler);
            }
            else {
                trigger.on('click', function() {
                    lightbox.hide();
                });
            }

            var $par = lightbox.find('.rui-lightbox-navigation')[0];

            trigger.element.setStyle('left', i + 'em');
            trigger.insertTo($par);

            i += 3;
        });
    },
    _getFields: function() {
        var ret = {};

        for(var name in this._$fields) {
            var $field = this._$fields[name];
            
            ret[name.toLowerCase()] = $field.getValue();
        }

        return ret;
    }
});