125 lines
4.8 KiB
JavaScript
125 lines
4.8 KiB
JavaScript
// vim: et:ts=4:sw=4:sts=4:ft=javascript
|
|
|
|
Ox.load('UI', function() {
|
|
Ox.Theme('classic');
|
|
window.app = new Ox.App({url: '/api/'}).bindEvent({
|
|
load: function(event, data) {
|
|
app.site = {
|
|
sortKeys: $.map(data.site.itemKeys, function(key, i) {
|
|
return key.columnWidth ? key : null;
|
|
})
|
|
};
|
|
var position = 0;
|
|
app.main = Ox.SplitPanel({
|
|
elements: [
|
|
{
|
|
element: app.list = Ox.TextList({
|
|
columns: $.map(app.site.sortKeys, function(key, i) {
|
|
var pos = -1;
|
|
if($.inArray(key.id, ['subject', 'origin', 'created'])>=0)
|
|
pos = position++;
|
|
return {
|
|
align: ['string', 'text'].indexOf(
|
|
Ox.isArray(key.type) ? key.type[0]: key.type
|
|
) > -1 ? 'left' : 'right',
|
|
defaultWidth: key.columnWidth,
|
|
format: key.format,
|
|
id: key.id,
|
|
operator: '+',
|
|
position: pos,
|
|
removable: !key.columnRequired,
|
|
title: key.title,
|
|
type: key.type,
|
|
unique: key.id == 'refid',
|
|
visible: $.inArray(key.id, ['subject', 'origin', 'created'])>=0,
|
|
width: key.columnWidth
|
|
};
|
|
}),
|
|
columnsMovable: true,
|
|
columnsRemovable: true,
|
|
columnsResizable: true,
|
|
columnsVisible: true,
|
|
draggable: true,
|
|
items: function(data, callback) {
|
|
app.api.find(data, callback);
|
|
},
|
|
scrollbarVisible: true,
|
|
sort: [{key: 'created', operator: '-'}]
|
|
}).bindEvent({
|
|
select: function(data) {
|
|
data.ids.length && select(data.ids[0]);
|
|
}
|
|
})
|
|
},
|
|
{
|
|
element: app.cable = Ox.Element().addClass('OxSelectable').css({overflow: 'auto'}),
|
|
collapsible: true,
|
|
size: 600,
|
|
resizable: true,
|
|
resize: [200, 400, 600]
|
|
}
|
|
],
|
|
orientation: 'horizontal'
|
|
});
|
|
app.find = Ox.Input({
|
|
clear: true,
|
|
id: 'input',
|
|
placeholder: 'Find...',
|
|
value: '',
|
|
width: 192
|
|
}).css({
|
|
float: 'right',
|
|
margin: '4px'
|
|
})
|
|
.bindEvent({
|
|
submit: function(data) {
|
|
find({conditions: [{key: 'content', value: data.value, operator: ''}]});
|
|
}
|
|
});
|
|
app.frame = Ox.SplitPanel({
|
|
elements: [
|
|
{
|
|
element: app.bar = Ox.Bar().append(app.find),
|
|
size: 24
|
|
},
|
|
{
|
|
element: app.main
|
|
}
|
|
],
|
|
orientation: 'vertical'
|
|
}).appendTo($('body'));
|
|
if(document.location.hash) {
|
|
select(document.location.hash.substring(1));
|
|
}
|
|
}
|
|
});
|
|
});
|
|
function select(id) {
|
|
app.api.get({id: id}, function(result) {
|
|
var term = app.find.value(),
|
|
header = result.data.header,
|
|
content = result.data.content;
|
|
document.location.hash = '#' + result.data.refid;
|
|
if(term) {
|
|
header = Ox.highlight(header, term, 'highlight');
|
|
content = Ox.highlight(content, term, 'highlight');
|
|
}
|
|
app.cable.html('')
|
|
.append($('<div>').css('padding', '8px')
|
|
.addClass('OxSelectable')
|
|
.append($('<pre>').html(header))
|
|
.append($('<pre>').html(content)
|
|
))
|
|
.scrollTop(0);
|
|
});
|
|
}
|
|
function find(query) {
|
|
app.list.options({
|
|
items: function(data, callback) {
|
|
app.api.find(Ox.extend(data, {
|
|
query: query
|
|
}), callback);
|
|
}
|
|
});
|
|
}
|