Skip to content

GitLab

Verified Commit 661ea7d2 authored by Marco Kellershoff's avatar Marco Kellershoff 🤸
Browse files

Initial commit

parents
Expand all Hide whitespace changes
Inline Side-by-side
.gitignore 0 → 100644
View file @ 661ea7d2
tags
TAGS
connections.html 0 → 100644
View file @ 661ea7d2
<!DOCTYPE html>
<html manifest="manifest.appcache">
<head>
<title>GraphQL Explorer - Connections</title>
<style>
html,body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
font-family: monospace;
}
#app {
margin: 20px auto;
width: 776px;
max-width: 99%;
}
#connections li span.text {
padding-right: 10px;
cursor: pointer;
}
#connections li span.delete {
margin: 0;
border: 1px solid #000;
border-radius: 3px;
padding: 5px;
cursor: pointer;
font-size: 12px;
}
</style>
</head>
<body>
<div id="app">
<h2>New Connection</h2>
<div id="newconnection">
<input
id="apihost"
type="text"
placeholder="https://localhost/graphql" />
<button id="saveconnection">Save Connection</button>
<button id="connect">Quick Connect</button>
</div>
<h2>Saved Connections</h2>
<ul id="connections"></ul>
</div>
<script src="./connections.js"></script>
</body>
</html>
connections.js 0 → 100644
View file @ 661ea7d2
(function(window, document) {
"use strict";
const apihost = document.querySelector("#apihost");
const connectBtn = document.querySelector("#connect");
const saveBtn = document.querySelector("#saveconnection");
const connections = document.querySelector("#connections");
const setStore = (newStore) => {
window.localStorage.setItem("GRAPHQL_API_HOSTS", JSON.stringify(newStore));
}
const getStore = () => {
let store = window.localStorage.getItem("GRAPHQL_API_HOSTS");
if (!store) {
store = [];
} else {
store = JSON.parse(store);
}
return store;
};
const addToStore = (item) => {
const store = getStore();
store.push(item);
setStore(store);
refreshConnections();
return store;
};
const deleteFromStoreAtIndex = function(index) {
const i = parseInt(index, 10);
const store = getStore();
store.splice(i, 1);
setStore(store);
refreshConnections();
};
const deleteFunc = function(i) {
deleteFromStoreAtIndex(i);
};
const connectFunc = function(h) {
window.localStorage.setItem("GRAPHQL_API_HOST", h);
window.location.href = "explore.html";
};
const refreshConnections = function() {
const store = getStore();
connections.innerHTML = "";
store.forEach((item, i) => {
const li = document.createElement("li");
const text = document.createElement("span");
text.className = "text";
const deleteBtn = document.createElement("span");
deleteBtn.className = "delete";
text.innerHTML = item.text;
deleteBtn.innerHTML = "X";
text.addEventListener("click", function(){
connectFunc(this.parentNode.getAttribute("data-apihost"));
});
deleteBtn.addEventListener("click", function(){
deleteFunc(this.parentNode.getAttribute("data-index"));
});
li.setAttribute("data-apihost", item.value);
li.setAttribute("data-index", i);
li.appendChild(text);
li.appendChild(deleteBtn);
connections.appendChild(li);
});
};
saveBtn.addEventListener("click", function(evt) {
evt.preventDefault();
addToStore({text: apihost.value, value: apihost.value});
});
connectBtn.addEventListener("click", (evt) => {
evt.preventDefault();
connectFunc(apihost.value);
});
refreshConnections();
})(window, document)
explore.html 0 → 100644
View file @ 661ea7d2
<!DOCTYPE html>
<html manifest="manifest.appcache">
<head>
<title>GraphQL Explorer - Explore</title>
<style>
body {
height: 100%;
margin: 0;
width: 100%;
overflow: hidden;
}
#graphiql {
height: 100vh;
}
</style>
<script src="//cdn.jsdelivr.net/es6-promise/4.0.5/es6-promise.auto.min.js"></script>
<script src="//cdn.jsdelivr.net/fetch/0.9.0/fetch.min.js"></script>
<script src="//cdn.jsdelivr.net/react/15.4.2/react.min.js"></script>
<script src="//cdn.jsdelivr.net/react/15.4.2/react-dom.min.js"></script>
<link rel="stylesheet" href="./graphiql.css" />
<script src="./graphiql.js"></script>
</head>
<body>
<div id="graphiql">Loading...</div>
<script src="./explore.js"></script>
</body>
</html>
explore.js 0 → 100644
View file @ 661ea7d2
// Parse the search string to get url parameters.
var search = window.location.search;
var parameters = {};
search.substr(1).split('&').forEach(function (entry) {
var eq = entry.indexOf('=');
if (eq >= 0) {
parameters[decodeURIComponent(entry.slice(0, eq))] =
decodeURIComponent(entry.slice(eq + 1));
}
});
// if variables was provided, try to format it.
if (parameters.variables) {
try {
parameters.variables =
JSON.stringify(JSON.parse(parameters.variables), null, 2);
} catch (e) {
// Do nothing, we want to display the invalid JSON as a string, rather
// than present an error.
}
}
// When the query and variables string is edited, update the URL bar so
// that it can be easily shared
function onEditQuery(newQuery) {
parameters.query = newQuery;
updateURL();
}
function onEditVariables(newVariables) {
parameters.variables = newVariables;
updateURL();
}
function onEditOperationName(newOperationName) {
parameters.operationName = newOperationName;
updateURL();
}
function updateURL() {
var newSearch = '?' + Object.keys(parameters).filter(function (key) {
return Boolean(parameters[key]);
}).map(function (key) {
return encodeURIComponent(key) + '=' +
encodeURIComponent(parameters[key]);
}).join('&');
history.replaceState(null, null, newSearch);
}
function graphQLFetcher(graphQLParams) {
return fetch(window.localStorage.getItem("GRAPHQL_API_HOST"), {
method: 'post',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify(graphQLParams),
credentials: true,
}).then(function (response) {
return response.text();
}).then(function (responseBody) {
try {
return JSON.parse(responseBody);
} catch (error) {
return responseBody;
}
});
}
ReactDOM.render(
React.createElement(GraphiQL, {
fetcher: graphQLFetcher,
query: parameters.query,
variables: parameters.variables,
operationName: parameters.operationName,
onEditQuery: onEditQuery,
onEditVariables: onEditVariables,
onEditOperationName: onEditOperationName
}),
document.getElementById('graphiql')
);
graphiql.css 0 → 100644
View file @ 661ea7d2
This diff is collapsed.
graphiql.js 0 → 100644
View file @ 661ea7d2
This diff is collapsed.
index.html 0 → 100644
View file @ 661ea7d2
<!DOCTYPE html>
<html manifest="manifest.appcache">
<head>
<title>GraphQL Explorer</title>
<style>
html,body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
font-family: monospace;
}
#app {
margin: 20px auto;
width: 776px;
max-width: 99%;
}
</style>
</head>
<body>
<div id="app">
<h1>GraphQL Explorer</h1>
<ul>
<li><a href="connections.html">Manage Connections</a></li>
</ul>
</div>
<script src="./app.js"></script>
</body>
</html>
manifest.appcache 0 → 100644
View file @ 661ea7d2
CACHE MANIFEST
# manifest.appcache v1
CACHE:
app.js
connections.html
connections.js
explore.html
explore.js
graphiql.css
graphiql.js
index.html
# don't cache these ressources
NETWORK:
# fallback if content is not available (in cache) and user is offline
FALLBACK:
/ offlinefallback.html
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment