CAMP/oxjstmp
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

changes to dialog api

Browse Source
This commit is contained in:
rolux 2010-12-24 17:13:18 +00:00
parent c11a4e74fe
commit b216240502
3 changed files with 120 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
build/css/ox.ui.css
View File

@ -378,9 +378,9 @@ OxForm
margin-top: 0; margin-top: 0;
} }
.OxFormMessage { .OxFormMessage {
width: 100%; //width: 100%;
height: 10px; height: 10px;
margin-top: 2px; margin: 2px 8px 0 0;
text-align: right; text-align: right;
display: none; display: none;
} }
@ -1129,6 +1129,7 @@ Panels
right: 0px; right: 0px;
width: 14px; width: 14px;
height: 16px; height: 16px;
padding-top: 1px;
border-width: 0 0 0 1px; border-width: 0 0 0 1px;
background: rgba(0, 0, 0, 0); background: rgba(0, 0, 0, 0);
font-size: 11px; font-size: 11px;

2
build/css/ox.ui.modern.css
View File

@ -252,7 +252,7 @@ Menus
background: rgba(64, 64, 64, 0.96); background: rgba(64, 64, 64, 0.96);
} }
.OxThemeModern .OxMenu .OxItem.OxDisabled .OxCell { .OxThemeModern .OxMenu .OxItem.OxDisabled .OxCell {
color: rgb(80, 80, 80); color: rgb(128, 128, 128);
} }
/* /*

192
build/js/ox.ui.js
View File

@ -103,6 +103,7 @@ requires
$window, $document, $body; $window, $document, $body;
$(function() { $(function() {
// fixme: don't use globals!
$window = $(window), $window = $(window),
$document = $(document), $document = $(document),
$body = $('body'), $body = $('body'),
@ -704,17 +705,17 @@ requires
$dialog = new Ox.Dialog({ $dialog = new Ox.Dialog({
title: 'Application Error', title: 'Application Error',
buttons: [ buttons: [
{ new Ox.Button({
title: 'Close', title: 'Close'
click: function() { })
$dialog.close(); .bindEvent({
} click: $dialog.close
} })
], ],
content: $iframe,
width: 800, width: 800,
height: 400 height: 400
}) })
.append($iframe)
.open(), .open(),
iframe = $iframe[0].contentDocument || $iframe[0].contentWindow.document; iframe = $iframe[0].contentDocument || $iframe[0].contentWindow.document;
iframe.open(); iframe.open();
@ -744,27 +745,29 @@ requires
var $dialog = new Ox.Dialog({ var $dialog = new Ox.Dialog({
title: 'Application Error', title: 'Application Error',
buttons: [ buttons: [
{ new Ox.Button({
title: 'Details', title: 'Details'
})
.bindEvent({
click: function() { click: function() {
$dialog.close(function() { $dialog.close(function() {
debug(request); debug(request);
}); })
} }
}, }),
{ new Ox.Button({
title: 'Close', title: 'Close'
})
.bindEvent({
click: function() { click: function() {
$dialog.close(function() { $dialog.close();
callback(data);
});
}
} }
})
], ],
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, width: 400,
height: 200 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(); .open();
// fixme: change this to Send / Don't Send // fixme: change this to Send / Don't Send
Ox.print({ Ox.print({
@ -908,7 +911,7 @@ requires
// if an ox object was passed // if an ox object was passed
// then pass its $element instead // then pass its $element instead
// so we can do oxObj.jqFn(oxObj) // so we can do oxObj.jqFn(oxObj)
if (arg.ox) { if (arg && arg.ox) {
args[i] = arg.$element; args[i] = arg.$element;
} }
/* /*
@ -1025,9 +1028,11 @@ requires
and self.options.bar, and self.options.bar,
returns that returns that
*/ */
var length = arguments.length, var args,
id = self.options && self.options.id, id = self.options && self.options.id,
args, ret; length = arguments.length,
oldOptions,
ret;
if (length == 0) { if (length == 0) {
// options() // options()
ret = self.options || options; // this is silly. make sure self.options get populated with 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, ...}) // options (str, val) or options({str: val, ...})
// translate (str, val) to ({str: val}) // translate (str, val) to ({str: val})
args = Ox.makeObject.apply(that, arguments); args = Ox.makeObject.apply(that, arguments);
/* oldOptions = $.extend({}, self.options);
options = self.options;
*/
// if options have not been set, extend defaults, // if options have not been set, extend defaults,
// otherwise, extend options // otherwise, extend options
self.options = $.extend(self.options || self.defaults, args); self.options = $.extend(self.options || self.defaults, args);
$.each(args, function(key, value) { $.each(args, function(key, value) {
key == 'id' && id && Ox.Event.changeId(id, 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? fixme: why does this not work?
Ox.print('options', options, key, value) Ox.print('options', options, key, value)
@ -1567,13 +1570,13 @@ requires
Ox.Dialog = function(options, self) { Ox.Dialog = function(options, self) {
// fixme: dialog should be derived from a generic draggable // 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 // fixme: buttons should have a close attribute, or the dialog a close id
var self = self || {}, var self = self || {},
that = new Ox.Element('div', self) that = new Ox.Element('div', self)
.defaults({ .defaults({
title: '', title: '',
buttons: [], buttons: [],
content: null,
height: 216, height: 216,
minHeight: 144, minHeight: 144,
minWidth: 256, minWidth: 256,
@ -1595,10 +1598,6 @@ requires
initialHeight: self.options.height initialHeight: self.options.height
}) })
if (!Ox.isArray(self.options.buttons[0])) {
self.options.buttons = [[], self.options.buttons];
}
that.$titlebar = new Ox.Bar({ that.$titlebar = new Ox.Bar({
size: 'medium' size: 'medium'
}) })
@ -1620,43 +1619,13 @@ requires
padding: self.options.padding + 'px', padding: self.options.padding + 'px',
overflow: 'auto' overflow: 'auto'
}) })
.append(self.options.content)
.appendTo(that); .appendTo(that);
that.$buttonsbar = new Ox.Bar({}) that.$buttonsbar = new Ox.Bar({})
.addClass('OxButtonsBar') .addClass('OxButtonsBar')
.appendTo(that); .appendTo(that);
loadButtons();
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);
});
that.$buttons[0].focus(); that.$buttons[0].focus();
@ -1718,6 +1687,41 @@ requires
return ret; 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() { function mousedownLayer() {
that.$layer.stop().animate({ that.$layer.stop().animate({
opacity: 0.5 opacity: 0.5
@ -1784,7 +1788,21 @@ requires
} }
self.onChange = function(key, value) { 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({ that.animate({
height: self.options.height + 'px', height: self.options.height + 'px',
width: self.options.width + 'px' width: self.options.width + 'px'
@ -1801,11 +1819,6 @@ requires
} }
} }
that.append = function($element) {
that.$content.append($element);
return that;
};
that.center = function() { that.center = function() {
}; };
@ -1823,6 +1836,11 @@ requires
return that; return that;
}; };
that.content = function($element) {
that.$content.empty().append($element);
return that;
}
that.disable = function() { that.disable = function() {
// to be used on submit of form, like login // to be used on submit of form, like login
that.$layer.addClass('OxFront'); that.$layer.addClass('OxFront');
@ -1918,7 +1936,8 @@ requires
items: [], items: [],
submit: null 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, { $.extend(self, {
$items: [], $items: [],
@ -1938,9 +1957,7 @@ requires
that.append(self.$items[i] = new Ox.FormItem(item)) that.append(self.$items[i] = new Ox.FormItem(item))
.append(self.$messages[i] = new Ox.Element().addClass('OxFormMessage')); .append(self.$messages[i] = new Ox.Element().addClass('OxFormMessage'));
item.element.bindEvent({ item.element.bindEvent({
validate: function(event, data) { /*
validate(i, data.valid);
},
blur: function(event, data) { blur: function(event, data) {
validate(i, data.valid); validate(i, data.valid);
if (data.valid) { if (data.valid) {
@ -1949,8 +1966,17 @@ requires
self.$messages[i].html(data.message).show(); self.$messages[i].html(data.message).show();
} }
}, },
*/
submit: function(event, data) { submit: function(event, data) {
self.formIsValid && that.submit(); 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() { that.submit = function() {
Ox.print('---- that.values()', that.values())
self.options.submit(that.values(), submitCallback); self.options.submit(that.values(), submitCallback);
}; };
@ -2023,8 +2050,7 @@ requires
.append(self.options.element); .append(self.options.element);
that.value = function() { that.value = function() {
//FIXME: Ox.Input does not have a public $input attribute return self.options.element.value();
return self.options.element.$input.val();
}; };
return that; return that;
@ -2475,6 +2501,7 @@ requires
textAlign 'left', 'center' or 'right' textAlign 'left', 'center' or 'right'
type 'float', 'integer', 'password', 'text' type 'float', 'integer', 'password', 'text'
value string value string
validate function, remote validation
width integer, px width integer, px
methods: methods:
events: events:
@ -2506,6 +2533,7 @@ requires
serialize: null, serialize: null,
textAlign: 'left', textAlign: 'left',
type: 'text', type: 'text',
validate: null,
value: '', value: '',
width: 128 width: 128
}) })
@ -2768,9 +2796,10 @@ requires
self.options.value, self.options.value,
blur, blur,
autovalidateCallback autovalidateCallback
)) : Ox.isRegExp(self.options.autovalidate) ? )) : (Ox.isRegExp(self.options.autovalidate) ?
autovalidateCallback(autovalidateFunction(self.options.value)) : autovalidateCallback(autovalidateFunction(self.options.value)) :
autovalidateTypeFunction(self.options.type, self.options.value); autovalidateTypeFunction(self.options.type, self.options.value)
);
function autovalidateFunction(value) { function autovalidateFunction(value) {
var regexp = new RegExp(self.options.autovalidate); var regexp = new RegExp(self.options.autovalidate);
@ -2884,6 +2913,7 @@ requires
self.options.value = self.$input.val(); self.options.value = self.$input.val();
self.options.autovalidate && autovalidate(true); self.options.autovalidate && autovalidate(true);
self.options.placeholder && setPlaceholder(); self.options.placeholder && setPlaceholder();
self.options.validate && validate();
if (self.bindKeyboard) { if (self.bindKeyboard) {
$document.unbind('keydown', keypress); $document.unbind('keydown', keypress);
$document.unbind('keypress', 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) { self.onChange = function(key, value) {
var inputWidth, val; var inputWidth, val;
if (key == 'disabled') { if (key == 'disabled') {
@ -3087,6 +3123,10 @@ requires
cursor(0, self.$input.val().length); cursor(0, self.$input.val().length);
}; };
that.value = function() {
return self.$input.val();
};
return that; return that;
}; };