diff --git a/pandora/templates/api.html b/pandora/templates/api.html index adb12da5..eb953f8e 100644 --- a/pandora/templates/api.html +++ b/pandora/templates/api.html @@ -2,30 +2,32 @@ - {{sitename}} API - - - - + {{title}} + + + + + + + + + + + + + + + + - - - + diff --git a/static/js/api/pandora.js b/static/js/api/pandora.js deleted file mode 100755 index 3fb35279..00000000 --- a/static/js/api/pandora.js +++ /dev/null @@ -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 = '

Pan.do/ra API Overview

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
'; - 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 = $('
').addClass('OxSelectable'), - hash = '#'; - if (data.ids.length) - data.ids.forEach(function(id) { - info.append( - $('

') - .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/
\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); - } - }); -} -}); - diff --git a/static/js/pandora/apiDialog.js b/static/js/pandora/apiDialog.js new file mode 100644 index 00000000..83b44725 --- /dev/null +++ b/static/js/pandora/apiDialog.js @@ -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( + $('') + .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 = '

Pan.do/ra API Overview

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 = []; + 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( + $('

') + .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/
\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; + +}; diff --git a/static/js/pandora/appPanel.js b/static/js/pandora/appPanel.js index 3501a79c..51c8ea39 100644 --- a/static/js/pandora/appPanel.js +++ b/static/js/pandora/appPanel.js @@ -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')) { diff --git a/static/js/pandora/mainMenu.js b/static/js/pandora/mainMenu.js index 973814b0..65094bb4 100644 --- a/static/js/pandora/mainMenu.js +++ b/static/js/pandora/mainMenu.js @@ -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;