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