verdnatura-mirror
/
loopback-component-explorer
mirror of https://github.com/strongloop/loopback-component-explorer.git
0
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Reverted to use special loading logic from loopback-explorer

This commit is contained in:
Shelby Sanders 2014-07-14 21:57:39 -07:00
parent 0f4bf489d9
commit ed044468f7
3 changed files with 121 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
public/css/loopbackStyles.css Normal file
View File

@ -0,0 +1,26 @@
/* Styles used for loopback explorer customizations */
.accessTokenDisplay {
color: white;
margin-right: 10px;
}
.accessTokenDisplay.set {
border-bottom: 1px dotted #333; position: relative; cursor: pointer;
}
.accessTokenDisplay.set:hover:after {
content: attr(data-tooltip);
position: absolute;
white-space: nowrap;
font-size: 12px;
background: rgba(0, 0, 0, 0.85);
padding: 3px 7px;
color: #FFF;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
right: 0;
bottom: -30px;
}
/*
FIXME: Separate the overrides from the rest of the styles, rather than override screen.css entirely.
*/

60
public/index.html
View File

@ -1,12 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<title>Swagger UI</title>
<link href='//fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'/>
<title>StrongLoop API Explorer</title>
<link href='https://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'/>
<link href='css/reset.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='css/screen.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='css/reset.css' media='print' rel='stylesheet' type='text/css'/>
<link href='css/screen.css' media='print' rel='stylesheet' type='text/css'/>
<link href='css/loopbackStyles.css' rel='stylesheet' type='text/css'/>
<script type="text/javascript" src="lib/shred.bundle.js"></script>
<script src='lib/jquery-1.8.0.min.js' type='text/javascript'></script>
<script src='lib/jquery.slideto.min.js' type='text/javascript'></script>
@ -22,61 +23,20 @@
<!-- enabling this will enable oauth2 implicit scope support -->
<script src='lib/swagger-oauth.js' type='text/javascript'></script>
<script type="text/javascript">
$(function () {
window.swaggerUi = new SwaggerUi({
url: "http://petstore.swagger.wordnik.com/api/api-docs",
dom_id: "swagger-ui-container",
supportedSubmitMethods: ['get', 'post', 'put', 'delete'],
onComplete: function(swaggerApi, swaggerUi){
log("Loaded SwaggerUI");
if(typeof initOAuth == "function") {
/*
initOAuth({
clientId: "your-client-id",
realm: "your-realms",
appName: "your-app-name"
});
*/
}
$('pre code').each(function(i, e) {
hljs.highlightBlock(e)
});
},
onFailure: function(data) {
log("Unable to Load SwaggerUI");
},
docExpansion: "none"
});
$('#input_apiKey').change(function() {
var key = $('#input_apiKey')[0].value;
log("key: " + key);
if(key && key.trim() != "") {
log("added key " + key);
window.authorizations.add("key", new ApiKeyAuthorization("api_key", key, "query"));
}
})
window.swaggerUi.load();
});
</script>
<!-- Init swagger UI. -->
<script src='lib/loadSwaggerUI.js' type="text/javascript"></script>
</head>
<body class="swagger-section">
<div id='header'>
<div class="swagger-ui-wrap">
<a id="logo" href="http://swagger.wordnik.com">swagger</a>
<a id="logo">StrongLoop API Explorer</a>
<form id='api_selector'>
<div class='input icon-btn'>
<img id="show-pet-store-icon" src="images/pet_store_api.png" title="Show Swagger Petstore Example Apis">
<div class='input'>
<span class='accessTokenDisplay'>Token Not Set</span>
<input placeholder="accessToken" id="input_accessToken" name="accessToken" type="text"/>
</div>
<div class='input icon-btn'>
<img id="show-wordnik-dev-icon" src="images/wordnik_api.png" title="Show Wordnik Developer Apis">
</div>
<div class='input'><input placeholder="http://example.com/api" id="input_baseUrl" name="baseUrl" type="text"/></div>
<div class='input'><input placeholder="api_key" id="input_apiKey" name="apiKey" type="text"/></div>
<div class='input'><a id="explore" href="#">Explore</a></div>
<div class='input'><a id="explore" type="submit">Set Access Token</a></div>
</form>
</div>
</div>

63
public/lib/loadSwaggerUI.js Normal file
View File

@ -0,0 +1,63 @@
'use strict';
// Refactoring of inline script from index.html.
/*global SwaggerUi, log, ApiKeyAuthorization, hljs, window, $ */
$(function() {
$.getJSON('config.json', function(config) {
log(config);
loadSwaggerUi(config);
});
var accessToken;
function loadSwaggerUi(config) {
window.swaggerUi = new SwaggerUi({
url: config.url || '/swagger/resources',
apiKey: '',
dom_id: 'swagger-ui-container',
supportHeaderParams: true,
supportedSubmitMethods: ['get', 'post', 'put', 'delete'],
onComplete: function(swaggerApi, swaggerUi) {
log('Loaded SwaggerUI');
log(swaggerApi);
log(swaggerUi);
$('pre code').each(function(i, e) {hljs.highlightBlock(e); });
},
onFailure: function(data) {
log('Unable to Load SwaggerUI');
log(data);
},
docExpansion: 'none'
});
$('#explore').click(setAccessToken);
$('#api_selector').submit(setAccessToken);
$('#input_accessToken').keyup(onInputChange);
window.swaggerUi.load();
}
function setAccessToken(e) {
e.stopPropagation(); // Don't let the default #explore handler fire
e.preventDefault();
var key = $('#input_accessToken')[0].value;
log('key: ' + key);
if(key && key.trim() !== '') {
log('added accessToken ' + key);
window.authorizations.add('key', new ApiKeyAuthorization('access_token', key, 'query'));
accessToken = key;
$('.accessTokenDisplay').text('Token Set.').addClass('set');
$('.accessTokenDisplay').attr('data-tooltip', 'Current Token: ' + key);
}
}
function onInputChange(e) {
var el = e.currentTarget;
var key = $(e.currentTarget)[0].value;
if (!key || key.trim === '') return;
if (accessToken !== key) {
$('.accessTokenDisplay').text('Token changed; submit to confirm.');
} else {
$('.accessTokenDisplay').text('Token Set.');
}
}
});