add loading animation

This commit is contained in:
Roman Hotsiy 2016-01-24 19:01:17 +02:00
parent 91e7af2b9d
commit deed1272fc
4 changed files with 55 additions and 4 deletions

View File

@ -14,9 +14,7 @@
</form>
</nav>
<redoc scroll-y-offset="body > nav" spec-url='swagger.json'>
Loading...
</redoc>
<redoc scroll-y-offset="body > nav" spec-url='rebilly.json'></redoc>
<!-- ReDoc built file with all dependencies included -->
<script src="dist/redoc.full.js"> </script>

View File

@ -80,6 +80,7 @@ nav {
position: fixed;
top: 0;
z-index: 1;
box-sizing: border-box;
}
@media (min-width: 1000px) {

View File

@ -4,7 +4,8 @@
var schemaUrlForm = document.getElementById('schema-url-form');
var schemaUrlInput = document.getElementById('schema-url-input');
schemaUrlForm.addEventListener('submit', function(event) {
event.preventDefault();
Redoc.init(schemaUrlInput.value);
event.preventDefault();
return false;
})
})();

View File

@ -20,6 +20,8 @@ import {isFunction} from 'angular2/src/facade/lang';
let optionNames = new Set(['scrollYOffset']);
let dom = new BrowserDomAdapter();
@RedocComponent({
selector: 'redoc',
providers: [SchemaManager, BrowserDomAdapter, OptionsManager],
@ -81,10 +83,58 @@ export default class Redoc extends BaseComponent {
}
}
static showLoadingAnimation() {
if (!dom.query('#redoc-loading-style')) {
let animStyle = dom.createStyleElement(`
redoc.loading {
position: relative;
display: block;
min-height:350px;
}
redoc.loading:before {
content: "Loading...";
font-size: 28px;
text-align: center;
padding-top: 40px;
color: #3F5C9C;
font-weight: bold;
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: white;
z-index: 9999;
opacity: 1;
transition: all 0.6s ease-out;
}
redoc.loading-remove:before {
opacity: 0;
}
`);
animStyle.id = 'redoc-loading-style';
dom.appendChild(dom.defaultDoc().head, animStyle);
}
dom.addClass(dom.query('redoc'), 'loading');
}
static hideLoadingAnimation() {
let redocEl = dom.query('redoc');
dom.addClass(redocEl, 'loading-remove');
setTimeout(() => {
dom.removeClass(redocEl, 'loading-remove');
dom.removeClass(redocEl, 'loading');
}, 400);
}
static init(schemaUrl, options) {
if (Redoc.appRef) {
Redoc.dispose();
}
Redoc.showLoadingAnimation();
return SchemaManager.instance().load(schemaUrl)
.then(() => {
(new OptionsManager()).options = options;
@ -92,6 +142,7 @@ export default class Redoc extends BaseComponent {
})
.then(
(appRef) => {
Redoc.hideLoadingAnimation();
Redoc.appRef = appRef;
redocEvents.bootstrapped.next();
console.log('ReDoc bootstrapped!');