api-console-assets
Version:
This repo only exists to publish api console components to npm
110 lines (94 loc) • 3.27 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-path-selector 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="../../paper-checkbox/paper-checkbox.html">
<link rel="import" href="../../raml-docs-helpers/raml-docs-parser.html">
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../../raml-docs-helpers/raml-docs-parser.html">
<link rel="import" href="../raml-path-selector.html">
<style is="custom-style" include="demo-pages-shared-styles">
body {
margin: 0;
padding: 0;
}
.container {
@apply(--layout-horizontal);
}
.container > div {
@apply(--layout-flex);
}
.selector {
padding: 20px;
background-color: #6B6C6D;
}
.parser {
padding: 20px;
}
.selector-settings {
padding: 16px;
background-color: #E8E9EA;
margin-bottom: 24px;
}
paper-checkbox {
display: block;
margin: 4px 0;
}
</style>
</head>
<body unresolved>
<div class="container">
<div class="parser">
<h3>The demo RAML parser</h3>
<raml-docs-parser></raml-docs-parser>
</div>
<div class="selector">
<section class="selector-settings">
<h3>The raml-path-selector element</h3>
<paper-input id="pathManual" label="Selected path"></paper-input>
<div class="action">
<paper-checkbox id="narrow">Render narrow view</paper-checkbox>
<paper-checkbox id="noInk">No ripple effect</paper-checkbox>
</div>
</section>
<raml-path-selector first-level-opened resources-opened documentation-opened hidden></raml-path-selector>
</div>
</div>
<script>
var $ = function(selector) {
return document.querySelector(selector);
};
$('raml-docs-parser').addEventListener('raml-ready', function(e) {
var selector = $('raml-path-selector');
selector.removeAttribute('hidden');
selector.raml = e.detail.raml;
});
$('#pathManual').addEventListener('input', function(e) {
$('raml-path-selector').selectedPath = e.target.value;
});
$('#narrow').addEventListener('change', function(e) {
$('raml-path-selector').narrow = e.target.checked;
});
$('#noInk').addEventListener('change', function(e) {
$('raml-path-selector').noink = e.target.checked;
});
window.addEventListener('raml-selected-path-changed', function(e) {
$('#pathManual').value = e.detail.path;
});
</script>
</body>
</html>