changes to dialog api
This commit is contained in:
rolux
parent
ee6c90433c
commit
3d136c4657
3 changed files with 120 additions and 79 deletions
|
|
@ -378,9 +378,9 @@ OxForm
|
|||
margin-top: 0;
|
||||
}
|
||||
.OxFormMessage {
|
||||
width: 100%;
|
||||
//width: 100%;
|
||||
height: 10px;
|
||||
margin-top: 2px;
|
||||
margin: 2px 8px 0 0;
|
||||
text-align: right;
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -1129,6 +1129,7 @@ Panels
|
|||
right: 0px;
|
||||
width: 14px;
|
||||
height: 16px;
|
||||
padding-top: 1px;
|
||||
border-width: 0 0 0 1px;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
font-size: 11px;
|
||||
|
|
|
|||
|
|
@ -252,7 +252,7 @@ Menus
|
|||
background: rgba(64, 64, 64, 0.96);
|
||||
}
|
||||
.OxThemeModern .OxMenu .OxItem.OxDisabled .OxCell {
|
||||
color: rgb(80, 80, 80);
|
||||
color: rgb(128, 128, 128);
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -103,6 +103,7 @@ requires
|
|||
$window, $document, $body;
|
||||
|
||||
$(function() {
|
||||
// fixme: don't use globals!
|
||||
$window = $(window),
|
||||
$document = $(document),
|
||||
$body = $('body'),
|
||||
|
|
@ -704,17 +705,17 @@ requires
|
|||
$dialog = new Ox.Dialog({
|
||||
title: 'Application Error',
|
||||
buttons: [
|
||||
{
|
||||
title: 'Close',
|
||||
click: function() {
|
||||
$dialog.close();
|
||||
}
|
||||
}
|
||||
new Ox.Button({
|
||||
title: 'Close'
|
||||
})
|
||||
.bindEvent({
|
||||
click: $dialog.close
|
||||
})
|
||||
],
|
||||
content: $iframe,
|
||||
width: 800,
|
||||
height: 400
|
||||
})
|
||||
.append($iframe)
|
||||
.open(),
|
||||
iframe = $iframe[0].contentDocument || $iframe[0].contentWindow.document;
|
||||
iframe.open();
|
||||
|
|
@ -744,27 +745,29 @@ requires
|
|||
var $dialog = new Ox.Dialog({
|
||||
title: 'Application Error',
|
||||
buttons: [
|
||||
{
|
||||
title: 'Details',
|
||||
new Ox.Button({
|
||||
title: 'Details'
|
||||
})
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
$dialog.close(function() {
|
||||
debug(request);
|
||||
});
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'Close',
|
||||
}),
|
||||
new Ox.Button({
|
||||
title: 'Close'
|
||||
})
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
$dialog.close(function() {
|
||||
callback(data);
|
||||
});
|
||||
$dialog.close();
|
||||
}
|
||||
}
|
||||
})
|
||||
],
|
||||
content: 'Sorry, we have encountered an application error while handling your request. To help us find out what went wrong, you may want to report this error to an administrator. Otherwise, please try again later.',
|
||||
width: 400,
|
||||
height: 200
|
||||
})
|
||||
.append('Sorry, we have encountered an application error while handling your request. To help us find out what went wrong, you may want to report this error to an administrator. Otherwise, please try again later.')
|
||||
.open();
|
||||
// fixme: change this to Send / Don't Send
|
||||
Ox.print({
|
||||
|
|
@ -908,7 +911,7 @@ requires
|
|||
// if an ox object was passed
|
||||
// then pass its $element instead
|
||||
// so we can do oxObj.jqFn(oxObj)
|
||||
if (arg.ox) {
|
||||
if (arg && arg.ox) {
|
||||
args[i] = arg.$element;
|
||||
}
|
||||
/*
|
||||
|
|
@ -1025,9 +1028,11 @@ requires
|
|||
and self.options.bar,
|
||||
returns that
|
||||
*/
|
||||
var length = arguments.length,
|
||||
var args,
|
||||
id = self.options && self.options.id,
|
||||
args, ret;
|
||||
length = arguments.length,
|
||||
oldOptions,
|
||||
ret;
|
||||
if (length == 0) {
|
||||
// options()
|
||||
ret = self.options || options; // this is silly. make sure self.options get populated with options
|
||||
|
|
@ -1038,15 +1043,13 @@ requires
|
|||
// options (str, val) or options({str: val, ...})
|
||||
// translate (str, val) to ({str: val})
|
||||
args = Ox.makeObject.apply(that, arguments);
|
||||
/*
|
||||
options = self.options;
|
||||
*/
|
||||
oldOptions = $.extend({}, self.options);
|
||||
// if options have not been set, extend defaults,
|
||||
// otherwise, extend options
|
||||
self.options = $.extend(self.options || self.defaults, args);
|
||||
$.each(args, function(key, value) {
|
||||
key == 'id' && id && Ox.Event.changeId(id, value);
|
||||
self.onChange(key, value);
|
||||
value !== oldOptions[key] && self.onChange(key, value);
|
||||
/*
|
||||
fixme: why does this not work?
|
||||
Ox.print('options', options, key, value)
|
||||
|
|
@ -1567,13 +1570,13 @@ requires
|
|||
Ox.Dialog = function(options, self) {
|
||||
|
||||
// fixme: dialog should be derived from a generic draggable
|
||||
// fixme: pass button elements directly
|
||||
// fixme: buttons should have a close attribute, or the dialog a close id
|
||||
var self = self || {},
|
||||
that = new Ox.Element('div', self)
|
||||
.defaults({
|
||||
title: '',
|
||||
buttons: [],
|
||||
content: null,
|
||||
height: 216,
|
||||
minHeight: 144,
|
||||
minWidth: 256,
|
||||
|
|
@ -1595,10 +1598,6 @@ requires
|
|||
initialHeight: self.options.height
|
||||
})
|
||||
|
||||
if (!Ox.isArray(self.options.buttons[0])) {
|
||||
self.options.buttons = [[], self.options.buttons];
|
||||
}
|
||||
|
||||
that.$titlebar = new Ox.Bar({
|
||||
size: 'medium'
|
||||
})
|
||||
|
|
@ -1620,43 +1619,13 @@ requires
|
|||
padding: self.options.padding + 'px',
|
||||
overflow: 'auto'
|
||||
})
|
||||
.append(self.options.content)
|
||||
.appendTo(that);
|
||||
|
||||
that.$buttonsbar = new Ox.Bar({})
|
||||
.addClass('OxButtonsBar')
|
||||
.appendTo(that);
|
||||
|
||||
that.$buttons = [];
|
||||
$.each(self.options.buttons[0], function(i, button) {
|
||||
that.$buttons[i] = new Ox.Button({
|
||||
disabled: button.disabled || false,
|
||||
size: 'medium',
|
||||
title: button.title
|
||||
})
|
||||
.addClass('OxLeft')
|
||||
.click(button.click) // fixme: rather use event?
|
||||
.appendTo(that.$buttonsbar);
|
||||
});
|
||||
|
||||
if (self.options.resizable) {
|
||||
that.$resize = new Ox.Element()
|
||||
.addClass('OxResize')
|
||||
.mousedown(resize)
|
||||
.dblclick(reset)
|
||||
.appendTo(that.$buttonsbar);
|
||||
}
|
||||
|
||||
$.each(self.options.buttons[1].reverse(), function(i, button) {
|
||||
that.$buttons[that.$buttons.length] = new Ox.Button({
|
||||
disabled: button.disabled || false,
|
||||
id: button.id,
|
||||
size: 'medium',
|
||||
title: button.title
|
||||
})
|
||||
.addClass('OxRight')
|
||||
.click(button.click) // fixme: rather use event?
|
||||
.appendTo(that.$buttonsbar);
|
||||
});
|
||||
loadButtons();
|
||||
|
||||
that.$buttons[0].focus();
|
||||
|
||||
|
|
@ -1718,6 +1687,41 @@ requires
|
|||
return ret;
|
||||
}
|
||||
|
||||
function loadButtons() {
|
||||
if (that.$buttons) {
|
||||
that.$buttons.forEach(function($button) {
|
||||
$button.remove();
|
||||
});
|
||||
that.$resize.remove();
|
||||
//that.$buttonsbar.empty();
|
||||
}
|
||||
that.$buttons = [];
|
||||
if (!Ox.isArray(self.options.buttons[0])) {
|
||||
self.options.buttons = [[], self.options.buttons];
|
||||
}
|
||||
Ox.print('--- one', self.options.buttons[0]);
|
||||
$.each(self.options.buttons[0], function(i, button) {
|
||||
// Ox.print('---', button, self.options.buttons)
|
||||
that.$buttons[i] = button
|
||||
.addClass('OxLeft')
|
||||
.appendTo(that.$buttonsbar);
|
||||
});
|
||||
if (self.options.resizable) {
|
||||
that.$resize = new Ox.Element()
|
||||
.addClass('OxResize')
|
||||
.mousedown(resize)
|
||||
.dblclick(reset)
|
||||
.appendTo(that.$buttonsbar);
|
||||
}
|
||||
Ox.print('--- two', self.options.buttons[1]);
|
||||
$.each(self.options.buttons[1].reverse(), function(i, button) {
|
||||
//Ox.print('---', button, self.options.buttons)
|
||||
that.$buttons[that.$buttons.length] = button
|
||||
.addClass('OxRight')
|
||||
.appendTo(that.$buttonsbar);
|
||||
});
|
||||
}
|
||||
|
||||
function mousedownLayer() {
|
||||
that.$layer.stop().animate({
|
||||
opacity: 0.5
|
||||
|
|
@ -1784,7 +1788,21 @@ requires
|
|||
}
|
||||
|
||||
self.onChange = function(key, value) {
|
||||
if (key == 'height' || key == 'width') {
|
||||
if (key == 'buttons') {
|
||||
loadButtons();
|
||||
/*
|
||||
that.$buttonsbar.children().animate({
|
||||
opacity: 0
|
||||
}, 100, function() {
|
||||
loadButtons();
|
||||
that.$buttonsbar.children().animate({
|
||||
opacity: 1
|
||||
}, 100);
|
||||
});
|
||||
*/
|
||||
} else if (key == 'content') {
|
||||
that.$content.html(value);
|
||||
} else if (key == 'height' || key == 'width') {
|
||||
that.animate({
|
||||
height: self.options.height + 'px',
|
||||
width: self.options.width + 'px'
|
||||
|
|
@ -1801,11 +1819,6 @@ requires
|
|||
}
|
||||
}
|
||||
|
||||
that.append = function($element) {
|
||||
that.$content.append($element);
|
||||
return that;
|
||||
};
|
||||
|
||||
that.center = function() {
|
||||
|
||||
};
|
||||
|
|
@ -1823,6 +1836,11 @@ requires
|
|||
return that;
|
||||
};
|
||||
|
||||
that.content = function($element) {
|
||||
that.$content.empty().append($element);
|
||||
return that;
|
||||
}
|
||||
|
||||
that.disable = function() {
|
||||
// to be used on submit of form, like login
|
||||
that.$layer.addClass('OxFront');
|
||||
|
|
@ -1918,7 +1936,8 @@ requires
|
|||
items: [],
|
||||
submit: null
|
||||
})
|
||||
.options(options || {}); // fixme: the || {} can be done once, in the options function
|
||||
.options(options || {}) // fixme: the || {} can be done once, in the options function
|
||||
.addClass('OxForm');
|
||||
|
||||
$.extend(self, {
|
||||
$items: [],
|
||||
|
|
@ -1938,9 +1957,7 @@ requires
|
|||
that.append(self.$items[i] = new Ox.FormItem(item))
|
||||
.append(self.$messages[i] = new Ox.Element().addClass('OxFormMessage'));
|
||||
item.element.bindEvent({
|
||||
validate: function(event, data) {
|
||||
validate(i, data.valid);
|
||||
},
|
||||
/*
|
||||
blur: function(event, data) {
|
||||
validate(i, data.valid);
|
||||
if (data.valid) {
|
||||
|
|
@ -1949,8 +1966,17 @@ requires
|
|||
self.$messages[i].html(data.message).show();
|
||||
}
|
||||
},
|
||||
*/
|
||||
submit: function(event, data) {
|
||||
self.formIsValid && that.submit();
|
||||
},
|
||||
validate: function(event, data) {
|
||||
validate(i, data.valid);
|
||||
if (data.valid) {
|
||||
self.$messages[i].html('').hide();
|
||||
} else {
|
||||
self.$messages[i].html(data.message).show();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -1981,6 +2007,7 @@ requires
|
|||
}
|
||||
|
||||
that.submit = function() {
|
||||
Ox.print('---- that.values()', that.values())
|
||||
self.options.submit(that.values(), submitCallback);
|
||||
};
|
||||
|
||||
|
|
@ -2023,8 +2050,7 @@ requires
|
|||
.append(self.options.element);
|
||||
|
||||
that.value = function() {
|
||||
//FIXME: Ox.Input does not have a public $input attribute
|
||||
return self.options.element.$input.val();
|
||||
return self.options.element.value();
|
||||
};
|
||||
|
||||
return that;
|
||||
|
|
@ -2475,6 +2501,7 @@ requires
|
|||
textAlign 'left', 'center' or 'right'
|
||||
type 'float', 'integer', 'password', 'text'
|
||||
value string
|
||||
validate function, remote validation
|
||||
width integer, px
|
||||
methods:
|
||||
events:
|
||||
|
|
@ -2506,6 +2533,7 @@ requires
|
|||
serialize: null,
|
||||
textAlign: 'left',
|
||||
type: 'text',
|
||||
validate: null,
|
||||
value: '',
|
||||
width: 128
|
||||
})
|
||||
|
|
@ -2768,9 +2796,10 @@ requires
|
|||
self.options.value,
|
||||
blur,
|
||||
autovalidateCallback
|
||||
)) : Ox.isRegExp(self.options.autovalidate) ?
|
||||
)) : (Ox.isRegExp(self.options.autovalidate) ?
|
||||
autovalidateCallback(autovalidateFunction(self.options.value)) :
|
||||
autovalidateTypeFunction(self.options.type, self.options.value);
|
||||
autovalidateTypeFunction(self.options.type, self.options.value)
|
||||
);
|
||||
|
||||
function autovalidateFunction(value) {
|
||||
var regexp = new RegExp(self.options.autovalidate);
|
||||
|
|
@ -2884,6 +2913,7 @@ requires
|
|||
self.options.value = self.$input.val();
|
||||
self.options.autovalidate && autovalidate(true);
|
||||
self.options.placeholder && setPlaceholder();
|
||||
self.options.validate && validate();
|
||||
if (self.bindKeyboard) {
|
||||
$document.unbind('keydown', keypress);
|
||||
$document.unbind('keypress', keypress);
|
||||
|
|
@ -3059,6 +3089,12 @@ requires
|
|||
});
|
||||
}
|
||||
|
||||
function validate() {
|
||||
self.options.validate(self.options.value, function(data) {
|
||||
that.triggerEvent('validate', data);
|
||||
});
|
||||
}
|
||||
|
||||
self.onChange = function(key, value) {
|
||||
var inputWidth, val;
|
||||
if (key == 'disabled') {
|
||||
|
|
@ -3087,6 +3123,10 @@ requires
|
|||
cursor(0, self.$input.val().length);
|
||||
};
|
||||
|
||||
that.value = function() {
|
||||
return self.$input.val();
|
||||
};
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue