some fixes for filters and form elements

This commit is contained in:
rlx 2011-09-08 08:16:31 +00:00
parent 842d536dc8
commit 3f3edac8c7
9 changed files with 113 additions and 79 deletions

View file

@ -454,27 +454,35 @@ Ox.load('Geo', function() {
{
options: {
elements: [
new Ox.Label({
Ox.Label({
title: "Match",
overlap: "right",
width: 48
}),
new Ox.Select({
Ox.FormElementGroup({
elements: [
Ox.Select({
id: "select_",
items: [
{id: "all", title: "all"},
{id: "any", title: "any"},
],
overlap: "right",
width: 48
}),
new Ox.Label({
Ox.Label({
overlap: "left",
title: "of the following conditions",
}),
width: 160
})
],
float: 'right',
width: 208
})
],
float: "left",
id: "formElementGroupLabels"
},
title: "foo"
title: "FormElementGroup (Select and Labels)"
},
{
options: {
@ -1086,7 +1094,7 @@ Ox.load('Geo', function() {
{
options: {
id: "timeInput",
width: 72
//width: 72
},
title: "TimeInput"
},
@ -1094,7 +1102,7 @@ Ox.load('Geo', function() {
options: {
id: "timeInputSeconds",
seconds: true,
width: 112
//width: 112
},
title: "TimeInput with Seconds"
},
@ -1111,7 +1119,7 @@ Ox.load('Geo', function() {
ampm: true,
id: "timeInputAmPm",
seconds: true,
width: 152
//width: 152
},
title: "TimeInput with am/pm"
},
@ -1119,8 +1127,8 @@ Ox.load('Geo', function() {
options: {
id: "timeInputValue",
seconds: true,
value: "00:00:00",
width: 112
value: "23:59:59",
//width: 112
},
title: "TimeInput with Value"
}
@ -1154,27 +1162,27 @@ Ox.load('Geo', function() {
} catch(error) {
}
$element = new Ox[object](element.options)
$element = Ox[object](element.options)
.addClass("margin")
.appendTo($div);
if (object != "Button" && object != "Label") {
$button = new Ox.Button({
$button = Ox.Button({
id: "id" + Ox.uid(),
title: "Value"
})
.addClass("margin")
.bindEvent("click", function() {
var value = $element.options("value"),
$dialog = new Ox.Dialog({
$dialog = Ox.Dialog({
buttons: [
new Ox.Button({
Ox.Button({
id: 'close',
title: 'Close'
}).bindEvent({
click: function() { $dialog.close(); }
})
],
content: Ox.isUndefined(value) ? "undefined" : value,
content: $('<div>').html(Ox.isUndefined(value) ? "undefined" : value),
height: 128,
id: "value",
title: "Value",

View file

@ -7,19 +7,21 @@ Ox.load('Image', function() {
select = Ox.element('<select>').appendTo(body);
[
'Method...', 'blur(1)', 'blur(2)', 'blur(3)',
'channel("r")', 'channel("g")', 'channel("b")',
'channel("r")', 'channel("g")', 'channel("b")', 'channel("a")',
'channel("h")', 'channel("s")', 'channel("l")',
'contour()', 'edges()', 'emboss()',
'encode("some secret stuff")', 'decode()',
'encode("some secret stuff", true)', 'decode(true)',
'encode("some secret stuff", 1)', 'decode(1)',
'encode("some secret stuff", 127)', 'decode(127)',
'hue(0)', 'hue(120)', 'hue(240)',
'hue(-60)', 'hue(60)',
'invert()',
'lightness(-0.5)', 'lightness(0.5)',
'motionBlur()', 'posterize()',
'resize(256, 256)', 'resize(512, 512)',
'saturation(-0.5)', 'saturation(0.5)',
'sharpen()', 'solarize()', 'src("png/Lenna.png")'
'sharpen()', 'solarize()',
'src("png/Lenna.png")', 'src("png/OxJS.png")'
].forEach(function(filter) {
Ox.element('<option>').html(filter).appendTo(select);
});

View file

@ -102,16 +102,18 @@ Ox.load.Image = function(options, callback) {
]);
};
that.channel = function(c) {
c = c.toLowerCase();
that.channel = function(str) {
str = str[0].toLowerCase();
return that.map(function(rgba) {
var i = ['r', 'g', 'b'].indexOf(c), rgb, val;
var i = ['r', 'g', 'b', 'a'].indexOf(str), rgb, val;
if (i > -1) {
return Ox.map(rgba, function(v, c) {
return c == i || c == 3 ? v : 0;
return str == 'a'
? (c < 3 ? rgba[3] : 255)
: (c == i || c == 3 ? v : 0);
});
} else {
i = ['h', 's', 'l'].indexOf(c);
i = ['h', 's', 'l'].indexOf(str);
val = Ox.hsl([rgba[0], rgba[1], rgba[2]])[i];
rgb = i == 0
? Ox.rgb([val, 1, 0.5])
@ -246,11 +248,15 @@ Ox.load.Image = function(options, callback) {
Ox.forEach(bits, function(bit) {
if ((
mode < 1
// If the number of bits set to 1, mod 2
? Ox.sum(Ox.range(8).map(function(bit) {
return self.data[i] & 1 << bit;
})) % 2
// or the one bit in question
: self.data[i] & 1 << bit
// is not equal to the data bit
) != bin[b++]) {
// then flip the bit
self.data[i] ^= 1 << bit;
}
})

View file

@ -7,17 +7,21 @@ Ox.DateInput <f:Ox.Element> DateInput Element
(options, self) -> <f> DateInput Element
options <o> Options object
format <s|short> format can be short, medium, long
value <d> date value, defaults to now
value <d> date value, defaults to current date
weekday <b|false> weekday
width: <o> width object with day, month, weekday, year width
width <o> width of individual input elements, in px
day <n> width of day input element
month <n> width of month input element
weekday <n> width of weekday input element
year <n> width of year input element
self <o> Shared private variable
change <!> triggered on change of value
@*/
Ox.DateInput = function(options, self) {
var that;
self = $.extend(self || {}, {
options: $.extend({
self = Ox.extend(self || {}, {
options: Ox.extend({
format: 'short',
value: Ox.formatDate(new Date(), '%F'),
weekday: false,
@ -30,7 +34,7 @@ Ox.DateInput = function(options, self) {
}, options)
});
$.extend(self, {
Ox.extend(self, {
date: new Date(self.options.value.replace(/-/g, '/')),
formats: {
day: '%d',
@ -59,11 +63,11 @@ Ox.DateInput = function(options, self) {
.bindEvent('autocomplete', changeWeekday),
} : {}, {
day: Ox.Input({
autocomplete: $.map(Ox.range(1, Ox.getDaysInMonth(
autocomplete: Ox.range(1, Ox.getDaysInMonth(
parseInt(Ox.formatDate(self.date, '%Y'), 10),
parseInt(Ox.formatDate(self.date, '%m'), 10)
) + 1), function(v, i) {
return self.options.format == 'short' ? Ox.pad(v, 2) : v.toString();
) + 1).map(function(i) {
return self.options.format == 'short' ? Ox.pad(i, 2) : i.toString();
}),
autocompleteReplace: true,
autocompleteReplaceCorrect: true,
@ -99,16 +103,16 @@ Ox.DateInput = function(options, self) {
.bindEvent('autocomplete', changeMonthOrYear)
});
that = Ox.InputGroup($.extend(self.options, {
that = Ox.InputGroup(Ox.extend(self.options, {
id: self.options.id,
inputs: $.merge(self.options.weekday ? [
inputs: Ox.merge(self.options.weekday ? [
self.$input.weekday
] : [], self.options.format == 'short' ? [
self.$input.year, self.$input.month, self.$input.day
] : [
self.$input.month, self.$input.day, self.$input.year
]),
separators: $.merge(self.options.weekday ? [
separators: Ox.merge(self.options.weekday ? [
{title: self.options.format == 'short' ? '' : ',', width: 8},
] : [], self.options.format == 'short' ? [
{title: '-', width: 8}, {title: '-', width: 8}

View file

@ -162,7 +162,7 @@ Ox.Filter = function(options, self) {
],
separators: [
{title: 'Limit to', width: 56},
{title: 'sorted by', width: 64},
{title: 'sorted by', width: 60}, // fixme: this is odd, should be 64
{title: 'in', width: 32}
]
});
@ -201,9 +201,9 @@ Ox.Filter = function(options, self) {
self.$form = Ox.Form({
items: self.$items
});
}).appendTo(that);
renderConditions();
that.$element = self.$form.$element;
//that.$element = self.$form.$element;
function addCondition(pos, subpos, isGroup) {
subpos = Ox.isUndefined(subpos) ? -1 : subpos;
@ -280,7 +280,7 @@ Ox.Filter = function(options, self) {
function removeCondition(pos, subpos) {
Ox.print('removeCondition', pos, subpos)
subpos = Ox.isUndefined(subpos) ? -1 : subpos;
if (subpos == -1) {
if (subpos == -1 || self.options.query.conditions[pos].conditions.length == 1) {
self.options.query.conditions.splice(pos, 1);
} else {
self.options.query.conditions[pos].conditions.splice(subpos, 1);
@ -298,7 +298,7 @@ Ox.Filter = function(options, self) {
title: 'remove',
type: 'image'
})
.css({margin: '0 4px 0 ' + (isGroup ? '296px' : '8px')})
.css({margin: '0 4px 0 ' + (isGroup ? '292px' : '8px')}) // fixme: 296 is probably correct, but labels seem to be too wide
.bindEvent({
click: function(data) {
Ox.print('remove...', data)
@ -441,6 +441,7 @@ Ox.Filter = function(options, self) {
}
function renderInput(condition, index) {
Ox.print('renderInput', condition)
var $input,
findKey = Ox.getObjectById(self.options.findKeys, condition.key),
isArray = Ox.isArray(condition.value),
@ -448,6 +449,7 @@ Ox.Filter = function(options, self) {
type = findKey.type == 'integer' ? 'int' : findKey.type,
formatArgs, formatType, title;
if (findKey.format) {
Ox.print('findKey.format', findKey.format)
formatArgs = findKey.format.args
formatType = findKey.format.type;
if (formatType == 'color') {
@ -475,6 +477,16 @@ Ox.Filter = function(options, self) {
//value: condition.value[index],
width: {day: 32, month: 32, year: 48}
});
} else if (formatType == 'duration') {
$input = Ox.TimeInput(!isArray ? {
seconds: true,
value: '00:00:00',
width: {hours: 91, minutes: 91, seconds: 90}
} : {
seconds: true,
value: '00:00:00',
width: {hours: 38, minutes: 37, seconds: 37}
});
} else if ([
'currency', 'percent', 'unit', 'value'
].indexOf(formatType) > -1) {
@ -571,7 +583,7 @@ Ox.Filter = function(options, self) {
width: 208
}),
], renderButtons(pos, subpos, true)),
float: 'left',
float: 'left'
})
.data({position: pos, subposition: subpos});
return $condition;

View file

@ -89,23 +89,23 @@ Ox.InputGroup = function(options, self) {
}
function getWidth() {
return Ox.sum($.map(self.options.inputs, function(v, i) {
return Ox.sum(self.options.inputs.map(function(v) {
return v.options('width');
})) + Ox.sum($.map(self.options.separators, function(v, i) {
})) + Ox.sum(self.options.separators.map(function(v) {
return v.width;
})) + 2; // fixme: why + 2?
}));// + 2; // fixme: why + 2?
}
function setWidths() {
var length = self.options.inputs.length,
inputWidths = Ox.divideInt(
self.options.width - Ox.sum($.map(self.options.separators, function(v, i) {
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]
width: inputWidths[1] // fixme: 1?? i?
});
});
}

View file

@ -26,7 +26,7 @@ Ox.Label = function(options, self) {
' OxOverlap' + Ox.toTitleCase(self.options.overlap) : '')
)
.css($.extend(self.options.width == 'auto' ? {} : {
width: (self.options.width - 14) + 'px'
width: self.options.width - 14 + 'px' // fixme: why 14????
}, {
textAlign: self.options.textAlign
}))

View file

@ -50,7 +50,7 @@ Ox.Select = function(options, self) {
Ox.toTitleCase(self.options.overlap))
)
.css(self.options.width == 'auto' ? {} : {
width: self.options.width + 'px'
width: self.options.width - 2 + 'px'
})
.bindEvent({
key_escape: loseFocus,
@ -93,7 +93,8 @@ Ox.Select = function(options, self) {
self.$title = $('<div>')
.addClass('OxTitle')
.css({
width: (self.options.width - 22 - (
// fixme: used to be 22. obscure
width: (self.options.width - 24 - (
self.options.label ? self.options.labelWidth : 0
)) + 'px'
})

View file

@ -9,7 +9,7 @@ Ox.TimeInput <f:Ox.Element> TimeInput Object
ampm <b|false> 24h/ampm
seconds <b|false> show seconds
milliseconds <b|false> show milliseconds
value <d> value, defaults to now
value <d> value, defaults to current time
self <o> shared private variable
@*/
@ -23,7 +23,7 @@ Ox.TimeInput = function(options, self) {
seconds: false,
milliseconds: false,
value: Ox.formatDate(new Date(), '%T'),
/*
///*
width: {
hours: 32,
minutes: 32,
@ -31,7 +31,7 @@ Ox.TimeInput = function(options, self) {
milliseconds: 40,
ampm: 32
}
*/
//*/
})
.options(options || {});
@ -47,48 +47,48 @@ Ox.TimeInput = function(options, self) {
self.$input = {
hours: Ox.Input({
autocomplete: $.map(self.options.ampm ? Ox.range(1, 13) : Ox.range(0, 24), function(v) {
return Ox.pad(v, 2);
autocomplete: (self.options.ampm ? Ox.range(1, 13) : Ox.range(0, 24)).map(function(i) {
return Ox.pad(i, 2);
}),
autocompleteReplace: true,
autocompleteReplaceCorrect: true,
id: 'hours',
textAlign: 'right',
value: self.values.hours,
width: 32//self.options.width.hours
width: self.options.width.hours
}),
minutes: Ox.Input({
autocomplete: $.map(Ox.range(0, 60), function(v) {
return Ox.pad(v, 2);
autocomplete: Ox.range(0, 60).map(function(i) {
return Ox.pad(i, 2);
}),
autocompleteReplace: true,
autocompleteReplaceCorrect: true,
id: 'minutes',
textAlign: 'right',
value: self.values.minutes,
width: 32//self.options.width.minutes
width: self.options.width.minutes
}),
seconds: Ox.Input({
autocomplete: $.map(Ox.range(0, 60), function(v) {
return Ox.pad(v, 2);
autocomplete: Ox.range(0, 60).map(function(i) {
return Ox.pad(i, 2);
}),
autocompleteReplace: true,
autocompleteReplaceCorrect: true,
id: 'seconds',
textAlign: 'right',
value: self.values.seconds,
width: 32//self.options.width.seconds
width: self.options.width.seconds
}),
milliseconds: Ox.Input({
autocomplete: $.map(Ox.range(0, 1000), function(v) {
return Ox.pad(v, 3);
autocomplete: Ox.range(0, 1000).map(function(i) {
return Ox.pad(i, 3);
}),
autocompleteReplace: true,
autocompleteReplaceCorrect: true,
id: 'milliseconds',
textAlign: 'right',
value: self.values.milliseconds,
width: 40//self.options.width.milliseconds
width: self.options.width.milliseconds
}),
ampm: Ox.Input({
autocomplete: ['AM', 'PM'],
@ -96,30 +96,31 @@ Ox.TimeInput = function(options, self) {
autocompleteReplaceCorrect: true,
id: 'ampm',
value: self.values.ampm,
width: 32//self.options.width.seconds
width: self.options.width.ampm
})
};
that = Ox.InputGroup($.extend(self.options, {
inputs: $.merge($.merge($.merge([
that = Ox.InputGroup(Ox.extend(self.options, {
inputs: Ox.merge([
self.$input.hours,
self.$input.minutes,
], self.options.seconds ? [
self.$input.seconds
] : []), self.options.milliseconds ? [
] : [], self.options.milliseconds ? [
self.$input.milliseconds
] : []), self.options.ampm ? [
] : [], self.options.ampm ? [
self.$input.ampm
] : []),
separators: $.merge($.merge($.merge([
separators: Ox.merge([
{title: ':', width: 8},
], self.options.seconds ? [
{title: ':', width: 8}
] : []), self.options.milliseconds ? [
] : [], self.options.milliseconds ? [
{title: '.', width: 8}
] : []), self.options.ampm ? [
] : [], self.options.ampm ? [
{title: '', width: 8}
] : []),
width: 0
//width: self.options.width || 128
}), self)
.bindEvent('change', setValue);