diff --git a/build/css/ox.ui.css b/build/css/ox.ui.css index ef3f6351..06cadc28 100644 --- a/build/css/ox.ui.css +++ b/build/css/ox.ui.css @@ -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; diff --git a/build/css/ox.ui.modern.css b/build/css/ox.ui.modern.css index 4c817606..c863a8a2 100644 --- a/build/css/ox.ui.modern.css +++ b/build/css/ox.ui.modern.css @@ -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); } /* diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index 6bf5a5fb..bb082cc5 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -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; };