summaryrefslogtreecommitdiff
path: root/resources/views/modals/media-file-fields.phtml
blob: 6ca785492a106ff35d6a09ced8d5eecd7d81bbfe (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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<?php

use Fisharebest\Webtrees\Http\RequestHandlers\AutoCompleteFolder;
use Fisharebest\Webtrees\I18N;
use Fisharebest\Webtrees\MediaFile;
use Fisharebest\Webtrees\Tree;

/**
 * @var string                   $max_upload_size
 * @var MediaFile|null           $media_file
 * @var array<int|string,string> $media_types
 * @var Tree                     $tree
 * @var array<string,string>     $unused_files
 */

?>

<div class="row form-group <?= $media_file instanceof MediaFile ? 'd-none' : '' ?>">
    <label class="col-form-label col-sm-2" for="file-location">
        <?= I18N::translate('Media file') ?>
    </label>
    <div class="col-sm-10">
        <select class="form-control" id="file-location" name="file_location">
            <option value="upload">
                <?= I18N::translate('A file on your computer') ?>
            </option>
            <?php if (!empty($unused_files)) : ?>
            <option value="unused">
                <?= I18N::translate('A file on the server') ?>
            </option>
            <?php endif ?>
            <option value="url">
                <?= /* I18N: URL = web address */ I18N::translate('A URL') ?>
            </option>
        </select>
    </div>
</div>

<div class="row form-group file-location file-location-upload <?= $media_file instanceof MediaFile ? 'd-none' : '' ?>">
    <label class="col-form-label col-sm-2" for="file">
        <?= I18N::translate('A file on your computer') ?>
    </label>
    <div class="col-sm-10">
        <input class="form-control-file" id="file" name="file" type="file">
        <small class="text-muted">
            <?= I18N::translate('Maximum upload size: ') ?>
            <?= $max_upload_size ?>
        </small>
    </div>
</div>

<div class="row form-group file-location file-location-upload <?= $media_file instanceof MediaFile && $media_file->isExternal() ? 'd-none' : '' ?>">
    <label class="col-form-label col-sm-2" for="folder">
        <?= I18N::translate('Filename on server') ?>
    </label>
    <div class="col-sm-10">
        <div class="row">
            <div class="col-sm-6">
                <div class="form-check">
                    <label class="form-check-label">
                        <span class="input-group">
                            <input class="form-check-input" type="radio" name="auto" value="0" checked>
                            <input class="form-control" id="folder" name="folder" placeholder="<?= I18N::translate('Folder') ?>" type="text" value="<?= e(dirname($media_file instanceof MediaFile ? $media_file->filename() : '') === '.' ? '' : dirname($media_file instanceof MediaFile ? $media_file->filename() : '')) ?>" data-wt-autocomplete-url="<?= e(route(AutoCompleteFolder::class, ['tree' => $tree->name()])) ?>" autocomplete="off">
                            <span class="input-group-text">/</span>
                        </span>
                    </label>
                </div>
            </div>
            <div class="col-sm-6">
                <input aria-label="<?= I18N::translate('Filename') ?>" class="form-control" name="new_file" type="text" placeholder="<?= I18N::translate('Same as uploaded file') ?>" value="<?= e(basename($media_file ? $media_file->filename() : '')) ?>">
            </div>
        </div>
        <div class="form-text">
            <?= I18N::translate('If you have a large number of media files, you can organize them into folders and subfolders.') ?>
        </div>
        <div class="form-check">
            <label class="form-check-label">
                <input class="form-check-input" type="radio" name="auto" value="1">
                <?= I18N::translate('Create a unique filename') ?>
            </label>
        </div>
    </div>
</div>

<div class="row form-group file-location file-location-unused d-none">
    <label class="col-form-label col-sm-2" for="unused">
        <?= I18N::translate('A file on the server') ?>
    </label>
    <div class="col-sm-10">
        <?= view('components/select', ['name' => 'unused', 'selected' => '', 'options' => $unused_files]) ?>
        <small class="text-muted">
        </small>
    </div>
</div>

<div class="row form-group file-location file-location-url <?= $media_file && $media_file->isExternal() ? '' : 'd-none' ?>">
    <label class="col-form-label col-sm-2" for="remote">
        <?= I18N::translate('URL') ?>
    </label>
    <div class="col-sm-10">
        <input class="form-control" type="url" id="remote" name="remote" placeholder="https://www.example.com/photo.jpeg" value="<?= e($media_file && $media_file->isExternal() ? $media_file->filename() : '') ?>">
    </div>
</div>

<div class="row form-group mb-3">
    <label class="col-form-label col-sm-2" for="title">
        <?= I18N::translate('Title') ?>
    </label>
    <div class="col-sm-10">
        <input class="form-control" id="title" name="title" type="text" value="<?= e($media_file ? $media_file->title() : '') ?>">
    </div>
</div>

<div class="row form-group mb-3">
    <label class="col-form-label col-sm-2" for="type">
        <?= I18N::translate('Media type') ?>
    </label>
    <div class="col-sm-10">
        <?= view('components/select', ['name' => 'type', 'selected' => $media_file ? $media_file->type() : '', 'options' => $media_types]) ?>
    </div>
</div>

<script>
    webtrees.autocomplete('#folder');
    document.getElementById('file-location').addEventListener('change', function () {
        document.querySelectorAll('.file-location').forEach((e) => e.classList.add('d-none'));
        document.querySelectorAll('.file-location-' + this.value).forEach((e) => e.classList.remove('d-none'));
    });
</script>