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