Improve display on ws.htm

git-svn-id: http://piwigo.org/svn/trunk@25394 68402e56-0260-453c-a942-63ccdbb3a9ee
This commit is contained in:
mistic100
2013-11-08 12:16:14 +00:00
parent aa85238878
commit 07b8dd5770
3 changed files with 122 additions and 89 deletions
+67 -48
View File
@@ -1,12 +1,12 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" dir="ltr">
<html lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta charset="utf-8">
<title>Piwigo web API (web-services) explorer</title>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/tiptip/1.3/tipTip.css">
<link rel="stylesheet" href="http://cdn.jsdelivr.net/tiptip/1.3/tipTip.css">
<style type="text/css">
<style>
/* BEGIN CSS RESET
http://meyerweb.com/eric/tools/css/reset
v2.0 | 20110126 | License: none (public domain) */
@@ -60,7 +60,7 @@
#the_page {margin-left:252px;border-style:solid;border-color:#cdcdcd;border-width:1px 0 0 1px;}
#the_content {padding:10px;}
#methodParams {display:inline-block;}
#methodParams {margin-right:230px;}
#methodParams thead td {background:#DEE3E9;font-weight:bold;padding:2px 5px;}
#methodParams td {padding:2px;border:1px solid #cdcdcd;vertical-align:middle;}
#methodParams tbody tr:nth-child(even) {background:#f7f7f7;}
@@ -73,7 +73,7 @@
#methodParams .type {display:inline-block;width:16px;height:16px;font-size:12px;line-height:16px;background:#ddd;border-radius:8px;font-weight:bold;text-align:center;color:#222;}
#methodParams .subtype {vertical-align:super;}
#testForm {display:inline-block;margin-left:15px;}
#testForm {float:right;}
#testForm td {padding:2px 0;}
#testForm tr:last-child td {padding:8px 0 5px 0;}
#testForm blockquote {width:200px;}
@@ -93,11 +93,14 @@
#iframeWrapper {width:100%;height:300px;padding:3px 3px 20px 3px;background:#F9F9F9;border:1px solid #cdcdcd;overflow:hidden;position:relative;}
iframe {width:100%;height:100%;background:#fff;}
div.onlys {background:#faa;color:#fff;border:1px solid #f22;padding:.25em .5em;display:table;border-radius:4px;margin-bottom:0.5em;}
</style>
</head>
<body>
<a name="top"></a>
<div id="the_header">
<h1>Piwigo web API (web-services) explorer</h1>
@@ -151,6 +154,40 @@
<br>
</div> <!-- methodDescription -->
<div id="testForm">
<h3>Test</h3>
<blockquote>
<table>
<tr>
<td>Request format :</td>
<td>
<select id="requestFormat">
<option value="get" selected>GET</option>
<option value="post">POST</option>
</select>
</td>
</tr>
<tr>
<td>Response format :</td>
<td>
<select id="responseFormat">
<option value="rest" selected>REST (xml)</option>
<option value="json">JSON</option>
<option value="php">PHP serial</option>
<option value="xmlrpc">XML RPC</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<a href="#" class="button" id="invokeMethod">INVOKE</a>
<a href="#" class="button" id="invokeMethodBlank">INVOKE (new window)</a>
</td>
</tr>
</table>
</blockquote>
</div> <!-- testForm -->
<div id="methodParams">
<h3>Method parameters</h3>
<table>
@@ -178,47 +215,14 @@
</table>
</div> <!-- methodParams -->
<div id="testForm">
<h3>Test</h3>
<blockquote>
<table>
<tr>
<td>Request format :</td>
<td>
<select id="requestFormat">
<option value="get" selected="selected">GET</option>
<option value="post">POST</option>
</select>
</td>
</tr>
<tr>
<td>Response format :</td>
<td>
<select id="responseFormat">
<option value="rest" selected="selected">REST (xml)</option>
<option value="json">JSON</option>
<option value="php">PHP serial</option>
<option value="xmlrpc">XML RPC</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<a href="#" class="button" id="invokeMethod">INVOKE</a>
<a href="#" class="button" id="invokeMethodBlank">INVOKE (new window)</a>
</td>
</tr>
</table>
</blockquote>
</div> <!-- testForm -->
<br><br>
<h3>Result</h3>
<div id="iframeWrapper">
<iframe src="" id="invokeFrame" name="invokeFrame"></iframe>
<a href="#bottom" id="increaseIframe"><b>&darr;</b> increase height</a> &#8226; <a href="#bottom" id="decreaseIframe"><b>&uarr;</b> decrease height</a>
<a name="bottom"></a>
<a href="#iframe-bottom" id="increaseIframe"><b>&darr;</b> increase height</a> &#8226;
<a href="#iframe-bottom" id="decreaseIframe"><b>&uarr;</b> decrease height</a>
<a name="iframe-bottom"></a>
</div>
</form> <!-- iframeWrapper -->
@@ -233,10 +237,10 @@
Copyright &copy; 2002-2013 <a href="http://piwigo.org">Piwigo Team</a>
</div> <!-- the_footer -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/tiptip/1.3/jquery.tipTip.minified.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/tiptip/1.3/jquery.tipTip.minified.js"></script>
<script type="text/javascript">
<script>
// global vars
var cachedMethods = new Array;
var ws_url = "http://";
@@ -286,6 +290,7 @@ function resetDisplay() {
$("#methodWrapper").hide();
$("#methodName").hide();
$("#urlForm").hide();
$("#methodDescription blockquote").empty();
$("#methodDescription").hide();
$("#invokeFrame").attr('src','');
}
@@ -352,7 +357,7 @@ function getMethodList() {
var ml = '';
for (var i=0; i<methods.length; i++)
{
ml += '<li><a href="#">'+ methods[i]+'</a></li>';
ml += '<li><a href="#top">'+ methods[i]+'</a></li>';
}
$("#methodsList").html(ml).show();
@@ -361,7 +366,6 @@ function getMethodList() {
// trigger method selection
$("#methodsList li a").click(function() {
selectMethod($(this).html());
return false;
});
}
}).error(function(jqXHR, textStatus, errorThrown) {
@@ -403,11 +407,26 @@ function fillNewMethod(methodName) {
$("#methodName").html(method.name).show();
if (method.options.post_only || method.options.admin_only) {
var onlys = '<div class="onlys">';
if (method.options.post_only) {
onlys+= 'POST only. ';
}
if (method.options.admin_only) {
onlys+= 'Admin only. ';
}
onlys+= '</div>';
method.description = onlys + method.description;
}
if (method.description != "") {
$("#methodDescription blockquote").html(method.description);
$("#methodDescription").show();
}
$("#requestFormat").val(method.options.post_only ? 'post' : 'get');
var methodParams = '';
if (method.params && method.params.length>0) {
for (var i=0; i<method.params.length; i++) {
@@ -530,4 +549,4 @@ function invokeMethod(methodName, newWindow) {
</script>
</body>
</html>
</html>