pandora/static/js/apiDialog.js

253 lines
8.7 KiB
JavaScript
Raw Normal View History

2013-03-04 07:26:01 +00:00
// vim: et:ts=4:sw=4:sts=4:ft=javascript
'use strict';
pandora.ui.apiDialog = function() {
var selected = pandora.user.ui.part.api,
2013-03-04 12:00:00 +00:00
actions,
2013-03-04 07:26:01 +00:00
$panel, $list, $text,
that = Ox.Dialog({
buttons: [
2013-03-04 12:53:13 +00:00
Ox.Button({
id: 'switch',
2013-05-09 10:13:58 +00:00
title: Ox._('Help...')
2013-03-04 12:53:13 +00:00
}).bindEvent({
click: function() {
pandora.UI.set({page: 'help'});
2013-03-04 12:53:13 +00:00
}
}),
2013-03-04 15:22:26 +00:00
{},
2013-03-04 07:26:01 +00:00
Ox.Button({
id: 'close',
2013-05-09 10:13:58 +00:00
title: Ox._('Close')
2013-03-04 07:26:01 +00:00
}).bindEvent({
click: function() {
that.close();
}
})
],
closeButton: true,
2013-11-20 08:12:59 +00:00
content: Ox.LoadingScreen().start(),
2013-03-05 12:53:48 +00:00
height: 384,
2013-03-04 07:26:01 +00:00
keys: {escape: 'close'},
maximizeButton: true,
minHeight: 256,
2014-09-26 12:12:25 +00:00
minWidth: 544 + Ox.UI.SCROLLBAR_SIZE,
2013-03-04 12:00:00 +00:00
removeOnClose: true,
2013-05-09 10:13:58 +00:00
title: Ox._('API Documentation'),
2014-09-26 12:12:25 +00:00
width: 672 + Ox.UI.SCROLLBAR_SIZE
2013-03-04 07:26:01 +00:00
})
.bindEvent({
close: function() {
pandora.user.ui.page == 'api' && pandora.UI.set({page: ''});
2013-03-04 07:26:01 +00:00
},
resize: function() {
$list.size();
2013-03-04 12:00:00 +00:00
},
'pandora_part.api': function(data) {
2013-03-04 12:00:00 +00:00
pandora.user.ui.page == 'api' && that.select(data.value);
2013-03-04 07:26:01 +00:00
}
2013-03-07 11:14:10 +00:00
});
2013-03-04 07:26:01 +00:00
pandora.api.api({docs: true, code: true}, function(results) {
2013-03-04 12:00:00 +00:00
var items = [{
id: '',
2013-05-09 10:13:58 +00:00
title: Ox._('API Documentation'),
sort: 'aaa' // FIXME: what's this?
2013-03-04 12:00:00 +00:00
}];
2013-03-04 07:26:01 +00:00
actions = results.data.actions;
Ox.forEach(results.data.actions, function(v, k) {
items.push({
'id': k,
2013-03-04 12:00:00 +00:00
'title': k,
'sort': k
2013-03-04 07:26:01 +00:00
});
});
$list = Ox.TableList({
_tree: true,
columns: [
{
id: 'title',
visible: true,
2014-09-26 12:12:25 +00:00
width: 128 - Ox.UI.SCROLLBAR_SIZE
2013-03-04 07:26:01 +00:00
}
],
items: items,
max: 1,
min: 1,
scrollbarVisible: true,
2013-03-04 15:22:26 +00:00
selected: [selected],
2013-03-04 12:00:00 +00:00
sort: [{key: 'sort', operator: '+'}],
2013-03-04 07:26:01 +00:00
unique: 'id'
})
.bindEvent({
2013-03-04 12:00:00 +00:00
select: function(data) {
var id = data.ids[0];
pandora.UI.set({'part.api': id});
2013-03-04 12:00:00 +00:00
}
2013-03-04 07:26:01 +00:00
});
$text = Ox.Element()
.css({
padding: '16px',
2013-03-07 11:14:10 +00:00
lineHeight: '16px',
2013-03-04 07:26:01 +00:00
overflowY: 'auto'
2013-03-07 11:14:10 +00:00
});
2013-03-04 07:26:01 +00:00
$panel = Ox.SplitPanel({
elements: [
2013-03-07 11:14:10 +00:00
{element: $list, size: 128},
2013-03-04 07:26:01 +00:00
{element: $text}
],
orientation: 'horizontal'
});
2013-03-04 15:22:26 +00:00
that.select(selected).options({content: $panel});
$list.gainFocus();
2013-03-04 07:26:01 +00:00
});
2014-12-18 13:38:08 +00:00
function getDoc(string) {
/*
API Documentation format:
Description
takes {
key: value, // comment
key: value, // comment
...
}
returns {
key: value, // comment
key: value, // comment
...
}
notes: Notes
see: action, action, ...
*/
var $doc = Ox.SyntaxHighlighter({
2014-12-18 13:43:21 +00:00
source: string.replace(
/\n(?=(takes \{|returns \{|note: |see: ))/g, '\n\n'
)
})
2014-12-18 13:38:08 +00:00
parts, parts_;
['Keyword', 'Method', 'Property'].forEach(function(type) {
$doc.find('.Ox' + type).removeClass('Ox' + type);
});
$doc.html(
$doc.html()
.replace(/(takes \{|returns \{|note: |see: )/g, '<b>$1</b>')
.replace(/`(\w+?)`/g, '<b>$1</b>')
);
parts = $doc.html.split('<b>notes: </b>');
if (len(parts) == 2) {
parts_ = parts[1].split('<b>see: </b>');
if (len(parts_) == 2) {
parts_[0] = parts_[0].replace(/\n\s+?/g, ' ');
parts[1] = parts_.join('<b>see: </b>');
} else {
parts[1] = parts[1].replace(/\n\s+?/g, ' ');
}
$doc.html(parts.join('<b>notes: </b>'));
}
parts = $doc.html.split('<b>see: </b>');
if (len(parts) == 2) {
parts[1] = parts[1].replace(/\n\s+?/, '').split(', ').map(
function(action) {
return '<a href="/api/' + action + '">' + action + '</a>';
}
).join(', ');
$doc.html(parts.join('<b>see: </b>'));
}
pandora.createLinks($doc);
return $doc;
}
2013-03-07 11:14:10 +00:00
function getIndex() {
var $index = Ox.Element()
.html(Ox._(
2013-03-07 11:14:10 +00:00
'<h1><b>API Documentation</b></h1>\n'
+ '<p><b>{0}</b> uses a JSON API'
2013-03-07 11:14:10 +00:00
+ ' to communicate between the browser and the server.'
+ ' This API is 100% public, which means that there is'
+ ' virtually no limit to what you can do with the site,'
+ ' or build on top of it &mdash; from writing simple scripts'
+ ' to read or write specific information to including'
+ ' data from <b>{0}</b>'
2013-03-07 11:14:10 +00:00
+ ' (not just videos, but also metadata, annotations, lists,'
+ ' or a custom search interface) in your own website.</p>\n'
+ '<p>If you are using the API in JavaScript, you may want to'
+ ' take a look at <a href="https://oxjs.org/#doc/Ox.API">'
+ ' OxJS</a>, and if you are using Python, there is'
+ ' <a href="https://wiki.0x2620.org/wiki/python-ox">'
+ ' python-ox</a>, which is used by'
+ ' <a href="https://wiki.0x2620.org/wiki/pandora_client">'
+ ' pandora_client</a> to automate certain tasks.</p>\n'
+ '<p>To get started, just open the console and paste the'
+ ' following snippet. For the first ten items that are'
+ ' both shorter than one hour and whose title does not'
+ ' start with "X" (sorted by duration, then title, both'
+ ' in ascending order), it will return their duration,'
+ ' id and title properties.</p>',
[pandora.site.site.name]))
2013-03-07 11:14:10 +00:00
.append(
Ox.SyntaxHighlighter({
source: "pandora.api.find({\n"
+ " keys: ['duration', 'id', 'title'],\n"
+ " query: {\n"
+ " conditions: [\n"
+ " {key: 'duration', operator: '<', value: '01:00:00'},\n"
+ " {key: 'title', operator: '!=', value: 'x*'}\n"
+ " ],\n"
+ " operator: '&'\n"
+ " },\n"
+ " range: [0, 10],\n"
+ " sort: [\n"
+ " {key: 'duration', operator: '+'},\n"
+ " {key: 'title', operator: '+'}\n"
+ " ]\n"
+ "}, function(result) {\n"
+ " console.log(\n"
+ " result.status.code == 200 ? result.data : result.status\n"
+ " );\n"
+ "});"
})
);
pandora.createLinks($index);
return $index;
}
2013-03-04 12:00:00 +00:00
that.select = function(id) {
2013-03-04 15:22:26 +00:00
if (id && actions[id]) {
2014-12-18 12:34:00 +00:00
$text.html('<h1><b><tt>' + id + '</tt></b><h1><br>');
2013-03-04 07:26:01 +00:00
var code = actions[id].code[1],
2014-12-16 17:23:53 +00:00
source = actions[id].code[0],
line = Math.round(Ox.last(source.split(':')) || 0),
2013-03-04 07:26:01 +00:00
$code, $doc;
2014-12-18 13:38:08 +00:00
$doc = getDoc(id)
2013-03-04 07:26:01 +00:00
.appendTo($text);
2014-12-16 17:23:53 +00:00
$('<div>')
2014-12-18 12:09:46 +00:00
.html('<br><b><tt>' + source + '</tt></b>')
2014-12-16 17:23:53 +00:00
.appendTo($text);
$code = Ox.SyntaxHighlighter({
2014-12-18 12:09:46 +00:00
source: code.replace(/\s*?'''[\s\S]+?'''/g, ''),
2013-03-04 07:26:01 +00:00
})
.css({
2014-12-18 12:34:00 +00:00
backgroundColor: 'rgba(0, 0, 0, 0)',
2014-12-16 17:23:53 +00:00
borderWidth: '1px',
2013-03-04 07:26:01 +00:00
})
.appendTo($text);
} else {
2013-03-07 11:14:10 +00:00
$text.empty().append(getIndex());
2013-03-04 07:26:01 +00:00
}
$text.scrollTop(0);
2013-03-04 12:00:00 +00:00
return that;
2013-03-04 07:26:01 +00:00
}
2013-03-04 12:00:00 +00:00
2013-03-04 07:26:01 +00:00
return that;
};