Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-01-31 10:04:08 +03:00
Code Issues Packages Projects Releases Wiki Activity

Enhance demo (fixes #49)

Browse Source
This commit is contained in:
Roman Hotsiy 2016-07-29 13:40:02 +03:00
parent 7166fd6322
commit c076b5ebbc
No known key found for this signature in database
GPG Key ID: 5CB7B3ACABA57CB0
3 changed files with 42 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
demo/index.html
View File

@ -4,14 +4,20 @@
<title>ReDoc</title> <title>ReDoc</title>
<link rel="stylesheet" href="main.css"> <link rel="stylesheet" href="main.css">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.vaadin.com/vaadin-core-elements/latest/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="https://cdn.vaadin.com/vaadin-core-elements/master/vaadin-combo-box/vaadin-combo-box-light.html">
</head> </head>
<body> <body>
<nav> <nav>
<header> ReDoc </header> <header> ReDoc </header>
<form id="schema-url-form"> <template is="dom-bind" id="specs">
<input id="schema-url-input" value='http://rebilly.github.io/SwaggerTemplateRepo/swagger.yaml'> <form id="schema-url-form" is="iron-form">
<vaadin-combo-box-light id="spec-input" items="[[specs]]" attr-for-value="value" allow-custom-value>
<input placeholder="URL to a spec to try" id="schema-url-input" type="text" is="iron-input" value="https://rebilly.github.io/RebillyAPI/swagger.json">
</vaadin-combo-box-light>
<button type="submit"> Explore </button> <button type="submit"> Explore </button>
</form> </form>
</template>
<iframe src="https://ghbtns.com/github-btn.html?user=Rebilly&repo=ReDoc&type=star&count=true&size=large" <iframe src="https://ghbtns.com/github-btn.html?user=Rebilly&repo=ReDoc&type=star&count=true&size=large"
frameborder="0" scrolling="0" width="130px" height="30px"></iframe> frameborder="0" scrolling="0" width="130px" height="30px"></iframe>
</nav> </nav>

3
demo/main.css
View File

@ -47,11 +47,11 @@ nav input {
width: 50%; width: 50%;
box-sizing: border-box; box-sizing: border-box;
max-width: 500px; max-width: 500px;
padding: 0 10px;
color: #555; color: #555;
background-color: #fff; background-color: #fff;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075); box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
@ -78,7 +78,6 @@ nav button {
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 4px;
} }
nav button:hover { nav button:hover {

39
demo/main.js
View File

@ -2,19 +2,12 @@
'use strict'; 'use strict';
var schemaUrlForm = document.getElementById('schema-url-form'); var schemaUrlForm = document.getElementById('schema-url-form');
var schemaUrlInput = document.getElementById('schema-url-input'); var schemaUrlInput;
schemaUrlForm.addEventListener('submit', function(event) {
event.preventDefault();
event.stopPropagation();
location.search = updateQueryStringParameter(location.search, 'url', schemaUrlInput.value)
return false;
})
var url = window.location.search.match(/url=([^&]+)/); var url = window.location.search.match(/url=([^&]+)/);
if (url && url.length > 1) { if (url && url.length > 1) {
url = decodeURIComponent(url[1]); url = decodeURIComponent(url[1]);
document.getElementsByTagName('redoc')[0].setAttribute('spec-url', url); document.getElementsByTagName('redoc')[0].setAttribute('spec-url', url);
schemaUrlInput.value = url;
} }
function updateQueryStringParameter(uri, key, value) { function updateQueryStringParameter(uri, key, value) {
@ -31,5 +24,35 @@
return uri + separator + key + "=" + value + hash; return uri + separator + key + "=" + value + hash;
} }
} }
var specs = document.querySelector('#specs');
specs.addEventListener('dom-change', function() {
schemaUrlForm = document.getElementById('schema-url-form');
schemaUrlInput = document.getElementById('schema-url-input');
schemaUrlForm.addEventListener('submit', function(event) {
console.log('test')
event.preventDefault();
event.stopPropagation();
location.search = updateQueryStringParameter(location.search, 'url', schemaUrlInput.value)
return false;
})
schemaUrlInput.addEventListener('mousedown', function(e) {
e.stopPropagation();
});
schemaUrlInput.value = url;
specs.specs = [
'https://api.apis.guru/v2/specs/instagram.com/1.0.0/swagger.yaml',
'https://api.apis.guru/v2/specs/googleapis.com/calendar/v3/swagger.yaml',
'https://api.apis.guru/v2/specs/data2crm.com/1/swagger.yaml',
'https://api.apis.guru/v2/specs/graphhopper.com/1.0/swagger.yaml'
];
var $specInput = document.getElementById('spec-input');
$specInput.addEventListener('value-changed', function(e) {
schemaUrlInput.value = e.detail.value;
location.search = updateQueryStringParameter(location.search, 'url', schemaUrlInput.value);
});
});
//window.redocDebugMode = true; //window.redocDebugMode = true;
})(); })();