move api to apiDialog

This commit is contained in:
j 2013-03-04 07:26:01 +00:00
parent e602ca9dc9
commit c3abc71fd0
5 changed files with 189 additions and 195 deletions

View File

@ -2,30 +2,32 @@
<html>
<head>
<meta charset="utf-8" />
<title>{{sitename}} API</title>
<link rel="shortcut icon" type="image/png" href="/static/png/icon.png"/>
<script type="text/javascript" src="/static/oxjs/build/Ox.js"></script>
<script type="text/javascript" src="/static/js/api/pandora.js"></script>
<title>{{title}}</title>
<link rel="icon" type="image/png" href="/static/png/icon.png" />
<meta name="application-name" content="{{settings.SITENAME}}"/>
<meta name="application-url" content="{{base_url}}"/>
<link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="{{settings.SITENAME}}" />
<link rel="alternate" type="application/atom+xml" title="{{settings.SITENAME}}" href="/atom.xml" />
<script>
if (localStorage && !localStorage['Ox.theme'])
localStorage['Ox.theme'] = '"{{settings.CONFIG.user.ui.theme}}"';
</script>
<script type="text/javascript" src="/static/js/pandora.js?{{settings.CONFIG.site.version}}"></script>
<meta name="title" content="{{title}}" />
<meta name="description" content="{{settings.CONFIG.site.description}}"/>
<meta property="og:title" content="{{title}}"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="{{base_url}}"/>
<meta property="og:image" content="{{base_url}}static/png/icon.png"/>
<meta property="og:site_name" content="{{settings.SITENAME}}"/>
<meta property="og:description" content="{{settings.CONFIG.site.description}}"/>
<meta name="google" value="notranslate"/>
</head>
<body></body>
<body>
<!--
<div id="static_apidocs">
<h1>{{sitename}} Public API</h1>
<a href="http://code.0x2620.org/pandora/annotate/head%3A/pandora/backend/views.py">look inside</a>
<div>
{% for f in api %}
<div>
<h2><a name="{{f.name}}">action: {{f.name}}</a></h2>
<pre style="padding-left: 24px">
{{f.doc|safe}}
</pre>
</div>
{% endfor %}
</div>
</div>
-->
<noscript>
<h1>{{title}}</h1>
<p>{{text|safe}}</p>
<p>{{settings.SITENAME}} requires JavaScript</p>
</noscript>
</body>
</html>

View File

@ -1,169 +0,0 @@
/***
Pandora API
***/
Ox.load('UI', {
hideScreen: false,
showScreen: true,
theme: 'oxlight'
}, function() {
var app = new Ox.App({
url: '/api/',
init: 'init',
}).bindEvent('load', function(data) {
app.site = data.site;
app.user = data.user;
app.site.default_info = '<div class="OxSelectable"><h2>Pan.do/ra API Overview</h2>use this api in the browser with <a href="/static/oxjs/demos/doc2/index.html#Ox.App">Ox.app</a> or use <a href="http://code.0x2620.org/pandora_client">pandora_client</a> it in python. Further description of the api can be found <a href="https://wiki.0x2620.org/wiki/pandora/API">on the wiki</a></div>';
app.$body = $('body');
app.$document = $(document);
app.$window = $(window);
//app.$body.html('');
Ox.UI.hideLoadingScreen();
app.$ui = {};
app.$ui.actionList = constructList();
app.$ui.actionInfo = Ox.Container().css({padding: '16px'}).html(app.site.default_info);
app.api.api({docs: true, code: true}, function(results) {
app.actions = results.data.actions;
if (document.location.hash) {
app.$ui.actionList.triggerEvent('select', {
ids: document.location.hash.substring(1).split(',')
});
}
});
var $left = new Ox.SplitPanel({
elements: [
{
element: new Ox.Element().append(new Ox.Element()
.html(app.site.site.name + ' API').css({
'padding': '4px',
})).css({
'background-color': '#ddd',
'font-weight': 'bold',
}),
size: 24
},
{
element: app.$ui.actionList
}
],
orientation: 'vertical'
});
var $main = new Ox.SplitPanel({
elements: [
{
element: $left,
size: 160
},
{
element: app.$ui.actionInfo,
}
],
orientation: 'horizontal'
});
$main.appendTo(app.$body);
});
function constructList() {
return new Ox.TableList({
columns: [
{
align: "left",
id: "name",
operator: "+",
title: "Name",
visible: true,
width: 140
},
],
columnsMovable: false,
columnsRemovable: false,
id: 'actionList',
items: function(data, callback) {
function _sort(a, b) {
return a.name > b.name ? 1 : a.name == b.name ? 0 : -1;
}
if (!data.keys) {
app.api.api(function(results) {
var items = [];
Ox.forEach(results.data.actions, function(v, k) {
items.push({'name': k})
});
items.sort(_sort);
var result = {'data': {'items': items.length}};
callback(result);
});
} else {
app.api.api(function(results) {
var items = [];
Ox.forEach(results.data.actions, function(v, k) {
items.push({'name': k})
});
items.sort(_sort);
var result = {'data': {'items': items}};
callback(result);
});
}
},
scrollbarVisible: true,
sort: [{key: "name", operator: "+"}],
unique: 'name'
}).bindEvent({
select: function(data) {
var info = $('<div>').addClass('OxSelectable'),
hash = '#';
if (data.ids.length)
data.ids.forEach(function(id) {
info.append(
$('<h2>')
.html(id)
.css({
marginBottom: '8px'
})
);
var code = app.actions[id].code[1],
f = app.actions[id].code[0],
line = Math.round(Ox.last(f.split(':')) || 0),
doc = app.actions[id].doc.replace('/\n/<br>\n/g'),
$code, $doc;
$doc = Ox.SyntaxHighlighter({
source: doc,
})
.appendTo(info);
Ox.Button({
title: 'View Source (' + f + ')',
}).bindEvent({
click: function() {
$code.toggle();
}
})
.css({
margin: '4px'
})
.appendTo(info);
$code = Ox.SyntaxHighlighter({
showLineNumbers: true,
source: code,
offset: line
})
.css({
borderWidth: '1px',
}).appendTo(info).hide();
Ox.print(code);
hash += id + ','
});
else
info.html(app.site.default_info);
document.location.hash = hash.slice(0, -1);
app.$ui.actionInfo.html(info);
}
});
}
});

View File

@ -0,0 +1,158 @@
// vim: et:ts=4:sw=4:sts=4:ft=javascript
'use strict';
pandora.ui.apiDialog = function() {
var actions,
$loading = Ox.Element()
.append(
$('<img>')
.attr({src: Ox.UI.getImageURL('symbolLoadingAnimated')})
.css({
position: 'absolute',
width: '32px',
height: '32px',
left: 0,
top: 0,
right: 0,
bottom: 0,
margin: 'auto'
})
),
$panel, $list, $text,
that = Ox.Dialog({
buttons: [
Ox.Button({
id: 'close',
title: 'Close'
}).bindEvent({
click: function() {
that.close();
}
})
],
closeButton: true,
content: $loading,
height: Math.round((window.innerHeight - 24) * 0.75),
keys: {escape: 'close'},
maximizeButton: true,
minHeight: 256,
minWidth: 576,
title: 'API Documentation',
width: Math.round(window.innerWidth * 0.75)
})
.bindEvent({
close: function() {
pandora.UI.set({page: ''});
},
resize: function() {
$list.size();
}
}),
overview = '<div class="OxSelectable"><h2>Pan.do/ra API Overview</h2>use this api in the browser with <a href="/static/oxjs/demos/doc2/index.html#Ox.App">Ox.app</a> or use <a href="http://code.0x2620.org/pandora_client">pandora_client</a> it in python. Further description of the api can be found <a href="https://wiki.0x2620.org/wiki/pandora/API">on the wiki</a></div>';
pandora.api.api({docs: true, code: true}, function(results) {
var items = [];
actions = results.data.actions;
Ox.forEach(results.data.actions, function(v, k) {
items.push({
'id': k,
'title': k
});
});
items.sort(function (a, b) {
return a.name > b.name ? 1 : a.name == b.name ? 0 : -1;
});
$list = Ox.TableList({
_tree: true,
columns: [
{
id: 'title',
visible: true,
width: 192 - Ox.UI.SCROLLBAR_SIZE
}
],
items: items,
max: 1,
min: 1,
scrollbarVisible: true,
selected: [],
sort: [{key: 'title', operator: '+'}],
unique: 'id'
})
.bindEvent({
select: selectSection
});
$text = Ox.Element()
.css({
padding: '16px',
overflowY: 'auto'
})
.html(overview);
$panel = Ox.SplitPanel({
elements: [
{element: $list, size: 192},
{element: $text}
],
orientation: 'horizontal'
});
that.options({content: $panel});
});
function selectSection(data) {
if (data.ids.length) {
$text.html('');
data.ids.forEach(function(id) {
$text.append(
$('<h2>')
.html(id)
.css({
marginBottom: '8px'
})
);
var code = actions[id].code[1],
f = actions[id].code[0],
line = Math.round(Ox.last(f.split(':')) || 0),
doc = actions[id].doc.replace('/\n/<br>\n/g'),
$code, $doc;
$doc = Ox.SyntaxHighlighter({
source: doc,
})
.appendTo($text);
Ox.Button({
title: 'View Source (' + f + ')',
}).bindEvent({
click: function() {
$code.toggle();
}
})
.css({
margin: '4px'
})
.appendTo($text);
$code = Ox.SyntaxHighlighter({
showLineNumbers: true,
source: code,
offset: line
})
.css({
borderWidth: '1px',
}).appendTo($text).hide();
});
} else {
$text.html(overview);
}
}
return that;
};

View File

@ -41,7 +41,7 @@ pandora.ui.appPanel = function() {
// unless we're on page load, remove home screen
pandora.$ui.home.fadeOutScreen();
}
['site', 'account', 'preferences', 'help'].forEach(function(dialog) {
['site', 'account', 'preferences', 'help', 'api'].forEach(function(dialog) {
pandora.$ui[dialog + 'Dialog'] && pandora.$ui[dialog + 'Dialog'].close();
});
if (pandora.$ui.tv) {
@ -63,6 +63,8 @@ pandora.ui.appPanel = function() {
}
} else if (page == 'help') {
pandora.$ui.helpDialog = pandora.ui.helpDialog().open();
} else if (page == 'api') {
pandora.$ui.apiDialog = pandora.ui.apiDialog().open();
} else if (['signup', 'signin'].indexOf(page) > -1) {
if (pandora.user.level == 'guest') {
if (pandora.$ui.accountDialog && pandora.$ui.accountDialog.is(':visible')) {

View File

@ -150,7 +150,8 @@ pandora.ui.mainMenu = function() {
{ id: 'statistics', title: 'Statistics...', disabled: !pandora.site.capabilities.canManageUsers[pandora.user.level] }
] },
{ id: 'helpMenu', title: 'Help', items: [
{ id: 'help', title: pandora.site.site.name + ' Help', keyboard: 'control ?' }
{ id: 'help', title: pandora.site.site.name + ' Help', keyboard: 'control ?' },
{ id: 'api', title: pandora.site.site.name + ' API' }
] }
],
pandora.site.capabilities.canSeeDebugMenu[pandora.user.level]
@ -285,7 +286,7 @@ pandora.ui.mainMenu = function() {
click: function(data) {
if ([
'home', 'software', 'signup', 'signin', 'signout',
'preferences', 'tv', 'help'
'preferences', 'tv', 'help', 'api'
].concat(
pandora.site.sitePages.map(function(page) {
return page.id;