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