// vim: et:ts=4:sw=4:sts=4:ft=javascript /*@ Ox.InputGroup InputGroup Object () -> InputGroup Object (options) -> InputGroup Object (options, self) -> InputGroup Object options Options object id id inputs inputs separators seperators width width self shared private variable @*/ Ox.InputGroup = function(options, self) { self = self || {}; var that = Ox.Element({}, self) .defaults({ id: '', inputs: [], separators: [], width: 0 }) .options(options || {}) .addClass('OxInputGroup') .click(click); if (self.options.width) { setWidths(); } else { self.options.width = getWidth(); } that.css({ width: self.options.width + 'px' }); $.extend(self, { //$input: [], $separator: [] }); self.options.separators.forEach(function(v, i) { self.options.id == 'debug' && Ox.print('separator #' + i + ' ' + self.options.inputs[i].options('id') + ' ' + self.options.inputs[i].options('width')) self.$separator[i] = Ox.Label({ textAlign: 'center', title: v.title, width: v.width + 32 }) .addClass('OxSeparator') .css({ marginLeft: (self.options.inputs[i].options('width') - (i == 0 ? 16 : 32)) + 'px' }) .appendTo(that); }); self.options.inputs.forEach(function($input, i) { $input.options({ id: self.options.id + Ox.toTitleCase($input.options('id')), parent: that }) .css({ marginLeft: -Ox.sum($.map(self.options.inputs, function(v_, i_) { return i_ > i ? self.options.inputs[i_ - 1].options('width') + self.options.separators[i_ - 1].width : (i_ == i ? 16 : 0); })) + 'px' }) .bindEvent({ change: change, submit: change, validate: validate }) .appendTo(that); }); function change(event, data) { //Ox.print('InputGroup change') that.triggerEvent('change', { value: self.options.inputs.map(function($input) { return $input.value(); }) }); } function click(event) { if ($(event.target).hasClass('OxSeparator')) { self.options.inputs[0].focusInput(); } } function getWidth() { return Ox.sum(self.options.inputs.map(function(v) { return v.options('width'); })) + Ox.sum(self.options.separators.map(function(v) { return v.width; }));// + 2; // fixme: why + 2? } function setWidths() { var length = self.options.inputs.length, inputWidths = Ox.divideInt( self.options.width - Ox.sum(self.options.separators.map(function(v) { return v.width; })), length ); self.options.inputs.forEach(function(v) { v.options({ width: inputWidths[1] // fixme: 1?? i? }); }); } function validate(event, data) { //Ox.print('INPUTGROUP TRIGGER VALIDATE') that.triggerEvent('validate', data); } // fixme: is this used? that.getInputById = function(id) { var input = null; Ox.forEach(self.options.inputs, function(v, i) { //Ox.print(v, v.options('id'), id) if (v.options('id') == self.options.id + Ox.toTitleCase(id)) { input = v; return false; } }); return input; }; that.value = function() { return $.map(self.options.inputs, function(input) { var ret = null; ['checked', 'selected', 'value'].forEach(function(v) { input[v] && (ret = input[v]()); }); return ret; }); }; return that; };