api-console-assets
Version:
This repo only exists to publish api console components to npm
138 lines (126 loc) • 5.13 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-request-panel demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../arc-demo-helpers/raml-demo-page.html">
<link rel="import" href="../raml-request-panel.html">
<link rel="import" href="../../font-roboto/roboto.html">
<link rel="import" href="../../oauth-authorization/oauth2-authorization.html">
<link rel="import" href="../../api-console-ext-comm/api-console-ext-comm.html">
<style is="custom-style">
:root {
--paper-tabs-selection-bar-color: rgba(0, 161, 223, 1);
--accent-color: #CC143C;
--action-accent-button-disabled-color: rgba(204, 20, 60, 0.42);
--raml-path-selector-background-color: #F5F5F5;
--code-mirror: {
background-color: #f5f2f0;
};
--code-mirror-editor: {
background-color: #f5f2f0;
z-index: 0;
display: block;
};
--code-background-color: #f5f2f0;
--code-mirror-background-color: #f5f2f0;
}
html,
body {
margin: 0;
padding: 0;
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-size: 14px;
font-weight: 400;
line-height: 20px;
background-color: #F5F5F5;
}
.demo-area {
background-color: #fff;
padding: 12px;
margin-left: 12px;
}
raml-request-panel {
max-width: 700px;
}
</style>
</head>
<body unresolved>
<template is="dom-bind">
<raml-demo-page selected-object="{{selected}}" narrow="{{narrow}}" is-method="{{isMethod}}">
<paper-item data-url$="[[testRaml]]">Test case #1</paper-item>
<paper-item data-url$="[[testRaml2]]">Test case #2</paper-item>
<paper-item data-url="https://cdn.rawgit.com/advanced-rest-client/echo-advancedrestclient-com/master/api/api.raml">ARC Echo service</paper-item>
<paper-item main-menu class="checkable-menu"><paper-item-body>No URL editor</paper-item-body><paper-checkbox checked="{{noUrl}}"></paper-checkbox></paper-item>
<h1>The raml-request-panel element</h1>
<div main>
<template is="dom-if" if="[[isMethod]]" restamp="true">
<div class="env-selector">
<label>Manually change base URI</label>
<select value="{{envUri::input}}">
<option value="">RAML base uri</option>
<option value="http://api.domain.com/{contextPath}/{contextSubPath}">http://api.domain.com/{contextPath}/{contextSubPath}</option>
<option value="api.domain.com/path/">api.domain.com/path/</option>
</select>
</div>
<div class="demo-area">
<raml-request-panel method="[[selected]]" narrow="[[narrow]]" response="{{response}}" response-error="{{responseError}}" redirect-url="[[redirectUrl]]" loading-time="{{loadingTime}}" no-url-editor="[[noUrl]]" base-uri="[[baseUri]]"></raml-request-panel>
</div>
<template is="dom-if" if="[[response.ok]]">
<p>Request succeeded</p>
<p>Loading time: [[loadingTime]] ms</p>
</template>
<template is="dom-if" if="[[!response.ok]]">
<p>Request error</p>
<p>[[responseError.message]]</p>
<p>Loading time: [[loadingTime]] ms</p>
</template>
</template>
<template is="dom-if" if="[[!isMethod]]">
<p>Select a method in the selector.</p>
</template>
</div>
</raml-demo-page>
<oauth2-authorization></oauth2-authorization>
<api-console-ext-comm></api-console-ext-comm>
</template>
<script>
(function(app) {
app.observers = [
'_envUriChanged(envUri)'
];
app._envUriChanged = function(envUri) {
if (envUri) {
app.baseUri = envUri;
} else {
app.baseUri = undefined;
}
};
var path = location.pathname;
if (~path.indexOf('.html')) {
path = path.substr(0, path.lastIndexOf('/') + 1);
}
var ramlRoot = location.protocol + '//' + location.host + path;
app.testRaml = ramlRoot + 'test.raml';
app.testRaml2 = ramlRoot + 'raml-test-1/ultimate-open-weather.raml';
var redirectUrl = location.href.replace(/\/raml-request-panel\/demo(\/)?(index.html)?/,
'/oauth-authorization/oauth-popup.html');
app.redirectUrl = redirectUrl;
})(document.querySelector('template[is="dom-bind"]'));
</script>
</body>
</html>