source: trunk/tools/ws.htm @ 24395

Last change on this file since 24395 was 23714, checked in by mistic100, 11 years ago

remove constructors css markup in ws.htm and triggers_list.php
  • Property svn:eol-style set to LF
File size: 17.1 KB
Line 
1<!DOCTYPE html>
2<html xmlns="http://www.w3.org/1999/xhtml" lang="en" dir="ltr">
3<head>
4  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5  <title>Piwigo web API (web-services) explorer</title>
6 
7  <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/tiptip/1.3/tipTip.css">
8 
9  <style type="text/css">
10  /* BEGIN CSS RESET
11    http://meyerweb.com/eric/tools/css/reset
12    v2.0 | 20110126 | License: none (public domain) */
13  html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
14  del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
15  fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 
16  figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
17  {margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;}
18
19  article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}
20  body {line-height:1.1;}
21  blockquote, q {quotes:none;}
22  blockquote:before, blockquote:after, q:before, q:after {content:'';content:none;}
23  table {border-collapse:collapse;border-spacing:0;}
24  /* END CSS RESET */
25
26  html {font-family:"Corbel","Lucida Grande","Verdana",sans-serif;color:#222;font-size:13px;}
27
28  a {color:#247EBF;text-decoration:none;}
29  a:hover {color:#EB9C39;border-bottom-width:1px;border-style:dotted;text-shadow:1px 1px 0 #ddd;}
30 
31  blockquote {border:1px solid #cdcdcd;background:#F9F9F9;padding:8px;}
32  hr {margin:10px 30px;color:#fff;}
33  ul {margin-left:25px;}
34  p {margin:8px 0;}
35
36  h1 {color:#fff;font-size:26px;padding:10px 15px;text-shadow:1px 1px 0 #999;
37    background:#45484d;background:linear-gradient(to bottom, #45484d 0%,#333333 100%);
38  }
39  h2 {color:#fff;font-size:20px;padding:5px 10px;text-shadow:1px 1px 0 #555;
40    background:#f2a841;background:linear-gradient(to bottom, #f2a841 0%,#ef6b13 100%);
41  }
42  h2#errorWrapper {color:#F42C00;font-weight:normal;
43    background:#eaeaea;background:linear-gradient(to bottom, #eaeaea 0%, #afafaf 100%);
44  }
45  h3 {display:inline-block;padding:5px 10px;color:#555;font-weight:bold;text-align:center;
46    border-radius:8px 8px 0 0;text-shadow:1px 1px 0 #bbb;
47    background:#f2f2f2;background:linear-gradient(to bottom, #f2f2f2 0%,#cecece 100%);
48  }
49
50  #the_header {border-bottom:1px solid #cdcdcd;margin-bottom:1px;}
51  #the_footer {background:#EAEAEA;border-top:1px solid #cdcdcd;padding:10px;clear:both;}
52
53  #the_methods {width:250px;float:left;border-style:solid;border-color:#cdcdcd;border-width:1px 1px 0 0;
54    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAIAAADZSiLoAAAAH0lEQVQImSXHMQEAMAwCMOrfK0jIjuVL2gLBzyHJtgd7wBdU3Vt/7AAAAABJRU5ErkJggg==);
55  }
56  #the_methods ul {font-size:1.1em;margin:5px 0 10px 10px;list-style:none;}
57  #the_methods li:before {content:"\203A\00A0";font-weight:bold;color:#EB9C39;font-size:1.1em;}
58  #the_methods li:hover:before {content:"\00A0\203A";}
59
60  #the_page {margin-left:252px;border-style:solid;border-color:#cdcdcd;border-width:1px 0 0 1px;}
61  #the_content {padding:10px;}
62
63  #methodParams {display:inline-block;}
64  #methodParams thead td {background:#DEE3E9;font-weight:bold;padding:2px 5px;}
65  #methodParams td {padding:2px;border:1px solid #cdcdcd;vertical-align:middle;}
66  #methodParams tbody tr:nth-child(even) {background:#f7f7f7;}
67  #methodParams tbody tr td:first-child {font-family:monospace;font-size:0.95em;}
68  #methodParams td.mini {width:0px;text-align:center;}
69  #methodParams tfoot {font-size:0.95em;}
70  #methodParams td.input {text-align:center;}
71  #methodParams td.input input[type="text"] {width:97%;font-size:0.9em;background:#f7f7f7;border:1px solid #ccc;border-radius:2px;}
72  #methodParams td.input input[type="text"]:hover, #methodParams td.input input[type="text"]:focus {border-color:#C7E2F1;border-top-color:#96BCD7;background:#fff;}
73
74  #testForm {display:inline-block;margin-left:15px;}
75  #testForm td {padding:2px 0;}
76  #testForm tr:last-child td {padding:8px 0 5px 0;}
77  #testForm blockquote {width:200px;}
78 
79  #introMessage {font-size:1.1em;}
80  #urlForm {margin-bottom:10px;}
81
82  a.button {color:#fff;padding:3px 8px;border:1px solid #91bb5c;font-size:0.9em;margin-right:3px;display:inline-block;
83    border-radius:5px;text-shadow:1px 1px 0 #666;
84    background:#84bb3c;background:linear-gradient(to bottom, #84bb3c 0%, #3f5a1d 100%);
85  }
86  a.button:hover {color:#E5FF00;}
87 
88  .methodInfo {float:right;display:inline-block;width:16px;height:16px;font-size:12px;line-height:16px;background:#555;border-radius:8px;font-family:"Times New Roman",sans-serif;font-style:italic;font-weight:bold;text-align:center;color:#fff;}
89  .methodInfo:hover {border:none;text-shadow:none;background:#888;cursor:pointer;color:#fff;}
90 
91  #iframeWrapper {width:100%;height:300px;padding:3px 3px 20px 3px;background:#F9F9F9;border:1px solid #cdcdcd;overflow:hidden;position:relative;}
92  iframe {width:100%;height:100%;background:#fff;}
93  </style>
94 
95</head>
96
97<body>
98
99<div id="the_header">
100  <h1>Piwigo web API (web-services) explorer</h1>
101</div> <!-- the_header -->
102
103<div id="the_methods">
104  <h2>Available methods</h2>
105 
106  <ul id="methodsList">
107  </ul>
108</div> <!-- the_methods -->
109
110<div id="the_page">
111  <h2 id="methodName" style="display:none;"></h2>
112  <h2 id="errorWrapper" style="display:none;"></h2>
113 
114  <div id="the_content">
115    <form id="urlForm" style="display:none;">
116      <input type="text" name="ws_url" size="60">
117      <input type="submit" value="Go!">
118    </form>
119   
120    <blockquote id="introMessage">
121      <p>
122        <b>API = Application Programming Interface.</b><br>
123        This is the way other applications can communicate with Piwigo. This feature is also know as Web Services.
124      </p>
125
126      <p>Examples:</p>
127      <ul>
128        <li>Wordpress (web blog software) can display random photos from a Piwigo gallery in its sidebar</li>
129        <li>Lightroom (photo management software for desktop) can create albums and upload photos to Piwigo</li>
130      </ul>
131
132      <p>
133        This page lists all API methods available on your Piwigo installation, part of the Piwigo core or added by third-party plugins.
134        For each method you can consult required and optional parameters, and even test them in direct live!
135      </p>
136
137      <p>
138        For more information you can consult our Wiki <a href="http://piwigo.org/doc/doku.php?id=dev:webapi:start" target="_blank">Piwigo Web API</a> and <a href="http://piwigo.org/forum" target="_blank">our forums</a>.
139      </p>
140    </blockquote> <!-- introMessage -->
141
142
143    <form id="methodWrapper" style="display:none;">
144      <div id="methodDescription" style="display:none;">
145        <h3>Description</h3>
146        <blockquote>
147        </blockquote>
148        <br>
149      </div> <!-- methodDescription -->
150     
151      <div id="methodParams">
152        <h3>Method parameters</h3>
153        <table>
154          <thead>
155            <tr>
156              <td style="width:150px;">Name</td>
157              <td class="mini">Extra</td>
158              <td style="width:300px;">Value</td>
159              <td class="mini">Send</td>
160            </tr>
161          </thead>
162         
163          <tbody>
164          </tbody>
165         
166          <tfoot>
167            <tr>
168              <td colspan="4"><b>*</b>: required parameter, <b>?</b>: optional parameter, <b>[]</b>: parameter can be an array (use a pipe | to split values)</td>
169            </tr>
170          </tfoot>
171        </table>
172      </div> <!-- methodParams -->
173     
174      <div id="testForm">
175        <h3>Test</h3>
176        <blockquote>
177          <table>
178            <tr>
179              <td>Request format :</td>
180              <td>
181                <select id="requestFormat">
182                  <option value="get" selected="selected">GET</option>
183                  <option value="post">POST</option>
184                </select>
185              </td>
186            </tr>
187            <tr>
188              <td>Response format :</td>
189              <td>
190                <select id="responseFormat">
191                  <option value="rest" selected="selected">REST (xml)</option>
192                  <option value="json">JSON</option>
193                  <option value="php">PHP serial</option>
194                  <option value="xmlrpc">XML RPC</option>
195                </select>
196              </td>
197            </tr>
198            <tr>
199              <td colspan="2">
200                <a href="#" class="button" id="invokeMethod">INVOKE</a>
201                <a href="#" class="button" id="invokeMethodBlank">INVOKE (new window)</a>
202              </td>
203            </tr>
204          </table>
205        </blockquote>
206      </div> <!-- testForm -->
207     
208      <br><br>
209     
210      <h3>Result</h3>
211      <div id="iframeWrapper">
212        <iframe src="" id="invokeFrame" name="invokeFrame"></iframe>
213        <a href="#bottom" id="increaseIframe"><b>&darr;</b> increase height</a> &#8226; <a href="#bottom" id="decreaseIframe"><b>&uarr;</b> decrease height</a>
214        <a name="bottom"></a>
215      </div>
216    </form> <!-- iframeWrapper -->
217   
218    <!-- hidden form for POST submition -->
219    <form method="post" action="" target="" id="invokeForm" style="display:none;"></form>
220   
221  </div> <!-- the_content -->
222
223</div> <!-- the_page -->
224
225<div id="the_footer">
226  Copyright &copy; 2002-2013 <a href="http://piwigo.org">Piwigo Team</a>
227</div> <!-- the_footer -->
228
229<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
230<script type="text/javascript" src="https://cdn.jsdelivr.net/tiptip/1.3/jquery.tipTip.minified.js"></script>
231
232<script type="text/javascript"> 
233// global vars
234var cachedMethods = new Array;
235var ws_url = "http://";
236
237// automatic detection of ws_url
238match = document.location.toString().match(/^(https?.*\/)tools\/ws\.html?/);
239if (match==null) {
240  askForUrl();
241}
242else {
243  ws_url = match[1]+'ws.php';
244  getMethodList();
245}
246
247// manual set of ws_url
248$("#urlForm").submit(function() {
249  ws_url = $(this).children("input[name='ws_url']").val();
250  getMethodList();
251  return false;
252});
253
254// invoke buttons
255$("#invokeMethod").click(function() {
256  invokeMethod($("#methodName").html(), false);
257  return false;
258});
259$("#invokeMethodBlank").click(function() {
260  invokeMethod($("#methodName").html(), true);
261  return false;
262});
263
264// resizable iframe
265$("#increaseIframe").click(function() {
266  $("#iframeWrapper").css('height', $("#iframeWrapper").height()+100);
267  adaptHeight();
268});
269$("#decreaseIframe").click(function() {
270  if ($("#iframeWrapper").height() > 200) {
271    $("#iframeWrapper").css('height', $("#iframeWrapper").height()-100);
272    adaptHeight();
273  }
274});
275
276// mask all wrappers
277function resetDisplay() {
278  $("#errorWrapper").hide();
279  $("#methodWrapper").hide();
280  $("#methodName").hide();
281  $("#urlForm").hide();
282  $("#methodDescription").hide();
283  $("#invokeFrame").attr('src','');
284}
285
286// give the same size to methods list and main page
287function adaptHeight()
288{
289  $("#the_page").css('height', 'auto');
290  $("#the_methods").css('height', 'auto');
291 
292  min_h = $(window).height()-$("#the_header").outerHeight()-$("#the_footer").outerHeight()-3;
293  h = Math.max(min_h, Math.max($("#the_methods").height(), $("#the_page").height()));
294 
295  $("#the_page").css('height', h);
296  $("#the_methods").css('height', h);
297}
298
299// display error wrapper
300function displayError(error) {
301  resetDisplay();
302  $("#errorWrapper").html("<b>Error:</b> "+ error).show();
303  adaptHeight();
304}
305
306// display ws_url form
307function askForUrl() {
308  if ($("#urlForm input[name='ws_url']").val() == "") {
309    $("#urlForm input[name='ws_url']").val(ws_url);
310  }
311  $("#urlForm").show();
312  displayError("can't contact web-services, please give absolute url to 'ws.php'");
313}
314
315// parse Piwigo JSON
316function parsePwgJSON(json) {
317  try {
318    resp = jQuery.parseJSON(json);
319    if (resp==null | resp.result==null | resp.stat==null | resp.stat!='ok') {
320      throw new Error();
321    }
322  }
323  catch(e) {
324    displayError("unable to parse JSON string");
325    resp = {"stat": "ko", "result": "null"};
326  }
327 
328  return resp.result;
329}
330
331// fetch methods list
332function getMethodList() {
333  resetDisplay();
334 
335  $.ajax({
336    type: "GET",
337    url: ws_url,
338    data: { format: "json", method: "reflection.getMethodList" }
339  }).done(function(result) {
340    result = parsePwgJSON(result);
341   
342    if (result!=null) {
343      methods = result.methods;
344     
345      var ml = '';
346      for (var i=0; i<methods.length; i++)
347      {
348        ml += '<li><a href="#">'+ methods[i]+'</a></li>';
349      }
350      $("#methodsList").html(ml).show();
351     
352      adaptHeight();
353     
354      // trigger method selection
355      $("#methodsList li a").click(function() {
356        selectMethod($(this).html());
357        return false;
358      });
359    }
360  }).error(function(jqXHR, textStatus, errorThrown) {
361    askForUrl();
362  });
363}
364
365// select method
366function selectMethod(methodName) {
367  $("#introMessage").hide();
368  $("#tiptip_holder").fadeOut(200);
369 
370  if (cachedMethods[ methodName ]) {
371    fillNewMethod(methodName);
372  }
373  else {
374    $.ajax({
375      type: "GET",
376      url: ws_url,
377      data: { format: "json", method: "reflection.getMethodDetails", methodName: methodName }
378    }).done(function(result) { 
379      result = parsePwgJSON(result);
380   
381      if (result!=null) {
382        cachedMethods[ methodName ] = result;
383        fillNewMethod(methodName);
384      }
385    }).error(function(jqXHR, textStatus, errorThrown) {
386      displayError("unknown error");
387    });
388  }
389}
390
391// display method details
392function fillNewMethod(methodName) {
393  resetDisplay();
394 
395  method = cachedMethods[ methodName ];
396 
397  $("#methodName").html(method.name).show();
398 
399  if (method.description != "") {
400    $("#methodDescription blockquote").html(method.description);
401    $("#methodDescription").show();
402  }
403 
404  var methodParams = '';
405  if (method.params && method.params.length>0) {
406    for (var i=0; i<method.params.length; i++) {
407      var isOptional = method.params[i].optional;
408      var acceptArray = method.params[i].acceptArray;
409      var defaultValue = method.params[i].defaultValue == null ? '' : method.params[i].defaultValue;
410      var info = method.params[i].info == null ? '' : '<a class="methodInfo" title="'+ method.params[i].info + '">i</a>';
411     
412      // if an array is direclty printed, the delimiter is a comma where we use a pipe
413      if (typeof defaultValue == 'object') {
414        defaultValue = defaultValue.join('|');
415      }
416
417      methodParams+= '<tr>'+
418        '<td>'+ method.params[i].name + info +'</td>'+
419        '<td class="mini">'+ (isOptional ? '?':'*') + (acceptArray ? ' []':'') +'</td>'+
420        '<td class="input"><input type="text" class="methodParameterValue" data-id="'+ i +'" value="'+ defaultValue +'"></td>'+
421        '<td class="mini"><input type="checkbox" class="methodParameterSend" data-id="'+ i +'" '+ (isOptional ? '':'checked="checked"') +'></td>'+
422      '</tr>';
423    }
424        }
425  else {
426    methodParams = '<tr><td colspan="4">This method takes no parameters</td></tr>';
427  }
428 
429  $("#methodParams tbody").html(methodParams);
430  $("#methodWrapper").show(); 
431 
432  adaptHeight();
433 
434  // trigger field modification
435  $("input.methodParameterValue").change(function() {
436    $("input.methodParameterSend[data-id='"+ $(this).data('id') +"']").attr('checked', 'checked');
437  });
438 
439  // tiptip
440  $(".methodInfo").tipTip({
441    activation:"click",
442    maxWidth:"300px",
443    defaultPosition:"right",
444    keepAlive:true,
445    delay:0
446  });
447}
448
449// invoke method
450function invokeMethod(methodName, newWindow) {
451        var method = cachedMethods[ methodName ];
452
453  var reqUrl = ws_url +"?format="+ $("#responseFormat").val();
454 
455  // GET
456  if ($("#requestFormat").val() == 'get') {
457    reqUrl+= "&method="+ methodName;
458   
459    for (var i=0; i<method.params.length; i++) {
460      if (! $("input.methodParameterSend[data-id='"+ i +"']").is(":checked")) {
461        continue;
462      }
463
464      var paramValue = $("input.methodParameterValue[data-id='"+ i +"']").val();
465     
466      var paramSplitted = paramValue.split('|');
467      if (method.params[i].acceptArray &&  paramSplitted.length > 1) {
468        $.each(paramSplitted, function(v) {
469          reqUrl+= '&'+ method.params[i].name +'[]='+ paramSplitted[v];
470        });
471      }
472      else {
473        reqUrl+= '&'+ method.params[i].name +'='+ paramValue;
474      }
475    }
476   
477    if (newWindow) {
478      window.open(reqUrl);
479    }
480    else {
481      $("#invokeFrame").attr('src', reqUrl);
482    }
483  }
484  // POST
485  else {
486    var form = $("#invokeForm");
487    form.attr('action', reqUrl);
488   
489    var t = '<input type="hidden" name="method" value="'+ methodName +'">';
490   
491    for (var i=0; i<method.params.length; i++) {
492      if (! $("input.methodParameterSend[data-id='"+ i +"']").is(":checked")) {
493        continue;
494      }
495
496      var paramValue = $("input.methodParameterValue[data-id='"+ i +"']").val();
497
498      var paramSplitted = paramValue.split('|');
499      if (method.params[i].acceptArray &&  paramSplitted.length > 1) {
500        $.each(paramSplitted, function(v) {
501          t+= '<input type="hidden" name="'+ method.params[i].name +'[]" value="'+ paramSplitted[v] +'">';
502        });
503      }
504      else {
505        t+= '<input type="hidden" name="'+ method.params[i].name +'" value="'+ paramValue +'">';
506      }
507    }
508   
509    form.html(t);
510    form.attr('target', newWindow ? "_blank" : "invokeFrame");
511    form.submit();
512  }
513 
514  return false;
515}
516</script>
517
518</body>
519</html>
Note: See TracBrowser for help on using the repository browser.