From c076b5ebbc4ac35fcdefb8c626eb3aa7dea76da6 Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Fri, 29 Jul 2016 13:40:02 +0300 Subject: [PATCH] Enhance demo (fixes #49) --- demo/index.html | 14 ++++++++++---- demo/main.css | 3 +-- demo/main.js | 39 +++++++++++++++++++++++++++++++-------- 3 files changed, 42 insertions(+), 14 deletions(-) diff --git a/demo/index.html b/demo/index.html index f8f5c3da..28fb0b47 100644 --- a/demo/index.html +++ b/demo/index.html @@ -4,14 +4,20 @@ ReDoc + + diff --git a/demo/main.css b/demo/main.css index 0ef5fe77..c0150c92 100644 --- a/demo/main.css +++ b/demo/main.css @@ -47,11 +47,11 @@ nav input { width: 50%; box-sizing: border-box; max-width: 500px; + padding: 0 10px; color: #555; background-color: #fff; border: 1px solid #ccc; - border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; @@ -78,7 +78,6 @@ nav button { -ms-user-select: none; user-select: none; border: 1px solid #ccc; - border-radius: 4px; } nav button:hover { diff --git a/demo/main.js b/demo/main.js index 2762004b..95bf33b2 100644 --- a/demo/main.js +++ b/demo/main.js @@ -2,19 +2,12 @@ 'use strict'; var schemaUrlForm = document.getElementById('schema-url-form'); - var schemaUrlInput = document.getElementById('schema-url-input'); - schemaUrlForm.addEventListener('submit', function(event) { - event.preventDefault(); - event.stopPropagation(); - location.search = updateQueryStringParameter(location.search, 'url', schemaUrlInput.value) - return false; - }) + var schemaUrlInput; var url = window.location.search.match(/url=([^&]+)/); if (url && url.length > 1) { url = decodeURIComponent(url[1]); document.getElementsByTagName('redoc')[0].setAttribute('spec-url', url); - schemaUrlInput.value = url; } function updateQueryStringParameter(uri, key, value) { @@ -31,5 +24,35 @@ return uri + separator + key + "=" + value + hash; } } + + var specs = document.querySelector('#specs'); + specs.addEventListener('dom-change', function() { + schemaUrlForm = document.getElementById('schema-url-form'); + schemaUrlInput = document.getElementById('schema-url-input'); + + schemaUrlForm.addEventListener('submit', function(event) { + console.log('test') + event.preventDefault(); + event.stopPropagation(); + location.search = updateQueryStringParameter(location.search, 'url', schemaUrlInput.value) + return false; + }) + + schemaUrlInput.addEventListener('mousedown', function(e) { + e.stopPropagation(); + }); + schemaUrlInput.value = url; + specs.specs = [ + 'https://api.apis.guru/v2/specs/instagram.com/1.0.0/swagger.yaml', + 'https://api.apis.guru/v2/specs/googleapis.com/calendar/v3/swagger.yaml', + 'https://api.apis.guru/v2/specs/data2crm.com/1/swagger.yaml', + 'https://api.apis.guru/v2/specs/graphhopper.com/1.0/swagger.yaml' + ]; + var $specInput = document.getElementById('spec-input'); + $specInput.addEventListener('value-changed', function(e) { + schemaUrlInput.value = e.detail.value; + location.search = updateQueryStringParameter(location.search, 'url', schemaUrlInput.value); + }); + }); //window.redocDebugMode = true; })();