some fixes for filters and form elements
This commit is contained in:
rlx
parent
842d536dc8
commit
3f3edac8c7
9 changed files with 113 additions and 79 deletions
|
|
@ -454,27 +454,35 @@ Ox.load('Geo', function() {
|
|||
{
|
||||
options: {
|
||||
elements: [
|
||||
new Ox.Label({
|
||||
Ox.Label({
|
||||
title: "Match",
|
||||
overlap: "right",
|
||||
}),
|
||||
new Ox.Select({
|
||||
id: "select_",
|
||||
items: [
|
||||
{id: "all", title: "all"},
|
||||
{id: "any", title: "any"},
|
||||
],
|
||||
overlap: "right",
|
||||
width: 48
|
||||
}),
|
||||
new Ox.Label({
|
||||
title: "of the following conditions",
|
||||
}),
|
||||
Ox.FormElementGroup({
|
||||
elements: [
|
||||
Ox.Select({
|
||||
id: "select_",
|
||||
items: [
|
||||
{id: "all", title: "all"},
|
||||
{id: "any", title: "any"},
|
||||
],
|
||||
width: 48
|
||||
}),
|
||||
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",
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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?
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}))
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in a new issue