xref: /webtrees/resources/views/modals/media-file-fields.phtml (revision f0ecc9a9ae19c64e946ac4b65cc1bb4ff475956e)
1<?php
2
3use Fisharebest\Webtrees\Elements\SourceMediaType;
4use Fisharebest\Webtrees\Http\RequestHandlers\AutoCompleteFolder;
5use Fisharebest\Webtrees\I18N;
6use Fisharebest\Webtrees\MediaFile;
7use Fisharebest\Webtrees\Tree;
8
9/**
10 * @var string                   $max_upload_size
11 * @var MediaFile|null           $media_file
12 * @var array<int|string,string> $media_types
13 * @var Tree                     $tree
14 * @var array<string,string>     $unused_files
15 */
16
17?>
18
19<div class="row <?= $media_file instanceof MediaFile ? 'd-none' : '' ?>">
20    <label class="col-form-label col-sm-2" for="file-location">
21        <?= I18N::translate('Media file') ?>
22    </label>
23    <div class="col-sm-10">
24        <select class="form-select" id="file-location" name="file_location">
25            <option value="upload">
26                <?= I18N::translate('A file on your computer') ?>
27            </option>
28            <?php if (!empty($unused_files)) : ?>
29            <option value="unused">
30                <?= I18N::translate('A file on the server') ?>
31            </option>
32            <?php endif ?>
33            <option value="url">
34                <?= /* I18N: URL = web address */ I18N::translate('A URL') ?>
35            </option>
36        </select>
37    </div>
38</div>
39
40<div class="row file-location file-location-upload <?= $media_file instanceof MediaFile ? 'd-none' : '' ?>">
41    <label class="col-form-label col-sm-2" for="file">
42        <?= I18N::translate('A file on your computer') ?>
43    </label>
44    <div class="col-sm-10">
45        <input class="form-control" id="file" name="file" type="file">
46        <small class="text-muted">
47            <?= I18N::translate('Maximum upload size: ') ?>
48            <?= $max_upload_size ?>
49        </small>
50    </div>
51</div>
52
53<div class="row file-location file-location-upload <?= $media_file instanceof MediaFile && $media_file->isExternal() ? 'd-none' : '' ?>">
54    <label class="col-form-label col-sm-2" for="folder">
55        <?= I18N::translate('Filename on server') ?>
56    </label>
57    <div class="col-sm-10">
58        <div class="row">
59            <div class="col-sm-6">
60                <div class="form-check">
61                    <input class="form-check-input" type="radio" name="auto" id="filename-manual" value="0" checked>
62                    <label class="form-check-label input-group" for="filename-manual">
63                        <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">
64                        <span class="input-group-text">/</span>
65                    </label>
66                </div>
67            </div>
68            <div class="col-sm-6">
69                <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() : '')) ?>">
70            </div>
71        </div>
72        <div class="form-text">
73            <?= I18N::translate('If you have a large number of media files, you can organize them into folders and subfolders.') ?>
74        </div>
75        <div class="form-check">
76            <input class="form-check-input" type="radio" name="auto" id="filename-auto" value="1">
77            <label class="form-check-label" for="filename-auto">
78                <?= I18N::translate('Create a unique filename') ?>
79            </label>
80        </div>
81    </div>
82</div>
83
84<div class="row file-location file-location-unused d-none">
85    <label class="col-form-label col-sm-2" for="unused">
86        <?= I18N::translate('A file on the server') ?>
87    </label>
88    <div class="col-sm-10">
89        <?= view('components/select', ['name' => 'unused', 'selected' => '', 'options' => $unused_files]) ?>
90        <small class="text-muted">
91        </small>
92    </div>
93</div>
94
95<div class="row file-location file-location-url <?= $media_file && $media_file->isExternal() ? '' : 'd-none' ?>">
96    <label class="col-form-label col-sm-2" for="remote">
97        <?= I18N::translate('URL') ?>
98    </label>
99    <div class="col-sm-10">
100        <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() : '') ?>">
101    </div>
102</div>
103
104<div class="row mb-3">
105    <label class="col-form-label col-sm-2" for="title">
106        <?= I18N::translate('Title') ?>
107    </label>
108    <div class="col-sm-10">
109        <input class="form-control" id="title" name="title" type="text" value="<?= e($media_file ? $media_file->title() : '') ?>">
110    </div>
111</div>
112
113<div class="row mb-3">
114    <label class="col-form-label col-sm-2" for="type">
115        <?= I18N::translate('Media type') ?>
116    </label>
117    <div class="col-sm-10">
118        <?= (new SourceMediaType(''))->edit('type', 'type', $media_file ? $media_file->type() : '', $tree) ?>
119    </div>
120</div>
121
122<script>
123    webtrees.autocomplete('#folder');
124    document.getElementById('file-location').addEventListener('change', function () {
125        document.querySelectorAll('.file-location').forEach((e) => e.classList.add('d-none'));
126        document.querySelectorAll('.file-location-' + this.value).forEach((e) => e.classList.remove('d-none'));
127    });
128</script>
129