[TASK] add new api tool page

This commit is contained in:
Ben Stein-Lobovits
2014-09-11 12:02:35 -07:00
parent f004bb72ae
commit f5ff1cee4b
5 changed files with 528 additions and 0 deletions

263
css/codemirror.css Normal file
View File

@@ -0,0 +1,263 @@
/* BASICS */
.CodeMirror {
/* Set height, width, borders, and global font properties here */
font-family: monospace;
height: 300px;
}
.CodeMirror-scroll {
/* Set scrolling behaviour here */
overflow: auto;
}
/* PADDING */
.CodeMirror-lines {
padding: 4px 0; /* Vertical padding around content */
}
.CodeMirror pre {
padding: 0 4px; /* Horizontal padding of content */
}
.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
background-color: white; /* The little square between H and V scrollbars */
}
/* GUTTER */
.CodeMirror-gutters {
border-right: 1px solid #ddd;
background-color: #f7f7f7;
white-space: nowrap;
}
.CodeMirror-linenumbers {}
.CodeMirror-linenumber {
padding: 0 3px 0 5px;
min-width: 20px;
text-align: right;
color: #999;
}
/* CURSOR */
.CodeMirror div.CodeMirror-cursor {
border-left: 1px solid black;
z-index: 3;
}
/* Shown when moving in bi-directional text */
.CodeMirror div.CodeMirror-secondarycursor {
border-left: 1px solid silver;
}
.CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor {
width: auto;
border: 0;
background: #7e7;
z-index: 1;
}
/* Can style cursor different in overwrite (non-insert) mode */
.CodeMirror div.CodeMirror-cursor.CodeMirror-overwrite {}
.cm-tab { display: inline-block; }
/* DEFAULT THEME */
.cm-s-default .cm-keyword {color: #708;}
.cm-s-default .cm-atom {color: #219;}
.cm-s-default .cm-number {color: #164;}
.cm-s-default .cm-def {color: #00f;}
.cm-s-default .cm-variable {color: black;}
.cm-s-default .cm-variable-2 {color: #05a;}
.cm-s-default .cm-variable-3 {color: #085;}
.cm-s-default .cm-property {color: black;}
.cm-s-default .cm-operator {color: black;}
.cm-s-default .cm-comment {color: #a50;}
.cm-s-default .cm-string {color: #a11;}
.cm-s-default .cm-string-2 {color: #f50;}
.cm-s-default .cm-meta {color: #555;}
.cm-s-default .cm-qualifier {color: #555;}
.cm-s-default .cm-builtin {color: #30a;}
.cm-s-default .cm-bracket {color: #997;}
.cm-s-default .cm-tag {color: #170;}
.cm-s-default .cm-attribute {color: #00c;}
.cm-s-default .cm-header {color: blue;}
.cm-s-default .cm-quote {color: #090;}
.cm-s-default .cm-hr {color: #999;}
.cm-s-default .cm-link {color: #00c;}
.cm-negative {color: #d44;}
.cm-positive {color: #292;}
.cm-header, .cm-strong {font-weight: bold;}
.cm-em {font-style: italic;}
.cm-link {text-decoration: underline;}
.cm-s-default .cm-error {color: #f00;}
.cm-invalidchar {color: #f00;}
div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
.CodeMirror-activeline-background {background: #e8f2ff;}
/* STOP */
/* The rest of this file contains styles related to the mechanics of
the editor. You probably shouldn't touch them. */
.CodeMirror {
line-height: 1;
position: relative;
overflow: hidden;
background: white;
color: black;
}
.CodeMirror-scroll {
/* 30px is the magic margin used to hide the element's real scrollbars */
/* See overflow: hidden in .CodeMirror */
margin-bottom: -30px; margin-right: -30px;
padding-bottom: 30px; padding-right: 30px;
height: 100%;
outline: none; /* Prevent dragging from highlighting the element */
position: relative;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.CodeMirror-sizer {
position: relative;
}
/* The fake, visible scrollbars. Used to force redraw during scrolling
before actuall scrolling happens, thus preventing shaking and
flickering artifacts. */
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
position: absolute;
z-index: 6;
display: none;
}
.CodeMirror-vscrollbar {
right: 0; top: 0;
overflow-x: hidden;
overflow-y: scroll;
}
.CodeMirror-hscrollbar {
bottom: 0; left: 0;
overflow-y: hidden;
overflow-x: scroll;
}
.CodeMirror-scrollbar-filler {
right: 0; bottom: 0;
}
.CodeMirror-gutter-filler {
left: 0; bottom: 0;
}
.CodeMirror-gutters {
position: absolute; left: 0; top: 0;
padding-bottom: 30px;
z-index: 3;
}
.CodeMirror-gutter {
white-space: normal;
height: 100%;
-moz-box-sizing: content-box;
box-sizing: content-box;
padding-bottom: 30px;
margin-bottom: -32px;
display: inline-block;
/* Hack to make IE7 behave */
*zoom:1;
*display:inline;
}
.CodeMirror-gutter-elt {
position: absolute;
cursor: default;
z-index: 4;
}
.CodeMirror-lines {
cursor: text;
}
.CodeMirror pre {
/* Reset some styles that the rest of the page might have set */
-moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
border-width: 0;
background: transparent;
font-family: inherit;
font-size: inherit;
margin: 0;
white-space: pre;
word-wrap: normal;
line-height: inherit;
color: inherit;
z-index: 2;
position: relative;
overflow: visible;
}
.CodeMirror-wrap pre {
word-wrap: break-word;
white-space: pre-wrap;
word-break: normal;
}
.CodeMirror-code pre {
border-right: 30px solid transparent;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
.CodeMirror-wrap .CodeMirror-code pre {
border-right: none;
width: auto;
}
.CodeMirror-linebackground {
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
z-index: 0;
}
.CodeMirror-linewidget {
position: relative;
z-index: 2;
overflow: auto;
}
.CodeMirror-widget {}
.CodeMirror-wrap .CodeMirror-scroll {
overflow-x: hidden;
}
.CodeMirror-measure {
position: absolute;
width: 100%;
height: 0;
overflow: hidden;
visibility: hidden;
}
.CodeMirror-measure pre { position: static; }
.CodeMirror div.CodeMirror-cursor {
position: absolute;
visibility: hidden;
border-right: none;
width: 0;
}
.CodeMirror-focused div.CodeMirror-cursor {
visibility: visible;
}
.CodeMirror-selected { background: #d9d9d9; }
.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
.cm-searching {
background: #ffa;
background: rgba(255, 255, 0, .4);
}
/* IE7 hack to prevent it from returning funny offsetTops on the spans */
.CodeMirror span { *vertical-align: text-bottom; }
@media print {
/* Hide the cursor when printing */
.CodeMirror div.CodeMirror-cursor {
visibility: hidden;
}
}

1
js/api-main.min.js vendored Normal file

File diff suppressed because one or more lines are too long

6
js/api-ripple.min.js vendored Normal file

File diff suppressed because one or more lines are too long

2
js/cm-javascript.min.js vendored Normal file

File diff suppressed because one or more lines are too long

256
ripple-api-tool.html Normal file
View File

@@ -0,0 +1,256 @@
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title>Ripple Developer Portal: Ripple API Tool</title>
<!-- favicon -->
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- Flatdoc -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src='https://dev.ripple.com/vendor/flatdoc/v/0.8.0/legacy.js'></script>
<script src='https://dev.ripple.com/vendor/flatdoc/v/0.8.0/flatdoc.js'></script>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
<!-- Flatdoc theme -->
<link href='https://dev.ripple.com/vendor/flatdoc/v/0.8.0/theme-white/style.css' rel='stylesheet'>
<script src='https://dev.ripple.com/vendor/flatdoc/v/0.8.0/theme-white/script.js'></script>
<!-- Custom Stylesheet -->
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:600italic,400,700,300' rel='stylesheet' type='text/css'>
<link href='css/main.css' rel='stylesheet'>
<link href='css/custom.css' rel='stylesheet'>
<link rel="shortcut icon" href="favicon.ico?v=2" type="image/x-icon">
<link rel="icon" href="favicon.ico?v=2" type="image/x-icon">
<link rel='stylesheet' type='text/css' href='css/codemirror.css'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/codemirror/3.16.0/codemirror.min.js'></script>
<script type='text/javascript' src='js/cm-javascript.min.js'></script>
<script type='text/javascript' src='js/api-ripple.min.js'></script>
<script type='text/javascript' src='js/api-main.min.js'></script>
<!-- start Mixpanel -->
<script type="text/javascript">(function(e,b){if(!b.__SV){var a,f,i,g;window.mixpanel=b;a=e.createElement("script");a.type="text/javascript";a.async=!0;a.src=("https:"===e.location.protocol?"https:":"http:")+'//cdn.mxpnl.com/libs/mixpanel-2.2.min.js';f=e.getElementsByTagName("script")[0];f.parentNode.insertBefore(a,f);b._i=[];b.init=function(a,e,d){function f(b,h){var a=h.split(".");2==a.length&&(b=b[a[0]],h=a[1]);b[h]=function(){b.push([h].concat(Array.prototype.slice.call(arguments,0)))}}var c=b;"undefined"!==
typeof d?c=b[d]=[]:d="mixpanel";c.people=c.people||[];c.toString=function(b){var a="mixpanel";"mixpanel"!==d&&(a+="."+d);b||(a+=" (stub)");return a};c.people.toString=function(){return c.toString(1)+".people (stub)"};i="disable track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config people.set people.set_once people.increment people.append people.track_charge people.clear_charges people.delete_user".split(" ");for(g=0;g<i.length;g++)f(c,i[g]);
b._i.push([a,e,d])};b.__SV=1.2}})(document,window.mixpanel||[]);
mixpanel.init("132d42885e094171f34467fc54da6fab");
</script>
<script>if (window.location.host == "dev.ripple.com") { mixpanel.track("rippled-apis"); }</script>
<!-- end Mixpanel -->
<!-- start google analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-49188512-1', 'ripple.com');
ga('send', 'pageview');
</script>
<!-- end google analytics -->
<!-- syntax selection js -->
<script src='js/multicodetab.js'></script>
<script>
$(document).on('flatdoc:ready', $().multicode_tabs);
</script>
<script>
Flatdoc.run({
fetcher: Flatdoc.file('websocket_api.md')
});
</script>
<!-- Temporary shims until I modify the css directly -->
<link type='text/css' rel='stylesheet' href='css/mod.css' />
<script src='js/expandcode.js'></script>
</head>
<body role='flatdoc' class='no-literate'>
<!--Draft warning would go here-->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="https://dev.ripple.com/"><img class="small_logo" src="assets/img/ripple_logo_small.png"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="/">Resources</a></li>
<li><a href="https://www.bountysource.com/teams/ripple/bounties">Bounties</a></li>
<li><a href="https://ripplelabs.atlassian.net/">Bug Tracking</a></li>
<li><a href="https://ripple.com/dev/blog/">Dev Blog</a></li>
<li><a href="https://ripple.com/forum/viewforum.php?f=2&sid=c016bc6b934120b7117c0e136e74de98">Forums</a></li>
</ul>
<div class='right'>
<!-- GitHub buttons -->
<iframe src="https://dev.ripple.com/vendor/ghbtn.html?user=ripple&repo=ripple-dev-portal&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
</div>
</div><!--/.nav-collapse -->
</div>
</div>
<!--
<div class="header-subnav-wrapper">
<div class='header-subnav navbar-fixed-top'>
<ul>
<li><a href='?p=introduction' id='subnav-intro'>Introduction</a></li>
<li><a href='?p=ripple-rest-api' id='subnav-rest'>Ripple-REST API</a></li>
<li><a href='?p=web-sockets-api' id='subnav-websocket'>WebSocket &amp; JSON-RPC APIs</a></li>
</ul>
<div class='clearer'>&nbsp;</div>
</div>
</div>
-->
<div class='content-root'>
<div id='wrapper'>
<h1>Ripple WebSocket API tool</h1>
<div id='online_state'>Offline</div>
<div style="clear:both;"></div>
<div id='command_wrapper'>
<ul id='command_list'>
<li class='selected'>server_info</li>
<li>server_state</li>
<li>ping</li>
<br/>
<li>subscribe</li>
<li>unsubscribe</li>
<br/>
<li>ledger</li>
<li>ledger_closed</li>
<li>ledger_current</li>
<li>ledger_entry</li>
<br/>
<li>account_info</li>
<li>account_lines</li>
<li>account_offers</li>
<li>account_tx</li>
<br/>
<li>transaction_entry</li>
<li>tx</li>
<li>tx_history</li>
<br/>
<li>submit</li>
<br/>
<li>ripple_path_find</li>
<li>path_find</li>
<li>book_offers</li>
</ul>
<div id='command_table'>
<div id='io_wrapper'>
<div id='input' class='io'>
<h2>Request</h2>
<div id='request_options'>
<div id='request_button'>Send request</div>
<div id='sign_button'>Sign transaction</div>
</div>
<div style="clear:both;"></div>
<h3 id='selected_command'>server_info</h3>
<p id='description'></p>
<div id='invalid'>Invalid JSON</div>
<p>JSON</p>
<div id='request'></div>
</div>
<div id='output' class='io'>
<h2>Response</h2>
<p>Stream output</p>
<ul class='toolbar'>
<li id='stream_show'>show</li>
<li id='stream_pause'>pause</li>
</ul>
<div id='status'></div>
<p id='info'></p>
<div id='response'></div>
<div id='tooltip'></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<p class="text-muted">
<div class="row">
<div class="col-md-2">
<ul class="footer_links applications">
<li><a href="https://www.rippletrade.com">Ripple Trade</a>
<li><a href="https://www.ripplecharts.com">Ripple Charts</a>
<li><a href="https://ripple.com/graph">Ripple Graph</a>
<li><a href="http://codius.org/">Codius</a>
</ul>
</div>
<div class="col-md-2">
<ul class="footer_links middleware">
<li><a href="gatewayd.html">Gatewayd</a>
<li><a href="ripple-rest.html">Ripple REST</a>
<li><a href="https://github.com/ripple/ripple-lib">Ripple Lib</a>
</ul>
</div>
<div class="col-md-2">
<ul class="footer_links core_network">
<li><a href="rippled-apis.html">rippled</a>
</ul>
</div>
<div class="col-md-2">
<ul class="footer_links bounties">
<li><a href="https://www.bountysource.com/teams/ripple/bounties">Bounties</a>
<li><a href="https://ripplelabs.atlassian.net/">Bug tracking</a>
<li><a href="guidelines.html">Brand guidelines</a>
<li><a href="https://ripple.com/dev/blog/">Dev blog</a>
<li><a href="https://ripple.com/forum/viewforum.php?f=2&sid=c016bc6b934120b7117c0e136e74de98">Forums</a>
<li><a href="https://ripple.com/wiki/Main_Page">Wiki</a>
</ul>
</div>
<div class="col-md-4 mail_chimp">
<p>Join the mailing list!</p>
<label for="mce-EMAIL">Email address</label>
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{clear:left; font:14px; }
</style>
<div id="mc_embed_signup">
<form action="//ripple.us4.list-manage.com/subscribe/post?u=245dbc1c47849f034390dc5bf&amp;id=4dfbe160d0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px; top: -50px;"><input type="text" name="b_245dbc1c47849f034390dc5bf_4dfbe160d0" tabindex="-1" value=""></div>
<input type="submit" value="Submit" name="subscribe" id="mc-embedded-subscribe" class="button btn btn-primary">
</form>
</div>
<!--End mc_embed_signup-->
</div>
</div>
</p>
</div>
</div>
</body>
</html>