1+ <!doctype html>
2+ < head >
3+ <!-- Global site tag (gtag.js) - Google Analytics -->
4+ < script async src ="https://www.googletagmanager.com/gtag/js?id=UA-132775238-1 "> </ script >
5+ < script >
6+ window . dataLayer = window . dataLayer || [ ] ;
7+ function gtag ( ) { dataLayer . push ( arguments ) ; }
8+ gtag ( 'js' , new Date ( ) ) ;
9+ gtag ( 'config' , 'UA-132775238-1' ) ;
10+ </ script >
11+ < meta charset ="utf-8 ">
12+ < meta name ="viewport " content ="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes ">
13+ < link href ="https://fonts.googleapis.com/css?family=Varela+Round " rel ="stylesheet ">
14+ < style >
15+ .btn {
16+ width : 70px ;
17+ height : 70px ;
18+ background-color : # 47AFE8
19+ color : # fff
20+ font-size : 12px ;
21+ display : block;
22+ border : none;
23+ margin : 2px ;
24+ border-radius : 2px ;
25+ cursor : pointer;
26+ outline : none;
27+ }
28+ rapi-doc {
29+ width : 100% ;
30+ }
31+ </ style >
32+ < script type ="text/javascript " src ="../rapidoc-min.js "> </ script >
33+ < script >
34+ function getRapiDoc ( ) {
35+ return document . getElementById ( "thedoc" ) ;
36+ }
37+
38+ function changeSchemaStyle ( ) {
39+ let docEl = getRapiDoc ( ) ;
40+ if ( docEl . getAttribute ( 'schema-style' ) === 'table' ) {
41+ docEl . setAttribute ( 'schema-style' , "tree" ) ;
42+ }
43+ else {
44+ docEl . setAttribute ( 'schema-style' , "table" ) ;
45+ }
46+ }
47+
48+ function changeTheme ( themeName ) {
49+ let docEl = getRapiDoc ( ) ;
50+ if ( themeName === 'dark' ) {
51+ docEl . setAttribute ( 'theme' , 'dark' ) ;
52+ docEl . setAttribute ( 'bg-color' , '#333' ) ;
53+ docEl . setAttribute ( 'text-color' , '#BBB' ) ;
54+ } else if ( themeName === 'light' ) {
55+ docEl . setAttribute ( 'theme' , 'light' ) ;
56+ docEl . setAttribute ( 'bg-color' , '#FFF' ) ;
57+ docEl . setAttribute ( 'text-color' , '#444' ) ;
58+ } else if ( themeName === 'night' ) {
59+ docEl . setAttribute ( 'theme' , 'dark' ) ;
60+ docEl . setAttribute ( 'bg-color' , '#14191f' ) ;
61+ docEl . setAttribute ( 'text-color' , '#aec2e0' ) ;
62+ } else if ( themeName === 'mud' ) {
63+ docEl . setAttribute ( 'theme' , 'dark' ) ;
64+ docEl . setAttribute ( 'bg-color' , '#403635' ) ;
65+ docEl . setAttribute ( 'text-color' , '#c3b8b7' ) ;
66+ } else if ( themeName === 'cofee' ) {
67+ docEl . setAttribute ( 'theme' , 'dark' ) ;
68+ docEl . setAttribute ( 'bg-color' , '#36312C' ) ;
69+ docEl . setAttribute ( 'text-color' , '#ceb8a0' ) ;
70+ } else if ( themeName === 'forest' ) {
71+ docEl . setAttribute ( 'theme' , 'dark' ) ;
72+ docEl . setAttribute ( 'bg-color' , '#323b3d' ) ;
73+ docEl . setAttribute ( 'text-color' , '#BDD6DB' ) ;
74+ } else if ( themeName === 'olive' ) {
75+ docEl . setAttribute ( 'theme' , 'dark' ) ;
76+ docEl . setAttribute ( 'bg-color' , '#2a2f31' ) ;
77+ docEl . setAttribute ( 'text-color' , '#acc7c8' ) ;
78+ } else if ( themeName === 'outerspace' ) {
79+ docEl . setAttribute ( 'theme' , 'dark' ) ;
80+ docEl . setAttribute ( 'bg-color' , '#2D3133' ) ;
81+ docEl . setAttribute ( 'text-color' , '#CAD9E3' ) ;
82+ } else if ( themeName === 'ebony' ) {
83+ docEl . setAttribute ( 'theme' , 'dark' ) ;
84+ docEl . setAttribute ( 'bg-color' , '#2B303B' ) ;
85+ docEl . setAttribute ( 'text-color' , '#dee3ec' ) ;
86+ } else if ( themeName === 'snow' ) {
87+ docEl . setAttribute ( 'theme' , 'light' ) ;
88+ docEl . setAttribute ( 'bg-color' , '#FAFAFA' ) ;
89+ docEl . setAttribute ( 'text-color' , '#555' ) ;
90+ } else if ( themeName === 'green' ) {
91+ docEl . setAttribute ( 'theme' , 'light' ) ;
92+ docEl . setAttribute ( 'bg-color' , '#f9fdf7' ) ;
93+ docEl . setAttribute ( 'text-color' , '#375F1B' ) ;
94+ } else if ( themeName === 'blue' ) {
95+ docEl . setAttribute ( 'theme' , 'light' ) ;
96+ docEl . setAttribute ( 'bg-color' , '#ecf1f7' ) ;
97+ docEl . setAttribute ( 'text-color' , '#133863' ) ;
98+ } else if ( themeName === 'beige' ) {
99+ docEl . setAttribute ( 'theme' , 'light' ) ;
100+ docEl . setAttribute ( 'bg-color' , '#fdf8ed' ) ;
101+ docEl . setAttribute ( 'text-color' , '#342809' ) ;
102+ }
103+
104+ }
105+
106+ function changeSpec ( ) {
107+ let docEl = getRapiDoc ( ) ;
108+ if ( docEl . getAttribute ( 'spec-url' ) . includes ( 'bitbucket' ) ) {
109+ docEl . setAttribute ( 'spec-url' , "../specs/petstore_extended.yaml" ) ;
110+ }
111+ else {
112+ docEl . setAttribute ( 'spec-url' , "../specs/bitbucket.json" ) ;
113+ }
114+ }
115+
116+ function changeRenderStyle ( ) {
117+ let currRender = getRapiDoc ( ) . getAttribute ( 'render-style' ) ;
118+ let newRender = currRender === "read" ? "view" : "read" ;
119+ getRapiDoc ( ) . setAttribute ( 'render-style' , newRender ) ;
120+ }
121+
122+ </ script >
123+ </ head >
124+ < body >
125+ < rapi-doc id ="thedoc " spec-url ="https://petstore.swagger.io/v2/swagger.json ">
126+ < div style ="display:flex; margin:10px; justify-content:center;flex-wrap: wrap; ">
127+ < button class ="btn " onclick ="changeSpec() "> API Spec</ button >
128+ < button class ="btn " onclick ="changeRenderStyle() "> Render Style</ button >
129+ < button class ="btn " onclick ="changeSchemaStyle() "> Schema Style</ button >
130+
131+ < div style ="width:40px; "> </ div >
132+ < button class ="btn " onclick ="changeTheme('dark') "> Dark</ button >
133+ < button class ="btn " onclick ="changeTheme('night') "> Night</ button >
134+ < button class ="btn " onclick ="changeTheme('mud') "> Mud</ button >
135+ < button class ="btn " onclick ="changeTheme('cofee') "> Cofee</ button >
136+ < button class ="btn " onclick ="changeTheme('forest') "> Forest</ button >
137+ < button class ="btn " onclick ="changeTheme('olive') "> Olive</ button >
138+ < button class ="btn " onclick ="changeTheme('outerspace') "> Outer Space</ button >
139+ < button class ="btn " onclick ="changeTheme('ebony') "> Ebony</ button >
140+
141+ < div style ="width:40px; "> </ div >
142+ < button class ="btn " onclick ="changeTheme('light') "> Light</ button >
143+ < button class ="btn " onclick ="changeTheme('snow') "> Snow</ button >
144+ < button class ="btn " onclick ="changeTheme('green') "> Green</ button >
145+ < button class ="btn " onclick ="changeTheme('blue') "> Blue</ button >
146+ < button class ="btn " onclick ="changeTheme('beige') "> Beige</ button >
147+
148+ </ div >
149+ </ rapi-doc >
150+ </ body >
151+ </ html>
0 commit comments