0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

some fixes for filters and form elements

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

40
demos/form2/js/form.js
View file

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

8
demos/image/js/image.js
View file

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

16
source/Ox.Image/Ox.Image.js
View file

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

26
source/Ox.UI/js/Form/Ox.DateInput.js
View file

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

24
source/Ox.UI/js/Form/Ox.Filter.js
View file

@ -162,7 +162,7 @@ Ox.Filter = function(options, self) {
], ],
separators: [ separators: [
{title: 'Limit to', width: 56}, {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} {title: 'in', width: 32}
] ]
}); });
@ -201,9 +201,9 @@ Ox.Filter = function(options, self) {
self.$form = Ox.Form({ self.$form = Ox.Form({
items: self.$items items: self.$items
}); }).appendTo(that);
renderConditions(); renderConditions();
that.$element = self.$form.$element; //that.$element = self.$form.$element;
function addCondition(pos, subpos, isGroup) { function addCondition(pos, subpos, isGroup) {
subpos = Ox.isUndefined(subpos) ? -1 : subpos; subpos = Ox.isUndefined(subpos) ? -1 : subpos;
@ -280,7 +280,7 @@ Ox.Filter = function(options, self) {
function removeCondition(pos, subpos) { function removeCondition(pos, subpos) {
Ox.print('removeCondition', pos, subpos) Ox.print('removeCondition', pos, subpos)
subpos = Ox.isUndefined(subpos) ? -1 : 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); self.options.query.conditions.splice(pos, 1);
} else { } else {
self.options.query.conditions[pos].conditions.splice(subpos, 1); self.options.query.conditions[pos].conditions.splice(subpos, 1);
@ -298,7 +298,7 @@ Ox.Filter = function(options, self) {
title: 'remove', title: 'remove',
type: 'image' 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({ .bindEvent({
click: function(data) { click: function(data) {
Ox.print('remove...', data) Ox.print('remove...', data)
@ -441,6 +441,7 @@ Ox.Filter = function(options, self) {
} }
function renderInput(condition, index) { function renderInput(condition, index) {
Ox.print('renderInput', condition)
var $input, var $input,
findKey = Ox.getObjectById(self.options.findKeys, condition.key), findKey = Ox.getObjectById(self.options.findKeys, condition.key),
isArray = Ox.isArray(condition.value), isArray = Ox.isArray(condition.value),
@ -448,6 +449,7 @@ Ox.Filter = function(options, self) {
type = findKey.type == 'integer' ? 'int' : findKey.type, type = findKey.type == 'integer' ? 'int' : findKey.type,
formatArgs, formatType, title; formatArgs, formatType, title;
if (findKey.format) { if (findKey.format) {
Ox.print('findKey.format', findKey.format)
formatArgs = findKey.format.args formatArgs = findKey.format.args
formatType = findKey.format.type; formatType = findKey.format.type;
if (formatType == 'color') { if (formatType == 'color') {
@ -475,6 +477,16 @@ Ox.Filter = function(options, self) {
//value: condition.value[index], //value: condition.value[index],
width: {day: 32, month: 32, year: 48} 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 ([ } else if ([
'currency', 'percent', 'unit', 'value' 'currency', 'percent', 'unit', 'value'
].indexOf(formatType) > -1) { ].indexOf(formatType) > -1) {
@ -571,7 +583,7 @@ Ox.Filter = function(options, self) {
width: 208 width: 208
}), }),
], renderButtons(pos, subpos, true)), ], renderButtons(pos, subpos, true)),
float: 'left', float: 'left'
}) })
.data({position: pos, subposition: subpos}); .data({position: pos, subposition: subpos});
return $condition; return $condition;

10
source/Ox.UI/js/Form/Ox.InputGroup.js
View file

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

2
source/Ox.UI/js/Form/Ox.Label.js
View file

@ -26,7 +26,7 @@ Ox.Label = function(options, self) {
' OxOverlap' + Ox.toTitleCase(self.options.overlap) : '') ' OxOverlap' + Ox.toTitleCase(self.options.overlap) : '')
) )
.css($.extend(self.options.width == 'auto' ? {} : { .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 textAlign: self.options.textAlign
})) }))

5
source/Ox.UI/js/Form/Ox.Select.js
View file

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

47
source/Ox.UI/js/Form/Ox.TimeInput.js
View file

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