xref: /webtrees/resources/views/edit-blocks-page.phtml (revision 0d047a8c74753c7558a60f4789c838996d6fae8b) 
1<?php
2
3use Fisharebest\Webtrees\I18N;
4use Fisharebest\Webtrees\Module\ModuleBlockInterface;
5use Fisharebest\Webtrees\View;
6use Illuminate\Support\Collection;
7
8/**
9 * @var Collection<string,ModuleBlockInterface> $all_blocks
10 * @var bool                                    $can_reset
11 * @var Collection<int,ModuleBlockInterface>    $main_blocks
12 * @var Collection<int,ModuleBlockInterface>    $side_blocks
13 * @var string                                  $title
14 * @var string                                  $url_cancel
15 * @var string                                  $url_save
16 */
17
18?>
19
20<h2><?= $title ?></h2>
21
22<p class="mt-4 mb-1">
23    <?= I18N::translate('Drag the blocks to change their position.') ?>
24</p>
25
26<form method="post" action="<?= e($url_save) ?>" id="edit-blocks">
27    <?= csrf_field() ?>
28    <div class="card-deck" id="current-blocks">
29        <div class="card">
30            <div class="card-body" id="main-blocks">
31                <?php foreach ($main_blocks as $block_id => $block) : ?>
32                    <?= view('edit-blocks-block', ['block_id' => $block_id, 'block' => $block]) ?>
33                <?php endforeach ?>
34            </div>
35        </div>
36        <div class="card">
37            <div class="card-body" id="side-blocks">
38                <?php foreach ($side_blocks as $block_id => $block) : ?>
39                    <?= view('edit-blocks-block', ['block_id' => $block_id, 'block' => $block]) ?>
40                <?php endforeach ?>
41            </div>
42        </div>
43    </div>
44
45    <p class="mt-4 mb-1">
46        <?= I18N::translate('Add more blocks from the following list.') ?>
47    </p>
48
49    <div class="d-flex flex-wrap" id="available-blocks">
50        <?php foreach ($all_blocks as $block_id => $block) : ?>
51            <?= view('edit-blocks-block', ['block_id' => $block_id, 'block' => $block]) ?>
52        <?php endforeach ?>
53    </div>
54
55    <hr>
56
57    <div>
58        <button class="btn btn-primary" type="submit">
59            <?= view('icons/save') ?>
60            <?= I18N::translate('save') ?>
61        </button>
62
63        <a class="btn btn-secondary" href="<?= e($url_cancel) ?>">
64            <?= view('icons/cancel') ?>
65            <?= I18N::translate('cancel') ?>
66        </a>
67
68        <?php if ($can_reset) : ?>
69            <button class="btn btn-link" id="defaults" type="submit" name="defaults" value="on" data-confirm="<?= I18N::translate('Restore the default block layout') ?>" onclick="return confirm(this.dataset.confirm)">
70                <?= I18N::translate('Restore the default block layout') ?>
71            </button>
72        <?php endif ?>
73    </div>
74</form>
75
76<?php View::push('styles') ?>
77<style>
78    #available-blocks .wt-icon-delete {
79        display: none;
80    }
81
82    #current-blocks .wt-icon-help {
83        display: none;
84    }
85</style>
86<?php View::endpush() ?>
87
88<?php View::push('javascript') ?>
89<script>
90    new Sortable(document.getElementById("main-blocks"), {
91        group:     "blocks",
92        handle:    ".wt-icon-drag-handle",
93        animation: 150,
94        pull:      "clone",
95    });
96
97    new Sortable(document.getElementById("side-blocks"), {
98        group:     "blocks",
99        handle:    ".wt-icon-drag-handle",
100        animation: 150,
101        pull:      "clone",
102    });
103
104    new Sortable(document.getElementById("available-blocks"), {
105        group:     {
106            name: "blocks",
107            pull: "clone",
108            put:  false,
109        },
110        handle:    ".wt-icon-drag-handle",
111        animation: 150,
112        sort:      false,
113    });
114
115    $("#current-blocks").on("click", ".wt-icon-delete", function () {
116        $(this).closest(".wt-block").remove();
117    });
118
119    $('#edit-blocks').submit(function () {
120        $('#main-blocks input').attr('name', 'main[]');
121        $('#side-blocks input').attr('name', 'side[]');
122    });
123</script>
124<?php View::endpush() ?>
125