From 4e817ad7b581694ff7ffc8cbd02b1a2ca20d3462 Mon Sep 17 00:00:00 2001 From: rolux Date: Thu, 7 Mar 2013 11:14:10 +0000 Subject: [PATCH] API Dialog: better index page --- static/js/pandora/apiDialog.js | 70 ++++++++++++++++++++++++++++++---- 1 file changed, 62 insertions(+), 8 deletions(-) diff --git a/static/js/pandora/apiDialog.js b/static/js/pandora/apiDialog.js index 8d5e9c62..d53122e2 100644 --- a/static/js/pandora/apiDialog.js +++ b/static/js/pandora/apiDialog.js @@ -50,10 +50,10 @@ pandora.ui.apiDialog = function() { keys: {escape: 'close'}, maximizeButton: true, minHeight: 256, - minWidth: 544 + 2 * Ox.UI.SCROLLBAR_SIZE, + minWidth: 544 + Ox.UI.SCROLLBAR_SIZE, removeOnClose: true, title: 'API Documentation', - width: 672 + 2 * Ox.UI.SCROLLBAR_SIZE + width: 672 + Ox.UI.SCROLLBAR_SIZE }) .bindEvent({ close: function() { @@ -65,8 +65,7 @@ pandora.ui.apiDialog = function() { 'pandora_hash.anchor': function(data) { pandora.user.ui.page == 'api' && that.select(data.value); } - }), - overview = '

API Documentation


use this api in the browser with Ox.app or use pandora_client it in python. Further description of the api can be found on the wiki'; + }); pandora.api.api({docs: true, code: true}, function(results) { var items = [{ @@ -110,13 +109,13 @@ pandora.ui.apiDialog = function() { $text = Ox.Element() .css({ padding: '16px', + lineHeight: '16px', overflowY: 'auto' - }) - .html(overview); + }); $panel = Ox.SplitPanel({ elements: [ - {element: $list, size: 128 + Ox.UI.SCROLLBAR_SIZE}, + {element: $list, size: 128}, {element: $text} ], orientation: 'horizontal' @@ -127,6 +126,60 @@ pandora.ui.apiDialog = function() { }); + function getIndex() { + var $index = Ox.Element() + .html( + '

API Documentation

\n' + + '

' + pandora.site.site.name + ' uses a JSON API' + + ' 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 — from writing simple scripts' + + ' to read or write specific information to including' + + ' data from ' + pandora.site.site.name + '' + + ' (not just videos, but also metadata, annotations, lists,' + + ' or a custom search interface) in your own website.

\n' + + '

If you are using the API in JavaScript, you may want to' + + ' take a look at ' + + ' OxJS, and if you are using Python, there is' + + ' ' + + ' python-ox, which is used by' + + ' ' + + ' pandora_client to automate certain tasks.

\n' + + '

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.' + ) + .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; + } + that.select = function(id) { if (id && actions[id]) { $text.html('

' + id + '


'); @@ -161,7 +214,8 @@ pandora.ui.apiDialog = function() { borderWidth: '1px', }).appendTo($text); } else { - $text.html(overview); + Ox.print('ELSE') + $text.empty().append(getIndex()); } $text.scrollTop(0); return that;