UNPKG

api-console-assets

Version:

This repo only exists to publish api console components to npm

141 lines (136 loc) 4.93 kB
<!doctype 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>body-json-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="../../paper-dropdown-menu/paper-dropdown-menu.html"> <link rel="import" href="../../paper-listbox/paper-listbox.html"> <link rel="import" href="../../paper-item/paper-item.html"> <link rel="import" href="../body-json-editor.html"> <link rel="import" href="../../font-roboto/roboto.html"> <style is="custom-style"> :root { --raml-path-selector: { background: #f5f5f5; }; } 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; } .element-view { background-color: #fff; margin: 12px; padding: 12px; border-radius: 2px; } </style> </head> <body unresolved> <template is="dom-bind" id="app"> <raml-demo-page selected-object="{{selected}}" narrow="{{narrow}}" is-method="{{isMethod}}"> <paper-item data-url$="[[testRaml]]">Test case</paper-item> <h1>The body-json-editor element</h1> <div main> <template is="dom-if" if="[[!hasOptions]]"> <p>Selected method does not have the <b>body</b> or <b>response.body</b> property.</p> </template> <template is="dom-if" if="[[isMethod]]" restamp="true"> <section class="body-selector"> <template is="dom-if" if="[[displayBodySelector]]"> <paper-dropdown-menu label="Body source of the demo endpoint" class="body-selector"> <paper-listbox class="dropdown-content" selected="{{selectedOption}}"> <template is="dom-repeat" items="[[bodyOptions]]"> <paper-item>[[item.name]]</paper-item> </template> </paper-listbox> </paper-dropdown-menu> </template> </section> <section class="docs-body-parameters-table-content"> <div class="element-view"> <body-json-editor raml-type="[[selectedBody]]"></body-json-editor> </div> </section> </template> <p hidden$="[[isMethod]]">Select a method</p> </div> </raml-demo-page> </template> <script> (function(scope) { scope.bodyOptions = []; scope.observers = [ '_selectedChanged(selected, isMethod)', '_selectBody(bodyOptions, selectedOption)' ]; scope._selectedChanged = function(selected, isMethod) { if (!isMethod || !selected) { scope.bodyOptions = []; return; } var list = []; if (selected.body) { list.push({ name: 'Request body', value: selected.body }); } if (selected.responses) { var responses = selected.responses.filter(function(item) { return !!(item.body && item.body.length); }) .map(function(item, i) { return { value: item.body, name: 'Response #' + (i + 1) }; }); list = list.concat(responses); } scope.selectedBody = undefined; scope.bodyOptions = list; scope.singleOption = list.length === 1; scope.hasOptions = list.length > 0; scope.selectedOption = 0; scope.displayBodySelector = scope.hasOptions && !scope.singleOption; }; scope._selectBody = function(bodyOptions, selectedOption) { if (!bodyOptions || !bodyOptions.length) { return; } console.log('selecting body', bodyOptions[selectedOption].value); scope.selectedBody = bodyOptions[selectedOption].value; }; var path = location.pathname; if (~path.indexOf('.html')) { path = path.substr(0, path.lastIndexOf('/') + 1); } var ramlRoot = location.protocol + '//' + location.host + path.replace('demo', 'test'); scope.testRaml = ramlRoot + 'test.raml'; })(document.getElementById('app')); </script> </body> </html>