api-console-assets
Version:
This repo only exists to publish api console components to npm
209 lines (189 loc) • 6.93 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-url-editor demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../arc-demo-helpers/raml-demo-page.html">
<link rel="import" href="../../font-roboto/roboto.html">
<link rel="import" href="../../raml-request-parameters-editor/raml-request-parameters-model.html">
<link rel="import" href="../../paper-input/paper-input.html">
<link rel="import" href="../raml-request-url-editor.html">
<style>
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;
}
raml-request-url-editor {
margin-bottom: 40px;
max-width: 700px;
}
output {
display: block;
max-width: 100%;
margin: 12px 0;
}
output label {
display: block;
font-weight: 500;
}
output code {
white-space: pre-wrap;
}
output.url-output code {
word-break: break-all;
}
</style>
</head>
<body unresolved>
<template is="dom-bind" id="app">
<raml-demo-page selected-object="{{selected}}" is-method="{{isMethod}}">
<paper-item data-url$="[[testRaml]]">Test case (RAML 1.0)</paper-item>
<paper-item data-url$="[[envTest]]">Environment change with relative URL</paper-item>
<paper-item data-url$="[[testRaml]]">Test case 1</paper-item>
<paper-item data-url$="[[testRaml2]]">Test case 2</paper-item>
<h1>The raml-request-url-editor element</h1>
<div main>
<template is="dom-if" if="[[isMethod]]">
<div class="env-selector">
<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>
<raml-request-url-editor auto-validate required value="{{url}}" base-uri="[[baseUri]]" endpoint-uri="[[selected.relativeUri]]" query-model="[[qm]]" uri-model="[[um]]"></raml-request-url-editor>
<raml-request-parameters-model query-parameters="[[selected.queryParameters]]" uri-parameters="[[selected.allUriParameters]]" query-model="{{qm}}" uri-model="{{um}}"></raml-request-parameters-model>
<output class="url-output">
<label>Current URL value</label>
<code>[[url]]</code>
</output>
<output>
<label>URI properties</label>
<code>[[uriProperties]]</code>
</output>
<output>
<label>Query properties</label>
<code>[[queryProperties]]</code>
</output>
<div class="actions">
<form on-submit="_uriEventSubmit">
<fieldset>
<legend>Update URI parameter</legend>
<div class="event-row">
<paper-input name="name" label="Property name"></paper-input>
<paper-input name="value" label="Property value"></paper-input>
<button type="submit">Update</button>
</div>
</fieldset>
</form>
<form on-submit="_queryEventSubmit">
<fieldset>
<legend>Update query parameter</legend>
<div class="event-row">
<paper-input name="name" label="Property name"></paper-input>
<paper-input name="value" label="Property value"></paper-input>
<button type="submit">Update</button>
</div>
</fieldset>
</form>
</div>
</template>
<p hidden$="[[isMethod]]">Select a method</p>
</div>
</raml-demo-page>
</template>
<script>
(function(scope) {
scope.baseUri = location.origin;
scope.uriProperties = '';
scope.queryProperties = '';
scope.observers = [
'_envUriChanged(envUri)',
'_selectedChanged(selected, isMethod)'
];
scope.init = function() {
};
scope._selectedChanged = function(selected, isMethod) {
if (!isMethod) {
return;
}
if (!selected) {
scope.baseUri = undefined;
} else {
scope.baseUri = selected.baseUri || location.origin;
}
};
scope._envUriChanged = function(envUri) {
if (envUri) {
scope.baseUri = envUri;
} else {
scope.baseUri = scope.selected.baseUri || location.origin;
}
};
scope._uriChanged = function() {
var result = {};
if (scope.um) {
scope.um.forEach(function(item) {
result[item.key] = item.value;
});
}
scope.uriProperties = JSON.stringify(result, null, 2);
};
scope._queryChanged = function() {
var result = {};
if (scope.qm) {
scope.qm.forEach(function(item) {
result[item.key] = item.value;
});
}
scope.queryProperties = JSON.stringify(result, null, 2);
};
window.addEventListener('uri-parameter-changed', scope._uriChanged);
window.addEventListener('query-parameter-changed', scope._queryChanged);
function formDataSubmit(e, type) {
e.preventDefault();
var fd = new FormData(e.target);
var name = fd.get('name');
var value = fd.get('value');
scope.fire(type + '-parameter-changed', {
name: name,
value: value
});
}
scope._uriEventSubmit = function(e) {
formDataSubmit(e, 'uri');
};
scope._queryEventSubmit = function(e) {
formDataSubmit(e, 'query');
};
var path = location.pathname;
if (~path.indexOf('.html')) {
path = path.substr(0, path.lastIndexOf('/') + 1);
}
var ramlRoot = location.protocol + '//' + location.host + path;
scope.testRaml = ramlRoot + 'test.raml';
scope.envTest = ramlRoot + 'issue-console.raml';
window.addEventListener('WebComponentsReady', scope.init);
})(document.getElementById('app'));
</script>
</body>
</html>