recipes/cookbook/templates/include/recipe_open_modal.html

{% load i18n %}

<style>
    .loader {
        border: 16px solid #f3f3f3; /* Light grey */
        border-top: 16px solid #3498db; /* Blue */
        border-radius: 50%;
        width: 120px;
        height: 120px;
        animation: spin 2s linear infinite;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
</style>


<div class="modal" tabindex="-1" role="dialog" id="modal_recipe">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{% trans 'Recipe' %}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" style="text-align: center">
                <div class="loader" id="div_loader"></div>
                <a href="" id="a_recipe_open" target="_blank" onclick="afterClick()" style="font-size: 250%"></a>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">{% trans 'Close' %}</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    function openRecipe(id) {
        var link = $('#a_recipe_open');
        link.hide();
        $('#div_loader').show();

        var url = "{% url 'api_get_external_file_link' recipe_id=12345 %}".replace(/12345/, id);

        link.text("{% trans 'Open Recipe' %}");
        $('#modal_recipe').modal('show');

        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState === 4 && this.status === 200) {
                if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
                    link.attr("href", this.responseText);
                    link.show();
                } else {
                    window.open(this.responseText);
                    $('#modal_recipe').modal('hide');
                }

                $('#div_loader').hide();

            }
        };
        xhttp.open("GET", url, true);
        xhttp.send();
    }

    function afterClick() {
        $('#modal_recipe').modal('hide');
        return true;
    }
</script>