api-console-assets
Version:
This repo only exists to publish api console components to npm
290 lines (265 loc) • 8.95 kB
HTML
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<title>raml-json-enhance demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../raml-js-parser/raml-js-parser.html">
<link rel="import" href="../../file-drop/file-drop.html">
<link rel="import" href="../../paper-button/paper-button.html">
<link rel="import" href="../../paper-spinner/paper-spinner.html">
<link rel="import" href="../../prism-element/prism-highlighter.html">
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
<link rel="import" href="../../paper-styles/paper-styles.html">
<link rel="import" href="../../paper-tabs/paper-tabs.html">
<link rel="import" href="../../paper-tabs/paper-tab.html">
<link rel="import" href="../../iron-pages/iron-pages.html">
<link rel="import" href="../../paper-input/paper-input.html">
<link rel="import" href="../../raml-main-entry-lookup/raml-main-entry-lookup.html">
<link rel="import" href="../raml-json-enhance.html">
<style is="custom-style" include="demo-pages-shared-styles">
html,
body {
margin: 0;
padding: 0;
}
.vertical-section-container {
max-width: 600px;
}
output {
white-space: pre-wrap;
@apply(--paper-font-code1);
margin-top: 20px;
display: block;
}
file-drop {
margin: 0;
}
.loader {
margin: 24px;
}
h1 {
@apply(--paper-font-title);
}
h2 {
@apply(--paper-font-subhead);
}
small {
color: rgba(0, 0, 0, 0.54);
}
.url-field {
@apply(--layout-horizontal);
}
.url-field paper-input {
@apply(--layout-flex);
}
</style>
</head>
<body unresolved>
<template is="dom-bind" id="app">
<raml-js-parser id="parser" json on-raml-js-parser-ready="_parserReady"></raml-js-parser>
<raml-json-enhance id="enhancer" print-measurements></raml-json-enhance>
<div class="vertical-section-container centered">
<h1>Drop RAML file here.</h1>
<file-drop multiple file="{{file}}" on-file-accepted="fileListChanged"></file-drop>
<raml-main-entry-lookup files="[[file]]" on-entry="entryFound"></raml-main-entry-lookup>
<h2>Or enter RAML file URL here</h2>
<div class="url-field">
<paper-input label="RAML url" value="{{ramlFileUrl}}"></paper-input>
<paper-button raised on-tap="_downloadRaml">Download</paper-button>
</div>
<section class="no-entry-point" hidden$="[[!noEntryPoint]]">
<h3>No entry point found</h3>
<p>The app scanned files and there were no candidates for entry point raml file. Please, try again.</p>
</section>
<section class="multiple-entry-points" hidden$="[[!multipleEntryPoints]]">
<h3>Multiple entry points found</h3>
<p>Please, select file that is the entry point to the API definition.</p>
<template is="dom-repeat" items="[[entryPoints]]" index-as="index">
<p>[[item.path]][[item.name]] <paper-button raised on-tap="_useEntryPoint">use this</paper-button></p>
</template>
</section>
<section class="loader">
<paper-spinner active="[[working]]"></paper-spinner>
</section>
<section hidden$="[[!hasData]]">
<paper-tabs selected="{{selectedOutput}}">
<paper-tab>Structure</paper-tab>
<!-- <paper-tab>JSON</paper-tab> -->
<paper-tab>Parser errors</paper-tab>
</paper-tabs>
<iron-pages selected="[[selectedOutput]]">
<output id="outStruct"></output>
<!-- <output id="out"></output> -->
<section>
<template is="dom-repeat" items="[[errors]]" index-as="index">
<p>#[[index]]: [[item.message]]</p>
</template>
</section>
</iron-pages>
</section>
</div>
<prism-highlighter></prism-highlighter>
</template>
<script>
(function(scope) {
'use strict';
scope.file = undefined;
scope.noEntryPoint = false;
scope.multipleEntryPoints = false;
scope.entryPoints = [];
scope.working = false;
scope.hasData = false;
scope.api = undefined;
scope.errors = [];
scope.selectedOutput = 0;
scope.ramlFileUrl =
// 'https://raw.githubusercontent.com/advanced-rest-client/raml-example-api/master/api.raml';
'https://cdn.rawgit.com/advanced-rest-client/drive-raml-api-v2/1f85d308/api.raml';
scope.fileListChanged = function() {
scope.hasData = false;
scope.noEntryPoint = false;
scope.multipleEntryPoints = false;
scope.entryPoints = [];
scope.api = undefined;
};
scope.entryFound = function(e) {
var file = e.detail.entry;
if (!file) {
scope.noEntryPoint = true;
return;
}
if (file instanceof Array) {
scope.multipleEntryPoints = true;
scope.entryPoints = file;
} else {
scope.parseRaml(file);
}
};
scope._useEntryPoint = function(e) {
var item = e.model.get('item');
scope.multipleEntryPoints = false;
scope.entryPoints = [];
scope.parseRaml(item);
};
scope.parseRaml = function(item) {
scope.working = true;
var detail = {
'file': item.entry,
'files': scope.file
};
var event = scope.fire('parse-raml-file', detail);
if (!event.detail.raml) {
console.error('Event did not contained raml property.');
return;
}
event.detail.raml
.then(function(result) {
scope.handleParseResult(result);
})
.catch(function(e) {
console.warn('API error', e);
scope.working = false;
});
};
scope._highlightApiJson = function() {
window.setTimeout(function() {
var obj = scope.api.expand(true).toJSON({
dumpSchemaContents: true,
rootNodeDetails: true,
serializeMetadata: true
});
var txt = JSON.stringify(obj);
var event = scope.fire('syntax-highlight', {
code: txt,
lang: 'js'
});
scope.$.out.innerHTML = event.detail.code;
scope.working = false;
scope.hasData = true;
}, 1);
};
scope._displayApiStructure = function(json) {
window.setTimeout(function() {
var txt = '';
json.resources.forEach(function(resource) {
var rName = resource.displayName;
var rUri = resource.absoluteUri;
txt += rName + ' <small>' + rUri + '</small>\n';
if (resource.methods) {
resource.methods.forEach(function(method) {
var mName = method.displayName ? method.displayName : null;
var mMethod = method.method ? method.method : 'unknown';
var mDesc = method.description ? method.description : null;
if (mName) {
txt += ' ' + mName + ' <small>' + mMethod + '</small>\n';
} else {
txt += ' ' + mMethod + '\n';
}
txt += ' <small>' + mDesc + '</small>\n';
});
}
});
scope.$.outStruct.innerHTML = txt;
scope.working = false;
scope.hasData = true;
}, 2);
};
scope.toggleJson = function() {
scope.$.jsonOutput.toggle();
};
scope.toggleStruct = function() {
scope.$.structureOutput.toggle();
};
scope._downloadRaml = function() {
var url = scope.ramlFileUrl;
if (!url) {
console.error('The URL is not set');
return;
}
scope.working = true;
var detail = {
'url': url
};
var event = scope.fire('parse-raml-url', detail);
if (!event.detail.raml) {
console.error('The event did not handled the RAML property.');
scope.working = false;
return;
}
event.detail.raml
.then(function(result) {
scope.handleParseResult(result);
})
.catch(function(e) {
console.warn('API error', e);
scope.working = false;
});
};
scope.handleParseResult = function(data) {
scope.api = data.result;
scope.errors = data.json.errors;
scope.$.enhancer.json = data.json.specification;
};
window.addEventListener('raml-json-enhance-ready', function(e) {
scope._displayApiStructure(e.detail.json);
console.log(e.target.result);
});
scope._parserReady = function() {
scope._downloadRaml();
};
})(document.querySelector('#app'));
</script>
</body>
</html>