rapidoc
Version:
RapiDoc - Open API spec viewer with built in console
150 lines (142 loc) • 7.2 kB
HTML
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-132775238-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-132775238-1');
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<style>
.btn{
width: 70px;
height: 70px;
background-color: #47AFE8;
color: #fff;
font-size: 12px;
display: block;
border: none;
margin: 2px;
border-radius: 2px;
cursor:pointer;
outline:none;
}
rapi-doc{
width:100%;
}
</style>
<script type="text/javascript" src="rapidoc-min.js"></script>
<script>
function getRapiDoc(){
return document.getElementById("thedoc");
}
function changeAttr(attr){
let arr=[];
let rand = Math.floor(Math.random() * 10);
if (attr==="heading-text"){
arr = ['SPIDER-MAN', "IRON-MAN", "BLACK-PANTHER", "RapiDoc", "SUPER-MAN", "BAT-MAN", "JOKER", "WONDER-WOMAN", "SUPER-GIRL", "CAT-WOMAN", "LARA-CROFT"];
}
else if (attr==="header-color"){
arr = ['#2d87e2', "#ff6961", "#34A853", "#FBBC05", "#66757F", "#FFFFFF", "#3B5998", "#8B9DC3", "#7CBB00", "#7B0099", " #FF9900"];
if (arr[rand] !== '#FFFFFF'){
getRapiDoc().setAttribute('primary-color', arr[rand] );
}
else{
getRapiDoc().setAttribute('primary-color', '#FF3D00' );
}
}
else if(attr==="spec-url"){
arr = [
"https://petstore.swagger.io/v2/swagger.json"
,"https://api.apis.guru/v2/specs/amazonaws.com/acm/2015-12-08/swagger.json"
,"https://api.apis.guru/v2/specs/bitbucket.org/2.0/swagger.json",
,"https://api.apis.guru/v2/specs/appveyor.com/0.20181229.0/swagger.json"
,"https://api.apis.guru/v2/specs/github.com/v3/swagger.json"
,"https://api.apis.guru/v2/specs/box.com/content/2.0/swagger.json"
,"https://api.apis.guru/v2/specs/twilio.com/2010-04-01/swagger.json"
,"https://api.apis.guru/v2/specs/amadeus.com/1.2/swagger.json"
,"https://api.apis.guru/v2/specs/stackexchange.com/2.0/swagger.json"
,"https://api.apis.guru/v2/specs/cisco.com/0.0.3/swagger.json"
,"https://api.apis.guru/v2/specs/googleapis.com/drive/v3/swagger.json"
,"https://api.apis.guru/v2/specs/azure.com/workloadmonitor-Microsoft.WorkloadMonitor/2018-08-31-preview/swagger.json"
];
}
else{
return;
}
if (arr[rand]){
getRapiDoc().setAttribute(attr, arr[rand] );
}
else{
getRapiDoc().setAttribute(attr, arr[0] );
}
}
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");
}
}
function changeFont(){
if (getRapiDoc().getAttribute('regular-font') === "'Varela Round'"){
getRapiDoc().setAttribute('regular-font',"'rapidoc'");
}
else{
getRapiDoc().setAttribute('regular-font',"'Varela Round'");
}
}
function changeLogo(){
var logoEl = document.getElementById("logo");
if (logoEl){
logoEl.parentNode.removeChild(logoEl);
}
else{
let newLogoEl = document.createElement("img");
newLogoEl.setAttribute('id', "logo");
newLogoEl.setAttribute('slot', "logo");
newLogoEl.setAttribute('src', "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4Igp3aWR0aD0iNDgiIGhlaWdodD0iNDgiCnZpZXdCb3g9IjAgMCA0OCA0OCIKc3R5bGU9IiBmaWxsOiMwMDAwMDA7Ij48ZyBpZD0ic3VyZmFjZTEiPjxwYXRoIHN0eWxlPSIgZmlsbDojRkYzRDAwOyIgZD0iTSA0My4xOTkyMTkgMzMuODk4NDM4IEMgNDIuODAwNzgxIDM2IDQxLjEwMTU2MyAzNy42MDE1NjMgMzkgMzcuODk4NDM4IEMgMzUuNjk5MjE5IDM4LjM5ODQzOCAzMC4xOTkyMTkgMzkgMjQgMzkgQyAxNy44OTg0MzggMzkgMTIuMzk4NDM4IDM4LjM5ODQzOCA5IDM3Ljg5ODQzOCBDIDYuODk4NDM4IDM3LjYwMTU2MyA1LjE5OTIxOSAzNiA0LjgwMDc4MSAzMy44OTg0MzggQyA0LjM5ODQzOCAzMS42MDE1NjMgNCAyOC4xOTkyMTkgNCAyNCBDIDQgMTkuODAwNzgxIDQuMzk4NDM4IDE2LjM5ODQzOCA0LjgwMDc4MSAxNC4xMDE1NjMgQyA1LjE5OTIxOSAxMiA2Ljg5ODQzOCAxMC4zOTg0MzggOSAxMC4xMDE1NjMgQyAxMi4zMDA3ODEgOS42MDE1NjMgMTcuODAwNzgxIDkgMjQgOSBDIDMwLjE5OTIxOSA5IDM1LjYwMTU2MyA5LjYwMTU2MyAzOSAxMC4xMDE1NjMgQyA0MS4xMDE1NjMgMTAuMzk4NDM4IDQyLjgwMDc4MSAxMiA0My4xOTkyMTkgMTQuMTAxNTYzIEMgNDMuNjAxNTYzIDE2LjM5ODQzOCA0NC4xMDE1NjMgMTkuODAwNzgxIDQ0LjEwMTU2MyAyNCBDIDQ0IDI4LjE5OTIxOSA0My42MDE1NjMgMzEuNjAxNTYzIDQzLjE5OTIxOSAzMy44OTg0MzggWiAiPjwvcGF0aD48cGF0aCBzdHlsZT0iIGZpbGw6I0ZGRkZGRjsiIGQ9Ik0gMjAgMzEgTCAyMCAxNyBMIDMyIDI0IFogIj48L3BhdGg+PC9nPjwvc3ZnPg==");
getRapiDoc().appendChild(newLogoEl);
getRapiDoc().setAttribute('primary-color', "#FF3D00" );
}
}
</script>
</head>
<body>
<rapi-doc id="thedoc" spec-url="https://petstore.swagger.io/v2/swagger.json">
<div style="display:flex; margin:10px; justify-content:center;flex-wrap: wrap;">
<button class="btn" onclick="changeAttr('header-color')">Change Header Color</button>
<button class="btn" onclick="changeAttr('heading-text')">Change Heading Text</button>
<button class="btn" onclick="changeLogo()">Change Logo</button>
<button class="btn" onclick="changeFont()">Change Font</button>
<button class="btn" onclick="toggleAttr('show-header')">Toggle Header</button>
<button class="btn" onclick="toggleAttr('show-info')">Toggle Info Section</button>
<button class="btn" onclick="toggleAttr('allow-authentication')">Toggle Auth Section</button>
<button class="btn" onclick="toggleAttr('allow-try')">Toggle Try mode</button>
<button class="btn" onclick="toggleTheme()">Change Theme</button>
<button class="btn" onclick="changeAttr('spec-url')">Change Spec URL</button>
<button class="btn" onclick="toggleAttr('allow-search')">Toggle Search</button>
<button class="btn" onclick="toggleAttr('allow-spec-url-load')">Toggle Spec URL Load</button>
<button class="btn" onclick="toggleAttr('allow-spec-file-load')">Toggle Spec File Load</button>
</div>
</rapi-doc>
</body>
</html>