api-swagger.twig

{% set title = pluginSpec.name ~ ' API Reference' %}
{% extends 'guide.twig' %}

{% block meta %}
    <link href="/vendor/swagger-ui/swagger-ui.css?{{ revision|e('html_attr') }}" rel="stylesheet">
    <link href="/css/swagger-ui-overrides.css?{{ revision|e('html_attr') }}" rel="stylesheet">
{% endblock %}

{% block guideContent %}
    <h1>{{ title }}</h1>
    <div markdown="1" class="alert alert-info">
        Test API requests use our public demo environment. Because of this, read requests work but requests that create, edit, or delete data do not.
    </div>
    <div id="swagger-ui"></div>
{% endblock %}

{% block footer %}
    {{ parent() }}
    <script src="/vendor/swagger-ui/swagger-ui-bundle.js?{{ revision|e('html_attr') }}"></script>
    <script type="text/javascript">
    window.onload = function () {
        let pluginSpecJson = {{ pluginSpecJson|raw }};
        let proxyBaseUrl = '/demo';
        let summaryPrefix = '/index.php?module=API&method=';

        function clonePluginSpec(spec) {
            return JSON.parse(JSON.stringify(spec));
        }

        function shortenSummaryPaths() {
            let summaryPaths = document.querySelectorAll('.opblock-summary-path');

            Array.prototype.forEach.call(summaryPaths, function (element) {
                let fullPath = element.getAttribute('data-path');

                if (!fullPath || fullPath.indexOf(summaryPrefix) !== 0) {
                    return;
                }

                element.textContent = fullPath.substring(summaryPrefix.length);
                element.setAttribute('title', fullPath);
            });
        }

        function DisableAuthorizePlugin() {
            return {
                wrapComponents: {
                    authorizeBtn: () => () => null
                }
            }
        }

        if (typeof SwaggerUIBundle === 'function') {
            let pluginSpec = clonePluginSpec(pluginSpecJson);

            // CORs on demo not allowing authorization: Bearer anonymous in preflight, so we need a proxy into demo
            pluginSpec.servers = [{ url: proxyBaseUrl }];

            SwaggerUIBundle({
                dom_id: '#swagger-ui',
                url: null,
                spec: pluginSpec,
                docExpansion: 'list',
                tagsSorter: 'alpha',
                presets: [
                    SwaggerUIBundle.presets.apis,
                ],
                plugins: [
                    DisableAuthorizePlugin,
                ],
                requestInterceptor: (req) => {
                    req.headers.Authorization = "Bearer anonymous"
                    return req
                },
                onComplete: () => {
                    let swaggerRoot = document.getElementById('swagger-ui');

                    // For some reason onComplete is not actually on complete
                    // this allows it to run when the paths are available
                    window.setTimeout(shortenSummaryPaths, 0);

                    if (!swaggerRoot || swaggerRoot.__matomoSummaryPathClickHandlerAttached) {
                        return;
                    }

                    swaggerRoot.__matomoSummaryPathClickHandlerAttached = true;
                    // Opening path adds back in path with index.php?module=API..., need to shorten paths again
                    swaggerRoot.addEventListener('click', function (event) {
                        if (!event.target.closest('.opblock-tag, .opblock-summary, .expand-operation, .opblock-summary-control')) {
                            return;
                        }
                        shortenSummaryPaths();
                    });
                },
                layout: 'BaseLayout'
            });
            return;
        }
    };
    </script>
{% endblock %}