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