openmedialibrary/static/js/findElement.js

223 lines
8.3 KiB
JavaScript
Raw Normal View History

2014-05-04 17:26:43 +00:00
'use strict';
oml.ui.findElement = function() {
var ui = oml.user.ui,
2014-05-17 14:42:46 +00:00
findIndex = ui._findState.index,
2014-05-04 17:26:43 +00:00
findKey = ui._findState.key,
findValue = ui._findState.value,
hasPressedClear = false,
previousFindKey = findKey,
2014-05-17 14:42:46 +00:00
that = Ox.FormElementGroup({
2014-05-04 17:26:43 +00:00
2014-05-17 14:42:46 +00:00
elements: [
2014-05-04 17:26:43 +00:00
2014-05-17 14:42:46 +00:00
oml.$ui.findInSelect = renderFindInSelect(),
2014-05-04 17:26:43 +00:00
2014-05-17 14:42:46 +00:00
oml.$ui.findSelect = Ox.Select({
2014-05-04 17:26:43 +00:00
id: 'select',
items: [].concat(
oml.config.findKeys.map(function(key) {
return {
id: key.id,
title: Ox._('Find: {0}', [Ox._(key.title)])
};
}),
[{}, {
id: 'advanced',
title: Ox._('Find: Advanced...')
}]
),
overlap: 'right',
style: 'squared',
value: findKey,
width: 160
})
.bindEvent({
change: function(data) {
2014-05-14 09:57:11 +00:00
var menu = 'findMenu_finditems_' + data.value,
previousMenu = 'findMenu_finditems_' + previousFindKey;
oml.$ui.mainMenu.checkItem(menu);
oml.$ui.mainMenu.setItemKeyboard(previousMenu, '');
oml.$ui.mainMenu.setItemKeyboard(menu, 'control f');
2014-05-04 17:26:43 +00:00
if (data.value == 'advanced') {
2014-05-14 09:57:11 +00:00
// FIXME: control f when advanced
2014-05-04 17:26:43 +00:00
that.updateElement();
2014-05-14 09:57:11 +00:00
oml.$ui.findDialog = oml.ui.findDialog().open();
2014-05-04 17:26:43 +00:00
} else {
2014-05-14 09:57:11 +00:00
2014-05-04 17:26:43 +00:00
oml.$ui.findInput.options({
autocomplete: getAutocomplete(),
placeholder: ''
}).focusInput(true);
previousFindKey = data.value;
}
}
}),
oml.$ui.findInput = Ox.Input({
autocomplete: getAutocomplete(),
autocompleteSelect: true,
autocompleteSelectHighlight: true,
autocompleteSelectMaxWidth: 256,
autocompleteSelectSubmit: true,
clear: true,
clearTooltip: Ox._('Click to clear or doubleclick to reset query'),
id: 'input',
placeholder: findKey == 'advanced' ? Ox._('Edit Query...') : '',
style: 'squared',
value: findValue,
width: 240
})
.bindEvent({
clear: function() {
hasPressedClear = true;
},
focus: function(data) {
if (oml.$ui.findSelect.value() == 'advanced') {
if (hasPressedClear) {
oml.UI.set({find: oml.site.user.ui.find});
that.updateElement();
hasPressedClear = false;
}
oml.$ui.findInput.blurInput();
2014-05-14 09:57:11 +00:00
oml.$ui.findDialog = oml.ui.findDialog().open();
2014-05-04 17:26:43 +00:00
}
},
submit: function(data) {
2014-05-19 15:00:33 +00:00
// FIXME: oml.$ui.findInSelect.value() is undefined
var scope = oml.$ui.findInSelect.options('value'),
2014-05-04 17:26:43 +00:00
key = oml.$ui.findSelect.value(),
conditions = [].concat(
scope == 'list' ? [{
key: 'list',
2014-05-19 15:00:33 +00:00
operator: '==',
value: ui._list
2014-05-04 17:26:43 +00:00
}] : [],
scope == 'user' ? [{
key: 'list',
2014-05-19 15:00:33 +00:00
operator: '==',
value: ui._list.split(':')[0] + ':'
2014-05-04 17:26:43 +00:00
}] : [],
data.value ? [{
key: key,
value: data.value,
operator: '='
}] : []
);
oml.UI.set({
2014-05-17 14:42:46 +00:00
find: {
conditions: conditions,
operator: '&'
}
});
2014-05-04 17:26:43 +00:00
}
})
2014-05-17 14:42:46 +00:00
]
})
.css({
float: 'right',
margin: '4px 4px 4px 2px'
})
2014-05-04 17:26:43 +00:00
.bindEvent({
oml_find: function() {
that.replaceElement(
2014-05-17 14:42:46 +00:00
0, oml.$ui.findInSelect = renderFindInSelect()
2014-05-04 17:26:43 +00:00
);
}
});
function getAutocomplete() {
var key = !that
? ui._findState.key
: that.value()[ui._list ? 1 : 0],
findKey = Ox.getObjectById(oml.config.findKeys, key);
return findKey && findKey.autocomplete ? function(value, callback) {
oml.api.autocomplete({
key: key,
query: {
conditions: ui._list
2014-05-17 14:42:46 +00:00
&& oml.$ui.findInSelect.value() == 'list'
2014-05-04 17:26:43 +00:00
? [{
2014-05-17 14:42:46 +00:00
key: 'list',
operator: '==',
value: ui._list
2014-05-04 17:26:43 +00:00
}]
: [],
operator: '&'
},
range: [0, 20],
sort: findKey.autocompleteSort,
value: value
}, function(result) {
callback(result.data.items.map(function(item) {
return Ox.decodeHTMLEntities(item);
}));
});
} : null;
}
2014-05-17 14:42:46 +00:00
function renderFindInSelect() {
2014-05-19 15:00:33 +00:00
var items = [
{id: 'all', title: Ox._('Find In: All Libraries')},
{id: 'user', title: Ox._('Find In: This Library')},
{id: 'list', title: Ox._('Find In: This List')}
],
scope = !ui._list ? 'all'
: Ox.endsWith(ui._list, ':') ? 'user'
: 'list',
$select = Ox.Select({
2014-05-04 17:26:43 +00:00
items: [
2014-05-19 15:00:33 +00:00
items[0],
2014-05-04 17:26:43 +00:00
].concat(scope != 'all' ? [
2014-05-19 15:00:33 +00:00
items[1],
2014-05-04 17:26:43 +00:00
] : []).concat(scope == 'list' ? [
2014-05-19 15:00:33 +00:00
items[2]
2014-05-04 17:26:43 +00:00
] : []),
2014-05-19 15:00:33 +00:00
max: 1,
min: 1,
2014-05-04 17:26:43 +00:00
overlap: 'right',
style: 'squared',
title: scope == 'all' ? 'data' : scope,
type: 'image',
2014-05-19 15:00:33 +00:00
tooltip: Ox.getObjectById(items, scope).title,
2014-05-04 17:26:43 +00:00
value: scope
})
.bindEvent({
change: function(data) {
2014-05-17 14:42:46 +00:00
oml.$ui.findInSelect.options({
2014-05-04 17:26:43 +00:00
title: data.value == 'all' ? 'data' : data.value,
tooltip: data.title
});
oml.$ui.findInput.focusInput(true);
}
});
2014-05-17 14:42:46 +00:00
$select.superValue = $select.value;
$select.value = function(value) {
if (arguments.length == 1) {
$select.options({title: value == 'all' ? 'data' : value});
}
$select.superValue.apply($select, arguments);
}
return $select;
2014-05-04 17:26:43 +00:00
}
that.updateElement = function() {
var findState = ui._findState;
oml.$ui.findSelect.value(findState.key);
oml.$ui.findInput.options(
findState.key == 'advanced' ? {
placeholder: Ox._('Edit Query...'),
value: ''
} : {
autocomplete: getAutocomplete(),
placeholder: '',
value: findState.value
}
);
};
return that;
};