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