Merge pull request #1737 from magnetik/override-init-swagger

Allow to pass options to the constructor of SwaggerUIBundle

Resources/doc/customization.rst

@@ -3,12 +3,11 @@ Customization
 
 The look and feel of the Swagger UI can be customized.
 
-
 Overwrite Twig Template
 -----------------------
 
 If you want to customize parts of the template, you can create your own Twig template.
-This allows to change the title, the header, add additional or replace existing styles or scripts.
+This allows to change Swagger UI configuration, page title, page header, add additional or replace existing styles or scripts.
 
 Take a look at the Twig documentation `how to extend templates <https://twig.symfony.com/doc/2.x/tags/extends.html>`_.
 
@@ -25,11 +24,27 @@ Just create a file ``templates/bundles/NelmioApiDocBundle/SwaggerUi/index.html.t
     #}
     {% extends '@!NelmioApiDoc/SwaggerUi/index.html.twig' %}
 
+    {#
+        Change swagger UI configuration
+        All parameters are explained on Swagger UI website:
+        https://swagger.io/docs/open-source-tools/swagger-ui/usage/configuration/
+    #}
+    {% block swagger_initialization %}
+        <script type="text/javascript">
+            window.onload = loadSwaggerUI({
+                defaultModelsExpandDepth: -1,
+                deepLinking: true,
+            });
+        </script>
+    {% endblock %}
+
+    {# Import your own stylesheet #}
     {% block stylesheets %}
         {{ parent() }}
         <link rel="stylesheet" href="{{ asset('css/custom-swagger-styles.css') }}">
     {% endblock stylesheets %}
 
+    {# Import your own script #}
     {% block javascripts %}
         {{ parent() }}
         <script type="text/javascript" src="{{ asset('js/custom-request-signer.js') }}"></script>

Resources/public/init-swagger-ui.js

@@ -5,9 +5,9 @@
 // For the full copyright and license information, please view the LICENSE
 // file that was distributed with this source code.
 
-window.onload = function() {
+function loadSwaggerUI(userOptions = {}) {
   const data = JSON.parse(document.getElementById('swagger-data').innerText);
-  const ui = SwaggerUIBundle({
+  const defaultOptions = {
     spec: data.spec,
     dom_id: '#swagger-ui',
     validatorUrl: null,
@@ -19,7 +19,9 @@ window.onload = function() {
       SwaggerUIBundle.plugins.DownloadUrl
     ],
     layout: 'StandaloneLayout'
-  });
+  };
+  const options = Object.assign({}, defaultOptions, userOptions);
+  const ui = SwaggerUIBundle(options);
 
   const storageKey = 'nelmio_api_auth';
 
@@ -47,4 +49,4 @@ window.onload = function() {
   };
 
   window.ui = ui;
-};
+}

Resources/views/SwaggerUi/index.html.twig

@@ -66,8 +66,11 @@ file that was distributed with this source code. #}
         <script src="{{ asset('bundles/nelmioapidoc/swagger-ui/swagger-ui-standalone-preset.js') }}"></script>
     {% endblock javascripts %}
 
+    <script src="{{ asset('bundles/nelmioapidoc/init-swagger-ui.js') }}"></script>
     {% block swagger_initialization %}
-        <script src="{{ asset('bundles/nelmioapidoc/init-swagger-ui.js') }}"></script>
+        <script type="text/javascript">
+            window.onload = loadSwaggerUI();
+        </script>
     {% endblock swagger_initialization %}
 </body>
 </html>