From b216240502e60ac22b119dcaf2b62e13334654e5 Mon Sep 17 00:00:00 2001 From: rolux Date: Fri, 24 Dec 2010 17:13:18 +0000 Subject: [PATCH] changes to dialog api --- build/css/ox.ui.css | 5 +- build/css/ox.ui.modern.css | 2 +- build/js/ox.ui.js | 192 ++++++++++++++++++++++--------------- 3 files changed, 120 insertions(+), 79 deletions(-) diff --git a/build/css/ox.ui.css b/build/css/ox.ui.css index ef3f635..06cadc2 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 4c81760..c863a8a 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 6bf5a5f..bb082cc 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; };