RapiDoc/index.html at master · toroarnaud/RapiDoc · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
  <title>RapiDoc</title>
</head>

<body>
  <!--
    https://api.apis.guru/v2/specs/github.com/v3/swagger.json
    https://api.apis.guru/v2/specs/bitbucket.org/2.0/swagger.json
    https://petstore.swagger.io/v2/swagger.json
    https://assets.zuora.com/zuora-documentation/swagger.yaml <<< Large spec with lot of markdown

  <button onclick="changeAttr('heading-text')"> Change Heading Text </button>
  <button onclick="changeLayout()"> Change Layout </button>
  <button onclick="toggleAttr('show-header')"> Toggle Header </button>
  <button onclick="toggleAttr('body-padding')"> Toggle Padding </button>
  <button onclick="toggleTheme()"> Toggle Theme </button>

  <script>

  function getRapiDoc(){
    return document.getElementById("thedoc");
  }
  function changeAttr(attr){
    getRapiDoc().setAttribute(attr, attr+Math.floor(Math.random() * 100) );
  }

  function changeLayout(){
    let currLayout = getRapiDoc().getAttribute('layout');
    let newLayout = currLayout==="row"?"column":"row";
    getRapiDoc().setAttribute('layout', newLayout );
  }
  function toggleAttr(attr){
    if (getRapiDoc().getAttribute(attr) === 'false'){
      getRapiDoc().setAttribute(attr,"true");
    }
    else{
      getRapiDoc().setAttribute(attr,"false");
    }
  }

  function toggleTheme(){
    if (getRapiDoc().getAttribute('theme') === 'dark'){
      getRapiDoc().setAttribute('theme',"light");
    }
    else{
      getRapiDoc().setAttribute('theme',"dark");
    }
  }


  </script>
-->
  <!--
  <rapi-doc id = "thedoc" spec-url="https://api.apis.guru/v2/specs/bitbucket.org/2.0/swagger.json"
    heading-text="My Product"
    spec-url="https://api.apis.guru/v2/specs/bitbucket.org/2.0/swagger.json"
    primary-color="#ffff99"
    header-color="#AA0000"
    theme="dark"
    layout="row"
    show-header='false'
    style="width:200px; border:1px solid #333; border-radius:4px;"
  >
  </rapi-doc>
-->
  <rapi-doc
    spec-url="https://api.apis.guru/v2/specs/bitbucket.org/2.0/swagger.json"
    layout="row"
    theme="light"
  >
</rapi-doc>
</body>

</html>