vendor/pimcore/data-hub/src/Resources/views/Feature/explorer.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <style>
  5.         body {
  6.             height: 100%;
  7.             margin: 0;
  8.             width: 100%;
  9.             overflow: hidden;
  10.         }
  12.         #graphiql {
  13.             height: 100vh;
  14.         }
  15.         .token-button {
  16.             position: absolute;
  17.             left: 250px;
  18.             top: 12px;
  19.             background: -webkit-linear-gradient(#fbfbfb, #f8f8f8);
  20.             background:         linear-gradient(#fbfbfb, #f8f8f8);
  21.             border-width: 1px;
  22.             border-style: solid;
  23.             border-color: #d3d3d3 #d0d0d0 #bababa;
  24.             border-radius: 4px;
  25.             box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.13), inset 0 1px #fff;
  26.             color: #444;
  27.             cursor: pointer;
  28.             display: inline-block;
  29.             margin: 0 5px 0;
  30.             padding: 2px 8px 4px;
  31.             text-decoration: none;
  32.             height: 26px;
  33.             font-family: system, -apple-system, 'San Francisco', '.SFNSDisplay-Regular', 'Segoe UI', Segoe, 'Segoe WP', 'Helvetica Neue', helvetica, 'Lucida Grande', arial, sans-serif;
  34.             font-size: 14px;
  35.         }
  36.         #token-input {
  37.             display: none;
  38.             position: absolute;
  39.             left: 250px;
  40.             top: 12px;
  41.             width: 350px;
  42.             font-size: 13px;
  43.             line-height: 20px;
  44.             height: 20px;
  45.             padding: 2px 10px;
  46.             border: 1px solid #ccc;
  47.             border-radius: 2px;
  48.         }
  49.     </style>
  51.     <link rel="stylesheet" href="{{ asset('bundles/pimcoredatahub/graphiql.css') }}"/>
  53.     <script src="{{ asset('bundles/pimcoredatahub/react/react-15.0.1.min.js') }}"></script>
  54.     <script src="{{ asset('bundles/pimcoredatahub/react/react-dom-15.0.1.min.js') }}"></script>
  55.     <script src="{{ asset('bundles/pimcoredatahub/react/fetch.min.js') }}"></script>
  57.     <script src="{{ asset('bundles/pimcoredatahub/graphiql.min.js') }}"></script>
  58. </head>
  59. <body>
  60. <button class="token-button">Enter Token</button>
  61. <input type="text" placeholder="AccessToken" id="token-input">
  62. <div id="graphiql">Loading...</div>
  63. <script>
  65.     /**
  66.      * This GraphiQL example illustrates how to use some of GraphiQL's props
  67.      * in order to enable reading and updating the URL parameters, making
  68.      * link sharing of queries a little bit easier.
  69.      *
  70.      * This is only one example of this kind of feature, GraphiQL exposes
  71.      * various React params to enable interesting integrations.
  72.      */
  74.             // Parse the search string to get url parameters.
  75.     var search     = window.location.search;
  76.     var parameters = {};
  77.     search.substr(1).split('&').forEach(function (entry) {
  78.         var eq = entry.indexOf('=');
  79.         if (eq >= 0) {
  80.             parameters[decodeURIComponent(entry.slice(0, eq))] =
  81.                     decodeURIComponent(entry.slice(eq + 1));
  82.         }
  83.     });
  85.     // if variables was provided, try to format it.
  86.     if (parameters.variables) {
  87.         try {
  88.             parameters.variables =
  89.                     JSON.stringify(JSON.parse(parameters.variables), null, 2);
  90.         } catch (e) {
  91.             // Do nothing, we want to display the invalid JSON as a string, rather
  92.             // than present an error.
  93.         }
  94.     }
  96.     // When the query and variables string is edited, update the URL bar so
  97.     // that it can be easily shared
  98.     function onEditQuery(newQuery) {
  99.         parameters.query = newQuery;
  100.         updateURL();
  101.     }
  103.     function onEditVariables(newVariables) {
  104.         parameters.variables = newVariables;
  105.         updateURL();
  106.     }
  108.     function onEditOperationName(newOperationName) {
  109.         parameters.operationName = newOperationName;
  110.         updateURL();
  111.     }
  113.     function updateURL() {
  114.         var newSearch = '?' + Object.keys(parameters).filter(function (key) {
  115.                     return Boolean(parameters[key]);
  116.                 }).map(function (key) {
  117.                     return encodeURIComponent(key) + '=' +
  118.                            encodeURIComponent(parameters[key]);
  119.                 }).join('&');
  120.         history.replaceState(null, null, newSearch);
  121.     }
  123.     function getCookie(name) {
  124.         var value = "; " + document.cookie;
  125.         var parts = value.split("; " + name + "=");
  126.         if (parts.length == 2) return parts.pop().split(";").shift();
  127.     }
  129.     // Defines a GraphQL fetcher using the fetch API.
  130.     function graphQLFetcher(graphQLParams) {
  131.         var headers = {
  132.             'Accept':       'application/json',
  133.             'Content-Type': 'application/json',
  134.         };
  135.         if (window.tokenInput) {
  136.             headers['{{ tokenHeader }}'] = tokenInput.value;
  137.         }
  139.         var cookie = getCookie('XSRF-TOKEN');
  141.         if (cookie != undefined) {
  142.             headers['X-XSRF-TOKEN'] = cookie;
  143.         }
  145.         return fetch("{{ graphQLUrl }}", {
  146.             method:      'post',
  147.             headers:     headers,
  148.             body:        JSON.stringify(graphQLParams),
  149.             credentials: 'include'
  150.         }).then(function (response) {
  151.             return response.text();
  152.         }).then(function (responseBody) {
  153.             try {
  154.                 return JSON.parse(responseBody);
  155.             } catch (error) {
  156.                 return responseBody;
  157.             }
  158.         });
  159.     }
  161.     // Render <GraphiQL /> into the body.
  162.     ReactDOM.render(
  163.             React.createElement(GraphiQL, {
  164.                 fetcher:             graphQLFetcher,
  165.                 query:               parameters.query,
  166.                 variables:           parameters.variables,
  167.                 operationName:       parameters.operationName,
  168.                 onEditQuery:         onEditQuery,
  169.                 onEditVariables:     onEditVariables,
  170.                 onEditOperationName: onEditOperationName
  171.             }),
  172.             document.getElementById('graphiql')
  173.     );
  175. </script>
  176. <script>
  177.     var button     = document.querySelector('.token-button');
  178.     var tokenInput = document.querySelector('#token-input');
  179.     button.addEventListener('click', function() {
  180.         button.style.display     = 'none';
  181.         tokenInput.style.display = 'inline-block';
  182.     });
  183.     tokenInput.addEventListener('change', function() {
  184.         if (window.localStorage) {
  185.             window.localStorage.setItem('api-token', tokenInput.value);
  186.         }
  187.     });
  188.     if (window.localStorage) {
  189.         var tokenValue = window.localStorage.getItem('api-token');
  190.         if (tokenValue) {
  191.             tokenInput.value = tokenValue;
  192.         }
  193.     }
  194. </script>
  195. </body>
  196. </html>