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

Ox.Filter, round 2

Browse source
This commit is contained in:
rlx 2011-01-24 04:08:19 +00:00
parent 44530bceb9
commit 358c1ecebb
2 changed files with 384 additions and 230 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
build/js/ox.js
View file

@ -1226,6 +1226,10 @@ Format functions
================================================================================ ================================================================================
*/ */
Ox.formatColor = function() {
};
Ox.formatCurrency = function(num, str, dec) { Ox.formatCurrency = function(num, str, dec) {
return str + formatNumber(num, dec); return str + formatNumber(num, dec);
}; };
@ -1511,6 +1515,10 @@ Ox.formatValue = function(num, str) {
return val; return val;
}; };
Ox.formatUnit = function(num, str) {
return num + ' ' + str;
};
/* /*
================================================================================ ================================================================================
Geo functions Geo functions

344
build/js/ox.ui.js
View file

@ -2085,71 +2085,80 @@ requires
============================================================================ ============================================================================
*/ */
/**
*/
Ox.Filter = function(options, self) { Ox.Filter = function(options, self) {
/***
Options:
Methods:
Events:
***/
var self = self || {}, var self = self || {},
that = new Ox.Element('div', self) that = new Ox.Element('div', self)
.defaults({ .defaults({
keys: [], findKeys: [],
query: { query: {
conditions: [], conditions: [],
operator: '&' operator: '&'
} },
sortKeys: [],
viewKeys: []
}) })
.options(options || {}); .options(options || {});
Ox.print('s.o', self.options) Ox.print('Ox.Filter self.options', self.options)
$.extend(self, {
conditionOperators: {
date: [
{id: '', title: 'is'},
{id: '!', title: 'is not'},
{id: '<', title: 'is before'},
{id: '>', title: 'is after'},
{id: '>&<', title: 'is between'},
{id: '<|>', title: 'is not between'}
],
list: [
{id: '', title: 'is'},
{id: '!', title: 'is not'}
],
number: [
{id: '', title: 'is'},
{id: '!', title: 'is not'},
{id: '<', title: 'is less than'},
{id: '>', title: 'is greater than'},
{id: '>&<', title: 'is between'},
{id: '<|>', title: 'is not between'}
],
string: [
{id: '=', title: 'is'},
{id: '!=', title: 'is not'},
{id: '^', title: 'begins with'},
{id: '$', title: 'ends with'},
{id: '', title: 'contains'},
{id: '!', title: 'does not contain'}
],
text: [
{id: '', title: 'contains'},
{id: '!', title: 'does not contain'}
]
},
operators: [
{id: '&', title: 'all'},
{id: '|', title: 'any'}
]
});
if (!self.options.query.conditions.length) { if (!self.options.query.conditions.length) {
self.options.query.conditions = [{ self.options.query.conditions = [{
key: self.options.keys[0].id, key: self.options.findKeys[0].id,
value: '' value: '',
operator: self.conditionOperators[
getConditionType(self.options.findKeys[0].type)
][0].id
}]; }];
} }
$.extend(self, {
operators: [
{title: 'all', operator: '&'},
{title: 'any', operator: '|'}
],
relations: {
date: [
{title: 'is', operator: '='},
{title: 'is not', operator: '!'},
{title: 'is before', operator: '<'},
{title: 'is after', operator: '>'},
{title: 'is between', operator: '>&<'},
{title: 'is not between', operator: '<|>'}
],
list: [
{title: 'is', operator: '='},
{title: 'is not', operator: '!'}
],
number: [
{title: 'is', operator: '='},
{title: 'is not', operator: '!'},
{title: 'is less than', operator: '<'},
{title: 'is greater than', operator: '>'},
{title: 'is between', operator: '>&<'},
{title: 'is not between', operator: '<|>'}
],
string: [
{title: 'is', operator: '='},
{title: 'is not', operator: '!='},
{title: 'begins with', operator: '^'},
{title: 'ends with', operator: '$'},
{title: 'contains', operator: ''},
{title: 'does not contain', operator: '!'}
],
text: [
{title: 'contains', operator: ''},
{title: 'does not contain', operator: '!'}
]
}
});
self.$operator = new Ox.FormElementGroup({ self.$operator = new Ox.FormElementGroup({
elements: [ elements: [
new Ox.Label({ new Ox.Label({
@ -2157,18 +2166,24 @@ requires
overlap: 'right', overlap: 'right',
width: 48 width: 48
}), }),
new Ox.FormElementGroup({
elements: [
new Ox.Select({ new Ox.Select({
items: [ items: self.operators,
{id: 'all', title: 'all'},
{id: 'any', title: 'any'},
],
overlap: 'right',
width: 48 width: 48
})
.bindEvent({
change: changeOperator
}), }),
new Ox.Label({ new Ox.Label({
overlap: 'left',
title: 'of the following conditions', title: 'of the following conditions',
width: 160 width: 160
}), })
],
float: 'right',
width: 208
})
], ],
float: 'left', float: 'left',
}); });
@ -2205,40 +2220,109 @@ requires
width: 120 width: 120
}), }),
new Ox.Select({ new Ox.Select({
/* items: self.options.sortKeys,
items: $.map(self.options.keys, function(key) {
return {id: key.id, title: key.title};
}),
*/
items: [
{id: "title", title: "Title"},
{id: "director", title: "Director"}
],
width: 128 width: 128
}),
new Ox.FormElementGroup({
elements: [
new Ox.Select({
items: [
{id: 'ascending', title: 'ascending'},
{id: 'descending', title: 'descending'}
],
width: 96
}),
new Ox.Label({
overlap: 'left',
title: 'order',
width: 72
})
],
float: 'right',
width: 168
}) })
], ],
separators: [ separators: [
{title: 'Limit to', width: 56}, {title: 'Limit to', width: 56},
{title: 'sorted by', width: 64} {title: 'sorted by', width: 64},
{title: 'in', width: 32}
] ]
}); });
self.$items = $.merge($.merge([self.$operator], self.$conditions), [self.$limit]); self.$view = new Ox.InputGroup({
inputs: [
new Ox.Checkbox({
width: 16
}),
new Ox.Select({
items: self.options.viewKeys,
width: 128
})
],
separators: [
{title: 'By default, view', width: 112}
]
});
that = new Ox.Form({ self.$save = new Ox.InputGroup({
inputs: [
new Ox.Checkbox({
width: 16
}),
new Ox.Input({
id: 'list',
width: 128
})
],
separators: [
{title: 'Save as Smart List', width: 112}
]
});
self.$items = $.merge($.merge([self.$operator], self.$conditions), [self.$limit, self.$view, self.$save]);
self.$form = new Ox.Form({
items: self.$items items: self.$items
}, $.extend({}, self)); });
that.$element = self.$form.$element;
function addCondition(pos) { function addCondition(pos) {
var key = self.options.keys[0]; var key = self.options.findKeys[0];
self.options.query.conditions.splice(pos, 0, { self.options.query.conditions.splice(pos, 0, {
key: key.id, key: key.id,
value: '', value: '',
operator: self.relations[key.type][0].operator operator: self.conditionOperators[key.type][0].id
}); });
self.$conditions.splice(pos, 0, constructCondition({}, pos)); self.$conditions.splice(pos, 0, constructCondition({}, pos));
updateConditions(); updateConditions();
that.addItem(pos + 1, self.$conditions[pos]); self.$form.addItem(pos + 1, self.$conditions[pos]);
}
function changeConditionKey(pos, key) {
Ox.print('changeConditionKey', pos, key);
var oldOperator = self.options.query.conditions[pos].operator,
oldType = Ox.getObjectById(
self.options.findKeys, self.options.query.conditions[pos].key
).type,
newType = Ox.getObjectById(
self.options.findKeys, key
).type,
oldConditionType = getConditionType(oldType),
newConditionType = getConditionType(newType);
changeConditionType = oldConditionType != newConditionType;
Ox.print('old new', oldConditionType, newConditionType)
self.options.query.conditions[pos].key = key;
if (changeConditionType) {
self.$conditions[pos].replaceElement(1, constructConditionOperator(pos, oldOperator));
}
}
function changeConditionOperator(pos, operator) {
}
function changeOperator(event, data) {
self.options.query.operator = data.selected[0].id;
} }
function constructCondition(condition, pos) { function constructCondition(condition, pos) {
@ -2246,17 +2330,23 @@ requires
return $condition = new Ox.FormElementGroup({ return $condition = new Ox.FormElementGroup({
elements: [ elements: [
new Ox.Select({ new Ox.Select({
items: $.extend({}, self.options.keys), // fixme: Ox.Menu messes with keys items: $.map(self.options.findKeys, function(key) {
overlap: 'right', return {
width: 128 id: key.id,
}), title: key.title
new Ox.Select({ };
items: $.map(self.relations[self.options.keys[0].type], function(relation) { }),
return {id: relation.title, title: relation.title} //items: $.extend({}, self.options.findKeys), // fixme: Ox.Menu messes with keys
}),
overlap: 'right', overlap: 'right',
width: 128 width: 128
})
.bindEvent({
change: function(event, data) {
Ox.print('event', event)
changeConditionKey($condition.data('position'), data.selected[0].id);
}
}), }),
constructConditionOperator(pos),
new Ox.Input({ new Ox.Input({
width: 256 width: 256
}), }),
@ -2282,6 +2372,7 @@ requires
.css({margin: '0 4px 0 4px'}) .css({margin: '0 4px 0 4px'})
.bindEvent({ .bindEvent({
click: function() { click: function() {
Ox.print('add', $(this).parent().parent().data('position'))
addCondition($condition.data('position') + 1) addCondition($condition.data('position') + 1)
} }
}), }),
@ -2291,17 +2382,54 @@ requires
tooltip: 'Add Group of Conditions', tooltip: 'Add Group of Conditions',
type: 'image' type: 'image'
}) })
.css({margin: '0 0 0 4px'}), .css({margin: '0 0 0 4px'})
.bindEvent({
click: function() {
}
})
] ]
}) })
.data({position: pos}); .data({position: pos});
} }
function constructConditionOperator(pos, selected) {
return new Ox.Select({
items: $.map(self.conditionOperators[getConditionType(
Ox.getObjectById(
self.options.findKeys,
self.options.query.conditions[pos].key
).type
)], function(operator) {
return {
checked: operator.id == selected, // fixme: should be "selected", not "checked"
id: operator.operator,
title: operator.title
};
}),
overlap: 'right',
width: 128
})
.bindEvent({
change: function(event, data) {
changeConditionOperator(/*$condition.data('position')*/ pos, data.selected[0].id)
}
});
}
function getConditionType(type) {
type = Ox.isArray(type) ? type[0] : type;
if (['float', 'integer', 'year'].indexOf(type) > 1) {
type = 'number';
}
return type;
}
function removeCondition(pos) { function removeCondition(pos) {
self.options.query.conditions.splice(pos, 1); self.options.query.conditions.splice(pos, 1);
self.$conditions.splice(pos, 1); self.$conditions.splice(pos, 1);
updateConditions(); updateConditions();
that.removeItem(pos + 1); self.$form.removeItem(pos + 1);
} }
function updateConditions() { function updateConditions() {
@ -2317,9 +2445,11 @@ requires
}; };
Ox.Form = function(options, self) {
/** /**
*/ */
Ox.Form = function(options, self) {
var self = self || {}, var self = self || {},
that = new Ox.Element('div', self) that = new Ox.Element('div', self)
.defaults({ .defaults({
@ -2437,8 +2567,6 @@ requires
}; };
/**
*/
Ox.FormItem = function(options, self) { Ox.FormItem = function(options, self) {
var self = self || {}, var self = self || {},
@ -2471,6 +2599,8 @@ requires
Form Elements Form Elements
*/ */
Ox.Button = function(options, self) {
/** /**
methods: methods:
toggleDisabled enable/disable button toggleDisabled enable/disable button
@ -2482,7 +2612,7 @@ requires
deselect selectable button was deselected deselect selectable button was deselected
select selectable button was selected select selectable button was selected
*/ */
Ox.Button = function(options, self) {
var self = self || {}, var self = self || {},
that = new Ox.Element('input', self) that = new Ox.Element('input', self)
.defaults({ .defaults({
@ -2632,6 +2762,8 @@ requires
}; };
Ox.ButtonGroup = function(options, self) {
/** /**
options options
buttons array of buttons buttons array of buttons
@ -2643,7 +2775,7 @@ requires
events: events:
change {id, value} selection within a group changed change {id, value} selection within a group changed
*/ */
Ox.ButtonGroup = function(options, self) {
var self = self || {}, var self = self || {},
that = new Ox.Element({}, self) that = new Ox.Element({}, self)
.defaults({ .defaults({
@ -2705,6 +2837,8 @@ requires
return that; return that;
}; };
Ox.Checkbox = function(options, self) {
/** /**
options options
disabled boolean, if true, checkbox is disabled disabled boolean, if true, checkbox is disabled
@ -2721,8 +2855,6 @@ requires
change triggered when checked property changes change triggered when checked property changes
passes {checked, id, title} passes {checked, id, title}
*/ */
Ox.Checkbox = function(options, self) {
var self = self || {}, var self = self || {},
that = new Ox.Element('div', self) that = new Ox.Element('div', self)
@ -2810,6 +2942,8 @@ requires
}; };
Ox.CheckboxGroup = function(options, self) {
/** /**
options options
checkboxes [] array of checkboxes checkboxes [] array of checkboxes
@ -2820,7 +2954,6 @@ requires
change triggered when checked property changes change triggered when checked property changes
passes {checked, id, title} passes {checked, id, title}
*/ */
Ox.CheckboxGroup = function(options, self) {
var self = self || {}, var self = self || {},
that = new Ox.Element('div', self) that = new Ox.Element('div', self)
@ -2880,6 +3013,8 @@ requires
}; };
Ox.Input = function(options, self) {
/** /**
options options
arrows boolearn, if true, and type is 'float' or 'integer', display arrows arrows boolearn, if true, and type is 'float' or 'integer', display arrows
@ -2894,7 +3029,7 @@ requires
autocorrect string ('email', 'float', 'integer', 'phone', 'url'), or autocorrect string ('email', 'float', 'integer', 'phone', 'url'), or
regexp(value), or regexp(value), or
function(key, value, blur, callback), returns value function(key, value, blur, callback), returns value
auto validate --remote validation-- autovalidate --remote validation--
clear boolean, if true, has clear button clear boolean, if true, has clear button
disabled boolean, if true, is disabled disabled boolean, if true, is disabled
height integer, px (for type='textarea' and type='range' with orientation='horizontal') height integer, px (for type='textarea' and type='range' with orientation='horizontal')
@ -2933,7 +3068,7 @@ requires
change change
submit submit
*/ */
Ox.Input = function(options, self) {
var self = self || {}, var self = self || {},
that = new Ox.Element('div', self) that = new Ox.Element('div', self)
.defaults({ .defaults({
@ -3809,6 +3944,8 @@ requires
}; };
Ox.DateInput = function(options, self) {
/** /**
options: options:
format: 'short' format: 'short'
@ -3821,7 +3958,6 @@ requires
year: 48 year: 48
} }
*/ */
Ox.DateInput = function(options, self) {
var self = $.extend(self || {}, { var self = $.extend(self || {}, {
options: $.extend({ options: $.extend({
@ -4402,6 +4538,8 @@ requires
} }
Ox.Range = function(options, self) {
/** /**
options options
arrows boolean if true, show arrows arrows boolean if true, show arrows
@ -4420,7 +4558,7 @@ requires
value number initial value value number initial value
valueNames array value names to display on thumb valueNames array value names to display on thumb
*/ */
Ox.Range = function(options, self) {
var self = self || {}, var self = self || {},
that = new Ox.Element({}, self) that = new Ox.Element({}, self)
.defaults({ .defaults({
@ -4851,10 +4989,14 @@ requires
} }
self.onChange = function(key, value) { self.onChange = function(key, value) {
if (key == 'trackColors') {
} };
}
that.replaceElement = function(pos, element) {
Ox.print('Ox.FormElementGroup replaceElement', pos, element)
self.options.elements[pos].replaceWith(element.$element);
self.options.elements[pos] = element;
};
that.value = function() { that.value = function() {
return $.map(self.options.elements, function(element) { return $.map(self.options.elements, function(element) {
@ -7817,6 +7959,8 @@ requires
.options(options || {}) .options(options || {})
.addClass('OxTextList'); .addClass('OxTextList');
Ox.print('Ox.TextList self.options', self.options)
$.each(self.options.columns, function(i, v) { // fixme: can this go into a generic ox.js function? $.each(self.options.columns, function(i, v) { // fixme: can this go into a generic ox.js function?
// fixme: and can't these just remain undefined? // fixme: and can't these just remain undefined?
if (Ox.isUndefined(v.align)) { if (Ox.isUndefined(v.align)) {
@ -8012,7 +8156,7 @@ requires
isSelected = self.options.sort[0].key == self.options.columns[i].id; isSelected = self.options.sort[0].key == self.options.columns[i].id;
that.sortList( that.sortList(
self.options.columns[i].id, isSelected ? self.options.columns[i].id, isSelected ?
(self.options.sort[0].operator === '' ? '-' : '') : (self.options.sort[0].operator == '+' ? '-' : '+') :
self.options.columns[i].operator self.options.columns[i].operator
); );
} }
@ -8050,7 +8194,7 @@ requires
$order = $('<div>') $order = $('<div>')
.addClass('OxOrder') .addClass('OxOrder')
.html(oxui.symbols['triangle_' + ( .html(oxui.symbols['triangle_' + (
v.operator === '' ? 'up' : 'down' v.operator == '+' ? 'up' : 'down'
)]) )])
.click(function() { .click(function() {
$(this).prev().trigger('click') $(this).prev().trigger('click')
@ -8367,7 +8511,7 @@ requires
var pos = getColumnPositionById(id); var pos = getColumnPositionById(id);
//Ox.print(id, pos) //Ox.print(id, pos)
that.$titles[pos].next().html(oxui.symbols[ that.$titles[pos].next().html(oxui.symbols[
'triangle_' + (self.options.sort[0].operator === '' ? 'up' : 'down') 'triangle_' + (self.options.sort[0].operator == '+' ? 'up' : 'down')
]); ]);
} }
@ -9423,7 +9567,7 @@ requires
that.items = []; that.items = [];
$.each(items, function(i, item) { $.each(items, function(i, item) {
var position; var position;
if (item.id) { if ('id' in item) {
that.items.push(new Ox.MenuItem($.extend(item, { that.items.push(new Ox.MenuItem($.extend(item, {
menu: that, menu: that,
position: position = that.items.length position: position = that.items.length
@ -9941,9 +10085,11 @@ requires
title: Ox.makeArray(options.title || self.defaults.title) title: Ox.makeArray(options.title || self.defaults.title)
})) }))
.addClass('OxItem' + (self.options.disabled ? ' OxDisabled' : '')) .addClass('OxItem' + (self.options.disabled ? ' OxDisabled' : ''))
/*
.attr({ .attr({
id: Ox.toCamelCase(self.options.menu.options('id') + '/' + self.options.id) id: Ox.toCamelCase(self.options.menu.options('id') + '/' + self.options.id)
}) })
*/
.data('group', self.options.group); // fixme: why? .data('group', self.options.group); // fixme: why?
if (self.options.group && self.options.checked === null) { if (self.options.group && self.options.checked === null) {