summaryrefslogtreecommitdiff
path: root/resources/views/modals/create-media-object.phtml
blob: f36cadb571d98e3435d0b0cf831403e0718d9f38 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<?php use Fisharebest\Webtrees\I18N; ?>

<form method="post" action="<?= e(route('create-media-object')) ?>" id="wt-modal-form">
    <?= csrf_field() ?>
    <input type="hidden" name="tree" value="<?= e($tree->name()) ?>">

    <?= view('modals/header', ['title' => I18N::translate('Create a media object')]) ?>

    <div class="modal-body">
        <?= view('modals/media-object-fields', ['max_upload_size' => $max_upload_size, 'media_types' => $media_types, 'unused_files' => $unused_files]) ?>
    </div>

    <?= view('modals/footer-save-cancel') ?>
</form>

<script>
    // Submit the modal form using AJAX
    document.getElementById("wt-modal-form").addEventListener("submit", function (event) {
        event.preventDefault();
        let form          = event.target;
        let modal_content = document.querySelector("#wt-ajax-modal .modal-content");
        let select        = document.getElementById(modal_content.dataset.selectId);

        $.ajax({
            url:         form.action,
            type:        form.method,
            data:        new FormData(form),
            async:       false,
            cache:       false,
            contentType: false,
            processData: false,
            success:     function (data) {
                if (select) {
                    // If this modal was activated by the "new" button in a select2
                    // edit control, then insert the result and select it.
                    let option       = new Option(data.text, data.id, true, true);
                    option.innerHTML = option.innerText;

                    $(select)
                        .select2()
                        .empty()
                        .append(option)
                        .trigger("change");

                    $("#wt-ajax-modal").modal("hide");
                } else {
                    modal_content.innerHTML = data.html;
                }
            },
            failure:     function (data) {
                modal_content.innerHTML = data.html;
            },
        });
    });
</script>