forked from 0x2620/oxjs
Ox.Filter, round 1
This commit is contained in:
rlx
parent
ca1965312a
commit
f5b3b56765
7 changed files with 438 additions and 45 deletions
|
|
@ -134,9 +134,8 @@ requires
|
|||
self.options = $.extend({
|
||||
apiTimeout: 60000,
|
||||
apiType: 'POST',
|
||||
apiURL: '',
|
||||
config: '',
|
||||
init: ''
|
||||
apiURL: '/api/',
|
||||
init: 'init'
|
||||
}, options);
|
||||
|
||||
function getUserAgent() {
|
||||
|
|
@ -241,8 +240,8 @@ requires
|
|||
};
|
||||
});
|
||||
that.api[self.options.init](getUserData(), function(data) {
|
||||
var user = data.data.user,
|
||||
config = data.data.config;
|
||||
var config = data.data.config,
|
||||
user = data.data.user;
|
||||
document.title = config.site.name;
|
||||
$(function() {
|
||||
var $div = $body.find('div');
|
||||
|
|
@ -667,7 +666,7 @@ requires
|
|||
requests = {},
|
||||
self = {
|
||||
options: {
|
||||
timeout: 15000,
|
||||
timeout: 60000,
|
||||
type: 'POST',
|
||||
url: 'api'
|
||||
}
|
||||
|
|
@ -2090,13 +2089,230 @@ requires
|
|||
*/
|
||||
Ox.Filter = function(options, self) {
|
||||
|
||||
var self = self || {}
|
||||
that = new Ox.Element()
|
||||
var self = self || {},
|
||||
that = new Ox.Element('div', self)
|
||||
.defaults({
|
||||
|
||||
keys: [],
|
||||
query: {
|
||||
conditions: [],
|
||||
operator: '&'
|
||||
}
|
||||
})
|
||||
.options(options || {});
|
||||
|
||||
Ox.print('s.o', self.options)
|
||||
|
||||
if (!self.options.query.conditions.length) {
|
||||
self.options.query.conditions = [{
|
||||
key: self.options.keys[0].id,
|
||||
value: ''
|
||||
}];
|
||||
}
|
||||
|
||||
$.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({
|
||||
elements: [
|
||||
new Ox.Label({
|
||||
title: 'Match',
|
||||
overlap: 'right',
|
||||
width: 48
|
||||
}),
|
||||
new Ox.Select({
|
||||
items: [
|
||||
{id: 'all', title: 'all'},
|
||||
{id: 'any', title: 'any'},
|
||||
],
|
||||
overlap: 'right',
|
||||
width: 48
|
||||
}),
|
||||
new Ox.Label({
|
||||
title: 'of the following conditions',
|
||||
width: 160
|
||||
}),
|
||||
],
|
||||
float: 'left',
|
||||
});
|
||||
|
||||
self.$buttons = [];
|
||||
self.$conditions = $.map(self.options.query.conditions, function(condition, i) {
|
||||
return constructCondition(condition, i);
|
||||
});
|
||||
|
||||
self.$limit = new Ox.InputGroup({
|
||||
inputs: [
|
||||
new Ox.Checkbox({
|
||||
width: 16
|
||||
}),
|
||||
new Ox.FormElementGroup({
|
||||
elements: [
|
||||
new Ox.Input({
|
||||
width: 56
|
||||
}),
|
||||
new Ox.Select({
|
||||
items: [
|
||||
{id: 'items', title: 'items'},
|
||||
{},
|
||||
{id: 'hours', title: 'hours'},
|
||||
{id: 'days', title: 'days'},
|
||||
{},
|
||||
{id: 'GB', title: 'GB'}
|
||||
],
|
||||
overlap: 'left',
|
||||
width: 64
|
||||
})
|
||||
],
|
||||
float: 'right',
|
||||
width: 120
|
||||
}),
|
||||
new Ox.Select({
|
||||
/*
|
||||
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
|
||||
})
|
||||
],
|
||||
separators: [
|
||||
{title: 'Limit to', width: 56},
|
||||
{title: 'sorted by', width: 64}
|
||||
]
|
||||
});
|
||||
|
||||
self.$items = $.merge($.merge([self.$operator], self.$conditions), [self.$limit]);
|
||||
|
||||
that = new Ox.Form({
|
||||
items: self.$items
|
||||
}, $.extend({}, self));
|
||||
|
||||
function addCondition(pos) {
|
||||
var key = self.options.keys[0];
|
||||
self.options.query.conditions.splice(pos, 0, {
|
||||
key: key.id,
|
||||
value: '',
|
||||
operator: self.relations[key.type][0].operator
|
||||
});
|
||||
self.$conditions.splice(pos, 0, constructCondition({}, pos));
|
||||
updateConditions();
|
||||
that.addItem(pos + 1, self.$conditions[pos]);
|
||||
}
|
||||
|
||||
function constructCondition(condition, pos) {
|
||||
var $condition;
|
||||
return $condition = new Ox.FormElementGroup({
|
||||
elements: [
|
||||
new Ox.Select({
|
||||
items: $.extend({}, self.options.keys), // fixme: Ox.Menu messes with keys
|
||||
overlap: 'right',
|
||||
width: 128
|
||||
}),
|
||||
new Ox.Select({
|
||||
items: $.map(self.relations[self.options.keys[0].type], function(relation) {
|
||||
return {id: relation.title, title: relation.title}
|
||||
}),
|
||||
overlap: 'right',
|
||||
width: 128
|
||||
}),
|
||||
new Ox.Input({
|
||||
width: 256
|
||||
}),
|
||||
new Ox.Button({
|
||||
disabled: self.options.query.conditions.length == 1,
|
||||
id: 'remove',
|
||||
title: 'remove',
|
||||
tooltip: 'Remove Condition',
|
||||
type: 'image'
|
||||
})
|
||||
.css({margin: '0 4px 0 8px'})
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
removeCondition($condition.data('position'));
|
||||
}
|
||||
}),
|
||||
new Ox.Button({
|
||||
id: 'add',
|
||||
title: 'add',
|
||||
tooltip: 'Add Condition',
|
||||
type: 'image'
|
||||
})
|
||||
.css({margin: '0 4px 0 4px'})
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
addCondition($condition.data('position') + 1)
|
||||
}
|
||||
}),
|
||||
new Ox.Button({
|
||||
id: 'more',
|
||||
title: 'more',
|
||||
tooltip: 'Add Group of Conditions',
|
||||
type: 'image'
|
||||
})
|
||||
.css({margin: '0 0 0 4px'}),
|
||||
]
|
||||
})
|
||||
.data({position: pos});
|
||||
}
|
||||
|
||||
function removeCondition(pos) {
|
||||
self.options.query.conditions.splice(pos, 1);
|
||||
self.$conditions.splice(pos, 1);
|
||||
updateConditions();
|
||||
that.removeItem(pos + 1);
|
||||
}
|
||||
|
||||
function updateConditions() {
|
||||
self.$conditions.forEach(function(condition, pos) {
|
||||
condition.data({position: pos});
|
||||
});
|
||||
self.$conditions[0].options('elements')[3].options({
|
||||
disabled: self.options.query.conditions.length == 1
|
||||
});
|
||||
}
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
|
|
@ -2127,8 +2343,7 @@ requires
|
|||
$.each(self.options.items, function(i, item) {
|
||||
self.itemIds[i] = item.options('id') || item.id;
|
||||
self.itemIsValid[i] = !!item.value().length;
|
||||
that.append(self.$items[i] = new Ox.FormItem({element: item}))
|
||||
.append(self.$messages[i] = new Ox.Element().addClass('OxFormMessage'));
|
||||
that.append(self.$items[i] = new Ox.FormItem({element: item}));
|
||||
item.bindEvent({
|
||||
/*
|
||||
blur: function(event, data) {
|
||||
|
|
@ -2143,22 +2358,14 @@ requires
|
|||
autovalidate: function(event, data) {
|
||||
data.valid = !!data.value.length;
|
||||
validate(i, data.valid);
|
||||
if (data.valid) {
|
||||
self.$messages[i].html('').hide();
|
||||
} else {
|
||||
//self.$messages[i].html(data.message).show();
|
||||
}
|
||||
data.valid && self.$items[i].setMessage('');
|
||||
},
|
||||
submit: function(event, data) {
|
||||
self.formIsValid && that.submit();
|
||||
},
|
||||
validate: function(event, data) {
|
||||
validate(i, data.valid);
|
||||
if (data.valid) {
|
||||
self.$messages[i].html('').hide();
|
||||
} else {
|
||||
self.$messages[i].html(data.message).show();
|
||||
}
|
||||
self.$items[i].setMessage(data.valid ? '' : data.message);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -2167,13 +2374,9 @@ requires
|
|||
return self.itemIds.indexOf(id);
|
||||
}
|
||||
|
||||
function setMessage(id, message) {
|
||||
self.$messages[getItemPositionById(id)].html(message)[message !== '' ? 'show' : 'hide']();
|
||||
}
|
||||
|
||||
function submitCallback(data) {
|
||||
$.each(data, function(i, v) {
|
||||
setMessage(v.id, v.message);
|
||||
self.$items[i].setMessage(v.message);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -2188,6 +2391,22 @@ requires
|
|||
}
|
||||
}
|
||||
|
||||
that.addItem = function(pos, item) {
|
||||
Ox.print('addItem', pos)
|
||||
self.options.items.splice(pos, 0, item);
|
||||
self.$items.splice(pos, 0, new Ox.FormItem({element: item}));
|
||||
pos == 0 ?
|
||||
self.$items[pos].insertBefore(self.$items[0]) :
|
||||
self.$items[pos].insertAfter(self.$items[pos - 1]);
|
||||
}
|
||||
|
||||
that.removeItem = function(pos) {
|
||||
Ox.print('removeItem', pos);
|
||||
self.$items[pos].remove();
|
||||
self.options.items.splice(pos, 1);
|
||||
self.$items.splice(pos, 1);
|
||||
}
|
||||
|
||||
that.submit = function() {
|
||||
//Ox.print('---- that.values()', that.values())
|
||||
self.options.submit(that.values(), submitCallback);
|
||||
|
|
@ -2232,6 +2451,14 @@ requires
|
|||
.addClass('OxFormItem')
|
||||
.append(self.options.element);
|
||||
|
||||
self.$message = new Ox.Element()
|
||||
.addClass('OxFormMessage')
|
||||
.appendTo(that);
|
||||
|
||||
that.setMessage = function(message) {
|
||||
self.$message.html(message)[message !== '' ? 'show' : 'hide']();
|
||||
}
|
||||
|
||||
that.value = function() {
|
||||
return self.options.element.value();
|
||||
};
|
||||
|
|
@ -2504,11 +2731,15 @@ requires
|
|||
id: '',
|
||||
group: false,
|
||||
checked: false,
|
||||
overlap: 'none',
|
||||
title: '',
|
||||
width: 'auto'
|
||||
})
|
||||
.options(options || {})
|
||||
.addClass('OxCheckbox')
|
||||
.addClass('OxCheckbox' +
|
||||
(self.options.overlap == 'none' ? '' : ' OxOverlap' +
|
||||
Ox.toTitleCase(self.options.overlap))
|
||||
)
|
||||
.attr(self.options.disabled ? {
|
||||
disabled: 'disabled'
|
||||
} : {});
|
||||
|
|
@ -2872,6 +3103,9 @@ requires
|
|||
|
||||
function autocomplete(oldValue, oldCursor) {
|
||||
|
||||
oldValue = Ox.isUndefined(oldValue) ? self.options.value : oldValue;
|
||||
oldCursor = Ox.isUndefined(oldCursor) ? cursor : oldCursor;
|
||||
|
||||
Ox.print('autocomplete', oldValue, oldCursor)
|
||||
|
||||
if (self.options.value || self.options.autocompleteReplaceCorrect) {
|
||||
|
|
@ -3405,6 +3639,7 @@ requires
|
|||
});
|
||||
|
||||
$.each(self.options.separators, function(i, v) {
|
||||
self.options.id == 'debug' && Ox.print('separator #' + i + ' ' + self.options.inputs[i].options('id') + ' ' + self.options.inputs[i].options('width'))
|
||||
self.$separator[i] = new Ox.Label({
|
||||
textAlign: 'center',
|
||||
title: v.title,
|
||||
|
|
@ -3453,7 +3688,7 @@ requires
|
|||
return v.options('width');
|
||||
})) + Ox.sum($.map(self.options.separators, function(v, i) {
|
||||
return v.width;
|
||||
}));
|
||||
})) + 2; // fixme: why + 2?
|
||||
}
|
||||
|
||||
function setWidths() {
|
||||
|
|
@ -4438,6 +4673,8 @@ requires
|
|||
key_down: showMenu
|
||||
});
|
||||
|
||||
Ox.print('Ox.Select', self.options)
|
||||
|
||||
$.extend(self, {
|
||||
buttonId: self.options.id + 'Button',
|
||||
groupId: self.options.id + 'Group',
|
||||
|
|
@ -9015,6 +9252,7 @@ requires
|
|||
select_menuId {id, value} item was selected
|
||||
*/
|
||||
Ox.Menu = function(options, self) {
|
||||
|
||||
var self = self || {},
|
||||
that = new Ox.Element({}, self)
|
||||
.defaults({
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue