use scrollbarVisible for api view

This commit is contained in:
j 2011-01-26 17:42:51 +05:30
parent 6c33088060
commit ea6c5529a2

View file

@ -1,19 +1,17 @@
/*** /***
Pandora API Pandora API
***/ ***/
var app = new Ox.App({ var app = new Ox.App({
apiURL: '/api/', apiURL: '/api/',
init: 'init', init: 'init',
}).launch(function(data) { }).launch(function(data) {
Ox.print('data', data)
app.config = data.config; app.config = data.config;
app.user = data.user; app.user = data.user;
if (app.user.group == 'guest') { if (app.user.group == 'guest') {
app.user = data.config.user; app.user = data.config.user;
$.browser.safari && Ox.theme('modern'); $.browser.safari && Ox.theme('modern');
} }
app.config.default_info = '<div class="OxSelectable"><h2>Overview</h2>use this api in the browser with Ox.app or use <a href="http://code.0x2620.org/pandora_client">pandora_client</a> to use it in python</div>';
app.$body = $('body'); app.$body = $('body');
app.$document = $(document); app.$document = $(document);
app.$window = $(window); app.$window = $(window);
@ -21,7 +19,7 @@ var app = new Ox.App({
app.$ui = {}; app.$ui = {};
app.$ui.actionList = constructList(); app.$ui.actionList = constructList();
app.$ui.actionInfo = Ox.Container().css({padding: '8px'}); app.$ui.actionInfo = Ox.Container().css({padding: '16px'}).html(app.config.default_info);
app.api.api({docs: true}, function(results) { app.api.api({docs: true}, function(results) {
app.actions = results.data.actions; app.actions = results.data.actions;
@ -31,11 +29,26 @@ var app = new Ox.App({
} }
}); });
app.$ui.actionList.$body.css({overflowX: 'hidden', overflowY: 'auto'}); var $left = new Ox.SplitPanel({
elements: [
{
element: new Ox.Element().html(app.config.site.name + ' API').css({
'background-color': '#ddd',
'font-weight': 'bold',
'padding': '8px'
}),
size: 24
},
{
element: app.$ui.actionList
}
],
orientation: 'vertical'
});
var $main = new Ox.SplitPanel({ var $main = new Ox.SplitPanel({
elements: [ elements: [
{ {
element: app.$ui.actionList, element: $left,
size: 160 size: 160
}, },
{ {
@ -90,6 +103,7 @@ function constructList() {
}); });
} }
}, },
scrollbarVisible: true,
sort: [ sort: [
{ {
key: "name", key: "name",
@ -100,12 +114,16 @@ function constructList() {
select: function(event, data) { select: function(event, data) {
var info = $('<div>').addClass('OxSelectable'), var info = $('<div>').addClass('OxSelectable'),
hash = '#'; hash = '#';
if(data.ids.length)
$.each(data.ids, function(v, k) { $.each(data.ids, function(v, k) {
console.log(k) console.log(k)
info.append($("<h2>").html(k)); info.append($("<h2>").html(k));
info.append($('<pre>').html(app.actions[k]['doc'].replace('/\n/<br>\n/g'))); info.append($('<pre>').html(app.actions[k]['doc'].replace('/\n/<br>\n/g')));
hash += k + ',' hash += k + ','
}); });
else
info.html(app.config.default_info);
document.location.hash = hash.substring(0, hash.length-1); document.location.hash = hash.substring(0, hash.length-1);
app.$ui.actionInfo.html(info); app.$ui.actionInfo.html(info);
} }