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