diff --git a/public/css/loopbackStyles.css b/public/css/loopbackStyles.css
new file mode 100644
index 0000000..193bb4e
--- /dev/null
+++ b/public/css/loopbackStyles.css
@@ -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.
+*/
diff --git a/public/index.html b/public/index.html
index 5af095a..f85ca38 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,84 +1,44 @@
- Swagger UI
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ StrongLoop API Explorer
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
-
+
+
diff --git a/public/lib/loadSwaggerUI.js b/public/lib/loadSwaggerUI.js
new file mode 100644
index 0000000..7907316
--- /dev/null
+++ b/public/lib/loadSwaggerUI.js
@@ -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.');
+ }
+ }
+});