s2graphql/src/main/resources/assets/graphiql.html - incubator-s2graph - Git at Google

 <!--
  * LICENSE AGREEMENT For GraphiQL software
  *
  * Facebook, Inc. (“Facebook”) owns all right, title and interest, including all
  * intellectual property and other proprietary rights, in and to the GraphiQL
  * software. Subject to your compliance with these terms, you are hereby granted a
  * non-exclusive, worldwide, royalty-free copyright license to (1) use and copy the
  * GraphiQL software; and (2) reproduce and distribute the GraphiQL software as
  * part of your own software (“Your Software”). Facebook reserves all rights not
  * expressly granted to you in this license agreement.
  *
  * THE SOFTWARE AND DOCUMENTATION, IF ANY, ARE PROVIDED "AS IS" AND ANY EXPRESS OR
  * IMPLIED WARRANTIES (INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
  * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE) ARE DISCLAIMED. IN NO
  * EVENT SHALL FACEBOOK OR ITS AFFILIATES, OFFICES, DIRECTORS OR EMPLOYEES BE
  * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
  * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
  * GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
  * HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT
  * LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF
  * THE USE OF THE SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  *
  * You will include in Your Software (e.g., in the file(s), documentation or other
  * materials accompanying your software): (1) the disclaimer set forth above; (2)
  * this sentence; and (3) the following copyright notice:
  *
  * Copyright (c) 2015, Facebook, Inc. All rights reserved.
 -->
 <!DOCTYPE html>
 <html>
   <head>
     <style>
       body {
         height: 100%;
         margin: 0;
         width: 100%;
         overflow: hidden;
       }

       #graphiql {
         height: 100vh;
       }
     </style>

     <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/graphiql@0.11.11/graphiql.css" />
     <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>
     <script src="//cdn.jsdelivr.net/npm/graphiql@0.11.11/graphiql.min.js"></script>
   </head>
   <body>
     <div id="graphiql">Loading...</div>

     <script>

       /**
        * This GraphiQL example illustrates how to use some of GraphiQL's props
        * in order to enable reading and updating the URL parameters, making
        * link sharing of queries a little bit easier.
        *
        * This is only one example of this kind of feature, GraphiQL exposes
        * various React params to enable interesting integrations.
        */

       // 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);
       }

       // Defines a GraphQL fetcher using the fetch API.
       function graphQLFetcher(graphQLParams) {
         return fetch('/graphql', {
           method: 'post',
           headers: {
             'Accept': 'application/json',
             'Content-Type': 'application/json',
           },
           body: JSON.stringify(graphQLParams),
           credentials: 'include',
         }).then(function (response) {
           return response.text();
         }).then(function (responseBody) {
           try {
             return JSON.parse(responseBody);
           } catch (error) {
             return responseBody;
           }
         });
       }

       // Render <GraphiQL /> into the body.
       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')
       );
     </script>
   </body>
 </html>
	<!--
	* LICENSE AGREEMENT For GraphiQL software
	*
	* Facebook, Inc. (“Facebook”) owns all right, title and interest, including all
	* intellectual property and other proprietary rights, in and to the GraphiQL
	* software. Subject to your compliance with these terms, you are hereby granted a
	* non-exclusive, worldwide, royalty-free copyright license to (1) use and copy the
	* GraphiQL software; and (2) reproduce and distribute the GraphiQL software as
	* part of your own software (“Your Software”). Facebook reserves all rights not
	* expressly granted to you in this license agreement.
	*
	* THE SOFTWARE AND DOCUMENTATION, IF ANY, ARE PROVIDED "AS IS" AND ANY EXPRESS OR
	* IMPLIED WARRANTIES (INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
	* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE) ARE DISCLAIMED. IN NO
	* EVENT SHALL FACEBOOK OR ITS AFFILIATES, OFFICES, DIRECTORS OR EMPLOYEES BE
	* LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
	* CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
	* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
	* HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT
	* LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF
	* THE USE OF THE SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
	*
	* You will include in Your Software (e.g., in the file(s), documentation or other
	* materials accompanying your software): (1) the disclaimer set forth above; (2)
	* this sentence; and (3) the following copyright notice:
	*
	* Copyright (c) 2015, Facebook, Inc. All rights reserved.
	-->
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	body {
	height: 100%;
	margin: 0;
	width: 100%;
	overflow: hidden;
	}

	#graphiql {
	height: 100vh;
	}
	</style>

	<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/graphiql@0.11.11/graphiql.css" />
	<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>
	<script src="//cdn.jsdelivr.net/npm/graphiql@0.11.11/graphiql.min.js"></script>
	</head>
	<body>
	<div id="graphiql">Loading...</div>

	<script>

	/**
	* This GraphiQL example illustrates how to use some of GraphiQL's props
	* in order to enable reading and updating the URL parameters, making
	* link sharing of queries a little bit easier.
	*
	* This is only one example of this kind of feature, GraphiQL exposes
	* various React params to enable interesting integrations.
	*/

	// 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);
	}

	// Defines a GraphQL fetcher using the fetch API.
	function graphQLFetcher(graphQLParams) {
	return fetch('/graphql', {
	method: 'post',
	headers: {
	'Accept': 'application/json',
	'Content-Type': 'application/json',
	},
	body: JSON.stringify(graphQLParams),
	credentials: 'include',
	}).then(function (response) {
	return response.text();
	}).then(function (responseBody) {
	try {
	return JSON.parse(responseBody);
	} catch (error) {
	return responseBody;
	}
	});
	}

	// Render <GraphiQL /> into the body.
	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')
	);
	</script>
	</body>
	</html>