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