xref: /webtrees/resources/views/edit/reorder-card-header.phtml (revision e57829396e448d173bb4be808a8b9fd89548228b)
1<?php
2
3use Fisharebest\Webtrees\I18N;
4use Fisharebest\Webtrees\View;
5
6/**
7 * @var string $title
8 */
9
10?>
11<div class="d-flex">
12    <button class="btn btn-outline-secondary btn-sm drag-handle">
13        <?= view('icons/drag-handle') ?>
14    </button>
15
16    <div class="ms-2 me-auto">
17        <?= $title ?>
18    </div>
19
20    <div class="btn-group">
21        <button class="btn btn-outline-secondary btn-sm wt-btn-reorder wt-btn-reorder-first" type="button">
22            <?= I18N::translate('first') ?>
23        </button>
24
25        <button class="btn btn-outline-secondary btn-sm wt-btn-reorder wt-btn-reorder-previous" type="button">
26            <?= I18N::translate('up') ?>
27        </button>
28
29        <button class="btn btn-outline-secondary btn-sm wt-btn-reorder wt-btn-reorder-next" type="button">
30            <?= I18N::translate('down') ?>
31        </button>
32
33        <button class="btn btn-outline-secondary btn-sm wt-btn-reorder wt-btn-reorder-last" type="button">
34            <?= I18N::translate('last') ?>
35        </button>
36    </div>
37</div>
38
39<?php View::pushunique('javascript') ?>
40<script>
41    document.body.addEventListener('click', function(event) {
42        let target = event.target;
43
44        if (target.matches('.wt-btn-reorder')) {
45            let item = target.closest('.wt-sortable-item');
46            let list = target.closest('.wt-sortable-list');
47
48            if (target.matches('.wt-btn-reorder-first')) {
49                list.insertBefore(item, list.childNodes[0]);
50            }
51            if (target.matches('.wt-btn-reorder-previous') && item.previousElementSibling) {
52                list.insertBefore(item, item.previousElementSibling);
53            }
54            if (target.matches('.wt-btn-reorder-next') && item.nextElementSibling) {
55                list.insertBefore(item.nextElementSibling, item);
56            }
57            if (target.matches('.wt-btn-reorder-last')) {
58                list.insertBefore(item, null);
59            }
60        }
61    });
62</script>
63<?php View::endpushunique() ?>
64