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