api-console-assets
Version:
This repo only exists to publish api console components to npm
99 lines (93 loc) • 3.54 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-main-entry-lookup demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
<link rel="import" href="../../file-drop/file-drop.html">
<link rel="import" href="../../paper-toast/paper-toast.html">
<link rel="import" href="../raml-main-entry-lookup.html">
<style is="custom-style" include="demo-pages-shared-styles">
.vertical-section-container {
max-width: 600px;
}
file-drop {
margin: 0;
}
h1 {
@apply(--paper-font-title);
}
h3 {
@apply(--paper-font-subhead);
}
</style>
</head>
<body unresolved>
<template is="dom-bind" id="app">
<div class="vertical-section-container centered">
<h1>Drop RAML file here.</h1>
<file-drop file="{{file}}" multiple on-file-accepted="fileListChanged"></file-drop>
<raml-main-entry-lookup files="[[file]]" on-entry="entryFound"></raml-main-entry-lookup>
<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="has-shingle-entry-point" hidden$="[[!singleEntryPoint]]">
<h3>Single entry point found</h3>
<p>[[entryPoint.path]][[entryPoint.name]]</p>
</section>
</div>
<paper-toast text="You have selected a main RAML file." id="selection"></paper-toast>
</template>
<script>
(function(scope) {
scope.fileListChanged = () => {
scope.noEntryPoint = false;
scope.multipleEntryPoints = false;
scope.singleEntryPoint = false;
scope.entryPoints = [];
scope.entryPoint = null;
};
scope.entryFound = (e) => {
var file = e.detail.entry;
if (!file) {
scope.noEntryPoint = true;
return;
}
if (file instanceof Array) {
scope.multipleEntryPoints = true;
scope.entryPoints = file;
} else {
scope.singleEntryPoint = true;
scope.entryPoint = file;
}
};
scope.useEntryPoint = () => {
app.$.selection.open();
};
scope.fileListChanged();
})(document.querySelector('#app'));
</script>
</body>
</html>