mirror of
https://github.com/Redocly/redoc.git
synced 2024-11-10 19:06:34 +03:00
Enhance demo (fixes #49)
This commit is contained in:
parent
7166fd6322
commit
c076b5ebbc
|
@ -4,14 +4,20 @@
|
|||
<title>ReDoc</title>
|
||||
<link rel="stylesheet" href="main.css">
|
||||
<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>
|
||||
<body>
|
||||
<nav>
|
||||
<header> ReDoc </header>
|
||||
<form id="schema-url-form">
|
||||
<input id="schema-url-input" value='http://rebilly.github.io/SwaggerTemplateRepo/swagger.yaml'>
|
||||
<button type="submit"> Explore </button>
|
||||
</form>
|
||||
<template is="dom-bind" id="specs">
|
||||
<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>
|
||||
</form>
|
||||
</template>
|
||||
<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>
|
||||
</nav>
|
||||
|
|
|
@ -47,11 +47,11 @@ nav input {
|
|||
width: 50%;
|
||||
box-sizing: border-box;
|
||||
max-width: 500px;
|
||||
padding: 0 10px;
|
||||
|
||||
color: #555;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
-webkit-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;
|
||||
|
@ -78,7 +78,6 @@ nav button {
|
|||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
nav button:hover {
|
||||
|
|
39
demo/main.js
39
demo/main.js
|
@ -2,19 +2,12 @@
|
|||
'use strict';
|
||||
|
||||
var schemaUrlForm = document.getElementById('schema-url-form');
|
||||
var schemaUrlInput = document.getElementById('schema-url-input');
|
||||
schemaUrlForm.addEventListener('submit', function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
location.search = updateQueryStringParameter(location.search, 'url', schemaUrlInput.value)
|
||||
return false;
|
||||
})
|
||||
var schemaUrlInput;
|
||||
|
||||
var url = window.location.search.match(/url=([^&]+)/);
|
||||
if (url && url.length > 1) {
|
||||
url = decodeURIComponent(url[1]);
|
||||
document.getElementsByTagName('redoc')[0].setAttribute('spec-url', url);
|
||||
schemaUrlInput.value = url;
|
||||
}
|
||||
|
||||
function updateQueryStringParameter(uri, key, value) {
|
||||
|
@ -31,5 +24,35 @@
|
|||
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;
|
||||
})();
|
||||
|
|
Loading…
Reference in New Issue
Block a user