hack a view

static/css/site.css

@@ -0,0 +1,3 @@
+.highlight {
+    background: rgb(255, 255, 0);
+}

static/js/site.js

@@ -0,0 +1,124 @@
+// 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);
+        }
+    });
+}