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;
}
});